@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;600;700;800&display=swap');

:root { --ink:#10110f; --paper:#dedfdb; --acid:#c7ff39; --violet:#7557ff; --red:#ff543d; }
* { box-sizing:border-box; }
html, body { width:100%; height:100%; margin:0; overflow:hidden; background:var(--paper); color:var(--ink); font-family:Manrope, sans-serif; }
button, a { -webkit-tap-highlight-color:transparent; }
button { font:inherit; color:inherit; }
#stage { position:fixed; inset:0; overflow:hidden; isolation:isolate; background:var(--paper); }
#camera { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
#game { display:block; width:100%; height:100%; touch-action:none; }

.topbar { position:fixed; z-index:4; inset:0 0 auto; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; height:72px; padding:0 clamp(18px,3vw,42px); border-bottom:1px solid rgba(16,17,15,.18); background:rgba(222,223,219,.48); backdrop-filter:blur(10px); pointer-events:none; }
.brand { color:var(--ink); text-decoration:none; font-size:14px; font-weight:800; letter-spacing:-.02em; pointer-events:auto; }
.brand span { color:var(--violet); }
.system { display:flex; align-items:center; gap:8px; font:500 9px/1 DM Mono, monospace; letter-spacing:.09em; }
.system i { width:6px; height:6px; border-radius:50%; background:#888; box-shadow:0 0 0 4px rgba(0,0,0,.05); transition:.3s; }
.system.live i { background:var(--acid); box-shadow:0 0 0 4px rgba(199,255,57,.23),0 0 14px var(--acid); }
.actions { justify-self:end; display:flex; gap:6px; pointer-events:auto; }
.actions button { width:43px; height:30px; border:1px solid rgba(16,17,15,.28); border-radius:50%; background:rgba(222,223,219,.35); backdrop-filter:blur(10px); font:500 9px DM Mono, monospace; cursor:pointer; }
.actions button:hover { background:var(--ink); color:var(--paper); }

.overlay { position:fixed; z-index:3; inset:72px 0 0; display:flex; flex-direction:column; justify-content:flex-end; padding:0 clamp(20px,5vw,68px) max(28px,env(safe-area-inset-bottom)); background:linear-gradient(180deg,rgba(222,223,219,.05),rgba(222,223,219,.42) 43%,rgba(222,223,219,.96) 76%); transition:opacity .45s, visibility .45s, transform .6s cubic-bezier(.16,1,.3,1); }
.overlay:not(.visible) { opacity:0; visibility:hidden; transform:translateY(4vh); pointer-events:none; }
.kicker { margin:0 0 14px; display:flex; align-items:center; gap:12px; font:500 9px DM Mono,monospace; letter-spacing:.12em; }
.kicker:before { content:''; width:42px; height:2px; background:var(--violet); }
h1 { margin:0; max-width:900px; font-size:clamp(64px,13.2vw,172px); font-weight:800; line-height:.75; letter-spacing:-.09em; text-transform:uppercase; }
h1 em { color:var(--violet); font-style:normal; }
.deck { max-width:570px; margin:clamp(22px,4vh,46px) 0 22px; font-size:clamp(14px,1.6vw,20px); line-height:1.45; letter-spacing:-.02em; }
.moves { display:flex; width:min(660px,100%); border-top:1px solid rgba(16,17,15,.25); border-bottom:1px solid rgba(16,17,15,.25); margin-bottom:20px; }
.moves div { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:center; flex:1; padding:13px 12px 12px 0; }
.moves div+div { border-left:1px solid rgba(16,17,15,.22); padding-left:14px; }
.moves b { grid-row:span 2; min-width:25px; color:var(--violet); font:700 18px DM Mono,monospace; }
.moves span { font:700 10px DM Mono,monospace; letter-spacing:.08em; }
.moves small { font:400 8px DM Mono,monospace; opacity:.55; }
.start { width:min(660px,100%); height:62px; display:flex; align-items:center; justify-content:space-between; padding:0 8px 0 22px; border:0; background:var(--ink); color:white; cursor:pointer; font:500 11px DM Mono,monospace; letter-spacing:.1em; transition:.2s; }
.start b { display:grid; place-items:center; width:46px; height:46px; background:var(--acid); color:var(--ink); font-size:20px; }
.start:hover { background:var(--violet); transform:translateY(-2px); }
.start:disabled { cursor:wait; opacity:.72; transform:none; }
.privacy { margin:11px 0 0; display:flex; gap:8px; align-items:center; font:400 7px DM Mono,monospace; letter-spacing:.09em; opacity:.6; }
.privacy i { width:5px; height:5px; background:var(--acid); border-radius:50%; }

.fallback { position:fixed; z-index:5; left:50%; bottom:max(14px,env(safe-area-inset-bottom)); transform:translateX(-50%) translateY(150%); display:flex; gap:7px; opacity:0; transition:.4s; }
.fallback.show { transform:translateX(-50%); opacity:1; }
.fallback button { width:52px; height:48px; border:1px solid rgba(255,255,255,.3); background:rgba(16,17,15,.68); color:white; backdrop-filter:blur(18px); font:500 16px DM Mono,monospace; border-radius:3px; touch-action:none; }
.fallback button.active { background:var(--acid); color:var(--ink); transform:translateY(-4px); }
.landscape { display:none; }

@media (min-width:760px) and (min-height:650px) {
  .overlay { justify-content:center; padding-top:7vh; }
  .moves { margin-top:0; }
}
@media (min-width:700px) {
  .fallback.show { transform:translateX(-50%) translateY(150%); opacity:0; pointer-events:none; }
}
@media (max-width:560px) {
  .topbar { height:58px; padding:0 15px; grid-template-columns:1fr auto; }
  .system { position:fixed; top:70px; left:16px; }
  .actions button { width:39px; height:28px; }
  .overlay { inset:58px 0 0; padding-left:18px; padding-right:18px; }
  h1 { font-size:clamp(58px,22vw,102px); line-height:.78; }
  .overlay.result h1 { font-size:clamp(50px,18vw,82px); line-height:.82; }
  .overlay.result .deck { margin-top:18px; }
  .deck { font-size:13px; margin:22px 0 18px; max-width:94%; }
  .moves div { padding:11px 5px 10px 0; column-gap:5px; }
  .moves div+div { padding-left:7px; }
  .moves b { font-size:14px; min-width:18px; }
  .moves span { font-size:8px; }
  .moves small { display:none; }
  .start { height:56px; }
}
@media (orientation:landscape) and (max-height:520px) {
  .landscape { display:flex; position:fixed; z-index:20; inset:0; margin:0; align-items:center; justify-content:center; padding:30px; text-align:center; background:var(--acid); font:500 11px DM Mono,monospace; letter-spacing:.1em; }
}
@media (prefers-reduced-motion:reduce) { * { transition-duration:.01ms!important; animation-duration:.01ms!important; } }