:root{--ink:#251d36;--cream:#fff8e9;--navy:#171426}*{box-sizing:border-box}html,body{min-height:100%;margin:0;overflow:hidden}button{font:inherit}body{color:var(--ink);font-family:var(--font-geist-sans),system-ui,sans-serif;background:radial-gradient(circle at 15% 10%,#ff655d40,transparent 25%), radial-gradient(circle at 85% 85%,#39d39833,transparent 24%), var(--navy)}.menu-shell{isolation:isolate;place-items:center;min-height:100svh;padding:clamp(18px,3vw,38px);display:grid;position:relative}.menu-shell:before{content:"";opacity:.12;z-index:-1;background-image:radial-gradient(#fff 1px,#0000 1px);background-size:22px 22px;position:fixed;inset:0}.hero{text-align:center;width:min(560px,96vw)}.eyebrow{color:#fff;text-transform:uppercase;letter-spacing:.17em;margin:12px 0 4px;font-size:12px;font-weight:800}h1{color:#fff;letter-spacing:-.09em;margin:0;font-size:clamp(64px,10vw,112px);font-weight:900;line-height:.82}h1 em{color:#ffcc32;font-style:normal}.tagline{color:#d9d3ea;margin:18px 0 24px;font-size:clamp(14px,2vw,18px)}.mini-board{background:#fff8e9;border-radius:17px;width:56px;height:56px;margin:auto;position:relative;rotate:-8deg;box-shadow:0 10px 30px #0006}.mini-board i{border-radius:50%;width:12px;height:12px;position:absolute}.mini-board i:first-child{background:#ff655d;top:8px;left:8px}.mini-board i:nth-child(2){background:#ffc928;top:8px;right:8px}.mini-board i:nth-child(3){background:#39d398;bottom:8px;right:8px}.mini-board i:nth-child(4){background:#987cff;bottom:8px;left:8px}.mini-board b{place-items:center;font-size:25px;display:grid;position:absolute;inset:0}.setup-card{background:#fff8e9fa;border-radius:28px;padding:20px;box-shadow:0 24px 70px #0008}.setup-row{justify-content:space-between;align-items:center;font-weight:800;display:flex}.segmented{background:#e7decc;border-radius:14px;gap:4px;padding:4px;display:flex}.segmented button{cursor:pointer;background:0 0;border:0;border-radius:10px;width:42px;height:34px;font-weight:900}.segmented .selected{background:var(--ink);color:#fff}.roster{grid-template-columns:1fr 1fr;gap:8px;margin:16px 0;display:grid}.player-option{text-align:left;cursor:pointer;background:#fff;border:1px solid #ded5c5;border-radius:15px;grid-template-columns:auto 1fr;align-items:center;padding:10px;display:grid}.player-dot{background:var(--player);border-radius:50%;grid-row:span 2;width:13px;height:13px;margin-right:9px;box-shadow:inset 0 -2px #0003}.player-option span:not(.player-dot){font-size:14px;font-weight:800}.player-option small{color:#7b7288;font-size:11px}.start-button{background:var(--ink);color:#fff;cursor:pointer;border:0;border-radius:16px;justify-content:space-between;width:100%;padding:14px 18px;font-weight:900;display:flex;box-shadow:0 7px #100c19}.start-button:hover{translate:0 -2px}footer{color:#8f88a3;font-size:11px;position:fixed;bottom:13px}.game-shell{flex-direction:column;height:100svh;padding:12px clamp(12px,2vw,28px) 18px;display:flex}header{color:#fff;flex:0 0 48px;justify-content:space-between;align-items:center;height:48px;display:flex}.brand{color:#fff;letter-spacing:-.06em;cursor:pointer;background:0 0;border:0;font-size:22px;font-weight:900}.brand b{color:#ffcc32}.turn-pill{background:#29243c;border-radius:99px;align-items:center;gap:8px;padding:8px 15px;font-size:13px;font-weight:700;display:flex}.turn-pill span{background:var(--player);width:9px;height:9px;box-shadow:0 0 12px var(--player);border-radius:50%}.icon-button{color:#fff;cursor:pointer;background:#29243c;border:0;border-radius:12px;width:38px;height:38px}.play-area{flex:1;grid-template-columns:minmax(0,1fr) clamp(190px,24vw,290px);gap:clamp(12px,2vw,26px);min-height:0;display:grid}.board-wrap{place-items:center;min-width:0;min-height:0;display:grid}.board{aspect-ratio:1;background:#ede1c8;border-radius:6%;width:min(100%,100svh - 82px);max-height:100%;position:relative;overflow:hidden;box-shadow:0 20px 60px #0008,inset 0 0 0 7px #fff8e9}.board:before{content:"";opacity:.13;background-image:repeating-linear-gradient(45deg,#412f22 0 1px,#0000 1px 7px);position:absolute;inset:0}.field,.yard-field{--size:7.3%;width:var(--size);aspect-ratio:1;left:calc((var(--x) + .5)*9.09% - var(--size)/2);top:calc((var(--y) + .5)*9.09% - var(--size)/2);background:var(--field);border:clamp(1px,.3vw,3px) solid #3d3447;border-radius:50%;position:absolute;box-shadow:inset 0 -4px #0002,0 2px 3px #0002}.start-field{outline:3px dashed var(--field);outline-offset:3px}.home-field{border-color:#fff8e9}.yard-field{--size:6.7%;opacity:.7;border:none;box-shadow:inset 0 0 0 4px #fff8}.center-mark{aspect-ratio:1;text-align:center;background:var(--ink);color:#fff;border-radius:28%;place-items:center;width:17%;font-size:clamp(8px,1.4vw,18px);font-weight:800;line-height:.85;display:grid;position:absolute;top:41.5%;left:41.5%;rotate:45deg;box-shadow:0 8px 15px #0004}.center-mark b{color:#ffcc32;font-size:1.25em}.center-mark br,.center-mark b{rotate:-45deg}.pawn{--size:6%;width:var(--size);aspect-ratio:1;z-index:calc(5 + var(--stack));left:calc((var(--x) + .5)*9.09% - var(--size)/2 + var(--stack)*0.12%);top:calc((var(--y) + .5)*9.09% - var(--size)/2 - var(--stack)*0.12%);border:clamp(2px,.4vw,4px) solid var(--player-dark);background:radial-gradient(circle at 38% 28%,#fff8 0 9%,transparent 10%),var(--player);box-shadow:inset 0 -7px var(--player-dark),0 4px 5px #0005;border-radius:50% 50% 46% 46%;transition:left .32s,top .32s,transform .15s;position:absolute}.pawn:after{content:"";background:#fff5;border-radius:50%;width:34%;height:18%;position:absolute;top:17%;left:33%}.pawn.can-move{cursor:pointer;z-index:20;animation:.75s infinite alternate pulse}@keyframes pulse{to{filter:brightness(1.15);box-shadow:inset 0 -7px var(--player-dark),0 0 0 6px #fff9,0 7px 12px #0005;transform:scale(1.2)}}.control-panel{flex-direction:column;justify-content:space-between;gap:12px;min-height:0;padding:8px 0 3px;display:flex}.players-list{gap:7px;display:grid;overflow:auto}.player-card{color:#fff;opacity:.55;border:1px solid #3b354b;border-radius:16px;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;padding:9px 11px;display:grid}.player-card.active{opacity:1;border-color:var(--player);box-shadow:0 0 18px color-mix(in srgb,var(--player) 20%,transparent);background:#29243c}.avatar{background:var(--player);width:32px;height:32px;color:var(--ink);border-radius:11px;place-items:center;font-weight:900;display:grid}.player-card div{flex-direction:column;min-width:0;display:flex}.player-card strong{white-space:nowrap;text-overflow:ellipsis;font-size:13px;overflow:hidden}.player-card small{color:#a9a2b8;font-size:10px}.player-card>b{font-size:12px}.dice-zone{background:#fff8e9;border-radius:22px;align-items:center;gap:13px;padding:15px;display:flex}.dice{cursor:pointer;background:#fff;border:0;border-radius:18px;flex:0 0 66px;grid-template:repeat(3,1fr)/repeat(3,1fr);width:66px;height:66px;padding:12px;display:grid;position:relative;box-shadow:0 7px #d6cbb7,0 10px 20px #0003}.dice:disabled{cursor:default}.dice i{background:var(--ink);border-radius:50%;place-self:center;width:10px;height:10px}.dice-1 i:first-child{grid-area:2/2}.dice-2 i:first-child{grid-area:1/1}.dice-2 i:nth-child(2){grid-area:3/3}.dice-3 i:first-child{grid-area:1/1}.dice-3 i:nth-child(2){grid-area:2/2}.dice-3 i:nth-child(3){grid-area:3/3}.dice-4 i:first-child{grid-area:1/1}.dice-4 i:nth-child(2){grid-area:1/3}.dice-4 i:nth-child(3){grid-area:3/1}.dice-4 i:nth-child(4){grid-area:3/3}.dice-5 i:first-child{grid-area:1/1}.dice-5 i:nth-child(2){grid-area:1/3}.dice-5 i:nth-child(3){grid-area:2/2}.dice-5 i:nth-child(4){grid-area:3/1}.dice-5 i:nth-child(5){grid-area:3/3}.dice-6 i:first-child{grid-area:1/1}.dice-6 i:nth-child(2){grid-area:2/1}.dice-6 i:nth-child(3){grid-area:3/1}.dice-6 i:nth-child(4){grid-area:1/3}.dice-6 i:nth-child(5){grid-area:2/3}.dice-6 i:nth-child(6){grid-area:3/3}.dice.rolling{animation:.13s infinite alternate shake}@keyframes shake{to{rotate:6deg;scale:.95}}.dice-zone div{flex-direction:column;display:flex}.dice-zone strong{font-size:13px}.dice-zone small{color:#786e7d;margin-top:3px;font-size:10px}.modal-backdrop{z-index:99;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0b0814dd;place-items:center;display:grid;position:fixed;inset:0}.winner-card{text-align:center;width:min(390px,88vw);box-shadow:0 0 0 5px var(--player),0 30px 80px #000;background:#fff8e9;border-radius:30px;padding:30px}.winner-card .confetti{color:var(--player);font-size:45px;display:block}.winner-card p{text-transform:uppercase;letter-spacing:.12em;font-size:11px;font-weight:900}.winner-card h2{letter-spacing:-.06em;margin:10px 0 25px;font-size:40px;line-height:.95}.text-button{color:#776d7c;cursor:pointer;background:0 0;border:0;margin-top:18px;font-weight:700}@media (orientation:landscape) and (height<=600px){.game-shell{padding:6px 10px 8px}header{flex-basis:38px;height:38px}.brand{font-size:18px}.turn-pill{padding:5px 10px;font-size:11px}.icon-button{width:32px;height:32px}.play-area{grid-template-columns:minmax(0,1fr) minmax(165px,27vw);gap:10px}.board{width:min(100%,100svh - 51px)}.player-card{border-radius:11px;padding:5px 7px}.avatar{border-radius:8px;width:26px;height:26px}.dice-zone{border-radius:14px;padding:8px}.dice{border-radius:14px;flex-basis:51px;width:51px;height:51px;padding:9px}.dice i{width:7px;height:7px}.dice-zone small{display:none}}@media (orientation:portrait){html,body{overflow:auto}.game-shell{height:auto;min-height:100svh}.play-area{flex-direction:column;display:flex}.board{width:min(96vw,68svh)}.control-panel{width:min(96vw,540px);margin:auto}.players-list{grid-template-columns:1fr 1fr}}@media (width<=420px) and (orientation:portrait){.roster{grid-template-columns:1fr}.hero{padding-bottom:25px}footer{display:none}}@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}}input{font:inherit}.online-card label{text-align:left;gap:6px;font-weight:800;display:grid}.online-card input{width:100%;color:var(--ink);background:#fff;border:1px solid #d9cebc;border-radius:13px;outline:none;padding:12px}.online-card input:focus{border-color:#987cff;box-shadow:0 0 0 3px #987cff22}.or{color:#8b8291;text-transform:uppercase;align-items:center;gap:10px;margin:14px 0;font-size:11px;font-weight:800;display:flex}.or span{background:#ddd2c0;flex:1;height:1px}.join-row{grid-template-columns:1fr auto;gap:8px;display:grid}.join-row input{letter-spacing:.2em;font-weight:900}.join-row button,.invite-box button{color:#251d36;cursor:pointer;background:#ffc928;border:0;border-radius:12px;padding:0 18px;font-weight:900}.form-error{color:#ad2732;margin:10px 0 0;font-size:12px;font-weight:700}.connection{color:#6b6274;text-align:center;margin-top:10px;display:block}.lobby-shell{background:radial-gradient(circle at 10% 10%,#987cff33,transparent 30%),var(--navy);place-items:center;min-height:100svh;padding:18px;display:grid}.lobby-card{text-align:center;background:#fff8e9;border-radius:30px;width:min(570px,96vw);max-height:96svh;padding:25px;overflow:auto;box-shadow:0 25px 70px #0009}.brand.dark{color:var(--ink)}.dark-text{color:#6c6278}.lobby-card h2{margin:4px 0 18px;font-size:32px}.lobby-card h2 span{color:#765be5;letter-spacing:.08em}.invite-box{background:#fff;border-radius:20px;justify-content:center;align-items:center;gap:20px;padding:15px;display:flex}.invite-box div{text-align:left;flex-direction:column;gap:5px;display:flex}.invite-box strong{letter-spacing:.12em;font-size:27px}.invite-box button{padding:8px 12px}.lobby-players{grid-template-columns:1fr 1fr;gap:8px;margin:16px 0;display:grid}.lobby-player{text-align:left;border:1px solid #ded4c2;border-radius:14px;grid-template-columns:auto 1fr;align-items:center;padding:10px;display:grid}.lobby-player>span{background:var(--player);border-radius:10px;grid-row:span 2;place-items:center;width:32px;height:32px;margin-right:9px;font-weight:900;display:grid}.lobby-player small{color:#83798c}.lobby-player.empty{opacity:.45}.start-button:disabled{opacity:.4;cursor:not-allowed}@media (orientation:landscape) and (height<=500px){.lobby-card{grid-template-columns:1fr 1fr;align-items:center;gap:8px;display:grid}.lobby-card>.brand,.lobby-card>.eyebrow,.lobby-card>h2,.invite-box{grid-column:1}.lobby-players{grid-area:1/2/5}.lobby-card>.start-button,.lobby-card>.text-button{grid-column:1}}