/* =========================================================
   Dead Ops Birthday — arcade cabinet styling
   ========================================================= */
:root{
  --bg:        #07090c;
  --floor:     #12161b;
  --neon:      #2ff3d6;
  --neon-dim:  #106e63;
  --amber:     #ffb347;
  --amber-hot: #ff7a18;
  --blood:     #ff2e4d;
  --toxic:     #8ef04a;
  --ink:       #d7e4e8;
  --ink-dim:   #6b8086;
  --font: "Press Start 2P", "Courier New", ui-monospace, monospace;
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

html,body{
  margin:0; padding:0; height:100%; width:100%;
  background:var(--bg); color:var(--ink);
  font-family:var(--font);
  overflow:hidden; overscroll-behavior:none;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}

#stage{
  position:fixed; inset:0; overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(ellipse at center, #0b1015 0%, #040608 70%, #000 100%);
}
/* The playfield. Full-bleed on a phone; on a desktop it stays a
   cabinet-shaped arena instead of a sparse widescreen field. */
#frame{
  position:relative; width:100%; height:100%;
  max-width:560px; overflow:hidden;
  box-shadow:0 0 0 2px rgba(47,243,214,.18), 0 0 70px rgba(0,0,0,.9);
}
@media (min-width:600px){
  #frame{ border-radius:6px; }
}
#game{ position:absolute; inset:0; display:block; width:100%; height:100%; }

.hidden{ display:none !important; }

/* ---------------------- CRT overlay ---------------------- */
#crt{
  position:absolute; inset:0; pointer-events:none; z-index:900;
  background:
    repeating-linear-gradient(to bottom,
      rgba(0,0,0,.05) 0px, rgba(0,0,0,.05) 1px,
      rgba(0,0,0,0)   1px, rgba(0,0,0,0)   3px),
    radial-gradient(ellipse at center,
      rgba(0,0,0,0) 62%, rgba(0,0,0,.14) 90%, rgba(0,0,0,.32) 100%);
  mix-blend-mode:multiply;
  animation:flicker 5.5s infinite steps(1);
}
@keyframes flicker{
  0%,97%,100%{ opacity:1 } 97.5%{ opacity:.9 } 98.5%{ opacity:.97 }
}

/* ------------------------- HUD --------------------------- */
#hud{
  position:absolute; inset:0; z-index:400; pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 10px) 12px 0;
  display:flex; flex-direction:column; gap:6px;
}
.hud-row{ display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.hud-block{ display:flex; flex-direction:column; gap:4px; min-width:70px; }
.hud-center{ align-items:center; text-align:center; flex:1; }
.hud-right{ align-items:flex-end; min-width:44px; }
.hud-label{
  font-size:8px; letter-spacing:1px; color:#cfe4e8;
  text-shadow:0 1px 2px #000, 0 0 6px rgba(0,0,0,.95);
}
.hud-value{
  font-size:16px; color:#8dfced;
  text-shadow:0 2px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8),
              0 0 14px rgba(47,243,214,.5);
}
.hud-center .hud-value{ font-size:20px; color:#ffc86b;
  text-shadow:0 2px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8),
              0 0 16px rgba(255,122,24,.5); }
.hud-second{ align-items:center; }

