:root{--floor:#cec8eb;--ink:#141c3f;--panel:#ffffffc9;--edge:#fff9;--muted:#626285;--accent:#7650bd;--track:#aaa0cd;--shine:#fff8}
html[data-theme=dark]{--floor:#111d35;--ink:#f1f0ff;--panel:#13213de8;--edge:#729bec88;--muted:#b4bfdf;--accent:#b08aff;--track:#354269;--shine:#57cfff25}
html,body,html[data-theme=dark],html[data-theme=dark] body{background:var(--floor);color:var(--ink)}
.game,html[data-theme=dark] .game{position:relative;isolation:isolate;max-width:850px;min-height:100svh;padding:22px 30px;background:radial-gradient(ellipse at 50% 15%,var(--shine),transparent 70%),repeating-linear-gradient(0deg,transparent 0 100px,#3138540b 101px 102px),linear-gradient(90deg,transparent 12%,#76c8f155 12% 13%,transparent 13% 87%,#76c8f155 87% 88%,transparent 88%),var(--floor)}
.game:before,.game:after{content:'';position:absolute;z-index:-1;top:18%;width:15px;height:110px;border-radius:5px;background:repeating-linear-gradient(135deg,#e7be55 0 10px,#354054 10px 20px);box-shadow:0 0 0 5px #536078,2px 6px 12px #17213455}.game:before{left:-6px}.game:after{right:-6px}
.game header{height:46px;min-height:46px;position:relative;justify-content:center}.game header img{width:175px;margin:0;border-radius:6px}.game header #pause{position:absolute;left:0;background:linear-gradient(#536482,#202e50);border:2px solid #b7c9f3;color:white;box-shadow:0 4px 10px #18253a40;width:42px;height:42px}.theme-toolbar{position:absolute;right:0}#theme-toggle,html[data-theme=dark] #theme-toggle{background:#253455;color:#eef4ff;border:1px solid #b7c9f3}
.game .heading{display:flex;justify-content:center;margin:23px 0 17px;text-align:center}.heading .eyebrow,.heading .stamp{display:none}.game h1{font-size:48px;font-style:italic;font-weight:950;text-transform:uppercase;letter-spacing:-2px;line-height:.88;text-shadow:0 3px 0 #ffffff66;transform:rotate(-4deg)}.game h1 em{display:block;color:var(--ink)}html[data-theme=dark] .game h1{filter:drop-shadow(0 3px 0 #754aba);text-shadow:none}html[data-theme=dark] .game h1 em{color:white}
.hud,html[data-theme=dark] .hud{padding:0;background:none;border:0;gap:12px;align-items:center}.hud>div:not(.round){padding:12px 18px;border:1px solid #93b3e5;border-radius:16px;background:linear-gradient(145deg,#46557a,#182746);box-shadow:inset 0 1px 5px #ffffff40,0 5px 12px #14214130;min-width:132px;color:white}.hud span,html[data-theme=dark] .hud span{color:#c1d7f5;font-size:10px}.hud strong{font-size:29px}.hud>div:first-child strong:before{content:'★';color:#51e68e;font-size:25px;margin-right:9px}.hud>div:last-child strong:before{content:'◷';color:#8bdcfa;margin-right:8px}.hud small{color:#c1d7f5}.hud .round{color:var(--ink)}.hud .round span,html[data-theme=dark] .hud .round span{color:var(--muted)}.hud .round strong{font-size:21px}
.instruction,html[data-theme=dark] .instruction{margin:18px auto;padding:10px 16px;min-height:0;max-width:480px;border:1px solid var(--edge);background:var(--panel);border-radius:12px;color:var(--ink);font-size:12px;line-height:1.5;box-shadow:0 3px 12px #15224012}
.station{margin:26px -30px 0;box-shadow:0 10px 20px #11182755;border-top:5px solid #d6e2f3;border-bottom:5px solid #8695af}.rail-label,.rail-label.bottom{height:19px;background:linear-gradient(#9aa9c2,#46536b);border:0;color:#f0f4ff;font-size:7px;letter-spacing:1px}canvas{height:330px}.overlay.intro-overlay,html[data-theme=dark] .overlay.intro-overlay{background:#16203b14}.intro-overlay .modal button{border:1px solid #c4b2f6;background:linear-gradient(#9670d4,#63419d);border-radius:14px;font-size:18px;min-height:52px;box-shadow:0 5px 0 #38275b,0 8px 22px #0006}
.feedback,html[data-theme=dark] .feedback{display:grid;grid-template-columns:44px 1fr auto;gap:12px;max-width:410px;margin:26px auto 0;padding:15px 18px;background:var(--panel);border:1px solid var(--edge);border-radius:18px;box-shadow:0 6px 20px #182c4725}.feedback-icon,html[data-theme=dark] .feedback-icon{background:#16b777;color:#fff;border-radius:50%;box-shadow:0 0 16px #2df3a14a}.feedback span,html[data-theme=dark] .feedback span{color:var(--muted)}.feedback strong{font-size:11px;color:var(--ink)}#precision,html[data-theme=dark] #precision{color:#10b879;font-size:32px;letter-spacing:-1px}.accuracy-meter{grid-column:1/-1;height:8px;border-radius:8px;background:var(--track);overflow:hidden}.accuracy-meter div{height:100%;width:0;background:linear-gradient(90deg,#17c871,#55f3b6);transition:width .35s}
.bonus{max-width:300px;margin:10px auto 0;text-align:center;font-size:11px;letter-spacing:1px;color:var(--accent);font-weight:800;min-height:17px}.progress{justify-content:center;gap:12px;margin:18px auto 0}.progress i{flex:0 0 35px;height:35px;border-radius:50%;display:grid;place-items:center;background:var(--panel);border:1px solid var(--edge);color:var(--muted);font-style:normal;box-shadow:0 3px 9px #18213422}.progress i:after{content:'◇';font-size:26px}.progress i.done,html[data-theme=dark] .progress i.done{background:#12ba76;color:white}.progress i.done:after{content:'✓';font-size:19px}.progress i.active,html[data-theme=dark] .progress i.active{background:#8761c9;color:white;border:2px solid #eee1ff}footer{max-width:410px;margin:14px auto 0;justify-content:center}footer>span{display:none}footer button,html[data-theme=dark] footer button{color:var(--muted)}
@media(max-width:540px){.game{padding:18px 20px}.game header img{width:145px}.game h1{font-size:36px}.game .heading{margin:21px 0 18px}.hud>div:not(.round){min-width:112px;padding:11px 12px}.hud strong{font-size:24px}.hud .round strong{font-size:18px}.hud span{font-size:8px}.station{margin:20px -20px 0}canvas{height:clamp(220px,35svh,330px)}.feedback{margin-top:20px;padding:13px;gap:10px}#precision{font-size:27px}.instruction{font-size:11px;margin:15px auto}.game header #pause{width:36px;height:36px}#theme-toggle{font-size:10px;padding:8px}.progress{margin-top:14px}}
html,body{overflow-x:hidden}.game{overflow:hidden}.hud .round{min-width:40px}.hud{gap:8px}.hud small{font-size:12px}
.game .heading h1,html[data-theme=dark] .game .heading h1{transform:none;filter:none;text-shadow:none;font-size:0;line-height:0}
.game-title-logo{display:block;width:280px;max-width:100%;height:auto;object-fit:contain}
.game .heading{margin:12px 0 14px}
@media(max-width:540px){.game-title-logo{width:230px}.game .heading{margin:10px 0 12px}}
.game header img,html[data-theme=dark] .game header img{width:190px;height:auto;background:transparent;mix-blend-mode:normal;border-radius:0}
.game .heading{margin:-4px 0 6px}
.game-title-logo{width:350px}
@media(max-width:540px){.game header img{width:170px}.game-title-logo{width:285px;max-width:100%}.game .heading{margin:-5px 0 4px}}

/* Illustrated light workshop; the live conveyor stays above the floor. */
html:not([data-theme="dark"]) .game{background:#cec8eb url("atelier-clair-background.png") center top / 100% 100% no-repeat}
html:not([data-theme="dark"]) .game::before,html:not([data-theme="dark"]) .game::after{display:none}

/* Conveyor chassis: sharp rails and floor-mounted feet around the live belt. */
.station,.station:has(.intro-overlay:not([hidden])){overflow:visible;border:0;isolation:isolate;box-shadow:0 12px 17px -5px #17213c80,0 -4px 9px #26345430}
.station .rail-label,.station .rail-label.bottom{position:relative;z-index:3;height:22px;padding:0 24px;color:#27334f;text-shadow:0 1px #ffffff90;border-top:1px solid #f5f3ff;border-bottom:2px solid #44506c;background:linear-gradient(180deg,#e8e7f6 0%,#a0abc2 16%,#f1efff 32%,#b5bcd0 48%,#78869f 75%,#4a5772 100%);box-shadow:inset 0 1px #fff,0 3px 5px #111b3540;font-size:6px;letter-spacing:.8px}
.station .rail-label.bottom{border-top:1px solid #eef2ff;border-bottom:2px solid #52617c;box-shadow:inset 0 1px #fff,0 5px 6px #17213c55}
.station::before,.station::after{content:'';position:absolute;left:17%;right:17%;height:17px;z-index:-1;pointer-events:none;background:radial-gradient(circle at 12px 8px,#e8edf8 0 2px,#4f5b73 2.5px 4px,transparent 4.5px),radial-gradient(circle at calc(100% - 12px) 8px,#e8edf8 0 2px,#4f5b73 2.5px 4px,transparent 4.5px),linear-gradient(90deg,#536079,#d0d7e6 9px,#8f9bb4 18px,#56617c 25px,transparent 26px calc(100% - 26px),#56617c calc(100% - 25px),#d0d7e6 calc(100% - 9px),#536079);filter:drop-shadow(2px 4px 3px #18223a60)}
.station::before{top:-15px}.station::after{bottom:-15px}
.station .overlay{inset:22px 0;z-index:2}
.station .overlay.intro-overlay{inset:22px 0;padding-bottom:18px}

/* Blur only the workshop floor and chassis before play. */
.game:has(.intro-overlay:not([hidden]))::after{content:'';display:block;position:absolute;inset:0;width:auto;height:auto;border-radius:0;background:transparent;box-shadow:none;z-index:-1;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);pointer-events:none}
.station:has(.intro-overlay:not([hidden])) .rail-label,
.station:has(.intro-overlay:not([hidden]))::before,
.station:has(.intro-overlay:not([hidden]))::after{filter:blur(2px)}
.station .overlay.intro-overlay{background:transparent!important;backdrop-filter:none;-webkit-backdrop-filter:none}

/* Keep the moving belt and parcels soft during the welcome screen too. */
.station:has(.intro-overlay:not([hidden])) canvas{filter:blur(2px)}

@media(max-width:540px){html[data-theme=dark] .game{padding:18px 20px}}
/* Results sit directly over the softened conveyor. */
.station .overlay:not(.intro-overlay){background:rgba(15,22,42,.56);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
.station .overlay:not(.intro-overlay) .modal{background:transparent!important;border:0;box-shadow:none;padding:20px 24px;color:#fff}
.station .overlay:not(.intro-overlay) .modal h2{color:#fff;font-size:clamp(32px,6vw,46px);text-shadow:0 2px 12px #10162a70;margin:12px 0 16px}
.station .overlay:not(.intro-overlay) .modal .eyebrow{color:#d7c5ff;letter-spacing:2px}
.station .overlay:not(.intro-overlay) .modal p{color:#f1edfa;font-size:14px;line-height:1.6;margin:0 0 22px}
.station .overlay:not(.intro-overlay) .modal small{color:#d3cee2;margin-top:15px}
.station .overlay:not(.intro-overlay) .modal button{background:linear-gradient(#9670d4,#63419d);border:1px solid #c4b2f6;border-radius:14px;min-height:52px;box-shadow:0 4px 0 #38275b;font-size:18px}

#mode-picker{margin:8px auto 14px;text-align:center}#mode-picker[hidden],#packed[hidden],.progress[hidden]{display:none}.mode-options{display:flex;justify-content:center;gap:6px}.mode-options button{border:1px solid var(--edge);border-radius:20px;background:var(--panel);color:var(--ink);padding:9px 12px;font-size:12px}.mode-options button[aria-pressed=true]{background:#7651bc;color:white;border-color:#d3bcff}#mode-hint,#packed{font-size:11px;text-align:center;color:var(--ink);margin:8px 0}#start{position:relative;justify-content:center;padding-left:44px;padding-right:44px}#start span{position:absolute;right:18px;font-size:28px;line-height:1}

/* Stronger arcade start action, with room for the label and play icon. */
.station .intro-overlay .modal #start{width:240px;max-width:calc(100vw - 48px);min-height:64px;display:flex;align-items:center;justify-content:center;gap:18px;padding:12px 24px;border:2px solid #ded1ff;border-radius:18px;background:linear-gradient(180deg,#ac83ed 0%,#8854d0 48%,#683ba8 100%);color:#fff;font-size:23px;font-weight:800;letter-spacing:.2px;text-shadow:0 2px 2px #48267e80;box-shadow:inset 0 2px 1px #ffffff70,0 6px 0 #402368,0 10px 24px #17122c80,0 0 22px #a87bdf35;transition:transform .15s,box-shadow .15s,filter .15s}
.station .intro-overlay .modal #start span{position:static;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#ffffff20;border:1px solid #ffffff55;font-size:17px;line-height:1;padding-left:2px}
@media(hover:hover){.station .intro-overlay .modal #start:hover{transform:translateY(-2px);filter:brightness(1.12)}}
.station .intro-overlay .modal #start:active{transform:translateY(4px);box-shadow:inset 0 2px 1px #ffffff40,0 2px 0 #402368,0 5px 12px #17122c70}

/* Dark workshop matches the light environment layout. */
html[data-theme="dark"] .game{background:#15223b url("atelier-sombre-background.png") center top / 100% 100% no-repeat}
html[data-theme="dark"] .game::before,html[data-theme="dark"] .game::after{display:none}
html[data-theme="dark"] .game:has(.intro-overlay:not([hidden]))::after{display:block}
/* Workshop controls, shared geometry across both themes. */
:root{--console:linear-gradient(155deg,#eef0fa,#b6bfd5);--console-edge:#f6f8ff;--console-shadow:#4b557b55}
html[data-theme=dark]{--console:linear-gradient(155deg,#354563,#17253e);--console-edge:#7185ae;--console-shadow:#050c1b88}
.game header img,html[data-theme=dark] .game header img{width:150px}
.game header{height:38px;min-height:38px}
.game header #pause,#theme-toggle,html[data-theme=dark] #theme-toggle{border:2px solid #9eafce;background:linear-gradient(#526381,#202e49);box-shadow:inset 0 1px 2px #fff5,0 3px 0 #142139;color:#fff}
#theme-toggle{width:38px;height:38px;padding:0!important;border-radius:50%;font-size:17px!important}
.game .heading{margin:0 0 2px}.game-title-logo{width:300px}
#mode-picker{margin:0 auto 12px;max-width:350px}.mode-options{gap:3px;padding:5px;border-radius:12px;background:var(--console);border:1px solid var(--console-edge);box-shadow:0 3px 0 var(--console-shadow),inset 0 1px 2px #fff5}.mode-options button{flex:1;border:0;border-radius:7px;background:transparent;font-weight:700;padding:10px 7px}.mode-options button[aria-pressed=true]{background:linear-gradient(#a278db,#6844a6);box-shadow:inset 0 1px #dfc8ff,0 2px 3px #18233b66}#mode-hint{font-size:10px;margin:7px 0 0;opacity:.8}
.game .hud,html[data-theme=dark] .game .hud{position:relative;padding:8px;gap:8px;border-radius:15px;border:1px solid var(--console-edge);background:var(--console);box-shadow:inset 0 1px #fff5,0 4px 0 var(--console-shadow),0 7px 16px #101c3322}
.game .hud>div{flex:1;min-width:0!important;padding:10px 13px!important;border-radius:9px!important;background:linear-gradient(#152138,#283956)!important;border:1px solid #647695!important;box-shadow:inset 0 2px 6px #050b1c88!important}.game .hud>div:last-child{text-align:right}.game .hud strong{font-size:30px}.game .hud span{font-size:9px}
.game .instruction{border:0;background:transparent;box-shadow:none;margin:12px auto;padding:2px 8px;font-size:11px}
.game .station{margin-top:16px}
.game .feedback,html[data-theme=dark] .game .feedback{max-width:440px;margin:25px auto 0;border-radius:16px 16px 0 0;background:var(--console);border:1px solid var(--console-edge);border-bottom:0;box-shadow:inset 0 1px #fff6;padding:13px 16px;gap:9px}
.game .bonus{max-width:440px;margin:0 auto;min-height:26px;padding:5px 12px;background:var(--console);border-left:1px solid var(--console-edge);border-right:1px solid var(--console-edge);font-size:10px;letter-spacing:.5px}
.game #packed,.game .progress{max-width:440px;margin:0 auto;padding:9px 12px 12px;background:var(--console);border:1px solid var(--console-edge);border-top:0;border-radius:0 0 16px 16px;box-shadow:0 4px 0 var(--console-shadow);font-weight:700}.game .progress{gap:12px}.game .progress i{height:27px;flex-basis:27px}.game .progress i:after{font-size:19px}
.game footer{display:none}.game:has(#pause[aria-label="Reprendre"]) footer{display:flex;position:absolute;z-index:12;top:62px;left:20px;margin:0;padding:8px 12px;border-radius:10px;background:var(--console);border:1px solid var(--console-edge);box-shadow:0 5px 15px #0005}
@media(max-width:540px){.game-title-logo{width:260px}.game header img,html[data-theme=dark] .game header img{width:145px}.game .hud strong{font-size:27px}}

#mode-select{display:block;width:210px;margin:auto;min-height:42px;padding:9px 16px;border:1px solid var(--console-edge);border-radius:12px;background:var(--panel);color:var(--ink);font:700 13px Arial;box-shadow:0 3px 0 var(--console-shadow);cursor:pointer}#mode-select option{background:var(--floor);color:var(--ink)}

/* Compact mode control in the header, with an inset custom chevron. */
.game header #mode-picker{position:absolute;left:0;top:0;margin:0;max-width:none;width:125px}
.game header #mode-hint{display:none}
.game header #mode-select{appearance:none;-webkit-appearance:none;width:100%;min-height:38px;padding:9px 29px 9px 11px;font-size:11px;border-radius:10px}
.game header #mode-picker::after{content:'';position:absolute;right:13px;top:14px;width:6px;height:6px;border-right:2px solid var(--ink);border-bottom:2px solid var(--ink);transform:rotate(45deg);pointer-events:none}
@media(max-width:420px){.game header img,html[data-theme=dark] .game header img{width:105px}.game header #mode-picker{width:108px}.game header #mode-select{font-size:10px;padding-left:8px}}
/* Simple translucent panels let the workshop remain visible. */
.game .game-title-logo{width:370px;max-width:100%}
.game .heading{margin:0 0 6px}
.game .hud,html[data-theme=dark] .game .hud{background:rgba(0,0,0,.48);border:1px solid #ffffff25;box-shadow:none;padding:12px 8px}
.game .hud>div{background:transparent!important;border:0!important;box-shadow:none!important;border-radius:0!important}
.game .hud>div+div{border-left:1px solid #ffffff25!important}
.game .feedback,html[data-theme=dark] .game .feedback,.game .bonus,.game #packed,.game .progress{background:rgba(0,0,0,.48);border:0;box-shadow:none;color:#fff}
.game .feedback strong,.game .feedback span,html[data-theme=dark] .game .feedback span{color:#f2efff}
.game .feedback #precision,html[data-theme=dark] .game .feedback #precision{color:#47edab}
.game .bonus{color:#dac3ff}
.game .instruction,html[data-theme=dark] .game .instruction{background:transparent;border:0;box-shadow:none}
.game header #mode-select,#theme-toggle,html[data-theme=dark] #theme-toggle{background:rgba(0,0,0,.48);color:#fff;border:1px solid #ffffff40;box-shadow:none}
.game header #mode-picker::after{border-color:#fff}
@media(max-width:540px){.game .game-title-logo{width:330px}}
/* Theme changes colors only; typography and spacing stay identical. */
.game .hud span,html[data-theme=dark] .game .hud span{font-size:9px}
.game .instruction,html[data-theme=dark] .game .instruction{font-size:11px;line-height:1.5;margin:12px auto;padding:2px 8px}
.game #precision,html[data-theme=dark] .game #precision{font-size:32px}
@media(max-width:540px){.game #precision,html[data-theme=dark] .game #precision{font-size:27px}}

.game .hud .parcel-counter{flex:0 0 90px;align-items:center;text-align:center;padding:10px 5px!important}.parcel-counter strong{display:flex;align-items:center;gap:4px}.parcel-counter img{width:40px;height:40px;object-fit:contain}.game #packed{display:none}.game .bonus{border-radius:0 0 16px 16px;padding-bottom:12px}.game:has(.progress:not([hidden])) .bonus{border-radius:0}
@media(max-width:540px){.game .hud>div{padding:8px!important}.game .hud .parcel-counter{flex-basis:76px}.game .hud span,html[data-theme=dark] .game .hud span{font-size:8px;letter-spacing:.6px}.game .hud strong{font-size:24px}.parcel-counter img{width:34px;height:34px}}

/* Keep counter names accessible without visible labels. */
.game .hud .hud-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
@font-face{font-family:BarlowCounters;src:url('barlow-condensed-extrabold-italic.ttf') format('truetype');font-weight:800;font-style:italic;font-display:swap}
.game .hud strong,.game .hud strong b{font-family:BarlowCounters,Arial,sans-serif;font-style:italic;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.3px;line-height:1;text-shadow:0 2px 1px #14203e80}
.game .hud strong{font-size:34px}
.game .hud strong::before{font-family:Arial,sans-serif;font-style:normal;text-shadow:none}
.game .hud strong small{font-family:Arial,sans-serif;font-style:normal;font-size:12px}
@media(max-width:540px){.game .hud strong{font-size:30px}}

/* Three independent counters, with score as the focal point. */
.game .hud,html[data-theme=dark] .game .hud{background:transparent;border:0;box-shadow:none;padding:0;gap:10px;align-items:center}
.game .hud>div,.game .hud>div+div{background:rgba(0,0,0,.48)!important;border:0!important;border-radius:13px!important;box-shadow:none!important;padding:12px!important;min-height:60px;justify-content:center;align-items:center;text-align:center}
.game .hud .parcel-counter{flex:1;min-height:60px;padding:12px!important}
.game .hud .score-counter{flex:1.35;min-height:74px;background:rgba(0,0,0,.58)!important}
.game .hud .score-counter strong{font-size:44px;color:#fff8e7}
.game .hud>div:first-child strong::before{content:none}
.game .hud .score-counter strong::before{content:'★';font-family:Arial,sans-serif;font-style:normal;font-size:24px;color:#51e68e;margin-right:7px}
@media(max-width:540px){.game .hud{gap:8px}.game .hud>div,.game .hud .parcel-counter{padding:8px!important}.game .hud .score-counter strong{font-size:38px}.game .hud .score-counter strong::before{font-size:20px;margin-right:5px}}

.game .hud .score-counter strong::before,.game .hud>div:last-child strong::before{content:'';display:inline-block;width:40px;height:40px;margin-right:5px;vertical-align:middle;background:url('score-icon.png') center/contain no-repeat}
.game .hud>div:last-child strong::before{background-image:url('timer-icon.png');width:36px;height:36px}
@media(max-width:540px){.game .hud .score-counter strong::before{width:34px;height:34px}.game .hud>div:last-child strong::before{width:30px;height:30px}}

.game .hud #score,.game .hud #time{display:flex;align-items:center;justify-content:center;gap:5px}
.game .hud .score-counter strong::before,.game .hud>div:last-child strong::before{flex-shrink:0;margin-right:0}
.game .hud #time small{align-self:center}

.game .hud #time small{font-family:inherit;font-style:inherit;font-weight:inherit}

.game .hud #time small{font-size:.6em;align-self:flex-end;line-height:1;color:#fff;margin-bottom:2px}

.game #instruction{display:none}

.station .intro-overlay .modal #start{font-family:BarlowCounters,Arial,sans-serif;font-weight:800;font-style:italic;font-size:34px;letter-spacing:.8px;line-height:1;min-height:66px;text-transform:uppercase}
.station .intro-overlay .modal #start span{font-family:Arial,sans-serif;font-style:normal;font-weight:400;letter-spacing:0}

/* Arcade typography and a focused replay action on the results screen. */
.station .overlay:not(.intro-overlay) .modal{width:min(100%,440px);padding:16px 20px}
.station .overlay:not(.intro-overlay) .modal h2{font-family:BarlowCounters,Arial,sans-serif;font-style:italic;font-weight:800;font-size:clamp(40px,8vw,58px);line-height:1;letter-spacing:.5px;color:#fff8e7;text-transform:uppercase;text-shadow:0 3px 0 #252047,0 5px 14px #10162a60;margin:12px 0 16px}
.station .overlay:not(.intro-overlay) .modal .eyebrow{font-size:10px;letter-spacing:1.5px;line-height:1.5}
.station .overlay:not(.intro-overlay) .modal p{font-size:13px;line-height:1.5;margin:0 0 18px}
.station .overlay:not(.intro-overlay) .modal #start{display:flex;align-items:center;justify-content:center;gap:18px;width:260px;max-width:100%;min-height:66px;margin:auto;padding:12px 24px;font-family:BarlowCounters,Arial,sans-serif;font-style:italic;font-weight:800;font-size:34px;line-height:1;letter-spacing:.8px;text-transform:uppercase;border:2px solid #ded1ff;border-radius:18px;background:linear-gradient(180deg,#ac83ed,#8854d0 48%,#683ba8);box-shadow:inset 0 2px 1px #ffffff70,0 6px 0 #402368,0 10px 24px #17122c80;text-shadow:0 2px 2px #48267e80}
.station .overlay:not(.intro-overlay) .modal #start span{position:static;display:grid;place-items:center;flex:0 0 34px;height:34px;border-radius:50%;background:#ffffff20;border:1px solid #ffffff55;font-family:Arial,sans-serif;font-style:normal;font-size:25px;line-height:1}
.station .overlay:not(.intro-overlay) .modal small{display:none}

/* Compact text-only play and replay actions. */
.station .intro-overlay .modal #start,.station .overlay:not(.intro-overlay) .modal #start{width:190px;min-height:52px;padding:10px 24px;font-size:29px;border-radius:14px;gap:0;box-shadow:inset 0 2px 1px #ffffff60,0 4px 0 #402368,0 7px 18px #17122c60}
.station .intro-overlay .modal #start span,.station .overlay:not(.intro-overlay) .modal #start span{display:none}

.station .overlay:not(.intro-overlay) .modal #modal-tag{font-family:BarlowCounters,Arial,sans-serif;font-weight:800;font-style:italic;font-size:18px;letter-spacing:.7px;line-height:1.1;color:#ddcbff}
.result-accuracy{display:block;font-family:BarlowCounters,Arial,sans-serif;font-style:italic;font-weight:800;font-size:23px;line-height:1.2;text-transform:uppercase;color:#eee5ff}.result-accuracy b{font-size:30px;color:#8cf0c4;margin-left:6px}.result-invite{display:block;font-size:12px;line-height:1.4;margin-top:8px;color:#ded9e9}

.station .overlay:not(.intro-overlay) .modal .result-invite{display:block;visibility:visible;opacity:1;margin:12px 0 4px;color:#fff;font-size:13px;line-height:1.7}
.wave-word{display:inline-block;white-space:nowrap}.wave-letter{display:inline-block;animation:invite-wave 2.8s ease-in-out infinite}
@keyframes invite-wave{0%,100%{transform:translateY(0)}25%{transform:translateY(-3px)}75%{transform:translateY(3px)}}
@media(prefers-reduced-motion:reduce){.wave-letter{animation:none}}

#end-notice{display:none}
.station .overlay.ending-sequence{animation:result-blur .65s ease-out both}
.station .overlay.ending-sequence .modal{animation:result-reveal .35s .95s both;pointer-events:none}
.station .overlay.ending-sequence #end-notice{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff8e7;font-family:BarlowCounters,Arial,sans-serif;font-style:italic;font-size:clamp(30px,6vw,44px);text-transform:uppercase;text-align:center;pointer-events:none;animation:notice-arrive 1.1s both;text-shadow:0 3px 0 #252047}
#end-notice img{width:64px;height:64px;object-fit:contain;animation:timer-wiggle .22s .15s 3}
@keyframes result-blur{from{backdrop-filter:blur(0);-webkit-backdrop-filter:blur(0);background:rgba(15,22,42,0)}to{backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px);background:rgba(15,22,42,.56)}}
@keyframes result-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes notice-arrive{0%{opacity:0;transform:translateY(18px)}25%,72%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-8px)}}
@keyframes timer-wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-12deg)}75%{transform:rotate(12deg)}}
@media(prefers-reduced-motion:reduce){.station .overlay.ending-sequence,.station .overlay.ending-sequence .modal,#end-notice img{animation:none}.station .overlay.ending-sequence #end-notice{display:none}}

.station .overlay.ending-sequence #end-notice{animation-duration:2.35s}
.station .overlay.ending-sequence .modal{animation-delay:2.2s}
.station .overlay:not(.intro-overlay) .modal .result-invite{font-family:BarlowCounters,Arial,sans-serif;font-style:italic;font-weight:800;font-size:19px;line-height:1.4;letter-spacing:.3px;color:#eee5ff}

/* Match the secondary result text to the score's depth. */
.station .overlay:not(.intro-overlay) .modal #modal-tag,
.station .overlay:not(.intro-overlay) .modal .result-accuracy,
.station .overlay:not(.intro-overlay) .modal .result-invite{text-shadow:0 2px 0 #252047,0 4px 8px #10162a80}
.station .overlay:not(.intro-overlay) .modal .result-accuracy b{text-shadow:0 2px 0 #173d3b,0 4px 8px #10162a80}

.station .overlay:not(.intro-overlay) .modal>.result-accuracy{margin:10px 0 0;font-size:20px}
.station .overlay:not(.intro-overlay) .modal>.result-invite{margin:18px 0 0;font-size:17px}
.station .overlay:not(.intro-overlay) .modal h2{margin:10px 0 20px;font-variant-numeric:tabular-nums}
.station .overlay:not(.intro-overlay) .modal #modal-copy[hidden]{display:none}

#countdown{position:absolute;inset:22px 0;z-index:6;display:grid;place-items:center;pointer-events:none;font-family:BarlowCounters,Arial,sans-serif;font-style:italic;font-weight:800;font-size:100px;color:#fff8e7;text-shadow:0 5px 0 #453071,0 8px 24px #111a38aa;background:#101a3220}
#countdown[hidden]{display:none}.count-pop{animation:count-fade 1s ease-out both}
@keyframes count-fade{0%{opacity:0;transform:scale(.9)}20%,70%{opacity:1;transform:scale(1)}100%{opacity:0;transform:scale(1.04)}}
@media(prefers-reduced-motion:reduce){.count-pop{animation:none}}

.game:has(#countdown:not([hidden]))::after{content:'';display:block!important;position:absolute;inset:0;width:auto;height:auto;background:transparent;box-shadow:none;z-index:-1;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.station:has(#countdown:not([hidden])) canvas,.station:has(#countdown:not([hidden])) .rail-label{filter:blur(3px)}
.station #countdown{z-index:15;isolation:isolate;color:#fff8e7;background:transparent;font-size:110px}

.game.launching::after{content:'';display:block!important;position:absolute;inset:0;width:auto;height:auto;background:transparent;box-shadow:none;z-index:-1;backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px)}
.game.launching .station canvas,.game.launching .station .rail-label{filter:blur(3px)}
.station canvas,.station .rail-label{transition:filter .45s ease}
#ranking-button{display:none}.station .overlay:not(.intro-overlay) .modal #ranking-button{display:block;width:190px;margin:12px auto 0;padding:9px 16px;min-height:40px;background:#171d3970;border:1px solid #b99be6;border-radius:12px;box-shadow:none;color:#eee3ff;font:italic 800 23px BarlowCounters,Arial;text-transform:uppercase}
#ranking{width:min(420px,calc(100vw - 32px));max-height:85svh;padding:22px;border:1px solid #bba0f0;border-radius:20px;background:#17213bf5;color:#fff;box-shadow:0 15px 60px #0008}#ranking::backdrop{background:#080e22aa;backdrop-filter:blur(5px)}#ranking h2{font:italic 800 36px BarlowCounters,Arial;text-transform:uppercase;margin:0;text-align:center}#ranking-mode{text-align:center;color:#d7c4ff}#ranking-list{padding:0;margin:16px 0;max-height:48svh;overflow:auto;list-style:none}#ranking-list li{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:10px;padding:11px 10px;border-bottom:1px solid #ffffff15}#ranking-list b{font:italic 800 23px BarlowCounters,Arial;color:#fff8df}#ranking-list .is-you{background:#7950bc;border-radius:8px}#ranking small{display:block;text-align:center;font-size:10px;color:#c5bfd8}.ranking-close{position:absolute;right:12px;top:10px;background:transparent;border:0;color:white;font-size:28px}

.station .overlay:not(.intro-overlay) .modal .result-invite{opacity:0;visibility:hidden;transition:opacity .6s ease,visibility .6s}
.station .overlay:not(.intro-overlay) .modal .result-invite.score-finished{opacity:1;visibility:visible}
@media(prefers-reduced-motion:reduce){.station .overlay:not(.intro-overlay) .modal .result-invite{transition:none}}
/* Equal result actions: ranking on the left, replay on the right. */
.station .overlay:not(.intro-overlay) .modal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:12px;align-items:center}
.station .overlay:not(.intro-overlay) .modal>*{grid-column:1/-1}
.station .overlay:not(.intro-overlay) .modal #ranking-button{grid-column:1;grid-row:4}
.station .overlay:not(.intro-overlay) .modal #start{grid-column:2;grid-row:4}
.station .overlay:not(.intro-overlay) .modal #ranking-button,.station .overlay:not(.intro-overlay) .modal #start{width:100%;height:52px;min-height:52px;max-width:none;margin:0;padding:10px 8px;font-size:25px;border-radius:14px;box-sizing:border-box;display:flex;align-items:center;justify-content:center}

#ranking{font-family:BarlowCounters,Arial,sans-serif;font-style:italic;font-weight:800}
#ranking-list li>span{font-size:22px;line-height:1.2;text-shadow:0 2px 0 #10182c80}
#ranking-mode{font:italic 800 21px BarlowCounters,Arial,sans-serif;letter-spacing:.3px}
#ranking small{font:italic 800 14px/1.4 BarlowCounters,Arial,sans-serif;letter-spacing:.2px}

.game header #header-ranking{position:absolute;left:0;width:auto;height:38px;border-radius:10px;padding:7px 13px;background:#0007;border:1px solid #ffffff40;color:#fff;font:italic 800 18px BarlowCounters,Arial}
.game>#mode-picker{position:relative;width:140px;max-width:none;margin:22px 0 0 auto;text-align:right}
.game>#mode-picker #mode-hint{display:none}
.game>#mode-picker #mode-select{appearance:none;-webkit-appearance:none;width:100%;min-height:38px;padding:9px 30px 9px 12px;background:#0007;border:1px solid #ffffff40;color:#fff;font:italic 800 17px BarlowCounters,Arial;box-shadow:none}
.game>#mode-picker::after{content:'';position:absolute;right:14px;top:13px;width:6px;height:6px;border-right:2px solid white;border-bottom:2px solid white;transform:rotate(45deg);pointer-events:none}

#ranking-list{-webkit-mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-top,0px),#000 calc(100% - var(--fade-bottom,0px)),transparent);mask-image:linear-gradient(to bottom,transparent,#000 var(--fade-top,0px),#000 calc(100% - var(--fade-bottom,0px)),transparent)}

/* Podium colors follow rank, including when the player enters the top three. */
#ranking-list li:nth-child(1){--podium:#ffdb72}#ranking-list li:nth-child(2){--podium:#dce5f3}#ranking-list li:nth-child(3){--podium:#e6a477}
#ranking-list li:nth-child(-n+3)>span,#ranking-list li:nth-child(-n+3)>b{color:var(--podium);text-shadow:0 2px 0 #11182e,0 3px 8px #0005}
#ranking-list li:nth-child(1)>b{font-size:34px}#ranking-list li:nth-child(2)>b{font-size:30px}#ranking-list li:nth-child(3)>b{font-size:27px}

/* Metallic podium lettering with a strong, consistent relief. */
#ranking-list li{grid-template-columns:54px minmax(0,1fr) auto}
#ranking-list li:nth-child(1){--metal:linear-gradient(180deg,#fffbe0 0%,#ffe99a 30%,#d79722 53%,#fff0ad 72%,#e6ad37 100%)}
#ranking-list li:nth-child(2){--metal:linear-gradient(180deg,#fff 0%,#e5efff 30%,#8a9eb9 53%,#f7fbff 72%,#b9cce3 100%)}
#ranking-list li:nth-child(3){--metal:linear-gradient(180deg,#ffe8ce 0%,#efbc90 30%,#a45b30 53%,#ffd2a8 72%,#ce8550 100%)}
#ranking-list li>span,#ranking-list li>b{text-shadow:0 3px 0 #080d20,0 5px 7px #000b}
#ranking-list li:nth-child(-n+3)>span,#ranking-list li:nth-child(-n+3)>b{background-image:var(--metal);background-clip:text;-webkit-background-clip:text;color:transparent;-webkit-text-fill-color:transparent;text-shadow:none;filter:drop-shadow(0 3px 0 #080d20) drop-shadow(0 4px 3px #000b)}
#ranking-list li:nth-child(-n+3)>span:first-child{font-size:27px;letter-spacing:-.5px;line-height:1.2}
#ranking-list li:first-child>span:first-child{font-size:31px}

/* Fine dark outlines replace the heavy leaderboard shadows. */
#ranking-list li>span,#ranking-list li>b{paint-order:stroke fill;-webkit-text-stroke:1px #080b15;text-shadow:0 1px 2px #0004}
#ranking-list li:nth-child(-n+3)>span,#ranking-list li:nth-child(-n+3)>b{-webkit-text-stroke:.7px #080b15;text-shadow:none;filter:drop-shadow(0 1px 1px #0005)}

#ranking-list li>span,#ranking-list li>b{-webkit-text-stroke:1.5px #050710;paint-order:stroke fill;text-shadow:none;filter:drop-shadow(0 0 1px #c7cde080)}
#ranking-list li:nth-child(-n+3)>span,#ranking-list li:nth-child(-n+3)>b{-webkit-text-stroke:1.3px #050710;filter:drop-shadow(0 0 1px #dce3f599)}

/* Bold arcade outline, especially on the regular ranking rows. */
#ranking-list li:nth-child(n+4)>span,#ranking-list li:nth-child(n+4)>b{-webkit-text-stroke:3px #03040a;paint-order:stroke fill;filter:drop-shadow(0 0 .6px #c7cde060)}
#ranking-list li:nth-child(-n+3)>span,#ranking-list li:nth-child(-n+3)>b{-webkit-text-stroke:1.8px #03040a}

/* Compact contextual feedback, with precision as the focal point. */
.game .feedback,html[data-theme=dark] .game .feedback{display:flex;justify-content:center;align-items:center;gap:18px;min-height:66px;padding:13px 18px;border-radius:16px;max-width:440px;text-align:center}
.game .feedback .feedback-icon,.game .feedback .accuracy-meter,.game .bonus{display:none}
.game .feedback:not(.has-result) #feedback-label,.game .feedback:not(.has-result) #precision{display:none}
.game .feedback #feedback-value{font:italic 800 19px/1.25 BarlowCounters,Arial;color:#eee5ff;text-shadow:0 2px 0 #141a32}
.game .feedback.has-result{text-align:left;flex-direction:row-reverse;animation:feedback-arrive .25s ease-out}
.game .feedback.has-result #feedback-label{font:italic 800 23px/1.1 BarlowCounters,Arial;letter-spacing:.4px;color:var(--result-color)}
.game .feedback.has-result #feedback-value{font:italic 800 16px/1.3 BarlowCounters,Arial;color:#eee5ff}
.game .feedback #precision,html[data-theme=dark] .game .feedback #precision{margin:0;font:italic 800 44px/1 BarlowCounters,Arial;color:var(--result-color);text-shadow:0 3px 0 #141a32}
.feedback[data-result=perfect]{--result-color:#8cf0c4}.feedback[data-result=good]{--result-color:#ffdb72}.feedback[data-result=retry]{--result-color:#ff9b8c}
.game.results-screen .feedback,.game.results-screen .progress{display:none}
@keyframes feedback-arrive{from{opacity:.5;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.game .feedback.has-result{animation:none}}

/* Mobile result invitation and lighter metallic lettering. */
.station .overlay:not(.intro-overlay) .modal>.result-invite{white-space:nowrap;font-size:clamp(10px,3.25vw,17px);letter-spacing:0}
#ranking-list li:nth-child(-n+3)>span,#ranking-list li:nth-child(-n+3)>b{-webkit-text-stroke:.65px #03040a;filter:drop-shadow(0 1px 1px #0006)}

html[data-theme=light] .game header>img{filter:brightness(0)}

.theme-toolbar{display:flex;align-items:center;gap:8px}
#sound-toggle{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;padding:0;border-radius:50%;background:rgba(0,0,0,.48);color:#fff;border:1px solid #ffffff40;box-shadow:none;cursor:pointer}
@media(max-width:420px){.theme-toolbar{gap:5px}#theme-toggle,#sound-toggle{width:32px;height:32px}}

.game .feedback #combo-badge{display:block;width:max-content;margin:7px auto 0;padding:3px 10px;border:1px solid #8cf0c480;border-radius:20px;background:#184e4166;color:#8cf0c4;font:italic 800 18px/1.2 BarlowCounters,Arial;letter-spacing:.4px;text-shadow:0 2px 0 #141a32}
.game .feedback #combo-badge[hidden]{display:none}
.game .feedback #combo-badge.combo-hot{color:#ffcd73;border-color:#ffbe6880;background:#71401366}
.combo-pop{animation:combo-pop .32s ease-out}
@keyframes combo-pop{0%{transform:scale(.85)}50%{transform:scale(1.12)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.combo-pop{animation:none}}