/* panelgames.app: the page is a fire alarm control panel cabinet; same colours as the app. */
:root{
  --bg:#eceef0; --fg:#1d1f24; --muted:#5f6670; --line:#d3d7dc; --surface:#f8f9fa; --accent:#c8231c;
  --cabinet:#b51c17; --cabinet-dark:#8c1210; --bezel:#26282b; --lcd:#adc566; --lcd-ink:#1f2b10; --key:#e8e6df;
  --display:"Barlow Condensed","Arial Narrow",Arial,sans-serif; --body:"Barlow",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){--bg:#141518;--fg:#eceae6;--muted:#9a9ea6;--line:#2e3137;--surface:#1e2024;--accent:#ff4a3d;color-scheme:dark}}
:root[data-theme="dark"]{--bg:#141518;--fg:#eceae6;--muted:#9a9ea6;--line:#2e3137;--surface:#1e2024;--accent:#ff4a3d;color-scheme:dark}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.55 var(--body);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
a{color:var(--accent)}
.wrap{max-width:560px;margin:0 auto;padding-block:20px 40px;display:flex;flex-direction:column;gap:22px}
.cabinet{position:relative;background:linear-gradient(var(--cabinet),var(--cabinet-dark));border-radius:22px;padding:20px 18px 16px;color:#fff;box-shadow:0 8px 24px rgba(0,0,0,.3)}
.cabinet::before,.cabinet::after{content:"";position:absolute;width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.25);top:12px;left:12px}
.cabinet::after{left:auto;right:12px}
.eyebrow{font:700 .85rem var(--display);letter-spacing:.18em;text-transform:uppercase;opacity:.8;margin:0}
h1{font:700 clamp(2.4rem,11vw,3.2rem)/1 var(--display);letter-spacing:.06em;text-transform:uppercase;margin:2px 0 16px}
.bezel{background:var(--bezel);border-radius:14px;padding:16px;display:flex;flex-direction:column;gap:16px}
.lcd{background:var(--lcd);color:var(--lcd-ink);border-radius:6px;border:3px solid rgba(0,0,0,.5);padding:12px 14px;font:600 clamp(.85rem,3.8vw,1rem)/1.45 ui-monospace,SFMono-Regular,Menlo,monospace;white-space:pre-wrap}
.leds{display:grid;grid-template-columns:repeat(5,1fr);text-align:center;font:600 .55rem var(--body);letter-spacing:.06em;color:rgba(255,255,255,.75)}
.leds i{display:block;width:12px;height:12px;border-radius:50%;margin:0 auto 6px;background:var(--c);opacity:.2}
.leds i.on{opacity:1;box-shadow:0 0 8px var(--c)}
.keys{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.key{display:flex;flex-direction:column;gap:6px;background:var(--key);color:#1d1f24;text-decoration:none;border-radius:10px;padding:12px;box-shadow:0 3px 4px rgba(0,0,0,.45);transition:transform .08s,box-shadow .08s}
.key:active{transform:translateY(2px) scale(.99);box-shadow:0 1px 1px rgba(0,0,0,.2)}
.key:focus-visible{outline:3px solid #fff;outline-offset:2px}
.key b{font:700 clamp(.95rem,4.4vw,1.4rem)/1.05 var(--display);letter-spacing:.03em;white-space:nowrap}
.key span{font-size:.85rem;font-weight:600;color:rgba(0,0,0,.55)}
.key small{font-size:.62rem;font-weight:700;letter-spacing:.08em;color:rgba(0,0,0,.45)}
.plate{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font:.7rem ui-monospace,Menlo,monospace;opacity:.65;margin-top:14px}
.app{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:10px}
.app h2,.doc h2{font:700 1.4rem var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0}
.app p{margin:0;color:var(--muted)}
.badge{display:inline-flex;align-self:flex-start;align-items:center;gap:8px;background:var(--fg);color:var(--bg);border-radius:10px;padding:10px 16px;font-weight:600;text-decoration:none}
.badge[aria-disabled="true"]{opacity:.55;pointer-events:none}
.games{display:grid;gap:12px}
.games div{border-top:1px solid var(--line);padding-top:12px}
.games h3{font:700 1.15rem var(--display);letter-spacing:.05em;text-transform:uppercase;margin:0}
.games p{margin:2px 0 0;color:var(--muted);max-width:65ch}
footer{display:flex;gap:16px;flex-wrap:wrap;font-size:.9rem;color:var(--muted)}
footer a{color:var(--muted)}
.doc{max-width:65ch}
.doc h1{color:var(--fg);font-size:2.2rem;margin:8px 0 4px}
.doc h2{font-size:1.15rem;margin:22px 0 4px}
.doc p,.doc li{color:var(--muted)}
.doc .back{font-weight:600;text-decoration:none}