.pip-row{ display:flex; gap:5px; }
.pip{
  width:11px; height:11px; border-radius:2px; background:var(--blood);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.65), 0 0 8px rgba(255,46,77,.9);
  transform:rotate(45deg);
}
.pip.spent{ background:#2a1116; box-shadow:none; }

.coin-counter{
  display:flex; align-items:center; gap:6px;
  font-size:10px; color:#ffc86b;
  text-shadow:0 2px 3px rgba(0,0,0,.95), 0 0 8px rgba(0,0,0,.8);
}
.coin-dot{
  width:10px; height:10px; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #fff3c4, var(--amber) 55%, #a05a00);
  box-shadow:0 0 8px rgba(255,179,71,.9);
}

.power-tag{
  align-self:center; margin-top:2px; padding:4px 10px;
  font-size:8px; letter-spacing:1px; color:#04140f;
  background:var(--toxic); border-radius:2px;
  box-shadow:0 0 14px rgba(142,240,74,.7);
}

/* --------------------- bomb button ----------------------- */
.bomb-btn{
  position:absolute; z-index:500;
  right:calc(env(safe-area-inset-right,0px) + 18px);
  bottom:calc(env(safe-area-inset-bottom,0px) + 96px);
  width:62px; height:62px; border-radius:50%;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  background:rgba(255,122,24,.12);
  border:2px solid var(--amber-hot);
  color:var(--amber);
  font-family:var(--font); font-size:9px;
  box-shadow:0 0 18px rgba(255,122,24,.35), inset 0 0 18px rgba(255,122,24,.2);
  pointer-events:auto;
}
.bomb-btn:active{ background:rgba(255,122,24,.35); }
.bomb-btn:disabled{ opacity:.3; }
.bomb-icon{
  width:16px; height:16px; border-radius:50%;
  background:var(--amber-hot);
  box-shadow:0 0 12px rgba(255,122,24,.9);
}

.icon-btn{
  pointer-events:auto;
  width:38px; height:38px;
  background:rgba(6,10,12,.55);
  border:1px solid rgba(47,243,214,.35);
  color:var(--neon); font-family:var(--font); font-size:11px;
  letter-spacing:-1px; border-radius:3px;
}
.icon-btn:active{ background:rgba(47,243,214,.2); }

/* ----------------------- banners ------------------------- */
.banner{
  position:absolute; left:0; right:0; top:34%;
  z-index:600; pointer-events:none; text-align:center;
  font-size:clamp(18px,7vw,40px); letter-spacing:2px;
  color:#ffc86b;
  text-shadow:0 3px 5px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.9),
              0 0 34px rgba(255,122,24,.6);
  opacity:0;
}
.banner.show{ animation:bannerIn 1.8s ease-out forwards; }
.banner-sub{
  display:block; margin-top:14px;
  font-size:clamp(8px,2.6vw,12px); letter-spacing:5px;
  color:var(--ink); opacity:.85;
  text-shadow:0 0 10px rgba(0,0,0,.9);
}
.banner.neon{ color:var(--neon);
  text-shadow:0 0 12px rgba(47,243,214,.9), 0 0 34px rgba(47,243,214,.5); }
@keyframes bannerIn{
  0%{ opacity:0; transform:scale(.6) }
  18%{ opacity:1; transform:scale(1.06) }
  28%{ transform:scale(1) }
  75%{ opacity:1 }
  100%{ opacity:0; transform:scale(1.04) }
}

/* ----------------------- screens ------------------------- */
.screen{
  position:absolute; inset:0; z-index:700; display:none;
  align-items:center; justify-content:center;
  padding:24px calc(env(safe-area-inset-right,0px) + 20px)
          calc(env(safe-area-inset-bottom,0px) + 24px)
          calc(env(safe-area-inset-left,0px) + 20px);
  background:
    radial-gradient(ellipse at center, rgba(10,14,18,.86), rgba(4,6,8,.97));
  backdrop-filter:blur(3px);
  overflow-y:auto; overscroll-behavior:contain;
}
.screen.open{ display:flex; animation:fadeIn .25s ease-out; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }

.screen-inner{
  width:100%; max-width:420px; margin:auto;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  text-align:center;
}

.title-sub{
  font-size:9px; letter-spacing:3px; color:var(--neon-dim);
}
.title-main{
  margin:0; font-size:clamp(28px,11vw,52px); line-height:1.15;
  color:var(--amber); letter-spacing:2px;
  text-shadow:0 0 10px rgba(255,122,24,.9), 0 0 30px rgba(255,122,24,.5),
              0 4px 0 #7a2b00;
  animation:pulseGlow 2.6s ease-in-out infinite;
}
@keyframes pulseGlow{ 50%{ filter:brightness(1.18) } }
.title-age{ font-size:10px; color:var(--ink-dim); letter-spacing:2px; }

.screen-title{
  margin:0; font-size:clamp(18px,6vw,28px); letter-spacing:2px;
  color:var(--neon); text-shadow:0 0 10px rgba(47,243,214,.8);
}
.screen-title.dead{ color:var(--blood); text-shadow:0 0 12px rgba(255,46,77,.9); }
.screen-title.win{ color:var(--amber);
  text-shadow:0 0 12px rgba(255,122,24,.9), 0 0 34px rgba(255,122,24,.45); }

.stat-line{ font-size:10px; color:var(--ink-dim); letter-spacing:1px; }
.stat-line b{ color:var(--ink); }

.hint{ font-size:7px; line-height:1.9; color:var(--ink-dim); letter-spacing:1px; max-width:300px; }

.win-lines{ font-size:9px; line-height:2.2; color:var(--ink); }

