/* Queen Tech Arcade – shared game page styles */
:root{--bg:#131210;--bg-2:#1A1916;--surface:#201E1A;--surface-2:#2A2722;--ink:#EFE8DB;--muted:#A79E8F;--dim:#6E675C;--line:#36322B;--line-2:#4A443A;
  --gold:#E2A63F;--gold-2:#F3C877;--red:#E25B45;--green:#5FC8A0;--wa:#2FA866;
  --f-display:"Big Shoulders Display","Arial Narrow",system-ui,sans-serif;--f-body:"Figtree","Segoe UI",system-ui,sans-serif;--f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:#0d0c0a;color:var(--ink);font-family:var(--f-body);overflow:hidden;overscroll-behavior:none;
  -webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
html[dir=rtl] body{font-family:"IBM Plex Sans Arabic","Noto Kufi Arabic",var(--f-body)}
[hidden]{display:none!important}
.g-app{display:flex;flex-direction:column;height:100vh;height:100dvh;height:var(--app-h,100dvh)}
.g-bar{flex:none;display:flex;align-items:center;gap:8px;padding:8px 10px;padding-top:calc(8px + env(safe-area-inset-top));background:var(--bg);border-bottom:1px solid var(--line);min-height:52px}
.g-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);text-decoration:none;font-weight:600;font-size:.88rem;padding:6px 8px;border-radius:6px;white-space:nowrap}
.g-back:hover{color:var(--ink);background:var(--surface)}
.g-back svg{width:18px;height:18px}
html[dir=rtl] .g-back svg{transform:scaleX(-1)}
.g-title{font:900 1.15rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html[dir=rtl] .g-title{font-family:"Noto Kufi Arabic",var(--f-display);font-size:1rem;text-transform:none}
.g-hud{margin-inline-start:auto;display:flex;gap:8px;align-items:center;font:600 .8rem var(--f-mono);color:var(--muted);white-space:nowrap}
.g-hud b{color:var(--gold-2);font-weight:600}
.g-hud span{display:inline-flex;gap:4px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 9px}
.g-ib{all:unset;cursor:pointer;width:34px;height:34px;display:grid;place-items:center;border-radius:8px;color:var(--muted);flex:none}
.g-ib:hover,.g-ib:focus-visible{background:var(--surface);color:var(--ink)}
.g-ib svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.g-bar .lang-tg{flex:none}
.g-stage{position:relative;flex:1;min-height:0;touch-action:none;overflow:hidden;background:#0d0c0a}
.g-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.g-ov{position:absolute;inset:0;z-index:5;display:grid;place-items:center;padding:16px;background:rgba(13,12,10,.74);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);overflow:auto}
.g-card{width:100%;max-width:430px;background:var(--surface);border:1px solid var(--line-2);border-radius:16px;padding:22px 20px;text-align:center;box-shadow:0 30px 80px -30px rgba(0,0,0,.9)}
.g-card .k{font:600 .7rem var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
html[dir=rtl] .g-card .k{font-family:inherit;letter-spacing:0}
.g-card h2{margin:8px 0 6px;font:900 2.2rem/1 var(--f-display);text-transform:uppercase}
html[dir=rtl] .g-card h2{font-family:"Noto Kufi Arabic",var(--f-display);font-size:1.7rem;line-height:1.35;text-transform:none}
.g-card p{color:var(--muted);margin:6px 0;line-height:1.55;font-size:.95rem}
.g-card .how{display:grid;gap:6px;margin:12px 0 4px;text-align:start;font-size:.9rem;color:var(--ink)}
.g-card .how div{display:flex;gap:10px;align-items:center;background:var(--bg-2);border:1px solid var(--line);border-radius:8px;padding:8px 10px}
.g-card .how kbd{font:600 .78rem var(--f-mono);background:var(--surface-2);border:1px solid var(--line-2);border-radius:5px;padding:2px 6px;color:var(--gold-2);white-space:nowrap}
.g-card .stats{display:flex;justify-content:center;gap:10px;margin:14px 0 4px;flex-wrap:wrap}
.g-card .stats div{background:var(--bg-2);border:1px solid var(--line);border-radius:10px;padding:8px 14px;min-width:96px}
.g-card .stats b{display:block;font:900 1.9rem/1 var(--f-display);color:var(--gold)}
.g-card .stats small{color:var(--muted);font-size:.75rem}
.g-card .btns{display:grid;gap:9px;margin-top:16px}
.g-card button,.g-card a.b{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px 16px;border-radius:10px;font-weight:700;font-size:1rem;border:1px solid var(--line-2);color:var(--ink);text-align:center}
.g-card button.go{background:var(--gold);border-color:var(--gold);color:#131210}
.g-card button.go:hover{background:var(--gold-2)}
.g-card .wa{background:var(--wa)!important;border-color:var(--wa)!important;color:#fff!important}
.g-card button:focus-visible,.g-card a.b:focus-visible{outline:2px solid var(--gold-2);outline-offset:2px}
.g-card .levels{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:12px}
.g-card .levels button{padding:9px 0;border-radius:8px;font:700 .95rem var(--f-mono)}
.g-card .levels button[disabled]{opacity:.3;cursor:default}
.g-card .levels button.cur{border-color:var(--gold);color:var(--gold-2)}
.g-card .promo{margin-top:14px;font-size:.85rem}
.g-card .promo a{color:var(--gold-2)}
.g-toast{position:absolute;top:12px;left:50%;transform:translateX(-50%);z-index:4;max-width:90%;background:rgba(32,30,26,.94);border:1px solid var(--line-2);border-radius:999px;padding:8px 16px;font-weight:700;font-size:.95rem;pointer-events:none;transition:opacity .35s;text-align:center}
.g-toast.off{opacity:0}
.g-pad{flex:none;display:none;direction:ltr;justify-content:space-between;align-items:center;gap:12px;padding:10px 16px;padding-bottom:calc(10px + env(safe-area-inset-bottom));background:var(--bg);border-top:1px solid var(--line);touch-action:none}
.touch .g-pad{display:flex}
.g-pad .grp{display:flex;gap:12px}
.g-pad button{all:unset;width:74px;height:74px;border-radius:50%;display:grid;place-items:center;background:var(--surface);border:1px solid var(--line-2);color:var(--ink);touch-action:none;-webkit-user-select:none;user-select:none}
.g-pad button svg{width:30px;height:30px;fill:currentColor}
.g-pad button.on{background:var(--gold);color:#131210;border-color:var(--gold)}
.g-hint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:3;font-size:.8rem;color:var(--muted);background:rgba(19,18,16,.85);border:1px solid var(--line);border-radius:999px;padding:5px 12px;pointer-events:none;white-space:nowrap}
@media (orientation:landscape) and (max-height:520px){
  .g-bar{min-height:44px;padding-top:4px;padding-bottom:4px}
  .touch .g-pad{position:fixed;left:0;right:0;bottom:0;background:transparent;border:0;pointer-events:none;padding:8px 18px calc(8px + env(safe-area-inset-bottom))}
  .touch .g-pad button{pointer-events:auto;opacity:.78;width:66px;height:66px}
}
@media (max-width:480px){.g-title{display:none}}
@media (max-width:420px){.g-back span{display:none}.g-hud span{padding:3px 7px}.g-hud{gap:5px}}
.g-card .how kbd,.g-hud b{direction:ltr;unicode-bidi:isolate}

.g-card .mis{margin-top:10px;font-size:.9rem;color:var(--ink,#EFE8DB);background:rgba(226,166,63,.1);border:1px solid rgba(226,166,63,.35);border-radius:6px;padding:8px 10px}
.g-card .mis b{color:var(--gold-2,#F3C877)}

/* jump control setting + swipe mode */
.swipe-jump .g-pad [data-k="j"]{display:none}
.g-card .jset{margin-top:14px;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;font-size:.86rem;color:var(--muted,#A79E8F)}
.g-card .seg{display:inline-flex;border:1px solid var(--line-2,#4A443A);border-radius:999px;overflow:hidden}
.g-card .seg button{all:unset;cursor:pointer;padding:7px 12px;font-size:.84rem;font-weight:600;color:var(--ink,#EFE8DB)}
.g-card .seg button[aria-pressed=true]{background:var(--gold,#E2A63F);color:#131210}
/* level select */
.g-card .lvls{display:grid;grid-template-columns:repeat(10,1fr);gap:5px;max-height:min(52vh,420px);overflow-y:auto;margin:10px 0;padding:2px}
.g-card .lvls .lw{grid-column:1/-1;font:700 .72rem/1.2 var(--f-mono,monospace);letter-spacing:.12em;text-transform:uppercase;margin-top:8px;text-align:start}
.g-card .lvls button{all:unset;cursor:pointer;aspect-ratio:1;display:grid;place-items:center;border-radius:6px;font:600 .78rem var(--f-mono,monospace);background:var(--surface,#201E1A);border:1px solid var(--line-2,#4A443A);color:var(--ink,#EFE8DB)}
.g-card .lvls button:not([disabled]):hover{border-color:var(--w,#E2A63F)}
.g-card .lvls button.cur{background:var(--w,#E2A63F);color:#131210;border-color:var(--w,#E2A63F)}
.g-card .lvls button[disabled]{opacity:.35;cursor:default;font-size:.6rem}
@media (max-width:420px){.g-card .lvls{grid-template-columns:repeat(6,1fr)}}

/* cloud save status in the top bar */
.g-cloud{font:600 .74rem/1 var(--f-body,system-ui);color:var(--muted,#A79E8F);text-decoration:none;border:1px solid var(--line-2,#4A443A);border-radius:999px;padding:6px 10px;white-space:nowrap}
.g-cloud:hover{color:var(--ink,#EFE8DB);border-color:var(--gold,#E2A63F)}
@media (max-width:560px){.g-cloud{font-size:.68rem;padding:5px 8px}}

/* installed app / phones with "full screen apps": keep the arrows clear of the gesture bar and rounded corners */
.touch .g-pad{padding-bottom:calc(10px + max(env(safe-area-inset-bottom), 10px))}
@media (display-mode:standalone),(display-mode:fullscreen){.touch .g-pad{padding-bottom:calc(14px + max(env(safe-area-inset-bottom), 22px))}}
/* small phones: the cloud chip shows just the cloud so the top bar fits */
@media (max-width:480px){.g-cloud span{display:none}.g-cloud{padding:5px 8px}}
.g-hud span span{background:none;border:0;padding:0}
@media (max-width:440px){.g-hud span span{display:none}.g-hud{gap:4px;font-size:.74rem}.g-hud span{padding:3px 6px}.g-bar{gap:5px;padding-inline:6px}.g-bar .lang-tg{display:none}}