:root{color-scheme:dark;--ink:#f6eddc;--muted:#abb9bf;--gold:#e8bb6e;--panel:#182c3a;--red:#e54242;--yellow:#ffd24a;font-family:Segoe UI,Arial,sans-serif}*{box-sizing:border-box}body{margin:0;color:var(--ink);background:radial-gradient(ellipse at 30% 20%,#213d4b 0,transparent 55%),repeating-linear-gradient(110deg,#101e2a 0,#101e2a 2px,#11202b 3px,#11202b 5px);min-height:100vh}button,input,select{font:inherit}button,a,input,select{touch-action:manipulation}button{cursor:pointer;border:1px solid #52616a;background:#263b47;color:var(--ink);padding:12px 16px;border-radius:8px;font-weight:600;min-height:44px}button:hover:not(:disabled){background:#354f5d;border-color:var(--gold)}button:disabled{opacity:.44;cursor:default}button.primary{background:linear-gradient(#edcb88,#d7a65b);color:#302416;border-color:#f4d89c}button.primary:hover:not(:disabled){background:#f3d899}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid #fff1af;outline-offset:3px}a{color:#e3c38d}h1,h2,h3,p{margin:0}h1,h2,h3{font-family:Georgia,serif}h1{font-size:clamp(30px,4.3vw,49px);font-weight:500;letter-spacing:-1.5px}h1 em{font-style:normal;color:var(--gold)}.four-dots{font:16px Segoe UI,sans-serif;color:var(--gold);letter-spacing:3px;margin-left:18px;vertical-align:middle}.app{max-width:1190px;margin:auto;padding:30px 36px 12px}.masthead{display:flex;align-items:center;justify-content:space-between;padding-bottom:26px;border-bottom:1px solid #ffffff1a;margin-bottom:26px}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700;color:var(--gold);margin-bottom:8px}.return{font-size:13px;text-decoration:none;padding:12px 0}.game-layout{display:grid;grid-template-columns:minmax(0,760px) 280px;gap:28px}.table{min-width:0}.turn-banner{display:flex;align-items:center;gap:13px;margin:0 10px 20px;min-height:53px}.turn-banner h2{font-size:25px;font-weight:500}.turn-banner .eyebrow{font-size:9px;margin-bottom:5px}.badge{margin-left:auto;border:1px solid #70808066;border-radius:20px;padding:5px 12px;font-size:11px;white-space:nowrap;color:#c1d1d7}.mini-disc{display:block;width:32px;height:32px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 2px 3px #fff8,inset 0 -3px 4px #0008,0 3px 5px #0005}.red{background:radial-gradient(circle at 33% 25%,#ff8d80 0,#e64542 35%,#ad191e 85%);color:#640a0c}.yellow{background:radial-gradient(circle at 33% 25%,#fff4b4 0,#ffcc39 40%,#c98a09 95%);color:#704704}.arena{width:100%;max-width:690px;margin:0 auto;filter:drop-shadow(0 17px 12px #0005)}.preview-row{display:grid;grid-template-columns:repeat(7,1fr);padding:0 23px;height:41px}.preview{display:flex;justify-content:center;align-items:flex-start}.preview:after{content:'';width:31px;height:31px;border-radius:50%;opacity:0;transition:opacity .15s}.preview.selected:after{opacity:.95;background:var(--preview);box-shadow:inset 0 2px 4px #fff8,0 4px 5px #0005}.wood-frame{padding:16px;border-radius:18px 18px 12px 12px;background:repeating-linear-gradient(2deg,#99603988 0,#99603988 1px,transparent 2px,transparent 6px),linear-gradient(90deg,#58301d,#c08a54 4%,#7f4728 10%,#a66b40 80%,#5a311e);box-shadow:inset 0 2px 1px #f1c691, inset 0 -5px 4px #341a13,0 1px 0 #eeb57a80}.board{position:relative;padding:7px;border-radius:8px;background:linear-gradient(130deg,#2a66b4,#154581 60%,#092c5c);box-shadow:inset 0 3px 6px #0008,0 2px 0 #efc59b66}.cells{display:grid;grid-template-columns:repeat(7,1fr);gap:7px}.cell{aspect-ratio:1;border-radius:50%;margin:3px;position:relative;background:radial-gradient(circle at 50% 60%,#101f2c,#060f1c);box-shadow:inset 0 4px 7px #000c,0 2px 1px #6a9bd599;display:flex;align-items:center;justify-content:center}.disc{position:absolute;inset:0;border-radius:50%;box-shadow:inset 0 3px 4px #fff7,inset 0 -5px 4px #0006,0 4px 6px #0006;display:flex;align-items:center;justify-content:center;font-size:clamp(18px,3vw,36px);font-weight:900}.disc:before{content:'';position:absolute;inset:13%;border:2px solid #0002;border-radius:50%;box-shadow:0 1px 0 #fff4,inset 0 1px 1px #0002}.disc span{position:relative}.disc.falling{animation:drop .62s cubic-bezier(.5,.05,.8,.6) both}.disc.winner{outline:3px solid #fff6a6;outline-offset:-6px;filter:brightness(1.16);box-shadow:0 0 18px #fff394a0,inset 0 3px 4px #fff7}.column-controls{position:absolute;inset:0;display:grid;grid-template-columns:repeat(7,1fr)}.column-controls button{background:transparent;border:0;border-radius:5px;padding:0;min-width:0}.column-controls button:hover:not(:disabled){background:#ffffff12}.column-controls button:focus-visible{outline:3px solid #fff5aa;outline-offset:-4px;background:#ffffff0c}.column-controls button:disabled{opacity:1}.wood-foot{height:14px;border-radius:3px 3px 10px 10px;margin:0 -7px;background:linear-gradient(#cd945c,#855130 45%,#4f2919);box-shadow:inset 0 1px #edbd86}.hint{text-align:center;font-size:12px;color:var(--muted);margin:19px 0}.actions{display:flex;flex-wrap:wrap;gap:8px;justify-content:center}.actions button{font-size:12px}.notice{text-align:center;color:var(--gold);min-height:26px;font-size:13px;margin-top:10px}.sidebar{padding-top:4px}.score-card,.room-card,.tip-card{padding:24px;border:1px solid #5a717244;border-radius:12px;background:linear-gradient(135deg,#233c4770,#152832aa);margin-bottom:18px}.player-row{display:flex;align-items:center;gap:13px;padding:19px 0;border-bottom:1px solid #ffffff12}.player-row strong{font-size:15px;display:block;overflow-wrap:anywhere}.player-row small{display:block;margin-top:4px;color:var(--muted);font-size:11px}.player-row b{font:30px Georgia,serif;margin-left:auto;color:var(--gold)}.player-row.active strong{color:var(--gold)}.score-footer{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);padding:17px 0 0}.record{font-size:11px;color:#b7c8ca;margin-top:15px;line-height:1.6}.tip-card{background:transparent;border-style:dashed}.small-four{color:var(--gold);font-size:19px;letter-spacing:4px}.tip-card h3{font-weight:400;font-size:21px;margin:14px 0 10px}.tip-card p{color:var(--muted);font-size:13px;line-height:1.75}.signature{font-family:Georgia,serif;font-style:italic;color:#ad9573;display:block;font-size:12px;margin-top:20px}footer{text-align:center;font-size:9px;letter-spacing:2px;color:#8a9da3;padding:25px 0 10px}.room-card p{font-size:12px;line-height:1.6;margin-bottom:10px}.room-card strong{font-size:27px;letter-spacing:3px;color:var(--gold);display:block;margin-bottom:10px}.room-card button{width:100%;font-size:12px}.room-card input{font-size:11px;margin:8px 0}.text-button{background:transparent;border:0}.room-card[hidden],[hidden]{display:none!important}dialog{border:1px solid #8d7a5866;border-radius:18px;background:linear-gradient(135deg,#213b49,#122632);color:var(--ink);box-shadow:0 25px 100px #000b;padding:30px;width:min(520px,calc(100% - 28px));max-height:90vh;overflow:auto}dialog::backdrop{background:#07111bcc;backdrop-filter:blur(5px)}dialog h2{font-size:30px;font-weight:400;margin-bottom:20px}dialog p:not(.eyebrow){font-size:14px;line-height:1.7;margin:12px 0}label{display:block;font-size:12px;color:#d5e0de;margin:14px 0}input,select{display:block;background:#102331;border:1px solid #536871;border-radius:7px;color:var(--ink);min-height:44px;padding:10px;width:100%;margin-top:7px;max-width:100%}input[type=range]{padding:0;accent-color:var(--gold)}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}.form-grid label{min-width:0}.check{display:flex;align-items:center;gap:10px;font-size:14px}.check input{width:21px;min-height:21px;accent-color:var(--gold);margin:0}dialog p.fine{font-size:12px;color:var(--muted)}.muted{color:var(--muted)}.dialog-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}#setupError{color:#ffb6a7}.no-motion .falling{animation:none}@keyframes drop{0%{transform:translateY(var(--fall));}73%{transform:translateY(0)}85%{transform:translateY(-17%)}94%{transform:translateY(0)}98%{transform:translateY(-4%)}100%{transform:translateY(0)}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}@media(max-width:850px){.app{padding:20px}.game-layout{grid-template-columns:minmax(0,1fr) 235px;gap:20px}.score-card,.room-card,.tip-card{padding:17px}.wood-frame{padding:12px}.cells{gap:5px}.cell{margin:2px}.preview-row{padding:0 18px}.turn-banner h2{font-size:21px}.four-dots{display:none}}@media(max-width:680px){.app{padding:14px 10px}.masthead{padding-bottom:12px;margin-bottom:14px;gap:10px}.masthead .eyebrow{font-size:8px;letter-spacing:1.2px}.return{font-size:11px;max-width:80px;line-height:1.5;text-align:right}.game-layout{display:flex;flex-direction:column;gap:10px}.turn-banner{margin:0 5px 5px;gap:9px}.turn-banner h2{font-size:21px}.badge{padding:4px 8px;font-size:10px}.preview-row{height:34px}.preview:after{width:25px;height:25px}.wood-frame{padding:11px;border-radius:12px}.board{padding:5px}.cells{gap:4px}.cell{margin:1px}.hint{font-size:10px;margin:13px 0}.actions{gap:5px}.actions button{padding:9px 10px;font-size:11px}.notice{margin-top:5px;min-height:18px;font-size:12px}.sidebar{display:flex;flex-direction:column;padding:0}.score-card{padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:0 20px;margin-bottom:6px}.score-card>.eyebrow{grid-column:1/-1;margin-bottom:0}.player-row{padding:9px 0;gap:8px}.player-row strong{font-size:13px}.player-row b{font-size:24px}.player-row .mini-disc{width:24px;height:24px}.score-footer,.record{grid-column:1/-1;padding-top:8px}.record{margin:0;padding-top:4px}.tip-card{display:none}.room-card{margin:5px 0;padding:15px}.room-card strong{font-size:20px}.room-card input{min-height:34px}.room-card button{min-height:40px}footer{padding:15px 0 0;font-size:8px;letter-spacing:1px}dialog{padding:23px}.form-grid{gap:9px}.disc{font-size:22px}.wood-foot{margin:0 -3px;height:10px}}@media(max-height:750px) and (min-width:681px){.app{padding-top:15px}.masthead{padding-bottom:12px;margin-bottom:12px}.arena{max-width:570px}.turn-banner{margin-bottom:4px}.preview-row{height:33px}.hint{margin:12px 0}footer{padding-top:12px}}
/* Keep the board and action row together on typical desktop viewports. */
@media(min-width:681px){.arena{max-width:min(690px,calc((100dvh - 440px)*1.1))}}
@media(min-width:681px) and (max-height:750px){.arena{max-width:min(570px,calc((100dvh - 380px)*1.1))}}