@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700;800&family=DM+Sans:wght@400;500;600;700&display=swap');
:root{color-scheme:dark;--gold:#f8cf5b;--mint:#a8f3b5}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at 65% 0,#262039,transparent 60%),#0d0e18;color:#f7f4f5;font:14px 'DM Sans',sans-serif;min-height:100vh;display:grid;place-items:center;padding:26px}button,input,select{font:inherit}button{cursor:pointer;transition:filter .2s,transform .2s}button:hover:not(:disabled){filter:brightness(1.15)}button:active:not(:disabled){transform:translateY(1px)}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible,input:focus-visible,select:focus-visible,summary:focus-visible{outline:2px solid #e9b8fc;outline-offset:3px}.shell{width:min(1540px,100%)}header{display:flex;align-items:center;justify-content:space-between;margin-bottom:23px;gap:12px}.brand{display:flex;gap:13px;align-items:center}.brand-mark{border:1px solid #8c725a;border-radius:10px;width:43px;height:49px;display:grid;place-items:center;color:var(--gold);font-size:25px;background:#292333}h1{font:700 29px 'Barlow Condensed',sans-serif;letter-spacing:1.8px;margin:0}h1 em{color:var(--gold);font-style:normal}.subtitle{font-size:10px;letter-spacing:3px;color:#aaa0b5}.header-actions{display:flex;gap:9px;align-items:center}.practice{color:#b7abc7;font-size:11px;letter-spacing:1.5px;margin-right:13px}.icon{border:1px solid #484153;color:#d8d2e1;background:#211f31;border-radius:50%;height:36px;width:36px;font-size:19px}.game{display:grid;grid-template-columns:285px minmax(0,1fr);border:1px solid #454052;border-radius:17px;overflow:hidden;box-shadow:0 25px 90px #0006;height:min(740px,calc(100vh - 152px));min-height:590px}.panel{background:linear-gradient(155deg,#20202e,#141621);padding:25px 23px;display:flex;flex-direction:column;z-index:4;border-right:1px solid #44404d}.tabs{display:flex;border-radius:9px;background:#11131d;padding:4px;margin-bottom:25px}.tabs button{width:50%;background:none;border:0;color:#aaa3b9;font-weight:600;padding:10px;border-radius:6px}.tabs .selected{background:#353343;color:#fff}label{display:block;color:#cdcad5;font-weight:500;margin-bottom:9px}label small{float:right;color:#a7a1b6;font-size:11px;margin-top:2px}.amount{display:flex;align-items:center;background:#11131d;border:1px solid #3b374a;border-radius:9px;height:48px;overflow:hidden;flex-shrink:0}.amount button{width:40px;height:100%;background:none;border:0;color:#bbb4ca;font-size:22px}.amount input{width:calc(100% - 80px);background:none;color:white;font-size:20px;font-weight:600;border:0;text-align:center;appearance:textfield}.amount input::-webkit-inner-spin-button{appearance:none}.quick{display:flex;gap:7px;margin:9px 0 24px}.quick button{flex:1;border:1px solid #393647;background:#262433;color:#bfbbcc;border-radius:5px;padding:6px 0;font-size:12px}select{width:100%;background:#12131f;border:1px solid #3e394d;border-radius:9px;height:47px;padding:0 12px;color:white;flex-shrink:0}.risk-meter{display:flex;align-items:center;gap:5px;margin:11px 0 24px}.risk-meter i{height:3px;width:20px;border-radius:3px;background:#373442}.risk-meter i:first-child{background:var(--mint)}.risk-meter.medium i:nth-child(-n+2){background:var(--gold)}.risk-meter.hard i{background:#f487a6}.risk-meter span{margin-left:auto;font-size:11px;color:#b1a6c1}.primary{border:1px solid #ffe58c;background:linear-gradient(110deg,#f9d76a,#ecb843);color:#251d10;border-radius:9px;padding:15px;font-size:17px;font-weight:800;box-shadow:0 4px 19px #e5b1471c;display:flex;justify-content:center;gap:20px;width:100%}.primary span{font-size:22px;line-height:20px}.profit{margin:24px 0 15px}.profit>div{display:flex;justify-content:space-between;color:#bcb3cc;font-size:14px}.profit strong{color:var(--gold);font-size:14px}.profit p{margin:7px 0 0;color:var(--mint);font-size:30px;font-weight:600;letter-spacing:-1px}.cash{display:flex;justify-content:space-between;padding:14px 12px;color:var(--gold);border:1px solid #b68d43;background:#382d2133;border-radius:9px;font-weight:700}.panel-bottom{margin-top:auto;padding-top:22px}.night-caption{font:600 26px/1.15 'Barlow Condensed',sans-serif;letter-spacing:.4px;color:#aaa2b8}.night-caption em{color:#e0c2d8;font-style:normal}.panel-bottom p{font-size:12px;color:#a89db9;line-height:1.7;margin-bottom:0}.stage{position:relative;overflow:hidden;background:#1e2031}.stage-top{position:absolute;top:22px;left:24px;right:24px;display:flex;justify-content:space-between;z-index:3;pointer-events:none}.wallet,.progress{background:#10111cda;border:1px solid #77678955;border-radius:10px;padding:11px 16px;backdrop-filter:blur(9px);display:flex;flex-direction:column;gap:4px}.wallet span,.progress span{color:#b4a9be;font-size:10px;letter-spacing:1.8px}.wallet strong{font-size:20px;font-weight:600}.progress{align-items:flex-end}.progress strong{color:var(--gold);font-size:24px}.viewport{position:absolute;inset:0;overflow:hidden}.world{height:100%;position:absolute;width:3700px;left:0;top:0;transition:transform .6s cubic-bezier(.2,.7,.2,1);background:#242535 url('assets/road.png') repeat-x;background-size:auto 100%}.street-art{position:absolute;inset:0 auto 0 0;width:280px;background:url('assets/sidewalk.png') left center/100% 100% no-repeat}.world:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#12121f99,transparent 24%,transparent 76%,#14122266)}.start-label{position:absolute;left:187px;top:74%;color:#f9d574;font-size:24px;text-shadow:0 2px 5px #000;display:flex;flex-direction:column;align-items:center;z-index:1}.start-label span{font-size:11px;letter-spacing:3px;margin-top:2px}.lane{position:absolute;top:0;bottom:0;width:140px;border-right:2px dashed #bab7d11a;z-index:1}.marker{position:absolute;top:61%;left:17px;width:106px;height:106px;transform:translateY(-50%);border:5px solid #6c6a7a;border-radius:50%;box-shadow:0 4px 0 #12121d,0 0 0 2px #181720,inset 0 0 0 3px #222232,inset 0 5px 11px #fff2;background:repeating-linear-gradient(0deg,#343440 0 9px,#232330 9px 15px);display:grid;place-items:center;transition:background .3s,border-color .3s}.marker b{font-size:21px;letter-spacing:-.5px;background:#34343fed;width:92px;text-align:center;padding:6px 0;text-shadow:0 2px 2px #000}.lane.next .marker{border-color:#b1a4bb;box-shadow:0 0 22px #e8c3ef24,0 0 0 2px #262235}.lane.safe .marker{border-color:#f5d87b;background:repeating-linear-gradient(0deg,#bb8d35 0 9px,#7f602c 9px 15px);box-shadow:0 0 24px #ffcf5833,inset 0 0 0 3px #755a2c}.lane.safe .marker b{background:#b88a39;color:#ffefb5}.lane.failed .marker{border-color:#dc6685;background:#6a3045}.lane.failed .marker b{background:#6a3045}.lane-num{position:absolute;top:77%;width:100%;text-align:center;font-size:11px;letter-spacing:2px;color:#c5b7d1}.barrier{position:absolute;top:36%;left:27px;width:85px;padding:7px;border:1px solid #dfb949;border-radius:5px;background:repeating-linear-gradient(135deg,#e0b954 0 10px,#383038 10px 20px);box-shadow:0 3px 9px #0009;opacity:0;transition:opacity .3s}.safe .barrier{opacity:1}.car{position:absolute;top:0;left:15px;width:110px;height:180px;object-fit:contain;filter:drop-shadow(0 10px 13px #0009);animation:traffic var(--speed,6s) linear infinite;animation-delay:var(--delay,0s);pointer-events:none}.lane.safe .car,.lane.crossing .car{animation:none;transform:translateY(-110%);opacity:0}.lane.crash .car{animation:crash .5s ease-in forwards!important;opacity:1}.hero{position:absolute;left:168px;top:61%;width:100px;height:220px;transform:translateY(-90%);z-index:3;transition:left .58s cubic-bezier(.2,.7,.2,1);pointer-events:none}.hero img{height:100%;width:100%;object-fit:contain;filter:drop-shadow(0 5px 7px #0008);position:relative}.hero-glow{position:absolute;bottom:7px;left:9px;width:80px;height:30px;border-radius:50%;background:#efd47155;box-shadow:0 0 22px #ffd96d7a;border:2px solid #f9d478}.hero.jumping img{animation:hop .58s ease-in-out}.hero.hit img{animation:hit .5s forwards}.stage-bottom{position:absolute;bottom:0;left:0;right:0;z-index:3;padding:17px 24px;display:flex;justify-content:space-between;gap:10px;background:linear-gradient(0deg,#12111eef,transparent)}.status{display:flex;align-items:center;gap:9px;color:#eee5f3;font-size:13px}.status-light{width:6px;height:6px;flex-shrink:0;border-radius:50%;background:var(--gold);box-shadow:0 0 10px #ffd965}.keyboard{font-size:11px;color:#b1a6be;align-self:center}.result{position:absolute;inset:0;z-index:5;display:grid;place-items:center;background:#0c091648;backdrop-filter:blur(4px)}[hidden]{display:none!important}.result-card{background:linear-gradient(145deg,#292234ee,#141521f5);border:1px solid #b79a60;border-radius:18px;padding:35px;text-align:center;box-shadow:0 20px 70px #0008;min-width:300px}.result-card>span,.eyebrow{font-size:11px;letter-spacing:2px;color:var(--gold)}h2{font:600 38px 'Barlow Condensed',sans-serif;margin:12px 0}.result-card>strong{font-size:39px;color:var(--gold)}.result-card p{color:#b8acbf;margin:12px 0 24px}.result.loss .result-card{border-color:#b86388}.result.loss .result-card>strong{color:#ef99b6}footer{display:flex;justify-content:space-between;gap:15px;padding:20px 2px 0;font-size:11px;color:#9d91ac}footer b{letter-spacing:2px;font-weight:500;margin-left:8px}.auto-fields{display:flex;gap:9px;margin-bottom:15px}.auto-fields label{font-size:12px;width:50%}.auto-fields input{display:block;width:100%;padding:9px;margin-top:6px;border:1px solid #474052;background:#14131e;color:#eee;border-radius:6px}.text-button{background:none;border:0;color:var(--gold);padding:10px 0}dialog{max-width:570px;width:calc(100% - 32px);max-height:85vh;border:1px solid #60526c;border-radius:18px;background:#1d1c2a;padding:34px;color:#e0dbe7;line-height:1.7}dialog::backdrop{background:#070811bd;backdrop-filter:blur(6px)}dialog .close{float:right}dialog li{margin-bottom:10px}dialog p{font-size:14px;color:#bcb3c8}.muted{color:#a99eb5!important}details{border:1px solid #484052;padding:12px;border-radius:8px}summary{cursor:pointer;color:var(--gold)}#odds{max-height:180px;overflow:auto;font-size:12px;white-space:pre-line}@keyframes traffic{from{transform:translateY(-200px)}to{transform:translateY(950px)}}@keyframes crash{from{top:0;transform:translateY(-200px)}to{top:61%;transform:translateY(-70%)}}@keyframes hop{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-33px) rotate(7deg)}}@keyframes hit{to{opacity:0;transform:translateY(15px) rotate(20deg)}}@media(max-width:1000px){body{padding:15px}.game{grid-template-columns:250px minmax(0,1fr)}.panel{padding:20px 17px}.keyboard{display:none}.stage-top{left:16px;right:16px}.wallet strong{font-size:17px}.progress strong{font-size:21px}.night-caption{font-size:23px}}@media(max-width:700px){body{padding:12px;display:block}header{margin:5px 0 16px}.brand-mark{width:34px;height:40px;font-size:20px}h1{font-size:22px;letter-spacing:.8px}.subtitle{font-size:8px;letter-spacing:1.6px}.practice{display:none}.game{display:flex;flex-direction:column-reverse;height:auto;min-height:0;border-radius:12px}.stage{height:420px;flex:none}.panel{border-right:0;border-top:1px solid #454052;display:grid;grid-template-columns:1fr 1fr;gap:10px 15px;padding:18px}.tabs{grid-column:1/-1;margin:0 0 5px}.panel>label{margin:0;font-size:12px;grid-column:1}.panel>label[for=risk]{grid-column:2;grid-row:2}.amount{grid-column:1;grid-row:3}.panel>select{grid-column:2;grid-row:3}.quick{grid-column:1;grid-row:4;margin:0}.risk-meter{grid-column:2;grid-row:4;margin:0}.panel>.primary{grid-column:1;grid-row:5;margin-top:6px}.cash{grid-column:2;grid-row:5;margin-top:6px;align-items:center}.profit{grid-column:1/-1;margin:8px 0 0;display:flex;justify-content:space-between;align-items:center}.profit>div{gap:12px;align-items:center}.profit p{font-size:25px;margin:0}.panel-bottom{grid-column:1/-1;padding:0;margin:0}.night-caption{display:none}.panel-bottom p{margin:0}#autoSettings{grid-column:1/-1;grid-row:5}.panel:has(#autoSettings:not([hidden]))>.primary,.panel:has(#autoSettings:not([hidden]))>.cash{grid-row:6}.auto-fields{margin:0}.auto-fields label{margin:0}footer{font-size:10px;justify-content:center;flex-wrap:wrap;padding-top:15px}footer>span:last-child{display:none}.hero{height:170px}.stage-top{top:14px}.wallet,.progress{padding:9px 11px}.marker{width:88px;height:88px;left:25px}.marker b{width:77px;font-size:19px}.stage-bottom{padding:15px}.result-card{min-width:260px;padding:25px}.start-label{top:79%}.lane-num{top:81%}.barrier{top:29%}.car{height:160px}.header-actions{gap:6px}.icon{width:32px;height:32px}}@media(prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}.car{opacity:.5}}
@media(min-width:701px){.panel{overflow-y:auto;scrollbar-width:thin;scrollbar-color:#554361 transparent}.panel:has(#autoSettings:not([hidden])) .night-caption{display:none}.panel:has(#autoSettings:not([hidden])) .tabs{margin-bottom:15px}.panel:has(#autoSettings:not([hidden])) .quick{margin-bottom:15px}.panel:has(#autoSettings:not([hidden])) .risk-meter{margin-bottom:15px}}
/* Road paint and manhole covers are below every passing vehicle. */
.lane .marker,.lane .lane-num{z-index:1}
.lane .car{z-index:3;transform:none;animation-name:traffic-down}
.lane .barrier{z-index:4}
.lane.up .car{animation-name:traffic-up}
.car.bus{width:124px;height:240px;left:8px}
.car.scooter{width:76px;height:143px;left:32px}
.car.sedan{width:111px;height:194px;left:14px}
.lane.safe .car,.lane.crossing .car{animation:none;opacity:0}
.lane.crash .car{animation:crash-down .5s ease-in forwards!important;opacity:1}
.lane.crash.up .car{animation-name:crash-up!important}
.hero{width:150px;height:240px;left:143px}
.hero-glow{left:35px}
@keyframes traffic-down{from{top:-270px;transform:none}to{top:calc(100% + 270px);transform:none}}
@keyframes traffic-up{from{top:calc(100% + 270px);transform:none}to{top:-270px;transform:none}}
@keyframes crash-down{from{top:-270px;transform:translateY(0)}to{top:61%;transform:translateY(-70%)}}
@keyframes crash-up{from{top:calc(100% + 270px);transform:translateY(0)}to{top:61%;transform:translateY(-25%)}}
@media(max-width:700px){.hero{width:150px;height:205px}.car.bus{height:210px}.car.scooter{height:125px}.car.sedan{height:173px}}
/* One continuous takeoff, flight, and landing, anchored at the feet. */
.hero{transition:left .82s linear}
.world{transition:transform .82s linear}
.hero img{transform-origin:50% 96%}
.hero.jumping img{animation:crossing-jump .82s linear both}
.hero.jumping .hero-glow{animation:jump-shadow .82s ease-in-out both}
.hero.landed img{animation:landing-settle .24s ease-out both}
@keyframes crossing-jump{
  0%{transform:translateY(0) scale(1,1) rotate(0)}
  10%{transform:translateY(4px) scale(1.06,.91) rotate(-3deg)}
  20%{transform:translateY(-34px) scale(.96,1.06) rotate(3deg)}
  35%{transform:translateY(-68px) scale(1,1) rotate(6deg)}
  50%{transform:translateY(-79px) scale(1,1) rotate(5deg)}
  65%{transform:translateY(-67px) scale(1,1) rotate(3deg)}
  80%{transform:translateY(-33px) scale(.97,1.04) rotate(1deg)}
  93%{transform:translateY(3px) scale(1.08,.91) rotate(0)}
  100%{transform:translateY(0) scale(1,1) rotate(0)}
}
@keyframes jump-shadow{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.58);opacity:.3}}
@keyframes landing-settle{0%{transform:scale(1.06,.94)}45%{transform:translateY(-5px) scale(.99,1.02)}100%{transform:translateY(0) scale(1)}}
.safety-cone{position:absolute;top:calc(61% - 295px);left:32px;width:76px;height:85px;object-fit:contain;z-index:4;opacity:0;transform:translateY(-12px) scale(.75);filter:drop-shadow(0 5px 5px #0007);pointer-events:none}
.lane.safe .safety-cone{animation:cone-place .32s .12s ease-out both}
@keyframes cone-place{0%{opacity:0;transform:translateY(-20px) scale(.7)}70%{opacity:1;transform:translateY(2px) scale(1.06)}100%{opacity:1;transform:translateY(0) scale(1)}}
.lane.safe .marker{border-color:#ffe798;background:repeating-linear-gradient(0deg,#eac15a 0 9px,#b98024 9px 15px);box-shadow:0 0 0 2px #8f611e,0 0 29px #ffd65c88,inset 0 0 0 3px #9c701e;animation:gold-landing .55s ease-out}
.lane.safe .marker b{background:#d5a333;color:#fff7d0;text-shadow:0 2px 2px #70500d}
@keyframes gold-landing{0%{filter:brightness(2);transform:translateY(-50%) scale(.92)}45%{filter:brightness(1.35);transform:translateY(-50%) scale(1.08)}100%{filter:brightness(1);transform:translateY(-50%) scale(1)}}
.landing-ring{position:absolute;left:17px;top:61%;width:106px;height:106px;border:3px solid #ffe396;border-radius:50%;z-index:2;opacity:0;pointer-events:none;transform:translateY(-50%)}
.lane.safe .landing-ring{animation:gold-ripple .65s ease-out both}
@keyframes gold-ripple{0%{opacity:.95;transform:translateY(-50%) scale(.6)}100%{opacity:0;transform:translateY(-50%) scale(1.8)}}
.landing-sparks{position:absolute;left:70px;top:61%;z-index:4;pointer-events:none}
.landing-sparks i{position:absolute;width:5px;height:5px;border-radius:50%;background:#ffeaab;box-shadow:0 0 8px #ffcd4b;opacity:0;--sx:0px;--sy:-70px}
.landing-sparks i:nth-child(2){--sx:55px;--sy:-40px}.landing-sparks i:nth-child(3){--sx:64px;--sy:15px}.landing-sparks i:nth-child(4){--sx:-55px;--sy:-40px}.landing-sparks i:nth-child(5){--sx:-64px;--sy:15px}.landing-sparks i:nth-child(6){--sx:20px;--sy:50px}
.lane.safe .landing-sparks i{animation:gold-sparks .6s ease-out both}
@keyframes gold-sparks{0%{opacity:1;transform:translate(0,0) scale(.6)}100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.1)}}
@media(max-width:700px){.safety-cone{top:calc(61% - 250px);height:65px;width:60px;left:40px}}
@media(prefers-reduced-motion:reduce){.hero,.world{transition:none}.hero.jumping img,.hero.jumping .hero-glow,.hero.landed img,.lane.safe .marker{animation:none}.lane.safe .safety-cone{animation:none;opacity:1;transform:none}.lane.safe .landing-ring,.lane.safe .landing-sparks i{animation:none}}

/* ===== Spring Seoul colorful theme ===== */
:root{color-scheme:light;--gold:#ffc94c;--mint:#39d8bf;--pink:#ff55a7;--pink2:#ff8bc2;--blue:#2c8eea;--navy:#073c70;--purple:#8b4be8;--ink:#123d68}
body{background:radial-gradient(circle at 12% 8%,#fff 0 8%,transparent 28%),radial-gradient(circle at 88% 0,#ffe8f4 0 12%,transparent 30%),linear-gradient(145deg,#dff5ff,#fce9f5 60%,#fff7d7);color:var(--ink)}
.brand-mark{border:2px solid #ff83bd;color:#fff;background:linear-gradient(145deg,#ff8fc4,#f44398);box-shadow:0 5px 14px #f56fa555}
h1{color:#164e83}h1 em{color:#f64c9d}.subtitle{color:#6687a7}.practice{color:#567999}.icon{border:1px solid #87b9e4;color:#17609b;background:#fff;box-shadow:0 4px 12px #78bde833}
.game{border:4px solid #fff;box-shadow:0 22px 70px #4c85a839,0 0 0 1px #7fbee7;border-radius:22px}
.panel{background:linear-gradient(170deg,#0d548d 0%,#073764 57%,#0a4b82 100%);border-right:3px solid #8bd3f3;color:#fff;box-shadow:inset -10px 0 24px #052d5660}
.tabs{background:#092f58;border:1px solid #3679ad;box-shadow:inset 0 2px 6px #001d3c55}
.tabs button{color:#c8e7ff}.tabs .selected{color:#fff;background:linear-gradient(135deg,#ff8bc6,#fa3f98);box-shadow:0 6px 15px #f32d8660}
label{color:#e9f6ff}label small{color:#bfe3ff}.amount{background:#082e58;border-color:#4c8bbd;box-shadow:inset 0 2px 6px #001b37}.amount button{color:#c6e8ff}.amount input{color:#fff}.quick button{background:#194f7c;border-color:#4c83ad;color:#e8f6ff}.quick button:hover:not(:disabled){background:#2871a8}
select{background:#0b3c6c;border-color:#5c9bca;color:#fff}.risk-meter i{background:#356f9a}.risk-meter i:first-child{background:#5ae4c9}.risk-meter.medium i:nth-child(-n+2){background:#ffc94c}.risk-meter.hard i{background:#ff74ad}.risk-meter span{color:#c7e7ff}
.primary{border:2px solid #ffa8d3;background:linear-gradient(180deg,#ff92c8,#f33b96);color:#fff;text-shadow:0 2px 1px #c62070;box-shadow:0 7px 0 #bd216b,0 10px 22px #ee2d8750;border-radius:24px}.primary:hover:not(:disabled){filter:saturate(1.08) brightness(1.06)}
.profit{background:#093560;border:1px solid #397ead;border-radius:13px;padding:12px;margin-top:22px}.profit>div{color:#d5edff}.profit strong{color:#ffaad2}.profit p{color:#fff;margin-top:5px;text-shadow:0 2px 0 #153d65}
.cash{color:#6a4400;border:2px solid #ffdc74;background:linear-gradient(180deg,#fff493,#ffc13e);box-shadow:0 5px 0 #d89416,0 8px 18px #f9b8244a;border-radius:22px;text-shadow:0 1px #fff4b3;padding:14px 16px}.cash:disabled{filter:saturate(.3)}
.night-caption{color:#d8ecff}.night-caption em{color:#ff9dcc}.panel-bottom p{color:#b7dcf7}.text-button{color:#ffe58a}
.stage{background:#cbeeff}.world{background:#9ba7ba url('assets/spring-road.png') repeat-x;background-size:auto 100%}.street-art{width:280px;background:url('assets/spring-sidewalk.png') left center/100% 100% no-repeat}.world:after{background:linear-gradient(0deg,#ffffff33,transparent 23%,transparent 79%,#dff6ff18)}
.start-label{color:#fb518e;text-shadow:0 2px 0 #fff,0 3px 7px #49647a55}.lane{border-right-color:#fff3}.wallet,.progress{background:#fffef2eb;border:2px solid #fff;border-radius:16px;box-shadow:0 7px 20px #486b8c33;color:#164f7e}.wallet span,.progress span{color:#5880a0}.wallet strong{color:#073c70}.progress strong{color:#f34196}
.status{color:#164b77;background:#fffde4e8;border:1px solid #fff;border-radius:20px;padding:7px 13px;box-shadow:0 5px 14px #365a7330}.status-light{background:#ff5da8;box-shadow:0 0 10px #ff77b7}.keyboard{color:#315a7b;background:#ffffffbd;border-radius:12px;padding:5px 9px}
.marker{border-color:#92c7ee;box-shadow:0 5px 0 #426b94,0 0 0 3px #ecf9ff,inset 0 0 0 4px #7acaff,inset 0 7px 16px #fff9;background:linear-gradient(180deg,#58c3ff,#167bd8)}.marker:before{content:'';position:absolute;inset:8px;border-radius:50%;border:2px solid #c9edff75}.marker b{background:transparent;width:auto;color:#fff;text-shadow:0 2px 2px #165488;font-size:22px}.lane:nth-child(4n+2) .marker{border-color:#a9b4ff;box-shadow:0 5px 0 #5459a3,0 0 0 3px #f2edff,inset 0 0 0 4px #a586f6,inset 0 7px 16px #fff9;background:linear-gradient(180deg,#a16ff7,#6938d5)}.lane:nth-child(4n+3) .marker{border-color:#e0a4ff;box-shadow:0 5px 0 #8d4ca7,0 0 0 3px #fff0ff,inset 0 0 0 4px #cf6ae8,inset 0 7px 16px #fff9;background:linear-gradient(180deg,#d76ced,#9340cf)}.lane:nth-child(4n+4) .marker{border-color:#ffa2ce;box-shadow:0 5px 0 #a94878,0 0 0 3px #fff2f8,inset 0 0 0 4px #ff7abb,inset 0 7px 16px #fff9;background:linear-gradient(180deg,#ff83bf,#ea3c91)}
.lane.next .marker{border-color:#fff;box-shadow:0 0 28px #fff,0 5px 0 #3972a3,0 0 0 4px #6fc8ff}.lane-num{color:#fff;text-shadow:0 1px 3px #3f5264}.lane.failed .marker{border-color:#ff92ae;background:#e94c72}.lane.failed .marker b{background:transparent}
.lane.safe .marker{border-color:#fff3a9;background:linear-gradient(180deg,#ffe872,#f2a923);box-shadow:0 0 0 3px #b77713,0 0 29px #fff59c,inset 0 0 0 4px #fff2a6}.lane.safe .marker b{background:transparent;color:#fff;text-shadow:0 2px 2px #9b6812}.landing-ring{border-color:#fff2a3}.landing-sparks i{background:#fff3a7;box-shadow:0 0 8px #ffbe29}
.hero{width:160px;height:255px}.hero img{filter:drop-shadow(0 6px 5px #42566f4f)}.hero-glow{background:#ffe78166;box-shadow:0 0 24px #ffcf41a1;border-color:#fff4a6}
.car{filter:drop-shadow(0 9px 8px #51607055)}.safety-cone{filter:drop-shadow(0 5px 4px #58607155)}
.result{background:#dff5ff6e}.result-card{background:linear-gradient(155deg,#fffef5f5,#ffeaf6f5);border:2px solid #ff8ec5;box-shadow:0 18px 65px #5d91ad55;color:#174a74}.result-card>span,.eyebrow{color:#ef3d91}.result-card>strong{color:#f33d94}.result-card p{color:#567895}.result.loss .result-card{border-color:#ff719c}.result.loss .result-card>strong{color:#e43d6b}
footer{color:#527896}dialog{border:2px solid #ff89c1;background:#fffafd;color:#164b75;box-shadow:0 20px 80px #40708e55}dialog p{color:#577995}.muted{color:#718ea7!important}details{border-color:#a9d4ef;background:#f4fbff}summary{color:#ef3d91}.auto-fields input{border-color:#5995c3;background:#09345f;color:#fff}
@media(max-width:700px){.game{border-width:3px}.panel{border-top:3px solid #8bd3f3}.hero{width:150px;height:215px}.status{max-width:72%}.world{background-size:auto 100%}}

/* Exact crossing grid: each 140px lane owns one centered marker and one boundary. */
.world{background:#98a5b8 url('assets/spring-road-clean.png') repeat-x;background-size:auto 100%}
.lane{border-right:0;background:linear-gradient(90deg,rgba(255,255,255,.012),rgba(49,69,101,.018));isolation:isolate}
.lane::after,.lane:first-child::before{content:'';position:absolute;top:0;bottom:0;width:3px;z-index:0;pointer-events:none;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.88) 0 34px,rgba(255,255,255,0) 34px 59px);filter:drop-shadow(0 1px 1px #4e60755c)}
.lane::after{right:-2px}.lane:first-child::before{left:-1px}
.lane .marker,.lane .lane-num,.lane .landing-ring,.lane .landing-sparks{z-index:2}

/* Six-pose character jump with a clean arc and pink/gold sparkle trail. */
.hero{width:170px;height:270px;transition:left .85s cubic-bezier(.32,.02,.55,1)}
.world{transition:transform .85s cubic-bezier(.32,.02,.55,1)}
.hero img{object-fit:contain;object-position:center bottom;transform-origin:50% 96%;will-change:transform}
.hero.jumping img{animation:pose-jump .85s cubic-bezier(.35,.02,.55,1) both}
.hero.jumping .hero-glow{animation:jump-shadow .85s ease-in-out both}
.hero.landed img{animation:landing-settle .24s ease-out both}
@keyframes pose-jump{0%{transform:translateY(0)}16%{transform:translateY(-22px)}43%{transform:translateY(-82px)}57%{transform:translateY(-88px)}82%{transform:translateY(-28px)}100%{transform:translateY(0)}}
.jump-fx{position:absolute;left:50%;top:64%;width:1px;height:1px;z-index:0;pointer-events:none}
.jump-fx i{position:absolute;width:10px;height:6px;border-radius:90% 20% 90% 20%;background:linear-gradient(135deg,#fff,#ff6eac);box-shadow:0 0 9px #ff76b4;opacity:0;--fx:0px;--fy:0px;--rot:0deg}
.jump-fx i:nth-child(1){--fx:-55px;--fy:-48px;--rot:-28deg}.jump-fx i:nth-child(2){--fx:-67px;--fy:4px;--rot:18deg}.jump-fx i:nth-child(3){--fx:-36px;--fy:52px;--rot:62deg}.jump-fx i:nth-child(4){--fx:53px;--fy:-57px;--rot:24deg}.jump-fx i:nth-child(5){--fx:68px;--fy:2px;--rot:-18deg}.jump-fx i:nth-child(6){--fx:38px;--fy:48px;--rot:-58deg}
.hero.jumping .jump-fx i{animation:jump-petal .7s .1s ease-out both}
.hero.jumping .jump-fx i:nth-child(even){animation-delay:.2s;background:linear-gradient(135deg,#fff9a8,#ffb62e);box-shadow:0 0 10px #ffd646}
@keyframes jump-petal{0%{opacity:0;transform:translate(0,0) scale(.25) rotate(0)}18%{opacity:1}100%{opacity:0;transform:translate(var(--fx),var(--fy)) scale(1.05) rotate(var(--rot))}}
@media(max-width:700px){.hero{width:155px;height:225px}.lane::after,.lane:first-child::before{width:2px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.9) 0 26px,transparent 26px 47px)}}
@media(prefers-reduced-motion:reduce){.hero.jumping .jump-fx i{animation:none}.hero.jumping img{animation:none}}

/* Self-contained 16:9 game frame for iframe or website embedding. */
html,body{width:100%;height:100%;overflow:hidden}
body{min-height:0;padding:0;display:grid;place-items:center}
.shell{--frame-width:1540px;position:fixed;left:50%;top:50%;width:1540px;max-width:none;height:866px;transform:translate(-50%,-50%) scale(var(--game-scale,1));transform-origin:center;display:flex;flex-direction:column;overflow:hidden;padding:12px;border:1px solid #ffffffd9;border-radius:24px;background:linear-gradient(120deg,#f7fcff 0%,#fff0f8 100%);box-shadow:0 24px 80px #40708e42}
header{flex:0 0 64px;margin:0;padding:3px 5px 10px;gap:12px}
.brand-mark{width:43px;height:49px;font-size:25px}.brand{gap:13px}h1{font-size:29px;letter-spacing:1.8px}.practice{display:inline-block}.header-actions{gap:9px}.icon{width:36px;height:36px}.icon.sound-on{color:#e69a00;background:#fff7cc;box-shadow:0 0 0 2px #ffd85d,0 4px 12px #efb52945}
.subtitle,footer,.panel-bottom{display:none!important}
.game{flex:1;display:grid;grid-template-columns:285px minmax(0,1fr);height:auto;min-height:0;border-radius:18px;box-shadow:0 12px 34px #4c85a82b}
.panel{display:flex;flex-direction:column;gap:0;overflow:hidden!important;padding:20px 22px;border-top:0;border-right:3px solid #8bd3f3}
.tabs{margin:0 0 18px}.quick{margin:8px 0 18px}.risk-meter{margin:10px 0 18px}.panel>.primary,.panel>.cash{margin-top:0}.profit{display:block;margin:18px 0 12px}.cash{align-items:initial}.text-button{margin-top:9px;padding:7px 0}
.stage{height:auto;flex:initial}.stage-top{top:22px;left:24px;right:24px}.wallet,.progress{padding:11px 16px}.wallet strong{font-size:20px}.progress strong{font-size:24px}.keyboard{display:inline-block}
.hero{width:170px;height:270px}.marker{width:106px;height:106px;left:17px}.marker b{width:auto;font-size:22px}.stage-bottom{padding:17px 24px}.result-card{min-width:300px;padding:35px}.start-label{top:74%}.car{height:180px}.car.bus{width:124px;height:240px;left:8px}.car.scooter{width:76px;height:143px;left:32px}.car.sedan{width:111px;height:194px;left:14px}.safety-cone{top:calc(61% - 295px);left:32px;width:76px;height:85px}
.lane::after,.lane:first-child::before{width:3px;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.88) 0 34px,transparent 34px 59px)}

/* JavaScript preserves the live road position, clears the lane first on safe
   crossings, and only then begins the character's jump. */
.lane.crossing .car,.lane.safe .car,.lane.crash .car{animation:none!important;opacity:1;transform:none}
.safety-cone{top:calc(61% - 137px);left:32px;width:76px;height:85px}

/* Direct navigation to the main game lobby. */
a.lobbyBack{display:inline-flex;align-items:center;justify-content:center;flex:0 0 34px;width:34px;height:34px;min-width:34px;padding:0;border:1px solid #b99a55;border-radius:9px;background:#211b12;color:#ffe6a3;font:22px/1 Arial,sans-serif;text-decoration:none;cursor:pointer;position:relative;z-index:2;box-sizing:border-box}
a.lobbyBack:hover{background:#49361b;border-color:#ffe6a3}
a.lobbyBack:focus-visible{outline:2px solid #fff1c7;outline-offset:3px}

/* Spring-city return control; it stays outside the scaled game shell. */
body>a.lobbyBack{position:fixed;top:max(14px,env(safe-area-inset-top));left:max(14px,env(safe-area-inset-left));z-index:100;display:inline-flex;align-items:center;justify-content:center;width:auto;min-width:44px;height:44px;padding:0 14px 0 9px;gap:8px;border:2px solid #ff83bd;border-radius:14px;background:linear-gradient(145deg,#fff,#eaf8ff);color:#135687;font:900 10px/1 Arial,sans-serif;letter-spacing:.09em;text-transform:uppercase;text-decoration:none;box-shadow:inset 0 1px #fff,0 6px 16px #4c85a842,0 0 0 3px #ffffffb8,0 0 18px #ff66ab45;transition:transform .18s ease,filter .18s ease,box-shadow .18s ease}
body>a.lobbyBack .lobbyBackIcon{display:grid;place-items:center;width:24px;height:24px;border:1px solid #7fc9f3;border-radius:50%;background:linear-gradient(145deg,#62c9ff,#257ed5);color:#fff;font-size:18px;line-height:1;text-shadow:0 1px 2px #145184;box-shadow:0 0 8px #56bfff66}
body>a.lobbyBack:hover{transform:translateX(-2px) translateY(-1px);filter:brightness(1.03);box-shadow:inset 0 1px #fff,0 8px 20px #4c85a855,0 0 0 3px #ffffffd9,0 0 23px #ff66ab66}
body>a.lobbyBack:active{transform:translateX(-1px) translateY(1px);filter:brightness(.96)}
body>a.lobbyBack:focus-visible{outline:3px solid #ff58a7;outline-offset:4px}
@media(max-width:700px){body>a.lobbyBack{width:44px;min-width:44px;padding:0}.lobbyBackLabel{display:none}}