/* ============================================================
   PLAY PAGE STYLES — shared between layouts A and C
   Per-game accent is driven by [data-game] on body
   ============================================================ */

body[data-game="chronicles"]{--game:var(--chronicles);--game-glow:var(--chronicles-glow);--game-rgb:161,123,90}
body[data-game="heroes"]{--game:var(--heroes);--game-glow:var(--heroes-glow);--game-rgb:212,116,30}
body[data-game="runner"]{--game:var(--runner);--game-glow:var(--runner-glow);--game-rgb:232,52,52}

.page{position:relative;height:100vh;overflow:hidden}

/* --- Subtle atmospheric backdrop (much quieter than landing) --- */
.play-atmos{position:absolute;inset:0;overflow:hidden;background:#07060a;z-index:0}
.play-atmos-city{position:absolute;inset:-2%;background:url('/assets/brand/cityscape-hero.png') center/cover;filter:brightness(0.18) saturate(0.5) contrast(1.1);opacity:0.4}
.play-atmos-city::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(12,10,8,0) 20%,rgba(12,10,8,0.7) 70%,rgba(7,6,10,0.95) 100%)}
.play-atmos-tint{position:absolute;inset:0;background:radial-gradient(ellipse 80% 50% at 50% 100%,rgba(var(--game-rgb),0.12) 0%,rgba(var(--game-rgb),0.03) 40%,transparent 75%);pointer-events:none;mix-blend-mode:screen}
.play-atmos-grain{position:absolute;inset:-50%;pointer-events:none;opacity:0.06;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.play-atmos-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(0,0,0,0) 30%,rgba(0,0,0,0.45) 80%,rgba(0,0,0,0.85) 100%);pointer-events:none}

/* --- Simulated game canvas (replace with real <iframe> in production) --- */
.game-canvas{position:relative;width:100%;height:100%;background:#050404;overflow:hidden;display:flex;align-items:center;justify-content:center}
.game-canvas::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at center,rgba(var(--game-rgb),0.08) 0%,transparent 70%)}
.game-canvas-logo{position:relative;width:58%;max-width:520px;aspect-ratio:1/1;background-size:contain;background-position:center;background-repeat:no-repeat;opacity:0.35;filter:saturate(0.6) brightness(0.9)}
body[data-game="chronicles"] .game-canvas-logo{background-image:url('/assets/brand/logo-chronicles.png')}
body[data-game="heroes"] .game-canvas-logo{background-image:url('/assets/brand/logo-heroes.png')}
body[data-game="runner"] .game-canvas-logo{background-image:url('/assets/brand/logo-runner.png')}
.game-canvas-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:96px;height:96px;border-radius:50%;border:1px solid rgba(var(--game-rgb),0.6);background:rgba(12,10,8,0.72);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;color:var(--game-glow);box-shadow:0 0 40px rgba(var(--game-rgb),0.3),inset 0 0 0 6px rgba(var(--game-rgb),0.08);cursor:pointer;transition:transform .3s,box-shadow .3s}
.game-canvas-play:hover{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 0 60px rgba(var(--game-rgb),0.5),inset 0 0 0 6px rgba(var(--game-rgb),0.15)}
.game-canvas-play svg{margin-left:6px}
.game-canvas-scan{position:absolute;inset:0;background:repeating-linear-gradient(180deg,transparent 0,transparent 3px,rgba(255,255,255,0.015) 3px,rgba(255,255,255,0.015) 4px);pointer-events:none;animation:scan-drift 6s linear infinite}
@keyframes scan-drift{0%{background-position:0 0}100%{background-position:0 8px}}
.game-canvas-label{position:absolute;bottom:12px;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:9px;letter-spacing:3px;text-transform:uppercase;color:var(--text-faint);background:rgba(12,10,8,0.6);padding:4px 12px;border:1px solid var(--hair);border-radius:2px;backdrop-filter:blur(4px)}

