/* 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: block; 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: fixed; inset: 0; overflow: hidden; }
#surface { position: absolute; left: 0; top: 0; 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; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: 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 { position:relative; margin-top: 4px; height: 10px; border: 1px solid #b09b6c; background: #132330; }
.combo-track i { height: 8px; background: #617c4b; display: block; width: 0; }
.combo-track output { position:absolute;inset:0;text-align:center;font-size:8px;line-height:8px;color:#fff3c8;text-shadow:1px 1px #152017; }
.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; }
.home-credit { position:absolute;left:6px;bottom:6px;color:#ddc58b;font-size:10px;pointer-events:none; }
body:has(#home[hidden]) .home-credit { display:none; }
.board-options { border:1px solid #89784f;padding:4px;display:flex;gap:4px;flex-wrap:wrap;align-items:center;justify-content:center;min-width:0;font-size:14px; }
.board-options label { display:flex;align-items:center;gap:4px; }
.board-options input { width:58px;padding:2px 4px;font-size:16px; }
.board-options p { flex-basis:100%;font-size:14px;margin:4px 0; }
#network-dialog { font:18px/1.7 Lantern,system-ui,sans-serif; }
#network-dialog .confirm-actions button { font-size:18px; }
.lobby-menu { max-height:min(340px,calc(100% - 32px));overflow-y:auto; }
#match-status { font-size:14px;color:#f4d693; }
.seats { flex-wrap:wrap;justify-content:center; }
.seats.many { display:grid;grid-template-columns:repeat(4,43px);gap:7px 10px;margin:4px 0; }
.seats.many .seat { height:24px; }
.seats.many .seat canvas { width:16px;height:20px; }
.seats.many .nickname { font-size:8px;bottom:-6px; }
.seats.many .seat.self::after { bottom:-5px; }
#players.crowded { grid-template-columns:repeat(2,38px);font-size:7px;gap:0; }
.crowded .table-player { height:10px;line-height:10px; }
.crowded .table-player canvas { width:8px;height:10px; }
.legal-links,.credit { font:14px/1.6 Lantern,system-ui,sans-serif; }
a { color:#f3d797; }
html[lang=en] h1 { font-size:36px;letter-spacing:3px; }
html[lang=en] .tools button { font-size:14px; }
.level-menu { position:absolute;inset:12px 18px 27px;padding:10px;background:#101b19df;border:1px solid #b49b60;display:flex;flex-direction:column;gap:8px; }
.level-heading { display:flex;align-items:center;justify-content:space-between; }
.level-heading h2 { font-size:20px;font-weight:normal; }
#solo-completed { color:#f0d49b;font-size:14px; }
#level-grid { min-height:0;flex:1;display:grid;grid-template-columns:repeat(10,minmax(0,1fr));grid-auto-rows:41px;gap:5px;overflow-y:auto;padding:2px 4px 4px 2px;scrollbar-color:#a58d58 #192423; }
.level-card { position:relative;min-width:0;background:#27352d;border:1px solid #7c7652;box-shadow:1px 1px #070d0a; }
.level-card:hover,.level-card:focus-visible { background:#48533a;border-color:#efd793; }
.level-card canvas { width:44px;height:28px;display:block;margin:0 auto;opacity:.85; }
.level-card span { position:absolute;bottom:1px;left:2px;line-height:12px;font-size:12px;color:#fff3c3;background:#17231cdd;padding:0 2px; }
.level-card.cleared { border-color:#cbae61; }
.level-card i { position:absolute;right:2px;bottom:3px;width:9px;height:9px;background:#ffe3a0;clip-path:polygon(50% 0,61% 35%,100% 35%,69% 58%,80% 100%,50% 74%,20% 100%,31% 58%,0 35%,39% 35%); }
.solo-level { color:#f7d994;line-height:16px;font-size:14px;white-space:nowrap; }
.solo-results { display:flex;justify-content:space-around;gap:12px;margin:0 0 24px; }
.solo-results dt { font-size:16px;color:#d7c18d; }.solo-results dd { margin:0; }
.solo-actions { display:flex;flex-direction:column;gap:12px; }.solo-actions button { border:1px solid #ac9360;padding:6px 12px;background:#38291c; }
.compact .level-menu { inset:8px 8px 28px;padding:8px; }
.compact #level-grid { grid-template-columns:repeat(5,minmax(0,1fr)); }
.compact .level-heading h2 { font-size:18px; }.compact .solo-level { font-size:12px; }

/* Projected annotations stay beside tiles and never intercept board gestures. */
#tile-markers { position:absolute;inset:0;pointer-events:none;z-index:1;overflow:hidden; }
.tile-callout { position:absolute;left:0;top:0;display:flex;flex-direction:column;align-items:flex-start;gap:1px;max-width:100px; }
.tile-name, .pin-name { display:block;max-width:100px;padding:1px 3px;border-left:3px solid;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:16px/18px Lantern,system-ui,sans-serif;color:#fff9e8;background:#142126;opacity:.8;text-shadow:1px 1px #000; }
.tile-hint { display:grid;place-items:center;width:16px;height:20px;font:16px/16px Lantern,monospace;color:#ffe491;background:#142126ed;border-bottom:2px solid #ffe491;box-shadow:1px 0 #142126,-1px 0 #142126,0 -1px #142126; }
.pin-callout { align-items:center; }.tile-pin { display:block;width:16px;height:18px;shape-rendering:crispEdges; }.pin-name { font-size:12px;line-height:14px; }

#build-version { position:absolute;left:6px;bottom:22px;font:12px/16px Lantern,monospace;color:#d6cfac;text-shadow:1px 1px #080b0e;pointer-events:none; }

.room-menu { position:absolute;inset:14px 24px 28px;padding:12px;background:#141b19ed;border:1px solid #b49b60;display:flex;flex-direction:column;gap:8px; }
.room-menu h2 { margin:0;font-size:16px;color:#ffe1a2; }
#room-list { flex:1;overflow-y:auto;min-height:0; }
.room-row { display:grid;grid-template-columns:18px 1fr 62px 66px;align-items:center;gap:6px;width:100%;padding:12px 4px;border-bottom:1px solid #706c4c;text-align:left;color:#f8ecc9; }
.room-row:hover { background:#454b2d; }.room-row .nickname { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.room-row:disabled { opacity:.5;cursor:default; }
.room-row .room-phase { color:#a8c77d; }.room-menu nav { display:flex;gap:12px;justify-content:space-between; }.room-menu nav button { padding:6px;border:1px solid #ac9360;background:#38291c; }
#rooms-status { font-size:16px;color:#e1c894; }#rooms-status:empty { display:none; }
#public-room-status { color:#b5cd8e;font-size:16px; }.traffic-setting { display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px; }
#traffic-limit { padding:6px;background:#182723;color:#fff0b7;border:1px solid #ac9360;font:inherit;max-width:60%; }#traffic-usage { display:block;font-size:16px; }

h1 ruby { ruby-position:over; }h1 rt { font:16px/1.2 Lantern,monospace;letter-spacing:4px;text-shadow:1px 1px #180e0b;color:#f1d79d; }html[lang=en] h1 rt { display:none; }
#board-announcement { white-space:pre-line;text-align:center; }
#room-record { position:absolute;left:112px;right:58px;top:5px;height:42px;color:#f4db98;background:#101d1bc7;font:16px/18px Lantern,system-ui,sans-serif; }
.compact #room-record { left:79px;right:5px; }
.record-line { display:flex;gap:14px;align-items:center;min-width:0; }
#share-record { color:#ffe3a0;flex-shrink:0;white-space:nowrap;text-decoration:none; }#share-record:hover { color:white; }#share-record strong { font-weight:normal; }
#room-top { display:flex;align-items:center;gap:3px;min-width:0; }#room-top svg { width:15px;height:12px;fill:#ffe3a0;flex-shrink:0;shape-rendering:crispEdges; }
#room-top-names { white-space:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#9c8559 #101d1b; }#room-top-tiles { flex-shrink:0; }
#room-best-names { white-space:nowrap;overflow-x:auto;scrollbar-width:thin;scrollbar-color:#9c8559 #101d1b;color:#fff1d0; }
.share-link { display:block;color:#fff1c0;text-align:center;text-decoration:none; }
.lobby-menu > .share-link { width:174px;min-height:27px;padding:4px 8px;border:1px solid #a99560;background:#36271be8; }
.settings-list > .share-link,.solo-actions > .share-link { border:1px solid #ac9360;padding:6px 12px;background:#38291c;min-height:40px; }

#share-record::after { content:"X";display:inline-block;margin-left:5px;padding:0 2px;border:1px solid #9c8559;font:16px/16px Lantern,monospace; }