/* Lamplight Arcade — the Game Room's skin.
   Scoped entirely under body.arcade so the reading pages keep their calm.
   The four callout colours keep their meanings everywhere:
   maroon = honest, teal = try, indigo = debate, gold = standing tall. */

body.arcade{
  --pop:'Bricolage Grotesque',sans-serif;
  --glow-gold:rgba(201,162,39,.28);
  --glow-flame:rgba(232,130,12,.18);
}

/* night-first: a deeper stage and a lamp glow behind the header */
body.arcade[data-theme="night"]{background:#0F1126}
body.arcade[data-theme="night"] .qa-main{position:relative}
body.arcade .qa-head{position:relative}
body.arcade .qa-head::before{
  content:"";position:absolute;left:-8%;top:-40px;width:340px;height:220px;
  background:radial-gradient(closest-side,var(--glow-flame),transparent 75%);
  pointer-events:none;z-index:-1;
}

/* game titles get the display face and the lamp gradient */
body.arcade .ch-title{
  font-family:var(--pop);font-weight:800;letter-spacing:-.01em;
  background:linear-gradient(92deg,#F5D77A,#E8820C 55%,#F5D77A);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.arcade[data-theme="day"] .ch-title{
  background:linear-gradient(92deg,#8a5a00,#E8820C 55%,#7A2E2E);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
body.arcade .ch-kicker{color:var(--flame)}

/* cards lift, tilt, and glow */
body.arcade .room-card,
body.arcade .qa-item{border-radius:16px}
body.arcade .room-card{
  border-left:1px solid var(--rule);position:relative;
  transition:transform .25s cubic-bezier(.2,.9,.3,1.4),box-shadow .25s;
}
body.arcade .room-card:hover{
  transform:translateY(-7px) rotate(-1.2deg);
  box-shadow:0 18px 40px rgba(0,0,0,.35),0 0 24px var(--glow-gold);
}
body.arcade .room-card h2{font-family:var(--pop);font-weight:700}
body.arcade .room-card .room-icon{width:52px;height:52px;display:block;margin:0 0 10px;
  filter:drop-shadow(0 4px 10px var(--glow-flame))}
body.arcade .room-card .room-count{position:absolute;top:12px;right:14px;
  font-family:var(--mono);font-size:.6rem;color:var(--lamp);
  border:1px solid rgba(201,162,39,.5);padding:2px 8px;border-radius:999px}

/* buttons: warmer, rounder, a little louder */
body.arcade .reveal-btn{border-radius:10px;font-family:var(--pop);font-weight:700}
body.arcade .reveal-btn:hover{box-shadow:0 0 18px var(--glow-gold)}
body.arcade .pill{font-family:var(--pop);font-weight:600}

/* streak + verdict theatre */
body.arcade .streak{display:inline-flex;align-items:center;gap:8px;margin-left:12px;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.1em;color:var(--flame)}
body.arcade .streak .diya-mini{width:10px;height:14px;border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 78%,#F5D77A,#E8820C 72%);
  animation:arc-flicker 1.5s ease-in-out infinite}

/* ---- the sorting bench: flick physics ---- */
body.arcade .bench-card{border-radius:16px;font-family:var(--pop);font-weight:600;
  transition:box-shadow .2s}
body.arcade .bench-card.dragging{box-shadow:0 16px 36px rgba(0,0,0,.4),0 0 22px var(--glow-gold)}
body.arcade .bench-card.flying{transition:transform .38s cubic-bezier(.2,.7,.3,1);pointer-events:none}
body.arcade .bench-card.bounce{animation:arc-bounce .5s cubic-bezier(.3,1.6,.4,1)}
body.arcade .bench-card.shake{animation:arc-shake .45s ease-in-out}
body.arcade .bin{border-radius:14px;border-width:2px;font-family:var(--pop);font-weight:700;
  letter-spacing:.08em;transition:box-shadow .2s,border-color .2s,color .2s}
body.arcade .bin.over,body.arcade .bin.landed{box-shadow:0 0 20px var(--glow-gold)}
@keyframes arc-bounce{0%{transform:translate(var(--fx,0),var(--fy,0))}60%{transform:translate(0,-8px)}100%{transform:translate(0,0)}}
@keyframes arc-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-7px)}50%{transform:translateX(6px)}75%{transform:translateX(-4px)}}

/* ---- sequence rails ---- */
body.arcade .order-item{border-radius:12px;transition:transform .18s,border-color .25s,box-shadow .25s}
body.arcade .order-item.snap{animation:arc-snap .28s cubic-bezier(.2,1.4,.4,1)}
body.arcade .rail-done .order-item{border-color:var(--lamp);
  box-shadow:inset 4px 0 0 var(--lamp),0 0 14px var(--glow-gold)}
@keyframes arc-snap{0%{transform:scale(1.03)}100%{transform:scale(1)}}

/* ---- the memory: true 3-D flips ---- */
body.arcade .mem-grid{perspective:900px}
body.arcade .mem-card{background:transparent;border:none;padding:0;min-height:104px;position:relative}
body.arcade .mem-card .inner{position:absolute;inset:0;transform-style:preserve-3d;
  transition:transform .45s cubic-bezier(.3,.9,.3,1.1);border-radius:12px}
body.arcade .mem-card.down .inner{transform:rotateY(180deg)}
body.arcade .mem-card .face{position:absolute;inset:0;backface-visibility:hidden;border-radius:12px;
  display:flex;align-items:center;justify-content:center;text-align:center;padding:10px;
  font-size:.82rem;line-height:1.35}
body.arcade .mem-card .front{background:var(--surface);border:1px solid var(--rule);color:var(--text)}
body.arcade .mem-card .back{transform:rotateY(180deg);
  background:linear-gradient(150deg,var(--indigo),#1B1E3A);color:#F5D77A;
  border:1px solid rgba(201,162,39,.4);font-family:var(--pop);font-weight:800;font-size:1.5rem}
[data-theme="day"] body.arcade .mem-card .back{background:linear-gradient(150deg,#2A2D5C,#3a3e7a)}
body.arcade .mem-card.matched .front{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal),0 0 16px rgba(46,125,122,.35)}
body.arcade .mem-card.matched{cursor:default}

/* ---- the myth hunt: swipe round ---- */
body.arcade .swipe-stage{position:relative;min-height:210px;margin:18px 0 6px}
body.arcade .swipe-card{position:absolute;left:50%;top:0;width:min(480px,92%);transform:translateX(-50%);
  padding:26px 24px;border-radius:16px;background:var(--surface);border:1px solid var(--rule);
  font-size:1.02rem;line-height:1.6;transition:transform .3s cubic-bezier(.3,.8,.4,1),opacity .3s;touch-action:pan-y}
body.arcade .swipe-card.gone-l{transform:translateX(-160%) rotate(-9deg);opacity:0}
body.arcade .swipe-card.gone-r{transform:translateX(60%) rotate(9deg);opacity:0}
body.arcade .swipe-tags{display:flex;justify-content:space-between;margin:8px 0 0;
  font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase}
body.arcade .swipe-tags .tl{color:var(--teal)} body.arcade .swipe-tags .tr{color:var(--maroon)}
[data-theme="night"] body.arcade .swipe-tags .tr{color:#D98A86}

/* ---- the lamp meter ---- */
.lamp-meter{display:flex;gap:20px;align-items:flex-end;margin:24px 0 4px}
.lamp-meter .diya{width:46px;text-align:center;text-decoration:none}
.lamp-meter .diya .fl{width:13px;height:19px;margin:0 auto 2px;
  border-radius:50% 50% 50% 50%/62% 62% 38% 38%;
  background:radial-gradient(circle at 50% 78%,#F5D77A,#E8820C 72%);opacity:.15;transform-origin:50% 90%}
.lamp-meter .diya.lit .fl{opacity:1;animation:arc-flicker 1.6s ease-in-out infinite}
.lamp-meter .diya .bowl{height:12px;border-radius:0 0 22px 22px;background:var(--maroon)}
.lamp-meter .diya p{font-family:var(--mono);font-size:.52rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-soft);margin:6px 0 0}
.lamp-meter-line{font-family:var(--mono);font-size:.7rem;color:var(--lamp);letter-spacing:.1em;margin:10px 0 0}
@keyframes arc-flicker{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.22) translateY(-1px)}}

/* ---- debate duel ---- */
body.arcade .duel-q{font-family:var(--pop);font-weight:700;margin:14px 0 10px}
.duel-opt{display:block;width:100%;text-align:left;margin:0 0 10px;padding:13px 16px;
  border-radius:12px;border:1px solid var(--rule);background:var(--surface);color:var(--text);
  font:inherit;font-size:.92rem;cursor:pointer;transition:border-color .15s,box-shadow .15s}
.duel-opt:hover{border-color:var(--lamp);box-shadow:0 0 12px var(--glow-gold)}
.duel-opt.right{border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
.duel-opt.wrong{border-color:var(--maroon);opacity:.75}
.duel-opt[disabled]{cursor:default}

/* respect stillness when asked */
@media (prefers-reduced-motion:reduce){
  body.arcade *,body.arcade *::before,body.arcade *::after{
    animation-duration:.001s!important;transition-duration:.001s!important}
}