/* --- Download buttons --- */
.dl{display:inline-flex;align-items:center;gap:12px;padding:10px 16px;border:1px solid var(--hair-2);border-radius:4px;background:rgba(12,10,8,0.55);backdrop-filter:blur(6px);color:var(--cream);transition:all .25s;font-family:'Inter',sans-serif;min-width:190px;text-decoration:none}
.dl:hover{border-color:var(--game-glow);background:rgba(var(--game-rgb),0.12);transform:translateY(-1px);box-shadow:0 8px 28px rgba(0,0,0,0.5),0 0 24px rgba(var(--game-rgb),0.15)}
.dl-icon{width:36px;height:36px;flex-shrink:0;display:flex;align-items:center;justify-content:center;color:var(--text-dim)}
.dl:hover .dl-icon{color:var(--game-glow)}
.dl-meta{display:flex;flex-direction:column;gap:3px;text-align:left;line-height:1.15}
.dl-top{font-family:'Cinzel',serif;font-size:11px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-faint);font-weight:500}
.dl-mid{font-family:'Cinzel',serif;font-size:14px;letter-spacing:1.5px;font-weight:600;color:var(--cream)}
.dl-size{font-family:'Crimson Pro',serif;font-style:italic;font-size:13px;color:var(--text-faint)}

/* "Coming Soon" variant — non-interactive */
.dl.soon{opacity:0.55;cursor:not-allowed}
.dl.soon:hover{transform:none;border-color:var(--hair-2);background:rgba(12,10,8,0.55);box-shadow:none}
.dl.soon .dl-top{color:var(--ember-glow);opacity:0.75}
.dl.soon .dl-mid{color:var(--text-dim)}

/* --- Back to R&R link --- */
.back-to-hub{display:inline-flex;align-items:center;gap:10px;font-family:'Cinzel',serif;font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);padding:9px 16px;border:1px solid var(--hair-2);border-radius:3px;background:rgba(12,10,8,0.4);backdrop-filter:blur(6px);transition:all .25s;text-decoration:none}
.back-to-hub:hover{color:var(--cream);border-color:var(--ember-glow);background:rgba(12,10,8,0.7)}

/* --- Game title block --- */
.game-title{font-family:'Cinzel',serif;font-weight:600;color:var(--cream);letter-spacing:2.5px;text-transform:uppercase;text-shadow:0 2px 14px rgba(0,0,0,0.9)}
.game-sub{font-family:'Crimson Pro',serif;font-style:italic;color:var(--cream-dim);letter-spacing:0.3px;text-shadow:0 2px 14px rgba(0,0,0,0.85)}
.game-kind{font-family:'Cinzel',serif;font-size:12px;letter-spacing:3.5px;text-transform:uppercase;color:var(--game-glow);font-weight:500;text-shadow:0 0 14px rgba(var(--game-rgb),0.5)}

/* === LAYOUT A — frame + right sidebar (no top header) ================= */
.layout-a{position:relative;z-index:2;min-height:100vh;padding:88px 24px 24px;display:flex;flex-direction:column;align-items:center}

/* Legacy header styles — retained so older inline HTML still parses if
   present, but visually hidden. New play pages omit the header entirely. */
.a-header{display:none}

/* Game row — frame + sidebar side by side, centered in viewport */
.a-game-row{
  width:100%;
  max-width:1820px;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:20px;
  flex:1 1 auto;
  min-height:0;
}

/* Frame — 16:9, width-capped, height-budgeted so nothing scrolls.
   --frame-budget reserves vertical space for nav (72) + layout padding
   (~40). Remaining viewport height drives the width via aspect calc. */
.a-frame-wrap{
  --frame-budget:120px;
  --sidebar-w:196px;
  width:min(calc(100% - var(--sidebar-w) - 20px), 1600px, calc((100vh - var(--frame-budget)) * 16 / 9));
  aspect-ratio:16/9;
  border-radius:8px;
  border:1px solid var(--hair-2);
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,0.7),0 0 0 1px rgba(var(--game-rgb),0.15),0 0 80px rgba(var(--game-rgb),0.08);
  background:#000;
  flex-shrink:0;
}

/* Right sidebar — holds Back, Fullscreen, divider, then downloads or a
   compact web-only marker. Width matches --sidebar-w above. */
.a-sidebar{
  width:var(--sidebar-w, 196px);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  gap:10px;
  align-self:stretch;
  max-height:calc(100vh - 112px);
}

