/* ==========================================================
   غروب القفز — هوية سبعينيات دافئة
   ========================================================== */
:root{
  --mustard:#D9A441;
  --burnt:#C15E28;
  --choco:#4A2C1D;
  --choco-deep:#2A1810;
  --choco-light:#6B4326;
  --cream:#F2E3C6;
  --avo:#7A8B4A;
  --teal:#2F6E6A;
  --gold:#F0B93C;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  height:100%; margin:0; padding:0;
  overflow:hidden;
  background:var(--choco-deep);
  color:var(--cream);
  font-family:'Tajawal', system-ui, -apple-system, sans-serif;
  user-select:none; -webkit-user-select:none;
  overscroll-behavior:none;
  touch-action:manipulation;
}

button{ font-family:inherit; color:inherit; cursor:pointer; touch-action:manipulation; }

.app{
  position:fixed; inset:0;
  display:flex; flex-direction:column;
  background:var(--choco-deep);
}

/* ---------------- HUD ---------------- */
.hud{
  flex:0 0 auto;
  padding:8px 10px 6px;
  display:flex; justify-content:center;
  background:linear-gradient(to bottom, #2A1810, #2A1810 62%, rgba(42,24,16,0));
  z-index:12;
}
.hud-inner{
  display:flex; align-items:center; gap:4px;
  width:100%; max-width:600px;
  background:linear-gradient(to bottom, #5A3722, #4A2C1D);
  border:2px solid var(--choco-light);
  border-radius:18px;
  padding:6px 8px;
  box-shadow:0 5px 0 rgba(0,0,0,.32), inset 0 1px 0 rgba(242,227,198,.14);
}
.stat{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  flex:1 1 0; min-width:0;
}
.stat-label{
  font-size:10px; font-weight:500; line-height:1;
  color:#C9A87E; margin-bottom:3px; white-space:nowrap;
}
.stat-value{
  font-family:'Baloo Bhaijaan 2', 'Tajawal', sans-serif;
  font-weight:800;
  font-size:clamp(17px, 5.2vw, 23px);
  line-height:1;
  color:var(--cream);
  font-variant-numeric:tabular-nums;
  letter-spacing:.01em;
  transition:color .2s;
}
.stat-value.warn{ color:#FF9C55; animation:pulseWarn .9s ease-in-out infinite; }
@keyframes pulseWarn{ 0%,100%{opacity:1} 50%{opacity:.45} }

.sep{ width:1px; height:26px; background:rgba(242,227,198,.14); flex:0 0 auto; border-radius:1px; }

.hud-btn{
  flex:0 0 auto;
  width:38px; height:38px; margin-inline-start:2px;
  display:grid; place-items:center;
  border-radius:12px;
  border:none;
  background:linear-gradient(to bottom, var(--mustard), #B9872C);
  color:#3A2113;
  box-shadow:0 3px 0 #7d5a17, inset 0 1px 0 rgba(255,255,255,.35);
  transition:transform .1s, box-shadow .1s;
}
.hud-btn svg{ width:20px; height:20px; }
.hud-btn:active{ transform:translateY(3px); box-shadow:0 0 0 #7d5a17, inset 0 1px 0 rgba(255,255,255,.3); }

/* ---------------- Stage ---------------- */
.stage{
  position:relative;
  flex:1 1 auto;
  min-height:0;
  overflow:hidden;
  background:#E0763A;
  touch-action:none;
}
#gl{
  position:absolute; inset:0;
  width:100%; height:100%;
  display:block;
}
.grain{
  position:absolute; inset:0;
  pointer-events:none;
  opacity:.13;
  mix-blend-mode:overlay;
  background-repeat:repeat;
  background-size:96px 96px;
}

.hint{
  position:absolute; left:50%; bottom:10px;
  transform:translateX(-50%);
  background:rgba(42,24,16,.78);
  color:var(--cream);
  font-size:12px; font-weight:500;
  padding:6px 14px;
  border-radius:999px;
  border:1px solid rgba(242,227,198,.18);
  pointer-events:none;
  white-space:nowrap;
  max-width:92%;
  overflow:hidden; text-overflow:ellipsis;
  transition:opacity .6s;
}
.hint.fade{ opacity:0; }

.toast{
  position:absolute; left:50%; top:38%;
  transform:translate(-50%,-50%) scale(.7);
  background:linear-gradient(to bottom, var(--mustard), #C08F2E);
  color:#3A2113;
  font-family:'Baloo Bhaijaan 2', sans-serif;
  font-weight:800;
  font-size:clamp(18px, 5.5vw, 26px);
  padding:12px 26px;
  border-radius:20px;
  border:3px solid #F2E3C6;
  box-shadow:0 10px 30px rgba(0,0,0,.45);
  opacity:0; pointer-events:none;
  transition:opacity .25s, transform .35s cubic-bezier(.2,1.6,.4,1);
  text-align:center;
  max-width:86%;
}
.toast.show{ opacity:1; transform:translate(-50%,-50%) scale(1); }

/* ---------------- Controls ---------------- */
.controls{
  flex:0 0 auto;
  padding:4px 16px 10px;
  background:linear-gradient(to top, #2A1810, #2A1810 55%, rgba(42,24,16,0));
  z-index:12;
}
/* العصا في أقصى الطرف الأيسر وزر القفز في أقصى الطرف الأيمن،
   بدل تجمّعهما معًا في وسط الشاشة. */
.dock{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap:12px;
  width:100%;
  flex:1 1 auto;
  min-width:0;
  max-width:none; margin:0;
  min-height:112px;
}
.joy-zone{ display:flex; align-items:center; justify-content:center; flex:0 0 auto; }
.act-zone{ flex:0 0 auto; }

.joy{
  position:relative;
  width:112px; height:112px;
  border-radius:50%;
  background:radial-gradient(circle at 50% 32%, rgba(242,227,198,.16), rgba(242,227,198,.04) 60%, rgba(0,0,0,.22));
  border:3px solid rgba(242,227,198,.26);
  box-shadow:inset 0 6px 16px rgba(0,0,0,.4);
  touch-action:none;
}
.joy::after{
  content:'';
  position:absolute; inset:26%;
  border-radius:50%;
  border:2px dashed rgba(242,227,198,.14);
}
.joy-knob{
  position:absolute; left:50%; top:50%;
  width:54px; height:54px; margin:-27px 0 0 -27px;
  border-radius:50%;
  background:linear-gradient(to bottom, #E7BE6B, var(--mustard) 55%, #B9872C);
  border:2px solid rgba(255,255,255,.28);
  box-shadow:0 4px 0 #7d5a17, 0 8px 16px rgba(0,0,0,.4);
  display:grid; place-items:center;
  transition:transform .09s ease-out;
  will-change:transform;
}
.joy-knob::after{
  content:'';
  width:16px; height:16px;
  border-radius:50%;
  background:rgba(74,44,29,.35);
}
.joy.active .joy-knob{ transition:none; }

.act-zone{ display:flex; align-items:center; gap:12px; }

.btn-jump{
  width:92px; height:92px;
  border-radius:50%;
  border:3px solid rgba(242,227,198,.4);
  background:linear-gradient(to bottom, #E08A3A, var(--burnt) 60%, #9C4719);
  color:#FFF3DC;
  font-family:'Baloo Bhaijaan 2', sans-serif;
  font-weight:800;
  font-size:14px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px;
  box-shadow:0 6px 0 #73320F, 0 10px 20px rgba(0,0,0,.4), inset 0 2px 0 rgba(255,255,255,.28);
  transition:transform .08s, box-shadow .08s;
  touch-action:none;
}
.btn-jump svg{ width:26px; height:26px; }
.btn-jump:active, .btn-jump.pressed{
  transform:translateY(5px);
  box-shadow:0 1px 0 #73320F, inset 0 2px 0 rgba(255,255,255,.2);
}
.btn-jump span{ line-height:1; }

/* قاعدة الإطار تقصّ كل زر في شريط التحكم إلى 80×56 وتجعله يتمدد،
   فينكمش زر القفز ويلتصق بالعصا في منتصف الشاشة. هذه القاعدة تعيده
   دائرة كاملة وتثبّته في الطرف المقابل للعصا. */
.controls .dock .btn-jump{
  flex:0 0 auto;
  width:92px; height:92px;
  min-width:0; min-height:0;
  max-width:none; max-height:none;
}

/* ---------------- Overlays ---------------- */
.overlay{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:center; justify-content:center;
  padding:16px;
  background:rgba(30,17,10,.82);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
  overflow-y:auto;
  animation:overlayIn .3s ease-out;
}
.overlay.hidden{ display:none; }
@keyframes overlayIn{ from{opacity:0} to{opacity:1} }

.panel{
  width:100%; max-width:420px;
  background:linear-gradient(to bottom, #5A3722, #3E2418);
  border:3px solid var(--mustard);
  border-radius:26px;
  padding:20px 18px 18px;
  box-shadow:0 18px 48px rgba(0,0,0,.6), inset 0 2px 0 rgba(242,227,198,.16);
  animation:panelIn .4s cubic-bezier(.2,1.4,.4,1);
}
@keyframes panelIn{ from{transform:translateY(18px) scale(.94); opacity:0} to{transform:none; opacity:1} }

.title-wrap{ text-align:center; margin-bottom:14px; }
.title{
  font-family:'Baloo Bhaijaan 2', 'Tajawal', sans-serif;
  font-weight:800;
  font-size:clamp(30px, 9vw, 40px);
  line-height:1.1;
  margin:0;
  color:var(--mustard);
  text-shadow:0 3px 0 #7A4A22, 0 6px 14px rgba(0,0,0,.4);
  letter-spacing:0;
}
.subtitle{
  margin:6px 0 0;
  font-size:13.5px;
  color:#E3CDA6;
}

.chip-row{
  display:flex; flex-wrap:wrap; gap:6px; justify-content:center;
  margin-bottom:16px;
}
.chip{
  font-size:11.5px; font-weight:500;
  padding:4px 11px;
  border-radius:999px;
  background:rgba(217,164,65,.16);
  border:1px solid rgba(217,164,65,.4);
  color:#F0D9AE;
}

.picker{ margin-bottom:18px; text-align:center; }
.picker-label{ display:block; font-size:12.5px; color:#D9BE96; margin-bottom:9px; }
.swatches{ display:flex; gap:14px; justify-content:center; }
.swatch{
  width:46px; height:46px;
  border-radius:14px;
  background:var(--sw);
  border:3px solid rgba(242,227,198,.25);
  box-shadow:0 4px 0 rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.25);
  transition:transform .14s, border-color .14s;
}
.swatch.is-active{
  border-color:var(--cream);
  transform:translateY(-3px) scale(1.06);
  box-shadow:0 7px 0 rgba(0,0,0,.35), 0 0 0 3px rgba(242,227,198,.2);
}

.btn-primary{
  display:block; width:100%;
  padding:15px 20px;
  border:none;
  border-radius:18px;
  background:linear-gradient(to bottom, #EEC15F, var(--mustard) 52%, #B9872C);
  color:#3A2113;
  font-family:'Baloo Bhaijaan 2', sans-serif;
  font-weight:800;
  font-size:21px;
  box-shadow:0 6px 0 #7d5a17, 0 12px 24px rgba(0,0,0,.35), inset 0 2px 0 rgba(255,255,255,.4);
  transition:transform .08s, box-shadow .08s;
  min-height:56px;
}
.btn-primary:active{
  transform:translateY(5px);
  box-shadow:0 1px 0 #7d5a17, inset 0 2px 0 rgba(255,255,255,.3);
}

.howto{
  list-style:none;
  margin:16px 0 0; padding:12px 14px;
  background:rgba(0,0,0,.2);
  border-radius:16px;
  font-size:12.5px;
  line-height:1.9;
  color:#D9C4A2;
}
.howto b{ color:var(--mustard); font-weight:700; }

/* ---------------- End screen ---------------- */
.panel-end{ text-align:center; }
.end-title{
  font-family:'Baloo Bhaijaan 2', sans-serif;
  font-weight:800;
  font-size:23px;
  margin:0 0 6px;
  color:#F0D9AE;
}
.bigscore{
  font-family:'Baloo Bhaijaan 2', sans-serif;
  font-weight:800;
  font-size:clamp(52px, 16vw, 72px);
  line-height:1;
  color:var(--mustard);
  text-shadow:0 4px 0 #7A4A22, 0 8px 22px rgba(0,0,0,.45);
  font-variant-numeric:tabular-nums;
  margin-top:4px;
}
.scoreunit{ font-size:13px; color:#C9A87E; margin-bottom:16px; }

.breakdown{
  background:rgba(0,0,0,.22);
  border-radius:16px;
  padding:12px 14px;
  margin-bottom:18px;
  display:flex; flex-direction:column; gap:9px;
}
.bd-row{
  display:flex; justify-content:space-between; align-items:center;
  font-size:13.5px; color:#D9C4A2;
  gap:10px;
}
.bd-row b{
  font-family:'Baloo Bhaijaan 2', sans-serif;
  color:var(--cream);
  font-size:16px;
  font-variant-numeric:tabular-nums;
}
.best-line{ margin:12px 0 0; font-size:12.5px; color:#BFA57E; }
.best-line b{ color:var(--mustard); }

/* ---------------- Small screens ---------------- */
@media (max-width:430px){
  .joy{ width:104px; height:104px; }
  .joy-knob{ width:50px; height:50px; margin:-25px 0 0 -25px; }
  .controls .dock .btn-jump{ width:88px; height:88px; font-size:12px; }
  .btn-jump svg{ width:24px; height:24px; }
  .dock{ min-height:104px; gap:8px; }
  .controls{ padding:2px 14px 8px; }
  .hud-inner{ padding:5px 6px; border-radius:16px; }
  .hud-btn{ width:34px; height:34px; border-radius:11px; }
  .hud-btn svg{ width:17px; height:17px; }
  .hint{ font-size:11px; }
}

@media (max-height:520px){
  .hud-inner{ padding:3px 6px; }
  .stat-value{ font-size:15px; }
  .stat-label{ font-size:9px; margin-bottom:1px; }
  .dock{ min-height:70px; }
  .joy{ width:74px; height:74px; border-width:2px; }
  .joy-knob{ width:38px; height:38px; margin:-19px 0 0 -19px; }
  .controls .dock .btn-jump{ width:70px; height:70px; font-size:11px; border-width:2px; }
  .btn-jump svg{ width:18px; height:18px; }
  .panel{ padding:14px; }
  .howto{ display:none; }
}

@media (prefers-reduced-motion: reduce){
  .title, .panel, .overlay{ animation:none !important; }
  .stat-value.warn{ animation:none; }
}