.runner-mission { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:22px; text-align:center; padding:30px; background:#172b24; color:#f0e7d3; }
.runner-mission .eyebrow { font-size:10px; letter-spacing:3px; color:#d0b780; }
.runner-mission h1 { font-size:34px; letter-spacing:5px; }
.runner-mission>p:not(.eyebrow) { font-size:14px; line-height:2.2; color:#c8cfb6; }
.runner-mission .primary { max-width:280px; margin-top:12px; background:#d0b780; color:#233c30; border-color:#dbcba9; }
.runner-mission-mark { font-size:56px; color:#d0b780; }
.runner-select { display:flex; flex-direction:column; gap:12px; padding:22px 20px max(18px,env(safe-area-inset-bottom)); background:linear-gradient(#f7f3e8d9,#e4e9d6f2),var(--game-background) center/cover; }
.runner-select-heading { flex:none; text-align:center; }
.runner-select-heading h1 { font-size:28px; letter-spacing:3px; margin:8px 0; }
.runner-select-heading p:last-child { font-size:11px; color:#7a826b; line-height:1.7; }
.runner-cards { display:flex; flex-direction:column; flex:1; min-height:0; gap:10px; }
.runner-cat-card { position:relative; flex:1; min-height:96px; width:100%; display:flex; align-items:center; padding:9px 14px 9px 3px; background:#fffdf5e8; border:1px solid #c9ccb4; border-radius:12px; text-align:left; box-shadow:0 3px 8px #45593909; overflow:hidden; }
.runner-cat-card canvas { width:36%; height:100%; min-height:85px; flex:none; object-fit:contain; }
.runner-cat-copy { flex:1; min-width:0; padding:5px 0; }
.runner-cat-copy strong { font-size:20px; font-family:"Songti SC",serif; letter-spacing:2px; font-weight:500; }
.runner-cat-type { display:inline-block; margin-left:9px; font-size:10px; color:#7c886a; }
.runner-cat-special { display:block; font-size:13px; margin:8px 0 5px; color:#446249; }
.runner-cat-special small { font:7px sans-serif; color:#a79061; letter-spacing:1px; margin-right:7px; }
.runner-cat-copy p { font-size:10px; line-height:1.7; color:#8a8e79; }
.runner-cat-card[aria-pressed="true"] { border:2px solid #b29760; background:#fff9e8; box-shadow:0 4px 12px #ad8a3530; }
.runner-cat-card[aria-pressed="true"]::after { content:"✓"; position:absolute; right:9px; top:8px; color:#997b42; font-size:12px; }
.runner-cat-card.is-reacting canvas { animation:runner-select-pop .5s ease both; }
.runner-select-footer { flex:none; }
#runner-selection-note { min-height:18px; font-size:10px; color:#7c846e; text-align:center; margin-bottom:9px; }
.runner-play { display:flex; flex-direction:column; background:#f8f2e3; }
.runner-hud { display:flex; align-items:center; justify-content:space-between; padding:12px 18px 8px; gap:10px; flex:none; }
.runner-score { font:24px/1.3 Georgia,serif; color:#435b45; white-space:nowrap; }
.runner-score small { font:11px sans-serif; color:#90967e; }
.runner-clock { display:flex; flex-direction:column; gap:4px; align-items:flex-end; font:16px/1.3 ui-monospace,monospace; color:#56664f; }
.runner-clock small { font:8px sans-serif; letter-spacing:1px; color:#8b927c; }
.runner-pause { width:44px; min-width:44px; border:1px solid #c9cbb2; border-radius:50%; background:transparent; font-size:18px; }
.runner-distance { flex:none; height:3px; margin:0 18px 6px; background:#dedfcb; }
#runner-distance-fill { display:block; height:100%; width:0; background:#a99b68; }
.runner-play-area { flex:1; position:relative; min-height:235px; overflow:hidden; touch-action:none; }
#runner-canvas { display:block; width:100%; height:100%; outline-offset:-3px; }
.runner-canvas-note { position:absolute; top:12px; left:18px; right:18px; font-size:11px; color:#6e7d64; text-align:center; pointer-events:none; line-height:1.6; }
.runner-play-footer { flex:none; padding:9px 18px max(14px,env(safe-area-inset-bottom)); background:#f8f2e3; }
#runner-control-note { text-align:center; color:#7f866d; font-size:11px; min-height:18px; margin-bottom:8px; }
.runner-controls { display:flex; gap:10px; }
.runner-controls button { flex:1; min-width:0; min-height:50px; }
#runner-skill { background:#b09a68; border:1px solid #a58b59; color:#fffcf1; font-size:12px; border-radius:5px; padding:8px; }
#runner-skill:disabled { background:#e4dfcc; color:#8d917b; border-color:#ccc7b1; opacity:1; }
.runner-overlay { position:absolute; z-index:4; inset:0; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:20px; padding:24px; background:#edf0decb; backdrop-filter:blur(3px); text-align:center; }
#runner-countdown { font:72px/1.1 Georgia,serif; color:#416047; letter-spacing:3px; }
.runner-overlay p { font-size:12px; color:#6d7b61; }
.runner-overlay button { max-width:230px; }
.runner-result { display:flex; align-items:center; flex-direction:column; justify-content:center; text-align:center; padding:18px 25px max(18px,env(safe-area-inset-bottom)); background:radial-gradient(ellipse at 50% 24%,#fffff0,#ecebd6 72%); }
.runner-result h1 { font-size:31px; margin:10px 0 0; letter-spacing:3px; }
#runner-finish-art { display:block; width:100%; max-width:320px; height:190px; object-fit:contain; }
#runner-result-cat { font-size:13px; color:#6e7e65; margin-bottom:16px; }
.runner-result-stats { display:flex; width:100%; border-top:1px solid #c9ceb2; border-bottom:1px solid #c9ceb2; padding:17px 0; margin:0; }
.runner-result-stats div { flex:1; }
.runner-result-stats dt { font-size:10px; color:#7e866c; letter-spacing:1px; margin-bottom:9px; }
.runner-result-stats dd { font:29px/1.2 Georgia,serif; margin:0; color:#466044; }
.runner-result-stats small { font:12px sans-serif; color:#7e866c; }
#runner-best { font-size:11px; line-height:1.8; color:#7f866c; margin:15px 0 20px; }
.runner-result-buttons { display:grid; gap:9px; width:100%; }
.runner-end { display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:30px; gap:22px; background:#e8ecda; }
.runner-end h1 { font-size:27px; line-height:1.8; }
.runner-end p:not(.eyebrow) { color:#7a856c; font-size:13px; line-height:2; }
.runner-end .primary,.runner-end .secondary { max-width:300px; }
.chapter-end .next-quest { padding:14px; margin-bottom:15px; }
#enter-runner { margin-bottom:9px; }
@keyframes runner-select-pop { 0%,100% { transform:scale(1); } 45% { transform:scale(1.06) rotate(-1deg); } }
@media(max-height:720px) { .runner-select { padding:13px 15px 12px; gap:9px; }.runner-select-heading h1 { font-size:24px; margin:5px 0; }.runner-cat-card { min-height:84px; }.runner-cat-copy strong { font-size:18px; }.runner-cat-special { margin:5px 0 3px; }.runner-hud { padding:8px 15px 6px; }.runner-play-footer { padding-top:6px; }#runner-finish-art { height:135px; }.runner-result h1 { font-size:26px; }.runner-result-stats { padding:12px 0; }#runner-best { margin:10px 0 15px; }.runner-mission { gap:16px; }.runner-mission h1 { font-size:29px; } }
@media(max-height:590px) { .runner-select-heading p:last-child { display:none; }.runner-cat-copy p { display:none; }.runner-cat-card { min-height:77px; }.runner-cat-card canvas { min-height:64px; }.runner-cards { gap:6px; }.runner-select-heading h1 { font-size:21px; }.runner-select .primary { min-height:44px; }.runner-result { padding:10px 24px; }#runner-finish-art { height:95px; }#runner-best { margin:9px 0; }.runner-play-area { min-height:210px; } }