.a-side-btn{
  display:flex;align-items:center;gap:10px;
  padding:10px 14px;
  border:1px solid var(--hair-2);
  border-radius:3px;
  background:rgba(12,10,8,0.55);
  backdrop-filter:blur(6px);
  font-family:'Cinzel',serif;
  font-size:11px;
  font-weight:500;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--text-dim);
  text-decoration:none;
  cursor:pointer;
  transition:all 0.2s;
  font-family:'Cinzel',serif;
  line-height:1;
}
.a-side-btn:hover{
  color:var(--cream);
  border-color:var(--game-glow,var(--hair));
  background:rgba(var(--game-rgb,58,53,48),0.12);
}
.a-side-btn svg{width:12px;height:12px;stroke:currentColor;fill:none}

.a-side-divider{height:1px;background:var(--hair);margin:6px 0}

.a-side-label{
  font-family:'Cinzel',serif;
  font-size:10px;
  letter-spacing:2.5px;
  text-transform:uppercase;
  color:var(--text-faint);
  padding:2px 0 0 2px;
}

/* Download cards in sidebar — full-width, vertical layout */
.a-sidebar .dl{
  width:100%;
  min-width:0;
  padding:10px 12px;
  gap:10px;
}

/* Compact web-only marker (Chronicles / Runner) */
.a-side-note{
  padding:10px 12px;
  border:1px dashed var(--hair-2);
  border-radius:3px;
  background:rgba(12,10,8,0.4);
  font-family:'Crimson Pro',serif;
  font-style:italic;
  font-size:12px;
  line-height:1.4;
  color:var(--text-faint);
}
.a-side-note strong{
  font-family:'Cinzel',serif;font-style:normal;
  font-size:10px;letter-spacing:2px;
  color:var(--ember-glow);
  text-transform:uppercase;
  display:block;margin-bottom:4px;font-weight:600;
}

/* Narrow viewports — stack sidebar below the frame as a horizontal row */
@media (max-width: 1100px){
  .a-game-row{flex-direction:column;align-items:center;gap:12px}
  .a-frame-wrap{
    --frame-budget:220px;
    width:min(100%, 1600px, calc((100vh - var(--frame-budget)) * 16 / 9));
  }
  .a-sidebar{
    width:100%;max-width:720px;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:stretch;
    align-self:auto;
    max-height:none;
    gap:8px;
  }
  .a-side-divider{display:none}
  .a-side-label{display:none}
  .a-sidebar .dl{width:auto;flex:0 0 auto}
  .a-side-note{flex:1 1 100%;text-align:center}
}

@media (max-width: 768px){
  .layout-a{padding:76px 10px 14px}
  .a-frame-wrap{--frame-budget:200px}
}

/* Legacy below-frame downloads row — hidden in favor of sidebar */
.a-downloads{display:none}

