*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#6fcafa}body{font-family:'PingFang SC','Microsoft YaHei',sans-serif;-webkit-tap-highlight-color:transparent}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:default}button:focus-visible,input:focus-visible{outline:4px solid #153a91;outline-offset:4px}#party-game{position:relative;width:100%;height:100dvh;overflow:hidden;isolation:isolate}#party-stage{position:absolute;inset:0;pointer-events:none;overflow:hidden;background:#8ad8fa}#scene-camera{position:absolute;inset:0;transform-origin:50% 55%;will-change:transform;transition:filter .45s}#party-stage[data-mode=home] #scene-camera{filter:saturate(1.05)}.arena-art{width:100%;height:100%;position:absolute;inset:0;object-fit:fill;user-select:none}.animal{background-image:url('./assets/characters-v2-web-v6.webp');background-size:266.6667% 266.6667%;background-repeat:no-repeat;aspect-ratio:1;display:block}.animal[data-animal=A]{background-position:10% 10%}.animal[data-animal=B]{background-position:90% 10%}.animal[data-animal=C]{background-position:10% 90%}.animal[data-animal=D]{background-position:90% 90%}.stage-racer{position:absolute;width:clamp(62px,7.5vw,130px);aspect-ratio:1;transform:translate(-50%,-94%);will-change:left,top;transition:opacity .4s;z-index:2}.stage-racer .sprite-motion{width:100%;height:100%;transform-origin:50% 88%;will-change:transform;filter:drop-shadow(0 4px 2px #213a5b24)}.stage-racer .animal{width:100%;height:100%;transform-origin:center}.racer-shadow{position:absolute;bottom:5%;left:24%;width:52%;height:9%;border-radius:50%;background:#15244838;filter:blur(4px);transform-origin:center;z-index:-1}.racer-badge{position:absolute;right:1%;top:5%;display:grid;place-items:center;width:23%;aspect-ratio:1;border:3px solid white;border-radius:40%;font:bold clamp(15px,1.8vw,28px) 'Arial Rounded MT Bold',sans-serif;color:white;text-shadow:0 2px 0 #18497e55;box-shadow:0 3px 0 #0d315f25;transform:rotate(9deg);background:var(--racer-color)}#party-stage[data-mode=home] .stage-racer{width:23vw;max-width:400px}#party-stage[data-mode=lobby] .stage-racer{width:17vw;max-width:270px}#party-stage[data-mode=home] .racer-badge,#party-stage[data-mode=lobby] .racer-badge{display:none}#lane-boundary{position:absolute;left:0;top:0;background:repeating-linear-gradient(135deg,#617ac085 0 12px,#ffffff25 12px 24px);clip-path:polygon(14% 40%,82% 45%,88% 77%,9% 73%);width:100%;height:100%;opacity:0;pointer-events:none;z-index:1}#stage-fx{position:absolute;inset:0;z-index:50;overflow:hidden}.show-callout{position:absolute;padding:9px 17px;border:3px solid #16234b;background:#fffdf6;border-radius:40% 45% 40% 15%;font-weight:900;color:#16234b;font-size:clamp(16px,2.1vw,32px);box-shadow:0 5px 0 #1a397b22;transform:translate(-50%,-100%) rotate(-6deg);white-space:nowrap}.show-callout:after{content:'';position:absolute;bottom:-11px;left:20%;border-top:12px solid #16234b;border-right:13px solid transparent}.confetti{position:absolute;width:9px;height:14px;border-radius:3px;animation:confetti 1300ms ease-out forwards}#rotate-hint{display:none;position:absolute;inset:0;z-index:1000;background:#ebfbffed;backdrop-filter:blur(12px);color:#17234d;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center;gap:15px}#rotate-hint span{font-size:90px}#rotate-hint strong{font-size:24px}#rotate-hint p{margin:0;font-size:14px}@keyframes confetti{to{transform:translate(var(--dx),var(--dy)) rotate(540deg);opacity:0}}@media(orientation:portrait) and (max-width:900px){#rotate-hint{display:flex}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