/* ----------------------- buttons ------------------------- */
.arcade-btn{
  width:100%; max-width:280px; padding:14px 16px;
  font-family:var(--font); font-size:11px; letter-spacing:1px;
  color:var(--neon); background:rgba(47,243,214,.07);
  border:2px solid var(--neon-dim); border-radius:3px;
  cursor:pointer; transition:background .12s, transform .06s;
}
.arcade-btn:active{ transform:translateY(2px); }
.arcade-btn.primary{
  color:#04120f; background:var(--neon); border-color:var(--neon);
  box-shadow:0 0 18px rgba(47,243,214,.55), 0 4px 0 #0d5c53;
  animation:btnPulse 1.8s ease-in-out infinite;
}
@keyframes btnPulse{ 50%{ box-shadow:0 0 28px rgba(47,243,214,.85), 0 4px 0 #0d5c53 } }
.arcade-btn.primary:active{ box-shadow:0 0 18px rgba(47,243,214,.55), 0 0 0 #0d5c53; }
.arcade-btn.ghost{ background:transparent; }
.arcade-btn.ghost:active{ background:rgba(47,243,214,.15); }
.arcade-btn.danger{ color:var(--blood); border-color:#7a1526; }
.arcade-btn.small{ font-size:8px; padding:10px; max-width:200px; }

/* --------------------- memory frame ---------------------- */
.frame{
  position:relative; width:100%;
  border:3px solid var(--neon);
  border-radius:4px; overflow:hidden;
  background:#05080a;
  box-shadow:0 0 26px rgba(47,243,214,.45), inset 0 0 26px rgba(47,243,214,.12);
  animation:frameIn .45s cubic-bezier(.18,.9,.3,1.3);
}
@keyframes frameIn{ from{ transform:scale(.82); opacity:0 } to{ transform:scale(1); opacity:1 } }
.frame img, .frame video{
  display:block; width:100%; max-height:52vh; object-fit:contain; background:#05080a;
}
.frame::after{   /* scanlines over the photo, keeps the arcade feel */
  content:""; position:absolute; inset:0; pointer-events:none;
  background:repeating-linear-gradient(to bottom,
    rgba(0,0,0,.16) 0px, rgba(0,0,0,.16) 1px,
    rgba(0,0,0,0) 1px, rgba(0,0,0,0) 3px);
}
.frame.missing{
  min-height:150px; display:flex; align-items:center; justify-content:center;
  border-color:var(--blood); box-shadow:0 0 20px rgba(255,46,77,.35);
  color:var(--blood); font-size:8px; line-height:2; padding:20px; text-align:center;
}

.unlock-tag{
  font-size:10px; letter-spacing:3px; color:var(--toxic);
  text-shadow:0 0 12px rgba(142,240,74,.9);
  animation:tagBlink 1s steps(2) infinite;
}
@keyframes tagBlink{ 50%{ opacity:.45 } }
.unlock-caption{ font-size:9px; line-height:1.9; color:var(--ink); letter-spacing:1px; }
.unlock-inner{ gap:16px; }

/* ------------------------ gallery ------------------------ */
.gallery-inner{ max-width:420px; }
.gallery-grid{
  width:100%; display:grid; gap:10px;
  grid-template-columns:repeat(auto-fill, minmax(112px, 1fr));
}
.cell{
  position:relative; aspect-ratio:1; border-radius:3px; overflow:hidden;
  border:2px solid var(--neon-dim); background:#0a0f13;
  display:flex; align-items:center; justify-content:center;
  padding:0; cursor:pointer;
}
.cell img, .cell video{ width:100%; height:100%; object-fit:cover; }
.cell.unlocked{ border-color:var(--neon); box-shadow:0 0 12px rgba(47,243,214,.35); }
.cell.locked{ border-style:dashed; cursor:default; }
.cell .lock{
  font-family:var(--font); font-size:7px; line-height:1.9;
  color:var(--ink-dim); letter-spacing:1px; text-align:center; padding:6px;
}
.cell .badge{
  position:absolute; left:0; right:0; bottom:0; padding:3px 4px;
  font-family:var(--font); font-size:6px; letter-spacing:1px;
  color:var(--neon); background:rgba(3,6,8,.82);
}
.cell .play{
  position:absolute; inset:0; margin:auto; width:0; height:0;
  border-left:16px solid rgba(255,255,255,.9);
  border-top:11px solid transparent; border-bottom:11px solid transparent;
  filter:drop-shadow(0 0 6px rgba(0,0,0,.9));
}

/* ------------------------ viewer ------------------------- */
.viewer-inner{ max-width:640px; }
.viewer .frame img, .viewer .frame video{ max-height:66vh; }

/* --------------------- small screens --------------------- */
@media (max-height:560px){
  .title-main{ font-size:clamp(22px,9vw,36px); }
  .arcade-btn{ padding:11px 14px; font-size:10px; }
  .screen-inner{ gap:10px; }
  .frame img, .frame video{ max-height:40vh; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.01ms !important; animation-iteration-count:1 !important; }
}

/* ----------------------- confetti ------------------------ */
@keyframes fall{
  0%   { transform:translateY(0) rotate(0deg); opacity:1 }
  100% { transform:translateY(115vh) rotate(720deg); opacity:0 }
}