/* A little storybook kingdom, with the same 32 playable spaces. */
.game{background:radial-gradient(ellipse at 20% 55%,#e6f3f599,transparent 65%)}
.kingdom-board{gap:3px;border:6px solid #6679ad;border-radius:22px;background:#6679ad;box-shadow:0 8px 0 #465c8f,0 15px 30px #36528220}
.board-scroll{padding:2px 2px 14px;border-radius:23px}
.board-space{background:linear-gradient(160deg,color-mix(in srgb,var(--bg) 65%,white),var(--bg));border-radius:7px;padding:4px 3px;gap:1px;box-shadow:inset 0 2px 0 #ffffffb3,inset 0 -2px 0 #0000000b;transition:filter .2s,box-shadow .2s}
.board-space:hover{filter:brightness(1.03);box-shadow:inset 0 0 0 2px #fff,inset 0 -3px 0 color-mix(in srgb,var(--accent) 25%,transparent);outline:0}
.board-space.is-current{box-shadow:inset 0 0 0 3px #fff8ad,inset 0 0 16px #ffed8c99}
.board-space:focus-visible{outline:3px solid #fff;outline-offset:-4px;z-index:3}
.board-space .cell-number{left:4px;top:4px;z-index:2;font-variant-numeric:tabular-nums;color:var(--accent);font-size:clamp(6px,.76cqw,9px)}
.board-space.property{padding:15% 2px 4px}
.board-space .family-strip{height:14%;min-height:10px;box-shadow:inset 0 1px 0 #ffffff66;letter-spacing:.7px;padding-left:13px;font-size:clamp(5px,.66cqw,8px)}
.board-space.property .cell-number{color:#fff;top:3px;font-size:clamp(5px,.65cqw,8px)}
.terrain-scene{display:block;width:100%;height:auto;overflow:visible;flex-shrink:1;min-height:0;pointer-events:none}
.board-space .terrain-scene{width:98%;height:51%;margin:0 auto;transition:transform .22s}
.board-space.property .terrain-scene{height:52%;margin:-1px auto 0}
.board-space:hover .terrain-scene{transform:translateY(-2px) scale(1.035)}
.board-space .cell-name{color:#2e4561;font-size:clamp(6px,.96cqw,12px);line-height:1.1;flex-shrink:0;max-width:98%;min-height:2.2em;display:flex;align-items:center;justify-content:center}
.board-space .cell-cost{background:#ffffffa6;border:1px solid #ffffff88;border-radius:12px;display:block;padding:1px 5px;line-height:1.15;margin-top:1px;max-width:100%;color:color-mix(in srgb,var(--accent) 68%,#24374d);font-size:clamp(5px,.76cqw,9px);flex-shrink:0}
.board-space .cell-category{color:color-mix(in srgb,var(--accent) 77%,#283651);line-height:1.1;padding:0 1px 0 13px;margin:2px 0 1px;font-size:clamp(6px,.79cqw,10px);min-height:1.2em;letter-spacing:.2px;flex-shrink:0}
.board-space.station .terrain-scene{height:45%}
.board-space.station .cell-category{font-size:clamp(5px,.7cqw,8px)}
.board-space.station .cell-name{font-size:clamp(6px,.87cqw,11px)}
.board-space.go_jail,.board-space.start,.board-space.parking,.board-space.jail{background:linear-gradient(145deg,#fff8,var(--bg));box-shadow:inset 0 0 0 2px #ffffff8c}
.board-space.go_jail .cell-category,.board-space.jail .cell-category{font-weight:1000}
.cell-owner{height:6px;border-top:1px solid #ffffff88;box-shadow:0 -2px 5px #ffffff6b}
.building-tag{top:16%;right:3px;z-index:3;box-shadow:0 2px 0 #00000014}
.scene-cloud{animation:cloud-drift 6s ease-in-out infinite;animation-delay:var(--scene-delay,0s)}
.scene-flag{transform-box:fill-box;transform-origin:left center;animation:flag-wave 3s ease-in-out infinite;animation-delay:var(--scene-delay,0s)}
.scene-steam{animation:steam-rise 3s ease-out infinite;animation-delay:var(--scene-delay,0s)}
.scene-train{animation:train-chug 4s ease-in-out infinite;animation-delay:var(--scene-delay,0s)}
.scene-magic{animation:magic-float 4s ease-in-out infinite;animation-delay:var(--scene-delay,0s)}
.board-center{border-radius:12px;background:radial-gradient(circle at 12% 12%,#fff9c066,transparent 30%),linear-gradient(155deg,#e5efff,#f4f9e8);isolation:isolate}
.board-center:before{content:'';position:absolute;width:15%;height:4%;border-radius:40px;background:#fff8;top:5%;left:44%;box-shadow:20px -8px 0 -2px #fff6,-18px -3px 0 -4px #fff8;animation:cloud-drift 9s ease-in-out infinite;pointer-events:none;z-index:-1}
.board-center:after{content:'✦';position:absolute;color:#e9bc55;font-size:clamp(15px,3cqw,35px);top:4%;right:2%;animation:twinkle 6s ease-in-out infinite;pointer-events:none;z-index:-1}
.arena-header h2{color:#5260a4;text-shadow:0 2px 0 #fff;letter-spacing:-.6px}
.arena-header small{color:#7a6ca3}
.arena-header img{filter:drop-shadow(0 6px 3px #56745317)}
.arena-mini-wrap .chess-grid{border:3px solid #6679ad;box-shadow:0 0 0 6px #fff,0 0 0 8px #b9c6dd,0 10px 13px #536c9633;border-radius:3px}
.arena-footer{color:#5d6997}
.board-token.current{animation:token-glow 2.6s ease-in-out infinite}
.board-token{transition:left .32s cubic-bezier(.3,.1,.3,1),top .32s cubic-bezier(.3,.1,.3,1),transform .32s ease}
.token-piece{display:block;line-height:1;transform-origin:center bottom}
.token-hop{animation:token-step .4s ease-out both}
#sound-btn.is-on{background:#f1f8df;border-color:#b9d48c;color:#608e32}
#sound-btn .sound-state{min-width:22px;display:inline-block}
@keyframes token-step{0%,100%{transform:translateY(0) scale(1)}35%{transform:translateY(-7px) scale(1.06)}75%{transform:translateY(0) scale(1.04,.95)}}
.property-illustration{max-width:270px;width:100%;margin:-3px auto 15px;border-radius:16px;background:linear-gradient(155deg,#fff,var(--bg));border:1px solid #ffffff;box-shadow:inset 0 -3px 0 #00000008;padding:8px 18px}
.property-illustration .terrain-scene{width:100%;height:auto;max-height:145px}

/* Six actual faces make each cube tumble through different numbers. */
.dice-row{gap:26px;margin:27px 0 25px;perspective:700px;overflow:visible}
.die{--die-size:58px;--half-die:calc(var(--die-size)/2);display:block;position:relative;width:var(--die-size);height:var(--die-size);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;transform:rotate(-7deg);perspective:600px;flex-shrink:0}
.die:nth-child(2){transform:rotate(7deg);background:transparent;border:0;box-shadow:none}
.die:after{content:'';position:absolute;bottom:-12px;left:2%;width:96%;height:12px;background:#36426d28;border-radius:50%;filter:blur(3px);z-index:-1}
.die-cube{position:absolute;width:100%;height:100%;transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry))}
.die-face{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);padding:20%;gap:11%;border:1px solid #d3ddea;border-radius:11px;background:linear-gradient(145deg,#fff,#f0f4fc);backface-visibility:hidden;box-shadow:inset 0 0 0 2px #ffffffa6}
.die:nth-child(2) .die-face{background:linear-gradient(145deg,#fcf7ff,#e8dafc);border-color:#c8b4e4}
.die .die-face i{display:block;width:100%;height:100%;min-height:0;aspect-ratio:1;border-radius:50%;background:#354b7a;visibility:hidden;box-shadow:inset 0 1px 2px #00000026}
.die:nth-child(2) .die-face i{background:#7850b5}
.die .die-face i.on{visibility:visible}
.face-1{transform:translateZ(var(--half-die))}
.face-2{transform:rotateY(90deg) translateZ(var(--half-die))}
.face-3{transform:rotateX(90deg) translateZ(var(--half-die))}
.face-4{transform:rotateX(-90deg) translateZ(var(--half-die))}
.face-5{transform:rotateY(-90deg) translateZ(var(--half-die))}
.face-6{transform:rotateY(180deg) translateZ(var(--half-die))}
.rolling .die{animation:die-hop 1.4s ease-out both}
.rolling .die:nth-child(2){animation-name:die-hop-other;animation-direction:normal}
.rolling .die-cube{animation:cube-tumble 1.4s cubic-bezier(.15,.5,.33,1) both}
.rolling .die:nth-child(2) .die-cube{animation-name:cube-tumble-other}
.rolling .die:after{animation:dice-shadow 1.4s ease-out both}
.dice-stage{position:absolute;inset:11.2%;z-index:10;display:grid;place-items:center;background:#edf4ff96;backdrop-filter:blur(4px);border-radius:12px;pointer-events:none}
.dice-tray{position:relative;width:82%;max-width:370px;border:3px solid #fff;background:linear-gradient(140deg,#fffefa,#eee5ff);border-radius:28px;padding:28px 20px 24px;text-align:center;box-shadow:0 7px 0 #b9a8d1,0 20px 60px #344a7438;animation:tray-in .25s ease-out both}
.dice-tray-kicker{font-size:clamp(9px,1.15cqw,13px);font-weight:900;letter-spacing:1.5px;color:#7c63a3}
.dice-tray .dice-row{gap:48px;margin:39px 0 33px}
.dice-tray .die{--die-size:76px}
.dice-tray .die-face{border-radius:14px}
.dice-result{font-size:clamp(13px,1.9cqw,22px);font-weight:900;color:#5e4d94;line-height:1.3;min-height:1.3em}
.landed .dice-result{color:#547b38;animation:result-pop .3s ease-out both}
.landed .dice-tray{border-color:#fbffe7;background:linear-gradient(145deg,#fffff9,#f1fadd)}
.dice-spark{position:absolute;color:#e5ae3d;line-height:1;font-size:35px;animation:twinkle 1.5s ease-in-out infinite}
.spark-a{left:18px;top:35%}.spark-b{right:17px;top:27%;font-size:26px}
.is-rolling .board-token.current{animation:none}

@keyframes cloud-drift{0%,100%{transform:translateX(-3px)}50%{transform:translateX(5px)}}
@keyframes flag-wave{0%,100%{transform:scaleX(1) skewY(-2deg)}50%{transform:scaleX(.88) skewY(4deg)}}
@keyframes steam-rise{0%{opacity:0;transform:translate(0,5px) scale(.8)}35%{opacity:.9}100%{opacity:0;transform:translate(-5px,-6px) scale(1.05)}}
@keyframes train-chug{0%,100%{transform:translateX(-1px)}50%{transform:translateX(2px)}}
@keyframes magic-float{0%,100%{transform:translateY(1px)}50%{transform:translateY(-2px)}}
@keyframes token-glow{0%,100%{box-shadow:0 0 0 2px #fff,0 0 0 4px var(--pc),0 4px 8px #23395366}50%{box-shadow:0 0 0 2px #fff,0 0 0 6px color-mix(in srgb,var(--pc) 40%,transparent),0 4px 11px #23395366}}
@keyframes cube-tumble{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}22%{transform:rotateX(210deg) rotateY(-150deg) rotateZ(40deg)}48%{transform:rotateX(490deg) rotateY(-310deg) rotateZ(-25deg)}76%{transform:rotateX(calc(720deg + var(--rx))) rotateY(calc(-720deg + var(--ry))) rotateZ(9deg)}90%{transform:rotateX(calc(720deg + var(--rx))) rotateY(calc(-720deg + var(--ry))) rotateZ(-3deg)}100%{transform:rotateX(calc(720deg + var(--rx))) rotateY(calc(-720deg + var(--ry))) rotateZ(0deg)}}
@keyframes cube-tumble-other{0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg)}22%{transform:rotateX(-230deg) rotateY(190deg) rotateZ(-40deg)}48%{transform:rotateX(-490deg) rotateY(430deg) rotateZ(30deg)}76%{transform:rotateX(calc(-720deg + var(--rx))) rotateY(calc(720deg + var(--ry))) rotateZ(-10deg)}90%{transform:rotateX(calc(-720deg + var(--rx))) rotateY(calc(720deg + var(--ry))) rotateZ(4deg)}100%{transform:rotateX(calc(-720deg + var(--rx))) rotateY(calc(720deg + var(--ry))) rotateZ(0deg)}}
@keyframes die-hop{0%{transform:translate(-13px,6px) rotate(-18deg)}22%{transform:translate(-18px,-32px) rotate(-25deg)}47%{transform:translate(6px,-15px) rotate(12deg)}68%{transform:translate(0,1px) rotate(-9deg)}80%{transform:translate(0,-8px) rotate(-7deg)}90%,100%{transform:translate(0,0) rotate(-7deg)}}
@keyframes die-hop-other{0%{transform:translate(14px,5px) rotate(19deg)}25%{transform:translate(16px,-27px) rotate(27deg)}49%{transform:translate(-5px,-11px) rotate(-10deg)}69%{transform:translate(0,2px) rotate(10deg)}81%{transform:translate(0,-6px) rotate(7deg)}91%,100%{transform:translate(0,0) rotate(7deg)}}
@keyframes dice-shadow{0%,68%,100%{opacity:1;transform:scale(1)}24%{opacity:.25;transform:scale(.6)}47%,80%{opacity:.6;transform:scale(.8)}}
@keyframes tray-in{from{opacity:0;transform:scale(.9) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes result-pop{0%{opacity:.4;transform:scale(.85)}70%{transform:scale(1.07)}100%{opacity:1;transform:scale(1)}}
@media(min-width:1550px){.board-space{gap:1px}}
@media(max-width:700px){.kingdom-board{border-width:5px}.turn-panel .dice-row{gap:22px;margin:8px 0 18px}.turn-panel .die{--die-size:46px}.turn-panel .die-face{border-radius:9px}.dice-stage{position:fixed;inset:0;z-index:25;border-radius:0;background:#dee8f8a6;backdrop-filter:blur(5px)}.dice-tray{width:calc(100% - 44px);max-width:340px;padding-top:30px}.dice-tray .die{--die-size:68px}.dice-tray-kicker{font-size:11px}.dice-result{font-size:20px}.dice-tray .dice-row{margin:35px 0 31px;gap:43px}.board-space .cell-cost{font-size:5.5px}.property-illustration{max-width:220px}}
@media(prefers-reduced-motion:reduce){.scene-cloud,.scene-flag,.scene-steam,.scene-train,.scene-magic,.board-token.current,.token-hop,.board-center:before,.board-center:after,.rolling .die,.rolling .die-cube,.rolling .die:after,.dice-tray,.landed .dice-result,.dice-spark{animation:none!important}.board-space,.terrain-scene,.board-token{transition:none!important}}