:root {
  --navy:#0f2747; --navy2:#17395f; --ink:#172033; --muted:#64748b; --panel:#ffffff;
  --bg:#eef3f8; --line:#b9c5d3; --neutral:#f8fafc;
  --red:#ef4444; --blue:#2196f3; --green:#22c55e; --yellow:#facc15;
  --shadow:0 14px 35px rgba(15,39,71,.16); --radius:18px;
  --safe:#e9f2ff; --safe-star:#5f8fd4;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink)}
body{overscroll-behavior-y:contain}
button,input{font:inherit}
button{border:0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hidden{display:none!important}
.screen{display:none;min-height:100dvh}.screen.active{display:flex}
.app-shell{min-height:100dvh}

/* MENU */
.menu-screen,.setup-screen{align-items:center;justify-content:center;padding:max(14px,env(safe-area-inset-top)) 14px max(14px,env(safe-area-inset-bottom));background:
 radial-gradient(circle at 12% 8%,rgba(33,150,243,.14),transparent 30%),
 radial-gradient(circle at 88% 90%,rgba(250,204,21,.17),transparent 30%),linear-gradient(145deg,#f8fbff,#e8eef6)}
.menu-card,.setup-card{width:min(100%,480px);background:rgba(255,255,255,.97);border:1px solid #d9e2ec;border-radius:28px;padding:26px 20px;box-shadow:var(--shadow);text-align:center}
.brand-horse{width:78px;height:78px;margin:0 auto 8px;display:grid;place-items:center;border-radius:24px;background:var(--navy);color:white;font-size:50px;box-shadow:0 10px 22px rgba(15,39,71,.24)}
.eyebrow{margin:10px 0 5px;font-size:11px;font-weight:900;letter-spacing:.18em;color:#6b7f99}
.menu-card h1{margin:0;font-size:clamp(34px,10vw,54px);line-height:.92;letter-spacing:-.045em;color:var(--navy)}
.menu-card h1 span{color:var(--blue)}
.menu-subtitle{margin:12px 0 22px;color:var(--muted);font-weight:700;font-size:13px}
.menu-actions{display:grid;gap:10px}
.menu-btn{min-height:76px;border:1px solid #dbe4ee;background:#f8fafc;border-radius:18px;padding:12px 16px;display:grid;grid-template-columns:42px 1fr;text-align:left;align-items:center;color:var(--ink);box-shadow:0 5px 12px rgba(15,39,71,.05)}
.menu-btn>span{grid-row:1/3;font-size:30px}.menu-btn b{font-size:16px}.menu-btn small{font-size:11px;color:var(--muted);font-weight:700}
.menu-btn.primary{background:linear-gradient(180deg,#17395f,#0f2747);color:white;border-color:#0f2747}.menu-btn.primary small{color:#dbeafe}
.menu-row{display:grid;grid-template-columns:1fr 1fr;gap:10px}.mini-btn{min-height:52px;border-radius:15px;background:white;border:1px solid #dbe4ee;color:var(--navy);font-weight:900}.mini-btn span{margin-left:6px}
.continue-box{background:#eff6ff;border:1px solid #bfdbfe;border-radius:16px;padding:12px;margin:0 0 14px;color:#1d4f91}.continue-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.btn{min-height:46px;border-radius:14px;padding:0 16px;font-weight:900}.btn-primary{background:var(--navy);color:white;box-shadow:0 7px 16px rgba(15,39,71,.2)}.btn-ghost{background:#f1f5f9;color:var(--navy);border:1px solid #d5dee8}.wide{width:100%;margin-top:16px}

/* SETUP */
.setup-card{position:relative;text-align:left}.setup-card h2{text-align:center;margin:3px 35px 5px;color:var(--navy)}.setup-card>p{text-align:center;color:var(--muted);font-size:13px;margin:0 15px 20px}.back-btn{position:absolute;left:16px;top:16px}
.setup-group{margin:16px 0}.setup-group>label{display:block;font-size:12px;font-weight:900;color:#53657b;margin-bottom:8px;text-transform:uppercase}.choice-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.choice-grid.four{grid-template-columns:repeat(4,1fr)}
.choice-btn{min-height:46px;border-radius:13px;border:1px solid #d8e1eb;background:#f8fafc;font-weight:900;color:#45576d}.choice-btn.selected{outline:3px solid rgba(33,150,243,.16);border-color:var(--blue);background:#eff6ff;color:#0f4a82}.color-choice{aspect-ratio:1/1;min-height:auto;display:grid;place-items:center}.color-dot{width:22px;height:22px;border-radius:50%;border:3px solid white;box-shadow:0 0 0 2px rgba(15,39,71,.14)}
.player-name-input{width:100%;height:44px;border:1px solid #d8e1eb;border-radius:12px;padding:0 12px;font-weight:800;color:var(--ink);outline:none}.player-name-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(33,150,243,.12)}.name-list{display:grid;gap:8px}

/* GAME */
.game-screen{flex-direction:column;min-height:100dvh;background:linear-gradient(180deg,#eaf0f7,#f7f9fc)}
.game-header{height:58px;flex:0 0 58px;padding:env(safe-area-inset-top) max(8px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));display:flex;align-items:center;justify-content:space-between;background:#fff;border-bottom:1px solid #dce4ed;box-shadow:0 3px 12px rgba(15,39,71,.06);z-index:5}
.header-title{display:flex;align-items:center;gap:8px;min-width:0}.horse-mark{width:34px;height:34px;border-radius:10px;background:var(--navy);display:grid;place-items:center;color:#fff;font-size:24px}.header-title strong{display:block;font-size:12px;color:var(--navy);white-space:nowrap}.header-title small{display:block;margin-top:2px;font-size:9px;color:var(--muted);font-weight:800}.header-tools{display:flex;gap:5px;align-items:center}.icon-btn{width:38px;height:38px;border-radius:11px;display:grid;place-items:center;background:#f1f5f9;color:var(--navy);font-weight:900;font-size:18px}.hub-btn{width:auto;min-width:38px;padding:0 10px;grid-auto-flow:column;gap:5px;font-size:12px;white-space:nowrap;background:#eaf2fb;border:1px solid #cfdfef}.hub-label{font-size:10px;font-weight:950;letter-spacing:.02em}
.game-layout{width:min(1180px,100%);margin:0 auto;display:grid;grid-template-columns:minmax(0,760px) minmax(280px,360px);gap:14px;padding:10px 12px max(14px,env(safe-area-inset-bottom));align-items:start}
.board-column{min-width:0}.turn-banner{height:38px;border-radius:13px;background:#fff;border:1px solid #dce4ed;margin-bottom:7px;display:flex;align-items:center;justify-content:center;gap:8px;color:var(--navy);font-size:12px;box-shadow:0 4px 10px rgba(15,39,71,.05)}.turn-dot{width:11px;height:11px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px rgba(34,197,94,.12)}
.board-wrap{width:min(100%,720px);margin:auto}.board{position:relative;width:100%;aspect-ratio:1/1;background:#fff;border:3px solid #25384f;border-radius:10px;overflow:hidden;box-shadow:0 16px 28px rgba(15,39,71,.18);touch-action:manipulation;-webkit-user-select:none;user-select:none}
.board-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(15,1fr);grid-template-rows:repeat(15,1fr);background:white}.cell{position:relative;border:.5px solid var(--line);background:var(--neutral);min-width:0;min-height:0}.cell.yard-yellow{background:#fde66f}.cell.yard-blue{background:#76c4fb}.cell.yard-green{background:#79df94}.cell.yard-red{background:#fb8888}.cell.track{background:#fff;border-color:#aebbc9}.cell.home-yellow{background:#f9d942}.cell.home-blue{background:#46aef0}.cell.home-green{background:#43cd68}.cell.home-red{background:#f35e5e}.cell.start-yellow{background:#facc15}.cell.start-blue{background:#2196f3}.cell.start-green{background:#22c55e}.cell.start-red{background:#ef4444}.cell.safe{background:var(--safe)}.cell.safe::after{content:"";position:absolute;inset:21%;background:var(--safe-star);clip-path:polygon(50% 0%,61% 34%,98% 35%,68% 56%,79% 92%,50% 71%,21% 92%,32% 56%,2% 35%,39% 34%);opacity:.9}.cell.start-yellow.safe::after,.cell.start-blue.safe::after,.cell.start-green.safe::after,.cell.start-red.safe::after{background:white;opacity:.95}.cell.center{border:0;background:conic-gradient(from 45deg,var(--yellow) 0 25%,var(--blue) 0 50%,var(--red) 0 75%,var(--green) 0 100%)}
.cell.yard-slot::after{content:"";position:absolute;inset:14%;border-radius:50%;background:rgba(255,255,255,.86);border:2px solid rgba(15,39,71,.18);box-shadow:inset 0 2px 5px rgba(15,39,71,.08)}
.piece-layer{position:absolute;inset:0;pointer-events:none;z-index:3}.piece{--pieceColor:#999;--piece-size:24px;position:absolute;left:0;top:0;width:var(--piece-size);height:var(--piece-size);aspect-ratio:1/1;border:0;background:transparent;padding:0;pointer-events:none;overflow:visible;transform:translate3d(0,0,0);transition:transform 150ms cubic-bezier(.2,.8,.2,1),filter .15s;z-index:2}.piece::before{content:"";position:absolute;left:22%;right:22%;top:4%;height:45%;border-radius:50%;background:radial-gradient(circle at 38% 28%,#fff 0 8%,rgba(255,255,255,.55) 9% 17%,var(--pieceColor) 40% 100%);border:1.5px solid rgba(0,0,0,.18);box-shadow:0 3px 4px rgba(15,23,42,.28)}.piece::after{content:"";position:absolute;left:13%;right:13%;bottom:5%;height:56%;border-radius:48% 48% 24% 24%;background:linear-gradient(90deg,rgba(0,0,0,.13),transparent 25%,rgba(255,255,255,.28) 48%,transparent 70%),var(--pieceColor);clip-path:polygon(35% 0,65% 0,74% 42%,95% 76%,92% 100%,8% 100%,5% 76%,26% 42%);border-bottom:2px solid rgba(0,0,0,.2);filter:drop-shadow(0 4px 3px rgba(15,23,42,.22))}.piece.legal{pointer-events:auto;cursor:pointer;z-index:10;animation:pieceBounce .7s ease-in-out infinite alternate;filter:drop-shadow(0 0 5px white) drop-shadow(0 0 5px var(--pieceColor))}.piece-hit{position:absolute;left:50%;top:50%;width:max(155%,30px);height:max(155%,30px);transform:translate(-50%,-50%);border-radius:50%;background:transparent;pointer-events:none}.piece.legal .piece-hit{pointer-events:auto}.piece.legal .piece-ring{display:block}.piece-ring{display:none;position:absolute;left:5%;right:5%;bottom:-8%;height:25%;border:3px solid rgba(255,255,255,.96);border-radius:50%;box-shadow:0 0 0 2px var(--pieceColor),0 0 10px var(--pieceColor);z-index:-1}.piece.jumping{z-index:20;filter:drop-shadow(0 8px 4px rgba(15,23,42,.25))}.piece.shake{animation:shake .26s linear 2}.stack-badge{position:absolute;right:-4px;top:-5px;background:#0f172a;color:#fff;border:1px solid #fff;border-radius:8px;padding:1px 4px;font-size:8px;font-weight:900;z-index:6}
@keyframes pieceBounce{from{margin-top:0}to{margin-top:-3px}}@keyframes shake{0%,100%{margin-left:0}25%{margin-left:-4px}75%{margin-left:4px}}

.control-column{display:grid;gap:10px}.control-card,.player-list,.game-actions{background:#fff;border:1px solid #dce4ed;border-radius:18px;padding:14px;box-shadow:0 7px 18px rgba(15,39,71,.07)}.dice-area{display:flex;align-items:center;justify-content:center;gap:16px}.dice{width:74px;height:74px;border-radius:16px;background:#fff;border:2px solid #c8d2df;box-shadow:inset 0 -6px 10px rgba(15,39,71,.06),0 8px 16px rgba(15,39,71,.11);position:relative;transform-style:preserve-3d}.dice.rolling{animation:diceRoll .18s linear infinite}.pip{position:absolute;width:11px;height:11px;border-radius:50%;background:#172033;display:none}.p1{left:14%;top:14%}.p2{left:43%;top:14%}.p3{right:14%;top:14%}.p4{left:14%;top:43%}.p5{left:43%;top:43%}.p6{right:14%;top:43%}.p7{left:14%;bottom:14%}.p8{left:43%;bottom:14%}.p9{right:14%;bottom:14%}
.dice[data-value="1"] .p5,.dice[data-value="2"] .p1,.dice[data-value="2"] .p9,.dice[data-value="3"] .p1,.dice[data-value="3"] .p5,.dice[data-value="3"] .p9,.dice[data-value="4"] .p1,.dice[data-value="4"] .p3,.dice[data-value="4"] .p7,.dice[data-value="4"] .p9,.dice[data-value="5"] .p1,.dice[data-value="5"] .p3,.dice[data-value="5"] .p5,.dice[data-value="5"] .p7,.dice[data-value="5"] .p9,.dice[data-value="6"] .p1,.dice[data-value="6"] .p3,.dice[data-value="6"] .p4,.dice[data-value="6"] .p6,.dice[data-value="6"] .p7,.dice[data-value="6"] .p9{display:block}
@keyframes diceRoll{0%{transform:rotate(0) scale(1)}50%{transform:rotate(14deg) scale(.96)}100%{transform:rotate(-14deg) scale(1.03)}}
.dice-copy small{display:block;color:var(--muted);font-weight:900;font-size:10px}.dice-copy strong{display:block;font-size:32px;line-height:1;color:var(--navy);margin-top:5px}.roll-btn{width:100%;min-height:50px;margin-top:13px;border-radius:15px;background:linear-gradient(180deg,#17395f,#0f2747);color:white;font-weight:950;font-size:15px;box-shadow:0 8px 16px rgba(15,39,71,.2)}.roll-btn:disabled{opacity:.45;box-shadow:none;cursor:not-allowed}.status-text{min-height:36px;margin:10px 0 0;text-align:center;font-size:11px;line-height:1.35;font-weight:900;color:#4d6179;display:grid;place-items:center}.player-list{padding:10px;display:grid;gap:7px}.player-chip{min-height:46px;display:grid;grid-template-columns:12px 1fr auto;align-items:center;gap:9px;border:1px solid #e0e7ef;background:#f8fafc;border-radius:13px;padding:7px 10px}.player-chip.active{background:#fff;border-color:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 17%,transparent)}.player-color{width:12px;height:12px;border-radius:50%;background:var(--pc)}.player-meta b{display:block;font-size:12px}.player-meta small{display:block;font-size:9px;color:var(--muted);font-weight:700}.finish-count{font-size:10px;font-weight:900;color:#53657b}.game-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tool-btn{min-height:42px;border-radius:12px;background:#f1f5f9;color:var(--navy);font-size:11px;font-weight:900}

/* MODALS */
.modal-backdrop{position:fixed;inset:0;background:rgba(15,23,42,.48);backdrop-filter:blur(3px);z-index:50}.modal{position:fixed;z-index:60;left:50%;top:50%;transform:translate(-50%,-50%);width:min(calc(100vw - 24px),480px);max-height:min(86dvh,680px);overflow:auto;background:#fff;border-radius:22px;padding:18px;box-shadow:0 25px 60px rgba(15,23,42,.3);overscroll-behavior:contain}.modal-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}.modal-head h3{margin:0;color:var(--navy)}.setting-row{min-height:56px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid #edf1f5;font-size:12px;font-weight:900}.setting-block{border-top:1px solid #edf1f5;padding:13px 0}.setting-block>span{display:block;font-size:11px;font-weight:900;margin-bottom:8px}.switch input{display:none}.switch span{width:48px;height:28px;background:#cbd5e1;border-radius:20px;display:block;position:relative;transition:.2s}.switch span::after{content:"";width:22px;height:22px;border-radius:50%;background:white;position:absolute;left:3px;top:3px;box-shadow:0 2px 5px rgba(0,0,0,.2);transition:.2s}.switch input:checked+span{background:var(--green)}.switch input:checked+span::after{left:23px}.segmented{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:5px}.segmented button{min-height:38px;border-radius:10px;background:#f1f5f9;color:#52657b;font-size:10px;font-weight:900;border:1px solid #dce4ed}.segmented button.selected{background:#e7f1ff;color:#14558f;border-color:#69aee3;box-shadow:0 0 0 2px rgba(33,150,243,.1)}.help-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.help-grid article{padding:11px;border:1px solid #e0e7ef;background:#f8fafc;border-radius:13px}.help-grid b{font-size:11px;color:var(--navy)}.help-grid p{margin:5px 0 0;font-size:10px;line-height:1.45;color:#5e7188}.confirm-modal,.win-modal{text-align:center}.confirm-modal p{color:var(--muted);font-size:13px}.confirm-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:14px}.game-hub-wide{width:100%;margin-top:14px;min-height:48px}.win-actions .win-game-hub{grid-column:1/-1}.trophy{font-size:62px}.win-modal>p{font-size:11px;letter-spacing:.18em;font-weight:900;color:#b7791f;margin:4px 0}.win-modal h2{color:var(--navy);margin:7px 0 15px}
.toast{position:fixed;z-index:80;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translate(-50%,22px);background:#111827;color:#fff;padding:10px 16px;border-radius:999px;box-shadow:0 10px 25px rgba(0,0,0,.22);font-size:11px;font-weight:900;opacity:0;pointer-events:none;transition:.22s;max-width:calc(100vw - 28px);text-align:center}.toast.show{opacity:1;transform:translate(-50%,0)}.confetti-layer{position:fixed;inset:0;z-index:55;pointer-events:none;overflow:hidden}.confetti{position:absolute;top:-20px;width:9px;height:15px;border-radius:2px;animation:fall 2.6s linear forwards}@keyframes fall{to{transform:translate3d(var(--dx),110vh,0) rotate(720deg);opacity:.9}}

/* MOBILE PORTRAIT IS PRIMARY */
@media (max-width:767px){
  .game-header{height:52px;flex-basis:52px}.header-title strong{font-size:11px}.horse-mark{width:32px;height:32px}.icon-btn{width:34px;height:34px;font-size:16px}.header-tools{gap:3px}.hub-btn{width:34px;min-width:34px;padding:0;font-size:16px}.hub-label{display:none}
  .game-layout{display:flex;flex-direction:column;gap:7px;padding:6px 6px max(10px,env(safe-area-inset-bottom));width:100%}.board-column,.control-column{width:100%}.turn-banner{height:31px;margin-bottom:5px;border-radius:10px;font-size:10px}
  .board-wrap{width:100%;max-width:none}.board{width:100%;border-width:2px;border-radius:7px}.control-column{gap:7px}.control-card{padding:9px;border-radius:14px}.dice-area{gap:12px}.dice{width:53px;height:53px;border-radius:12px}.pip{width:8px;height:8px}.dice-copy strong{font-size:24px}.roll-btn{min-height:44px;margin-top:8px;border-radius:12px;font-size:13px}.status-text{min-height:25px;margin-top:5px;font-size:10px}.player-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:5px}.player-chip{min-height:43px;display:flex;flex-direction:column;gap:2px;justify-content:center;text-align:center;padding:4px 2px;border-radius:10px}.player-color{width:9px;height:9px}.player-meta b{font-size:9px;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.player-meta small{display:none}.finish-count{font-size:8px}.game-actions{padding:5px;gap:5px}.tool-btn{min-height:36px;font-size:9px}
}
@media (max-width:390px){.game-layout{padding-left:4px;padding-right:4px}.game-header{padding-left:6px}.header-title strong{font-size:10px}.header-title small{font-size:8px}.header-tools .icon-btn{width:31px;height:31px}.header-tools .hub-btn{min-width:31px;padding:0}.turn-banner{height:29px}.control-card{padding:7px}.dice{width:48px;height:48px}.roll-btn{min-height:41px}.player-chip{min-height:39px}.game-actions{display:none}}
@media (max-height:720px) and (max-width:767px){.game-header{height:48px;flex-basis:48px}.turn-banner{height:27px}.control-card{padding:6px}.dice{width:44px;height:44px}.roll-btn{min-height:38px;margin-top:5px}.status-text{min-height:20px;margin-top:3px}.player-list{padding:4px}.player-chip{min-height:36px}.game-actions{display:none}}
@media (orientation:landscape) and (max-height:600px){.game-header{height:48px;flex-basis:48px}.game-layout{display:grid;grid-template-columns:minmax(0,calc(100dvh - 66px)) minmax(245px,1fr);padding:6px 10px;gap:10px}.turn-banner{height:29px}.board{max-height:calc(100dvh - 90px)}.control-card{padding:9px}.player-list{grid-template-columns:1fr 1fr}.game-actions{display:grid}}
@media (min-width:768px){.control-column{position:sticky;top:68px}.game-header{padding-left:18px;padding-right:18px}}
@supports not (color:color-mix(in srgb,red 50%,blue)){.player-chip.active{box-shadow:0 0 0 3px rgba(33,150,243,.13)}}

@media (max-width:350px){.horse-mark{display:none}.header-title{gap:4px}.header-title strong{font-size:9px}.header-title small{display:none}.header-tools{gap:2px}}