/* ============================================================
   The Arcade — games styling (editorial theme)
   ============================================================ */
.arcade{padding:clamp(4rem,10vw,8rem) clamp(1.3rem,6vw,4rem);border-top:1px solid var(--line-soft)}
.arcade-head{max-width:52rem;margin:0 auto 2.6rem;text-align:center}
.arcade-lede{margin-top:1.2rem;color:var(--dim);font-style:italic;font-size:clamp(1rem,2vw,1.2rem)}

.game-tabs{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap;margin-bottom:2.4rem}
.game-tab{font-family:var(--serif);font-size:.74rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);cursor:pointer;background:transparent;border:1px solid var(--line);
  padding:.7rem 1.3rem;transition:color .35s,background .35s,border-color .35s,transform .3s}
.game-tab:hover{color:var(--ink);transform:translateY(-2px)}
.game-tab.is-active{color:#140f07;background:var(--ink);border-color:var(--ink)}

.game-stage{max-width:62rem;margin:0 auto;border:1px solid var(--line-soft);
  background:rgba(14,12,10,.4);padding:clamp(1.2rem,3vw,2.4rem);min-height:420px}
.game-panel{display:none}
.game-panel.active{display:block;animation:gp .5s var(--ease)}
@keyframes gp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* HUD */
.game-hud{display:flex;align-items:center;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.chip{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);
  border:1px solid var(--line);padding:.5rem .9rem}
.chip b{font-family:var(--display);font-size:1.15rem;color:var(--ink);margin-left:.5rem;letter-spacing:0}
.game-btn{margin-left:auto;font-family:var(--serif);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  cursor:pointer;color:var(--ink);background:transparent;border:1px solid var(--line);padding:.6rem 1.2rem;
  transition:background .35s,color .35s,border-color .35s}
.game-btn:hover{background:var(--accent);color:#140f07;border-color:transparent}
.game-note{text-align:center;color:var(--dimmer);font-size:.8rem;font-style:italic;margin-top:1.4rem}

/* ---------- Concentration (memory) ---------- */
.mem-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.5rem,1.4vw,.9rem)}
.mem-card{position:relative;aspect-ratio:3/4;cursor:pointer;perspective:900px}
.mem-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .5s var(--ease)}
.mem-card.flip .mem-inner,.mem-card.matched .mem-inner{transform:rotateY(180deg)}
.mem-face{position:absolute;inset:0;backface-visibility:hidden;border:1px solid var(--line);overflow:hidden}
.mem-back{display:grid;place-items:center;background:linear-gradient(160deg,#1a1712,#0d0b09)}
.mem-back span{font-family:var(--display);font-weight:500;font-size:1.5rem;color:var(--accent);letter-spacing:.04em}
.mem-front{transform:rotateY(180deg)}
.mem-front img{width:100%;height:100%;object-fit:cover}
.mem-card.matched{animation:matched .6s var(--ease)}
.mem-card.matched .mem-face{border-color:var(--accent)}
@keyframes matched{0%,100%{transform:scale(1)}40%{transform:scale(1.05)}}

/* ---------- Whack-a-Chris ---------- */
.whack-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(.6rem,1.6vw,1rem);max-width:460px;margin:0 auto}
.hole{position:relative;aspect-ratio:1;overflow:hidden;border:1px solid var(--line);
  background:radial-gradient(circle at 50% 120%,#151109,#0b0a09);cursor:pointer}
.hole::after{content:"";position:absolute;left:50%;bottom:0;width:80%;height:14%;transform:translateX(-50%);
  background:rgba(0,0,0,.6);border-radius:50%;filter:blur(4px)}
.hole img{position:absolute;inset:6% 6% 0 6%;width:88%;height:94%;object-fit:cover;object-position:50% 22%;
  border-radius:6px 6px 0 0;transform:translateY(110%);transition:transform .16s var(--ease)}
.hole.up img{transform:translateY(0)}
.hole.bonk img{transform:translateY(0) scale(.9);filter:brightness(1.4) saturate(.4)}
.whack-start{display:grid;place-items:center;min-height:260px}

/* ---------- Name That Portrait (trivia) ---------- */
.trivia-wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(1.2rem,3vw,2.4rem);align-items:center}
.trivia-photo{width:clamp(180px,34vw,260px);aspect-ratio:3/4;object-fit:cover;border:1px solid var(--line);
  box-shadow:0 24px 60px -30px #000}
.trivia-right{min-width:0}
.trivia-q{font-family:var(--display);font-weight:400;font-size:clamp(1.4rem,3vw,2rem);margin-bottom:1.3rem;line-height:1.15}
.trivia-options{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.trivia-opt{font-family:var(--serif);text-align:left;font-size:.95rem;color:var(--ink);cursor:pointer;
  background:transparent;border:1px solid var(--line);padding:.85rem 1rem;transition:background .3s,border-color .3s,color .3s}
.trivia-opt:hover{border-color:var(--accent);background:var(--glass)}
.trivia-opt.correct{background:rgba(120,170,110,.22);border-color:#8fb680;color:#e7f0e2}
.trivia-opt.wrong{background:rgba(180,90,90,.2);border-color:#c58686}
.trivia-opt:disabled{cursor:default}
.trivia-final{text-align:center;padding:2rem 1rem}
.trivia-final b{font-family:var(--display);font-size:clamp(2.4rem,6vw,3.6rem);color:var(--accent-soft);display:block;line-height:1}

@media (max-width:640px){
  .mem-grid{grid-template-columns:repeat(4,1fr)}
  .trivia-wrap{grid-template-columns:1fr;justify-items:center;text-align:center}
  .trivia-q{text-align:center}
  .trivia-options{grid-template-columns:1fr;width:100%}
  .trivia-opt{text-align:center}
  .game-btn{margin-left:0}
  .game-hud{justify-content:center}
}