@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;--cream:#f4e7c9;--orange:#ffb64d}*{box-sizing:border-box}body{margin:0;background:#171d1b;color:var(--cream);font:15px 'DM Sans',sans-serif}header,main,footer{max-width:1280px;margin:auto}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #ffffff18}.brand{display:flex;align-items:center;gap:12px;color:var(--orange);font:800 38px 'Barlow Condensed',sans-serif;text-decoration:none}.brand span{color:var(--cream);font-size:16px;line-height:.95;letter-spacing:2px}.edition{font-size:10px;letter-spacing:3px;color:#a6aaa0}button{font:inherit;cursor:pointer;color:inherit}header button{background:none;border:1px solid #4e554b;border-radius:30px;padding:10px 18px}.intro{display:flex;justify-content:space-between;align-items:center;padding:34px 0 25px}.eyebrow{font-size:10px;letter-spacing:2.4px;font-weight:700;color:var(--orange)}h1{font:700 43px 'Barlow Condensed',sans-serif;margin:6px 0} .intro p:last-child{color:#aeb2a9;font-size:13px;margin-bottom:0}.record{text-align:right;font-size:9px;letter-spacing:2px;color:#aeb2a9}.record strong{display:block;font:600 36px 'Barlow Condensed';color:var(--cream)}.game{position:relative;border:1px solid #726248;border-radius:14px;overflow:hidden;aspect-ratio:16/9;background:#473522;box-shadow:0 20px 70px #0005}canvas{width:100%;height:100%;display:block;touch-action:none}.hud{position:absolute;top:20px;left:24px;right:24px;display:flex;justify-content:space-between;pointer-events:none;font-size:10px;letter-spacing:2px;text-shadow:0 2px 6px #000}.hud strong{display:block;font:700 35px 'Barlow Condensed';letter-spacing:1px}.right{display:flex;gap:22px;align-items:flex-start}.right #lives{color:#ffba63;font-size:20px}.right button{pointer-events:auto;border:1px solid #ffffff66;background:#17201b99;border-radius:7px;padding:6px 10px}.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:#151a164d;backdrop-filter:blur(2px)}.ticket{text-align:center;background:#19221deb;border:1px solid #e4c88c55;border-radius:12px;padding:28px 40px;box-shadow:0 20px 60px #0007}.ticket h2{font:800 clamp(38px,6vw,76px)/.95 'Barlow Condensed';margin:15px 0 20px}.ticket p:not(.eyebrow){font-size:13px;line-height:1.7;color:#c2c5b9}.start{display:flex;justify-content:space-between;align-items:center;background:var(--orange);color:#20251c;border:0;border-radius:6px;width:100%;padding:16px 20px;font-weight:700;margin-top:24px}.start span{font-size:24px}.ticket small{display:block;margin-top:12px;font-size:10px;color:#929c8e}.controls{display:flex;align-items:center;justify-content:space-between;padding:22px 0 30px;gap:20px}.tools{display:flex;gap:12px}.tool{display:flex;align-items:center;gap:12px;border:1px solid #464c40;border-radius:9px;background:#212821;padding:13px 17px;text-align:left;min-width:220px}.tool.active{border-color:var(--orange);background:#3b3324}.tool b,.tool small{display:block}.tool b{font-size:13px}.tool small{font-size:10px;color:#adb09f;margin-top:4px}.icon{font-size:32px;color:var(--orange)}kbd{margin-left:20px;border:1px solid #626452;padding:2px 5px;color:#aeb2a0;font-size:10px}.controls p{font-size:11px;line-height:1.9;color:#bec3b6}.controls p small{color:#7e8c7c}.dot{display:inline-block;width:6px;height:6px;background:var(--orange);border-radius:50%;margin-right:7px}footer{display:flex;justify-content:space-between;border-top:1px solid #ffffff18;padding:23px 0 30px;font-size:9px;letter-spacing:1.5px;color:#8c9789}footer span{letter-spacing:0}#toast{position:absolute;bottom:15px;width:100%;text-align:center;color:#ffcf73;font-weight:700;pointer-events:none}button:focus-visible{outline:3px solid white;outline-offset:4px}@media(max-width:1320px){header,main,footer{margin-left:28px;margin-right:28px}}@media(max-width:700px){header{height:75px}.edition{display:none}.intro{padding:24px 0 20px}h1{font-size:30px}.intro p:last-child{max-width:260px;line-height:1.5}.game{aspect-ratio:4/5}canvas{object-fit:fill}.ticket{padding:22px;max-width:90%}.ticket h2{font-size:50px}.hud{left:14px;right:14px;top:12px}.right{gap:10px}.controls{flex-direction:column;align-items:stretch}.tools{gap:8px}.tool{min-width:0;width:50%;padding:10px;gap:8px}.tool kbd{display:none}.icon{font-size:25px}.controls p{margin:0}footer span{display:none}header,main,footer{margin-left:16px;margin-right:16px}}

