:root{--bg:#f5f3ed;--ink:#282d29;--muted:#777b73;--line:#e4e4dc;--purple:#7160ae;--paper:#fffefa;--p0:#7562af;--p1:#328579;--p2:#a96916;--p3:#ae4e65;--p4:#46749d;font-family:ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:var(--bg)}
*{box-sizing:border-box}body{margin:0}button,input,select{font:inherit}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #9c87da;outline-offset:4px}header{max-width:1200px;margin:auto;padding:25px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;font-weight:750;font-size:20px;letter-spacing:-.7px}.brand-icon{font-size:31px;color:var(--purple)}.prototype{font-size:9px;letter-spacing:1.4px;border:1px solid var(--line);border-radius:4px;padding:5px 7px;color:var(--muted);margin-left:6px}nav{display:flex;gap:12px}.quiet{background:none;border:1px solid var(--line);border-radius:8px;padding:10px 14px;color:var(--ink);font-size:13px}.quiet:hover{background:#ebe8e1}main{max-width:1140px;margin:auto;padding:36px 32px 0}.intro{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:29px}.eyebrow{font-size:10px;font-weight:750;letter-spacing:2px;color:var(--purple);margin:0 0 12px}h1{font-size:clamp(22px,2.6vw,28px);line-height:1.25;letter-spacing:-.5px;margin:0;font-weight:650}.lede{font-size:14px;color:var(--muted);margin:8px 0 0;line-height:1.5}.intro-note{font-size:10px;letter-spacing:1.5px;line-height:2.3;text-align:right}.intro-note>span:last-child{color:var(--muted);letter-spacing:0;font-size:12px}.tiny-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#328579;margin-right:5px}.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px}.board-panel,.turn-panel,.players-panel,.score-guide,.activity{background:var(--paper);border:1px solid var(--line);border-radius:14px}.panel-heading{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:20px 23px}.muted{color:var(--muted)}.panel-heading .muted{font-size:10px;margin-left:10px;letter-spacing:.8px}#fill-count{font-size:11px;color:var(--muted)}.board-wrap{padding:5px 30px 14px}.board{display:grid;grid-template-columns:20px repeat(6,minmax(0,1fr));gap:8px}.axis{display:flex;align-items:center;justify-content:center;font-size:11px;color:var(--muted)}.axis.bottom{height:18px}.cell{aspect-ratio:1;border:1px solid #e5e5df;background:#f2f3ed;border-radius:10px;position:relative;color:#989d93;display:flex;justify-content:center;align-items:center;transition:background .15s,transform .15s,border .15s;opacity:1!important;padding:0}.cell .coord{position:absolute;top:7px;left:8px;font-size:9px;letter-spacing:.4px}.cell .piece{font-size:24px;font-weight:700}.cell .preview{position:absolute;bottom:6px;font-size:9px;font-weight:650}.cell.p0{background:var(--p0);border-color:var(--p0);color:#fff}.cell.p1{background:var(--p1);border-color:var(--p1);color:#fff}.cell.p2{background:#a96916;border-color:#a96916;color:#fff}.cell.p3{background:#ae4e65;border-color:#ae4e65;color:#fff}.cell.legal{border:2px solid var(--purple);background:#f1ebff;color:var(--purple);box-shadow:0 0 0 3px #7160ae0d}.cell.legal:hover{background:#e7ddfb;transform:translateY(-2px)}.axis-caption{text-align:center;font-size:8px;color:#93968e;letter-spacing:2px;padding:10px 0 0}.board-footer{border-top:1px solid var(--line);padding:15px 23px;display:flex;justify-content:space-between;gap:12px;font-size:10px;color:var(--muted)}.sidebar{display:flex;flex-direction:column;gap:18px}.turn-panel{padding:23px}.turn-panel h2{font-size:24px;letter-spacing:-.7px;margin:0 0 19px}.dice-pair{display:flex;gap:12px;margin-bottom:15px}.die{width:63px;height:63px;background:white;border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 0 #eae7df;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:12px;gap:4px}.pip{width:100%;aspect-ratio:1;border-radius:50%;background:var(--ink);align-self:center}.die.unrolled{display:flex;align-items:center;justify-content:center;color:#bebeb6;font-size:28px}.instruction{font-size:12px;line-height:1.6;color:var(--muted);min-height:39px;margin:0 0 15px}.primary{border:0;background:var(--purple);color:white;padding:13px 18px;border-radius:8px;font-weight:650;font-size:13px;width:100%}.primary:hover:not(:disabled){background:#62519c}#api-recovery{margin-top:10px;display:flex;flex-wrap:wrap;gap:7px}#api-recovery[hidden]{display:none}.players-panel{flex:1}.players-panel .panel-heading{padding:18px 20px 10px}.player{display:grid;grid-template-columns:28px 1fr auto;gap:9px;align-items:center;margin:0 11px;padding:12px 9px;border-bottom:1px solid var(--line);border-radius:7px}.player:last-child{border:0;margin-bottom:6px}.player.current{background:#f2eee9}.badge{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:white}.p0 .badge{background:var(--p0)}.p1 .badge{background:var(--p1)}.p2 .badge{background:var(--p2)}.p3 .badge{background:var(--p3)}.player-name{font-size:12px;font-weight:650}.player-type{font-size:9px;color:var(--muted);margin-top:3px}.player-points{text-align:right;font-size:20px;letter-spacing:-.5px;font-weight:650}.misses{display:flex;gap:3px;justify-content:flex-end;margin-top:5px}.miss-dot{width:14px;height:14px;border-radius:4px;background:#eeece5;border:1px solid #d7d3c8;display:flex;align-items:center;justify-content:center;font-size:13px;line-height:1;color:white}.miss-dot.filled{background:#bb503d;border-color:#bb503d}.bottom-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:22px;margin-top:22px}.score-guide{padding:21px 23px}.score-steps{display:flex;justify-content:space-between;gap:8px}.score-steps span{font-size:10px;color:var(--muted);text-align:center;flex:1;padding:6px 3px;border-radius:7px}.score-steps strong{display:block;font-size:23px;font-weight:600;color:var(--ink);margin-top:5px}.score-steps .best{background:#ece7f6;color:var(--purple)}.score-steps .best strong{color:var(--purple)}.score-guide>p:last-child{font-size:10px;color:var(--muted);margin:15px 0 0}.activity .panel-heading{padding:18px 20px 9px}.activity ol{list-style:none;padding:0 20px;margin:0 0 16px;font-size:11px;line-height:1.6}.activity li{padding:5px 0;border-bottom:1px solid var(--line)}.activity li:last-child{border:0}#api-status{font-size:9px;letter-spacing:0}footer{font-size:8px;letter-spacing:1.5px;color:#95978f;display:flex;justify-content:space-between;gap:16px;padding:26px 0}footer span{letter-spacing:0;font-size:10px}dialog{border:1px solid var(--line);border-radius:18px;padding:28px;width:min(520px,calc(100vw - 30px));max-height:90vh;color:var(--ink);background:var(--paper);box-shadow:0 20px 80px #282d2925}dialog::backdrop{background:#24282a75;backdrop-filter:blur(3px)}.dialog-top{display:flex;justify-content:space-between;align-items:center}.close{font-size:25px;background:none;border:0;color:var(--muted)}dialog h2{font-size:29px;letter-spacing:-1px;margin:6px 0 12px}dialog p.muted{font-size:13px;line-height:1.6}.count-label{display:flex;justify-content:space-between;align-items:center;font-size:13px;margin:22px 0 12px}select,input{border:1px solid var(--line);border-radius:7px;background:white;padding:10px;color:var(--ink);min-width:0}.setup-player{display:grid;grid-template-columns:24px minmax(0,1fr) minmax(0,1fr);gap:10px;align-items:center;margin:10px 0}.setup-player input,.setup-player select{width:100%;font-size:12px}.setup-note{font-size:11px;color:var(--muted);line-height:1.7}.rule-list{padding-left:20px;font-size:13px;line-height:1.7}.rule-list li{padding:6px 0}.rule-list strong{color:var(--purple)}
@media(min-width:1000px){.cell{max-height:82px}.board-wrap{padding-left:45px;padding-right:45px}}
@media(max-width:780px){main{padding:26px 18px 0}header{padding:18px}.prototype,.intro-note{display:none}.game-layout,.bottom-layout{grid-template-columns:1fr}.sidebar{display:grid;grid-template-columns:1fr 1fr;gap:14px}.turn-panel{padding:18px}.board-wrap{padding:5px 18px 10px}.intro{margin-bottom:23px}.bottom-layout{gap:14px}.brand{font-size:17px}nav{gap:5px}.quiet{padding:8px 10px;font-size:11px}footer{font-size:7px}.cell .piece{font-size:22px}}
@media(max-width:430px){.sidebar{grid-template-columns:1fr}.board{gap:5px;grid-template-columns:14px repeat(6,minmax(0,1fr))}.cell{border-radius:7px}.cell .coord{font-size:8px;top:4px;left:5px}.cell .preview{font-size:8px;bottom:3px}.board-footer span:last-child{display:none}.score-guide{padding:18px}.setup-player{gap:6px;grid-template-columns:20px 1fr 1fr}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}

.cell.neutral{background:#fff;border:2px solid #cfcdc4;color:#a9a69a}.cell.neutral .piece{font-size:29px}.steal-label{position:absolute;top:6px;right:5px;font-size:7px;letter-spacing:.5px;font-weight:700}

.board-panel{position:relative}.cell[class*="p"] .piece{font-size:17px;opacity:.7}.cell.neutral .piece{font-size:20px}.cell .coord{font-size:11px;font-weight:600}.cell.legal:is(.p0,.p1,.p2,.p3,.p4){color:white;background:var(--p0);outline:3px solid #d9ac38;outline-offset:1px}.cell.legal.p1{background:var(--p1)}.cell.legal.p2{background:var(--p2)}.cell.legal.p3{background:var(--p3)}.cell.legal:is(.p0,.p1,.p2,.p3,.p4):hover{filter:brightness(1.1)}
.zero-banner{position:absolute;z-index:5;inset:65px 35px auto;display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;padding:24px 20px;background:#fff3e9;border:3px solid #be533d;border-radius:16px;box-shadow:0 12px 50px #54221335;pointer-events:none;animation:zero-banner-pulse .8s ease-in-out 2}.zero-banner[hidden]{display:none}.zero-title{font-size:52px;font-weight:850;letter-spacing:4px;color:#b14732}.zero-banner strong{font-size:19px}.zero-banner #zero-detail{font-size:13px;line-height:1.5}.zero-flash{animation:zero-card-pulse .8s ease-in-out 2}.new-miss{animation:mark-arrival .5s ease-out 1}
@keyframes zero-banner-pulse{0%,100%{background:#fff3e9;transform:scale(1)}50%{background:#ffe1c7;transform:scale(1.025)}}@keyframes zero-card-pulse{0%,100%{box-shadow:0 0 0 0 #be533d00}50%{background:#fff0e4;box-shadow:0 0 0 4px #be533d65}}@keyframes mark-arrival{0%{transform:scale(1.7);box-shadow:0 0 0 5px #be533d45}100%{transform:scale(1);box-shadow:none}}
@media(max-width:430px){.cell .coord{font-size:9px}.zero-banner{inset:65px 20px auto;padding:18px 12px}.zero-title{font-size:38px}}@media(prefers-reduced-motion:reduce){.zero-banner,.zero-flash,.new-miss{animation:none!important}}

.bonus-label{position:absolute;right:5px;bottom:6px;font-size:9px;font-weight:750;color:inherit}.diagonal-bonus .preview{bottom:21px}.score-detail{font-size:9px;color:var(--muted);font-weight:400;letter-spacing:0;margin-top:5px}

.results-reopen{width:100%;margin-top:10px}.results-reopen[hidden]{display:none}
.results-dialog{width:min(620px,calc(100vw - 30px));padding:28px;isolation:isolate}.results-dialog[open]{animation:results-arrive .5s ease-out both}.results-dialog::backdrop{background:#24282aad}.results-dialog .dialog-top,.results-dialog .winner-hero,.results-dialog h3,.results-scroll,.results-dialog .setup-note,.results-actions{position:relative;z-index:1}.winner-hero{text-align:center;padding:5px 12px 24px}.winner-trophy{font-size:64px;line-height:1.4;animation:trophy-arrive .9s cubic-bezier(.2,.8,.3,1.3) both}.winner-hero h2{font-size:clamp(26px,5vw,38px);overflow-wrap:anywhere;color:var(--purple);margin:8px 0 10px}.winner-hero p{font-size:15px;font-weight:650;margin:0;color:var(--muted)}.results-dialog h3{font-size:14px;margin:0 0 12px}.results-scroll{overflow-x:auto}.results-table{border-collapse:collapse;width:100%;font-size:13px}.results-table th{color:var(--muted);font-size:10px;font-weight:600;text-align:right;padding:10px 8px;border-bottom:1px solid var(--line)}.results-table th:nth-child(2){text-align:left}.results-table td{text-align:right;padding:15px 8px;border-bottom:1px solid var(--line)}.results-table td:nth-child(2){text-align:left;overflow-wrap:anywhere;min-width:110px}.results-table .badge{display:inline-flex;vertical-align:middle;margin-right:8px;width:22px;height:22px;border-radius:6px}.result-winner{background:#f0ebfc}.result-total{font-size:19px;font-weight:750}.result-rank{font-weight:750;color:var(--purple)}.results-table tbody tr{animation:result-row-arrive .5s ease-out both}.results-table tbody tr:nth-child(2){animation-delay:.12s}.results-table tbody tr:nth-child(3){animation-delay:.24s}.results-table tbody tr:nth-child(4){animation-delay:.36s}.results-actions{display:flex;gap:10px;margin-top:22px}.results-actions .primary{width:auto;flex:1}.confetti{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;border-radius:18px}.confetti-piece{position:absolute;left:var(--x);top:-25px;width:8px;height:14px;background:var(--purple);opacity:0;animation:confetti-fall 2.8s ease-out var(--delay) both}.confetti-c1{background:var(--p1)}.confetti-c2{background:#d7a435}.confetti-c3{background:var(--p3)}
@keyframes results-arrive{from{opacity:0;transform:translateY(24px) scale(.94)}to{opacity:1;transform:none}}@keyframes trophy-arrive{0%{opacity:0;transform:scale(.3) rotate(-18deg)}65%{opacity:1;transform:scale(1.12) rotate(8deg)}100%{transform:scale(1) rotate(0)}}@keyframes result-row-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}@keyframes confetti-fall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}80%{opacity:.8}100%{opacity:0;transform:translateY(520px) rotate(460deg)}}
@media(max-width:430px){.results-dialog{padding:20px 14px}.results-table td,.results-table th{padding-left:5px;padding-right:5px}.results-table td:nth-child(2){min-width:95px}.results-table .badge{margin-right:4px}.results-actions{flex-direction:column}}
@media(prefers-reduced-motion:reduce){.results-dialog[open],.winner-trophy,.results-table tbody tr{animation:none!important}.confetti{display:none}}
.confetti-piece:nth-child(1){--x:0%;--delay:0.00s}
.confetti-piece:nth-child(2){--x:37%;--delay:0.08s}
.confetti-piece:nth-child(3){--x:74%;--delay:0.16s}
.confetti-piece:nth-child(4){--x:11%;--delay:0.24s}
.confetti-piece:nth-child(5){--x:48%;--delay:0.32s}
.confetti-piece:nth-child(6){--x:85%;--delay:0.40s}
.confetti-piece:nth-child(7){--x:22%;--delay:0.00s}
.confetti-piece:nth-child(8){--x:59%;--delay:0.08s}
.confetti-piece:nth-child(9){--x:96%;--delay:0.16s}
.confetti-piece:nth-child(10){--x:33%;--delay:0.24s}
.confetti-piece:nth-child(11){--x:70%;--delay:0.32s}
.confetti-piece:nth-child(12){--x:7%;--delay:0.40s}
.confetti-piece:nth-child(13){--x:44%;--delay:0.00s}
.confetti-piece:nth-child(14){--x:81%;--delay:0.08s}
.confetti-piece:nth-child(15){--x:18%;--delay:0.16s}
.confetti-piece:nth-child(16){--x:55%;--delay:0.24s}
.confetti-piece:nth-child(17){--x:92%;--delay:0.32s}
.confetti-piece:nth-child(18){--x:29%;--delay:0.40s}
.confetti-piece:nth-child(19){--x:66%;--delay:0.00s}
.confetti-piece:nth-child(20){--x:3%;--delay:0.08s}
.confetti-piece:nth-child(21){--x:40%;--delay:0.16s}
.confetti-piece:nth-child(22){--x:77%;--delay:0.24s}
.confetti-piece:nth-child(23){--x:14%;--delay:0.32s}
.confetti-piece:nth-child(24){--x:51%;--delay:0.40s}

.dice-pair{gap:10px}.results-dialog{width:min(680px,calc(100vw - 30px))}.score-detail{max-width:125px;line-height:1.5}.results-table{font-size:12px}

/* A tactile board with readable empty coordinates and clear move highlights. */
.board-panel{background:linear-gradient(145deg,#fbfcf5,#eaf1e9);border:1px solid #bdcfc0;box-shadow:0 8px 26px #294a3610;border-radius:20px}
.board-panel .panel-heading{padding-bottom:12px}.board-panel .panel-heading strong{font-size:15px;color:#294b3f}.board-panel .panel-heading .muted{color:#536c5d}#fill-count{background:#fffdf4;border:1px solid #cad5c6;padding:6px 10px;border-radius:20px;color:#425c4e;font-weight:650}
.board-welcome{margin:0 23px 14px;font-size:12px;line-height:1.5;color:#52695b}.board-welcome[hidden]{display:none}
.board-progress{display:block;width:calc(100% - 46px);height:5px;margin:0 23px 20px;border:0;border-radius:10px;overflow:hidden;background:#d4dfd1;accent-color:#328579}.board-progress::-webkit-progress-bar{background:#d4dfd1;border-radius:10px}.board-progress::-webkit-progress-value{background:#328579;border-radius:10px;transition:width .3s}.board-progress::-moz-progress-bar{background:#328579}
.board{background:#cadbce;padding:15px 15px 10px 9px;border:1px solid #b7cbbd;border-radius:17px;gap:9px;box-shadow:inset 0 2px 6px #284a3620,0 2px 0 #b7c9b8;animation:board-wake .6s ease-out both}.board-wrap{padding:0 24px 16px}.axis{color:#345443;font-weight:750;font-size:13px}.axis.bottom{height:22px}.axis-caption{color:#526b5a;font-size:9px;font-weight:600}.board-footer{border-color:#ccd8c9;color:#4e6558;font-size:11px;background:#ffffff50;border-radius:0 0 20px 20px}
.cell{border-radius:12px;box-shadow:0 3px 0 #b1c1ae,inset 0 1px 0 #ffffff90;transition:transform .18s,background .18s,box-shadow .18s}
.cell.empty{background:linear-gradient(145deg,#fffef7,#f3f2e4);border:1px solid #b6c4ae;color:#53664f}
.cell.empty .coord{position:static;font-size:clamp(17px,2vw,23px);font-weight:750;letter-spacing:-.7px}
.cell.empty.diagonal-bonus{background:linear-gradient(145deg,#fff8d1,#f5e3a0);border:1px solid #c6a34d;color:#76521a;box-shadow:0 3px 0 #c3a45b,inset 0 1px 0 #fffdf4}
.cell.empty.diagonal-bonus .coord{transform:translateY(-5px)}.cell.empty .bonus-label{bottom:7px;right:0;left:0;font-size:10px;letter-spacing:.2px;text-align:center;color:#826020}
.cell.empty.legal{background:linear-gradient(145deg,#fffaff,#e8dafa);border:2px solid #7961bc;color:#553692;box-shadow:0 3px 0 #a592c2,0 0 0 3px #9e82cf55;animation:choose-glow 1.6s ease-in-out 3}
.cell.empty.legal .coord{transform:translateY(-6px)}.cell.empty.legal .preview{bottom:7px;color:#553692;font-size:10px}.cell.empty.legal.diagonal-bonus .preview{bottom:22px}.cell.empty.legal.diagonal-bonus .coord{transform:translateY(-12px)}
.cell.legal:not(:disabled):hover{transform:translateY(-3px);box-shadow:0 6px 0 #ad9bc6,0 0 0 4px #9e82cf55}.cell.legal:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #ad9bc6}.cell:is(.p0,.p1,.p2,.p3,.p4){box-shadow:0 3px 0 #28433640,inset 0 1px 0 #ffffff55}.cell .coord{color:inherit}.cell:is(.p0,.p1,.p2,.p3,.p4) .piece{opacity:.9}
@keyframes board-wake{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes choose-glow{0%,100%{box-shadow:0 3px 0 #a592c2,0 0 0 3px #9e82cf35}50%{box-shadow:0 3px 0 #a592c2,0 0 0 4px #9e82cf80}}
@media(max-width:430px){.board-wrap{padding:0 10px 12px}.board{padding:10px 8px 5px 4px;gap:6px;grid-template-columns:13px repeat(6,minmax(0,1fr));border-radius:12px}.cell{border-radius:8px}.cell.empty .coord{font-size:16px}.cell.empty .bonus-label{font-size:8px;bottom:4px}.cell.empty.legal .preview{font-size:8px;bottom:3px}.cell.empty.legal.diagonal-bonus .preview{bottom:15px}.cell.empty.legal.diagonal-bonus .coord{font-size:14px;transform:translateY(-10px)}.axis{font-size:10px}.board-welcome{font-size:11px;margin-left:16px;margin-right:16px}.board-footer{padding:12px 16px;flex-wrap:wrap;gap:6px;font-size:10px}.board-footer span:last-child{display:inline}}
@media(prefers-reduced-motion:reduce){.board,.cell.empty.legal{animation:none!important}.board-progress::-webkit-progress-value{transition:none}}

.room-panel{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 24px;background:#eee8fa;border:1px solid #c9b9e4;border-radius:16px;margin-bottom:22px}.room-panel[hidden]{display:none}.room-panel .eyebrow{margin-bottom:7px}.room-panel strong{font-size:21px;letter-spacing:1px}.room-panel p:last-child{font-size:12px;margin:8px 0 0}.room-controls{display:flex;gap:8px;flex-wrap:wrap}.room-field{display:flex;flex-direction:column;gap:7px;font-size:13px;margin:18px 0}.room-join{border-top:1px solid var(--line);margin-top:24px;padding-top:4px}.room-join .quiet,#resume-room{width:100%}#resume-room{margin-top:16px}#resume-room[hidden]{display:none}.room-error{color:#9c342a;font-size:12px;line-height:1.5;min-height:18px}#join-code{text-transform:uppercase;letter-spacing:1px}
@media(max-width:600px){.room-panel{align-items:flex-start;flex-direction:column;padding:18px}.room-controls{width:100%}.room-controls button{flex:1}header{gap:10px;flex-wrap:wrap}nav{flex-wrap:wrap}}

.chat-panel{background:var(--paper);border:1px solid var(--line);border-radius:14px;overflow:hidden}.chat-panel[hidden]{display:none}.chat-panel .panel-heading{padding:18px 20px 12px}.chat-panel .muted{font-size:8px;letter-spacing:.5px}.chat-messages{list-style:none;margin:0;padding:0 16px;max-height:260px;overflow-y:auto;overscroll-behavior:contain}.chat-message{margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#f0eee8}.chat-message.mine{background:#eee8fa}.chat-meta{display:flex;align-items:center;gap:7px;margin-bottom:5px;font-size:11px}.chat-meta time{margin-left:auto;font-size:9px;color:var(--muted)}.chat-meta .badge{width:18px;height:18px;font-size:9px;border-radius:5px}.chat-message p{margin:0;font-size:12px;line-height:1.6;white-space:pre-wrap;overflow-wrap:anywhere}.chat-empty{padding:0 20px;margin:0 0 18px;color:var(--muted);font-size:12px}.chat-form{padding:14px 16px;border-top:1px solid var(--line)}.chat-form label{display:block;font-size:11px;font-weight:600;margin-bottom:8px}.chat-compose{display:flex;gap:8px}.chat-compose input{width:100%;font-size:12px}.chat-compose .primary{width:auto;padding:10px 14px}.chat-error{font-size:11px;color:#9c342a;line-height:1.5;margin:8px 0 0}.chat-error:empty{display:none}@media(max-width:780px){.chat-panel{grid-column:1 / -1}.chat-messages{max-height:220px}}

/* Turn prompts stay visible on the board; the toast celebrates each new choice once. */
.turn-reminder,.turn-toast{--reminder-accent:var(--p0);display:flex;align-items:center;gap:13px;background:var(--reminder-accent);color:#fff}.turn-reminder.p1,.turn-toast.p1{--reminder-accent:var(--p1)}.turn-reminder.p2,.turn-toast.p2{--reminder-accent:var(--p2)}.turn-reminder.p3,.turn-toast.p3{--reminder-accent:var(--p3)}.turn-reminder[hidden],.turn-toast[hidden]{display:none}.turn-reminder{padding:15px 20px;border-radius:18px 18px 0 0;box-shadow:inset 0 -1px 0 #ffffff35}.turn-reminder strong,.turn-toast strong{display:block;font-size:21px;letter-spacing:-.4px}.turn-reminder div>span,.turn-toast div>span{display:block;margin-top:4px;font-size:12px;color:#ffffffe6}.reminder-step{display:flex;align-items:center;justify-content:center;flex-shrink:0;min-width:48px;height:48px;border:1px solid #ffffff60;border-radius:13px;background:#ffffff20;font-size:21px;font-weight:750}.reminder-spark{margin-left:auto;font-size:30px;color:#ffe7a0;animation:reminder-sparkle 2.4s ease-in-out infinite}.turn-toast{position:fixed;top:18px;left:50%;transform:translateX(-50%);width:min(440px,calc(100vw - 28px));z-index:60;padding:17px 20px;border:2px solid #ffffffb0;border-radius:18px;box-shadow:0 12px 45px #29213850;pointer-events:none}.turn-toast strong{font-size:24px}.board-panel.my-turn{border-color:var(--purple);box-shadow:0 0 0 3px #9480c82c,0 8px 26px #294a3610}.turn-panel.needs-choice{animation:turn-attention 2.8s ease-in-out infinite}.turn-reminder.reminder-pop{animation:reminder-arrive .55s ease-out both}.turn-toast.reminder-pop{animation:toast-arrive .55s cubic-bezier(.2,.8,.3,1.2) both}@keyframes reminder-arrive{from{filter:brightness(1.3);opacity:.4}to{filter:brightness(1);opacity:1}}@keyframes toast-arrive{from{opacity:0;transform:translate(-50%,-16px) scale(.94)}to{opacity:1;transform:translate(-50%,0) scale(1)}}@keyframes turn-attention{0%,100%{box-shadow:0 0 0 2px #9c87da20}50%{box-shadow:0 0 0 4px #9c87da65}}@keyframes reminder-sparkle{0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.12);opacity:1}}@media(max-width:430px){.turn-reminder{padding:12px 14px;gap:10px}.turn-reminder strong{font-size:19px}.turn-toast{top:12px;padding:13px 15px}.reminder-step{min-width:42px;height:42px;font-size:19px}.reminder-spark{font-size:24px}}@media(prefers-reduced-motion:reduce){.turn-reminder.reminder-pop,.turn-toast.reminder-pop,.turn-panel.needs-choice,.reminder-spark{animation:none!important}}

.corner-lock{display:inline-block;margin-top:6px;padding:4px 6px;border-radius:6px;background:#fff1c5;color:#785512;font-size:9px;font-weight:750;border:1px solid #e3c67a}.results-table .result-winner .corner-lock{background:#fff1c5}.results-dialog{width:min(780px,calc(100vw - 30px))}

/* Rolf's four nature motifs: transparent original illustrations, sized for each surface. */
.player-icon{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}
.cell .piece{width:66%;height:66%;display:flex;align-items:center;justify-content:center;filter:drop-shadow(0 1px 1px #0003)}
.badge .player-icon{width:90%;height:90%}
.player{grid-template-columns:36px 1fr auto}.player .badge{width:34px;height:34px}
.setup-player{grid-template-columns:34px minmax(0,1fr) minmax(0,1fr)}.setup-player .badge{width:32px;height:32px}
.results-table .badge{width:30px;height:30px}.chat-meta .badge{width:25px;height:25px}

#turn-title{display:flex;align-items:center;gap:11px}#turn-title .badge{width:40px;height:40px;flex-shrink:0;border-radius:10px}
#reminder-detail,#toast-detail{display:flex;align-items:center;gap:8px;line-height:1.4}.turn-identity-icon{display:inline-flex;width:30px;height:30px;flex-shrink:0}.turn-identity-icon .player-icon{filter:drop-shadow(0 1px 1px #0003)}
@media(max-width:430px){#turn-title .badge{width:34px;height:34px}.turn-identity-icon{width:26px;height:26px}}

.recent-moves{padding:14px 23px;border-top:1px solid var(--line);background:#f1eee5}.recent-moves[hidden]{display:none}.recent-player{display:flex;align-items:center;gap:9px;font-size:12px;font-weight:700}.recent-coordinates{display:flex;flex-wrap:wrap;gap:8px;margin-top:9px}.recent-coordinate{padding:7px 10px;border:1px solid #d6ceba;background:var(--paper);border-radius:8px;font-size:12px;font-weight:650}.cell.recent-choice{outline:3px solid var(--recent-color);outline-offset:2px;box-shadow:0 0 0 6px #ffdc7450}.recent-order{position:absolute;right:4px;top:4px;min-width:19px;height:19px;padding:0 3px;display:flex;align-items:center;justify-content:center;border-radius:6px;background:#fff1b8;color:#463416;border:1px solid #b6a058;font-size:10px;font-weight:800;z-index:2}.cell.recent-flash{animation:recent-choice-flash .6s ease-in-out 2}@keyframes recent-choice-flash{0%,100%{filter:brightness(1);transform:scale(1)}50%{filter:brightness(1.45);transform:scale(1.04);outline-color:#ffd45a}}@media(prefers-reduced-motion:reduce){.cell.recent-flash{animation:none}}@media(max-width:430px){.recent-moves{padding:12px 14px}.recent-coordinate{padding:6px 8px;font-size:11px}.cell.recent-choice{outline-width:2px;outline-offset:1px}}

#turn-title{flex-wrap:wrap;gap:8px}.self-player{display:flex;align-items:center;gap:9px;background:#f1eee5;border-radius:9px;padding:9px 11px;margin:-6px 0 18px;font-size:11px;line-height:1.5}.self-player[hidden]{display:none}.self-player .badge{width:30px;height:30px;flex-shrink:0}.player.me{outline:1px solid #c3b3e5;outline-offset:-1px}

/* Keep the active controls next to the board in both desktop and mobile reading order. */
.game-layout>.turn-panel{grid-column:2;grid-row:1}.game-layout>.board-panel{grid-column:1;grid-row:1 / span 2}.game-layout>.sidebar{grid-column:2;grid-row:2}
.toast-dismiss{pointer-events:auto;flex-shrink:0;margin-left:auto;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid #ffffff70;background:#ffffff20;border-radius:11px;color:#fff;font-size:28px;line-height:1}.toast-dismiss:hover{background:#ffffff40}
@media(max-width:780px){
  .game-layout{display:flex;flex-direction:column;gap:12px}
  .game-layout>.turn-panel{padding:12px 14px;display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:12px;align-items:center}
  .turn-panel #turn-count{grid-column:1 / -1;margin:0 0 6px;font-size:9px}
  .turn-panel #turn-title{grid-column:1;grid-row:2;font-size:20px;margin:0;gap:7px}
  #turn-title .badge{width:30px;height:30px;border-radius:8px}
  .turn-panel .self-player{grid-column:1;grid-row:3;padding:5px 0;margin:3px 0 0;background:none;font-size:10px;gap:6px}
  .self-player .badge{width:24px;height:24px}
  .turn-panel .dice-pair{grid-column:2;grid-row:2 / span 2;gap:6px;margin:0}
  .turn-panel .die{width:43px;height:43px;padding:8px;gap:3px;border-radius:10px}
  .turn-panel .instruction{grid-column:1 / -1;min-height:0;margin:9px 0;font-size:11px;line-height:1.4}
  .turn-panel #action,.turn-panel #results-button,.turn-panel #api-recovery{grid-column:1 / -1}
  .turn-panel #action{padding:11px 14px}
  .board-panel .turn-reminder{display:none}
  .turn-toast{top:8px;padding:10px 12px;gap:9px;width:min(400px,calc(100vw - 20px));border-radius:13px}
  .turn-toast strong{font-size:19px}.turn-toast .reminder-step{min-width:36px;height:36px;font-size:16px;border-radius:9px}
  .turn-toast #toast-detail{font-size:11px;margin-top:2px;gap:5px}.turn-toast .turn-identity-icon{width:23px;height:23px}
  main{padding-top:14px}.intro{margin-bottom:14px}.intro h1{font-size:22px;letter-spacing:-.3px}.intro .eyebrow{margin-bottom:6px;font-size:9px}.intro .lede{font-size:12px;margin-top:8px}
}
@media(max-width:360px){.turn-panel .die{width:38px;height:38px;padding:7px}.turn-panel #turn-title{font-size:18px}.game-layout>.turn-panel{column-gap:8px;padding:12px}}

@media(max-width:780px){header{padding:12px 16px}.board-panel>.panel-heading{padding:14px 12px;gap:8px}.board-panel>.panel-heading>span:first-child{flex-shrink:0}.board-panel>.panel-heading .muted,.board-welcome{display:none}.board-progress{margin-bottom:10px}}
@media(max-width:360px){header{padding:12px}nav .quiet{font-size:10px;padding:7px}.brand{gap:7px}}

@media(max-width:780px){.bottom-layout{grid-template-columns:minmax(0,1fr)}.score-steps span{min-width:0}}

@media(min-width:781px){.game-layout{grid-template-rows:min-content 1fr}}

/* Diagonal cells keep one quiet bonus symbol instead of stacked text. */
.cell.diagonal-bonus .bonus-label{inset:auto 5px 4px auto;font-size:11px;line-height:1;width:auto;color:inherit;opacity:.8;letter-spacing:0}
.cell.empty.diagonal-bonus .coord,.cell.empty.legal.diagonal-bonus .coord{transform:none;font-size:clamp(17px,2vw,23px)}
.cell.empty.diagonal-bonus .bonus-label{color:#826020}
.cell.empty.legal.diagonal-bonus .bonus-label{color:#553692}
@media(max-width:430px){.cell.empty.diagonal-bonus .coord,.cell.empty.legal.diagonal-bonus .coord{font-size:16px}.cell.diagonal-bonus .bonus-label{font-size:9px;right:4px;bottom:3px}}

/* Dice and turn controls form the compact top of the board itself. */
.game-layout>.board-panel{grid-row:1;overflow:hidden}.game-layout>.sidebar{grid-row:1}
.board-panel .turn-reminder{display:none}
.board-panel>.turn-panel{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,1fr);gap:10px 18px;align-items:center;margin:0;padding:18px 24px 12px;border:0;border-radius:0;background:transparent}
.board-panel>.turn-panel #turn-count{grid-column:1 / -1;font-size:9px;margin:0;letter-spacing:1.2px}
.board-panel>.turn-panel #turn-title{grid-column:1 / -1;grid-row:2;font-size:18px;margin:0;gap:7px}
.board-panel #turn-title .badge{width:27px;height:27px;border-radius:7px}
.board-panel>.turn-panel .dice-pair{grid-column:1;grid-row:3;margin:0;gap:8px}
.board-panel>.turn-panel .die{width:46px;height:46px;padding:9px;gap:3px;border-radius:10px}
.board-panel>.turn-panel #action{grid-column:2;grid-row:3;padding:12px 10px;font-size:12px;min-height:44px}
.board-panel>.turn-panel .self-player{grid-column:1 / -1;grid-row:4;margin:0;padding:0;background:transparent;font-size:10px;gap:6px}
.board-panel .self-player .badge{width:22px;height:22px}
.board-panel>.turn-panel .instruction{grid-column:1 / -1;grid-row:4;min-height:0;font-size:11px;line-height:1.45;margin:0}
.board-panel>.turn-panel #results-button,.board-panel>.turn-panel #api-recovery{grid-column:1 / -1}
.board-panel #fill-count{margin:0 24px 7px;padding:0;border:0;background:none;border-radius:0;font-size:10px;font-weight:400;color:#536c5d}
.board-panel .board-progress{margin-bottom:12px}
.board-panel>.turn-panel.needs-choice{animation:none}
@media(max-width:780px){.board-panel>.turn-panel{padding:14px 14px 10px;gap:8px 12px}.board-panel #fill-count{margin-left:14px;margin-right:14px}.board-panel .board-progress{width:calc(100% - 28px);margin-left:14px;margin-right:14px}}
@media(max-width:360px){.board-panel>.turn-panel{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}.board-panel>.turn-panel .die{width:38px;height:38px;padding:7px}.board-panel>.turn-panel .dice-pair{gap:6px}.board-panel>.turn-panel #action{font-size:11px}}

/* An invitation has one clear join action; room creation lives in the menu. */
.invitation-pending main,.invitation .room-create{display:none}
.invitation .room-join{border:0;padding:0;margin-top:18px}
.invitation .invite-code{font-size:12px;letter-spacing:1px;color:var(--muted);margin:18px 0 0}
.invitation .room-field{margin:22px 0 12px}
.invitation .room-join .primary{padding:14px 18px}
.invitation #invite-menu{font-size:12px;padding:8px 12px}
[hidden]#invite-menu,[hidden]#new-button{display:none}

/* Mobile results keep the total on the main line and wrap the score details below the name. */
.result-name{display:flex;align-items:center;gap:8px}.results-table .result-name .badge{margin:0;flex-shrink:0}
.result-breakdown{display:none}
@media(max-width:600px){
  .results-dialog{padding:20px 14px}
  .results-table,.results-table thead,.results-table tbody{display:block;width:100%}
  .results-table tr{display:grid;grid-template-columns:28px minmax(0,1fr) 52px;gap:8px;align-items:start;border-bottom:1px solid var(--line);padding:12px 4px}
  .results-table th,.results-table td{display:block;border:0;padding:0;min-width:0!important}
  .results-table th:nth-child(n+3):nth-child(-n+6),.results-table td:nth-child(n+3):nth-child(-n+6){display:none}
  .results-table th:nth-child(1),.results-table td:nth-child(1){grid-column:1;text-align:left}
  .results-table th:nth-child(2),.results-table td:nth-child(2){grid-column:2;text-align:left}
  .results-table th:nth-child(7),.results-table td:nth-child(7){grid-column:3;text-align:right}
  .results-table .result-rank{padding-top:4px}
  .results-table .result-name{gap:6px;font-weight:650;line-height:1.4}
  .results-table .result-name .badge{width:26px;height:26px}
  .result-name>span:last-child{min-width:0;overflow-wrap:anywhere}
  .result-breakdown{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:7px;color:var(--muted);font-size:10px;line-height:1.5}
  .result-breakdown span{white-space:nowrap}
  .result-total{font-size:20px;line-height:1.5}
}


/* All scores stay beside the board, with the local player's motif first. */
.board-panel>.turn-panel .score-summary{display:flex;flex-wrap:nowrap;justify-content:space-between;gap:8px}
.compact-score{display:inline-flex;align-items:center;gap:6px;min-width:0;padding:4px 5px;border:1px solid transparent;border-radius:8px}
.compact-score.own-score{background:#ffffffa0;border-color:#cbbfe1}
.compact-score{--score-accent:var(--p0);transition:background .18s,border-color .18s,box-shadow .18s}
.compact-score.p1{--score-accent:var(--p1)}.compact-score.p2{--score-accent:var(--p2)}.compact-score.p3{--score-accent:var(--p3)}
.compact-score.active-score{background:var(--score-accent);border-color:var(--score-accent);box-shadow:0 2px 5px #282d2920}
.compact-score.active-score .compact-points{color:#fff}
.compact-score.active-score .badge{box-shadow:inset 0 0 0 1px #ffffff50}
.compact-points{font-size:15px;font-weight:750;font-variant-numeric:tabular-nums;line-height:1.3;color:var(--ink)}
.board-panel .score-summary .badge{width:24px;height:24px;flex-shrink:0}
@media(max-width:360px){.board-panel>.turn-panel .score-summary{gap:3px}.compact-score{gap:4px;padding:3px}.compact-points{font-size:14px}.board-panel .score-summary .badge{width:22px;height:22px}}

/* Introductory guidance sits above the controls rather than between dice and board. */
.intro .instruction{min-height:0;max-width:650px;margin:10px 0 0;font-size:12px;line-height:1.5;color:var(--muted)}
.intro .instruction[hidden]{display:none}
@media(max-width:780px){.intro .instruction{font-size:11px;margin-top:8px}}

#room-dialog .dialog-top{gap:10px}
#room-dialog .dialog-top .eyebrow{margin:0;flex:1}
#room-dialog .close{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:44px;height:44px;padding:0;border-radius:8px}
#room-dialog .close:hover{background:#ebe8e1}

.room-roster{min-width:180px}.room-roster summary{cursor:pointer;font-weight:700;padding:12px 0}.room-member{display:flex;align-items:center;gap:8px;padding:4px 0}.room-member .player-icon{width:32px;height:32px}.room-member span{flex:1;overflow-wrap:anywhere}.room-member button{min-height:44px}.room-controls #leave-room{color:#9a3434}

.room-roster{flex:1;min-width:220px}.room-member .badge{width:36px;height:36px;flex-shrink:0}.room-member .player-icon{width:100%;height:100%;object-fit:contain}.room-member button{flex-shrink:0}@media(max-width:600px){.room-roster{width:100%;min-width:0}}

.home-screen .game-layout,.home-screen .bottom-layout,.home-screen .intro-note,.home-screen #instruction,.home-screen #new-button,.home-screen #rooms-button{display:none}
.home-panel{max-width:760px;padding:30px;border:1px solid var(--line);border-radius:20px;background:var(--paper);margin:16px 0 48px}.home-panel[hidden]{display:none}.home-panel h2{font-size:26px;letter-spacing:-.6px;margin:0 0 24px}.home-choices{display:grid;grid-template-columns:1fr;gap:16px}.home-choice{padding:22px;text-align:left;background:#f3efe9;border:1px solid var(--line);border-radius:14px;color:var(--ink);min-height:115px}.home-choice:hover{background:#eee8fa;border-color:var(--purple)}.home-choice strong{display:flex;justify-content:space-between;gap:16px;font-size:20px;margin-bottom:12px}.home-choice strong span{color:var(--purple)}.home-choice>span{display:block;font-size:13px;color:var(--muted);line-height:1.6}.home-panel #home-resume{margin-top:22px}.home-panel .room-error:empty{display:none}@media(max-width:600px){.home-panel{padding:24px 20px}.home-panel h2{font-size:23px}.home-choices{grid-template-columns:1fr;gap:12px}.home-choice{min-height:105px;padding:20px}}

.home-choice.home-primary{background:var(--purple);border-color:var(--purple);color:white;min-height:125px}.home-choice.home-primary:hover{background:#62519c}.home-choice.home-primary strong{font-size:24px}.home-choice.home-primary strong span,.home-choice.home-primary>span{color:white}.home-alternative{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:22px}.home-alternative .quiet{min-height:44px}.home-alternative>span{font-size:12px;color:var(--muted)}

/* Lovlige valg skal være tydelige både på tomme og fargede ruter. */
.cell.legal,.cell.empty.legal{border:3px solid #62419c;outline:2px solid #62419c;outline-offset:1px}
.cell.legal:is(.p0,.p1,.p2,.p3,.p4){border:3px solid #ffdc69;outline:3px solid #a66809;outline-offset:1px}

.takeover-status{max-width:360px;border:2px solid var(--purple);border-radius:12px;padding:12px;background:#fffaf0}.takeover-status[hidden]{display:none}.takeover-status p{font-size:13px;line-height:1.5;margin:0 0 10px!important}.takeover-dialog{max-width:440px;border:3px solid var(--purple)}.takeover-dialog::backdrop{background:#25153ba6;backdrop-filter:blur(4px)}.takeover-dialog h2{font-size:26px;line-height:1.2;margin:0 0 18px}.takeover-dialog p{line-height:1.6}.takeover-countdown{display:flex;align-items:center;gap:14px;background:#eee8fa;border-radius:14px;padding:15px 20px;margin:20px 0}.takeover-countdown strong{font-size:44px;line-height:1;font-variant-numeric:tabular-nums;color:var(--purple)}.takeover-countdown span{font-size:13px;color:var(--muted)}#takeover-explanation{font-size:13px;color:var(--muted)}.takeover-actions{display:grid;gap:10px}.takeover-actions button{min-height:48px}.takeover-flash{animation:takeover-attention .6s ease-in-out 3}@keyframes takeover-attention{50%{box-shadow:0 0 0 8px #b693ecaa}}@media(prefers-reduced-motion:reduce){.takeover-flash{animation:none}}@media(max-width:600px){.takeover-status{max-width:none;width:100%}.room-member .quiet{max-width:150px;font-size:12px}}

/* The roll notice has one full-size button; closing it is a separate action. */
.turn-toast:has(.toast-roll:not([hidden])){pointer-events:auto}.toast-roll{position:absolute;inset:0;z-index:1;width:100%;height:100%;padding:0;border:0;border-radius:inherit;background:transparent;cursor:pointer}.toast-roll:hover{background:#ffffff14}.toast-roll:focus-visible{outline:3px solid #fff;outline-offset:-5px}.turn-toast .toast-dismiss{position:relative;z-index:2}

.symbol-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-top:20px}.symbol-option{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border:2px solid var(--line);border-radius:14px;background:#fff;color:var(--ink);min-height:120px}.symbol-option img{width:58px;height:58px;object-fit:contain}.symbol-option strong{font-size:12px}.symbol-option span{font-size:10px}.symbol-option.selected{border-color:var(--purple);background:#f0ebfc}.symbol-option:disabled{opacity:.4}.setup-player .symbol-select{grid-column:2 / -1}.corner-celebration{position:fixed;z-index:65;top:12px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:12px;width:min(420px,calc(100vw - 24px));padding:18px;background:#fff1bc;border:3px solid #e2a632;border-radius:18px;box-shadow:0 8px 40px #78551255;color:#785512;pointer-events:none}.corner-celebration[hidden]{display:none}.corner-celebration .badge{display:flex;width:48px;height:48px}.corner-celebration strong,.corner-celebration div>span{display:block}.corner-celebration strong{font-size:23px}.corner-celebration div>span{font-size:12px;margin-top:5px}.bonus-flash{animation:bonus-celebrate .65s ease-in-out 3}.results-dialog.direct-victory[open]{border:4px solid #e2b44f;animation:victory-arrive 1s ease-out both,victory-glow .8s ease-in-out 3}.results-dialog.direct-victory .winner-trophy{font-size:90px}.results-dialog.direct-victory::backdrop{background:#241c39cc;animation:victory-backdrop .8s ease-in-out 3}.results-dialog.direct-victory .winner-hero h2{font-size:clamp(32px,7vw,52px)}
@keyframes bonus-celebrate{0%,100%{box-shadow:0 8px 40px #78551255;filter:brightness(1)}50%{box-shadow:0 0 0 8px #efbf5060,0 8px 50px #e2a63299;filter:brightness(1.12)}}@keyframes victory-arrive{0%{opacity:0;transform:scale(.7)}60%{opacity:1;transform:scale(1.04)}100%{transform:scale(1)}}@keyframes victory-glow{0%,100%{box-shadow:0 0 30px #dba93255}50%{box-shadow:0 0 0 12px #ffe28c60,0 0 80px #ffe28c99}}@keyframes victory-backdrop{0%,100%{background:#241c39cc}50%{background:#554327bb}}@media(prefers-reduced-motion:reduce){.bonus-flash,.results-dialog.direct-victory[open],.results-dialog.direct-victory::backdrop{animation:none!important}}

/* Give ownership and the nature motifs priority over cell annotations. */
.cell .coord,.cell.empty .coord,.cell.empty.legal .coord,.cell.empty.diagonal-bonus .coord,.cell.empty.legal.diagonal-bonus .coord{position:absolute;top:5px;left:6px;transform:none;font-size:10px;font-weight:650;letter-spacing:0;line-height:1;z-index:1;opacity:.85}
.cell .piece{width:80%;height:74%;transform:translateY(1px);opacity:1!important}
.cell .preview,.cell.empty.legal .preview{inset:auto 5px 4px auto;font-size:11px;line-height:1;font-weight:650;white-space:nowrap}
.cell.diagonal-bonus .bonus-label{inset:auto auto 4px 5px;color:#ffe59a;opacity:1}.cell.empty.diagonal-bonus .bonus-label{color:#826020}.cell.empty.legal.diagonal-bonus .bonus-label{color:#826020}
@media(max-width:430px){.cell .coord,.cell.empty .coord,.cell.empty.legal .coord,.cell.empty.diagonal-bonus .coord,.cell.empty.legal.diagonal-bonus .coord{top:3px;left:4px;font-size:8px}.cell .preview,.cell.empty.legal .preview{right:4px;bottom:3px;font-size:10px}.cell.diagonal-bonus .bonus-label{left:4px;bottom:3px;font-size:9px}}

/* A quiet gold star distinguishes the diagonal without changing its hit area. */
.cell.diagonal-bonus .diagonal-star{position:absolute;inset:12% 9% 6%;pointer-events:none;background:linear-gradient(145deg,#f4d575,#c99335);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 94%,50% 72%,21% 94%,32% 57%,2% 35%,39% 35%);opacity:.7}
.cell.diagonal-bonus:is(.p0,.p1,.p2,.p3,.p4) .diagonal-star{background:linear-gradient(145deg,#ffe6a0,#ebbc57);opacity:.32}
.cell.diagonal-bonus .piece{position:relative;z-index:1}

/* Keep transient notices over the board, clear of dice and scores. */
.board-surface{position:relative}
.board-notices{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none;z-index:60}
.board-notices>.turn-toast,.board-notices>.corner-celebration,.board-notices>.zero-banner{position:relative;inset:auto;transform:none;grid-area:1 / 1;width:min(400px,calc(100% - 24px));margin:0;padding:16px;border-radius:16px;min-width:0}
.board-notices .turn-toast strong{font-size:21px}
.board-notices .turn-toast>div,.board-notices .corner-celebration>div{min-width:0;overflow-wrap:anywhere}
.board-notices .zero-title{font-size:38px}
.board-notices .zero-banner{gap:7px}
.board-notices .turn-toast.reminder-pop{animation:board-notice-arrive .55s cubic-bezier(.2,.8,.3,1.2) both}
.board-notices:has(.corner-celebration:not([hidden])) .turn-toast,.board-notices:has(.zero-banner:not([hidden])) .turn-toast{visibility:hidden}
.board-notices:has(.zero-banner:not([hidden])) .corner-celebration{visibility:hidden}
@keyframes board-notice-arrive{from{opacity:0;transform:translateY(-12px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:430px){.board-notices>.turn-toast,.board-notices>.corner-celebration,.board-notices>.zero-banner{padding:12px;gap:9px}.board-notices .turn-toast strong{font-size:18px}.board-notices .corner-celebration strong{font-size:20px}.board-notices .zero-title{font-size:30px}.board-notices .zero-banner strong{font-size:17px}.board-notices .zero-banner #zero-detail{font-size:12px}}
@media(prefers-reduced-motion:reduce){.board-notices .turn-toast.reminder-pop{animation:none!important}}

/* The invitation leads with its destination, followed by one join action. */
#room-dialog.invitation #room-code-field{margin:20px 0 16px;padding:16px;background:#eee8fa;border:2px solid #c3b2e2;border-radius:14px;color:var(--purple);font-weight:650}
#room-dialog.invitation #join-code{width:100%;padding:8px 0 0;border:0;background:transparent;color:var(--purple);font-size:clamp(25px,7vw,34px);font-weight:800;letter-spacing:2px;cursor:default}
#room-dialog.invitation #room-name{width:100%}
#room-dialog.invitation #invite-menu{display:block;width:auto;margin:8px auto 0;padding:8px 12px;border:0;background:transparent;color:var(--muted);font-size:12px;text-decoration:underline;text-underline-offset:3px}
#room-dialog.invitation #invite-menu[hidden]{display:none}

/* A fifth blue player and shared green armchairs for the audience. */
.compact-score.p4{--score-accent:var(--p4)}
.p4 .badge,.cell.p4,.cell.legal.p4{background:var(--p4)}.cell.p4{border-color:var(--p4);color:#fff}.turn-reminder.p4,.turn-toast.p4{--reminder-accent:var(--p4)}
.symbol-buttons{grid-column:2 / -1;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px;padding:2px 0 10px}
.symbol-button{display:flex;align-items:center;justify-content:center;min-width:0;height:48px;padding:5px;border:2px solid var(--line);border-radius:10px;background:#fff}.symbol-button img{width:100%;height:100%;object-fit:contain}.symbol-button.selected{background:#eee8fa;border-color:var(--purple);box-shadow:0 0 0 2px #7160ae33}.symbol-button:disabled{opacity:.25}
.takeover-preference{display:flex;align-items:center;gap:8px;font-size:12px;line-height:1.4;margin:14px 0}.takeover-preference[hidden]{display:none}.takeover-preference input{width:20px;height:20px;accent-color:var(--purple);flex-shrink:0}
.room-audience{flex:1;min-width:180px}.room-audience[hidden]{display:none}.room-audience summary{font-size:13px;cursor:pointer}.audience-member{display:flex;align-items:center;gap:9px;font-size:12px;padding:5px 0}.spectator-icon{width:34px;height:34px;object-fit:contain;flex-shrink:0}.seat-status{font-size:11px;color:var(--muted);margin-left:auto}.watch-room{display:block;width:100%;margin-top:10px;font-size:12px}.invitation .watch-room{border:0;background:transparent;color:var(--muted)}
@media(max-width:600px){.room-audience{width:100%;min-width:0}.symbol-button{height:44px}.score-summary{gap:4px}.compact-score{gap:3px}.compact-points{font-size:13px}}

@media(max-width:430px){.board-panel>.turn-panel .score-summary{gap:3px}.compact-score{padding:4px 3px}.compact-points{font-size:13px}.board-panel .score-summary .badge{width:22px;height:22px}}

#room-info .spectator-icon,#audience-heading .spectator-icon{width:26px;height:26px;vertical-align:middle;margin-right:6px}

#audience-members{max-height:240px;overflow-y:auto}

/* One compact action line serves as the roll button or placement prompt. */
.turn-panel .action-slot{grid-column:1 / -1;min-width:0;margin:0;min-height:0}
.action-slot>#action{display:block;width:100%;margin:0;min-height:44px;padding:10px 12px;line-height:1.25}
.action-slot>#action.choice-action{background:var(--action-accent);border-color:var(--action-accent);color:white;opacity:1;cursor:default}
.action-slot>#action.action-reminder{animation:action-notice-glow .55s ease-out}
@keyframes action-notice-glow{from{box-shadow:0 0 0 3px #bba5ee80;filter:brightness(1.12)}to{box-shadow:0 0 0 0 transparent;filter:brightness(1)}}
@media(prefers-reduced-motion:reduce){.action-slot>#action.action-reminder{animation:none!important}}

/* Keep the action beside the dice; scores remain directly above the board. */
.board-panel>.turn-panel{grid-template-columns:max-content minmax(0,1fr)}
.board-panel>.turn-panel .action-slot{grid-column:2;grid-row:3;align-self:center}
.board-panel>.turn-panel .action-slot>#action{font-size:12px;min-height:46px;padding:8px 10px;overflow-wrap:anywhere}
@media(max-width:360px){.board-panel>.turn-panel .die{width:36px;height:36px;padding:7px}.board-panel>.turn-panel .dice-pair{gap:5px}.board-panel>.turn-panel .action-slot>#action{font-size:11px;min-height:44px;padding:7px 8px}}

/* A colourful tabletop frame, with the playing pieces left untouched. */
:root{--bg:#f5effc;--ink:#302744;--muted:#70647d;--line:#dfd4ed;--purple:#7550b6;--paper:#fffdf8;font-family:ui-rounded,"Avenir Next", "Segoe UI",sans-serif}
body{background:radial-gradient(ellipse at 8% 12%,#ffd18c66,transparent 35%),radial-gradient(ellipse at 95% 40%,#bfabf577,transparent 38%),radial-gradient(ellipse at 30% 95%,#97ddce55,transparent 40%),var(--bg);background-attachment:fixed}
header{border-bottom:2px solid #c5b2df;position:relative}
.brand{font-weight:900;letter-spacing:-1px;color:#574082;text-shadow:1px 2px 0 #fff}
.brand-icon{display:inline-grid;place-items:center;background:#ffce67;color:#563d79;border:2px solid #62478d;border-radius:12px;transform:rotate(-9deg);box-shadow:3px 3px 0 #bda2df;font-size:30px}
.prototype{background:#e5daf8;color:#60448b;border-radius:6px;letter-spacing:1px;text-shadow:none}
h1,h2,.panel-heading strong{font-family:ui-rounded,"Avenir Next","Trebuchet MS",sans-serif;font-weight:850;letter-spacing:-.6px}
h1{color:#614390;text-shadow:0 2px 0 #fff;font-size:clamp(24px,3vw,32px)}
.lede{color:#68537e}.eyebrow{color:#8a5373;font-weight:800;letter-spacing:1.5px}
.intro-note{border:1px solid #d8c4eb;border-radius:12px;padding:9px 12px;background:#fff9;width:max-content;max-width:100%;color:#695284}
.tiny-dot{background:#d98936;box-shadow:0 0 0 4px #f6d7a4}
.board-panel{position:relative;isolation:isolate;border:2px solid transparent!important;border-radius:20px!important;background:linear-gradient(145deg,#fffdf6,#f0faf5) padding-box,linear-gradient(135deg,#b295df 8%,#efb454 38%,#df9bac 65%,#7ebfac 95%) border-box!important;box-shadow:0 5px 0 #c8b8df88,0 14px 32px #65448313}
.board-panel::before{content:"";position:absolute;inset:0;border-radius:18px;pointer-events:none;z-index:-1;background:radial-gradient(circle at 95% 3%,#ffdb8345,transparent 22%),radial-gradient(circle at 2% 95%,#c4b1ef44,transparent 25%)}
.board-panel>.turn-panel{background:transparent!important}
#turn-title{color:#493565;font-weight:850}#turn-count{color:#896339;letter-spacing:1.6px}
.board-wrap{position:relative}
.board-panel .board{padding:8px;border-radius:16px;background:#dfede4;border:1px solid #b9d1c2;box-shadow:inset 0 2px 5px #3e705c14}
.cell.empty{background:linear-gradient(145deg,#fffff4,#f1f6e9);border-color:#c4d2be;box-shadow:0 2px 0 #afc0a94d}
.cell.empty.diagonal-bonus{background:linear-gradient(145deg,#fff4ce,#f9e3a2);border-color:#d6b974}
.cell.empty.legal{border-color:#7851b2;box-shadow:0 0 0 2px #916ac244,0 3px 0 #76509b28}
.axis,.axis-caption{color:#63755d;font-weight:800}
.die{border:2px solid #a897bf!important;box-shadow:0 3px 0 #c4b2d4!important;background:linear-gradient(135deg,#fff,#faf4ff)!important}
.die .pip{background:#513b70}
.primary{background:#7550b6;border-radius:12px;font-weight:800;box-shadow:0 3px 0 #553987;transition:background .15s,transform .15s,box-shadow .15s}
.primary:not(:disabled):hover{background:#8760c9;transform:translateY(-1px);box-shadow:0 4px 0 #553987}
.primary:not(:disabled):active{transform:translateY(2px);box-shadow:0 1px 0 #553987}
.action-slot>#action{border-radius:12px;font-weight:800}
.action-slot>#action.choice-action{box-shadow:0 3px 0 color-mix(in srgb,var(--action-accent),#242037 28%)}
.quiet{border-color:#d5c3e5;background:#fffafc;border-radius:10px;color:#654586;font-weight:700}
.quiet:hover{background:#eee3fa;border-color:#b69bd2}
.players-panel,.score-guide,.activity,.chat-panel,.room-panel{border:2px solid #d7c3e6;border-radius:16px;background:#fffdf8;box-shadow:0 4px 0 #d9cee566}
.panel-heading{color:#63408d}.panel-heading .muted{color:#947449}
.score-guide{background:linear-gradient(130deg,#fff8df,#fffdf8)}
.activity{background:linear-gradient(130deg,#f1e8fb,#fffdf8)}
.score-steps strong{color:#69479b;font-weight:900}
.board-footer{color:#715889;border-top:1px solid #e1d4e7;background:#f3eaf766;border-radius:0 0 18px 18px}
.home-panel{position:relative;isolation:isolate;overflow:hidden;border:2px solid #cbb3e1;border-radius:24px;background:linear-gradient(130deg,#fff9e8,#faf1ff 65%,#e6f7ee);box-shadow:0 6px 0 #cbb6df66,0 16px 40px #68498a13}
.home-panel::before,.home-panel::after{position:absolute;pointer-events:none;z-index:-1;font-size:100px;line-height:1;animation:tabletop-float 8s ease-in-out infinite}
.home-panel::before{content:"✦";right:28px;top:15px;color:#edb95670;transform:rotate(12deg)}
.home-panel::after{content:"⚄";left:-15px;bottom:-12px;color:#b898d350;transform:rotate(-16deg);animation-delay:-4s}
.home-panel h2{color:#62418e;font-size:clamp(28px,4vw,38px)}
.home-choice.home-primary{border:2px solid #7851ae;background:linear-gradient(115deg,#7851ae,#986ab9);border-radius:16px;box-shadow:0 4px 0 #583b86;color:#fff}
.home-choice.home-primary strong{font-weight:850}.home-choice.home-primary span{color:#fff}
dialog{border:2px solid #bc9ed7;border-radius:22px;background:linear-gradient(140deg,#fffdf4,#f7efff);box-shadow:0 12px 60px #33204644}
dialog::backdrop{background:#35234c88;backdrop-filter:blur(4px)}
input,select{border-radius:10px;border-color:#d5c3e5}
footer{color:#7d628f;border-color:#cfb9e0}
@keyframes tabletop-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -7px;rotate:6deg}}
@media(max-width:780px){header{padding-top:16px;padding-bottom:16px}.intro-note{padding:6px 9px}.board-panel .board{padding:5px}.home-panel::before{font-size:75px;right:10px;top:12px}}
@media(max-width:430px){.board-panel .board{padding:4px;border-radius:12px}.brand{letter-spacing:-.7px}.board-panel{border-radius:16px!important}.board-panel .board-footer{border-radius:0 0 14px 14px}}
@media(prefers-reduced-motion:reduce){.home-panel::before,.home-panel::after{animation:none}.primary{transition:none}}
.board-panel::after{content:"✦ · ✧";position:absolute;right:18px;top:14px;color:#cc8b43;font-size:19px;letter-spacing:3px;line-height:1;pointer-events:none;opacity:.75}

/* A clear no-choice message in place of a zero-score warning. */
.board-notices .zero-title{font-size:clamp(18px,4vw,25px);letter-spacing:0;line-height:1.2}

/* Optional continuation of the group score guide through the winning threshold. */
.score-expansion{margin-top:10px;border-top:1px solid var(--line);padding-top:10px}
.score-expansion summary{width:fit-content;cursor:pointer;font-size:12px;color:var(--purple);padding:5px 0;min-height:30px}
.score-expansion summary:focus-visible{outline:3px solid #9c87da;outline-offset:3px;border-radius:4px}
.score-collapse-label{display:none}.score-expansion[open] .score-expand-label{display:none}.score-expansion[open] .score-collapse-label{display:inline}
.score-expansion .score-steps-extra{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-top:10px}
.score-expansion .score-steps-extra span{padding:7px 3px}
.score-expansion .score-steps-extra strong{font-size:20px}
.score-expansion .score-limit{font-size:11px;line-height:1.5;color:var(--muted);margin:10px 0 0}

.tournament-open{grid-column:1 / -1;justify-self:end;padding:4px 9px;font-size:11px;margin:0;border:0;background:transparent;color:var(--purple)}
.tournament-summary{margin-top:20px;padding-top:16px;border-top:1px solid var(--line)}.tournament-list{list-style:none;margin:10px 0 16px;padding:0}.tournament-entry{display:grid;grid-template-columns:22px minmax(0,1fr) 40px;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--line);font-size:13px}.tournament-entry:last-child{border:0}.tournament-person{display:flex;align-items:center;gap:9px;min-width:0}.tournament-person>span{overflow-wrap:anywhere}.tournament-person img{width:30px;height:30px;object-fit:contain;flex-shrink:0}.tournament-rank{color:var(--muted);font-size:12px}.tournament-entry>strong{text-align:right;font-size:22px;color:var(--purple)}.tournament-milestone{padding:14px;background:#fff0be;border:2px solid #e2b44f;border-radius:12px;color:#785512;font-weight:750;text-align:center}.tournament-confirm{padding:12px;margin-top:12px;border:1px solid var(--line);border-radius:10px;background:#f7f2ec;font-size:13px}.tournament-confirm button{margin-right:8px}.tournament-confirm[hidden],.tournament-milestone[hidden],.tournament-open[hidden]{display:none}

.board-panel>.turn-panel .tournament-open{grid-row:1;grid-column:2;margin-top:-5px;min-height:28px;align-self:start}.results-dialog .tournament-summary{position:relative;z-index:1}
.board-panel>.turn-panel #turn-count{grid-row:1;grid-column:1;align-self:center;margin:0}
.board-panel:has(.tournament-open:not([hidden]))::after{display:none}

.house-rules{margin:14px 0;border-top:1px solid var(--line);padding-top:10px}.house-rules summary{font-size:13px;color:var(--purple);cursor:pointer;padding:5px 0}.house-option{display:flex;align-items:flex-start;gap:10px;margin:12px 0;font-size:13px}.house-option input{width:20px;height:20px;flex-shrink:0;accent-color:var(--purple);margin:0}.house-option strong,.house-option small{display:block}.house-option small{font-size:11px;line-height:1.5;color:var(--muted);margin-top:4px}.house-option[hidden]{display:none}.room-house-rule{min-width:180px}.variant-chip{display:inline-block;margin-left:8px;padding:3px 7px;border:1px solid var(--line);border-radius:6px;font-size:10px;color:var(--purple);font-weight:650}.results-dialog.different-results .results-table th:nth-child(n+3):nth-child(-n+6),.results-dialog.different-results .results-table td:nth-child(n+3):nth-child(-n+6){display:none}[hidden]#standard-rules,[hidden]#different-rules{display:none}

.cell.reversible{outline:2px dashed var(--purple);outline-offset:-7px;cursor:pointer}.cell.reversible::after{content:'↶';position:absolute;right:5px;bottom:3px;font-size:18px;font-weight:800;color:var(--ink);background:rgba(255,255,255,.88);border-radius:50%;width:23px;height:23px;line-height:23px;text-align:center}.cell.reversible:hover{filter:brightness(1.1)}

.cell.blocked-choice{outline:3px dashed #9e4638;outline-offset:-4px;cursor:not-allowed}.cell.blocked-choice::before{content:'';position:absolute;inset:0;border-radius:inherit;background:repeating-linear-gradient(135deg,transparent 0 9px,#4c1a1826 9px 13px);pointer-events:none;z-index:2}.blocked-mark{position:absolute;right:4px;top:3px;z-index:4;width:18px;height:18px;line-height:17px;text-align:center;border-radius:50%;background:#fff5ed;color:#9e3026;font-size:18px;font-weight:800}.board-notices>.roll-notice{position:relative;grid-area:1 / 1;width:min(340px,calc(100% - 24px));margin:0;padding:13px 16px;border:2px solid #b96445;border-radius:14px;background:#fff4e8;box-shadow:0 6px 24px #54221330;color:#6b3427;font-size:16px;font-weight:750;line-height:1.4;text-align:center;pointer-events:none;animation:mark-arrival .35s ease-out}.roll-notice[hidden]{display:none}.board-notices:has(.zero-banner:not([hidden])) .roll-notice{visibility:hidden}@media(prefers-reduced-motion:reduce){.board-notices>.roll-notice{animation:none}}

.room-tables{flex-basis:100%;min-width:0;border-top:1px solid var(--line);padding-top:12px}.room-tables-list{display:flex;gap:8px;overflow-x:auto;padding:6px 3px 10px}.room-table{flex:0 0 200px;display:grid;gap:5px;border:1px solid var(--line);border-radius:12px;padding:12px;background:#ffffff8c}.room-table small{color:var(--muted);overflow-wrap:anywhere}.table-status{font-size:11px;color:var(--muted)}.room-table.selected-table{outline:2px solid var(--purple);outline-offset:-2px}.table-controls{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px}.table-controls button{font-size:11px;padding:7px 10px}.create-table-controls{display:flex;align-items:end;gap:8px;flex-wrap:wrap;margin:10px 0}.create-table-controls label{font-size:11px;display:grid;gap:4px}.create-table-controls select{padding:8px}.create-table-controls[hidden]{display:none}.table-your-turn{box-shadow:0 0 0 3px #dbb34c85}.room-table.table-your-turn>strong::after{content:' · Din tur';color:#795614}.room-tables .panel-heading span{font-size:11px;color:var(--muted)}@media(max-width:600px){.room-table{flex-basis:175px}.room-tables .panel-heading{align-items:start;gap:8px}.create-table-controls button{flex-basis:100%}}

.room-tables>summary{cursor:pointer;font-weight:750;font-size:13px;padding:8px 0;color:var(--purple)}.room-tables>.panel-heading{margin-top:10px}

.room-panel{flex-wrap:wrap;align-items:flex-start}.room-panel>div:first-child{flex:1 1 100%}.room-tables{order:1;flex:1 1 100%;width:100%}.room-roster,.room-audience,.room-house-rule{order:2}.room-controls{order:3}.room-tables .room-table>strong{font-size:14px;letter-spacing:0}

/* Both games have an equal place in setup. Room creation requires a choice. */
.game-picker{border:0;padding:0;margin:22px 0;display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0}
.game-picker legend{font-size:15px;font-weight:700;margin-bottom:12px}
.game-choice{display:flex;align-items:flex-start;gap:10px;padding:16px 12px;border:2px solid var(--line);border-radius:14px;background:#fffdf7;cursor:pointer;transition:background .15s,border-color .15s;min-width:0}
.game-choice:has(input:checked){border-color:var(--purple);background:#eee8fa}
.game-choice:has(input:focus-visible){outline:3px solid var(--purple);outline-offset:3px}
.game-choice input{width:18px;height:18px;flex-shrink:0;margin:2px 0 0;accent-color:var(--purple)}
.game-choice strong,.game-choice small{display:block}.game-choice strong{font-size:16px}.game-choice small{font-size:12px;line-height:1.5;color:var(--muted);margin-top:8px}
.room-game-switch{display:grid;gap:6px;font-size:12px}.room-game-switch[hidden],#room-create-settings[hidden]{display:none}.table-game{font-size:12px;color:var(--purple);font-weight:650}
@media(max-width:430px){.game-picker{grid-template-columns:1fr;gap:10px}.game-choice{padding:13px}.game-choice small{margin-top:4px}}

/* A shared welcome and a compact, touch-friendly local setup. */
.home-games{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:0 0 24px}
.home-games article{border:1px solid #ccb8df;border-radius:14px;padding:18px;background:#fffdf8d9}
.home-games article>span{font-size:28px;float:right;color:var(--purple);margin-left:8px}.home-games h3{font-size:20px;margin:0 0 8px;color:#62418e}.home-games p{font-size:13px;line-height:1.5;color:var(--muted);margin:0}
#brand-name{font-size:clamp(14px,2vw,20px)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
#setup{width:min(520px,calc(100vw - 24px));padding:18px 20px;max-height:calc(100dvh - 24px)}
#setup .dialog-top{gap:12px}#setup-heading{font-size:21px;letter-spacing:-.4px;margin:0}#setup .close{padding:2px 6px;min-width:36px;min-height:36px}
#setup .game-picker{grid-template-columns:1fr 1fr;gap:8px;margin:10px 0 12px}
#setup .game-choice{padding:10px 8px;gap:7px;align-items:center;border-radius:10px}#setup .game-choice strong{font-size:14px}#setup .game-choice input{width:16px;height:16px;margin:0}
.setup-count{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:13px;margin-bottom:12px}
.segmented{display:flex;gap:4px}.segmented button{border:1px solid #d5c3e5;border-radius:8px;background:#fffdf8;color:#70548b;font-size:12px;font-weight:650;min-height:36px;padding:5px 11px}
.segmented button[aria-pressed="true"]{background:#75549b;border-color:#75549b;color:white;box-shadow:inset 0 0 0 1px #ffffff35}
#player-count-buttons button{min-width:36px}
#setup .setup-player{display:grid;grid-template-columns:48px minmax(0,1fr);gap:6px 10px;margin:8px 0;padding:8px 10px;border:1px solid #ddd1e5;border-radius:12px;background:#ffffffa8}
#setup .setup-player>input{height:34px;font-size:14px;padding:6px 9px}
.setup-symbol{grid-row:1 / 3;align-self:center;display:grid;place-items:center;position:relative;width:48px;height:52px;padding:3px;border:1px solid #bba4d3;border-radius:12px;background:var(--player-color,#eee8fa)}
.setup-symbol::after{content:'⌄';position:absolute;bottom:-4px;right:-4px;border:1px solid #cbb5df;border-radius:50%;background:#fffdf8;color:#68478d;font-size:12px;width:17px;height:17px;line-height:12px}
#setup .setup-symbol .badge{width:40px;height:40px;border-radius:8px}#setup .symbol-buttons[hidden]{display:none}
#setup .player-type-buttons{grid-column:2;gap:5px}#setup .player-type-buttons button{flex:1;min-height:32px;font-size:11px;padding:4px 7px}
#setup-api:empty{display:none}#setup-api{margin:8px 0;font-size:10px;line-height:1.4}
#setup-form>.primary{margin-top:6px;min-height:44px;padding:10px}
#local-symbol-dialog{width:min(430px,calc(100vw - 24px));padding:20px}#local-symbol-dialog h2{font-size:20px}
@media(max-width:430px){.home-games{gap:10px}.home-games article{padding:13px 10px}.home-games article>span{float:none;font-size:25px}.home-games h3{font-size:17px;margin:7px 0}.home-games p{font-size:12px}#setup{padding:14px}#setup .setup-player{margin:6px 0;padding:6px 8px;gap:4px 9px}}

.home-game{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:10px;padding:20px 18px;border:2px solid #b89ace;border-radius:16px;background:linear-gradient(140deg,#fffdf8,#f1e7fb);color:#62418e;box-shadow:0 4px 0 #cbb6df;transition:background .15s,transform .15s}
.home-game:hover{background:#e9dcf6;border-color:#8054a5;transform:translateY(-2px)}.home-game:active{transform:translateY(2px);box-shadow:0 1px 0 #cbb6df}
.home-game>span:first-child{font-size:30px;line-height:1}.home-game>strong{font-size:21px}.home-game-description{font-size:13px;line-height:1.5;color:var(--muted)}.home-game-action{font-size:12px;font-weight:800;margin-top:auto;padding-top:8px}
#room-dialog.create-mode .room-join,#room-dialog.create-mode .game-picker,#room-dialog.join-mode .room-create{display:none}
#room-dialog.join-mode .room-join{border-top:0;margin-top:0}
@media(max-width:430px){.home-game{padding:15px 11px;gap:9px}.home-game>strong{font-size:17px}.home-game-description{font-size:12px}.home-alternative{gap:8px}.home-alternative>span{width:100%}}

.room-count{margin:20px 0 16px}#room-capacity-buttons button{min-width:40px;min-height:40px}

.play-mode-options{display:grid;gap:12px;margin:20px 0 4px}.play-mode-options .home-game{padding:18px}.play-mode-options .home-game>strong{font-size:19px}

.local-controls{display:flex;flex-wrap:wrap;gap:10px;margin:-10px 0 20px}.local-controls[hidden]{display:none}
#room-directory{width:min(700px,calc(100vw - 24px))}.directory-actions{display:flex;gap:8px;flex-wrap:wrap}.directory-actions .primary{width:auto;font-size:13px;padding:10px 14px}.directory-list{display:grid;grid-template-columns:1fr 1fr;gap:12px}.directory-room{display:grid;gap:8px;padding:16px;border:1px solid #cfbcdf;border-radius:12px;background:#fffdf8}.directory-room>span{font-size:12px}.directory-room .quiet{margin-top:5px}.room-available{color:#2b7360;font-weight:700}
.public-create,.public-room-setting{display:flex;align-items:center;gap:9px;font-size:12px;line-height:1.5}.public-create{margin:0 0 16px}.public-create input,.public-room-setting input{accent-color:var(--purple);width:18px;height:18px;padding:0}.public-room-setting[hidden]{display:none}
.room-admissions{flex-basis:100%;padding:14px;border:2px solid #c2a5db;background:#fff9e9;border-radius:12px}.room-admissions[hidden]{display:none}.admission-row{display:flex;align-items:center;flex-wrap:wrap;gap:8px;padding:8px 0}.room-admissions .admission-row strong,.admission-extra>strong{font-size:14px;letter-spacing:0}.admission-row>strong{flex:1;min-width:160px}.admission-symbols{display:flex;gap:8px;flex-wrap:wrap}.admission-symbols button{width:54px;height:54px;padding:7px}.admission-extra p{margin:7px 0!important}
#cancel-end-local{display:block;margin-top:12px;width:100%}#end-local-dialog p,#share-local-dialog>p{font-size:14px;line-height:1.6}
#room-dialog.create-mode.choose-game .game-picker{display:grid}
@media(max-width:520px){.directory-list{grid-template-columns:1fr}.directory-actions{gap:6px}.directory-actions .quiet{font-size:12px;padding:9px}.local-controls .quiet{font-size:12px}}