/* === LAYOUT C — FULL BLEED ================================ */
.layout-c{position:relative;z-index:2;height:100%;padding-top:64px}
.c-frame-wrap{position:absolute;inset:64px 0 0 0;background:#000}
.c-title-pill{position:absolute;top:88px;left:28px;z-index:5;display:flex;align-items:center;gap:14px;padding:10px 18px 10px 14px;background:rgba(12,10,8,0.75);backdrop-filter:blur(10px);border:1px solid var(--hair-2);border-radius:4px;box-shadow:0 8px 28px rgba(0,0,0,0.5)}
.c-title-pill-mark{width:36px;height:36px;background-size:contain;background-position:center;background-repeat:no-repeat;flex-shrink:0}
body[data-game="chronicles"] .c-title-pill-mark{background-image:url('/assets/brand/logo-chronicles.png')}
body[data-game="heroes"] .c-title-pill-mark{background-image:url('/assets/brand/logo-heroes.png')}
body[data-game="runner"] .c-title-pill-mark{background-image:url('/assets/brand/logo-runner.png')}
.c-title-pill-text{display:flex;flex-direction:column;line-height:1.15}
.c-title-pill-kind{font-family:'Cinzel',serif;font-size:8px;letter-spacing:2.5px;text-transform:uppercase;color:var(--game-glow);font-weight:500}
.c-title-pill-name{font-family:'Cinzel',serif;font-size:14px;letter-spacing:2.5px;text-transform:uppercase;color:var(--cream);font-weight:600}

.c-back{position:absolute;top:88px;right:28px;z-index:5}

.c-download-panel{position:absolute;bottom:24px;right:24px;z-index:5;padding:18px 20px;background:rgba(12,10,8,0.82);backdrop-filter:blur(12px);border:1px solid var(--hair-2);border-radius:6px;box-shadow:0 16px 50px rgba(0,0,0,0.7),0 0 0 1px rgba(var(--game-rgb),0.1);min-width:300px;max-width:360px}
.c-download-panel-title{font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--text-dim);font-weight:500;margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid var(--hair)}
.c-download-panel-list{display:flex;flex-direction:column;gap:8px}
.c-download-panel-list .dl{min-width:0;width:100%}
.c-download-panel.empty .c-download-panel-title{margin-bottom:8px;border-bottom:none;padding-bottom:0}
.c-empty-inline{font-family:'Crimson Pro',serif;font-style:italic;font-size:12px;color:var(--text-faint);line-height:1.5}
.c-empty-inline strong{color:var(--ember-glow);font-style:normal;font-family:'Cinzel',serif;font-size:9px;letter-spacing:2px;display:block;text-transform:uppercase;margin-bottom:4px;font-weight:600}

/* --- Fullscreen toggle (Layout C) --- */
.c-fullscreen{position:absolute;bottom:24px;left:24px;z-index:5;display:inline-flex;align-items:center;gap:10px;padding:11px 16px;background:rgba(12,10,8,0.75);backdrop-filter:blur(10px);border:1px solid var(--hair-2);border-radius:4px;font-family:'Cinzel',serif;font-size:10px;font-weight:500;letter-spacing:2.5px;text-transform:uppercase;color:var(--text-dim);cursor:pointer;transition:all .25s;box-shadow:0 8px 28px rgba(0,0,0,0.45)}
.c-fullscreen:hover{color:var(--cream);border-color:var(--game-glow);background:rgba(var(--game-rgb),0.14);box-shadow:0 8px 28px rgba(0,0,0,0.5),0 0 24px rgba(var(--game-rgb),0.18)}
.c-fullscreen svg{flex-shrink:0;transition:transform .3s}
.c-fullscreen:hover svg{transform:scale(1.08)}
.c-fullscreen .label-collapse{display:none}
.c-fullscreen .icon-collapse{display:none}

/* When the frame-wrap is the fullscreen element */
.c-frame-wrap:fullscreen{background:#000;width:100vw;height:100vh;inset:0}
.c-frame-wrap:fullscreen .c-fullscreen{bottom:20px;left:20px;opacity:0.4;transition:opacity .3s}
.c-frame-wrap:fullscreen:hover .c-fullscreen,
.c-frame-wrap:fullscreen .c-fullscreen:hover,
.c-frame-wrap:fullscreen .c-fullscreen:focus-visible{opacity:1}
.c-frame-wrap:fullscreen .c-fullscreen .label-expand{display:none}
.c-frame-wrap:fullscreen .c-fullscreen .icon-expand{display:none}
.c-frame-wrap:fullscreen .c-fullscreen .label-collapse{display:inline}
.c-frame-wrap:fullscreen .c-fullscreen .icon-collapse{display:inline-flex}
/* Hint text for Esc */
.c-frame-wrap:fullscreen::after{content:'Press Esc to exit fullscreen';position:absolute;top:20px;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:10px;letter-spacing:3px;text-transform:uppercase;color:rgba(236,226,201,0.5);background:rgba(12,10,8,0.6);backdrop-filter:blur(6px);padding:8px 16px;border:1px solid rgba(58,53,48,0.5);border-radius:3px;z-index:10;opacity:0;animation:fs-hint 3.5s ease-out forwards;pointer-events:none}
@keyframes fs-hint{0%{opacity:0;transform:translate(-50%,-8px)}12%{opacity:1;transform:translate(-50%,0)}75%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}