.brand img{width:155px;height:52px;object-fit:cover;object-position:center;clip-path:inset(0 33%);transform:scale(2.5);margin:0 -40px}.brand{gap:18px}.brand span{margin-left:12px}.intro h1{font-size:39px}.ticket{background:#19221df0}@media(max-width:700px){.brand img{width:110px;margin:0 -28px}.brand span{font-size:13px}.intro h1{font-size:28px}}

.brand img{width:155px;height:55px;object-fit:cover;object-position:center;clip-path:none;transform:none;margin:0}.brand span{margin-left:0}@media(max-width:700px){.brand img{width:120px;height:45px;margin:0}}

#canvas{cursor:url('opener.svg') 12 15,pointer}.tool-icon{width:36px;height:36px;flex-shrink:0;filter:drop-shadow(0 2px 2px #0007)}@media(max-width:700px){.tool-icon{width:30px;height:30px}}

.bonus-scene{position:absolute;inset:0;z-index:8;background:#13201c}.bonus-scene[hidden]{display:none}.bonus-scene canvas{width:100%;height:100%;object-fit:fill}.bonus-caption{position:absolute;bottom:20px;left:10%;right:10%;text-align:center;pointer-events:none}.bonus-caption p{font-size:11px;letter-spacing:3px;color:#ffcf75;margin:0}.bonus-caption h2{font:700 clamp(26px,4vw,50px) 'Barlow Condensed';margin:5px 0 10px;text-shadow:0 2px 8px #000}.bonus-caption button{pointer-events:auto;background:#ffb64d;color:#19221d;border:0;border-radius:6px;padding:11px 20px;font-weight:700}@media(max-width:700px){.bonus-caption{bottom:16px;left:5%;right:5%}.bonus-caption h2{font-size:30px}}

/* Touch layout */
@media(max-width:700px){
 body{overflow-x:hidden}header{height:66px}.brand{gap:12px}.brand img{width:112px;height:40px}header button{min-height:44px;padding:9px 13px;font-size:12px}
 .intro{padding:18px 0;gap:10px;align-items:center}.intro .eyebrow{font-size:8px;letter-spacing:1.5px} .intro h1{font-size:28px;line-height:1.05;max-width:270px}.intro p:last-child{font-size:11px;line-height:1.45;max-width:260px}.record{font-size:8px;letter-spacing:1px;min-width:48px}.record strong{font-size:28px}
 .game{aspect-ratio:1.18;border-radius:10px;isolation:isolate}.hud{top:10px;left:12px;right:10px;font-size:8px;letter-spacing:1px}.hud strong{font-size:26px}.right{gap:10px;align-items:center}.right #lives{font-size:16px}.right button{min-width:40px;min-height:40px}
 .ticket{padding:16px 20px;max-width:92%;max-height:96%;overflow:auto}.ticket .eyebrow{font-size:8px;letter-spacing:1.2px}.ticket h2{font-size:39px;margin:9px 0 12px}.ticket p:not(.eyebrow){font-size:11px;line-height:1.5;margin:8px 0}.start{margin-top:12px;padding:10px 16px;min-height:46px}.ticket small{margin-top:8px;font-size:9px}
 .controls{padding:12px 0 16px;gap:10px}.tools{position:sticky;bottom:max(8px,env(safe-area-inset-bottom));z-index:9;gap:8px;background:#171d1bf2;padding:6px;border-radius:12px;box-shadow:0 6px 24px #0007}.tool{min-height:66px;padding:10px 8px;gap:7px;border-radius:8px}.tool b{font-size:12px}.tool small{font-size:9px;line-height:1.4}.tool-icon{width:28px;height:28px}.controls p{font-size:10px;line-height:1.6}.controls p small{font-size:9px}footer{padding:16px 0;font-size:8px}
 .bonus-caption{bottom:12px}.bonus-caption p{font-size:9px;letter-spacing:1.3px}.bonus-caption h2{font-size:27px;margin:3px 0 7px}.bonus-caption button{min-height:44px;padding:9px 16px;font-size:12px}
}
@media(max-width:360px){.intro h1{font-size:25px}.ticket h2{font-size:33px}.ticket{padding:12px 16px}.tool small{font-size:8px}.tool b{font-size:11px}.tool-icon{width:24px;height:24px}.right{gap:6px}}
@media(max-height:500px) and (orientation:landscape){header{height:54px}.intro{padding:10px 0}.intro h1{font-size:27px}.intro p:last-child{display:none}.game{max-height:74svh;aspect-ratio:16/9;width:100%}.ticket{padding:10px 25px}.ticket h2{font-size:35px;margin:5px 0}.ticket p:not(.eyebrow){font-size:11px;line-height:1.3}.start{margin-top:8px;padding:9px 16px}.controls{padding:10px 0}.tool{min-height:55px}}

@media(max-width:700px){.ticket{padding:10px 16px;overflow:visible}.ticket h2{font-size:30px;line-height:1;margin:5px 0}.ticket .eyebrow{font-size:7px;margin:4px 0}.ticket p:not(.eyebrow){font-size:10px;line-height:1.35;margin:5px 0}.ticket small{display:none}.ticket .start{min-height:44px;margin-top:8px;padding:8px 14px}}

.pause-back{display:block;text-decoration:none;text-align:center;border:1px solid #a4ac9566;border-radius:6px;padding:12px 14px;margin-top:10px;font-size:13px;color:var(--cream);min-height:44px}.pause-back[hidden]{display:none}.pause-back:hover{border-color:var(--orange);color:var(--orange)}.pause-back:focus-visible{outline:3px solid white;outline-offset:3px}@media(max-width:700px){.pause-back{font-size:12px;padding:10px 12px;margin-top:8px}}

/* Keep the 1440 × 810 drawing proportional on touch screens. HUD is outside the picture. */
@media(max-width:700px), (max-height:500px) and (pointer:coarse){
 .game{display:flex;flex-direction:column;aspect-ratio:auto;width:100%;max-height:none}
 .game>canvas{display:block;flex:none;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
 .game>.hud{position:relative;inset:auto;order:-1;flex:none;min-height:52px;padding:8px 12px;background:#18271f;text-shadow:none;letter-spacing:1px;gap:8px}
 .game>.hud .right{justify-content:flex-end;flex-wrap:wrap;gap:6px}
 .game>.hud strong{font-size:24px}
 .game>.overlay{position:fixed;inset:0;z-index:40;overflow-y:auto;padding:24px 12px;background:#101b18e8;backdrop-filter:blur(5px)}
 .game>.overlay .ticket{width:min(440px,94%);max-width:94%;max-height:calc(100svh - 48px);overflow-y:auto;padding:20px}
 .game>.overlay .ticket h2{font-size:38px;line-height:1.05;margin:8px 0 14px}
 .game>.overlay .ticket p:not(.eyebrow){font-size:12px;line-height:1.55;margin:10px 0}
 .game>.overlay .ticket .start{min-height:46px;margin-top:14px}
 .game>.overlay .pause-back{min-height:42px;padding:10px}
}
@media(orientation:landscape) and (max-height:500px){
 .game{width:min(100%,calc((100svh - 112px)*16/9));max-height:none;margin-inline:auto}
 .game>.overlay .ticket{padding:12px 20px;max-height:calc(100svh - 24px)}
 .game>.overlay .ticket h2{font-size:30px;margin:4px 0 8px}
 .game>.overlay .ticket p:not(.eyebrow){font-size:11px;line-height:1.35;margin:6px 0}
}
@media(max-width:700px), (max-height:500px) and (pointer:coarse){
 .game:has(>.overlay:not([style*="display: none"])){z-index:50;overflow:visible}
}

.game>canvas{-webkit-tap-highlight-color:transparent}