.animal.running{background-image:url('./assets/characters-run-v2-web-v6.webp')}
#party-stage[data-mode=home] .stage-racer{width:20vw}
.racer-direction{position:absolute;left:42%;bottom:-11%;display:grid;place-items:center;width:26px;height:26px;background:#fffdf0;border:2px solid var(--racer-color);border-radius:50%;color:#17234d;font-size:19px;font-weight:900;line-height:1;box-shadow:0 2px 3px #173a5433}
#party-stage[data-mode=home] .racer-direction,#party-stage[data-mode=lobby] .racer-direction{display:none}
#party-stage[data-preview=true] #racers{visibility:hidden}
@media(orientation:portrait) and (max-width:900px){
  #rotate-hint{display:none}
  #party-stage .stage-racer{width:calc(22vw * var(--depth,1));max-width:140px;min-width:0}
  #party-stage[data-mode=home] .stage-racer{width:28vw;max-width:170px}
  #party-stage[data-mode=lobby] .stage-racer{width:21vw;max-width:130px}
  .racer-badge{font-size:14px;width:26%;border-width:2px;right:5%;top:8%}
  .racer-direction{width:22px;height:22px;font-size:17px;bottom:-9%}
  .show-callout{max-width:62vw;white-space:normal;text-align:center;overflow-wrap:anywhere;font-size:17px;line-height:1.25;padding:7px 12px}
}

/* R1 scene layers and actual directional / fallen pose atlases. */
.plaza-art{position:absolute;inset:0;width:100%;height:100%;object-fit:fill;opacity:0;transition:opacity .35s}
#party-stage[data-mode=home] .plaza-art,#party-stage[data-mode=lobby] .plaza-art{opacity:1}
#party-stage[data-mode=home] .arena-art,#party-stage[data-mode=lobby] .arena-art{opacity:0}
#party-stage[data-mode=backdrop] .arena-art,#party-stage[data-mode=results] .arena-art{filter:blur(2px) saturate(.94)}
.animal.rear-pose{background-image:url('./assets/characters-rear-r1-web-v6.webp')}
.animal.fallen-pose{background-image:url('./assets/characters-fallen-r1-web-v6.webp');background-size:200% 200%}
.animal.fallen-pose[data-animal=A]{background-position:0 0}.animal.fallen-pose[data-animal=B]{background-position:100% 0}.animal.fallen-pose[data-animal=C]{background-position:0 100%}.animal.fallen-pose[data-animal=D]{background-position:100% 100%}
.stage-racer.is-eliminated .sprite-motion{filter:grayscale(.65) drop-shadow(0 4px 2px #213a5b24)}
.stage-racer.is-moving:after{content:'';position:absolute;left:10%;bottom:4%;width:40%;height:8%;border-radius:50%;background:radial-gradient(ellipse,#fff9,transparent 70%);filter:blur(2px)}
.action-burst{position:absolute;width:1px;height:1px;transform:translateY(-40px)}
.action-burst i{position:absolute;width:7px;height:26px;background:#ffe478;border:2px solid white;border-radius:6px;transform:rotate(var(--angle)) translateY(-40px);transform-origin:50% 0;box-shadow:0 2px 4px #a33e3355;animation:burst-ray .6s ease-out both}
.action-burst.recover i{background:#5ed9b2}.action-burst.eliminate i{background:#ada0ef}
@keyframes burst-ray{from{opacity:0;scale:.4}40%{opacity:1}to{opacity:0;scale:1.6}}
@media(orientation:portrait) and (max-width:900px){#party-stage[data-mode=home] .stage-racer{width:29vw;max-width:185px}#party-stage[data-mode=lobby] .stage-racer{width:23vw}.racer-direction{background:#fffdf0e8}}
.loading-screen{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;background:#8ad8fa url('./assets/plaza-r1-web-v6.webp') center/cover;font-family:PartyNoto,'PingFang SC',sans-serif;color:#17234d}
.loading-panel{width:min(480px,95vw);display:flex;flex-direction:column;align-items:center;padding:25px;gap:16px;border:5px solid white;border-radius:40px;background:linear-gradient(#fffdf4f5,#fff5dfe8);box-shadow:inset 0 0 0 3px #ffe9a1,0 6px #8dcadf,0 16px 48px #17447755;text-align:center}
.loading-panel>img{width:min(330px,90%);height:auto;max-height:170px;object-fit:contain}.loading-panel h1{font-size:26px;margin:0}.loading-panel p{margin:0;font-weight:700;line-height:1.5}.loading-animals{display:flex;width:100%;height:90px}.loading-animals .animal{flex:1;min-width:0;height:auto}
.loading-panel progress{appearance:none;border:3px solid white;border-radius:30px;background:#d5eaf3;width:100%;height:25px;overflow:hidden;box-shadow:0 0 0 2px #82cbdc}.loading-panel progress::-webkit-progress-bar{background:#d5eaf3}.loading-panel progress::-webkit-progress-value{border-radius:30px;background:linear-gradient(#69fff5,#00b8cd)}.loading-panel button{min-width:160px;min-height:52px;border:3px solid white;border-radius:30px;background:linear-gradient(#49f5e9,#00afcc);color:white;font-weight:900;font-size:20px;box-shadow:0 4px #07899e;padding:10px 22px}.loading-panel button[hidden]{display:none}
@media(orientation:portrait){.loading-screen{background-image:url('./assets/plaza-portrait-r1-web-v6.webp')}}
@media(max-height:450px){.loading-panel{padding:12px 24px;gap:8px}.loading-panel>img{max-height:72px}.loading-animals{height:60px}.loading-panel h1{font-size:20px}}
.lobby-platform{display:none;position:absolute;left:19%;top:43%;width:63%;height:7%;border:4px solid #fff5c8;border-radius:50%;background:radial-gradient(ellipse at 50% 12%,#fffce1 0,#ffe883 54%,#ffd34b 95%);box-shadow:inset 0 4px 0 #fff8,0 9px 0 #f5c546,0 13px 0 #b78ce5,0 18px 20px #32589555}
#party-stage[data-mode=lobby] .lobby-platform{display:block}
#party-stage:is([data-mode=home],[data-mode=lobby]) .animal:is([data-animal=A],[data-animal=B]){position:relative;top:-7%}
@media(orientation:portrait) and (max-width:900px){.lobby-platform{left:0;top:32%;width:100%;height:4%;border-width:2px;box-shadow:inset 0 2px #fff8,0 5px #f5c546,0 9px #b78ce5,0 12px 12px #32589544}}

/* Anonymous card backs bridge the authoritative submit/race countdown. */
.deck-preparation{position:absolute;left:50%;top:49%;transform:translate(-50%,-50%);width:min(490px,85vw);padding:22px;background:linear-gradient(#fffdf6,#fff4df);border:5px solid white;border-radius:32px;box-shadow:inset 0 0 0 3px #f4da9d,0 7px #86bed8,0 15px 50px #24417544;text-align:center;color:#17234d;font-family:PartyNoto,sans-serif}.deck-preparation strong{font-size:clamp(19px,2vw,28px)}.deck-preparation>b{display:block;font-size:clamp(14px,1.3vw,19px)}.shuffle-cards{height:155px;position:relative;margin:12px 0}.card-back{position:absolute;left:calc(50% - 39px);top:10px;width:78px;height:112px;border:4px solid white;outline:2px solid #2c8ac9;border-radius:15px;background:repeating-conic-gradient(#43dcf1 0deg 30deg,#0eb9da 30deg 60deg);box-shadow:inset 0 0 0 3px #8af1fa,0 5px #258cc1;color:white;display:grid;place-items:center;font-size:45px;font-style:normal;transform:rotate(var(--fan));animation:deck-mix var(--prep-duration) ease-in-out both}.burn-card{animation-name:deck-burn}@keyframes deck-mix{0%{transform:translateX(calc((var(--i) - 8.5)*8px)) rotate(var(--fan))}35%{transform:translateX(calc((var(--i) - 8.5)*13px)) rotate(calc(var(--fan)*-1))}70%,100%{transform:translateX(-45px) rotate(calc(var(--fan)*.08))}}@keyframes deck-burn{0%,35%{transform:translateX(calc((var(--i) - 8.5)*8px)) rotate(var(--fan))}100%{transform:translateX(calc(55px + (var(--i) - 15)*15px)) translateY(8px) rotate(12deg)}}
@media(max-height:450px){.deck-preparation{padding:12px;width:360px;top:54%}.shuffle-cards{height:105px;margin:5px 0}.card-back{width:55px;height:80px;left:calc(50% - 28px);font-size:32px}.deck-preparation strong{font-size:18px}.deck-preparation>b{font-size:13px}}
@media(prefers-reduced-motion:reduce){.card-back{animation:none}.burn-card{transform:translateX(80px) rotate(10deg)}}

.motion-path{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 3px 2px #16407b88);opacity:.85}.boundary-warning{position:absolute;left:50%;top:30%;transform:translateX(-50%);padding:10px 17px;border:3px solid white;border-radius:20px;background:#7652c7;color:white;box-shadow:0 5px #49317c;font-size:clamp(15px,1.5vw,24px);font-weight:900;text-align:center;width:max-content;max-width:80%}@media(orientation:portrait){.boundary-warning{top:28%;max-width:75%}}

.newly-closed-cells{position:absolute;inset:0;background:repeating-linear-gradient(135deg,#ffdc4bd9 0 10px,#a16cdaab 10px 20px);animation:boundary-flash .45s ease-in-out alternate 2}@keyframes boundary-flash{from{opacity:.25}to{opacity:1}}

/* Occupancy follows authoritative animation frames in the same camera space. */
#occupied-cells{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:2}#party-stage:not([data-mode="race"]) #occupied-cells{display:none}

/* The visible grid and all rule overlays share SVG polygons. */
#race-board,#lane-boundary{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;clip-path:none;background:none;opacity:1}
#race-board{z-index:1}#lane-boundary{z-index:2}#occupied-cells{z-index:3}
#party-stage:is([data-mode="home"],[data-mode="lobby"]) :is(#race-board,#lane-boundary){display:none}
#party-stage:is([data-mode="backdrop"],[data-mode="results"]) #race-board{filter:blur(2px) saturate(.94)}

/* One continuous arena. The background and grid share the portrait camera mapping. */
.continuous-arena{position:absolute;inset:0;width:100%;height:100%;display:none}
#party-stage[data-race-viewport="true"][data-mode="race"] .continuous-arena{display:block}
#party-stage[data-race-viewport="true"][data-mode="race"] .arena-art{visibility:hidden}
#stage-fx{z-index:200}
.show-callout{border:3px solid white;border-radius:22px;padding:8px 15px;background:linear-gradient(#fffdf2,#fff0c3);color:#24355a;box-shadow:inset 0 0 0 2px #ffd879,0 3px 0 #e7b95c,0 5px 10px #193f5730;transform:translate(-50%,-100%);font-family:PartyNoto,'PingFang SC',sans-serif;line-height:1.25;font-weight:900}
.show-callout:after{left:calc(50% - 6px);bottom:-9px;border-top:9px solid #e7b95c;border-left:7px solid transparent;border-right:7px solid transparent}
.direction-art{display:block;width:100%;height:100%;transform:rotate(var(--direction-rotate));color:var(--racer-color)}
.direction-art svg{display:block;width:100%;height:100%}
.racer-direction{padding:1px;width:28px;height:28px}
@media(orientation:portrait) and (max-width:900px){.show-callout{font-size:16px;padding:6px 12px;white-space:nowrap;max-width:90vw}.racer-direction{width:24px;height:24px}}
@media(orientation:portrait) and (max-height:560px){.show-callout{font-size:14px;padding:4px 10px}}