* { box-sizing: border-box; }
:root { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; color: #2b2118; background: #f6efe3; }
html, body { margin: 0; min-height: 100%; background: #f6efe3; }
body { min-height: 100svh; display: grid; place-items: center; padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left)); overflow-x: hidden; }
button { font: inherit; color: inherit; }
.game { width: min(100%, 620px); display: grid; gap: 10px; }
.topbar, .players, footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.identity, .tools { display: flex; align-items: center; gap: 8px; }
.identity strong { letter-spacing: .12em; font-size: clamp(18px, 5vw, 28px); }
.pill, .chip, button { border: 2px solid #2b2118; border-radius: 999px; background: #fffaf0; box-shadow: 2px 2px 0 #2b2118; }
.pill { padding: 3px 9px; font: 700 12px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.tools button { min-height: 36px; padding: 5px 10px; cursor: pointer; font-weight: 800; }
.chip { flex: 1; padding: 8px 12px; text-align: center; font: 700 13px/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.chip.is-turn { background: #f4c95d; }
.board-wrap { position: relative; width: min(100%, calc(100svh - 150px), 560px); aspect-ratio: 1; margin-inline: auto; border: 3px solid #2b2118; border-radius: 14px; overflow: hidden; background: #efe0c3; box-shadow: 5px 5px 0 #2b2118; }
canvas { display: block; width: 100%; height: 100%; touch-action: none; user-select: none; }
.overlay { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(246, 239, 227, .9); }
.overlay[hidden] { display: none; }
.overlay-card { width: min(100%, 340px); padding: 18px; border: 3px solid #2b2118; border-radius: 14px; background: #fffaf0; box-shadow: 5px 5px 0 #2b2118; text-align: center; }
h1 { margin: 0 0 6px; letter-spacing: .12em; }
.overlay-card p { margin: 6px 0 12px; }
.actions { display: grid; gap: 8px; }
.actions button { width: 100%; min-height: 40px; padding: 8px 12px; cursor: pointer; font-weight: 800; background: #fffaf0; }
.actions button:hover, .actions button:focus-visible { background: #f4c95d; outline: 3px solid #d6336c; outline-offset: 2px; }
.overlay-hint, footer { font: 700 11px/1.35 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
footer { min-height: 28px; flex-wrap: wrap; }
@media (max-width: 480px) { body { padding: 8px; } .game { gap: 7px; } .tools button { min-height: 32px; padding: 4px 8px; font-size: 12px; } .chip { padding: 6px 8px; font-size: 11px; } footer { font-size: 10px; } .board-wrap { width: min(100%, calc(100svh - 132px)); } }
@media (max-height: 430px) and (orientation: landscape) { body { display: block; padding: 6px 10px; } .game { grid-template-columns: minmax(210px, 1fr) minmax(260px, 56vh); grid-template-rows: auto 1fr auto; width: min(100%, 760px); margin: 0 auto; align-items: start; } .topbar { grid-column: 1; } .players { grid-column: 1; flex-direction: column; align-items: stretch; } .board-wrap { grid-column: 2; grid-row: 1 / span 3; width: min(56vh, 330px); } footer { grid-column: 1; } }