/* ============================================================================
   arcade.css — shared UI for every game on howtopasstime.com
   The high-score panel and the touch pad. Each game sets its own colours by
   overriding the --ac-* variables (see the <style> block in each game).
   ========================================================================== */
:root{
  --ac-fg:      #ffffff;
  --ac-dim:     #8a8a8a;
  --ac-faint:   #444444;
  --ac-accent:  #ffe26a;
  --ac-line:    rgba(255,255,255,.45);
  --ac-glow:    rgba(255,255,255,.12);
  --ac-btn-fg:  #000000;
}

#ac-panel{
  position:fixed; inset:0; z-index:40; display:none;
  align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.85);
  font-family:"Press Start 2P","Courier New",monospace;
}
#ac-panel.show{ display:flex; }

#ac-panel .card{
  width:min(460px,100%); max-height:92vh; overflow:auto;
  border:2px solid var(--ac-line); background:#000;
  padding:22px 20px 20px; box-shadow:0 0 40px var(--ac-glow);
}
#ac-panel h2{ margin:0 0 4px; font-size:14px; letter-spacing:.1em; text-align:center; color:var(--ac-fg); }
#ac-panel .sub{ margin:0 0 18px; font-size:8px; color:var(--ac-dim); text-align:center; line-height:2; }

#ac-panel ol{ list-style:none; margin:0 0 16px; padding:0; font-size:9px; line-height:2.4; color:var(--ac-fg); }
#ac-panel ol li{ display:flex; gap:8px; align-items:baseline; }
#ac-panel ol li .n{ width:22px; color:var(--ac-dim); }
#ac-panel ol li .nm{ flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
#ac-panel ol li.me, #ac-panel ol li.me .n{ color:var(--ac-accent); }
#ac-panel ol li.empty{ color:var(--ac-faint); }

#ac-entry{ display:none; border-top:1px solid var(--ac-line); padding-top:16px; margin-top:4px; }
#ac-entry.show{ display:block; }
#ac-entry label{ display:block; font-size:8px; color:var(--ac-dim); margin-bottom:10px; line-height:2; }
#ac-panel .row{ display:flex; gap:8px; }
#ac-name{
  flex:1; min-width:0; background:#000; color:var(--ac-fg); border:2px solid var(--ac-line);
  font-family:inherit; font-size:11px; padding:10px; letter-spacing:.08em; text-transform:uppercase;
}
#ac-name:focus{ outline:none; border-color:var(--ac-fg); }

#ac-panel button{
  font-family:inherit; font-size:9px; letter-spacing:.1em; cursor:pointer;
  background:var(--ac-fg); color:var(--ac-btn-fg); border:0; padding:11px 14px;
}
#ac-panel button.ghost{ background:transparent; color:var(--ac-fg); border:2px solid var(--ac-line); }
#ac-panel button:active{ transform:translateY(1px); }
#ac-msg{ font-size:8px; color:var(--ac-accent); line-height:2; min-height:16px; margin-top:12px; text-align:center; }
#ac-panel .actions{ display:flex; gap:8px; margin-top:16px; }
#ac-panel .actions button{ flex:1; }

/* ---------- touch pad ---------- */
#ac-pad{ display:none; }
body.touch #ac-pad{ display:block; position:fixed; inset:0; z-index:25; pointer-events:none;
  font-family:"Press Start 2P","Courier New",monospace; }
#ac-pad .btn{
  position:absolute; pointer-events:auto; text-align:center;
  width:62px; height:62px; line-height:62px; font-size:15px;
  border:2px solid var(--ac-line); color:var(--ac-fg);
  background:rgba(255,255,255,.06); border-radius:6px;
}
#ac-pad .btn:active{ background:rgba(255,255,255,.22); }
#ac-pad .btn.wide{ font-size:9px; }
#ac-pad .btn.big{ width:90px; height:90px; line-height:90px; border-radius:50%; font-size:10px; }