/* THE ARCADE'S SHARED LOOK. Every game page is a full-viewport app: a canvas
   underneath, a thin top bar, overlays for menus, and — on touch screens —
   on-screen controls. Sizes are in px with generous touch targets (44px+). */
:root {
  --bg: #07080d; --ink: #eef1f7; --soft: #a3abc0; --line: rgba(255,255,255,.14);
  --panel: rgba(12,14,24,.86); --accent: #ffcc33; --hot: #ff4f8b; --cool: #3ee0ff; --ok: #67f59a;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--ink);
  font: 15px/1.4 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  overflow: hidden; overscroll-behavior: none; -webkit-tap-highlight-color: transparent;
  touch-action: none; user-select: none; -webkit-user-select: none; }
canvas.stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; display: block; }

.kbar { position: fixed; top: 0; left: 0; right: 0; z-index: 35; display: flex; align-items: center; gap: 8px;
  padding: max(8px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 8px max(10px, env(safe-area-inset-left));
  pointer-events: none; }
.kbar > * { pointer-events: auto; }
.kbtn { font: 600 13px/1 system-ui, sans-serif; color: var(--ink); background: rgba(0,0,0,.45);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 12px; min-height: 36px; cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center; gap: 6px; backdrop-filter: blur(6px); }
.kbtn:hover { border-color: var(--accent); }
.ktitle { font: 700 13px/1 system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--soft);
  text-shadow: 0 1px 2px #000; }
.kspacer { flex: 1; }

.khud { position: fixed; top: 52px; left: 12px; right: 12px; z-index: 10; pointer-events: none;
  display: flex; justify-content: space-between; gap: 12px; font: 700 16px/1.2 ui-monospace, Menlo, Consolas, monospace;
  text-shadow: 0 2px 4px #000; }

.koverlay { position: fixed; inset: 0; z-index: 30; display: none; align-items: center; justify-content: center;
  padding: 64px 16px 16px; background: radial-gradient(ellipse at center, rgba(5,6,12,.55), rgba(5,6,12,.88)); }
.koverlay.on { display: flex; }
.kpanel { width: min(460px, 100%); max-height: 100%; overflow: auto; background: var(--panel); border: 1px solid var(--line);
  border-radius: 18px; padding: 22px 20px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.6); touch-action: auto; }
.kpanel h1 { margin: 0 0 4px; font-size: 30px; letter-spacing: .02em; }
.kpanel h2 { margin: 0 0 8px; font-size: 20px; }
.kpanel p { color: var(--soft); margin: 8px 0; }
.kpanel .big { font: 800 40px/1.1 ui-monospace, Menlo, monospace; color: var(--accent); margin: 8px 0; }
.kmenu { display: grid; gap: 10px; margin-top: 16px; }
.kmenu button, .kmenu a { font: 700 16px/1 system-ui, sans-serif; color: #10121b; background: var(--accent); border: 0; border-radius: 12px;
  min-height: 48px; padding: 12px 16px; cursor: pointer; text-decoration: none; display: flex; align-items: center; justify-content: center; gap: 8px; }
.kmenu button.alt, .kmenu a.alt { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.kmenu button:disabled { opacity: .45; cursor: default; }
.kmenu input { font: 600 16px/1 ui-monospace, monospace; background: rgba(255,255,255,.06); color: var(--ink); border: 1px solid var(--line);
  border-radius: 12px; min-height: 48px; padding: 10px 14px; text-align: center; text-transform: lowercase; width: 100%; }
.khelp { font-size: 13px; color: var(--soft); margin-top: 14px; line-height: 1.5; }
.khelp kbd { font: 600 12px ui-monospace, monospace; border: 1px solid var(--line); border-radius: 5px; padding: 1px 5px; }
.ktag { display: inline-block; font: 700 11px/1 system-ui; letter-spacing: .1em; text-transform: uppercase; color: #10121b;
  background: var(--cool); border-radius: 999px; padding: 4px 8px; }

.ktoast { position: fixed; left: 50%; top: 58px; transform: translateX(-50%); z-index: 40; background: var(--panel);
  border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; font-weight: 600; opacity: 0; transition: opacity .25s;
  pointer-events: none; max-width: 90vw; text-align: center; }
.ktoast.on { opacity: 1; }

/* TOUCH CONTROLS — shown only on touch screens. */
.ktouch { position: fixed; inset: 0; z-index: 15; pointer-events: none; display: none; }
.ktouch.on { display: block; }
.kstick { position: absolute; left: max(18px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom));
  width: 136px; height: 136px; border-radius: 50%; border: 2px solid rgba(255,255,255,.22); background: rgba(255,255,255,.05);
  pointer-events: auto; touch-action: none; }
.kknob { position: absolute; left: 50%; top: 50%; width: 58px; height: 58px; margin: -29px 0 0 -29px; border-radius: 50%;
  background: rgba(255,255,255,.28); border: 2px solid rgba(255,255,255,.4); }
.kbtns { position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  display: flex; flex-wrap: wrap-reverse; gap: 12px; justify-content: flex-end; max-width: 210px; pointer-events: none; }
.kbtns button { pointer-events: auto; touch-action: none; width: 70px; height: 70px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1); color: var(--ink); font: 800 15px/1 system-ui, sans-serif; }
.kbtns button.down { background: rgba(255,204,51,.45); border-color: var(--accent); }
.klook { position: absolute; top: 60px; right: 0; bottom: 0; width: 50%; pointer-events: auto; touch-action: none; }

.krotate { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; flex-direction: column;
  background: var(--bg); text-align: center; padding: 24px; }
.krotate .icon { font-size: 54px; animation: krot 1.6s ease-in-out infinite; }
@keyframes krot { 0%, 30% { transform: rotate(0); } 60%, 100% { transform: rotate(90deg); } }
@media (orientation: portrait) and (pointer: coarse) { body.landscape .krotate { display: flex; } }

/* THE ABOUT / HOW-TO-PLAY PANEL. Written into each page's HTML by
   scripts/build-game-pages.mjs, so crawlers and people read the same text.
   Without JavaScript it is simply the page; with it (html.kjs) it hides
   behind the ⓘ button and opens as a scrollable overlay. */
.kabout { max-width: 720px; margin: 0 auto; padding: 24px 18px 40px; color: var(--ink); overflow: auto; touch-action: auto;
  user-select: text; -webkit-user-select: text; font-size: 16px; line-height: 1.6; }
html:not(.kjs) body { overflow: auto; }
.kabout h1 { font-size: 30px; margin: 0 0 4px; }
.kabout h2 { font-size: 18px; margin: 22px 0 6px; }
.kabout .kmeta { color: var(--soft); font-size: 14px; margin-top: 0; }
.kabout a { color: var(--accent); }
.kabout .kmore { padding-left: 18px; columns: 2 220px; }
.kabout .kclose { font: 700 16px/1 system-ui, sans-serif; color: #10121b; background: var(--accent); border: 0; border-radius: 12px; min-height: 48px; padding: 12px 28px; cursor: pointer; }
html.kjs .kabout { display: none; }
html.kjs body.kabout-on .kabout { display: block; position: fixed; inset: 0; z-index: 60; background: rgba(7, 8, 13, .96);
  padding-top: max(24px, env(safe-area-inset-top)); max-width: none; }
html.kjs body.kabout-on .kabout > * { max-width: 720px; margin-left: auto; margin-right: auto; }
html:not(.kjs) .kclosewrap { display: none; }