:root{color-scheme:dark;--ink:#fffaf1;--muted:#dce7df;--panel:rgba(13,38,31,.95);--line:rgba(243,198,93,.5);--mint:#58e0c1;--gold:#f5c85a;--danger:#ff8176;font-family:Inter,"Noto Sans TC","Noto Sans JP",system-ui,sans-serif;background:#10271f;color:var(--ink)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#10271f}button,select{font:inherit}button{border:0;color:inherit;cursor:pointer}button:focus-visible,select:focus-visible,a:focus-visible{outline:3px solid #fff;outline-offset:3px}.sr-only{position:absolute;width:1px;height:1px;clip:rect(0,0,0,0);overflow:hidden}[hidden]{display:none!important}.loading-panel{z-index:90}.loading-card{background:rgba(14,39,32,.98)!important;border:1px solid var(--line)}.loading-track i{background:linear-gradient(90deg,var(--mint),var(--gold))!important}
.main-group{max-width:920px;margin:auto;background:#132d25}.main-screen{min-height:min(844px,100svh);padding:12px;background:linear-gradient(rgba(7,24,20,.04),rgba(7,24,20,.78)),url('../../assets/animal-parking-patrol-background.webp') center/cover}.main-header{height:58px;display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:10px;align-items:center}.main-header>strong{font-size:clamp(.96rem,4.5vw,1.3rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.home-link{width:58px;min-height:48px;display:grid;grid-template-columns:16px 28px;gap:4px;align-items:center;padding:5px;border-radius:14px;background:#fff;color:#1676b8;text-decoration:none;font-size:1.35rem}.home-link img{width:28px;height:28px;object-fit:contain}.locale-control select{max-width:132px;min-height:42px;border:1px solid var(--line);border-radius:12px;background:rgba(14,43,35,.97);color:#fff;padding:0 28px 0 10px}.main-hero{min-height:calc(min(844px,100svh) - 86px);display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px}.main-poster{width:100%;height:100%;min-height:0;object-fit:cover;object-position:center 50%;border-radius:22px;border:2px solid rgba(245,200,90,.65);box-shadow:0 18px 42px #07130e}.main-copy{padding:12px 14px 14px;border-radius:18px;background:rgba(13,39,32,.97);border:1px solid var(--line);box-shadow:0 10px 26px #07150f}.main-copy small,.game-guide>small,.chapter-panel small,.result-card>small{color:var(--gold);font-weight:900}.main-copy h1{font-size:clamp(1.38rem,6vw,2rem);margin:3px 0}.main-copy p{margin:0 0 8px;color:var(--muted);line-height:1.38}.main-progress{font-weight:850;color:#8ff7dc;margin:5px 0 10px}.primary-action{background:linear-gradient(#ffe58a,#f2b63f)!important;color:#3f2a0a!important;box-shadow:0 5px 0 #9b621b;font-weight:950}.main-copy .primary-action{width:100%;min-height:50px;border-radius:14px;font-size:1.1rem}.game-guide{padding:28px 22px 42px;background:#f4efdc;color:#18392f}.game-guide h2{margin:5px 0 10px;font-size:1.65rem}.game-guide p,.game-guide li{line-height:1.62}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.game-guide article{background:#fffdf5;border:1px solid #d6caa5;border-radius:18px;padding:18px}.game-guide h3{margin:3px 0 8px;color:#6e4819}.game-guide ol{padding-left:1.3rem;margin:0}
.stage-screen,.battle-screen{position:fixed;inset:0;background:#10271f;overflow:hidden}.stage-canvas,.battle-canvas{position:relative;width:100%;height:100%;margin:auto;overflow:hidden;background:linear-gradient(rgba(7,25,20,.46),rgba(7,25,20,.88)),url('../../assets/animal-parking-patrol-background.webp') center/cover}.stage-canvas{display:grid;grid-template-rows:82px 122px minmax(0,1fr);padding:12px;gap:10px}.stage-header,.battle-header{position:relative;z-index:4;display:grid;align-items:center;background:rgba(12,38,31,.96);border:1px solid var(--line);border-radius:18px}.stage-header{grid-template-columns:58px minmax(0,1fr) 58px;padding:8px;gap:10px}.stage-header button,.battle-header>button{width:48px;height:48px;border-radius:14px;background:#fff;color:#1676b8;font-size:1.6rem;font-weight:950}.stage-header div{display:grid;gap:3px;min-width:0}.stage-header strong{font-size:1.2rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-header span{color:var(--muted);font-size:.9rem}.stage-header img{width:58px;height:58px;object-fit:contain}.chapter-panel{position:relative;z-index:3;display:grid;align-content:center;gap:4px;padding:14px 18px;background:rgba(38,53,31,.95);border:1px solid rgba(245,200,90,.62);border-radius:18px}.chapter-panel strong{font-size:1.35rem}.chapter-panel p{margin:0;color:var(--muted);line-height:1.35}.stage-canvas:before{content:"";position:absolute;inset:210px 12% 14px;background:url('../../assets/animal-parking-patrol-cover.webp') center/contain no-repeat;opacity:.13;mask-image:radial-gradient(circle,#000 28%,transparent 72%);pointer-events:none}.stage-rail{position:relative;z-index:2;display:flex!important;align-items:center;gap:16px;min-width:0;overflow-x:auto!important;overflow-y:hidden;padding:18px calc(50% - 132px)!important;scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-x}.stage-rail::-webkit-scrollbar{display:none}.stage-card{position:relative;flex:0 0 264px;height:190px;scroll-snap-align:center;border-radius:24px;border:2px solid rgba(230,207,145,.44);overflow:hidden;background:linear-gradient(rgba(12,31,25,.2),rgba(12,31,25,.94)),url('../../assets/animal-parking-patrol-cover.webp') center/cover;text-align:left;padding:22px;display:grid;align-content:end;gap:5px;box-shadow:0 12px 26px #07130f}.stage-card.is-centered,.stage-card.selected{border-color:#ffe17d;box-shadow:0 0 0 4px rgba(255,225,125,.25),0 0 28px #59e0c0,0 16px 34px #06120d}.stage-card.locked{filter:saturate(.24) brightness(.55);cursor:not-allowed}.stage-card small{color:var(--gold);font-weight:900}.stage-card strong{font-size:1.7rem}.stage-card span{color:#deeee6}.stage-card .stars{font-size:1.15rem;color:var(--gold);letter-spacing:2px}
.battle-canvas{display:grid;grid-template-rows:76px 42px minmax(0,1fr) 74px;padding:10px;gap:8px}.battle-header{grid-template-columns:52px minmax(0,1fr) 70px 70px;gap:8px;padding:6px}.battle-title{display:grid;min-width:0}.battle-title small{color:var(--gold);font-weight:900}.battle-title strong{font-size:.86rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-stat{display:grid;text-align:center}.battle-stat small{color:var(--muted);font-size:.7rem}.battle-stat strong{font-size:1.15rem}.objective-bar{display:grid;place-items:center;padding:5px 12px;border:1px solid rgba(245,200,90,.48);border-radius:12px;background:rgba(11,56,45,.95);font-size:.88rem;font-weight:900;text-align:center;color:#f9e9b4}.traffic-board{--size:5;position:relative;align-self:center;justify-self:center;width:min(100%,min(68vh,690px));aspect-ratio:1;min-height:0;border:8px solid rgba(112,76,36,.92);border-radius:24px;background:linear-gradient(rgba(26,43,31,.08),rgba(26,43,31,.2)),url('../../assets/animal-parking-patrol-background.webp') center/cover;box-shadow:inset 0 0 0 3px rgba(255,235,170,.25),inset 0 0 32px #143026,0 18px 36px #05110c;overflow:visible;isolation:isolate;touch-action:manipulation}.traffic-board:after{content:"";position:absolute;inset:3.2%;z-index:0;border:2px solid rgba(255,255,255,.25);border-radius:16px;background-image:linear-gradient(to right,rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(to bottom,rgba(255,255,255,.13) 1px,transparent 1px);background-size:calc(100% / var(--size)) calc(100% / var(--size));pointer-events:none}.cart{position:absolute;z-index:3;left:calc((var(--x) + .5) * 100% / var(--size));top:calc((var(--y) + .5) * 100% / var(--size));width:calc(82% / var(--size));height:calc(82% / var(--size));padding:0;background:transparent;transform:translate(-50%,-50%);transition:transform .42s cubic-bezier(.2,.75,.25,1),opacity .42s;filter:drop-shadow(0 5px 4px #0a1710aa)}.cart img{width:100%;height:100%;object-fit:contain;transform:rotate(var(--rot));pointer-events:none}.cart .direction{position:absolute;right:-7px;bottom:-7px;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:#fff;color:#134235;border:2px solid #f4cb63;font-weight:950;box-shadow:0 3px 7px #0008}.cart .rule-badge{position:absolute;left:-7px;top:-7px;display:grid;place-items:center;min-width:27px;height:27px;padding:0 4px;border-radius:999px;background:#123f34;border:2px solid #f4cb63;font-size:.85rem;box-shadow:0 3px 7px #0008}.cart.blocked-signal{filter:grayscale(.45) brightness(.72) drop-shadow(0 4px 3px #08120d)}.cart.blocked-signal .rule-badge{background:#782f2d}.cart.available{filter:drop-shadow(0 0 9px #83ffe0) drop-shadow(0 6px 4px #0a1710aa)}.cart.hint{animation:cartHint .55s ease-in-out 4}.cart.bump{animation:cartBump .28s ease-in-out}.cart.exiting{transform:translate(calc(-50% + var(--tx)),calc(-50% + var(--ty))) scale(.94);opacity:0}.battle-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}.battle-actions button{min-height:62px;border-radius:16px;background:rgba(18,68,56,.97);border:1px solid var(--line);display:grid;grid-template-columns:auto auto;justify-content:center;align-items:center;gap:8px}.battle-actions span{font-size:1.35rem;color:var(--gold)}.battle-actions b{font-size:.92rem}.battle-actions button:disabled{opacity:.38}.toast{position:fixed;z-index:70;left:50%;bottom:88px;transform:translate(-50%,16px);max-width:min(88vw,520px);padding:10px 16px;border-radius:999px;background:#102a22;border:1px solid var(--gold);box-shadow:0 10px 30px #000;color:#fff;text-align:center;font-weight:850;opacity:0;pointer-events:none;transition:.2s}.toast.show{opacity:1;transform:translate(-50%,0)}
.modal-layer,.tutorial-layer{position:absolute;z-index:30;inset:0;display:grid;place-items:center;padding:18px;background:rgba(4,13,10,.84);backdrop-filter:blur(5px)}.tutorial-layer{position:fixed}.result-card,.dialog-card,.tutorial-card{position:relative;width:min(100%,460px);border-radius:24px;background:linear-gradient(160deg,#1b503f,#102c24);border:1px solid #f4cf71;padding:24px;text-align:center;box-shadow:0 25px 70px #000}.result-card>img,.tutorial-card>img{width:112px;height:112px;object-fit:contain;margin:-10px auto -5px}.result-card h2,.dialog-card h2,.tutorial-card h2{margin:6px 0 10px}.result-card p,.dialog-card p{color:var(--muted)}.result-stars{font-size:2rem;color:var(--gold);letter-spacing:4px}.best-text{font-weight:900;color:#8ff7dc!important}.modal-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.dialog-card .modal-actions{grid-template-columns:1fr 1fr}.modal-actions button{min-height:48px;border-radius:13px;background:#245c4d;font-weight:900}.tutorial-card{text-align:left}.tutorial-card ol{line-height:1.55;padding-left:1.35rem}.tutorial-card .primary-action{width:100%;min-height:50px;border-radius:14px}.modal-close{position:absolute;right:12px;top:12px;width:42px;height:42px;border-radius:50%;background:#245c4d;font-size:1.4rem}
@keyframes cartHint{50%{transform:translate(-50%,-56%) scale(1.1);filter:drop-shadow(0 0 18px #fff) drop-shadow(0 0 26px #62fbd4)}}@keyframes cartBump{25%{transform:translate(calc(-50% - 5px),-50%)}75%{transform:translate(calc(-50% + 5px),-50%)}}@media(min-width:700px){.main-hero{grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);grid-template-rows:1fr;align-items:end}.main-copy{margin-bottom:18px}}@media(max-width:600px){.locale-control select{max-width:106px;font-size:.82rem}.main-header>strong{font-size:.9rem}.guide-grid{grid-template-columns:1fr}.game-guide{padding:24px 14px}.modal-actions{grid-template-columns:1fr}.result-card{padding:18px}.result-card>img{width:92px;height:92px}.battle-header{grid-template-columns:48px minmax(0,1fr) 56px 56px}.battle-stat strong{font-size:1rem}.battle-stat small{font-size:.62rem}.traffic-board{border-width:6px}.cart .direction{width:24px;height:24px;font-size:.78rem}.cart .rule-badge{min-width:24px;height:24px;font-size:.72rem}}
@media(max-height:560px) and (orientation:landscape){.stage-canvas{grid-template-rows:66px 80px minmax(0,1fr);padding:7px}.stage-header{padding:4px}.chapter-panel{padding:7px 14px}.battle-canvas{grid-template-rows:58px 34px minmax(0,1fr) 54px;padding:6px;gap:5px}.battle-header>button{width:42px;height:42px}.battle-actions button{min-height:48px}.traffic-board{width:min(100%,278px);border-width:5px}.modal-layer{padding:6px}.result-card{padding:8px 14px}.result-card>img{width:62px;height:62px;margin:-3px auto -8px}.result-card h2{font-size:1.3rem;margin:2px 0}.result-stars{font-size:1.45rem}.result-card p{margin:4px 0}.modal-actions button{min-height:42px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.stage-rail{touch-action:pan-y}
.stage-header .utility-button,.battle-header .utility-button{background:#245c4d;color:#fff;border:1px solid var(--line);font-size:1.2rem}.battle-header{grid-template-columns:52px minmax(0,1fr) 64px 64px 52px;gap:7px}.settings-actions{display:grid;gap:10px}.settings-actions button{min-height:50px;border-radius:14px;background:#245c4d;font-weight:900}@media(max-width:600px){.battle-header{grid-template-columns:46px minmax(0,1fr) 48px 48px 46px;gap:4px}.battle-header>button{width:42px;height:42px}}@media(max-width:360px){.battle-header{grid-template-columns:44px minmax(0,1fr) 42px 42px 44px;gap:2px}.battle-stat small{font-size:.56rem}.battle-title strong{font-size:.74rem}}

@media (max-height:560px) and (orientation:landscape) {
  .battle-canvas {
    grid-template-columns:minmax(0,1fr) 520px;
    grid-template-rows:108px minmax(0,1fr);
    padding:12px;
    gap:12px 24px;
  }
  .battle-header {
    grid-column:1 / -1;
    grid-row:1;
    grid-template-columns:104px minmax(0,1fr) 126px 126px 104px;
    gap:12px;
    padding:6px;
  }
  .battle-header>button { width:96px; height:96px; font-size:2.2rem; }
  .battle-title small,.battle-stat small { font-size:1.4rem; }
  .battle-title strong { font-size:1.75rem; }
  .battle-stat strong { font-size:2rem; }
  .objective-bar {
    grid-column:2;
    grid-row:2;
    align-self:start;
    min-height:78px;
    font-size:1.55rem;
    padding:10px 18px;
  }
  .traffic-board {
    grid-column:1;
    grid-row:2;
    width:min(100%,680px);
    border-width:10px;
  }
  .battle-actions {
    grid-column:2;
    grid-row:2;
    align-self:end;
    grid-template-columns:1fr;
    gap:12px;
  }
  .battle-actions button { min-height:96px; }
  .battle-actions span { font-size:2rem; }
  .battle-actions b { font-size:1.55rem; }
  .cart .direction { width:54px; height:54px; right:-12px; bottom:-12px; font-size:1.45rem; }
  .cart .rule-badge { min-width:54px; height:54px; left:-12px; top:-12px; font-size:1.35rem; }
  .dialog-card { width:min(100%,760px); padding:28px; font-size:1.55rem; }
  .dialog-card h2 { font-size:2rem; }
  .settings-actions { gap:14px; }
  .settings-actions button,.modal-actions button { min-height:96px; font-size:1.45rem; }
}