/* UseTalos Arcade — shared page chrome for the 5 browser games (REDESIGN V2, 2026-07-11)
   Styled on ut-core vars only, so light/dark theming is inherited. */
/* page tokens (ut-core's --ut-* fall back to these; its dark block overrides them —
   NEVER alias these to --ut-* or you create a var() cycle) */
:root{--bg:#EEF3FC;--surface:#ffffff;--line:#DBE5F5;--ink:#11203A;--ink2:#5B6B86}
body{background:var(--ut-bg);color:var(--ut-ink)}
.ar-hero{max-width:1060px;margin:0 auto;padding:40px 22px 16px}
.ar-eyebrow{display:inline-flex;align-items:center;gap:8px;font:700 .64rem/1 ui-monospace,SFMono-Regular,monospace;letter-spacing:.15em;color:var(--ut-blue);background:var(--ut-glass);border:1px solid var(--ut-glass-edge);border-radius:999px;padding:7px 12px}
.ar-eyebrow .dot{width:6px;height:6px;border-radius:50%;background:var(--ut-coral)}
.ar-hero h1{font-family:var(--ut-display);font-size:clamp(1.8rem,4vw,2.7rem);letter-spacing:-.02em;color:var(--ut-ink);margin:12px 0 6px}
.ar-hero h1 .grad{background:var(--ut-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.ar-hero .lead{color:var(--ut-ink2);max-width:64ch;line-height:1.6;margin:0 0 14px}
.ar-chips{display:flex;flex-wrap:wrap;gap:8px}
.ar-chip{font:600 .78rem/1.35 var(--ut-sans);color:var(--ut-ink2);background:var(--ut-surface);border:1px solid var(--ut-line);border-radius:10px;padding:8px 12px}
.ar-chip b{color:var(--ut-blue)}
.ar-stage{max-width:1060px;margin:18px auto 26px;padding:0 22px}
.ar-panel{position:relative;background:var(--ut-surface);border:1px solid var(--ut-line);border-radius:20px;box-shadow:var(--ut-shadow);overflow:hidden}
.ar-hud{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid var(--ut-line);background:color-mix(in srgb,var(--ut-blue) 3%,var(--ut-surface))}
.ar-hud .st{font:700 .72rem/1 ui-monospace,monospace;letter-spacing:.1em;color:var(--ut-ink2)}
.ar-hud .st b{display:block;font:800 1.15rem/1.2 var(--ut-display);letter-spacing:0;color:var(--ut-ink);margin-top:3px}
.ar-hud .st.hi b{color:var(--ut-blue)}
.ar-hud .spacer{flex:1}
.ar-btn{appearance:none;cursor:pointer;display:inline-flex;align-items:center;gap:7px;font:700 .8rem/1 var(--ut-sans);color:var(--ut-ink);background:var(--ut-surface);border:1px solid var(--ut-line);border-radius:10px;padding:10px 14px;transition:.15s var(--ut-ease)}
.ar-btn:hover{border-color:var(--ut-blue);color:var(--ut-blue)}
.ar-btn.prime{color:#fff;background:var(--ut-grad-cta);border-color:transparent}
.ar-btn.prime:hover{color:#fff;filter:brightness(1.07)}
.ar-canvas-wrap{position:relative;display:flex;justify-content:center;background:
  radial-gradient(900px 420px at 50% -10%,color-mix(in srgb,var(--ut-blue) 7%,transparent),transparent 70%)}
.ar-canvas-wrap canvas{display:block;width:100%;height:auto;touch-action:none;outline:none}
/* overlay states (menu / pause / game over) */
.ar-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;text-align:center;padding:22px;
  background:color-mix(in srgb,var(--ut-deep) 55%,transparent);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);z-index:5}
.ar-overlay[hidden]{display:none}
.ar-overlay .card{background:var(--ut-surface);border:1px solid var(--ut-line);border-radius:20px;box-shadow:var(--ut-shadow);padding:30px 34px;max-width:420px}
.ar-overlay h2{font-family:var(--ut-display);font-size:1.5rem;letter-spacing:-.015em;color:var(--ut-ink);margin:0 0 8px}
.ar-overlay p{color:var(--ut-ink2);line-height:1.55;margin:0 0 16px;font-size:.92rem}
.ar-overlay .big{font:800 2.2rem/1 var(--ut-display);background:var(--ut-grad);-webkit-background-clip:text;background-clip:text;color:transparent;margin:0 0 4px}
.ar-overlay .sub{font:700 .7rem/1 ui-monospace,monospace;letter-spacing:.12em;color:var(--ut-ink2);margin:0 0 14px}
/* under-game strip */
.ar-under{max-width:1060px;margin:0 auto 60px;padding:0 22px;display:flex;flex-wrap:wrap;gap:14px;align-items:center;justify-content:space-between}
.ar-under .made{color:var(--ut-ink2);font-size:.9rem;line-height:1.55;max-width:60ch}
.ar-under .made a{color:var(--ut-blue);font-weight:700;text-decoration:none}
.ar-under .made a:hover{text-decoration:underline}
.ar-back{max-width:1060px;margin:0 auto 60px;padding:0 22px}
.ar-back a{color:var(--ut-blue);font-weight:700;text-decoration:none}
.ar-back a:hover{text-decoration:underline}
@media(max-width:640px){
  .ar-hero{padding-top:28px}
  .ar-hud{gap:10px;padding:10px 12px}
  .ar-hud .st b{font-size:1rem}
  .ar-overlay .card{padding:24px 20px}
}