/* SPDX-License-Identifier: MIT */
@font-face { font-family: Lantern; src: url('/assets/lantern-pixel.otf') format('opentype'); font-display: block; }
:root { color-scheme: dark; --ink: #fff5d6; --gold: #e4c885; --wood: #40291c; }
* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; }
body { margin: 0; display: grid; place-items: center; overflow: hidden; background: #080b0e; color: var(--ink); font: 16px/1.5 Lantern, monospace; -webkit-font-smoothing: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; -webkit-tap-highlight-color: transparent; }
button:disabled { opacity: .4; cursor: wait; }
button:focus-visible, input:focus-visible, canvas:focus-visible { outline: 1px solid #ffeeb1; outline-offset: 2px; }
button:hover { color: #fff5a4; }
[hidden] { display: none !important; }
canvas, svg { image-rendering: pixelated; }
p, h1, h2 { margin: 0; }
#arcade { position: relative; overflow: hidden; }
#surface { position: relative; transform-origin: left top; }
.screen { position: absolute; inset: 0; overflow: hidden; }
.screen > canvas, #board-viewport, #board { display: block; position: absolute; inset: 0; width: 100%; height: 100%; }
#board { cursor: pointer; touch-action: none; }
.title-menu { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding-bottom: 16px; background: #07131a55; }
h1 { font-size: 64px; line-height: 1.2; color: #fff2bf; letter-spacing: 12px; padding-left: 12px; text-shadow: -1px -1px #fff9de, 1px 1px #a66b2d, 2px 2px #8e4022, 3px 3px #180e0b, -2px 0 #3e271a, 0 -2px #3e271a; margin-bottom: 30px; }
.menu, .lobby-menu { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.menu button, .lobby-menu > button:not(.room-code), .settings-list button, .confirm-actions button, #join-form > button[type=submit] { width: 174px; min-height: 27px; padding: 4px 8px; border: 1px solid #a99560; box-shadow: inset 1px 1px #d3bc7c, inset -1px -1px #160e0b, 1px 2px #0b0c0d; background: #36271be8; color: #fff1c0; text-shadow: 1px 1px #130b09; }
.menu button:hover, .lobby-menu > button:hover, .settings-list button:hover { background: #644022ed; }
.menu button:focus-visible::before, .menu button:hover::before { content: '>'; position: absolute; margin-left: -18px; color: #ffdf7c; }
.main-button { background: #734028ed !important; border-color: #e2c27c !important; }
.lobby-menu { position: absolute; width: 270px; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 20px 16px; background: #14150fdc; border: 1px solid #9c8559; box-shadow: inset 1px 1px #d7c27c, inset -1px -1px #352d20, 2px 3px #070b0b; }
.room-code { font-size: 32px; letter-spacing: 2px; line-height: 1.5; display: flex; align-items: center; gap: 8px; color: #fff2b5; }
.room-code svg { width: 12px; height: 12px; fill: none; stroke: #e0c78b; stroke-width: 1; }
.room-code.copied svg { stroke: #a7e9a2; }
.seats { display: flex; gap: 16px; margin: 10px 0; }
.seat { width: 38px; height: 38px; display: grid; place-items: center; position: relative; }
.seat canvas { width: 24px; height: 30px; }
.seat.empty { opacity: .3; }
.seat.self::after { content: ''; position: absolute; bottom: 0; width: 22px; height: 2px; background: currentColor; }
.seat b { font-weight: normal; font-size: 16px; position: absolute; right: -2px; bottom: 3px; text-shadow: 1px 1px #000; }
.hud { position: absolute; top: 5px; left: 5px; width: 86px; pointer-events: none; color: #fff8d6; text-shadow: 1px 1px #000, -1px -1px #20170e; }
.meter { margin-bottom: 5px; background: #07121a8a; border-top: 1px solid #bd7751; box-shadow: 0 -1px #171b18; line-height: 1.2; }
.meter > span { display: block; color: #e7d296; }
.meter > strong { display: block; text-align: right; font-weight: normal; padding-right: 3px; }
.remaining { display: flex; align-items: center; justify-content: flex-end; gap: 3px; }
.remaining svg { width: 20px; height: 18px; shape-rendering: crispEdges; }
.remaining strong { font-weight: normal; }
.combo-track { margin-top: 4px; height: 4px; border: 1px solid #b09b6c; background: #132330; }
.combo-track i { height: 2px; background: #cde693; display: block; width: 0; }
.tools { position: absolute; top: 132px; left: 5px; width: 84px; display: flex; flex-direction: column; gap: 8px; padding: 7px 4px; background: #1717158c; border-left: 1px solid #9e4c36; }
.tools button { display: flex; align-items: center; gap: 6px; min-height: 26px; text-shadow: 1px 1px #000; text-align: left; }
.tool-orb { display: grid; place-items: center; width: 23px; height: 23px; flex-shrink: 0; padding-bottom: 2px; color: #fff5b5; border: 1px solid #9a7946; background: #253a3e; box-shadow: inset 1px 1px #d5c795, inset -1px -1px #0b141b; font-size: 16px; }
svg.tool-orb { padding: 4px; fill: #fff1b1; stroke: #1b1b18; stroke-width: 1; }
.tools button[aria-pressed=true] .tool-orb { background: #8e4527; border-color: #fff1a2; }
#players { position: absolute; left: 7px; bottom: 36px; display: grid; grid-template-columns: repeat(2, 37px); gap: 3px; }
.table-player { display: flex; align-items: center; gap: 2px; text-shadow: 1px 1px #000; }
.table-player canvas { width: 10px; height: 13px; }
.table-player.self { box-shadow: 0 1px currentColor; }
#board-announcement { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; color: #fff5bb; font-size: 32px; text-shadow: 1px 1px #a24028, 2px 2px #11100c, -1px -1px #3b2019; }
#board-announcement:empty { display: none; }
.exit-button { position: absolute; bottom: 6px; left: 7px; min-width: 52px; min-height: 19px; border: 1px solid #8e8e68; background: #172c2bd9; box-shadow: inset 1px 1px #c2c18e, inset -1px -1px #090e10; }
.system-menu { position: absolute; right: 6px; bottom: 5px; display: flex; gap: 9px; }
.system-menu button { min-height: 20px; text-shadow: 1px 1px #000, -1px -1px #19201a; }
#status { position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%); max-width: calc(100vw - 24px); padding: 10px 16px; font-size: 32px; background: #182018f2; border: 1px solid #ae965f; box-shadow: 2px 2px #050908; z-index: 10; line-height: 1.7; }
dialog { position: fixed; width: 550px; max-width: calc(100vw - 24px); max-height: calc(100dvh - 32px); padding: 28px; overflow-y: auto; background: #28281dec; border: 2px solid #b49b60; box-shadow: inset 2px 2px #e4d29d, inset -2px -2px #0c100c, 3px 4px #060806; color: #fff2d1; font-size: 32px; line-height: 1.7; }
dialog::backdrop { background: #050b1199; }
dialog h2 { font-size: inherit; font-weight: normal; color: #f0d895; margin: 0 30px 24px 0; }
dialog p { margin: 16px 0; }
.dialog-close { position: absolute; right: 18px; top: 18px; width: 30px; height: 30px; line-height: 1; }
input { width: 100%; background: #121c1c; color: #fff0b7; padding: 12px; border: 2px solid #9e8d5c; margin: 8px 0 24px; text-align: center; text-transform: uppercase; letter-spacing: 3px; }
#join-form > button[type=submit] { width: 100%; min-height: 45px; }
.confirm-actions, .settings-list { display: flex; gap: 16px; }
.settings-list { flex-direction: column; align-items: stretch; }
.settings-list button, .confirm-actions button { width: auto; min-height: 48px; flex: 1; }
#route { margin-top: 22px; color: #c3c5a7; }
.manual-pair { text-align: center; }
.manual-pair canvas { width: 184px; height: 96px; }
#tutorial-guide { border-top: 1px solid #9b895c; margin-top: 20px; color: #efdd9f; }
.quota-row { margin-bottom: 20px; }
.quota-row strong { display: block; font-weight: normal; }
.quota-track { height: 5px; background: #101a20; margin-top: 8px; }
.quota-track i { display: block; height: 5px; background: #cebd71; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.compact .hud { width: 70px; }
.compact .tools { width: 74px; top: 132px; padding: 5px 2px; gap: 6px; }
.compact .tools button { gap: 4px; }
.compact #players { bottom: 31px; grid-template-columns: repeat(2, 33px); }
.compact .system-menu { gap: 7px; }
@media(max-width:600px) { dialog { font-size: 16px; padding: 20px; } dialog h2 { margin-bottom: 20px; } dialog p { margin: 14px 0; } #status { font-size: 16px; } .manual-pair canvas { width: 92px; height: 48px; } .settings-list button,.confirm-actions button { min-height: 32px; } .dialog-close { right: 8px; top: 8px; } }
/* Identity and match feedback remain attached to the game. */
.nickname-input { font-family: Lantern, system-ui, sans-serif; font-size: inherit; letter-spacing: 0; text-transform: none; }
.lobby-menu .nickname-input { width: 174px; height: 27px; padding: 3px 6px; margin: 0; font-size: 16px; }
.seats { gap: 14px; }
.seat { width: 43px; height: 46px; }
.seat .nickname { position: absolute; bottom: -6px; left: -8px; right: -8px; font-family: Lantern, system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; text-shadow: 1px 1px #000; }
.seat.self::after { bottom: -9px; }
#players { grid-template-columns: 78px; gap: 1px; bottom: 32px; }
.table-player { min-width: 0; }
.table-player .nickname { font-family: Lantern, system-ui, sans-serif; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compact #players { grid-template-columns: 66px; }
.match-history { position: absolute; right: 4px; top: 64px; width: 52px; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 5px; list-style: none; }
.history-row { padding: 2px 1px; background: #0e181ac9; box-shadow: 0 1px #a99a6d; text-align: center; line-height: 1; }
.history-row canvas { display: block; width: 37px; height: 23px; margin: 0 auto 2px; }
.history-row output { display: block; color: #fff5d6; }
.history-row.coop { box-shadow: 0 1px #f3cf71; }
.history-bonus { display: block; margin-top: 2px; color: #f3cf71; }
.compact .match-history { top: auto; bottom: 26px; right: 5px; width: auto; flex-direction: row; gap: 3px; }
.compact .history-row { width: 52px; }
.compact .history-row canvas { width: 30px; height: 18px; }
@media (pointer:fine) { #board { cursor: none; } }
#board.over-empty { cursor: grab; }
#board.rotating { cursor: grabbing; }
.table-player { height: 16px; line-height: 16px; }