/* Shift's visual system, with a pumpkin accent. */
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:#f5f8fc;color:#243247;font-family:'Manrope',Arial,sans-serif}
button,input{font:inherit}
button{cursor:pointer}
button:disabled{cursor:wait;opacity:.55}
button:focus-visible,a:focus-visible{outline:3px solid #ea580c;outline-offset:3px}
main{max-width:1136px;margin:auto;padding:0 48px}
header{height:86px;border-bottom:1px solid #dce5f0;display:flex;align-items:center;justify-content:space-between}
.brand{font-size:25px;font-weight:800;color:#243247;letter-spacing:-1.2px}
.brand a{color:inherit;text-decoration:none}
.brand span{font-size:17px;color:#7b8da5;font-weight:500;letter-spacing:0}
.edition,.eyebrow{font-size:10px;font-weight:800;letter-spacing:2px}
.edition{color:#7b8da5}
.intro{margin:44px 0 30px}
.eyebrow{color:#647b98;display:flex;align-items:center;gap:8px}
.eyebrow i{width:6px;height:6px;border-radius:50%;background:#ea580c}
h1{font-size:70px;line-height:1;margin:15px 0;letter-spacing:-4px}
h1 span{color:#ea580c}
.intro p{font-size:15px;color:#7286a0;margin:0;line-height:1.7}
.mobile{display:none}
.layout{display:grid;grid-template-columns:minmax(300px,640px) minmax(240px,1fr);gap:64px}
.stats{display:flex;gap:44px;padding:0 0 20px}
.stats div{display:flex;flex-direction:column;gap:6px}
.stats span{font-size:9px;letter-spacing:1.7px;color:#7286a0;font-weight:800}
.stats strong{font-size:30px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums}
.stats strong span{font-size:inherit;letter-spacing:0;color:inherit;font-weight:inherit}
.slots{display:flex;gap:6px}
.slots i{width:30px;height:34px;border:2px dashed #c5d6ee;border-radius:7px;font:800 21px/30px 'Manrope',Arial,sans-serif;font-style:normal;text-align:center;color:#fff}
.slots i.found{border:2px solid #ea580c;background:#ea580c;animation:letter-in .35s ease-out}
@keyframes letter-in{0%{transform:scale(.6);opacity:0}70%{transform:scale(1.12)}100%{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.slots i.found{animation:none}}

.quest{position:relative}
ecm-viewer{display:block;position:relative;isolation:isolate;height:auto;border:9px solid #e1eaf6;border-radius:15px;background:#1e1536;
  --ecm-stage-bg:#1e1536;--ecm-showcase-stage-height:min(660px,calc(100vh - 120px))}
.overlay{position:absolute;inset:0;background:#f5f8fcf2;border-radius:15px;z-index:10;display:flex;align-items:center;justify-content:center;padding:24px}
.escape-card{width:100%;max-width:300px}
.escape-card h2{font-size:34px;letter-spacing:-1.4px;line-height:1.15;margin:14px 0 4px}
.escape-time{margin:0 0 6px}
.escape-time strong{font-size:56px;letter-spacing:-2px;font-variant-numeric:tabular-nums;color:#ea580c}
.escape-card p{font-size:13px;color:#6e83a0;line-height:1.7}
.escape-card label{display:block;font-size:11px;font-weight:700;margin:18px 0 8px}
.escape-card input{width:100%;border:1px solid #c5d6ee;border-radius:7px;padding:13px;background:#ffffffa0;color:#243247;outline-color:#ea580c}
.escape-card input[aria-invalid=true]{border-color:#d9897f}
.primary{display:block;border:0;background:#ea580c;color:white;padding:15px 18px;width:100%;border-radius:7px;margin-top:10px;font-size:13px;font-weight:700;text-align:center;text-decoration:none}
.link{border:0;background:none;color:#647b98;font-size:12px;font-weight:700;padding:14px 0 0;width:100%}
.name-error{font-size:12px;line-height:1.5;color:#a44237;margin:8px 0 0}
.name-error:empty{display:none}
.shake{animation:shake .4s ease-in-out}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-7px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(2px)}}

.under{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:15px 0;font-size:11px;color:#6e83a0}
.under button,.restart{border:0;background:none;color:#ea580c;font-size:11px;padding:0}
.restart{color:#7087a5;text-decoration:underline;margin-top:10px}
.instructions{font-size:13px;line-height:1.8;background:#fdf0e4;padding:18px;border-radius:8px}
.error{font-size:12px;color:#a44237}
.error:empty{display:none}

.leader-heading{padding-top:9px}
.leader-heading h2{font-size:24px;letter-spacing:-1px;margin:15px 0 9px;display:flex;justify-content:space-between}
.leader-heading h2 span{font-weight:400;color:#8fa4c2}
.leader-heading p{font-size:11px;color:#768ba8}
.table-head{display:flex;justify-content:space-between;font-size:9px;letter-spacing:1.5px;color:#7f93ad;border-bottom:1px solid #d9e4f2;padding:25px 0 12px}
ol{list-style:none;padding:0;margin:0}
li{display:flex;align-items:center;gap:17px;padding:17px 0;border-bottom:1px solid #e0e9f5;font-size:13px}
.rank{color:#8b9eb8;font-size:10px;width:18px}
li:first-child .rank{color:#ea580c}
.player{flex:1;overflow-wrap:anywhere}
li .candies{font-size:11px;color:#8b9eb8}
li strong{font-size:13px;font-variant-numeric:tabular-nums}
.empty{min-height:220px;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;color:#8398b4}
.empty-mark{font-size:56px;font-weight:500;letter-spacing:-4px;color:#f3cfae}
.empty h3{font-size:13px;color:#627e9f;font-weight:600;margin:8px}
.empty p{font-size:11px;line-height:1.8;margin:0}
.empty button{border:0;background:none;color:#ea580c;font-size:11px;padding:0;margin-top:8px}
.note{border-top:1px solid #d9e4f2;padding:26px 0}
.note>span{font-size:9px;font-weight:800;letter-spacing:1.5px;color:#8199b5}
.note p{font-size:18px;line-height:1.5;letter-spacing:-.4px;color:#637f9e;margin:15px 0}
.cta-link{font-size:13px;font-weight:700;color:#ea580c;text-decoration:none;line-height:1.6}
.cta-link:hover{text-decoration:underline}
.privacy{font-size:10px;color:#7f93ad;line-height:1.7;max-width:260px}
footer{display:flex;justify-content:space-between;border-top:1px solid #dce5f0;padding:22px 0;margin-top:40px;color:#7f93ad;font-size:10px}
footer a{color:inherit}
@media(min-width:1100px){.layout{gap:80px}}
@media(max-width:720px){main{padding:0 20px;max-width:560px}
header{height:65px}
.edition{font-size:8px;letter-spacing:1px}
.intro{margin:28px 0 24px}
h1{font-size:44px;letter-spacing:-2.5px}
.mobile{display:inline}
.intro p{font-size:13px}
.layout{grid-template-columns:1fr;gap:34px}
.stats{gap:24px;padding-bottom:14px}
.slots i{width:26px;height:30px;font-size:18px;line-height:26px}
.stats strong{font-size:26px}
/* Stacked showcase: the picture on top, the item card under it; the widget grows to fit. */
ecm-viewer{height:auto;border-width:5px;--ecm-showcase-stage-height:calc(100vw + 6px)}
.under{font-size:10px}
.note p{font-size:16px}
.privacy{max-width:none}
footer{margin-top:24px;font-size:9px}}
@media(prefers-reduced-motion:reduce){.shake{animation:none}}

/* Header: puzzle label (or help) and the theme toggle. */
.top-actions{display:flex;align-items:center;gap:14px}

/* Dark theme (data-theme=dark on <html>, set by /theme.js): generated from the light colours above —
   backgrounds flipped dark, text light, accents kept. Hand-tuned rules follow it. */
:root[data-theme=dark] body{background:#0f151c;color:#dfe4ec}
:root[data-theme=dark] button:focus-visible,:root[data-theme=dark] a:focus-visible{outline:3px solid #ea580c}
:root[data-theme=dark] header{border-bottom:1px solid #202933}
:root[data-theme=dark] .brand{color:#dfe4ec}
:root[data-theme=dark] .brand span{color:#738298}
:root[data-theme=dark] .edition{color:#738298}
:root[data-theme=dark] .eyebrow{color:#8796a9}
:root[data-theme=dark] .eyebrow i{background:#ea580c}
:root[data-theme=dark] h1 span{color:#f57d3e}
:root[data-theme=dark] .intro p{color:#7b8a9e}
:root[data-theme=dark] .stats span{color:#7b8a9e}
:root[data-theme=dark] .slots i{border:2px dashed #263447;color:#fff}
:root[data-theme=dark] .slots i.found{border:2px solid #ea580c;background:#ea580c}
:root[data-theme=dark] ecm-viewer{border:9px solid #19222e;background:#eae7f3;--ecm-stage-bg:#eae7f3}
:root[data-theme=dark] .overlay{background:#0f151cf2}
:root[data-theme=dark] .escape-time strong{color:#f57d3e}
:root[data-theme=dark] .escape-card p{color:#7c8ca1}
:root[data-theme=dark] .escape-card input{border:1px solid #263447;background:#ffffffa0;color:#dfe4ec;outline-color:#ea580c}
:root[data-theme=dark] .escape-card input[aria-invalid=true]{border-color:#d9897f}
:root[data-theme=dark] .primary{background:#ea580c}
:root[data-theme=dark] .link{color:#8796a9}
:root[data-theme=dark] .name-error{color:#c55e53}
:root[data-theme=dark] .under{color:#7c8ca1}
:root[data-theme=dark] .under button,:root[data-theme=dark] .restart{color:#f57d3e}
:root[data-theme=dark] .restart{color:#7688a0}
:root[data-theme=dark] .instructions{background:#2d1e10}
:root[data-theme=dark] .error{color:#c55e53}
:root[data-theme=dark] .leader-heading h2 span{color:#526784}
:root[data-theme=dark] .leader-heading p{color:#71839c}
:root[data-theme=dark] .table-head{color:#697c95;border-bottom:1px solid #1f2935}
:root[data-theme=dark] li{border-bottom:1px solid #1a232f}
:root[data-theme=dark] .rank{color:#5c6f88}
:root[data-theme=dark] li:first-child .rank{color:#f57d3e}
:root[data-theme=dark] li .candies{color:#5c6f88}
:root[data-theme=dark] .empty{color:#617591}
:root[data-theme=dark] .empty-mark{color:#5b3f26}
:root[data-theme=dark] .empty h3{color:#8194aa}
:root[data-theme=dark] .empty button{color:#f57d3e}
:root[data-theme=dark] .note{border-top:1px solid #1f2935}
:root[data-theme=dark] .note>span{color:#607793}
:root[data-theme=dark] .note p{color:#8295a9}
:root[data-theme=dark] .cta-link{color:#f57d3e}
:root[data-theme=dark] .privacy{color:#697c95}
:root[data-theme=dark] footer{border-top:1px solid #202933;color:#697c95}
/* Hand-tuned */
:root[data-theme=dark] .escape-card input{background:#151d27;border-color:#2b3644;color:#dfe4ec}
:root[data-theme=dark] ecm-viewer{background:#1e1536;--ecm-stage-bg:#1e1536}