/* ==========================================================================
   Candy Arcade - game shell
   Canvas stage, HUD, overlays, touch controls, game page layout.
   Hard rule: no ad slot, overlay or control may cover the canvas during play.
   ========================================================================== */

.game-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:var(--s6);align-items:start;padding-top:var(--s5)}
.game-main{min-width:0}
.game-sidebar{position:sticky;top:86px;display:grid;gap:var(--s4)}

/* ---------- stage ---------- */
.game-shell{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-xl);
  box-shadow:var(--sh-2);overflow:hidden;margin-bottom:var(--s5)
}
.game-stage{
  position:relative;width:100%;aspect-ratio:16/10;
  background:#1a1120;
  background-image:radial-gradient(circle at 30% 20%,#3a2145,transparent 60%),radial-gradient(circle at 75% 80%,#2a1533,transparent 55%);
  overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent
}
.game-stage canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.game-stage:fullscreen,.game-stage:-webkit-full-screen{aspect-ratio:auto;width:100vw;height:100dvh;border-radius:0}

/* ---------- overlays ---------- */
.game-overlay{
  position:absolute;inset:0;z-index:5;display:none;
  align-items:center;justify-content:center;text-align:center;padding:var(--s5);
  background:rgba(26,17,32,.86);backdrop-filter:blur(3px);color:#fff
}
.game-overlay.is-visible{display:flex}
.game-overlay-inner{max-width:430px;width:100%}
.game-overlay h2{color:#fff;font-size:clamp(1.4rem,4vw,2rem);margin:0 0 var(--s3)}
.game-overlay p{color:rgba(255,255,255,.82);margin:0 0 var(--s4);font-size:.95rem}
.game-overlay .btn-row{justify-content:center}
.game-overlay .btn-ghost{color:#fff;border-color:rgba(255,255,255,.4)}
.game-overlay .btn-ghost:hover{background:rgba(255,255,255,.14);color:#fff}
.game-overlay dl{
  display:grid;grid-template-columns:1fr auto;gap:8px var(--s4);
  margin:0 0 var(--s5);text-align:left;font-size:.92rem
}
.game-overlay dt{color:rgba(255,255,255,.7)}
.game-overlay dd{margin:0;font-weight:800;font-family:var(--font-display);color:var(--lemon-300)}
.game-overlay .is-record{color:var(--mint-400)}
.overlay-badge{
  display:inline-block;margin-bottom:var(--s3);padding:5px 13px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.14);font:700 .74rem var(--font);letter-spacing:.1em;text-transform:uppercase
}
.countdown{font-family:var(--font-display);font-size:clamp(3.4rem,14vw,6rem);font-weight:800;color:#fff;line-height:1;
  text-shadow:0 6px 24px rgba(255,77,141,.6)}
.game-error{background:rgba(26,17,32,.96)}
.game-error h2{color:var(--pink-300)}

/* ---------- HUD ---------- */
.game-hud{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:var(--s3);
  padding:var(--s3) var(--s4);background:var(--bg-sunk);border-top:1px solid var(--border)
}
.hud-item{text-align:center;min-width:0}
.hud-item dt{font-size:.68rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-faint);font-weight:700;margin-bottom:2px}
.hud-item dd{margin:0;font-family:var(--font-display);font-size:1.15rem;font-weight:800;line-height:1.1;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hud-combo dd{color:var(--tang-500)}
.hud-combo.is-hot dd{color:var(--pink-500)}
.hud-best dd{color:var(--mint-600)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .hud-best dd{color:var(--mint-400)}}

.meter{height:7px;border-radius:var(--r-pill);background:var(--border);overflow:hidden;margin-top:5px}
.meter-fill{height:100%;width:0;border-radius:var(--r-pill);background:linear-gradient(90deg,var(--lemon-400),var(--tang-400));transition:width 120ms linear}
.meter-fill.is-low{background:linear-gradient(90deg,var(--pink-600),var(--pink-400))}

/* ---------- action bar ---------- */
.game-actions{display:flex;flex-wrap:wrap;gap:var(--s3);padding:var(--s4);border-top:1px solid var(--border);background:var(--surface)}
.game-actions .spacer{flex:1 1 auto}
.icon-btn{
  display:inline-flex;align-items:center;gap:7px;padding:10px 15px;border-radius:var(--r-pill);
  border:1px solid var(--border-strong);background:var(--surface);color:var(--text-soft);
  font:700 .87rem var(--font);cursor:pointer;min-height:42px;
  transition:background var(--speed) var(--ease),color var(--speed) var(--ease),border-color var(--speed) var(--ease)
}
.icon-btn:hover{background:var(--accent-soft);color:var(--link);border-color:var(--accent)}
.icon-btn[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}
.icon-btn .ico{font-size:1.05rem;line-height:1}

/* ---------- touch controls ---------- */
.touch-controls{
  display:none;position:absolute;inset:auto 0 0 0;z-index:4;
  padding:var(--s4);pointer-events:none;
  justify-content:space-between;align-items:flex-end;gap:var(--s4)
}
.touch-controls.is-active{display:flex}
.tc-group{display:flex;gap:var(--s3);pointer-events:auto}
.tc-btn{
  width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.5);
  background:rgba(255,255,255,.2);backdrop-filter:blur(6px);
  color:#fff;font-size:1.5rem;font-weight:800;display:grid;place-items:center;
  cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;
  box-shadow:0 4px 14px rgba(0,0,0,.28)
}
.tc-btn:active,.tc-btn.is-down{background:rgba(255,255,255,.42);transform:scale(.94)}
.tc-btn.tc-wide{width:auto;min-width:96px;border-radius:var(--r-pill);font-size:.95rem;padding:0 var(--s4)}
.tc-hint{
  position:absolute;left:50%;bottom:var(--s4);transform:translateX(-50%);
  color:rgba(255,255,255,.72);font-size:.8rem;pointer-events:none;text-align:center;
  background:rgba(0,0,0,.35);padding:5px 12px;border-radius:var(--r-pill);white-space:nowrap
}

/* ---------- game page content ---------- */
.game-intro{font-size:1.04rem;color:var(--text-soft);max-width:72ch;margin-bottom:var(--s5)}
.game-meta-strip{
  display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);align-items:center;
  margin-bottom:var(--s5);padding-bottom:var(--s4);border-bottom:1px solid var(--border)
}
.game-content h2{margin-top:var(--s7)}
.game-content h2:first-child{margin-top:0}
.game-content>section{scroll-margin-top:90px}
.controls-table td:first-child{width:40%;font-weight:700}
.controls-table kbd{margin-right:4px}

.spec-list{display:grid;gap:0;margin:0;background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden}
.spec-list div{display:flex;justify-content:space-between;gap:var(--s4);padding:11px 15px;border-bottom:1px solid var(--border);font-size:.9rem}
.spec-list div:last-child{border-bottom:0}
.spec-list dt{color:var(--text-soft);margin:0}
.spec-list dd{margin:0;font-weight:700;text-align:right}

.powerup-grid{display:grid;gap:var(--s3);grid-template-columns:repeat(auto-fit,minmax(215px,1fr));list-style:none;padding:0;margin:var(--s4) 0}
.powerup-grid li{margin:0;display:flex;gap:var(--s3);align-items:flex-start;background:var(--surface);
  border:1px solid var(--border);border-radius:var(--r-md);padding:var(--s3) var(--s4);font-size:.9rem}
.powerup-icon{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;display:grid;place-items:center;font-size:1.05rem;
  background:var(--accent-soft)
}
.powerup-grid b{display:block;font-size:.92rem;margin-bottom:2px}
.powerup-grid span{color:var(--text-soft);font-size:.85rem}

.collectible-row{display:flex;flex-wrap:wrap;gap:var(--s2);list-style:none;padding:0;margin:0 0 var(--s4)}
.collectible-row li{margin:0}
.collectible{display:inline-flex;align-items:center;gap:7px;padding:6px 13px;border-radius:var(--r-pill);
  background:var(--surface);border:1px solid var(--border);font-size:.85rem;font-weight:600}
.collectible .dot{width:12px;height:12px;border-radius:50%;flex:0 0 auto;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}

/* local-best panel */
.local-best{background:linear-gradient(150deg,var(--accent-soft),var(--surface) 70%);
  border:1px solid var(--border);border-radius:var(--r-lg);padding:var(--s4);box-shadow:var(--sh-1)}
.local-best h3{margin:0 0 var(--s3);font-size:.95rem;text-transform:uppercase;letter-spacing:.06em;color:var(--text-soft)}
.local-best dl{display:grid;grid-template-columns:1fr auto;gap:7px var(--s3);margin:0;font-size:.9rem}
.local-best dt{color:var(--text-soft)}
.local-best dd{margin:0;font-weight:800;font-family:var(--font-display)}
.local-best .tiny{margin:var(--s3) 0 0}

/* how-to-play inside sidebar */
.quick-controls{font-size:.88rem}
.quick-controls dl{display:grid;grid-template-columns:auto 1fr;gap:8px var(--s3);margin:0}
.quick-controls dt{margin:0}
.quick-controls dd{margin:0;color:var(--text-soft)}

@media (max-width:660px){
  .game-shell{border-radius:var(--r-lg);margin-left:calc(var(--s4)*-1);margin-right:calc(var(--s4)*-1);
    border-left:0;border-right:0;border-radius:0}
  .game-stage{aspect-ratio:4/5;max-height:70dvh}
  .tc-btn{width:58px;height:58px;font-size:1.3rem}
  .game-hud{grid-template-columns:repeat(3,minmax(0,1fr))}
  .hud-item dd{font-size:1.02rem}
}
@media (min-width:661px) and (max-width:1000px){
  .game-stage{aspect-ratio:3/2}
}