@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Mono:wght@400;500&display=swap');

:root { color-scheme: dark; --cream:#f5e7c4; --ink:#101616; --lime:#b7d36b; --red:#ef6351; }
* { box-sizing: border-box; }
body { margin:0; height:100vh; height:100dvh; padding:8px 0; display:grid; place-items:center; background:#0b1010; color:var(--cream); font-family:'DM Mono',monospace; overflow:hidden; }
body::before { content:""; position:fixed; inset:0; pointer-events:none; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"); }
.shell {
  /* Intentionally compact: roughly 80% of the original 1100px presentation. */
  width:min(880px,94vw);
}
header { display:flex; justify-content:space-between; align-items:end; gap:20px; margin-bottom:12px; }
h1,h2,.stamp,button { font-family:'Bebas Neue',sans-serif; letter-spacing:.05em; }
h1 { font-size:clamp(38px,6vw,72px); line-height:.75; margin:0; transform:rotate(-1deg); text-shadow:3px 3px 0 #6c3c28; }
.eyebrow { color:var(--lime); font-size:11px; letter-spacing:.2em; margin:0 0 8px; }
.brand-link { margin-left:auto; display:flex; align-items:center; gap:8px; color:#8d9487; font-size:9px; text-decoration:none; letter-spacing:.12em; text-transform:uppercase; }
.brand-link:hover { color:var(--cream); }
.brand-crop { width:170px; height:62px; overflow:hidden; display:block; border:1px solid #494f45; background:#070909; }
.brand-crop img { display:block; width:170px; height:auto; transform:translateY(-25px); }
.meters { width:330px; display:grid; gap:8px; font-size:10px; }
.meters label { display:grid; grid-template-columns:90px 40px 1fr; align-items:center; }
.meters .night { color:var(--cream); letter-spacing:.14em; grid-template-columns:90px 1fr; }
.meters .night span { color:var(--lime); }
.meters i { height:8px; background:#26302e; transform:skew(-15deg); overflow:hidden; }
.meters b { display:block; height:100%; width:0; background:var(--lime); transition:width .15s; }
#suspicionBar { background:var(--red); }
.reward-progress { margin-top:1px; }
.reward-track { display:grid; grid-template-columns:repeat(30,1fr); gap:2px; align-items:end; height:16px; padding:0 2px; }
.reward-step { display:block; height:4px; background:#36413a; transform:skew(-12deg); transition:background .2s,box-shadow .2s; }
.reward-step.group-end { margin-right:4px; }
.reward-step.milestone { position:relative; height:7px; background:#514a31; }
.reward-step.milestone::after { content:'♛'; position:absolute; left:50%; bottom:5px; color:#675d3c; font:10px serif; transform:translateX(-50%) skew(12deg); }
.reward-step.complete { background:#ffc65c; box-shadow:0 0 5px rgba(255,198,92,.55); }
.reward-step.complete.milestone::after { color:#ffc65c; text-shadow:0 0 7px rgba(255,198,92,.8); }
.reward-step.current { background:var(--lime); animation:rewardPulse 1.4s ease-in-out infinite; }
@keyframes rewardPulse { 50% { transform:translateY(-2px) skew(-12deg); box-shadow:0 0 9px var(--lime); } }
.game-wrap { position:relative; border:2px solid #7b765e; box-shadow:0 20px 80px #000; background:#15201d; }
canvas { display:block; width:100%; height:auto; image-rendering:auto; }
.overlay { position:absolute; inset:0; display:grid; place-items:center; padding:16px; background:rgba(7,11,10,.78); backdrop-filter:blur(3px); transition:.25s; }
.overlay:not(.visible) { opacity:0; pointer-events:none; }
.card { width:min(460px,88%); max-height:100%; text-align:center; padding:24px 28px; border:1px solid #85826b; background:#121a18; box-shadow:8px 8px 0 #080b0a; transform:rotate(-.35deg); }
.stamp { display:inline-block; color:#101616; background:var(--red); padding:4px 10px; transform:rotate(-3deg); }
h2 { margin:8px 0; font-size:clamp(36px,5vw,58px); line-height:.9; }
.card p:not(.stamp) { margin:8px 0; color:#b9baa8; line-height:1.45; font-size:12px; }
button { border:0; color:#101616; background:var(--lime); font-size:21px; padding:10px 27px; margin:8px; cursor:pointer; box-shadow:5px 5px 0 #56702f; }
button:hover { transform:translate(2px,2px); box-shadow:3px 3px 0 #56702f; }
small { display:block; color:#777e72; margin-top:7px; }
.context-shop { display:inline-block; margin:2px 0 10px; color:var(--lime); font-size:10px; letter-spacing:.08em; text-decoration:none; }
.context-shop:hover { text-decoration:underline; }
.reward-box { position:relative; margin:11px auto 6px; padding:12px 24px; max-width:350px; border:2px dashed #6f511b; color:#211706; background:linear-gradient(135deg,#ffe59a,#f2b83e 48%,#ffda72); box-shadow:0 0 26px rgba(255,198,92,.35), inset 0 0 0 3px rgba(255,255,255,.2); animation:ticketArrive .55s cubic-bezier(.2,1.5,.5,1); }
.reward-box::before,.reward-box::after { content:""; position:absolute; top:50%; width:18px; height:18px; border-radius:50%; background:#121a18; transform:translateY(-50%); }
.reward-box::before { left:-11px; }.reward-box::after { right:-11px; }
.reward-box[hidden] { display:none; }
.reward-box span { display:block; color:#684713; font-size:10px; letter-spacing:.14em; }
.reward-box strong { display:block; margin:5px 0; color:#171006; font:34px 'Bebas Neue',sans-serif; letter-spacing:.12em; text-shadow:0 1px #fff0ba; }
.reward-box a { color:#352307; font-weight:bold; text-decoration:underline; }
@keyframes ticketArrive { from { opacity:0; transform:translateY(22px) rotate(-5deg) scale(.75); } to { opacity:1; transform:translateY(0) rotate(-1deg) scale(1); } }
footer { display:flex; gap:22px; padding-top:12px; font-size:10px; color:#8d9487; align-items:center; }
.audio-button { margin:0; padding:4px 7px; border:1px solid #59615b; background:#141c19; color:var(--lime); font:10px 'DM Mono',monospace; letter-spacing:0; box-shadow:none; }
.audio-button:hover { transform:none; box-shadow:none; border-color:var(--lime); }
.audio-button[aria-pressed="false"] { color:#727970; text-decoration:line-through; }
kbd { color:var(--cream); border:1px solid #59615b; padding:3px 6px; }
.objective { margin-left:auto; color:var(--lime); }
@media(max-width:900px){ .brand-link{display:none}.meters{width:210px}.meters label{grid-template-columns:70px 30px 1fr} footer{gap:8px}.objective{display:none} }
/* A 1980×1020 display usually leaves Edge with a viewport below 950 CSS px,
   especially when Windows display scaling is enabled. Shrink the playfield,
   not the browser UI, so every control remains on one screen. */
@media(max-height:950px){
  .shell { width:min(880px,92vw); }
  header { margin-bottom:8px; }
  footer { padding-top:8px; }
  .reward-progress { margin-top:0; }
}
@media(max-height:780px){
  .shell { width:min(720px,92vw); }
  h1 { font-size:42px; }
  .eyebrow { margin-bottom:4px; }
  .meters { width:250px; gap:5px; }
  .brand-link { gap:4px; }
  .brand-crop { width:130px; height:48px; }
  .brand-crop img { width:130px; transform:translateY(-19px); }
  footer { gap:8px; }
  .objective { display:none; }
  .overlay { padding:10px; }
  .card { width:min(430px,90%); padding:16px 22px; box-shadow:6px 6px 0 #080b0a; }
  h2 { font-size:clamp(32px,5vw,48px); margin:5px 0; }
  .card p:not(.stamp) { margin:5px 0; line-height:1.35; font-size:11px; }
  .context-shop { margin-bottom:5px; }
  .reward-box { margin:7px auto 4px; padding:9px 20px; }
  .reward-box strong { font-size:30px; }
  .card button { margin:5px; padding:8px 24px; font-size:19px; }
  .card small { margin-top:4px; font-size:9px; }
}
@media(max-height:700px){
  .shell { width:min(640px,90vw); }
  h1 { font-size:38px; }
  .eyebrow { margin-bottom:4px; }
  header { margin-bottom:7px; }
  footer { padding-top:7px; }
}