:root {
  --ink: #24324a;
  --muted: #718096;
  --cream: #fff8eb;
  --card: rgba(255,255,255,.93);
  --orange: #ff7a45;
  --orange-dark: #e95d2a;
  --blue: #55b9ef;
  --shadow: 0 20px 60px rgba(61, 78, 104, .16);
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body {
  margin: 0;
  color: var(--ink);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  background:
    radial-gradient(circle at 12% 15%, rgba(255,213,79,.22) 0 4px, transparent 5px),
    radial-gradient(circle at 89% 22%, rgba(85,185,239,.18) 0 5px, transparent 6px),
    linear-gradient(160deg, #fff8e8 0%, #eaf8ff 54%, #fff2ec 100%);
  overflow-x: hidden;
}
button, input { font: inherit; }
button { cursor: pointer; }
.hidden { display: none !important; }

.game-shell { width: min(1380px, 100%); margin: 0 auto; padding: 22px 28px 42px; position: relative; z-index: 2; }
.game-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.logo { color: var(--ink); display: flex; align-items: center; gap: 11px; text-decoration: none; }
.logo-mark { width: 52px; height: 52px; display: grid; place-items: center; background: #fff; border: 2px solid #fff; border-radius: 17px; font-size: 29px; box-shadow: 0 8px 22px rgba(58,70,90,.14); transform: rotate(-5deg); }
.logo strong { display: block; font-size: 23px; letter-spacing: .04em; }
.logo small { color: #8b98aa; display: block; font: 700 9px/1.5 Arial,sans-serif; letter-spacing: .19em; }
.room-chip { display: flex; align-items: center; gap: 9px; padding: 8px 9px 8px 15px; background: rgba(255,255,255,.84); border: 1px solid rgba(255,255,255,.9); border-radius: 18px; box-shadow: 0 8px 24px rgba(58,70,90,.09); }
.room-chip span { color: var(--muted); font-size: 13px; }
.room-chip strong { letter-spacing: .16em; font: 800 17px/1 Arial,sans-serif; }
.room-chip button { color: #fff; background: #5ba5d4; border: 0; border-radius: 11px; padding: 8px 12px; font-weight: 700; font-size: 12px; }
.room-chip .sound-toggle { width:34px;height:34px;padding:0;display:grid;place-items:center;color:#53647b;background:#fff7dc;font-size:17px;box-shadow:inset 0 0 0 1px rgba(232,188,70,.18); }
.room-chip .leave-button { color:#a74e4e; background:#fff0f0; }

.play-layout { display: grid; grid-template-columns: minmax(500px, 1fr) 310px; gap: 24px; align-items: start; }
.board-wrap { min-width: 0; }
.board-topline { min-height: 28px; display: flex; justify-content: space-between; align-items: center; margin: 0 4px 7px; color: var(--muted); font-size: 12px; }
.finish-flag { font-weight: 700; color: #59677c; }
.connection-state::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: #f5b942; margin-right: 6px; }
.connection-state.online::before { background: #48bf84; }
.board { position: relative; width: 100%; aspect-ratio: 1; isolation: isolate; overflow: hidden; border: 8px solid rgba(255,255,255,.95); border-radius: 28px; background: #fff; box-shadow: var(--shadow), 0 0 0 1px rgba(71,94,123,.07); }
.cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(10,1fr); grid-template-rows: repeat(10,1fr); }
.cell { position:relative; color:rgba(30,48,72,.82); font:800 clamp(9px,1.15vw,16px)/1 Arial,sans-serif; border:1px solid rgba(255,255,255,.48); }
.cell.tone-0 { background: #ffe26f; }
.cell.tone-1 { background: #d9f6ed; }
.cell.tone-2 { background: #ffcddd; }
.cell.tone-3 { background: #bdb1ee; }
.cell.tone-4 { background: #86dcc5; }
.cell.goal { background: #ff9478; color: #fff; }
.cell.start { background: #80d6a9; color: #fff; }
.cell span { position:absolute; z-index:8; text-shadow:0 1px rgba(255,255,255,.65),0 0 4px rgba(255,255,255,.98); transition:left .24s,top .24s,right .24s,bottom .24s; }
.cell.label-tl span { left:7%;top:7%; }
.cell.label-tr span { right:7%;top:7%; }
.cell.label-bl span { left:7%;bottom:7%; }
.cell.label-br span { right:7%;bottom:7%; }
.paths { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.paths-back { z-index: 2; }
.paths-front { z-index: 4; }
.ladder-rail { stroke: #303551; stroke-width: 1.5; stroke-linecap: round; filter: drop-shadow(0 .65px .4px rgba(0,0,0,.3)); }
.ladder-rung { stroke: #747bdd; stroke-width: 1.35; stroke-linecap: round; filter: drop-shadow(0 .35px .2px rgba(0,0,0,.18)); }
.snake-body { fill: none; stroke-width: 3.45; stroke-linecap: round; filter: drop-shadow(0 .75px .5px rgba(0,0,0,.25)); }
.snake-pattern { fill: none; stroke: rgba(255,232,129,.9); stroke-width: 1.05; stroke-dasharray: .45 3; stroke-linecap: round; }
.snake-head { stroke: rgba(32,47,67,.15); stroke-width: .25; }
.snake-eye { fill: #fff; }
.snake-pupil { fill: #27364c; }
.model-car { --model-x:0%;--model-y:0%;--model-shift:0%; }
.model-pawn { --model-x:33.333%;--model-y:0%;--model-shift:0%; }
.model-crown { --model-x:66.667%;--model-y:0%;--model-shift:0%; }
.model-rocket { --model-x:100%;--model-y:0%;--model-shift:0%; }
.model-panda { --model-x:0%;--model-y:100%;--model-shift:18%; }
.model-unicorn { --model-x:33.333%;--model-y:100%;--model-shift:18%; }
.model-train { --model-x:66.667%;--model-y:100%;--model-shift:18%; }
.model-ufo { --model-x:100%;--model-y:100%;--model-shift:18%; }
.piece-symbol,.piece-option span,.player-avatar { background-image:url("/game-static/pieces-3d-cute-small-base-v4.png");background-size:400% 200%;background-position:var(--model-x) var(--model-y);background-repeat:no-repeat; }
.pieces { position: absolute; inset: 0; z-index: 6; pointer-events: none; }
.piece { --piece-speed:280ms; position:absolute; left:0; top:0; z-index:1; isolation:isolate; width:clamp(40px,5.2vw,64px); aspect-ratio:3/4; transform:translate(-50%,-89%) translateY(var(--model-shift)); transition:left var(--piece-speed) cubic-bezier(.22,.72,.28,1),top var(--piece-speed) cubic-bezier(.22,.72,.28,1); will-change:left,top; }
.piece-symbol { position:absolute; z-index:2; inset:0; filter:drop-shadow(0 2px 1px rgba(255,255,255,.45)) drop-shadow(5px 9px 5px rgba(25,35,50,.38)); }
.piece-shadow { position:absolute; z-index:1; left:55%; bottom:5%; width:76%; height:8%; transform:translateX(-42%) skewX(-25deg); border-radius:50%; background:rgba(25,36,52,.31); filter:blur(4px); }
.piece.me .piece-symbol { filter:drop-shadow(0 0 3px #fff) drop-shadow(0 0 5px rgba(255,255,255,.9)) drop-shadow(5px 9px 5px rgba(25,35,50,.4)); }

.control-panel { display: grid; gap: 13px; position: sticky; top: 18px; }
.turn-card,.players-card,.rules-card { background: var(--card); border: 1px solid rgba(255,255,255,.96); border-radius: 24px; box-shadow: 0 12px 36px rgba(61,78,104,.11); }
.turn-card { padding:24px; display:flex; flex-direction:column; align-items:stretch; text-align:center; overflow:hidden; position:relative; }
.turn-card::before { content:""; position:absolute; width:120px; height:120px; border-radius:50%; background:#ffefc5; top:-75px; right:-45px; }
.eyebrow { margin: 0 0 7px; color: #8b98a9; text-transform: uppercase; font: 800 10px/1.4 Arial,sans-serif; letter-spacing: .18em; }
.turn-player { min-height: 30px; font-size: 22px; font-weight: 900; }
.turn-player .dot { display:inline-block; width:12px; height:12px; border-radius:50%; margin-right:8px; box-shadow: inset 0 -2px rgba(0,0,0,.12); }
.dice-stage { height: 112px; display: grid; place-items: center; perspective: 700px; position:relative; }
.dice-stage::after { content:""; position:absolute; z-index:-1; width:58px; height:15px; bottom:12px; border-radius:50%; background:rgba(44,58,78,.17); filter:blur(6px); transform:scale(1); transition:.25s; }
.dice-stage:has(.dice.rolling)::after { animation:dice-shadow .92s ease-in-out; }
.dice { width: 76px; height: 76px; padding: 12px; background: #fff; border-radius: 19px; box-shadow: 0 13px 24px rgba(45,60,82,.2), inset 0 -6px #edf0f5; display: grid; grid-template: repeat(3,1fr)/repeat(3,1fr); transform: rotate(-5deg); transform-style:preserve-3d; backface-visibility:visible; transition:transform .2s; will-change:transform; }
.dice.rolling { animation: dice-tumble .92s cubic-bezier(.3,.1,.25,1); }
.dice.landed { animation:dice-land .22s ease-out; }
@keyframes dice-tumble {
  0% { transform:translateY(0) rotateX(0) rotateY(0) rotateZ(-5deg) scale(1); }
  18% { transform:translateY(-19px) rotateX(105deg) rotateY(70deg) rotateZ(45deg) scale(.92); }
  43% { transform:translateY(-7px) rotateX(245deg) rotateY(205deg) rotateZ(135deg) scale(1.06); }
  68% { transform:translateY(-23px) rotateX(430deg) rotateY(365deg) rotateZ(245deg) scale(.88); }
  100% { transform:translateY(0) rotateX(720deg) rotateY(540deg) rotateZ(355deg) scale(1); }
}
@keyframes dice-land { 0%{transform:rotate(-5deg) scale(1.16)} 58%{transform:rotate(-5deg) scale(.9)} 100%{transform:rotate(-5deg) scale(1)} }
@keyframes dice-shadow { 0%,100%{transform:scale(1);opacity:.7} 30%,72%{transform:scale(.55);opacity:.3} }
.dice i { width: 12px; height: 12px; align-self:center; justify-self:center; border-radius:50%; background:#33445e; opacity:0; box-shadow: inset 0 2px rgba(0,0,0,.18); }
.dice.face-1 i:nth-child(5),
.dice.face-2 i:nth-child(1),.dice.face-2 i:nth-child(9),
.dice.face-3 i:nth-child(1),.dice.face-3 i:nth-child(5),.dice.face-3 i:nth-child(9),
.dice.face-4 i:nth-child(1),.dice.face-4 i:nth-child(3),.dice.face-4 i:nth-child(7),.dice.face-4 i:nth-child(9),
.dice.face-5 i:nth-child(1),.dice.face-5 i:nth-child(3),.dice.face-5 i:nth-child(5),.dice.face-5 i:nth-child(7),.dice.face-5 i:nth-child(9),
.dice.face-6 i:nth-child(1),.dice.face-6 i:nth-child(3),.dice.face-6 i:nth-child(4),.dice.face-6 i:nth-child(6),.dice.face-6 i:nth-child(7),.dice.face-6 i:nth-child(9) { opacity:1; }
.primary-button,.secondary-button { border: 0; border-radius: 15px; min-height: 48px; padding: 11px 20px; font-weight: 900; transition: transform .16s, box-shadow .16s, opacity .16s; }
.primary-button { color:#fff; background: linear-gradient(135deg,#ff8b50,#ff6844); box-shadow: 0 8px 17px rgba(255,105,68,.28); }
.primary-button:hover:not(:disabled),.secondary-button:hover { transform: translateY(-2px); }
.primary-button:disabled { opacity:.4; cursor:not-allowed; box-shadow:none; }
.roll-button { position:relative; width:100%; min-width:0; min-height:56px; display:grid; place-items:center; padding-left:76px; padding-right:76px; }
.roll-button span { font-size:17px; line-height:1; white-space:nowrap; }
.roll-button small { position:absolute; right:17px; top:50%; transform:translateY(-50%); padding-left:9px; border-left:1px solid rgba(255,255,255,.42); font-size:11px; line-height:1; white-space:nowrap; opacity:.88; }
.turn-hint { min-height:18px; margin:13px 0 0; color:var(--muted); font-size:12px; }
.players-card { padding:19px; }
.card-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:11px; }
.card-heading h2 { margin:0; font-size:16px; }
.card-heading span { color:var(--muted); font-size:12px; font-weight:700; }
.player-list { display:grid; gap:7px; }
.player-item { display:grid; grid-template-columns:34px minmax(0,1fr) auto; align-items:center; gap:9px; padding:8px 9px; border-radius:13px; background:#f6f8fb; }
.player-item.active { background:#fff2dd; box-shadow: inset 0 0 0 1px #ffe1a6; }
.player-avatar { width:28px;height:37px;display:block;filter:drop-shadow(0 3px 2px rgba(37,49,65,.25)); }
.player-info { min-width:0; }
.player-info b { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.player-info small { color:var(--muted); font-size:10px; }
.player-position { min-width:30px; text-align:center; color:#516178; font-weight:900; font-size:13px; }
.offline { opacity:.48; }
.rules-card { padding:0 18px; color:#5f6e82; font-size:12px; }
.rules-card summary { padding:15px 0; cursor:pointer; color:#42526a; font-weight:800; }
.rules-card ol { margin:0 0 16px; padding-left:20px; line-height:1.65; }

.modal-backdrop { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(232,241,244,.7); backdrop-filter:blur(13px); }
.welcome-card,.winner-card { width:min(500px,100%); max-height:calc(100vh - 32px); overflow:auto; padding:32px 36px; background:rgba(255,255,255,.96); border:1px solid #fff; border-radius:30px; box-shadow:0 28px 80px rgba(51,68,91,.2); text-align:center; }
.welcome-art { height:78px; position:relative; width:170px; margin:0 auto 4px; }
.welcome-art span { position:absolute; }
.art-die { left:61px; top:3px; z-index:2; color:#ff7549; font:72px/1 Arial; transform:rotate(-9deg); }
.art-ladder { left:108px; top:19px; font-size:45px; transform:rotate(17deg); }
.art-snake { left:13px; top:33px; color:#65c993; font:900 54px/1 Arial; transform:rotate(-16deg); }
.welcome-card h1 { margin:0; font-size:34px; letter-spacing:.06em; }
.welcome-copy { max-width:350px; margin:10px auto 24px; color:var(--muted); font-size:14px; line-height:1.7; }
.field-label { display:block; margin:0 0 7px; text-align:left; color:#5d6c80; font-size:12px; font-weight:800; }
.piece-label { margin-top:14px; }
.piece-picker { display:grid; grid-template-columns:repeat(8,1fr); gap:7px; }
.piece-option { min-width:0; padding:7px 2px 6px; color:#59687c; background:#f4f7fa; border:1px solid #e3e9ef; border-radius:12px; transition:.16s; }
.piece-option span { display:block;width:29px;aspect-ratio:3/4;margin:-3px auto -1px;filter:drop-shadow(0 4px 2px rgba(40,53,71,.25)); }
.piece-option small { display:block; margin-top:3px; font-size:9px; white-space:nowrap; }
.piece-option:hover { transform:translateY(-2px); border-color:#a9cee5; }
.piece-option.selected { background:#fff1d9; border-color:#ffb472; box-shadow:0 0 0 3px rgba(255,143,80,.12); }
.text-input { width:100%; height:50px; padding:0 15px; color:var(--ink); background:#f7f9fb; border:1px solid #dfe6ee; border-radius:14px; outline:none; transition:border .2s,box-shadow .2s; }
.account-select { appearance:auto; cursor:pointer; }
.text-input:focus { border-color:#75bce5; box-shadow:0 0 0 4px rgba(85,185,239,.13); }
.login-panel { display:grid; gap:8px; }
.password-label { margin-top:5px; }
.login-button { margin-top:7px; }
.admin-divider { margin-top:7px; }
.admin-login-row { display:grid; grid-template-columns:1fr auto; gap:8px; }
.admin-login-row .text-input { letter-spacing:.13em; }
.admin-login-row .secondary-button { padding-inline:14px; white-space:nowrap; }
.account-panel { display:grid; grid-template-columns:48px 1fr auto auto; align-items:center; gap:11px; padding:11px 12px; text-align:left; background:linear-gradient(135deg,#fff6dd,#eef9ff); border:1px solid #f0e5cb; border-radius:17px; }
.account-avatar { width:44px; height:44px; display:grid; place-items:center; border-radius:50%; background:linear-gradient(145deg,#fff,#ffd676); box-shadow:0 6px 11px rgba(49,61,78,.18),inset -4px -5px rgba(165,104,28,.1); font-size:25px; }
.account-panel small { display:block; color:var(--muted); font-size:9px; }
.account-panel strong { display:block; margin-top:2px; font-size:14px; }
.account-balance { text-align:right; }
.account-balance strong { color:#e36b33; }
.text-button { padding:4px; color:#8290a2; background:none; border:0; font-size:11px; }
.admin-account-card { margin-top:13px; padding:0 2px; text-align:left; border-top:1px solid #e9edf1; }
.admin-account-card summary { padding:13px 3px 5px; color:#8996a7; cursor:pointer; font-size:11px; font-weight:700; }
.admin-fields { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding-top:8px; }
.admin-fields .text-input { height:43px; font-size:12px; }
.admin-fields button { grid-column:1/-1; min-height:43px; }
.admin-account-card .error-text { margin:8px 2px 0; }
.welcome-actions { display:grid; gap:13px; margin-top:13px; }
.divider { display:flex; align-items:center; gap:10px; color:#9aa6b5; font-size:10px; }
.divider::before,.divider::after { content:""; height:1px; flex:1; background:#e5eaf0; }
.join-row { display:grid; grid-template-columns:1fr auto; gap:9px; }
.code-input { text-transform:uppercase; letter-spacing:.12em; font-weight:800; }
.secondary-button { color:#52637a; background:#edf2f7; }
.error-text { min-height:18px; margin:12px 0 -8px; color:#e25555; font-size:12px; }
.winner-card { width:min(390px,100%); }
.confetti { font-size:65px; }
.winner-card h2 { margin:4px 0 8px; font-size:30px; }
.winner-card p:not(.eyebrow) { margin:0 0 22px; color:var(--muted); }
.winner-card button { width:100%; margin-top:8px; }
.toast { position:fixed; left:50%; bottom:30px; z-index:40; padding:11px 17px; color:#fff; background:#33445d; border-radius:13px; box-shadow:0 10px 30px rgba(0,0,0,.2); font-size:13px; font-weight:700; opacity:0; transform:translate(-50%,12px); pointer-events:none; transition:.2s; }
.toast.show { opacity:1; transform:translate(-50%,0); }
.cloud { position:fixed; z-index:0; width:180px; height:45px; border-radius:60px; background:rgba(255,255,255,.5); filter:blur(.2px); }
.cloud::before,.cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.cloud::before { width:72px;height:72px;left:30px;bottom:0; }.cloud::after{width:90px;height:90px;right:25px;bottom:0}
.cloud-a { left:-70px; top:26%; }.cloud-b{right:-80px;bottom:14%;transform:scale(.75)}

@media (max-width: 940px) {
  .game-shell { padding:14px 16px 30px; }
  .play-layout { grid-template-columns:1fr; }
  .control-panel { position:static; grid-template-columns:1fr 1fr; }
  .rules-card { grid-column:1/-1; }
  .turn-card { min-height:260px; }
}
@media (max-width: 600px) {
  .game-shell { padding:10px 8px 25px; }
  .game-header { padding:0 4px; margin-bottom:7px; }
  .logo-mark { width:42px;height:42px;border-radius:13px;font-size:23px; }
  .logo strong { font-size:17px; }.logo small{font-size:7px}
  .room-chip { padding:6px 6px 6px 10px; gap:6px; }.room-chip span{display:none}.room-chip strong{font-size:14px}.room-chip button{padding:7px 8px}.room-chip .sound-toggle{width:31px;height:31px;padding:0}.room-chip .leave-button{font-size:0}.room-chip .leave-button::after{content:"退出";font-size:11px}
  .play-layout { gap:13px; }
  .board { border-width:4px; border-radius:17px; }
  .cell { font-size:8px; }
  .piece { width:32px; }
  .board-topline { padding:0 5px; }
  .control-panel { grid-template-columns:1fr; }
  .turn-card { min-height:auto; padding:19px; display:grid; grid-template-columns:1fr 105px; align-items:center; text-align:left; }
  .turn-card .eyebrow,.turn-player,.turn-hint { grid-column:1; }
  .dice-stage { grid-column:2;grid-row:1/4;height:90px; }.dice{width:65px;height:65px;padding:10px}.dice i{width:9px;height:9px}
  .turn-card .primary-button { grid-column:1/-1;width:100%;justify-self:stretch; }.turn-hint{text-align:center;margin-top:10px}
  .players-card{padding:15px}.rules-card{grid-column:auto}
  .welcome-card,.winner-card { padding:24px 18px;border-radius:24px; }.welcome-card h1{font-size:28px}.welcome-art{height:62px;transform:scale(.78);margin-top:-12px;margin-bottom:-5px}
  .welcome-copy { margin-bottom:16px; }
  .piece-picker { grid-template-columns:repeat(4,1fr); }
  .piece-option span { font-size:22px; }
  .account-panel { grid-template-columns:44px 1fr auto; }.account-panel .text-button{grid-column:1/-1;justify-self:end;margin-top:-7px}
  .admin-fields { grid-template-columns:1fr; }.admin-fields button{grid-column:auto}
}
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms !important; transition-duration:.01ms !important; } }