.hw { --bg: #0b0910; background: var(--bg); }
.hw .site-header { background: rgba(11, 9, 16, .88); }

/* ── Game stage ─────────────────────────────────────────── */
.game {
  --ar: 2 / 1;
  position: relative; display: grid; place-items: center;
  background: #05030a;
  min-height: min(calc(100svh - var(--header-h)), calc(100vw / var(--ar-n, 2)));
}
@media (max-width: 759px) { .game { --ar: 9 / 16; --ar-n: .5625; } }

.scene {
  position: relative; overflow: hidden; isolation: isolate;
  width: min(100vw, calc((100svh - var(--header-h)) * var(--ar-n, 2)));
  aspect-ratio: var(--ar);
  touch-action: pan-y;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  cursor: default;
}
.game[data-state="playing"] .scene { touch-action: none; cursor: none; }
.scene__img, .scene__img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* Items */
.scene__items { position: absolute; inset: 0; z-index: 1; }
.item {
  position: absolute; left: calc(var(--x) * 1%); top: calc(var(--y) * 1%); width: calc(var(--w) * 1%);
  aspect-ratio: 1; transform: translate(-50%, -50%) rotate(var(--rot, 0deg));
  padding: 0; border: 0; background: none; cursor: inherit; -webkit-tap-highlight-color: transparent;
}
.item picture, .item img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.item:focus-visible { outline: 3px dashed var(--warn); outline-offset: 4px; border-radius: 50%; }
.item.is-found { z-index: 3; cursor: pointer; animation: found-pop .5s var(--ease-snap); }
.item.is-found::after {
  content: ''; position: absolute; inset: -12%; border-radius: 50%; z-index: -1;
  background: radial-gradient(closest-side, rgba(255, 160, 60, .55), transparent);
  animation: found-glow 2.4s ease-in-out infinite;
}
.item.is-found[data-type="decoy"] { opacity: .85; }
.item.is-found[data-type="decoy"]::after { background: radial-gradient(closest-side, rgba(140, 120, 255, .35), transparent); }
.item.is-found[data-type="product"] { cursor: pointer; }
.item__tag {
  position: absolute; left: 50%; top: 100%; transform: translate(-50%, 2px);
  white-space: nowrap; font: 700 11px/1 var(--body); letter-spacing: .08em; text-transform: uppercase;
  background: var(--accent); color: #000; padding: 4px 6px; border-radius: 3px; opacity: 0;
}
.item.is-found .item__tag { opacity: 1; }
@keyframes found-pop { 0% { transform: translate(-50%, -50%) scale(1); } 40% { transform: translate(-50%, -50%) scale(1.35) rotate(-6deg); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes found-glow { 50% { opacity: .5; transform: scale(1.1); } }

/* Darkness + flashlight. The beam is one big gradient element moved with transform (compositor only). */
.scene__dark { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; }
/* Until JS has measured the scene, plain darkness; the beam joins once sized (no layout shift). */
.scene__dark:not(.is-ready) { background: rgba(4, 2, 8, .9); }
.scene__dark:not(.is-ready) .beam { display: none; }
.beam {
  position: absolute; left: 0; top: 0;
  width: var(--d, 4000px); height: var(--d, 4000px);
  margin: calc(var(--d, 4000px) / -2) 0 0 calc(var(--d, 4000px) / -2);
  transform: translate3d(var(--bx, 50%), var(--by, 50%), 0);
  background: radial-gradient(circle at center,
    rgba(255, 220, 160, .07) 0,
    rgba(4, 2, 8, 0) calc(var(--r, 150px) * .5),
    rgba(4, 2, 8, calc(var(--amb, .9) * .6)) calc(var(--r, 150px) * .82),
    rgba(4, 2, 8, var(--amb, .9)) var(--r, 150px));
  will-change: transform;
}
.game.is-debug .scene__dark { display: none; }
.jumpzone { position: absolute; z-index: 4; border: 2px dashed #f0f; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.jumpzone::after { content: 'jumpscare'; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); color: #f0f; font-size: 11px; }

/* HUD */
.hud { position: absolute; z-index: 5; inset: 10px 10px auto; display: flex; justify-content: space-between; gap: 8px; pointer-events: none; }
.hud > * { pointer-events: auto; }
.hud__stats { display: flex; gap: 6px; }
.hud__stats > span, .hud__btn {
  background: rgba(0, 0, 0, .66); border: 1px solid rgba(255, 255, 255, .14); border-radius: 999px;
  padding: 6px 12px; font-family: var(--display); font-size: 20px; letter-spacing: .06em; line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hud__timer.is-late { color: var(--accent); }
.hud__actions { display: flex; gap: 6px; }
.hud__btn { cursor: pointer; min-width: 40px; min-height: 36px; color: var(--text); }
.hud__btn--text { font-size: 18px; }
.hud__btn:hover { border-color: rgba(255, 255, 255, .4); }

/* Overlays */
.overlay { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; padding: 16px; background: rgba(5, 3, 10, .5); }
.overlay__card {
  width: min(520px, 100%); max-height: 100%; overflow: auto;
  background: rgba(16, 11, 24, .94); border: 1px solid #33284a; border-radius: 12px;
  padding: clamp(20px, 4vw, 32px); text-align: center; box-shadow: 0 20px 60px rgba(0, 0, 0, .6);
  animation: card-in .4s var(--ease-snap);
}
@keyframes card-in { from { opacity: 0; transform: translateY(14px) scale(.96); } }
.overlay__title { font-size: clamp(38px, 6vw, 58px); margin: 0 0 12px; }
.overlay__title span { color: var(--accent); }
.overlay__text { color: var(--text-2); margin-bottom: 20px; }
.overlay__actions { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.overlay__fine { font-size: 13px; color: var(--text-3); margin: 16px 0 0; }

.result__score { font-family: var(--display); font-size: clamp(56px, 10vw, 88px); line-height: .95; margin: 4px 0; }
.result__score small { font-size: .45em; color: var(--text-2); display: block; letter-spacing: .08em; }
.result__tier { color: var(--text-2); margin: 8px 0 16px; }
.result__tier b { color: var(--accent); }
.result__code {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 2px dashed var(--accent); border-radius: 8px; padding: 10px 12px 10px 16px; margin: 0 0 8px;
}
.result__code code { font: 400 30px/1 var(--display); letter-spacing: .12em; color: var(--text); }
.result__applied { font-size: 13px; color: var(--ok); margin: 0 0 18px; }
.result__applied.is-muted { color: var(--text-2); }
.result__extra { margin-top: 14px; }

/* Jumpscare */
.jumpscare {
  position: absolute; inset: 0; z-index: 8; display: grid; place-items: center; align-content: center; gap: 8px;
  background: #000; cursor: pointer; text-align: center; padding: 16px;
}
.jumpscare picture, .jumpscare img { width: min(70%, 70vh); height: auto; margin: 0 auto; }
.jumpscare p { font-family: var(--display); font-size: clamp(36px, 7vw, 72px); margin: 0; color: var(--accent); }
.jumpscare small { color: var(--text-2); }
.jumpscare:not([hidden]) picture { animation: scare-in .35s cubic-bezier(.2, 2, .4, 1), shake .4s .35s; }
@keyframes scare-in { from { transform: scale(.2); } }
@keyframes shake { 20%, 60% { transform: translateX(-8px) rotate(-2deg); } 40%, 80% { transform: translateX(8px) rotate(2deg); } }
@media (prefers-reduced-motion: reduce) { .jumpscare:not([hidden]) picture { animation: none; } }

/* In-scene toast */
.scene__toast { position: absolute; z-index: 7; left: 50%; top: 58px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px); pointer-events: none; }
.scene__toast > div {
  background: rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .2); color: #fff; border-radius: 8px;
  padding: 8px 14px; font-size: 14px; text-align: center; animation: toast-in .3s var(--ease-snap);
}

/* Persistent skip-to-shop button */
.skip-shop {
  position: fixed; z-index: 40; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom));
  background: var(--accent); color: #000; text-decoration: none;
  font-family: var(--display); font-size: 20px; letter-spacing: .08em; line-height: 1;
  padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 24px rgba(0, 0, 0, .5);
  transition: transform .25s, opacity .25s;
}
.skip-shop.is-hidden { transform: translateY(140%); opacity: 0; pointer-events: none; }

/* ── Shop ───────────────────────────────────────────────── */
.hw-shop { border-top: 1px solid #221c2e; }
.hw-shop__hero { position: relative; overflow: hidden; }
.hw-shop__bg, .hw-shop__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hw-shop__hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(11,9,16,.95), rgba(11,9,16,.6)); }
/* One slim line so the shirt columns get as much height as possible. */
.hw-shop__head { position: relative; z-index: 1; display: flex; align-items: baseline; gap: 14px; padding-top: 8px; padding-bottom: 6px; white-space: nowrap; }
.hw-shop__title { font-size: 24px; margin: 0; color: var(--accent); letter-spacing: .06em; flex: none; }
.hw-shop__sub { color: var(--text-2); margin: 0; font-size: 13px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hw-shop__sub b { color: var(--text); }
.hw-shop__body { padding-top: 12px; padding-bottom: 24px; }
@media (max-width: 759px) {
  .hw-shop__body { padding-left: 8px; padding-right: 8px; padding-bottom: 96px; }
  .hw-shop__head { gap: 10px; }
  .hw-shop__title { font-size: 20px; }
  .hw-shop__sub { font-size: 12px; }
}

/* ── Email bonus dialog ───────────────────────── */
.email-dialog { width: min(460px, calc(100vw - 32px)); background: #140f1d; border: 1px solid #33284a; border-radius: 12px; }
.email-dialog[open] { animation: card-in .35s var(--ease-snap); }
.email-dialog__form { padding: 28px 24px 24px; display: grid; gap: 12px; text-align: center; }
.email-dialog__title { font-size: 44px; margin: 0; color: var(--accent); }
.email-dialog__text { color: var(--text-2); margin: 0; font-size: 15px; }
.email-dialog__consent { display: flex; gap: 8px; align-items: flex-start; text-align: left; font-size: 13px; color: var(--text-2); }
.email-dialog__consent input { width: 18px; height: 18px; margin: 1px 0 0; accent-color: var(--accent); flex: none; }

/* Share */
.share-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.share-msg { font-size: 13px; color: var(--text-2); margin: 8px 0 0; min-height: 1.2em; }