/* demo.css: the one stylesheet of the sitoolz demo games. Dark, warm, phone-first; 44px targets; no images. */
:root{--bg:#0e1420;--panel:#151c2e;--rule:#2b3552;--ink:#f3ecdf;--muted:#b8b3c4;--gold:#ffc94d;--green:#7ee787;--sky:#9ad0ff;--rose:#ff8fb1}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;color:var(--ink);font:15px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:radial-gradient(90% 40% at 50% 0%,#1d2440 0%,var(--bg) 70%);min-height:100vh}
.wrap{max-width:1100px;margin:0 auto;padding:16px 16px 48px}
nav{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
nav a{color:var(--muted);text-decoration:none;padding:7px 11px;border:1px solid var(--rule);border-radius:999px;min-height:38px;display:inline-flex;align-items:center;font-size:13px}
nav a:hover{color:#fff;border-color:var(--gold)}
.eyebrow{margin:0;color:var(--gold);font:600 12px ui-monospace,Menlo,monospace;letter-spacing:.08em}
h1{margin:4px 0 2px;font:400 36px Georgia,serif;color:var(--gold)}
h2{margin:0 0 6px;font:400 22px Georgia,serif}
.lede{color:var(--muted);margin:0 0 14px;max-width:820px}
.muted{color:var(--muted)}
.card{background:var(--panel);border:1px solid var(--rule);border-radius:16px;padding:14px;margin-bottom:14px}
.row{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
button,select,input{min-height:44px;padding:8px 14px;border-radius:12px;border:1px solid var(--rule);background:var(--panel);color:var(--ink);font:inherit}
button{font-weight:600;cursor:pointer}
button:hover{border-color:var(--gold)}
button.go,button[aria-pressed=true]{background:var(--gold);color:#1a1408;border-color:transparent}
button:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
canvas{display:block;width:100%;height:auto;border-radius:12px;background:#0a0f1a;border:1px solid var(--rule);touch-action:none}
.told{min-height:22px;margin:10px 0 0;color:var(--sky)}
.win{color:var(--green)}
code,pre{font:13px ui-monospace,Menlo,monospace}
pre{background:#0a0f1a;border:1px solid var(--rule);border-radius:10px;padding:10px;overflow-x:auto}
.foot{color:var(--muted);font-size:13px;margin-top:18px}.foot a{color:var(--gold)}
@media (max-width:640px){h1{font-size:28px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}