*,*:before,*:after{box-sizing:border-box}body{font-family:system-ui,sans-serif}.train-track{min-height:255px;border-radius:28px;padding:18px 12px 28px;display:grid;align-content:end;background:linear-gradient(180deg,var(--route-wash, rgba(255, 255, 255, .72)),var(--route-overlay, rgba(255, 255, 255, .48))),url(../../assets/shape-train/station-background-block-v1.png) center / cover;box-shadow:inset 0 0 0 1000px var(--route-overlay, rgba(255, 255, 255, .34)),0 18px 34px var(--route-glow, rgba(38, 79, 113, .2));transition:background .24s ease,box-shadow .24s ease}.car-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;align-items:end}.train-car{height:clamp(94px,24vw,132px);border:0;border-radius:22px;background:transparent;display:grid;place-items:center;position:relative;touch-action:manipulation}.car-art{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 12px 16px rgba(27,75,102,.2));pointer-events:none}.car-shape{position:relative;z-index:1;width:min(45%,58px);height:min(45%,58px);object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.18));pointer-events:none}.train-car.target{animation:glow .65s ease infinite alternate}.train-car.correct{animation:pop .35s ease}.passenger-area{min-height:182px;border-radius:24px;padding:14px;display:grid;justify-items:center;align-content:center;gap:8px;background:#ffffff9e}.passenger-area p{min-height:1.35em;margin:0;color:#17314fc2;font-weight:900}.passenger{width:min(42vw,150px);aspect-ratio:1;border:6px solid rgba(255,255,255,.92);border-radius:32px;display:grid;place-items:center;background:#fff;box-shadow:0 16px 28px #264f7138;touch-action:none}.passenger span{display:grid;width:88%;height:88%;place-items:end center;grid-template:1fr / 1fr}.shape-token img{grid-area:1 / 1;width:100%;height:100%;object-fit:contain;pointer-events:none}.shape-token .passenger-animal{width:82%;height:82%;align-self:start;filter:drop-shadow(0 7px 7px rgba(38,79,113,.18))}.shape-token .passenger-shape-badge{width:44%;height:44%;align-self:end;justify-self:end;padding:4px;border-radius:50%;background:#fffffff5;box-shadow:0 3px 8px #17314f38}.play-panel.is-outline .car-shape,.play-panel.is-outline .passenger-shape-badge{filter:grayscale(1) contrast(1.55) drop-shadow(0 3px 4px rgba(0,0,0,.18))}.passenger.is-memory-hidden .shape-token img{opacity:0}.passenger.is-memory-hidden:after{content:"?";position:absolute;font-size:3rem;font-weight:900;color:#396b91}.passenger{position:relative}.feedback{min-height:28px;text-align:center;font-weight:900;color:#17314f}.wrong{animation:shake .28s ease}.hidden{display:none!important}.play-panel{position:relative;--route-accent: #1689dd;--route-badge-ink: #ffffff;--route-wash: rgba(219, 246, 255, .7);--route-overlay: rgba(255, 255, 255, .3);--route-glow: rgba(38, 79, 113, .2)}.play-panel[data-rule=outline]{--route-accent: #7257c8;--route-wash: rgba(232, 225, 255, .76);--route-overlay: rgba(248, 245, 255, .34);--route-glow: rgba(79, 56, 145, .28)}.play-panel[data-rule=moving]{--route-accent: #d75b35;--route-wash: rgba(255, 224, 193, .76);--route-overlay: rgba(255, 248, 235, .3);--route-glow: rgba(169, 70, 37, .28)}.play-panel[data-rule=memory]{--route-accent: #36549d;--route-wash: rgba(207, 225, 255, .78);--route-overlay: rgba(240, 247, 255, .32);--route-glow: rgba(35, 59, 130, .3)}.play-panel[data-rule=ticket]{--route-accent: #b46c08;--route-badge-ink: #fff9df;--route-wash: rgba(255, 235, 169, .8);--route-overlay: rgba(255, 252, 235, .28);--route-glow: rgba(152, 91, 12, .28)}.play-panel[data-rule=expert]{--route-accent: #8a3ea9;--route-wash: rgba(242, 211, 255, .78);--route-overlay: rgba(255, 244, 255, .3);--route-glow: rgba(105, 38, 129, .3)}.shape-result-panel{position:absolute;inset:0;grid-column:1 / -1;grid-row:1 / -1;z-index:20;display:grid;place-items:center;padding:12px;background:#18304870;border-radius:24px;backdrop-filter:blur(8px)}.shape-leave-confirm{position:absolute;inset:0;z-index:30;display:grid;place-items:center;padding:16px;background:#1830488f;border-radius:24px;backdrop-filter:blur(8px)}.leave-confirm-card{width:min(100%,342px);padding:22px;display:grid;gap:14px;border-radius:24px;background:#fffdf2;color:#17314f;text-align:center;box-shadow:0 24px 50px #12304652;animation:cardIn .2s ease both}.leave-confirm-card strong{font-size:1.45rem}.leave-confirm-card p{margin:0;line-height:1.45;font-weight:800}.leave-confirm-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.leave-confirm-actions button{min-height:48px;padding:9px 12px;border:0;border-radius:14px;background:#ffdf70;color:#17314f;font:inherit;font-weight:900}.leave-confirm-actions #leaveStageBtn{background:#fffffff0;box-shadow:inset 0 0 0 2px #17314f2e}.shape-leave-confirm:not(.hidden) button:focus,.shape-leave-confirm button:focus-visible{outline:4px solid #17314f;outline-offset:2px}.shape-skill-report{display:grid;gap:6px}.shape-skill-report h3,.shape-skill-report p{margin:0}.shape-skill-report h3{font-size:var(--shape-result-essential-font-size, 17px)}.shape-skill-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.shape-skill-grid div{min-width:0;padding:7px 4px;border-radius:9px;background:#55c7ff24}.shape-skill-grid span,.shape-skill-grid b{display:block;line-height:1.15}.shape-skill-grid span{min-height:30px;font-size:var(--shape-result-detail-font-size, 12px);font-weight:900}.shape-skill-grid b{margin-top:3px;font-size:var(--shape-result-detail-font-size, 12px)}#progressComparison{padding:5px 7px;border-radius:8px;background:#ffca3a4d;font-size:var(--shape-result-detail-font-size, 12px);font-weight:900}.result-card strong{font-size:1.65rem}.stars{color:#ffb300;font-size:2.1rem}.result-actions button:disabled{opacity:.48;box-shadow:none}@keyframes cardIn{0%{transform:translateY(16px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}@keyframes pop{50%{transform:scale(1.06)}}@keyframes glow{0%{transform:translateY(0)}to{transform:translateY(-5px)}}@keyframes shake{25%{transform:translate(-6px)}75%{transform:translate(6px)}}@media(prefers-reduced-motion:reduce){.train-car,.wrong,.passenger,.result-card{animation:none!important;transition:none!important}}
