:root{color-scheme:light;font-family:Trebuchet MS,Avenir Next,sans-serif;background:radial-gradient(circle at top left,rgba(255,240,180,.8),transparent 28%),radial-gradient(circle at bottom right,rgba(73,143,255,.18),transparent 30%),linear-gradient(180deg,#fff8eb,#f6f7fb,#eef2f9);color:#1d2840}*{box-sizing:border-box}body{margin:0;min-height:100vh}button,input,select{font:inherit}button{cursor:pointer}#root{min-height:100vh}.app-shell{width:min(1320px,100%);margin:0 auto;padding:20px 16px 32px}.hero-card,.board-card,.status-card,.modal-card{background:#ffffffe0;border:1px solid rgba(29,40,64,.08);box-shadow:0 22px 60px #26375d1f;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.hero-card{position:relative;z-index:30;overflow:visible;border-radius:28px;padding:24px;display:grid;gap:20px}.eyebrow{display:inline-block;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;font-weight:700;color:#7b869f;margin-bottom:8px}h1,h2,h3,p{margin:0}h1{font-size:clamp(2rem,4vw,3.8rem);line-height:.98}.hero-card p{max-width:68ch;line-height:1.5;margin-top:12px}.hero-title-row{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:12px}.hero-title-block{display:grid;gap:6px}.hero-mode-label{font-size:1rem;font-weight:700;color:#5b647b}.welcome-card{width:min(720px,100%);margin:min(10vh,72px) auto 0;padding:28px;border-radius:30px;background:#ffffffeb;border:1px solid rgba(29,40,64,.08);box-shadow:0 24px 70px #26375d29;display:grid;gap:22px}.welcome-grid{display:grid;gap:14px}.local-player-configs{display:grid;gap:12px}.local-player-row{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px}.hero-controls,.name-grid,.online-box,.online-actions,.mode-switches,.hero-toolbar,.content-grid,.board-layout,.player-list,.history-list,.chat-list,.chat-form,.mini-grid,.home-row,.track-grid,.card-header,.dice-panel,.zone-header{display:grid;gap:12px}.hero-controls label,.chat-form input,.online-actions input,.welcome-grid label{display:grid;gap:6px}input,select{min-height:44px;border-radius:14px;border:1px solid rgba(29,40,64,.14);background:#fffffff2;padding:0 14px;color:inherit}select{-webkit-appearance:none;-moz-appearance:none;appearance:none}button{min-height:44px;border:0;border-radius:14px;background:#1d2840;color:#fff;padding:0 16px;transition:transform .12s ease,opacity .12s ease,box-shadow .12s ease;box-shadow:0 14px 28px #1d28402e}button:hover:enabled{transform:translateY(-1px)}button:disabled{opacity:.45;cursor:default;box-shadow:none}.mode-switches{grid-template-columns:repeat(3,minmax(0,1fr))}.mode-switches button.active{background:linear-gradient(135deg,#e85d3f,#f3b83b)}.start-game-button{margin-top:8px;min-height:52px;font-size:1.05rem}.name-grid{grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.online-actions{grid-template-columns:repeat(2,minmax(0,1fr))}.online-room-config{display:grid;gap:14px}.online-room-switches{grid-template-columns:repeat(2,minmax(0,1fr))}.public-room-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.public-room-list{display:grid;gap:10px}.public-room-item{min-height:56px;padding:12px 14px;display:grid;justify-items:start;align-content:center;gap:2px;text-align:left}.public-room-item span{color:#ffffffd6;font-size:.92rem}.status-line,.hint-line{font-size:.92rem;color:#5b647b}.hero-toolbar{grid-template-columns:minmax(0,1fr) auto;align-items:start}.status-block{display:grid;gap:4px}.online-seat-picker{display:grid;gap:10px}.online-seat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:10px}.seat-choice{min-height:0;padding:12px 14px;text-align:left;color:#1d2840;background:color-mix(in srgb,var(--legend-color) 12%,white);box-shadow:none}.seat-choice:hover:enabled{transform:translateY(-1px)}.seat-choice.active{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--legend-color) 64%,white)}.menu-wrap{position:relative;z-index:50}.title-menu-wrap{justify-self:end}.title-actions{display:flex;align-items:center;gap:10px}.menu-button{min-width:52px;padding:0;font-size:1.3rem}.chat-button{position:relative;font-size:1.2rem}.chat-badge{position:absolute;top:-5px;right:-5px;min-width:1.2rem;height:1.2rem;padding:0 .28rem;border-radius:999px;display:grid;place-items:center;background:#e85d3f;color:#fff;font-size:.7rem;font-weight:800;line-height:1;box-shadow:0 6px 12px #e85d3f47}.restart-button{font-size:1.35rem}.back-button{font-size:1.5rem}.menu-panel{position:absolute;top:calc(100% + 10px);right:0;width:min(300px,78vw);padding:14px;border-radius:18px;background:#fffffff7;border:1px solid rgba(29,40,64,.12);box-shadow:0 18px 40px #1d284029;display:grid;gap:10px;z-index:80}.content-grid{margin-top:18px;grid-template-columns:minmax(0,2.1fr) minmax(300px,.9fr);align-items:start}.side-panel-stack{grid-column:2;grid-row:1;display:grid;gap:16px}.board-card{grid-column:1;grid-row:1}.board-card,.status-card{border-radius:24px;padding:18px}.card-header{grid-template-columns:minmax(0,1fr) auto;align-items:center;margin-bottom:18px}.board-info-header{margin-bottom:12px}.dice-panel{grid-template-columns:repeat(3,auto);align-items:center}.start-now-button{white-space:nowrap}.dice-value{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;background:radial-gradient(circle at 30% 28%,rgba(255,255,255,.78),transparent 28%),linear-gradient(145deg,#202d49,#3b537d 68%,#162238);color:#fff;font-size:1.35rem;font-weight:800;box-shadow:inset 0 3px 8px #ffffff2e,inset 0 -8px 16px #0000002e,0 12px 24px #1d28402e;transform-style:preserve-3d}.dice-value.rolling{animation:dice-roll .72s ease-in-out}.board-layout{gap:16px}.board-center{display:grid;gap:16px}.board-waiting-banner{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:6;width:min(78%,420px);padding:14px 18px;border-radius:20px;text-align:center;font-weight:700;color:#33405d;line-height:1.45;background:#ffffffe6;border:1px solid rgba(29,40,64,.12);box-shadow:0 18px 40px #1d28401f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none}.board-turn-banner{position:absolute;inset:50% auto auto 50%;transform:translate(-50%,-50%);z-index:7;padding:12px 18px;border-radius:999px;text-align:center;font-weight:800;color:#27324d;line-height:1.2;background:#ffffffe0;border:1px solid rgba(29,40,64,.12);box-shadow:0 14px 30px #1d28401f;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);pointer-events:none;animation:board-turn-banner 2.6s ease forwards}.board-legend{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.board-legend-side{grid-template-columns:1fr}.legend-chip{border-radius:18px;padding:12px 14px;border:1px solid color-mix(in srgb,var(--legend-color) 24%,white);background:color-mix(in srgb,var(--legend-color) 12%,white);display:grid;gap:4px}.legend-chip span{color:#5c657d;font-size:.88rem}.legend-chip.active{box-shadow:inset 0 0 0 2px color-mix(in srgb,var(--legend-color) 64%,white)}.board-surface{--board-gap: clamp(7px, 1vw, 11px);position:relative;width:min(100%,720px);aspect-ratio:1;margin:0 auto;padding:clamp(18px,2.4vw,28px);border-radius:22px;background:radial-gradient(circle at 20% 18%,rgba(255,255,255,.42),transparent 22%),radial-gradient(circle at 78% 82%,rgba(201,171,70,.18),transparent 26%),linear-gradient(145deg,#fbf4bc,#f4eb9e 46%,#eadf88);border:1px solid rgba(111,92,34,.46);box-shadow:inset 0 2px #ffffff94,inset 0 -8px 18px #aa8c2d2e,0 18px 40px #463c1a2e}.board-grid{position:relative;z-index:2;height:100%;display:grid;grid-template-columns:repeat(11,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));gap:var(--board-gap)}.quadrant,.goal-diamond{position:absolute;z-index:0}.quadrant,.goal-diamond{display:none}.board-empty,.yard-cell,.home-cell,.track-cell,.goal-center,.token-slot,.animated-token-cell{border-radius:50%;display:grid;place-items:center;min-width:0;min-height:0}.center-info{text-align:center;padding:10px 14px 4px}.center-info p{margin-top:8px;color:#57617b;line-height:1.45}.board-empty{border-radius:20px}.yard-cell,.track-cell,.home-cell,.goal-center,.token-slot,.animated-token-cell{aspect-ratio:1}.animated-token-cell{position:absolute;top:calc(var(--token-row) * ((100% - (var(--board-gap) * 10)) / 11 + var(--board-gap)));left:calc(var(--token-column) * ((100% - (var(--board-gap) * 10)) / 11 + var(--board-gap)));width:calc((100% - (var(--board-gap) * 10)) / 11);height:calc((100% - (var(--board-gap) * 10)) / 11);z-index:4;pointer-events:none}.yard-cell,.track-cell{background:radial-gradient(circle at 34% 30%,#fffffff5,#fffffff0 52%,#e2e7f2fa);border:2px solid rgba(112,120,141,.72);box-shadow:inset 0 2px 3px #ffffffeb,inset 0 -4px 7px #737e9829,0 2px 4px #4d576f14}.yard-cell{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,white 34%,var(--cell-color)) 0%,var(--cell-color) 64%,color-mix(in srgb,black 10%,var(--cell-color)) 100%);border-color:color-mix(in srgb,black 24%,var(--cell-color));box-shadow:inset 0 1px 2px color-mix(in srgb,white 58%,var(--cell-color)),inset 0 -2px 4px color-mix(in srgb,black 10%,var(--cell-color)),0 1px 3px #40342114}.track-cell.start-cell,.home-cell{background:radial-gradient(circle at 34% 30%,color-mix(in srgb,white 34%,var(--cell-color)) 0%,var(--cell-color) 62%,color-mix(in srgb,black 10%,var(--cell-color)) 100%);box-shadow:inset 0 1px 2px color-mix(in srgb,white 58%,var(--cell-color)),inset 0 -2px 4px color-mix(in srgb,black 10%,var(--cell-color)),0 1px 3px #40342114}.home-cell{border:2px solid color-mix(in srgb,black 22%,var(--cell-color))}.goal-center{background:transparent}.token-slot{background:transparent;border:0;overflow:visible}.token{--token-rest-y: -15%;position:relative;width:160%;height:198%;min-height:0;border:0;background:transparent;box-shadow:none;padding:0;display:grid;place-items:center;overflow:visible;transform:translateY(var(--token-rest-y));z-index:3}.game-pawn-svg{width:100%;height:100%;overflow:visible;filter:drop-shadow(0 5px 8px rgba(24,20,18,.14))}.game-pawn-floor-shadow{opacity:1}.game-pawn-body,.game-pawn-head,.game-pawn-collar{stroke:#56181857;stroke-linejoin:round}.game-pawn-body,.game-pawn-head{stroke-width:1.6}.game-pawn-collar{stroke-width:1.2}.game-pawn-rim,.game-pawn-head-rim{stroke:#ffffff24;stroke-width:1}.token-badge{display:none}.token.movable{animation:token-idle-hop .9s ease-in-out infinite}.token:disabled{opacity:1;box-shadow:none}.moving-overlay{pointer-events:none;will-change:transform}.token.jumping{animation:token-jump .18s cubic-bezier(.2,.72,.25,1)}.token.captured{animation:token-capture .24s cubic-bezier(.22,.7,.2,1)}@keyframes token-idle-hop{0%{transform:translateY(var(--token-rest-y)) scale(1)}22%{transform:translateY(calc(var(--token-rest-y) - 8px)) scale(1.01)}48%{transform:translateY(calc(var(--token-rest-y) - 16px)) scale(1.03)}72%{transform:translateY(calc(var(--token-rest-y) - 6px)) scale(.99)}to{transform:translateY(var(--token-rest-y)) scale(1)}}@keyframes dice-roll{0%{transform:rotateX(0) rotateY(0) scale(1)}35%{transform:rotateX(180deg) rotateY(140deg) scale(1.08)}70%{transform:rotateX(320deg) rotateY(300deg) scale(.96)}to{transform:rotateX(360deg) rotateY(360deg) scale(1)}}@keyframes token-jump{0%{transform:translateY(0) scale(1) rotate(0)}22%{transform:translateY(-18px) scale(1.03) rotate(-5deg)}48%{transform:translateY(-34px) scale(1.08) rotate(4deg)}76%{transform:translateY(-10px) scale(.98) rotate(-2deg)}to{transform:translateY(0) scale(1) rotate(0)}}@keyframes token-capture{0%{transform:translateY(0) scale(1) rotate(0);opacity:1}38%{transform:translateY(-14px) scale(1.08) rotate(-10deg);opacity:1}to{transform:translateY(8px) scale(.82) rotate(22deg);opacity:.76}}@keyframes board-turn-banner{0%{opacity:0;transform:translate(-50%,calc(-50% + 12px)) scale(.96)}12%{opacity:1;transform:translate(-50%,-50%) scale(1)}76%{opacity:1;transform:translate(-50%,-50%) scale(1)}to{opacity:0;transform:translate(-50%,calc(-50% - 10px)) scale(1.02)}}.player-pill{border-left:4px solid var(--pill-color);padding:10px 12px;border-radius:14px;background:#f3f6fce6;display:grid;gap:3px}.player-pill.current{background:color-mix(in srgb,var(--pill-color) 12%,white)}.history-list,.chat-list{max-height:240px;overflow:auto}.history-item,.chat-item{border-radius:14px;background:#f3f6fcf0;padding:10px 12px;line-height:1.4}.chat-item{display:grid;gap:4px}.chat-item small{color:#6f7891}.chat-meta{display:flex;align-items:center;justify-content:space-between;gap:10px}.chat-receipt{font-weight:800;letter-spacing:-.06em;color:#7e889f}.chat-receipt.all-read{color:#2f6edb}.chat-form{grid-template-columns:minmax(0,1fr) auto}.emoji-row{display:flex;flex-wrap:wrap;gap:8px}.emoji-button{min-width:44px;padding:0 10px;font-size:1.2rem;line-height:1}.modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;z-index:120;display:grid;place-items:center;padding:18px;background:#10162470;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.modal-card{width:min(460px,100%);border-radius:24px;padding:22px;display:grid;gap:14px;text-align:center}.modal-card p{color:#57617b;line-height:1.5}.chat-modal{width:min(560px,100%);text-align:left}.chat-modal-header{display:flex;align-items:start;justify-content:space-between;gap:12px}.chat-close-button{min-width:44px;min-height:44px;font-size:1.5rem;line-height:1}.chat-modal .chat-list{max-height:min(52vh,420px)}.modal-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.secondary-button{background:#f3f6fcfa;color:#1d2840;border:1px solid rgba(29,40,64,.12);box-shadow:0 10px 22px #1d284014}@media (max-width: 1080px){.content-grid{grid-template-columns:1fr}.side-panel-stack,.game-info-card,.board-card,.history-card{grid-column:auto;grid-row:auto}.board-legend,.board-legend-side{grid-template-columns:repeat(2,minmax(0,1fr))}.online-actions{grid-template-columns:1fr}}@media (max-width: 720px){.app-shell{padding:12px 12px 24px}.hero-card,.board-card,.status-card,.welcome-card{border-radius:20px;padding:14px}.mode-switches,.chat-form{grid-template-columns:1fr}.public-room-header{flex-direction:column;align-items:stretch}.local-player-row,.hero-toolbar,.card-header{grid-template-columns:1fr}.board-info-header{gap:14px}.content-grid{grid-template-columns:1fr}.side-panel-stack{display:contents}.game-info-card{order:1}.board-card{order:2}.history-card{order:3}.dice-panel{grid-template-columns:repeat(3,auto);justify-content:start;align-items:center;overflow:hidden}.track-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.board-surface{border-radius:8px;padding:12px}.board-grid{gap:5px}.board-surface{--board-gap: 5px}.legend-chip{padding:10px 12px}.token{--token-rest-y: -17%;width:164%;height:202%;min-height:0;transform:translateY(var(--token-rest-y))}.token-badge{display:none}.modal-actions{grid-template-columns:1fr}}