:root{color:#183153;font-synthesis:none;--teal:#087f8c;--teal-bright:#12b8a6;--teal-dark:#086273;--cream:#fffdf4;--navy:#183153;--line:#d7e7e8;--yellow:#ffc94a;--red:#ff6b6b;background:#eafafa;font-family:Inter,ui-rounded,PingFang SC,Microsoft YaHei,system-ui,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%}body{background:radial-gradient(circle at 12% 16%,#fffffff2 0 4%,#0000 4.3%),radial-gradient(circle at 92% 8%,#fffc 0 6%,#0000 6.3%),linear-gradient(155deg,#e8fbf8 0%,#eef8ff 50%,#fff9e9 100%);min-width:320px;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:wait;opacity:.65}button:focus-visible,input:focus-visible{outline-offset:2px;outline:4px solid #ffc94a8c}.sr-only{clip:rect(0,0,0,0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.eyebrow{color:var(--teal);letter-spacing:.16em;text-transform:uppercase;font-size:.72rem;font-weight:900}.panel{background:#fffdf4f0;border:2px solid #ffffffe6;border-radius:28px;padding:32px;box-shadow:0 22px 60px #1831531f,0 4px #0862731a}.auth-layout{grid-template-columns:minmax(300px,1fr) minmax(340px,500px);align-items:center;gap:clamp(32px,7vw,110px);max-width:1180px;min-height:100vh;margin:auto;padding:42px 28px;display:grid}.welcome-copy{padding:28px}.welcome-copy h1{letter-spacing:-.06em;max-width:680px;margin:12px 0 24px;font-size:clamp(3rem,7vw,6rem);line-height:.93}.welcome-copy>p:not(.eyebrow){color:#587187;max-width:500px;font-size:1.15rem;line-height:1.8}.brand-mark{color:#fff;background:var(--teal-bright);width:76px;height:76px;box-shadow:0 9px 0 var(--teal-dark), 0 18px 32px #087f8c33;border-radius:25px;place-items:center;font-size:2.4rem;display:grid;transform:rotate(-8deg)}.sky-route{color:#b9dce1;align-items:center;gap:14px;margin-top:48px;font-size:2.4rem;display:flex}.sky-route b{letter-spacing:.4em;color:var(--teal-bright);font-size:1rem}.auth-card{width:100%}.auth-card h2{margin:26px 0 22px;font-size:1.55rem}.auth-tabs{background:#e7f3f2;border-radius:16px;grid-template-columns:1fr 1fr;gap:8px;padding:6px;display:grid}.auth-tabs button{color:#708292;background:0 0;border:0;border-radius:11px;padding:11px;font-weight:900}.auth-tabs button.active{color:var(--teal-dark);background:#fff;box-shadow:0 3px 10px #18315314}.auth-card form{gap:17px;display:grid}.auth-card label{color:#52697d;gap:8px;font-size:.88rem;font-weight:850;display:grid}input{border:2px solid var(--line);width:100%;color:var(--navy);background:#fff;border-radius:15px;padding:14px 16px;transition:border-color .18s,box-shadow .18s}input:focus{border-color:var(--teal-bright);outline:none;box-shadow:0 0 0 4px #12b8a61c}fieldset{border:0;min-width:0;padding:0}legend{color:#52697d;margin-bottom:10px;font-size:.88rem;font-weight:850}.avatar-grid{grid-template-columns:repeat(6,1fr);gap:8px;display:grid}.avatar-grid label{aspect-ratio:1;border:2px solid var(--line);cursor:pointer;background:#fff;border-radius:14px;place-items:center;font-size:1.55rem;transition:transform .16s,border-color .16s;display:grid;position:relative}.avatar-grid label:hover{transform:translateY(-2px)}.avatar-grid label.selected{border-color:var(--teal-bright);background:#e6faf6;box-shadow:0 3px #9ddbd4}.avatar-grid input{opacity:0;pointer-events:none;position:absolute}.primary,.secondary,.dark{border:0;border-radius:15px;min-height:48px;padding:12px 20px;font-weight:950;transition:transform .12s,box-shadow .12s}.primary{color:#fff;background:var(--teal-bright);box-shadow:0 5px 0 var(--teal-dark)}.secondary{color:var(--teal-dark);background:#e3f8f4;box-shadow:0 5px #acdcd5}.dark{color:#fff;background:var(--navy);box-shadow:0 5px #0d1e35}.primary:active,.secondary:active,.dark:active{transform:translateY(4px);box-shadow:0 1px #00000040}.wide{width:100%;margin-top:3px}.field-error,.form-error{color:#c3404b;font-weight:750}.form-error{background:#fff0f0;border-radius:12px;margin:0;padding:11px 14px;font-size:.88rem}.app-shell{max-width:1180px;margin:auto;padding:24px 28px 60px}.topbar{justify-content:space-between;align-items:center;gap:20px;padding:8px 0 34px;display:flex}.logo{color:var(--navy);font-size:1.16rem;font-weight:950;text-decoration:none}.logo span{color:#fff;background:var(--teal-bright);width:38px;height:38px;box-shadow:0 4px 0 var(--teal-dark);border-radius:12px;place-items:center;margin-right:8px;display:inline-grid}.profile-chip{background:#ffffffb8;border:1px solid #fff;border-radius:999px;align-items:center;gap:10px;padding:6px 7px;display:flex;box-shadow:0 6px 18px #18315314}.profile-chip button{color:#6c8091;background:#edf4f4;border:0;border-radius:999px;padding:7px 11px;font-weight:800}.avatar{background:var(--yellow);border:3px solid #fff;border-radius:50%;place-items:center;width:42px;height:42px;font-size:1.35rem;display:inline-grid;box-shadow:0 3px #d9a62c}.avatar-large{border-width:7px;width:116px;height:116px;font-size:4rem;animation:3s ease-in-out infinite hover;box-shadow:0 9px #d9a62c,0 22px 40px #18315324}.home-hero{color:#fff;background:linear-gradient(135deg,#087f8c,#12b8a6);border-radius:32px;justify-content:space-between;align-items:center;gap:24px;padding:38px clamp(24px,5vw,62px);display:flex;overflow:hidden;box-shadow:0 9px #086273,0 25px 48px #08627338}.home-hero .eyebrow{color:#b9fff2}.home-hero h1{letter-spacing:-.045em;margin:8px 0;font-size:clamp(2rem,5vw,3.7rem)}.home-hero p:last-child{color:#dcfff9;margin-bottom:0}.mode-grid{grid-template-columns:1.12fr 1fr 1fr;gap:20px;margin-top:34px;display:grid}.mode-card{background:#ffffffdb;border:2px solid #fff;border-radius:27px;flex-direction:column;min-height:335px;padding:28px;display:flex;position:relative;overflow:hidden;box-shadow:0 7px #c9dddd,0 22px 38px #18315314}.mode-card:after{content:"";background:#12b8a614;border-radius:50%;width:130px;height:130px;position:absolute;top:-55px;right:-48px}.mode-card small{color:var(--teal);letter-spacing:.12em;font-weight:900}.mode-card h2{margin:8px 0 9px;font-size:1.55rem}.mode-card p{color:#6b7f90;flex:1;margin-top:0;line-height:1.65}.mode-card button{width:100%}.mode-icon{margin-bottom:18px;font-size:2.6rem}.button-row{grid-template-columns:1fr 1fr;gap:10px;display:grid}.code-input{margin-bottom:10px}.code-input input{text-align:center;text-transform:uppercase;letter-spacing:.25em;font-size:1.1rem;font-weight:950}.toast{z-index:5;color:#fff;background:#c3404b;border-radius:14px;align-items:center;gap:18px;padding:13px 18px;display:flex;position:fixed;top:18px;left:50%;transform:translate(-50%);box-shadow:0 10px 30px #50141438}.toast button{color:#fff;background:0 0;border:0;font-size:1.2rem}.center-page,.loading{text-align:center;place-items:center;min-height:100vh;padding:24px;display:grid}.center-page .panel{width:min(520px,100%)}.waiting-card{justify-items:center;gap:14px;display:grid}.waiting-card h1{margin:0}.radar{color:#fff;background:repeating-radial-gradient(circle, var(--teal-bright) 0 12px, #55cfc2 13px 14px);border-radius:50%;place-items:center;width:105px;height:105px;font-size:2.4rem;animation:2.2s ease-in-out infinite hover;display:grid}.room-code{letter-spacing:.28em;color:var(--teal-dark);background:#effbf8;border:2px dashed #b1d9d7;border-radius:15px;padding:12px 20px;font-size:2rem}.link-button{color:#718392;background:0 0;border:0;font-weight:800}.loading span{font-size:3rem;animation:1.4s ease-in-out infinite flyby}.game-page{min-height:100vh;padding:18px clamp(14px,3vw,40px) 40px}.game-topbar{grid-template-columns:1fr auto 1fr;align-items:center;gap:12px;max-width:1180px;margin:0 auto 18px;display:grid}.game-topbar>strong{letter-spacing:.08em;font-size:.9rem}.back-button{color:var(--navy);background:#ffffffbf;border:0;border-radius:12px;justify-self:start;padding:10px 14px;font-weight:900}.online-dot{color:#78909d;justify-self:end;font-size:.76rem;font-weight:850}.online-dot:before{content:"";background:#b8c4ca;border-radius:50%;width:8px;height:8px;margin-right:6px;display:inline-block}.online-dot.on:before{background:#2bc98b;box-shadow:0 0 0 4px #2bc98b24}.game-layout{grid-template-columns:minmax(0,780px) minmax(285px,350px);justify-content:center;align-items:center;gap:clamp(20px,3vw,42px);max-width:1180px;margin:auto;display:grid}.board-wrap{aspect-ratio:1;background:#ffffffa6;border:2px solid #fffffff2;border-radius:32px;width:min(100%,780px);padding:10px;position:relative;overflow:hidden;box-shadow:0 10px #bfd5d7,0 26px 60px #18315326}.board-svg{filter:drop-shadow(0 2px 1px #1831530a);width:100%;height:100%;display:block}.board-bg{fill:#fffdf5}.base-zone{stroke:#ffffffe6;stroke-width:.14px}.red-zone{fill:#ffe2e1}.blue-zone{fill:#dff4ff}.ghost-zone{fill:#f0f4e8;opacity:.65}.path-cell{fill:#fff;stroke:#dce7e8;stroke-width:.045px}.safe-cell{fill:#fff7d2}.blue-start{fill:#83d7ff}.red-start{fill:#ff9d9d}.safe-star{fill:#e7b839;text-anchor:middle;font-size:.43px;font-weight:900}.home-cell{stroke:#fff;stroke-width:.06px}.blue-home{fill:#83d7ff}.red-home{fill:#ff9d9d}.finish-zone{fill:#f7ead3;stroke:#fff;stroke-width:.1px}.finish-red{fill:#ff9d9d}.finish-blue{fill:#83d7ff}.finish-plane{fill:#fff;text-anchor:middle;font-size:1.05px;font-weight:900}.plane-token{--token-color:#45b9ee;z-index:2;left:var(--token-x);top:var(--token-y);aspect-ratio:1;color:#fff;background:var(--token-color);width:clamp(22px,4.1vw,42px);box-shadow:0 4px 0 color-mix(in srgb, var(--token-color), #17334d 28%), 0 7px 12px #18315329;border:3px solid #fff;border-radius:50% 50% 46% 54%;place-items:center;padding:0;font-size:clamp(.72rem,1.7vw,1.15rem);transition:filter .15s;display:grid;position:absolute;transform:translate(-50%,-55%)rotate(-12deg)}.plane-token.player-1{--token-color:#ff6b6b;transform:translate(-50%,-55%)rotate(168deg)}.plane-token:disabled{opacity:1;cursor:default}.plane-token.selectable{z-index:4;cursor:pointer;filter:drop-shadow(0 0 8px var(--yellow));animation:1s ease-in-out infinite token-ready}.plane-token.moving{animation:.32s ease-out token-hop}.board-hit{animation:.32s ease-out board-hit}.board-hit:after{content:"✦  ✧  ✦";z-index:6;color:var(--yellow);text-shadow:0 3px #d89b22;pointer-events:none;font-size:clamp(2rem,7vw,5rem);animation:.55s ease-out forwards capture-stars;position:absolute;top:50%;left:50%}.game-panel{flex-direction:column;gap:17px;padding:23px;display:flex}.players-strip{gap:9px;display:grid}.player-badge{background:#f2f6f5;border:2px solid #0000;border-radius:16px;grid-template-columns:auto 1fr auto;align-items:center;gap:10px;padding:10px;transition:border-color .2s,transform .2s;display:grid}.player-badge.active{border-color:var(--teal-bright);background:#e8faf6;transform:translate(-4px)}.player-badge div{min-width:0;display:grid}.player-badge small{color:#78909d;font-size:.66rem;font-weight:850}.player-badge strong{text-overflow:ellipsis;overflow:hidden}.player-badge>b{color:var(--teal);font-size:.82rem}.turn-card{text-align:center;background:#eff9f7;border-radius:17px;place-items:center;min-height:66px;padding:13px;display:grid}.turn-card p{margin:0;font-weight:950}.turn-card.thinking{grid-template-columns:auto auto;gap:10px}.thinking-dots{gap:4px;display:flex}.thinking-dots i{background:var(--teal-bright);border-radius:50%;width:7px;height:7px;animation:1s ease-in-out infinite dots}.thinking-dots i:nth-child(2){animation-delay:.14s}.thinking-dots i:nth-child(3){animation-delay:.28s}.dice{background:#fff;border:3px solid #e6eeee;border-radius:25px;place-items:center;width:96px;height:96px;margin:0 auto;font-size:3.8rem;line-height:1;display:grid;box-shadow:0 8px #d2dfdf,0 16px 25px #1831531a}.dice.rolled{animation:.58s cubic-bezier(.2,.9,.2,1) dice-roll}.roll-button{min-height:55px;font-size:1.05rem}.game-hint{color:#7b8f9d;text-align:center;margin:-3px 0 0;font-size:.76rem}.game-log{background:#f4f8f7;border-radius:16px;gap:7px;padding:12px 14px;display:grid}.game-log>strong{font-size:.78rem}.game-log ol{gap:5px;max-height:145px;margin:0;padding:0;list-style:none;display:grid;overflow-y:auto}.game-log li{color:#52697d;opacity:calc(1 - var(--log-age) * .07);font-size:.72rem;line-height:1.35}.connection-banner{z-index:20;color:#fff;background:#d8902f;border-radius:999px;padding:10px 16px;font-size:.8rem;font-weight:900;position:fixed;top:12px;left:50%;transform:translate(-50%);box-shadow:0 7px 22px #50320a33}.seats{grid-template-columns:1fr 1fr;gap:12px;width:100%;display:grid}.seat{color:#91a2ad;background:#f4f8f7;border:2px dashed #c8dadd;border-radius:18px;align-content:center;place-items:center;gap:6px;min-height:105px;display:grid}.seat.filled{color:var(--navy);background:#eafaf6;border-style:solid;border-color:#bce4dc}.victory-layer{z-index:30;text-align:center;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#0f25398c;place-items:center;padding:20px;display:grid;position:fixed;inset:0}.victory-layer .panel{width:min(430px,100%);animation:.45s cubic-bezier(.2,1.3,.3,1) victory-pop}.victory-layer h1{margin:10px 0;font-size:2rem}.victory-layer .link-button{margin-top:14px}.trophy{font-size:4rem}.confetti{color:var(--yellow);word-spacing:12vw;font-size:2rem;animation:1.2s ease-in-out infinite alternate confetti;position:absolute;inset:10% 0 auto}.missing-room{justify-items:center;gap:10px;display:grid}.missing-room>span{font-size:4rem}.missing-room h1,.missing-room p{margin:0}.missing-room p:not(.eyebrow){color:#6b7f90;line-height:1.6}@keyframes token-ready{50%{transform:translate(-50%,-68%)rotate(-8deg)scale(1.08)}}@keyframes token-hop{50%{margin-top:-12px;transform:translate(-50%,-55%)rotate(-2deg)scale(1.12)}}@keyframes board-hit{25%{transform:translate(-5px)}55%{transform:translate(5px)}}@keyframes capture-stars{0%{opacity:0;transform:translate(-50%,-40%)scale(.3)rotate(-20deg)}45%{opacity:1}to{opacity:0;transform:translate(-50%,-100%)scale(1.35)rotate(12deg)}}@keyframes dice-roll{0%{transform:rotate(-25deg)scale(.75)}55%{transform:rotate(390deg)scale(1.15)}to{transform:rotate(360deg)scale(1)}}@keyframes dots{50%{opacity:.45;transform:translateY(-5px)}}@keyframes victory-pop{0%{opacity:0;transform:scale(.65)translateY(40px)}}@keyframes confetti{to{transform:translateY(40vh)rotate(10deg)}}@keyframes hover{50%{transform:translateY(-7px)rotate(2deg)}}@keyframes flyby{50%{transform:translate(18px)rotate(-8deg)}}@media (width<=800px){.auth-layout{grid-template-columns:1fr;padding:22px 16px 38px}.welcome-copy{text-align:center;padding:12px 8px}.welcome-copy h1{margin:10px 0 12px;font-size:3.25rem}.welcome-copy>p:not(.eyebrow),.sky-route{display:none}.brand-mark{border-radius:19px;width:58px;height:58px;margin:auto;font-size:1.8rem}.auth-card{border-radius:23px;padding:22px 18px}.app-shell{padding:16px 14px 40px}.topbar{padding-bottom:22px}.logo{font-size:0}.logo span{margin:0;font-size:1rem}.profile-chip strong{text-overflow:ellipsis;max-width:100px;overflow:hidden}.home-hero{border-radius:25px;padding:26px 22px}.home-hero .avatar-large{border-width:5px;width:78px;height:78px;font-size:2.5rem}.home-hero h1{font-size:1.8rem}.mode-grid{grid-template-columns:1fr;gap:16px;margin-top:27px}.mode-card{min-height:0;padding:23px}.mode-card p{min-height:52px}.game-page{padding:10px 8px calc(18px + env(safe-area-inset-bottom))}.game-topbar{margin-bottom:10px;padding:0 5px}.game-layout{grid-template-columns:1fr;gap:14px}.board-wrap{border-radius:21px;width:min(100%,620px);margin:auto;padding:5px;box-shadow:0 6px #bfd5d7,0 15px 35px #18315324}.game-panel{bottom:max(6px, env(safe-area-inset-bottom));z-index:8;border-radius:22px;grid-template-columns:1fr 76px;gap:9px 12px;padding:12px;display:grid;position:sticky}.players-strip{grid-column:1/-1;grid-template-columns:1fr 1fr}.player-badge{grid-template-columns:auto 1fr;padding:6px}.player-badge>b{display:none}.player-badge .avatar{width:34px;height:34px;font-size:1rem}.turn-card{min-height:50px}.dice{border-radius:18px;grid-area:2/2/4;width:70px;height:70px;font-size:2.7rem;box-shadow:0 5px #d2dfdf}.roll-button{grid-column:1;min-height:48px}.game-hint{grid-column:1}.game-log{grid-column:1/-1}.game-log ol{max-height:95px}.game-panel .form-error{grid-column:1/-1}.plane-token{border-width:2px;width:clamp(19px,6.2vw,32px)}}@media (prefers-reduced-motion:reduce){*,:before,:after{scroll-behavior:auto!important;transition-duration:1ms!important;animation-duration:1ms!important;animation-iteration-count:1!important}}