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

:root { --ink:#202522; --paper:#f0ede3; --panel:#f9f7f1; --green:#7b9470; --red:#dc4034; }
* { box-sizing:border-box; }
body { overflow:hidden; min-height:100vh; margin:0; color:var(--ink); font-family:Manrope,system-ui,sans-serif; }
main,.game-card { width:100vw; height:100vh; }
.intro { position:fixed; z-index:2; top:22px; left:24px; pointer-events:none; }
.eyebrow { margin:0 0 7px; font:500 10px/1 'DM Mono',monospace; letter-spacing:.18em; color:#fff; text-shadow:0 1px 3px #345; }
h1 { margin:0; color:#fff; font-size:clamp(1.5rem,3vw,2.4rem); font-weight:800; line-height:.98; letter-spacing:-.06em; text-shadow:0 2px 4px #3458; }
h1 em { color:#f3eee0; font-family:'Playfair Display',serif; font-weight:600; letter-spacing:-.07em; }
.lead,.legend { display:none; }
.game-card { position:relative; overflow:hidden; }
.toolbar { position:fixed; z-index:2; top:18px; right:20px; padding:8px 9px 8px 14px; display:flex; align-items:center; gap:14px; border:1px solid #ffffff55; border-radius:5px; background:#f9f7f1e8; box-shadow:0 4px 16px #3344; }.toolbar #status{display:flex;align-items:center;gap:9px;font-size:11px;font-weight:700}.toolbar b{color:var(--red);font:500 11px 'DM Mono';letter-spacing:.04em}.toolbar span{color:#4e544e}
button { padding:8px 10px; border:1px solid #d6d2c8; border-radius:3px; background:transparent; color:#596159; font:600 10px 'DM Mono',monospace; text-transform:uppercase; letter-spacing:.07em; cursor:pointer; }button:hover{background:#e7e6dd}
canvas { display:block; width:100vw; height:100vh; touch-action:none; cursor:crosshair; background-color:#b8caa9; background-image:linear-gradient(30deg,#a8be9b22 12%,transparent 12.5%,transparent 87%,#a8be9b22 87.5%),linear-gradient(150deg,#a8be9b22 12%,transparent 12.5%,transparent 87%,#a8be9b22 87.5%),linear-gradient(30deg,#a8be9b22 12%,transparent 12.5%,transparent 87%,#a8be9b22 87.5%),linear-gradient(150deg,#a8be9b22 12%,transparent 12.5%,transparent 87%,#a8be9b22 87.5%); background-size:32px 56px;background-position:0 0,0 0,16px 28px,16px 28px; }
.hint { position:fixed; z-index:2; bottom:18px; left:50%; transform:translateX(-50%); margin:0; padding:10px 14px; border-radius:4px; background:#f9f7f1df; color:#697067; font:11px 'DM Mono',monospace; white-space:nowrap; box-shadow:0 3px 12px #3343; }
@media (max-width:600px) { .intro{top:15px;left:16px}.toolbar{top:auto;right:auto;bottom:15px;left:15px}.toolbar #status span{display:none}.hint{bottom:68px;max-width:calc(100% - 30px);white-space:normal;text-align:center} }