:root{font-family:system-ui,-apple-system,"Segoe UI",sans-serif;color:#193344;background:#f5eedf;--ink:#193344;--muted:#718082;--orange:#df6749;--cream:#f5eedf}*{box-sizing:border-box}html,body{margin:0;height:100%;overscroll-behavior:none}body{height:100dvh}button,input{font:inherit}button{cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible{outline:3px solid #2b8291;outline-offset:3px}button{border:0}button:hover{filter:brightness(1.06)}[hidden]{display:none!important}#app{height:100%;display:flex;flex-direction:column;overflow:hidden}#top{height:40px;flex-shrink:0;background:#172d3c;color:#fff2d9;display:flex;align-items:center;justify-content:space-between;padding:0 14px;font-size:11px;gap:8px}#top b{letter-spacing:1.4px}#top b span{color:#edab7c;font-weight:500}#top button{height:36px;min-width:40px;background:transparent;color:inherit;padding:0 8px;font-size:12px;border-radius:6px}.top-actions{display:flex;gap:4px}#menu{flex:1;min-height:0;overflow:auto;background:radial-gradient(ellipse at 5% 10%,#fffaf0,transparent 70%),#f3eddf}.menu-layout{max-width:1180px;margin:auto;min-height:100%;display:grid;grid-template-columns:1.15fr 1fr;gap:70px;padding:46px 40px;align-items:center}.eyebrow{font-size:10px;letter-spacing:1.8px;font-weight:800;display:flex;align-items:center;gap:9px}.eyebrow>span{width:7px;height:7px;background:var(--orange);border-radius:50%}.hero h1{font-size:clamp(64px,7.5vw,100px);font-weight:950;line-height:.82;letter-spacing:-5px;margin:28px 0 22px}.hero h1>span{color:var(--orange)}.hero h1 small{display:block;font-size:16px;letter-spacing:5px;font-weight:650;margin:20px 0 0}.intro{font-size:17px;line-height:1.55;color:#61716f}.hero-scene{height:185px;position:relative;overflow:hidden;border-radius:16px;background:linear-gradient(#e6b7a3,#f9dca4);margin-top:24px}.sun{position:absolute;width:86px;height:86px;border-radius:50%;background:#fff0be;left:62%;top:16px;box-shadow:0 0 0 18px #fff1c024}.mountain{position:absolute;width:120%;height:120px;left:-10%;bottom:23px;clip-path:polygon(0 100%,0 52%,10% 62%,23% 6%,37% 57%,49% 18%,67% 75%,81% 5%,100% 56%,100% 100%)}.far{background:#bd9090;bottom:38px}.near{background:#618b88;transform:translateX(55px);height:92px}.hero-floor{position:absolute;bottom:0;width:100%;height:42px;background:#263f43;border-top:7px solid #dabb80}.hero-runner{position:absolute;width:67px;height:84px;bottom:36px;left:26%;filter:drop-shadow(4px 5px 0 #182e3322)}.hero-spark{position:absolute;left:57%;bottom:67px;color:#fff0b0;font-size:38px}.scene-caption{position:absolute;bottom:10px;left:16px;right:16px;font-size:8px;color:#f8e4b7;letter-spacing:2px;display:flex;justify-content:space-between}.hero-footer{display:flex;justify-content:space-between;margin-top:14px;font-size:8px;letter-spacing:1.2px;color:#6f7b70}.setup{background:#fffdf5;border:1px solid #ded8c8;border-radius:24px;padding:30px;box-shadow:0 15px 45px #39482c09}.setup>.eyebrow{color:#ba563e}.setup h2{font-size:28px;letter-spacing:-1px;margin:16px 0 8px}.setup-lead{font-size:12px;color:var(--muted);line-height:1.6;margin-bottom:25px}fieldset{border:0;padding:0;margin:0 0 22px}legend,.choice-row{font-weight:700;font-size:12px}legend{margin-bottom:12px}.device{display:flex;gap:10px}.dev{display:flex;flex:1;align-items:center;gap:10px;text-align:left;background:#f7f5ee;color:var(--ink);border:1px solid #e3dfd2;border-radius:12px;padding:15px 12px;font-weight:750;font-size:13px;min-height:68px}.dev svg{width:22px;height:26px;fill:none;stroke:currentColor;stroke-width:1.6;flex-shrink:0}.dev small{display:block;margin-top:5px;font-size:9px;font-weight:450;color:var(--muted)}.dev.active{background:#f9ebdd;border-color:#dc8464}.choice-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:18px 0}#counts{display:flex;gap:6px}.count{width:44px;height:44px;border-radius:10px;background:#eeede5;color:var(--ink);font-weight:800}.count.active{color:#fff3d8;background:var(--ink)}#names{display:grid;gap:8px}#names label{display:flex;align-items:center;gap:12px;font-size:12px;color:#667771}#names input{min-width:0;width:100%;height:44px;border:1px solid #dfddd2;border-radius:9px;padding:10px 12px;color:var(--ink);background:#fbfaf4}.check{display:flex;align-items:center;gap:9px;min-height:44px;font-size:11px;color:#6e7b73;margin:10px 0}.check input{width:18px;height:18px;accent-color:var(--orange)}.primary{display:block;background:var(--orange);color:#fff9e8;width:100%;padding:16px 20px;border-radius:12px;font-size:17px;font-weight:750;box-shadow:0 4px 0 #b94d34}.primary span{float:right}.hint{text-align:center;color:var(--muted);font-size:11px;line-height:1.5;margin:16px 0 20px}.record{border-top:1px solid #e9e5d9;padding-top:18px;display:flex;align-items:center;justify-content:space-between}.record>span{font-size:9px;font-weight:800;letter-spacing:1.4px;color:#7b877c}.record b{font-size:25px}.record small{font-size:12px;font-weight:500}#game{flex:1;min-height:0;display:flex;flex-direction:column;background:#172d3c;padding:6px;gap:5px;user-select:none;-webkit-user-select:none}#lanes{flex:1;min-height:0;display:flex;gap:6px}.lane{flex:1;min-width:0;min-height:0;position:relative;overflow:hidden;border-radius:13px;background:#e9c3a3;touch-action:none}.lane canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;top:10px;left:12px;right:12px;display:flex;align-items:center;justify-content:space-between;gap:8px;pointer-events:none;font-size:12px;color:#283e49}.hud-name{font-weight:800;max-width:45%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.hud-stats{display:flex;gap:12px;align-items:center}.hud-stats b{font-size:18px}.hud-stats small{font-size:10px}.lane-tip{position:absolute;bottom:10px;left:10px;right:10px;text-align:center;pointer-events:none;color:#fae9c4;font-size:10px;letter-spacing:1px}.over{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:12px;background:#142b3d60;backdrop-filter:blur(3px);text-align:center}.over.countdown{background:transparent;backdrop-filter:none;pointer-events:none}.over-card{background:#fff9e9;border:1px solid #e4c7a3;box-shadow:0 15px 50px #243a4525;border-radius:18px;padding:22px;width:min(330px,100%);max-height:100%;overflow:auto;color:var(--ink)}.countdown .over-card{width:auto;font-size:42px;font-weight:850;padding:12px 25px}.over h2{font-size:23px;margin:3px 0 12px}.over p{font-size:12px;line-height:1.6}.over .distance{font-size:34px;font-weight:850;margin:6px}.over .distance small{font-size:14px}.over ol{list-style:none;padding:0;margin:12px 0;font-size:12px}.over li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid #e9ddc7;gap:8px}.over button{border-radius:9px;padding:12px 16px;background:var(--orange);color:white;font-weight:750;min-height:44px}.over .result-sub{color:#758077}.game-footer{min-height:36px;display:flex;align-items:center;justify-content:space-between;color:#f2d7b2;font-size:10px;padding:0 6px;gap:8px}.game-footer button{background:#2d4653;color:#fff0cf;padding:8px 14px;border-radius:8px;min-height:36px}#modeLabel{letter-spacing:1.4px}#ad{flex-shrink:0;min-height:36px;display:flex;align-items:center;justify-content:center;font-size:10px;letter-spacing:1px;color:#8d9186;background:#ebe7dc;border-top:1px solid #dcd8cb}.phone-head2 #lanes{flex-direction:column}.phone-head2 .lane:first-child{transform:rotate(180deg)}#toast{position:fixed;bottom:50px;left:50%;transform:translateX(-50%);background:#172d3c;color:white;padding:14px 20px;border-radius:10px;font-size:13px;z-index:20;max-width:90%}@media(max-width:760px){.menu-layout{grid-template-columns:1fr;max-width:490px;padding:28px 22px;gap:26px}.hero h1{font-size:72px;line-height:.83;margin:24px 0 18px}.hero h1 small{font-size:12px}.hero-scene{height:135px}.hero .intro{font-size:14px}.hero-footer{font-size:7px}.setup{padding:24px}.hero .eyebrow{font-size:8px}.hero-runner{width:52px;height:65px}.sun{width:66px;height:66px;top:10px}#top b{font-size:9px;letter-spacing:.8px}#top b span{display:none}.hud{top:8px;left:8px;right:8px;font-size:10px}.hud-stats{gap:7px}.hud-stats b{font-size:14px}.class-mode .hud{flex-direction:column;align-items:flex-start;gap:4px}.class-mode .hud-name{max-width:100%}.class-mode .over-card{padding:10px}.class-mode .over h2{font-size:17px}.class-mode .over li{font-size:10px;flex-wrap:wrap}}@media(max-height:500px){.menu-layout{grid-template-columns:1fr 1fr;max-width:1000px;padding:20px;gap:30px}.hero h1{font-size:64px}.hero-scene{height:120px}.setup{padding:20px}.phone-head2 .hud{top:5px}.phone-head2 .lane-tip{bottom:4px;font-size:8px}.phone-head2 .over-card{padding:8px 14px;max-width:430px}.phone-head2 .over h2{font-size:16px;margin:0}.phone-head2 .over .distance{font-size:21px;margin:2px}.phone-head2 .over p{margin:3px}.phone-head2 .over ol{display:flex;justify-content:center;gap:14px;margin:3px}.phone-head2 .over li{border:0;padding:3px}.phone-head2 .over button{padding:6px 14px}.phone-head2 .over .result-sub{display:none}}@media(prefers-reduced-motion:no-preference){.hero-spark{animation:glint 2.2s ease-in-out infinite}@keyframes glint{50%{transform:translateY(-5px);opacity:.65}}}

@media(max-height:500px){.phone-head2 .over:not(.countdown) .over-card{display:grid;grid-template-columns:1fr auto;column-gap:12px;row-gap:2px;align-items:center;max-width:530px}.phone-head2 .over-card>.eyebrow{display:none}.phone-head2 .over-card h2{grid-column:1}.phone-head2 .over-card .distance{grid-column:2;grid-row:1;font-size:20px}.phone-head2 .over-card ol{grid-column:1;grid-row:2;display:block;text-align:left;margin:0}.phone-head2 .over-card li{padding:1px}.phone-head2 .over-card button{grid-column:2;grid-row:2}.phone-head2 .over-card>p:last-child{grid-column:1/-1}}
@media(min-width:1200px){.class-mode .hud{font-size:16px;top:16px;left:16px;right:16px}.class-mode .hud-stats b{font-size:23px}.class-mode .hud-stats small{font-size:12px}.class-mode .lane-tip{font-size:12px;bottom:16px}}

@media(max-width:600px) and (min-height:501px){.menu-layout{padding:20px 18px;gap:20px}.hero{display:grid;grid-template-columns:1fr 110px;column-gap:12px}.hero .eyebrow{grid-column:1/-1;letter-spacing:1px;font-size:7px;margin:0 0 12px}.hero h1{font-size:44px;letter-spacing:-2px;margin:5px 0 8px}.hero h1 small{font-size:8px;letter-spacing:2px;margin-top:12px}.hero .intro{font-size:11px;line-height:1.5;margin:5px 0 0}.hero-scene{grid-column:2;grid-row:2/4;height:142px;margin:0;border-radius:12px}.hero-footer,.scene-caption{display:none}.hero-runner{left:20%;width:44px;height:55px}.hero-spark{font-size:22px;left:68%}.sun{left:43%;width:44px;height:44px}.setup{padding:20px}.setup h2{font-size:25px}.setup-lead{margin-bottom:18px}.dev{padding:12px 8px;gap:6px;font-size:12px}.dev small{font-size:8px}.dev svg{width:18px}.choice-row{font-size:11px}}