.panda-lobby-layout{display:grid;grid-template-columns:minmax(0,1fr) 310px;gap:24px;margin-top:25px}.panda-lobby h2{font-size:29px;margin:20px 0 15px}.panda-lobby>p{font-size:15px;color:#c5d5dc}.panda-lobby h3{margin-top:26px}.panda-level-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:17px 0 24px}.panda-level-picker button{display:grid;gap:7px;min-height:80px;padding:15px 12px;text-align:left;border:1px solid #5c7782;border-radius:13px;background:#223840}.panda-level-picker button strong{font-size:17px}.panda-level-picker button span{font-size:12px;color:#bfced5}.panda-level-picker button[aria-pressed=true]{border-color:var(--yellow);box-shadow:0 0 0 2px #ffd96715;background:#3d4232}.panda-level-summary{display:flex;align-items:center;justify-content:space-between;gap:20px}.panda-level-summary strong{font-size:18px}.panda-level-summary p{color:var(--muted);font-size:13px}.panda-level-summary .primary{white-space:nowrap;font-size:14px}.panda-content-status{background:#2c3b3d;border:1px solid #67766b;padding:18px;border-radius:13px;margin:18px 0}.panda-content-status strong{color:#ffe6a0;font-size:15px}.panda-content-status p{font-size:13px;color:#c6d3d6;margin-bottom:0}.panda-demo-card{border-top:1px solid var(--line);margin-top:25px;padding-top:24px}.panda-demo-card h3{margin:15px 0;font-size:21px}.panda-demo-card p{font-size:14px;color:#c4d4da}.panda-demo-card small{display:block;font-size:12px;color:var(--muted);margin-top:14px}.panda-demo-card .secondary{background:#ffd967;color:#142227;border:1px solid #ffd967;font-weight:700;min-height:46px}.panda-howto{align-self:start}.panda-howto p,.panda-howto li{font-size:14px;color:#c1d1d8;line-height:1.8}.panda-howto ol{padding-left:19px}.panda-lobby-art{height:180px;background:linear-gradient(150deg,#385966,#244334);border-radius:15px;display:flex;align-items:center;justify-content:center;gap:10px;position:relative;margin-bottom:25px}.panda-lobby-art>span{font-size:85px;position:absolute;left:50%;top:10px;transform:translateX(-50%)}.panda-lobby-art i{font-style:normal;font-size:24px;border:2px solid #f6de8d;background:#e9f1db;color:#243b42;border-radius:9px;padding:5px 12px;margin-top:100px;box-shadow:0 4px 0 #0003}.panda-game-wrap{max-width:1000px;margin:20px auto}.panda-topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:16px 0}.panda-topbar .secondary{min-height:42px;font-size:13px;padding:8px 15px}.panda-hud{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;background:#1e333d;border:1px solid #546f7c;border-radius:14px;padding:12px 18px}.panda-hud>span{font-size:12px;color:#b9cbd3}.panda-hud strong{display:block;font-size:24px;color:#fff0b7;line-height:1.35}.panda-prompt{text-align:center;background:#fff5db;color:#18303b;border-radius:15px;margin:14px 0;padding:13px 18px;box-shadow:0 4px 0 #0003}.panda-prompt>span{font-size:11px;letter-spacing:.6px;color:#36545d}.panda-prompt h2{font-size:31px;line-height:1.35;margin:3px 0;color:#102832}.panda-stage{position:relative;overflow:hidden;isolation:isolate;background:#1e4355;height:560px;min-height:310px;border:2px solid #627e87;border-radius:22px;outline-offset:5px;touch-action:pan-y;user-select:none;-webkit-user-select:none}.panda-stage:focus-visible{outline:3px solid var(--yellow)}.panda-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}.panda-portals{position:absolute;inset:0;pointer-events:none;z-index:2}.panda-portal{position:absolute;transform:translate(-50%,-100%);min-height:118px;padding:11px 5px 9px;border-radius:50% 50% 12px 12px / 25% 25% 12px 12px;border:5px solid #9ddbd1;background:linear-gradient(#f0fff4,#ceeadd);box-shadow:0 6px 0 #19343f80,0 0 25px #a9f5db38;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;color:#152f3b;will-change:top,left,width}.panda-portal[hidden]{display:none}.panda-portal.lane-1{border-color:#c1c4fb;background:linear-gradient(#f4f3ff,#dddfff)}.panda-portal.lane-2{border-color:#f2b8be;background:linear-gradient(#fff1f1,#f8dce2)}.panda-portal.is-chosen{outline:3px solid #ffdc65;outline-offset:4px;box-shadow:0 7px 0 #152f3c80,0 0 30px #ffd96755}.panda-portal.is-correct{border-color:#73f5ad;outline-color:#a2ffd0;background:#dcffe6;box-shadow:0 0 26px #8dffc790}.panda-portal-hanzi{font-family:'Noto Sans SC',system-ui,sans-serif;font-size:34px;font-weight:700;line-height:1.3;color:#132d38;overflow-wrap:anywhere;max-width:100%}.panda-portal-pinyin{font-size:17px;font-weight:600;line-height:1.4;color:#263d49;max-width:100%;overflow-wrap:anywhere;margin-top:4px}.panda-portal-lane{font-size:10px;font-weight:700;letter-spacing:.4px;color:#405460;margin-top:9px}.panda-portal.long-word .panda-portal-hanzi{font-size:24px}.panda-countdown{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;z-index:4;pointer-events:none;background:#17394a25;text-shadow:0 3px 10px #0008}.panda-countdown strong{font-size:90px;line-height:1.1;color:#fff4be}.panda-countdown span{font-size:19px;color:white;font-weight:700;margin-top:12px}.panda-countdown[hidden]{display:none}.panda-overlay{position:absolute;inset:0;display:grid;place-items:center;padding:20px;background:#0a1b2bba;z-index:6;backdrop-filter:blur(3px);overflow:auto}.panda-overlay[hidden]{display:none}.panda-overlay-card{width:min(100%,440px);background:#1c303a;color:#f4f6f7;border:1px solid #718d96;border-radius:20px;padding:27px;box-shadow:0 20px 40px #0005;text-align:center;max-height:100%;overflow:auto}.panda-overlay-card h2{font-size:27px;margin:17px 0 13px}.panda-overlay-card p{font-size:14px;line-height:1.7}.panda-overlay-card p b{font-size:25px;font-family:'Noto Sans SC',sans-serif;color:var(--yellow)}.panda-overlay-card .primary,.panda-overlay-card .secondary{display:block;min-height:44px;font-size:14px;width:100%;margin-top:12px;justify-content:center;text-align:center}.panda-overlay-card small{display:block;font-size:12px;color:#b9cbd2;margin-top:15px}.panda-end-score{font-size:43px;color:var(--yellow);font-weight:700}.panda-end-score small{font-size:15px;color:#cbd9df;margin-top:3px;font-weight:400}.panda-result-record{border-top:1px solid #435e6b;padding-top:13px;color:#d0e0e5}.panda-end-actions{display:flex;flex-wrap:wrap;gap:10px}.panda-end-actions .primary,.panda-end-actions .secondary{margin-top:0;flex:1 1 135px}.panda-end-actions .text-link{width:100%;padding:10px;min-height:40px}.panda-lane-buttons{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:14px 0}.panda-lane-buttons button{border:1px solid #6e8a97;border-radius:13px;padding:12px;background:#233f4c;min-height:52px;font-weight:600;font-size:15px;color:#e8f3f7;touch-action:manipulation}.panda-lane-buttons button small{display:block;color:#b5cbd4;font-size:11px;margin-top:2px}.panda-lane-buttons button[aria-pressed=true]{color:#172d37;background:#ffe38c;border-color:#ffe38c}.panda-lane-buttons button[aria-pressed=true] small{color:#45504b}.panda-announcement{font-size:14px;color:#c4d8df;margin:12px 0;min-height:25px;text-align:center}.panda-controls-help{font-size:13px;color:var(--muted);margin-top:18px}.panda-controls-help p{font-size:13px}.panda-stat-panel{display:flex;align-items:center;gap:18px;margin-top:26px}.panda-stat-panel>div{flex:1;min-width:0}.panda-stat-panel h2{font-size:19px}.panda-stat-panel p{font-size:14px;color:var(--muted);margin:7px 0}.panda-stat-panel small{font-size:12px;color:var(--muted)}.panda-mini-icon{color:var(--yellow)}
@media(max-width:1100px){.panda-lobby-layout{grid-template-columns:1fr}.panda-howto{display:grid;grid-template-columns:200px 1fr;gap:0 25px}.panda-howto .panda-lobby-art{grid-row:1/5;margin:0}.panda-howto>h2,.panda-howto>ol,.panda-howto>p{grid-column:2}.panda-stage{height:510px}.panda-portal-hanzi{font-size:29px}.panda-portal-pinyin{font-size:15px}}
@media(max-width:600px){body.panda-playing #app>.eyebrow,body.panda-playing #app>.subtitle{display:none}body.panda-playing #app>h1{font-size:22px;margin:0 0 12px}.panda-game-wrap{margin:0 auto}.panda-topbar{margin:10px 0}.panda-topbar>.text-link{font-size:12px}.panda-topbar .badge{font-size:10px}.panda-topbar .secondary{min-height:40px;padding:8px 12px}.panda-hud{padding:9px 12px;gap:7px;border-radius:12px}.panda-hud>span{font-size:10px}.panda-hud strong{font-size:21px}.panda-prompt{padding:8px 12px;margin:11px 0}.panda-prompt h2{font-size:27px;margin:2px 0}.panda-prompt>span{font-size:10px}.panda-stage{height:clamp(310px,44dvh,390px);border-radius:17px;min-height:300px}.panda-portal{border-width:3px;border-radius:16px 16px 9px 9px;min-height:94px;padding:8px 3px 6px}.panda-portal-hanzi{font-size:24px;line-height:1.3}.panda-portal.long-word .panda-portal-hanzi{font-size:18px}.panda-portal-pinyin{font-size:12px;line-height:1.4}.panda-portal-lane{font-size:8px;letter-spacing:0;margin-top:5px}.panda-portal.is-chosen{outline-width:2px;outline-offset:3px}.panda-countdown strong{font-size:72px}.panda-countdown span{font-size:16px}.panda-lane-buttons{gap:9px;margin:11px 0}.panda-lane-buttons button{font-size:13px;padding:8px 5px;min-height:48px}.panda-lane-buttons button small{display:none}.panda-announcement{font-size:12px;line-height:1.6;min-height:22px;margin:10px 0}.panda-overlay{padding:10px}.panda-overlay-card{padding:17px 16px;border-radius:15px}.panda-overlay-card h2{font-size:23px;margin:12px 0 10px}.panda-overlay-card p{font-size:12px;margin:8px 0}.panda-overlay-card p b{font-size:23px}.panda-overlay-card .badge{font-size:10px}.panda-overlay-card small{font-size:10px;margin-top:10px}.panda-end-score{font-size:32px}.panda-end-score small{font-size:13px}.panda-end-actions{gap:8px}.panda-end-actions .primary,.panda-end-actions .secondary{font-size:12px;padding:9px 8px;min-height:41px;flex-basis:110px}.panda-end-actions .text-link{font-size:11px;min-height:32px;padding:5px}.panda-result-record{padding-top:8px}.panda-level-picker{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.panda-level-picker button{padding:12px;min-height:72px}.panda-level-picker button strong{font-size:16px}.panda-lobby{padding:22px}.panda-lobby h2{font-size:26px}.panda-lobby>p{font-size:14px}.panda-level-summary{flex-direction:column;align-items:stretch;gap:9px}.panda-level-summary .primary{justify-content:center}.panda-howto{display:block}.panda-lobby-art{margin-bottom:25px!important}.panda-content-status p,.panda-demo-card p{font-size:13px}.panda-demo-card .secondary{width:100%}.panda-stat-panel{flex-wrap:wrap;gap:13px}.panda-stat-panel .secondary{width:100%;text-align:center}.panda-stat-panel h2{font-size:18px}.panda-stat-panel p{font-size:13px}}
@media(prefers-reduced-motion:reduce){.panda-portal,.panda-lane-buttons button{transition:none;box-shadow:none}.panda-overlay{backdrop-filter:none}}
/* Keep the target, panda and lane buttons together in ordinary viewports. */
body.panda-playing #app>.eyebrow,body.panda-playing #app>.subtitle{display:none}body.panda-playing #app>h1{font-size:24px;margin:0 0 8px}body.panda-playing main{padding-top:14px}.panda-game-wrap{margin:10px auto}.panda-topbar{margin:10px 0}.panda-hud{padding:8px 16px}.panda-hud strong{font-size:22px}.panda-prompt{padding:9px 16px;margin:10px 0}.panda-prompt h2{font-size:29px}.panda-stage{height:clamp(340px,calc(100dvh - 465px),560px)}
@media(max-width:600px){body.panda-playing #app>h1{font-size:22px}.panda-hud{padding:8px 12px}.panda-hud strong{font-size:21px}.panda-prompt{padding:8px 12px}.panda-prompt h2{font-size:27px}.panda-stage{height:clamp(300px,41dvh,360px);min-height:290px}}

.panda-difficulty-picker{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.panda-difficulty-picker button{display:flex;flex-direction:column;gap:7px;text-align:left;padding:15px;border:1px solid #617b85;border-radius:13px;background:#203640;color:#edf6fa;min-width:0}.panda-difficulty-picker strong{font-size:18px}.panda-difficulty-picker span{font-size:13px}.panda-difficulty-picker small{font-size:11px;color:#c3d4db}.panda-difficulty-picker button[aria-pressed=true]{border-color:#ffdf70;background:#394332;box-shadow:inset 0 0 0 1px #ffdf70}.panda-difficulty-picker button[aria-pressed=true] strong{color:#ffdf70}@media(max-width:600px){.panda-difficulty-picker{grid-template-columns:1fr}.panda-difficulty-picker button{display:grid;grid-template-columns:1fr auto;padding:12px}.panda-difficulty-picker small{grid-column:1/-1}}

.panda-portal.is-blocked{border-color:#f17c7c;background:linear-gradient(#ffe2d7,#dca2a8);outline-color:#f47878;box-shadow:0 0 0 3px #682d3b}.panda-portal.is-blocked:after{content:"\00d7";position:absolute;right:4px;top:-12px;display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#a12d44;color:white;font-size:26px;font-weight:800;border:2px solid #ffe1c8}.panda-capture{position:absolute;top:14px;left:50%;transform:translateX(-50%);width:max-content;max-width:92%;text-align:center;padding:9px 15px;border:1px solid #f8bc91;background:#482d3aee;color:#fff0d4;border-radius:12px;font-size:14px;font-weight:700;z-index:5;pointer-events:none}.panda-capture[hidden]{display:none}@media(max-width:600px){.panda-capture{font-size:12px;padding:7px 10px}}

.panda-stage canvas.panda-characters{z-index:3;pointer-events:none}

.panda-lobby-art>span.panda-lobby-mascot{width:144px;height:122px;background:url("assets/characters-run-v1.png") no-repeat 0 0 / 576px auto;top:0}

/* A successful gate becomes a real opening; its rim passes in front of the runner. */
.panda-portal-departing{pointer-events:none;will-change:top,left,width,height,opacity}
.panda-portal-departing.is-entering{background:radial-gradient(ellipse at center,#a9ffd40a 35%,#9df3c422 70%,#9df3c44d 100%);border-color:#9df3c4;outline:2px solid #e0ffe9;outline-offset:3px;box-shadow:inset 0 0 18px #afffd155,0 0 20px #afffd144;border-radius:48% 48% 12px 12px / 28% 28% 12px 12px}
.panda-portal-departing.is-entering>span{visibility:hidden}
.panda-portal-departing:not(.is-entering){filter:brightness(.82)}
@media(prefers-reduced-motion:reduce){.panda-portal-departing{display:none}}

.panda-portal-departing>span{visibility:hidden}
.panda-portal-departing:not(.is-entering){background:transparent;outline:none;box-shadow:none;border-color:#c9d7dd55}
/* Mobile game owns the available viewport; browser toolbars remain native. */
@media (max-width:700px), (max-height:500px) and (pointer:coarse){
 body.panda-playing{overflow:hidden;overscroll-behavior:none;padding:0;min-height:0}
 body.panda-playing .sidebar,body.panda-playing .shell>header,body.panda-playing .shell>footer,body.panda-playing #mobile-nav,body.panda-playing #app>h1,body.panda-playing #app>.eyebrow,body.panda-playing #app>.subtitle{display:none}
 body.panda-playing .shell{margin:0;padding:0;min-height:0}
 body.panda-playing main{margin:0;padding:0;min-height:0}
 body.panda-playing .panda-game-wrap{position:fixed;inset:0;z-index:120;width:100%;max-width:none;height:100vh;height:100dvh;margin:0;padding:calc(6px + env(safe-area-inset-top,0px)) calc(8px + env(safe-area-inset-right,0px)) calc(8px + env(safe-area-inset-bottom,0px)) calc(8px + env(safe-area-inset-left,0px));box-sizing:border-box;display:grid;grid-template-rows:44px 48px auto minmax(0,1fr) 54px;gap:6px;background:#111d21}
 body.panda-playing .panda-topbar{margin:0;gap:6px;min-width:0}
 body.panda-playing .panda-topbar .secondary{min-height:40px;padding:7px 12px}
 body.panda-playing .panda-topbar .badge{font-size:10px;white-space:nowrap}
 body.panda-playing .panda-hud{margin:0;padding:4px 12px;gap:5px;border-radius:10px}
 body.panda-playing .panda-hud strong{font-size:21px;line-height:1.15}
 body.panda-playing .panda-hud>span{font-size:10px}
 body.panda-playing .panda-prompt{margin:0;padding:6px 10px;border-radius:12px;box-shadow:none;min-width:0}
 body.panda-playing .panda-prompt>span{font-size:10px;letter-spacing:0;line-height:1.4}
 body.panda-playing .panda-prompt h2{font-size:clamp(21px,6vw,29px);line-height:1.15;margin:3px 0;overflow-wrap:anywhere}
 body.panda-playing .panda-stage{height:100%;min-height:0;width:100%;border-radius:14px;outline-offset:0}
 body.panda-playing .panda-lane-buttons{margin:0;gap:7px;min-height:0}
 body.panda-playing .panda-lane-buttons button{font-size:14px;padding:8px 4px;min-height:48px}
 body.panda-playing .panda-lane-buttons small{display:none}
 body.panda-playing .panda-announcement{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);margin:0;padding:0}
 body.panda-playing .panda-controls-help{display:none}
 body.panda-playing .panda-overlay{position:fixed;inset:0;z-index:140;padding:calc(12px + env(safe-area-inset-top,0px)) calc(12px + env(safe-area-inset-right,0px)) calc(12px + env(safe-area-inset-bottom,0px)) calc(12px + env(safe-area-inset-left,0px));overflow:auto;overscroll-behavior:contain;background:#08171fe8}
 body.panda-playing .panda-overlay-card{width:min(100%,460px);max-height:100%;padding:20px;box-sizing:border-box;overflow:auto;overscroll-behavior:contain}
 body.panda-playing .panda-overlay-card h2{font-size:25px;line-height:1.25;margin:14px 0}
 body.panda-playing .panda-overlay-card p{font-size:14px;line-height:1.55}
 body.panda-playing .panda-end-score{font-size:42px}
 body.panda-playing .panda-end-actions .primary,body.panda-playing .panda-end-actions .secondary{font-size:14px;min-height:46px}
 body.panda-playing .panda-end-actions .text-link{min-height:42px;font-size:13px}
}
@media (max-height:500px) and (orientation:landscape) and (pointer:coarse){
 body.panda-playing .panda-game-wrap{grid-template-columns:190px minmax(0,1fr);grid-template-rows:40px 46px minmax(0,1fr) 48px;gap:5px 10px}
 body.panda-playing .panda-topbar{grid-column:1/-1}
 body.panda-playing .panda-hud{grid-column:1;grid-row:2}
 body.panda-playing .panda-prompt{grid-column:1;grid-row:3;align-self:start;padding:12px 8px}
 body.panda-playing .panda-prompt h2{font-size:24px}
 body.panda-playing .panda-stage{grid-column:2;grid-row:2/4}
 body.panda-playing .panda-lane-buttons{grid-column:2;grid-row:4}
}

@media (max-width:700px) and (max-height:540px) and (orientation:portrait){
 body.panda-playing .panda-game-wrap{grid-template-rows:38px 42px auto minmax(0,1fr) 48px;gap:4px;padding-top:calc(4px + env(safe-area-inset-top,0px));padding-bottom:calc(4px + env(safe-area-inset-bottom,0px))}
 body.panda-playing .panda-topbar .secondary{min-height:36px}
 body.panda-playing .panda-hud strong{font-size:19px}
 body.panda-playing .panda-prompt{padding:4px 8px}
 body.panda-playing .panda-prompt h2{font-size:21px}
 body.panda-playing .panda-lane-buttons button{min-height:44px}
}