:root{--board-font:"Comic Sans MS","Segoe Print","Trebuchet MS","DFKai-SB","KaiTi",sans-serif}
/* A chalkboard game cabinet, inspired by the reference's warm wood and chalk marks. */
:root{font-size:18px;color:#f0e5cd;background:#302b25;font-family:"Segoe UI","Microsoft JhengHei",sans-serif;--paper:#e9dfc6;--wood:#69513b;--chalk:#f4f1d9;--gold:#efb849}
body{background:radial-gradient(ellipse at 50% 25%,#8e7c5c20,transparent 65%),repeating-linear-gradient(2deg,#ffffff02 0 1px,transparent 1px 5px),#302b25;min-height:100vh}
button,input,select{font:inherit}button{border-radius:7px;background:linear-gradient(#ede5d4,#d6c9b0);border:1px solid #a99a7a;color:#433b2e;box-shadow:inset 0 1px #fff8,0 2px 0 #0003;transition:filter .15s,transform .15s}button:hover:enabled{background:linear-gradient(#fff3d9,#e9d8b5);transform:translateY(-1px)}button:disabled{opacity:.45}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #efbd54;outline-offset:3px}
.primary{color:#3d2c10;border-color:#a47126;background:linear-gradient(#ffde7a,#e9a438);box-shadow:inset 0 1px #fff9,0 3px 0 #8d602b}.primary:hover:enabled{background:linear-gradient(#ffe79a,#f2b747)}
input,.settings-panel select{background:#f4efdf;color:#463c2d;border-color:#b2a17b;box-shadow:inset 0 2px 5px #45361d13}
header{height:68px;padding:0 max(24px,calc((100vw - 1250px)/2));gap:24px;border-bottom:1px solid #b7a78127;background:#211e19aa}.brand{font-size:29px;color:#f1e5c8;letter-spacing:-1px}.brand i{color:#e4b95e}.tag{font-size:14px;color:#bcb199}#connection{font-size:12px;color:#d3ddc0;background:#3a4436;border:1px solid #71815c45;padding:7px 11px}
main{max-width:1280px;padding:24px 32px 30px}.room-heading{margin:0 0 12px;justify-content:flex-end}.room-code{font-size:12px;background:#211f1a;color:#c8bfa7;border:1px solid #73664a;padding:8px 13px;box-shadow:inset 0 1px 5px #0003}.room-code strong{font-size:20px;letter-spacing:3px;color:#f7df9e}
.room-utilities{display:flex;gap:10px;flex-wrap:wrap;margin:-49px 220px 18px 0;min-height:32px;align-items:flex-start}.room-utilities:has(>details:not([hidden])){margin-bottom:18px}.room-utilities:not(:has(>details:not([hidden]))){display:none}.room-utilities details.card{display:block;margin:0;padding:0;border:1px solid #796a4e;border-radius:7px;background:#403a2e;box-shadow:0 2px 3px #0002;max-width:100%;color:#eadfc7}.room-utilities summary{cursor:pointer;font-size:13px;padding:9px 13px;list-style:none}.room-utilities summary::after{content:'⌄';margin-left:13px;color:#bfab7f}.room-utilities details[open]{flex-basis:100%}.room-utilities details[open] summary{border-bottom:1px solid #77664a}.utility-content{padding:18px;display:grid;grid-template-columns:170px 1fr;gap:24px}.utility-content h2{font-size:20px;color:#f0e6cc}.utility-content .fine{font-size:12px;color:#c2b597}.utility-content label{font-size:13px}.utility-content .eyebrow{font-size:10px;color:#bc9c60}.utility-content button,.utility-content input{font-size:13px}
.game-layout{grid-template-columns:minmax(220px,260px) minmax(340px,1fr) 200px;gap:20px;align-items:start}.card{border-radius:12px}.players-card,.history-card{position:relative;background:linear-gradient(100deg,#e9dfc5,#f4ecd7 50%,#e7dbc0);color:#514735;border:1px solid #b6a17c;box-shadow:0 5px 16px #0002,inset 0 0 0 4px #fff4;padding:22px 17px}.players-card:before,.history-card:before{content:'';position:absolute;width:60px;height:17px;top:-9px;left:calc(50% - 30px);background:#bfae7b99;transform:rotate(-3deg);border:1px solid #d8c6954d}.section-title h2,.history-card h2{font-size:21px;letter-spacing:1px}#playerCount{font-size:12px;color:#84714c}.presence-summary{font-size:12px;color:#8a7c60}
#players{height:clamp(300px,47vh,420px);margin-top:15px;scrollbar-color:#b09e79 transparent;padding-right:4px}.players-card .player{padding:10px 7px;border-radius:7px;margin-top:7px;gap:9px;background:transparent;box-shadow:none;border:1px solid transparent}.players-card .player.active{background:#d9d3b45c;border-color:#c6b991}.players-card .player:hover:enabled{background:#fff5d66e}.avatar{width:29px;height:29px;background:#d9cba9;color:#786644;font-size:15px;border:1px solid #c1ad7f}.player-heading>strong{font-size:15px;color:#514735}.player-role{font-size:10px;color:#978362}.player .player-score .score-number{font-size:24px;color:#3a6954}.score-unit{font-size:11px;color:#817553}.hand-count{font-size:10px;color:#988764}.score-meter{gap:3px}.score-segment{height:5px;border-radius:2px;background:#c9bea1}.score-segment.complete{background:#698964}.player .score-meter{margin-top:5px}.dot{margin-top:12px!important;background:#b8a990}.dot.online{background:#698d60}.ready-badge{font-size:11px;padding:3px 6px;margin-top:6px}.ready-badge.is-ready{background:#d7e2c1;color:#486441;border-color:#a8ba87}.ready-badge.not-ready{background:#eee1bd;color:#97702f;border-color:#d2ba7c}.offline-badge{font-size:10px;color:#a27861}.player.is-turn{border:1px solid #bf9438!important;background:#f7e6ae!important;box-shadow:inset 3px 0 #c18a29}.player.is-turn .turn-badge{font-size:10px;color:#694b1b;background:#f2ca62;padding:3px 6px}.player.is-turn .player-heading>strong{font-size:16px;color:#694b1b;text-shadow:none}.aside-footer{font-size:12px;margin-top:18px;padding-top:14px;border-color:#cbbd9b}.aside-footer p{font-size:11px;line-height:1.8;color:#958466;margin:6px 0 0}
.board-card{position:relative;padding:14px 22px 18px;border:2px solid #a68c5b;border-radius:14px;background:repeating-linear-gradient(92deg,#ffffff03 0 2px,#00000003 2px 5px),linear-gradient(110deg,#73614a,#66543f 50%,#79654c);box-shadow:0 10px 36px #0004,inset 0 0 0 4px #392f2499,inset 0 0 0 6px #bca16e33;color:#efe7cf}
.board-card:before,.board-card:after{content:'✧';position:absolute;color:#c6b78c66;font-size:28px;top:25px;pointer-events:none}.board-card:before{left:22px;transform:rotate(-12deg)}.board-card:after{right:22px;transform:rotate(9deg)}
.bingo-sign{text-align:center;font-family:"Comic Sans MS","Segoe Print",cursive;font-size:55px;font-weight:700;line-height:1.25;letter-spacing:10px;color:#f6efd8;text-shadow:1px 1px #fff5,-1px 0 #fff3,0 2px 3px #0003;position:relative;margin:0 0 7px;user-select:none}.bingo-sign span{display:inline-block;font-size:21px;position:absolute;transform:rotate(15deg);margin-left:1px;top:5px;color:#e9cb84}
.board-card>.section-title{padding:0 2px;min-height:39px}.board-card .section-title h2{font-size:16px;font-weight:500;color:#d8cbaa;letter-spacing:2px;margin:0}.pill{display:flex;align-items:baseline;gap:5px;min-width:0;border-radius:6px;padding:5px 9px;background:#383c2e;border:1px solid #b4a07944;color:#e6d29b}.line-total{font-size:26px}.line-goal{font-size:11px}.pill .score-meter{display:none}
.status-strip{font-size:13px;color:#eddeb5;background:#2c3228;border:1px solid #a08c5850;border-radius:5px;margin:9px 0 14px;padding:9px 11px;line-height:1.5;text-align:center;box-shadow:inset 0 2px 4px #0002}
.chalkboard-frame{position:relative;max-width:450px;margin:0 auto;border:7px solid #344d3e;border-radius:6px;background:#193b32;box-shadow:0 0 0 2px #1b3028,0 0 0 4px #b2a16c66,inset 0 0 25px #0006,0 7px 13px #201e2040;padding:3px}
.board{gap:0;background:radial-gradient(ellipse at 25% 10%,#79947c20,transparent 65%),repeating-linear-gradient(0deg,#f2e8c502 0 1px,transparent 1px 3px),#21473b;border:1px solid #8da27a48;overflow:hidden;border-radius:2px}
.board .cell{position:relative;isolation:isolate;border:0;border-right:1px solid #8aa17d45;border-bottom:1px solid #8aa17d45;border-radius:0;background:transparent;padding:0;aspect-ratio:1;font-family:var(--board-font);font-size:clamp(23px,2.7vw,32px);font-weight:700;box-shadow:none;color:#f08b79;text-shadow:1px 1px 1px #0004;transition:background .15s}
.board .cell[data-column="1"]{color:#e5d278}.board .cell[data-column="2"]{color:#b7d27e}.board .cell[data-column="3"]{color:#73cbd3}.board .cell[data-column="4"]{color:#c390d1}.board .cell:hover:enabled{background:#d8dabd12;transform:none}.board .cell:disabled{opacity:1;cursor:default}.board .cell:focus-visible{outline:2px solid #e1c47b;outline-offset:-4px;z-index:2}.board .cell.marked{background:#e4e1be08;color:#faf3d7!important}.board button.cell.marked:after{content:'';position:absolute;inset:12%;border:3px solid #ef645b;border-radius:47% 53% 50% 46%;box-shadow:1px 0 #db3e4399,-1px 1px #ff8b7377,inset 1px -1px #e84c5277;transform:rotate(-8deg);pointer-events:none}.board button.cell.marked:nth-child(even):after{transform:rotate(9deg);border-radius:50% 46% 54% 48%;inset:11%}.board .cell.latest{background:#d5b97124;box-shadow:inset 0 0 0 2px #e8c97b99}.board input.cell{appearance:textfield;box-shadow:inset 0 0 18px #ffffff03}.board input.cell::-webkit-inner-spin-button,.board input.cell::-webkit-outer-spin-button{appearance:none;margin:0}.board .cell.invalid{background:#a23e3440;border:2px solid #e29a80}.board[data-size="7"] .cell,.board[data-size="8"] .cell,.board[data-size="9"] .cell{font-size:clamp(16px,2.1vw,23px)}
.chalk-lines{position:absolute;inset:10px;width:calc(100% - 20px);height:calc(100% - 20px);pointer-events:none;overflow:visible}.chalk-lines line{stroke:#f7f3d6;stroke-width:1.1;stroke-linecap:round;opacity:.8;filter:drop-shadow(0 0 1px #f7f3d6);vector-effect:non-scaling-stroke;stroke-width:4px}
.board-tools{justify-content:center;gap:12px;margin-top:17px}.board-tools button{font-size:13px;min-height:40px;padding:10px 17px;font-weight:700}:is(#ready,#next-ready){min-width:170px}.board-card>:is(#boardHint,#next-boardHint){font-size:10px;line-height:1.5;margin:10px 0 0;text-align:center;color:#c4b797}.host-tools{margin-top:12px;padding-top:12px;border-color:#b3a17b44;gap:7px;justify-content:center}.host-tools button{font-size:12px;padding:8px 11px}:is(#reset,#next-reset){color:#5a3717;border-color:#bd8a3e;background:linear-gradient(#f7d787,#d5a14f)}.scan-hint{font-size:10px;color:#c4b797;line-height:1.5;text-align:center}
.history-card .eyebrow{font-size:10px;color:#a69161}.history-card h2{margin-top:8px}.history-card>.fine{font-size:11px;color:#9f8d68}#lastNumber{display:grid;place-items:center;width:105px;height:105px;margin:24px auto 10px;border:2px solid #c9a45b;border-radius:50%;background:radial-gradient(circle at 36% 30%,#fff7dc,#e4c887);box-shadow:inset 0 0 0 5px #f7edcc,0 5px 10px #99815122;color:#7b5630;font:700 54px Georgia,serif}#history{gap:7px;margin-top:16px;max-height:245px;overflow:auto}#history span{width:28px;height:28px;background:#d8ceb2;border:1px solid #c5b68e;color:#7e6b47;font-size:12px;font-weight:600}#history span:last-child{background:#dcac4d;color:#493515;border-color:#b8882c}:is(#winner,#next-winner){font-size:17px;font-weight:750;color:#a16c25}
.hand-dock{bottom:14px}.hand-dock>button{padding:9px 15px;gap:14px;border:2px solid #b29866;border-radius:10px;background:repeating-linear-gradient(0deg,#fff1 0 1px,transparent 1px 4px),#594b39;box-shadow:inset 0 0 0 3px #312c26,0 6px 20px #0004;color:#f7ebcc}.hand-dock>button:hover:enabled{background:#6a5840}.inventory-slots{display:flex;gap:5px}.inventory-slots>span{display:grid;place-items:center;width:36px;height:36px;background:linear-gradient(#f1e9d6,#b9c7b0);border:2px solid #507378;outline:1px solid #c8b78e;border-radius:3px;font-size:25px;color:#855c2c;text-shadow:1px 1px #fff}.inventory-slots>span:nth-child(2){background:linear-gradient(#f5edce,#a8c4a3);color:#497354}.inventory-slots>span:nth-child(3){background:linear-gradient(#f2e7ef,#b9aacb);color:#735187}.inventory-label{text-align:left;font-size:15px;font-weight:700}.inventory-label small{display:block;font-size:10px;font-weight:400;color:#c3b394;margin-top:3px}body.has-hand-dock{padding-bottom:88px}
:is(#handPanel,#next-handPanel),:is(#sharedCardDialog,#next-sharedCardDialog),:is(#cardPreviewDialog,#next-cardPreviewDialog),:is(#confirmCall,#next-confirmCall){background:linear-gradient(125deg,#f8f0d9,#eee4cb);border:2px solid #ae9566;box-shadow:inset 0 0 0 4px #fffc,0 20px 80px #0005;color:#4c4934;border-radius:13px}:is(#handPanel,#next-handPanel){padding-top:22px}:is(#handPanel,#next-handPanel) h2{color:#675638}.drawer-close{background:#ded5b8;color:#786543}:is(#handCount,#next-handCount){background:#d8dfc2;color:#566c43}.spell-card{border-radius:9px!important}.shared-card-summary{background:#dfdfc6;border-color:#c2c7a2}.shared-card-summary :is(#sharedCardEffect,#next-sharedCardEffect){color:#5a7048}:is(#sharedCardDialog,#next-sharedCardDialog) .preview-option{background:#f8f3e4;color:#5b5942;border-color:#cec4a4;box-shadow:none}:is(#sharedCardDialog,#next-sharedCardDialog) .preview-option.chosen{background:#dbe1bd;border-color:#819364}:is(#sharedCardResult,#next-sharedCardResult){color:#6f7557}.preview-badge{color:#8c6e2d;background:#e9d7a5;border-color:#c6ac6c}:is(#sharedCardTitle,#next-sharedCardTitle){color:#5e5136}:is(#pendingNumber,#next-pendingNumber){color:#5f7351}:is(#confirmCall,#next-confirmCall) .eyebrow{color:#9c824f}:is(#confirmDescription,#next-confirmDescription){color:#625941}#lineNotices{z-index:30}.line-notice{background:#f7ebc6;color:#67501e;border-color:#b49650}.fine{color:#9c8d6a}:is(#message,#next-message){background:#3c503c;border:1px solid #9eae80;color:#f5eed5;bottom:100px}
footer{padding:18px 32px;border-color:#bda66b20;color:#9d8f72;font-size:11px}footer button{font-size:11px;background:#413a2d;color:#bcb095;border-color:#706144;box-shadow:none}
/* Entry pages keep the same material palette. */
#welcome{gap:8vw;min-height:70vh}.intro h1{color:#f0e4c5;font-family:"Segoe Print","Microsoft JhengHei",sans-serif;font-size:clamp(52px,6vw,80px)}.intro h1 span{color:#eac76c}.intro .eyebrow{color:#c9ab69}.intro p{color:#baad8e;font-size:19px}.rules span{color:#cdbb93;border-color:#8e79533d;font-size:12px}.entry{color:#61533a;background:#ece2c7;border:2px solid #aa9164;box-shadow:0 15px 40px #0003}.entry h2{font-size:30px}.entry .eyebrow{color:#a48a51}.divider{color:#a59471}.divider:before,.divider:after{background:#ccbd97}.entry .fine{color:#9a8968}.join-page #join{background:linear-gradient(#ffde7a,#e9a438);color:#5a4217}.join-page #hostEntry{color:#8b7849}
@media(min-width:1450px){.game-layout{grid-template-columns:270px minmax(340px,1fr) 220px}.chalkboard-frame{max-width:470px}}
@media(max-width:1050px){.game-layout{grid-template-columns:210px minmax(320px,1fr);gap:16px}.history-card{grid-column:1/-1;display:grid;grid-template-columns:150px 100px 1fr;align-items:center;gap:12px;padding:16px 20px}.history-card:before,.history-card>.eyebrow,.history-card>.fine{display:none}.history-card h2{font-size:18px;margin:0}#lastNumber{width:66px;height:66px;font-size:35px;margin:0}#history{margin:0;max-height:100px}:is(#winner,#next-winner){grid-column:1/-1;margin:0}.board-card{padding:12px 18px 16px}.players-card{padding:20px 13px}}
@media(max-width:700px){header{height:59px;padding:0 17px;gap:10px}.brand{font-size:23px}.tag{display:none}#connection{font-size:10px;padding:6px 8px}main{padding:18px 14px 24px}.room-code{padding:7px 10px}.room-code strong{display:inline;font-size:17px;padding:0 6px}.room-heading{margin-bottom:12px}.room-utilities{margin:-45px 170px 14px 0;gap:5px}.room-utilities summary{font-size:11px;padding:7px 9px}.room-utilities summary::after{margin-left:6px}.room-utilities details[open]{min-width:calc(100vw - 28px)}.utility-content{display:block;padding:15px}.utility-content>div+div{margin-top:12px}.game-layout{grid-template-columns:1fr;gap:18px}.board-card{grid-row:1;padding:12px 20px 16px}.bingo-sign{font-size:48px;letter-spacing:8px}.board-card:before,.board-card:after{font-size:24px;top:21px}.board-card .section-title h2{font-size:15px}.status-strip{font-size:12px;padding:8px;margin:8px 0 13px}.chalkboard-frame{max-width:450px}.board .cell{font-size:clamp(21px,6vw,32px)}.board-tools button{font-size:12px;padding:10px 12px}:is(#ready,#next-ready){min-width:0}.board-card>:is(#boardHint,#next-boardHint){font-size:10px}.players-card{grid-row:2;padding:18px}.players-card .section-title{flex-wrap:nowrap}#players{height:270px}.players-card .aside-footer{display:none}.history-card{grid-row:3;grid-column:auto;grid-template-columns:1fr 70px;gap:12px}.history-card #history{grid-column:1/-1;max-height:140px}.history-card :is(#winner,#next-winner){grid-column:1/-1}.hand-dock{bottom:10px}.hand-dock>button{padding:7px 12px}.inventory-slots>span{width:31px;height:31px;font-size:22px}.inventory-label{font-size:13px}.inventory-label small{font-size:9px}footer{padding:16px;font-size:10px;flex-wrap:wrap}#welcome{min-height:70vh}.intro h1{font-size:56px}.intro p{font-size:17px}.entry{padding:25px}.room-utilities details.card{flex-shrink:0}}
@media(prefers-reduced-motion:reduce){button,.board .cell{transition:none}}
.chalkboard-frame{max-width:400px}.bingo-sign{font-size:48px;line-height:1.15}.chalk-lines{inset:4px;width:calc(100% - 8px);height:calc(100% - 8px)}@media(min-width:1450px){.chalkboard-frame{max-width:430px}}@media(max-width:700px){.chalkboard-frame{max-width:450px}}
@media(min-width:1051px){.hand-dock{left:auto;right:max(24px,calc((100vw - 1280px)/2 + 32px));bottom:24px;transform:none}.hand-dock>button{width:196px;flex-wrap:wrap;justify-content:center;gap:8px;padding:12px}.inventory-slots{width:100%;justify-content:center}.inventory-label{font-size:14px}.inventory-label small{display:none}}.chalkboard-frame:has(.board[data-phase="lobby"]){max-width:360px}
@media(min-width:1051px){.game-layout{grid-template-columns:280px minmax(340px,1fr) 200px}}@media(min-width:701px) and (max-height:800px){.chalkboard-frame{max-width:350px}.chalkboard-frame:has(.board[data-phase="lobby"]){max-width:310px}.bingo-sign{font-size:42px}.board-card{padding-top:10px}#players{height:clamp(250px,40vh,350px)}}
.chalk-texture-defs{position:absolute;width:0;height:0;overflow:hidden;pointer-events:none}.board button.cell.marked:after{border-width:5px;border-color:#ff433f;box-shadow:none;filter:url(#chalk-grain)}.board button.cell.marked:nth-child(3n):after{border-radius:45% 52% 46% 54%;transform:rotate(-13deg)}.chalk-lines{filter:url(#chalk-grain)}.chalk-lines line{filter:none;stroke:#ff433f;stroke-width:5px;opacity:1}.bingo-sign{filter:url(#chalk-grain);text-shadow:1px 1px #fff3}
.room-code:hover:enabled{background:#302b22;color:#e6dac0}
.brand{display:inline-flex;align-items:center;gap:9px}
.brand-anchor{width:.9em;height:1.05em;flex:none;fill:none;stroke:currentColor;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;color:#e4b95e}
.tag.tag-marquee{display:block;flex:1;min-width:0;overflow:hidden;white-space:nowrap;container-type:inline-size}
header>.brand,header>#connection{flex-shrink:0}
.tag-track{display:block;width:max-content;animation:tag-scroll 20s linear infinite}
.tag-copy{display:block}
@keyframes tag-scroll{from{transform:translateX(100cqw)}to{transform:translateX(-100%)}}
@media(prefers-reduced-motion:reduce){.tag-track{animation:none;transform:none}}