/* ============================================================
   PEGGIN' WITCHES™ — FORM 1659-E — ESCAPE THE DUNGEON
   Page furniture only. Every pixel inside the frame is drawn
   in game.js. Every selector here is scoped to .gm- so it can
   never reach the rest of the property.
   ============================================================ */

.gm-stage{
  max-width:920px; margin:0 auto; width:100%;
}

/* ── the readout strip: a stamped index card ───────────────── */
.gm-hud{
  display:flex; flex-wrap:wrap; gap:2px;
  background:var(--parchment); color:#1b1410;
  border-radius:2px 2px 0 0;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 12px 26px rgba(0,0,0,.5);
  border-bottom:2px solid #1b1410;
  padding:8px 10px;
}
.gm-stat{
  flex:1 1 84px; min-width:0;
  padding:2px 8px; border-right:1px dotted #b9a98f;
}
.gm-stat:last-child{ border-right:none }
.gm-k{
  display:block; font-family:'Bungee',sans-serif; font-size:.46rem;
  letter-spacing:.18em; text-transform:uppercase; color:#6a5a48;
}
.gm-v{
  display:block; font-family:'Bungee',sans-serif; font-size:clamp(.78rem,2.6vw,1.05rem);
  line-height:1.2; color:#1b1410; white-space:nowrap;
  overflow:hidden; text-overflow:clip;
}
.gm-mult{ color:#8a1330 }
.gm-mult[data-hot="1"]{ color:#0f6b1d }

/* ── the frame: a service hatch with a light behind it ─────── */
.gm-frame{
  position:relative;
  width:100%; max-width:100%;
  margin:0 auto;
  background:#05020a;
  border:2px solid rgba(255,45,149,.48);
  border-top:none;
  border-radius:0 0 4px 4px;
  box-shadow:0 0 26px rgba(255,45,149,.26), inset 0 0 40px rgba(0,0,0,.9), 0 22px 44px rgba(0,0,0,.6);
  overflow:hidden;
  line-height:0;
}
.gm-canvas{
  display:block; width:100%; height:auto;
  background:#05020a;
  touch-action:none;
  outline:none;
}
.gm-canvas:focus-visible{
  outline:2px solid var(--bog-green); outline-offset:-3px;
}
.gm-canvas p{ line-height:1.6; color:var(--parchment); padding:18px; font-size:.84rem }

/* ── the veil: start / pause / end card ────────────────────── */
.gm-veil{
  position:absolute; inset:0; z-index:3;
  display:flex; align-items:center; justify-content:center;
  padding:14px; line-height:1.6;
  background:radial-gradient(circle at 50% 40%, rgba(7,3,13,.80), rgba(7,3,13,.95));
  -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px);
}
.gm-veil[hidden]{ display:none }

.gm-panel{
  background:var(--parchment); color:#1b1410;
  border-radius:2px; padding:16px 18px;
  box-shadow:0 1px 0 rgba(255,255,255,.5) inset, 0 18px 34px rgba(0,0,0,.62), 0 0 0 1px rgba(0,0,0,.35);
  max-width:min(430px,100%); width:100%;
  max-height:100%; overflow:auto;
  text-align:left; transform:rotate(-.4deg);
}
.gm-panel[hidden]{ display:none }
.gm-panel h3{
  font-family:'Bungee',sans-serif; font-weight:400; font-size:clamp(.9rem,3.2vw,1.15rem);
  letter-spacing:.05em; text-transform:uppercase; margin:0 0 8px; color:#1b1410;
}
.gm-panel p{ margin:0 0 10px; font-size:clamp(.70rem,2.3vw,.82rem); color:#2a2018 }
.gm-panel p:last-child{ margin-bottom:0 }
.gm-panel b{ color:#8a1330 }
.gm-eye{
  font-family:'Bungee',sans-serif; font-size:.46rem; letter-spacing:.18em;
  text-transform:uppercase; color:#6a5a48 !important; margin:0 0 5px !important;
}
.gm-pen{
  font-family:'Caveat',cursive; font-size:1.05rem !important; color:#2b4bd4 !important;
  line-height:1.35; margin-top:10px !important;
}
.gm-go{ margin-top:6px }

.gm-score{
  margin:0 0 4px; display:grid; grid-template-columns:1fr auto;
  gap:0; border-top:1px dotted #b9a98f;
}
.gm-score dt,
.gm-score dd{
  margin:0; padding:5px 2px; border-bottom:1px dotted #b9a98f;
  font-size:clamp(.66rem,2.2vw,.76rem);
}
.gm-score dt{ color:#6a5a48; letter-spacing:.03em }
.gm-score dd{
  font-family:'Bungee',sans-serif; color:#1b1410; text-align:right;
  font-size:clamp(.72rem,2.5vw,.9rem);
}
.gm-endrow{ margin-top:12px !important; justify-content:flex-start }

/* ── on-screen controls (touch, and anyone who wants them) ─── */
.gm-touch{
  display:none;
  gap:8px; margin-top:10px;
  justify-content:center; flex-wrap:wrap;
  -webkit-user-select:none; user-select:none;
}
.gm-touch[data-on="1"]{ display:flex }
.gm-tbtn{
  font:inherit; font-family:'Bungee',sans-serif; font-size:.78rem; letter-spacing:.06em;
  min-width:64px; min-height:56px; padding:10px 16px; cursor:pointer;
  border-radius:4px; border:2px solid rgba(76,255,60,.55);
  background:rgba(6,22,4,.6); color:#fff;
  text-shadow:0 0 8px var(--bog-green);
  box-shadow:0 0 14px rgba(76,255,60,.22), inset 0 0 16px rgba(76,255,60,.07);
  touch-action:none; -webkit-user-select:none; user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.gm-tbtn[data-down="1"]{ background:rgba(76,255,60,.28); transform:translateY(1px) }
.gm-tjump{
  flex:1 1 130px; max-width:220px;
  border-color:var(--hex-pink); text-shadow:0 0 8px var(--hex-pink);
  background:rgba(28,3,17,.6);
  box-shadow:0 0 14px rgba(255,45,149,.26), inset 0 0 16px rgba(255,45,149,.08);
}
.gm-tjump[data-down="1"]{ background:rgba(255,45,149,.32) }
.gm-tdown{ min-width:56px }
.gm-tbtn:focus-visible{ outline:2px solid var(--bog-green); outline-offset:3px }

/* ── the button bar under the hatch ────────────────────────── */
.gm-bar{
  display:flex; gap:10px; flex-wrap:wrap; justify-content:center;
  margin-top:14px;
}
.gm-small{ font-size:.55rem !important; padding:10px 14px !important }

/* ── the live region: text alternative for what just happened ─ */
.gm-live{
  margin:10px auto 0; max-width:62ch; min-height:1.4em; text-align:center;
  font-size:.70rem; letter-spacing:.03em; color:var(--carbon);
}

/* ── the two posted papers side by side ────────────────────── */
.gm-papers{
  display:grid; gap:clamp(22px,3.4vw,32px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  align-items:start;
}

/* ── touch devices get the pad; so does anyone who taps ────── */
@media (hover:none),(pointer:coarse){
  .gm-touch{ display:flex }
}

@media (max-width:520px){
  .gm-stat{ flex:1 1 30%; border-right:none }
  .gm-hud{ gap:4px 0 }
  .gm-panel{ transform:none; padding:14px }
  .gm-tbtn{ min-width:54px; min-height:52px; padding:8px 12px }
}

@media (prefers-reduced-motion:reduce){
  .gm-panel{ transform:none }
}