:root{--paper: #f4f9fc;--ink: #2a3a7a;--muted: #5b6b9c;--line: #8ec8e0;--grid: #b7d7ea;--blue: #1d4f9c;--red: #c43c3c;--pen: #4a58a8;--bar: #1b2430;--card: #fffdf8;--danger: #9b1c1c;--radius: 14px;--sq: 50px;--chat-pad: 8px;--chat-action-w: 6rem;--chat-stripe-from-right: calc(var(--chat-pad) + var(--chat-action-w) / 2);--desk: linear-gradient(rgb(255 255 255 / .25), rgb(255 255 255 / .25)), #9a7a58 url(/bg.jpg) center / cover no-repeat;color-scheme:light}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}html,body{margin:0;height:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;background:var(--desk);color:var(--ink);font:700 22px/1.15 Caveat,cursive;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}body{position:fixed;top:0;right:0;bottom:0;left:0}.screen{height:100%;display:flex;flex-direction:column}.setup-head{padding:16px 16px 8px;color:#e8eef4;position:relative}.setup-head h1{margin:0;font-size:1.6rem}.sub{margin:4px 0 0;color:#9aa8b6}.lang{position:absolute;top:16px;right:16px;display:flex;gap:4px}.lang button{min-width:40px}.form{flex:1;overflow:auto;padding:8px 16px 24px;display:flex;flex-direction:column;gap:12px}.rules{padding:4px 16px 8px;color:#e8eef4;font-size:.9rem}.rules p{margin:0 0 8px}.rules strong{color:#9fd0e8;margin-right:6px}fieldset{border:1px solid #334155;border-radius:var(--radius);padding:10px 12px 12px;margin:0;background:#222c38;color:#e8eef4}legend{padding:0 6px;color:#9fd0e8}label{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:8px;font-size:.95rem}label.check{justify-content:flex-start}input[type=number],input[type=text]{width:88px;padding:8px;border-radius:8px;border:1px solid #4b5d70;background:#0f1720;color:#e8eef4;font:inherit}#room-code{width:96px;text-transform:uppercase}button{font:inherit;border:0;border-radius:10px;padding:10px 12px;background:#334155;color:#e8eef4;min-height:44px;cursor:pointer}.paper{background-color:var(--paper);background-image:repeating-linear-gradient(45deg,transparent 0 3px,rgb(74 88 168 / .11) 3px 4px),repeating-linear-gradient(-45deg,transparent 0 5px,rgb(74 88 168 / .06) 5px 6px),repeating-linear-gradient(0deg,transparent 0 13px,var(--grid) 13px 14px),repeating-linear-gradient(90deg,transparent 0 13px,var(--grid) 13px 14px);border:2px solid var(--pen);border-radius:var(--radius);color:var(--ink)}.paper.active{box-shadow:inset 0 0 0 2px var(--pen)}.ico{width:28px;height:28px;flex:none;stroke:var(--pen);fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.ico-gear{fill:var(--pen);stroke:none}button.primary{background:var(--blue);color:#fff}.error{color:#ffb4b4;margin:0}.play{background:var(--paper)}#hud{flex:0 0 auto;background:var(--bar);color:#e8eef4;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top))}.hud-row{display:flex;justify-content:space-between;gap:8px;font-size:.92rem}#turn{font-size:1.12rem;font-weight:700}.rules-line,.stats-line{margin-top:4px;color:#9aa8b6;font-size:.8rem}.scores{margin-top:4px;align-items:baseline}.score.blue{color:#8eb7ff}.score.red{color:#ff9b9b}#board-wrap{flex:1;min-height:0;position:relative;touch-action:none;overflow:hidden}#board{display:block;width:100%;height:100%;touch-action:none;background:transparent;border:0}.presets{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.presets button{flex:1 1 auto}.hint{margin:6px 0 0;font-size:.8rem;color:#9aa8b6}.onboard{padding:20px 16px max(16px,env(safe-area-inset-bottom));background:#5c3d28;color:#f3e6d4;gap:12px}.onboard h1{margin:0}.onboard .sub{color:#d4c0a8}.onboard .rules{color:#f3e6d4;flex:1;overflow:auto}.stack{flex-direction:column;align-items:stretch}.stack input[type=text]{width:100%}.row-btns{display:flex;gap:8px}.row-btns button{flex:1}.avatar-row{display:flex;flex-wrap:wrap;gap:8px}.avatar,.avatar-pick{width:44px;height:44px;min-width:44px;min-height:44px;padding:0;border-radius:50%;display:grid;place-items:center;place-content:center;line-height:0;flex:none;background:var(--paper);border:2px solid var(--pen);color:var(--pen)}.avatar-pick[aria-pressed=true]{box-shadow:inset 0 0 0 3px var(--pen);background:color-mix(in srgb,var(--blue) 16%,var(--paper))}.profile .avatar{width:var(--rail-pic);height:var(--rail-pic);min-width:var(--rail-pic);min-height:var(--rail-pic)}.avatar .ico,.avatar-pick .ico{width:26px;height:26px;display:block;margin:0;overflow:visible}.profile .avatar .ico{width:var(--rail-glyph);height:var(--rail-glyph);stroke-width:2.2}.hub{position:relative;display:flex;flex-direction:row;align-items:stretch;gap:.5%;padding:.5%;padding-top:max(.5%,env(safe-area-inset-top));padding-bottom:max(.5%,env(safe-area-inset-bottom));background:var(--desk);--rail-pic: 44px;--rail-glyph: 32px}.hub-rail{display:flex;flex-direction:column;min-width:0;min-height:0;flex:none}.profile{position:relative;display:flex;align-items:center;justify-content:flex-start;gap:10px;min-height:56px;padding:8px 12px 8px 20px;text-align:left;width:100%;flex:none}.profile.is-signed{padding-bottom:26px}.profile-meta{display:flex;flex-direction:column;min-width:0;flex:1}.profile-name{font-size:1.5rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.profile-login{font-size:1rem;font-weight:700;color:var(--red);cursor:pointer}.profile-elo{font-size:1rem;font-weight:700;color:var(--ink)}.profile-logout{position:absolute;right:10px;bottom:4px;font-size:.95rem;font-weight:700;color:var(--blue);cursor:pointer;line-height:1}.modes-slot{flex:1;display:flex;align-items:center;min-height:0}.mode-tabs{width:100%;display:flex;flex-direction:column;gap:10px}.mode-tabs button{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;font:inherit;font-size:1.5rem;font-weight:700;padding:8px 12px;min-height:65px}.mode-tabs .ico{width:34px;height:34px;stroke-width:2.2;display:block}.mode-tabs span{line-height:1}.settings{display:flex;align-items:center;justify-content:flex-start;gap:10px;width:100%;font:inherit;font-size:1.5rem;font-weight:700;padding:8px 12px 8px 20px;flex:none;min-height:48px}.settings .ico{width:var(--rail-glyph);height:var(--rail-glyph);margin-left:calc((var(--rail-pic) - var(--rail-glyph)) / 2);flex:none}.hub-main{min-width:0;min-height:0;display:flex;flex-direction:column;flex:none}.pane-table{flex:1;min-height:0;display:flex;flex-direction:column;background:transparent;overflow:hidden}.table-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:4px;align-items:center;padding:0 0 4px;flex:none}.hud-side{display:grid;min-width:0;align-items:center}.hud-side.left{grid-template-columns:auto minmax(0,1fr)}.hud-side.right{grid-template-columns:minmax(0,1fr) auto}.undo-redo,.end-pass{display:flex;gap:4px;align-items:center}.sq{width:var(--sq);height:var(--sq);min-width:var(--sq);min-height:var(--sq);padding:0;font:700 16px/1 Caveat,cursive;display:grid;place-items:center}.sq:disabled,.chip:disabled{opacity:.4}.finish{height:var(--sq);min-height:var(--sq);padding:0 12px;border:2px solid #163a78;border-radius:10px;background:var(--blue);color:#fff;font:inherit;font-size:1.15rem;white-space:nowrap}.chip{background:var(--paper);color:var(--ink);border:2px solid var(--pen);min-height:var(--sq);padding:0 10px;white-space:nowrap;flex:0 0 auto}.chip.primary,button.primary{background:var(--blue);color:#fff;border-color:#163a78}.chip.pending{outline:2px dashed #8a6b3d}.seat{background:none;border:none;color:var(--ink);padding:0 4px;min-height:var(--sq);min-width:0;font:inherit;overflow:hidden;display:flex;align-items:center;gap:6px}#seat-left,#seat-right{width:100%}#seat-right{cursor:pointer}.seat .nick{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:1.4rem;font-weight:700;-webkit-text-stroke:.35px currentColor;line-height:1;padding-top:.12em;text-align:center}.clocks{display:none;flex-direction:column;align-items:stretch;gap:2px;flex:none}.hub.has-clocks .clocks{display:flex}.clock{font-size:.75rem;font-weight:700;color:var(--ink);line-height:1.1;padding:1px 5px;border:2px solid var(--pen);border-radius:8px;background:var(--paper);text-align:center;white-space:nowrap}#seat-left .nick{color:#12307a}#seat-right .nick{color:#9b1c1c}.seat-mid{display:flex;flex-direction:column;align-items:stretch;gap:0;min-width:4.5rem;white-space:nowrap}.score{display:grid;grid-template-columns:1fr auto 1fr;align-items:baseline;width:100%;font-size:1.4rem;font-weight:700;line-height:1}#score-blue,#score-red,.score-colon{-webkit-text-stroke:.35px currentColor;padding-top:.12em}#score-blue{text-align:right;padding-right:.15em;color:var(--blue)}.score-colon{text-align:center;color:var(--ink)}#score-red{text-align:left;padding-left:.15em;color:var(--red)}#turn{font-size:.95rem;font-weight:700;text-align:center}#turn.turn-blue{color:var(--blue)}#turn.turn-red{color:var(--red)}#turn.turn-ink{color:var(--ink)}#turn.turn-muted{color:var(--muted)}.room-under-turn{margin:2px 0 0;padding:0;border:0;background:none;font:inherit;font-size:.8rem;font-weight:600;color:var(--muted);text-align:center;cursor:pointer}.hud-mini{padding:0 8px 4px;font-size:.9rem;color:var(--muted)}#result-line,#stats-line{text-align:center;color:var(--ink);font-weight:700;font-size:1.05rem;-webkit-text-stroke:.3px currentColor}#result-line{margin-top:2px}.pane-stub{flex:1;padding:8px 0;display:flex;flex-direction:column;gap:10px;min-height:0;overflow:auto}.stub-card{text-align:left;display:flex;flex-direction:column;gap:4px;min-height:72px}.stub-card.muted{opacity:.9}.pane-friend{display:grid;grid-template-columns:repeat(3,minmax(5.5rem,8.5rem));justify-content:center;align-content:center;gap:12px;padding:12px 8px;overflow:auto}.pane-friend .stub-card{aspect-ratio:1;min-height:0;justify-content:center;align-items:center;text-align:center;padding:10px}.pane-friend .stub-card strong{font-size:1.45rem;font-weight:700;-webkit-text-stroke:.4px currentColor}.pane-friend .stub-card span{font-size:.85rem;font-weight:600}#pane-online.lobby-vacant{align-items:center;justify-content:center}#pane-online.lobby-vacant .lobby-toolbar{justify-content:center}#pane-online.lobby-vacant .lobby-list{display:none}.lobby-toolbar{display:flex;flex-wrap:wrap;gap:6px}.lobby-list{display:flex;flex-direction:column;gap:8px}.lobby-empty{margin:8px 0;color:var(--muted)}.end-actions{display:flex;flex-wrap:wrap;gap:6px;padding:4px 0 0}.replay-ply{display:flex;flex-direction:column;gap:4px;flex:1 1 100%;font-size:.9rem}.logs-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto}.chat-col{min-width:0;min-height:0;flex:none;display:flex;flex-direction:column;overflow:hidden;border:2px solid var(--pen);border-radius:var(--radius);background-color:var(--paper)}.chat-head{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 10px;flex:none;font-size:1.35rem}.chat-fold{box-sizing:border-box;width:var(--chat-action-w);min-width:var(--chat-action-w);min-height:36px;padding:4px 8px;font-size:1rem;background:var(--paper);color:var(--pen);border:2px solid var(--pen);display:flex;align-items:center;justify-content:center}.chat-log{flex:1;min-height:0;overflow:auto;padding:2px calc(var(--chat-stripe-from-right) + 12px) 10px 14px;font-weight:600;color:var(--ink);line-height:28px;user-select:text;-webkit-user-select:text;background-image:linear-gradient(90deg,transparent calc(100% - var(--chat-stripe-from-right) - 1px),#e08a8a calc(100% - var(--chat-stripe-from-right) - 1px),#e08a8a calc(100% - var(--chat-stripe-from-right) + 1px),transparent calc(100% - var(--chat-stripe-from-right) + 1px)),repeating-linear-gradient(transparent 0 27px,#4a58a838 27px,#4a58a838 28px);background-color:var(--paper)}.chat-log p{margin:0 0 28px}.chat-log .muted{color:var(--muted);font-weight:500}.chat-form{display:flex;gap:6px;padding:var(--chat-pad);align-items:center;background:#f4f9fcb8}.chat-form input{flex:1;min-width:0;width:auto;border:2px solid var(--pen);border-radius:8px;padding:6px 8px;font:inherit;background:var(--paper);color:var(--ink);user-select:text;-webkit-user-select:text}.chat-form input:disabled{opacity:.55;cursor:not-allowed}.chat-form button[type=submit]{box-sizing:border-box;width:var(--chat-action-w);min-width:var(--chat-action-w);border:2px solid #163a78;background:var(--blue);color:#fff;padding:6px 8px;min-height:36px;display:flex;align-items:center;justify-content:center}.chat-gear{box-sizing:border-box;width:var(--rail-glyph);height:var(--rail-glyph);min-width:var(--rail-glyph);min-height:var(--rail-glyph);padding:0;margin:0;border:2px solid var(--pen);border-radius:10px;background:transparent;color:var(--pen);flex:none;display:flex;align-items:center;justify-content:center;line-height:0;font-size:0}.chat-gear .ico{width:26px;height:26px;display:block;stroke:none}.chat-tab{position:absolute;top:50%;right:.5%;transform:translateY(-50%);z-index:4;writing-mode:vertical-rl;min-height:88px;padding:10px 6px}.hub.chat-plain .chat-col,.hub.chat-plain .chat-col button,.hub.chat-plain .chat-col input,.hub.chat-plain .chat-tab{font-family:system-ui,Segoe UI,Roboto,sans-serif;font-weight:600}.hub.chat-plain .chat-head{font-size:1.05rem}.hub.chat-plain .chat-log{font-size:15px;font-weight:500}.hub.chat-plain .chat-fold,.hub.chat-plain .chat-form button[type=submit],.hub.chat-plain .chat-form input{font-size:14px}.hub.is-narrow:not(.chat-collapsed) .chat-col{position:absolute;top:.5%;right:.5%;bottom:.5%;width:min(72vw,22rem);min-width:16rem;z-index:5}@media(max-width:1099px){.hub.is-phone{flex-direction:column}}@media(max-width:719px){.hub{flex-direction:column}.hub-rail{order:3;flex-direction:row;width:100%!important;height:auto;gap:6px;align-items:stretch}.profile{width:auto;flex:1;min-width:0}.modes-slot{flex:2}.mode-tabs{flex-direction:row;height:100%}.mode-tabs button{min-height:48px;font-size:1.1rem;padding:4px;flex:1}.mode-tabs button span{display:none}.settings{width:auto;min-width:48px;min-height:48px;padding:4px}.settings span{display:none}.hub-main{order:1;width:100%!important;flex:1}.chat-tab{top:auto;bottom:22%}.table-top{grid-template-columns:1fr;grid-template-rows:auto auto auto}.hud-side.left,.seat-mid,.hud-side.right{grid-column:1;grid-row:auto}.end-pass{justify-content:flex-end}}.dlg{border:0;border-radius:12px;padding:16px;width:min(360px,calc(100vw - 24px));background:#efe4d2;color:var(--ink)}.dlg-card{text-align:center;width:max-content;max-width:min(28rem,calc(100vw - 32px))}.dlg-card p{margin:0 0 10px}.dlg-card input[type=text]{width:14rem;max-width:100%;margin:0 auto 12px;display:block}.dlg-card .avatar-row{justify-content:center;margin-bottom:12px}.dlg-card>button,.dlg-card .row-btns{width:auto;margin-left:auto;margin-right:auto}.dlg-card .row-btns button{flex:0 1 auto;width:auto}.dlg-card .rules{text-align:left;max-height:min(50vh,22rem);overflow:auto;color:var(--ink)}.dlg-howto{text-align:left;width:min(36rem,calc(100vw - 24px));max-width:min(36rem,calc(100vw - 24px));background:var(--card);padding:18px 20px 16px}.howto-title{margin:0;font-size:1.45rem;font-weight:700;color:var(--blue)}.howto-sub{margin:2px 0 12px!important;font:500 .8rem/1.3 system-ui,Segoe UI,Roboto,sans-serif;color:var(--muted)}.howto-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px}.howto-card{margin:0}.howto-mini{display:block;width:100%;height:auto;aspect-ratio:1;background:#fff;border:1px solid var(--grid);border-radius:8px}.howto-lines{fill:none;stroke:var(--grid);stroke-width:1}.howto-blue{fill:var(--blue)}.howto-red{fill:var(--red)}.howto-faded{opacity:.38}.howto-aim{fill:none;stroke:var(--blue);stroke-width:1.6;stroke-dasharray:3 2.5}.howto-fill{fill:color-mix(in srgb,var(--blue) 22%,white)}.howto-chain-blue,.howto-chain-red{fill:none;stroke-width:2.2;stroke-linejoin:round}.howto-chain-blue{stroke:var(--blue)}.howto-chain-red{stroke:var(--red)}.howto-dashed{stroke-dasharray:4 3}.howto-badge rect{fill:var(--blue)}.howto-badge text{fill:#fff;font:700 9px/1 system-ui,Segoe UI,Roboto,sans-serif;text-anchor:middle}.howto-card figcaption{margin:8px 2px 0;font:500 .72rem/1.35 system-ui,Segoe UI,Roboto,sans-serif;font-weight:500;color:#5b6570;text-align:center}.howto-actions{display:flex;justify-content:flex-end;width:100%;margin-top:14px}.dlg-howto .howto-actions .primary{width:auto;min-width:7.5rem;margin:0}@media(max-width:720px){.howto-grid{grid-template-columns:1fr}}.avatar-row-lg .avatar-pick{width:88px;height:88px;min-width:88px;min-height:88px}.avatar-row-lg .avatar-pick .ico{width:48px;height:48px}.dlg::backdrop{background:#00000073}.dlg p{margin:0 0 8px;font-weight:700}.dlg .sub{color:var(--muted);font-weight:600;margin-top:12px}.dlg .rules-pending{margin:6px 0 0;font-size:.75rem;font-weight:600;color:#c41e1e}.dlg .linkish{display:inline-flex;width:auto;margin-top:12px;padding:0;border:0;background:none;color:var(--blue);text-decoration:underline;font:inherit;font-weight:600;cursor:pointer}.dlg button.pending{outline:2px dashed #8a6b3d}.dlg button:not(.avatar-pick),.dlg label{display:flex;width:100%;margin-top:8px}.dlg .avatar-pick{display:grid;place-items:center;place-content:center;width:auto;margin-top:0;padding:0;line-height:0}.dlg-card>button,.dlg-card .row-btns button{width:auto;min-width:8rem;margin-left:auto;margin-right:auto;justify-content:center}.stack-btns{display:flex;flex-direction:column;gap:8px}.dlg .lang{position:static}[hidden]{display:none!important}