:root{ --bg:#0a0c12; --panel:#151926; --line:#2b3248; --gold:#ffd35c; --green:#7ee787; --red:#ff6b6b; --txt:#eef1fb; --mut:#8c96b3; --padScale:1; }
*{ box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent; -webkit-user-select:none; user-select:none; touch-action:none; }
html,body{ height:100%; background:radial-gradient(ellipse at 50% 0%,#151b2e,#07080d 70%); color:var(--txt);
  font-family:'Segoe UI','Trebuchet MS',Tahoma,sans-serif; overflow:hidden; overscroll-behavior:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; }

/* The whole play area is forced LTR so the pad/buttons are never mirrored by the RTL document. */
#app{ height:100vh; height:100dvh; max-width:1000px; margin:0 auto; direction:ltr; display:grid; gap:6px;
  grid-template-rows:auto minmax(0,1fr) auto; grid-template-columns:minmax(0,1fr);
  grid-template-areas:"hud" "stage" "bottom";
  padding:max(6px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
#hud{ grid-area:hud; display:flex; align-items:stretch; gap:5px; direction:rtl; min-height:44px; }
#hud .cell{ flex:1; background:linear-gradient(#1b2133,#131725); border:1px solid var(--line); border-radius:10px; padding:3px 6px; display:flex; flex-direction:column; justify-content:center; min-width:0; text-align:center; }
#hud small{ font-size:9.5px; color:var(--mut); letter-spacing:.3px; }
#hud b{ font-size:14px; font-weight:800; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#hLives{ display:flex; flex-direction:column; align-items:center; line-height:1.12; font-size:13px !important; }
#hScore{ color:var(--gold); } #hLevel{ color:var(--green); font-size:12px; } #hLives{ color:var(--red); }
#hTime.warn{ color:#ff9d5c; animation:blink .8s infinite; } #hTime.crit{ color:#ff4d4d; font-size:12px; animation:blink .5s infinite; }
@keyframes blink{ 50%{ opacity:.45; } }
.pl{ margin:0 3px; } .pl.p1{ color:#7bf0a4; }
.hbtns{ display:flex; flex-direction:row; gap:4px; align-items:center; }
.ib{ background:#1d2336; border:1px solid var(--line); border-radius:8px; font-size:15px; width:34px; height:34px; line-height:1; }
.ib:active{ background:#2a3350; }
#stats{ position:absolute; left:6px; top:6px; display:flex; flex-direction:column; gap:3px; z-index:3; pointer-events:none; }
.chips{ display:flex; gap:3px; align-items:center; font-size:11px; background:rgba(8,10,18,.62); border-radius:8px; padding:2px 6px; direction:ltr; }
.chips i{ font-style:normal; } .chips b{ font-size:10px; color:#9fb0d0; } .chips.p1 b{ color:#7bf0a4; } .curse{ color:#c79bff; animation:blink .5s infinite; }

#stage{ grid-area:stage; position:relative; min-height:0; display:flex; align-items:center; justify-content:center; }
#game{ display:block; background:#000; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.65), 0 0 0 2px #232a40; }
#bossbar{ position:absolute; top:6px; left:50%; transform:translateX(-50%); width:56%; z-index:3; text-align:center; pointer-events:none; direction:rtl; }
#bossbar .nm{ font-size:12px; font-weight:800; color:#ffb3b3; text-shadow:0 1px 3px #000; }
#bossbar .bar{ height:9px; border-radius:6px; background:rgba(0,0,0,.6); border:1px solid #6a2b2b; overflow:hidden; }
#bbFill{ height:100%; width:100%; background:linear-gradient(90deg,#ff3b3b,#ff9d5c); transition:width .25s; }
#combo{ position:absolute; right:8px; top:8px; z-index:3; font-weight:900; color:var(--gold); text-shadow:0 2px 6px #000; font-size:18px; direction:rtl; pointer-events:none; animation:pulse .5s infinite alternate; }
@keyframes pulse{ to{ transform:scale(1.12); } }
#banner{ position:absolute; left:50%; top:22%; transform:translate(-50%,-30px) scale(.8); opacity:0; z-index:4; pointer-events:none; direction:rtl;
  font-size:clamp(22px,6vw,40px); font-weight:900; color:var(--gold); text-shadow:0 3px 0 #7a5230,0 0 24px rgba(255,200,80,.6); white-space:nowrap; transition:all .25s; }
#banner.show{ opacity:1; transform:translate(-50%,0) scale(1); }
#banner.danger{ color:#ff5a4d; text-shadow:0 3px 0 #5e1410,0 0 24px rgba(255,60,40,.7); }
#banner.warn{ color:#ff9d5c; } #banner.win{ color:#7ee787; text-shadow:0 3px 0 #1d5a2a,0 0 24px rgba(100,255,140,.6); }
#count{ position:absolute; left:50%; top:46%; transform:translate(-50%,-50%); z-index:4; pointer-events:none; direction:rtl;
  font-size:clamp(56px,16vw,120px); font-weight:900; color:#fff; text-shadow:0 4px 0 #2a3350,0 0 40px rgba(120,180,255,.8); opacity:0; }
#count.pop{ animation:popin .9s ease-out forwards; }
@keyframes popin{ 0%{ opacity:0; transform:translate(-50%,-50%) scale(2.2); } 20%{ opacity:1; transform:translate(-50%,-50%) scale(1); } 80%{ opacity:1; } 100%{ opacity:0; transform:translate(-50%,-50%) scale(.8); } }

#overlay{ position:absolute; inset:0; z-index:6; display:none; align-items:center; justify-content:center; direction:rtl; text-align:center;
  background:radial-gradient(ellipse at center,rgba(8,10,18,.42),rgba(4,5,10,.8)); border-radius:10px; overflow:auto; padding:10px; touch-action:pan-y; }
#overlay.cardwrap{ background:rgba(4,5,10,.55); }
.panel{ width:min(94%,420px); background:linear-gradient(#1a2033,#121624); border:1px solid var(--line); border-radius:18px; padding:16px 16px 14px; display:flex; flex-direction:column; gap:10px; box-shadow:0 18px 50px rgba(0,0,0,.6); }
.panel.wide{ width:min(96%,560px); } .panel h2{ font-size:22px; color:var(--gold); } .panel h2.bad{ color:var(--red); }
.title .logo{ display:flex; align-items:center; justify-content:center; gap:10px; }
.title h1{ font-size:clamp(34px,9vw,54px); background:linear-gradient(#fff3b0,#ffb23d 60%,#e0701f); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 3px 0 #6b3a12); letter-spacing:1px; }
.bomb{ font-size:clamp(34px,9vw,52px); animation:bob 1.6s ease-in-out infinite; } @keyframes bob{ 50%{ transform:translateY(-6px) rotate(8deg); } }
.sub{ color:var(--mut); font-size:13px; } .hi{ color:var(--gold); font-size:13px; }
.row{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; } .row>.btn{ flex:1; min-width:110px; }
.btn{ background:#222a42; border:1px solid #38425e; border-radius:12px; padding:11px 14px; font-size:15px; font-weight:700; transition:transform .08s,background .15s; }
.btn:active{ transform:scale(.96); background:#2f3a5c; }
.btn.primary{ background:linear-gradient(#ffcf5a,#f09a22); color:#2a1800; border-color:#ffe08a; box-shadow:0 4px 0 #a5620f; font-size:17px; }
.btn.primary:active{ box-shadow:0 1px 0 #a5620f; transform:translateY(3px); }
.btn.ghost{ background:transparent; color:var(--mut); } .btn.tog.on{ border-color:#4f9d68; color:#b8f5cb; }
.sl{ display:flex; align-items:center; justify-content:space-between; gap:12px; font-size:14px; color:#cfd6ea; } .sl input{ flex:1; max-width:55%; accent-color:#ffb23d; touch-action:pan-x; }
.lvgrid{ display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.lv{ background:linear-gradient(#212943,#161b2e); border:1px solid var(--line); border-top:3px solid var(--c); border-radius:10px; padding:6px 2px; display:flex; flex-direction:column; align-items:center; gap:1px; min-height:70px; }
.lv .n{ font-size:20px; font-weight:900; } .lv .t{ font-size:9px; color:var(--mut); line-height:1.2; } .lv .st{ color:var(--gold); font-size:11px; } .lv.locked{ opacity:.4; }
.how{ text-align:right; padding-right:18px; font-size:13px; line-height:1.9; color:#d3daee; }
.pwgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; } .pw{ display:flex; align-items:center; gap:8px; background:#10131f; border-radius:10px; padding:5px 8px; font-size:12px; }
.pw .ic{ width:28px; height:28px; border-radius:50%; background:var(--c); display:flex; align-items:center; justify-content:center; font-size:15px; }
.stars{ font-size:40px; color:var(--gold); letter-spacing:6px; text-shadow:0 0 20px rgba(255,200,60,.6); }
.sum{ display:flex; justify-content:space-between; padding:6px 10px; background:#10131f; border-radius:10px; font-size:14px; } .sum.big b{ color:var(--gold); font-size:20px; }
.card{ width:min(88%,380px); padding:22px 16px; border-radius:20px; border:2px solid var(--c); background:linear-gradient(160deg,var(--s1),var(--s2)); box-shadow:0 0 40px color-mix(in srgb,var(--c) 40%,transparent); animation:cardin .5s ease-out; }
@keyframes cardin{ from{ transform:scale(.7) rotate(-3deg); opacity:0; } }
.cn{ color:var(--mut); font-size:14px; } .cname{ font-size:clamp(24px,7vw,34px); font-weight:900; color:#fff; margin:4px 0; text-shadow:0 0 18px var(--c); } .cth{ color:var(--c); font-size:14px; } .cboss{ margin-top:8px; color:#ff8a8a; font-weight:800; }

/* ---------- touch controls (hidden unless a touch device) ---------- */
#bottom,#bottom2{ display:none; align-items:center; justify-content:space-between; padding:0 6px; }
body.touch #bottom{ display:flex; grid-area:bottom; }
body.touch #app.twop #bottom2{ display:flex; grid-area:bottom2; }
#app.twop{ grid-template-rows:auto minmax(0,1fr) auto auto; grid-template-areas:"hud" "stage" "bottom" "bottom2"; }
#app.swap #bottom,#app.swap #bottom2{ flex-direction:row-reverse; }
.pad{ position:relative; width:calc(148px*var(--padScale)); height:calc(148px*var(--padScale)); border-radius:50%; touch-action:none;
  background:radial-gradient(circle at 50% 40%,#2a3150,#161a2a 70%); border:2px solid #3a4466; box-shadow:inset 0 0 22px rgba(0,0,0,.6),0 4px 14px rgba(0,0,0,.5); }
.pad::before{ content:'▲'; position:absolute; top:8px; left:50%; transform:translateX(-50%); color:#56608a; font-size:13px; }
.pad::after{ content:'▼'; position:absolute; bottom:8px; left:50%; transform:translateX(-50%); color:#56608a; font-size:13px; }
.pad .l,.pad .r{ position:absolute; top:50%; transform:translateY(-50%); color:#56608a; font-size:13px; } .pad .l{ left:9px; } .pad .r{ right:9px; }
.knob{ position:absolute; left:50%; top:50%; width:calc(60px*var(--padScale)); height:calc(60px*var(--padScale)); margin:calc(-30px*var(--padScale)); border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#7d8ec4,#3b4770); border:2px solid #9fb0e0; box-shadow:0 4px 10px rgba(0,0,0,.55); }
.pad.small{ width:calc(104px*var(--padScale)); height:calc(104px*var(--padScale)); } .pad.small .knob{ width:calc(44px*var(--padScale)); height:calc(44px*var(--padScale)); margin:calc(-22px*var(--padScale)); }
.acts{ display:flex; align-items:center; gap:12px; }
.abtn{ width:calc(92px*var(--padScale)); height:calc(92px*var(--padScale)); border-radius:50%; border:3px solid #ffb23d; font-size:calc(40px*var(--padScale)); display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 35% 30%,#4a4f63,#14161f); box-shadow:0 5px 0 #7a4a10,0 8px 18px rgba(0,0,0,.55); touch-action:none; }
.abtn.down{ transform:translateY(4px); box-shadow:0 1px 0 #7a4a10; border-color:#fff; }
.abtn.sm{ width:calc(60px*var(--padScale)); height:calc(60px*var(--padScale)); font-size:calc(26px*var(--padScale)); border-color:#59c2ff; box-shadow:0 4px 0 #1d5f87; display:none; }
#app.remote .abtn.sm{ display:flex; }
.abtn.p2{ width:calc(66px*var(--padScale)); height:calc(66px*var(--padScale)); font-size:calc(28px*var(--padScale)); border-color:#7bf0a4; box-shadow:0 4px 0 #2a8a4e; }

/* landscape phones: the map gets the FULL screen height; HUD moves into the left column, buttons into the right */
@media (orientation:landscape) and (max-height:620px){
  #app{ max-width:none; gap:4px 8px; padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));
    grid-template-columns:auto minmax(0,1fr) auto; grid-template-rows:auto minmax(0,1fr);
    grid-template-areas:"hud stage rt" "padL stage btns"; }
  #stage{ grid-row:1 / span 2; }
  #hud{ flex-direction:column; width:118px; min-height:0; gap:3px; align-self:start; }
  #hud .cell{ flex:none; padding:2px 6px; border-radius:8px; }
  #hud .cell:nth-child(2){ display:none; }
  #hud small{ font-size:9px; } #hud b{ font-size:13px; }
  .hbtns{ position:fixed; top:max(4px,env(safe-area-inset-top)); right:max(8px,env(safe-area-inset-right)); z-index:7; flex-direction:column; }
  body.touch #bottom{ display:contents; }
  body.touch #bottom #padWrap1{ grid-area:padL; align-self:end; justify-self:center; }
  body.touch #bottom #acts1{ grid-area:btns; align-self:end; justify-self:center; }
  body.touch #app.twop #bottom2{ display:none; }
  #app.swap #bottom #padWrap1{ grid-area:btns; } #app.swap #bottom #acts1{ grid-area:padL; }
  .pad{ width:calc(118px*var(--padScale)); height:calc(118px*var(--padScale)); } .knob{ width:calc(50px*var(--padScale)); height:calc(50px*var(--padScale)); margin:calc(-25px*var(--padScale)); }
  .acts{ flex-direction:column-reverse; } .abtn{ width:calc(78px*var(--padScale)); height:calc(78px*var(--padScale)); }
  #stats{ top:4px; left:4px; }
}
@media (min-width:900px) and (pointer:fine){ #hud b{ font-size:17px; } }

.lbl{ text-align:right; color:var(--mut); font-size:12px; margin-bottom:-4px; } .btn.seg{ padding:8px 6px; font-size:14px; min-width:0; }

#toast{ position:absolute; left:50%; top:10px; transform:translate(-50%,-80px); z-index:9; direction:rtl; background:linear-gradient(#2a3350,#1b2238); border:1px solid #ffd35c; color:#ffe9a8; padding:8px 16px; border-radius:14px; font-weight:800; font-size:14px; box-shadow:0 8px 24px rgba(0,0,0,.5); transition:transform .35s,opacity .35s; pointer-events:none; white-space:nowrap; opacity:0; visibility:hidden; }
#toast.show{ transform:translate(-50%,0); opacity:1; visibility:visible; }
#hint{ position:absolute; left:50%; bottom:10px; transform:translateX(-50%); z-index:4; direction:rtl; display:none; background:rgba(10,14,26,.82); border:1px solid #4f9d68; color:#d4ffe1; padding:7px 14px; border-radius:20px; font-weight:700; font-size:13px; max-width:92%; text-align:center; pointer-events:none; animation:pulse 1s infinite alternate; }
.swrow{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; } .swatch{ width:34px; height:34px; border-radius:50%; border:3px solid transparent; box-shadow:0 2px 6px rgba(0,0,0,.5); } .swatch.sel{ border-color:#fff; transform:scale(1.12); }
.achgrid{ display:grid; grid-template-columns:repeat(2,1fr); gap:6px; max-height:46vh; overflow:auto; touch-action:pan-y; } .ach{ display:flex; align-items:center; gap:8px; background:#10131f; border-radius:10px; padding:6px 8px; opacity:.55; text-align:right; } .ach.got{ opacity:1; border:1px solid #4a4020; background:#1a1810; }
.ach .ai{ font-size:22px; } .ach .at{ display:flex; flex-direction:column; } .ach b{ font-size:12px; } .ach small{ font-size:10px; color:var(--mut); }