/* =========================================================================
   game-common.css — shared styles for individual game pages & sub-tabs
   Loaded after style.css (paths are relative to /games/<game>/<tab>/)
   ========================================================================= */

/* game hero — all game pages share ONE height so the pill + title sit in the
   same position on Overview and every sub-page (no jump when switching tabs).
   Content is bottom-anchored; the Overview's description and the sub-pages'
   page-name occupy the same slot beneath the title. */
.game-hero{position:relative;min-height:400px;display:block;
  border-bottom:1px solid var(--line);overflow:hidden}
.game-hero.game-hero-sub{min-height:400px}
.game-hero-bg{position:absolute;inset:0;z-index:0}
.game-hero-bg img{width:100%;height:100%;object-fit:cover;opacity:.7}
.game-hero-bg::after{content:"";position:absolute;inset:0;
  background:linear-gradient(0deg,var(--ink-900) 5%,rgba(10,11,15,.45) 60%,rgba(10,11,15,.25))}
.game-hero .wrap{position:absolute;left:50%;transform:translateX(-50%);top:178px;z-index:2;
  width:100%;text-align:left}
.game-hero .tag{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--amber);border-radius:100px;padding:5px 14px;display:inline-block;margin-bottom:18px}
.game-hero h1{font-size:clamp(2.6rem,7vw,5rem);font-weight:700;color:var(--silver);letter-spacing:-.01em}
.game-hero p{max-width:52ch;margin-top:14px;color:var(--fog);font-size:1.1rem}

/* hero: game title + version with page name beneath in a contrasting colour */
.game-hero .game-id{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap}
.game-hero .game-id .ver{font-family:var(--ff-mono);font-size:.9rem;letter-spacing:.06em;
  color:var(--steel);text-transform:uppercase}
.game-hero .page-name{margin-top:10px;font-family:var(--ff-display);font-weight:600;
  text-transform:uppercase;letter-spacing:.06em;color:var(--amber);
  font-size:clamp(1.1rem,2.4vw,1.6rem)}

/* horizontal tab nav (legacy / kept for reference) */
.tabs{position:sticky;top:90px;z-index:40;background:rgba(15,17,22,.96);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
.tabs .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.tabs .wrap::-webkit-scrollbar{display:none}
.tabs a{flex:0 0 auto;font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.07em;
  font-size:.92rem;color:var(--fog);padding:16px 18px;border-bottom:2px solid transparent;font-weight:500;white-space:nowrap}
.tabs a:hover{color:var(--silver)}
.tabs a.active{color:var(--amber);border-bottom-color:var(--amber)}

/* content layout */
.game-body{padding:64px 0}
.game-body h2{font-size:clamp(1.6rem,3.4vw,2.4rem);margin-bottom:8px}
.game-body h3{font-size:1.25rem;color:var(--silver);margin:30px 0 10px;text-transform:uppercase;letter-spacing:.03em}
.game-body p{margin:0 0 16px}
.lead-row{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:30px}

.content-grid{display:grid;grid-template-columns:1fr 320px;gap:48px;align-items:start}
@media (max-width:900px){.content-grid{grid-template-columns:1fr}}

/* sidebar card */
.aside-card{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);padding:24px;position:sticky;top:166px}
.aside-card h4{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:14px}
.spec{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:.92rem}
.spec:last-child{border-bottom:none}
.spec .v{color:var(--silver);font-family:var(--ff-mono);text-align:right}

/* screenshots */
.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:24px 0 8px}
.shots figure:first-child{grid-column:1 / -1}
.shots figure:first-child img{aspect-ratio:auto;max-height:420px}
@media (max-width:760px){.shots{grid-template-columns:1fr}}
.shots figure{margin:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.shots img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--ease)}
.shots figure:hover img{transform:scale(1.05)}

/* nine circles (Escape overview) */
.circles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;margin:10px 0}
@media (max-width:680px){.circles{grid-template-columns:1fr}}
.circle{background:var(--ink-850);padding:24px;display:flex;gap:16px;align-items:flex-start}
.circle .n{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:1px solid var(--amber);
  color:var(--amber);display:flex;align-items:center;justify-content:center;font-family:var(--ff-display);font-weight:700;font-size:1.1rem}
.circle h4{font-size:1.05rem;color:var(--silver);margin-bottom:4px;text-transform:uppercase;letter-spacing:.02em}
.circle p{font-size:.88rem;color:var(--steel);margin:0}

/* changelog */
.log-entry{border-left:2px solid var(--line);padding:0 0 36px 26px;position:relative;margin-left:6px}
.log-entry::before{content:"";position:absolute;left:-7px;top:4px;width:12px;height:12px;border-radius:50%;
  background:var(--amber);box-shadow:0 0 0 4px var(--ink-900)}
.log-entry:last-child{padding-bottom:0}
.log-ver{display:flex;align-items:baseline;gap:14px;margin-bottom:6px}
.log-ver .v{font-family:var(--ff-display);font-size:1.5rem;font-weight:700;color:var(--silver)}
.log-ver .d{font-family:var(--ff-mono);font-size:.8rem;color:var(--steel)}
.log-tag{font-family:var(--ff-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.12em;
  padding:3px 9px;border-radius:100px;border:1px solid var(--amber);color:var(--amber)}
.log-list{list-style:none;padding:0;margin:14px 0 0;display:grid;gap:8px}
.log-list li{display:flex;gap:12px;font-size:.95rem;color:var(--fog)}
.log-list li .kind{flex:0 0 64px;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.08em;
  text-transform:uppercase;color:var(--amber);padding-top:3px}
.log-list li .kind.fix{color:#7fb3ff}
.log-list li .kind.new{color:#8fd18f}

/* guide */
.guide-block{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);padding:26px;margin-bottom:16px}
.guide-block h3{margin-top:0}
.keys{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}
.key{font-family:var(--ff-mono);font-size:.85rem;background:var(--ink-700);border:1px solid var(--line);
  border-bottom-width:3px;border-radius:var(--r-sm);padding:7px 13px;color:var(--silver);min-width:38px;text-align:center}
.tips{list-style:none;padding:0;margin:0;display:grid;gap:12px}
.tips li{display:flex;gap:12px;align-items:flex-start;font-size:.96rem}
.tips li::before{content:"▸";color:var(--amber);flex:0 0 auto}

/* diary */
.diary-entry{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);
  padding:30px;margin-bottom:22px}
.diary-meta{display:flex;align-items:center;gap:12px;margin-bottom:16px;font-family:var(--ff-mono);
  font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--steel)}
.diary-meta .no{color:var(--amber);border:1px solid var(--amber);border-radius:100px;padding:2px 10px}
.diary-entry h3{margin:0 0 12px;font-size:1.5rem;text-transform:none;letter-spacing:0}
.diary-entry p{color:var(--fog)}
.diary-entry p:last-child{margin-bottom:0}

/* diary — dual author (AI + human) blocks within one entry */
.diary-authors{display:grid;gap:14px;margin-top:18px}
.author-block{border:1px solid var(--line);border-radius:var(--r-sm);padding:18px 20px;
  background:var(--ink-800)}
.author-block.ai{border-left:3px solid var(--amber)}
.author-block.human{border-left:3px solid #5b9bff}
.author-tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--ff-mono);font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;font-weight:500;border-radius:100px;padding:3px 11px;margin-bottom:12px}
.author-tag.ai{color:var(--amber);border:1px solid var(--amber);background:rgba(242,160,0,.08)}
.author-tag.human{color:#5b9bff;border:1px solid #5b9bff;background:rgba(91,155,255,.08)}
.author-tag .dot{width:7px;height:7px;border-radius:50%}
.author-tag.ai .dot{background:var(--amber);box-shadow:0 0 8px var(--amber)}
.author-tag.human .dot{background:#5b9bff;box-shadow:0 0 8px #5b9bff}
.author-block p{margin:0 0 12px}
.author-block p:last-child{margin-bottom:0}
.author-block.human .placeholder{color:var(--steel);font-style:italic}

/* diary info / disclosure box */
.diary-info{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);
  padding:22px 26px;margin-bottom:30px;display:flex;gap:18px;align-items:flex-start}
.diary-info .ico{flex:0 0 auto;width:30px;height:30px;color:var(--amber)}
.diary-info h3{font-size:1.05rem;letter-spacing:.02em;color:var(--silver);margin:0 0 8px;text-transform:none}
.diary-info p{margin:0 0 12px;color:var(--fog);font-size:.96rem}
.diary-info p:last-child{margin:0}
.diary-info .legend{display:flex;gap:10px;flex-wrap:wrap;margin-top:4px}

/* music player */
.player{border:1px solid var(--line);border-radius:var(--r-md);background:var(--ink-850);overflow:hidden;max-width:680px}
.now-playing{padding:26px;display:flex;gap:20px;align-items:center;border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,var(--ink-800),var(--ink-850))}
.np-art{width:84px;height:84px;border-radius:var(--r-sm);flex:0 0 auto;border:1px solid var(--line);
  background:radial-gradient(circle at 40% 35%,var(--amber-hot),var(--amber-deep) 70%,#3a1a06);position:relative;overflow:hidden}
.np-art::after{content:"";position:absolute;inset:0;background:repeating-radial-gradient(circle at 50% 50%,transparent 0 5px,rgba(0,0,0,.18) 5px 6px)}
.np-meta .t{font-family:var(--ff-display);font-size:1.3rem;color:var(--silver);font-weight:600}
.np-meta .s{font-family:var(--ff-mono);font-size:.78rem;color:var(--steel);letter-spacing:.06em;margin-top:2px}
.np-controls{display:flex;align-items:center;gap:16px;padding:18px 26px;border-bottom:1px solid var(--line)}
.np-controls button{background:none;border:none;color:var(--fog);cursor:pointer;display:flex;padding:6px;border-radius:50%}
.np-controls button:hover{color:var(--amber)}
.np-controls .play{background:var(--amber);color:var(--ink-900);width:52px;height:52px;align-items:center;justify-content:center}
.np-controls .play:hover{background:var(--amber-hot);color:var(--ink-900)}
.np-progress{flex:1;display:flex;align-items:center;gap:12px;font-family:var(--ff-mono);font-size:.75rem;color:var(--steel)}
.bar{flex:1;height:5px;background:var(--ink-600);border-radius:100px;position:relative;cursor:pointer;overflow:hidden}
.bar .fill{position:absolute;left:0;top:0;bottom:0;width:0%;background:var(--amber);border-radius:100px}
.tracklist{list-style:none;margin:0;padding:8px}
.track{display:flex;align-items:center;gap:14px;padding:13px 16px;border-radius:var(--r-sm);cursor:pointer;transition:background .15s var(--ease)}
.track:hover{background:var(--ink-700)}
.track.active{background:var(--ink-700)}
.track.active .tnum{color:var(--amber)}
.track .tnum{font-family:var(--ff-mono);font-size:.8rem;color:var(--steel);width:24px}
.track .tname{flex:1;color:var(--silver);font-size:.98rem}
.track.active .tname{color:var(--amber)}
.track .tdur{font-family:var(--ff-mono);font-size:.8rem;color:var(--steel)}
.player-note{font-family:var(--ff-mono);font-size:.78rem;color:var(--steel);margin-top:16px;max-width:680px}

/* holding-state banner */
.holding{border:1px dashed var(--amber);background:rgba(242,160,0,.05);border-radius:var(--r-sm);
  padding:16px 20px;font-family:var(--ff-mono);font-size:.85rem;color:var(--amber-hot);margin-bottom:28px;
  display:flex;gap:12px;align-items:center}
.holding::before{content:"●";color:var(--amber)}

/* download */
.dl-hero{display:flex;gap:18px;align-items:center;flex-wrap:wrap;margin-bottom:30px}
.price-pill{font-family:var(--ff-display);font-size:1.4rem;font-weight:700;color:var(--amber);
  border:1px solid var(--amber);border-radius:100px;padding:8px 22px;text-transform:uppercase;letter-spacing:.04em}

/* prerequisites / required dependencies */
.prereq{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:var(--r-md);
  background:var(--ink-850);padding:20px 22px;margin-top:14px}
.prereq-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:8px}
.prereq-head h3{font-size:1.1rem;color:var(--silver);margin:0;text-transform:none;letter-spacing:0}
.tag-required{font-family:var(--ff-mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;
  font-weight:600;color:var(--ink-900);background:var(--amber);border-radius:100px;padding:3px 11px}
.prereq p{margin:0 0 14px;color:var(--fog);font-size:.95rem}
.prereq p:last-child{margin-bottom:0}
.prereq .btn{margin-top:2px}

/* =========================================================================
   Imported game-content styles (changelog detail, user guide, editor guide)
   Palette mapped to the Industrial Excitement tokens.
   ========================================================================= */

/* --- changelog: groups, descriptions, extra kinds & tags --- */
.log-desc{color:var(--fog);font-size:.95rem;margin:6px 0 14px}
.log-group{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--steel);margin:22px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.log-list li code,.guide-block code,.ref-table code{font-family:var(--ff-mono);font-size:.82em;
  background:var(--ink-700);border:1px solid var(--line);border-radius:4px;padding:1px 6px;color:var(--amber-hot)}
.log-list li .kind.change{color:var(--amber-hot)}
.log-list li .kind.break{color:#e0644b}
.log-list li .kind.note{color:var(--steel)}
.log-tag.tag-current{border-color:var(--amber);color:var(--ink-900);background:var(--amber)}
.log-tag.tag-stable{border-color:#8fd18f;color:#8fd18f}
.log-tag.tag-early{border-color:var(--steel);color:var(--steel)}
.log-tag.tag-critical{border-color:#e0644b;color:#e0644b}

/* --- user guide: two-col, key labels, flames, callouts, tables, chips --- */
.two-col{display:grid;grid-template-columns:repeat(2,1fr);gap:22px 30px;margin:18px 0 6px}
@media (max-width:560px){.two-col{grid-template-columns:1fr}}
.key-label{font-family:var(--ff-mono);font-size:.8rem;color:var(--steel);align-self:center}
.flame{color:var(--amber)}
.callout{border:1px solid var(--amber);border-left-width:3px;background:rgba(242,160,0,.07);
  border-radius:var(--r-sm);padding:14px 18px;margin:16px 0;font-size:.95rem;color:var(--fog)}
.callout strong{color:var(--amber-hot)}
.callout.warn{border-color:#e0644b;background:rgba(224,100,75,.08)}
.callout.warn strong{color:#e0644b}

.portal-table,.ref-table{width:100%;border-collapse:collapse;margin:16px 0 4px;font-size:.92rem}
.portal-table th,.ref-table th{text-align:left;font-family:var(--ff-mono);font-size:.7rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--amber);padding:10px 12px;border-bottom:1px solid var(--amber);white-space:nowrap}
.portal-table td,.ref-table td{padding:11px 12px;border-bottom:1px solid var(--line);color:var(--fog);vertical-align:top}
.portal-table tr:last-child td,.ref-table tr:last-child td{border-bottom:none}
.portal-table strong,.ref-table strong{color:var(--silver)}

.chip{display:inline-block;width:12px;height:12px;border-radius:50%;margin-right:8px;vertical-align:middle;
  border:1px solid rgba(255,255,255,.2)}
.chip-green{background:#44bb66}
.chip-orange{background:var(--amber-deep)}
.chip-purple{background:#aa55ff}
.chip-blue{background:#5b9bff}
.chip-red{background:#e0644b}
.chip-grey{background:var(--steel)}

/* --- guide-block accent heading colour mapping --- */
.guide-block h3{color:var(--amber)}

/* --- editor guide: subsections, reference tables, editor mock-up --- */
.subsection{margin:26px 0 8px}
.subsection h4{font-family:var(--ff-display);text-transform:uppercase;letter-spacing:.04em;
  color:var(--silver);font-size:1.1rem;margin-bottom:8px}
.tips strong{color:var(--silver)}

/* editor UI mock-up */
.editor-layout{border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;
  background:var(--ink-900);margin:18px 0;font-family:var(--ff-mono);font-size:.78rem}
.el-topbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;padding:10px;background:var(--ink-800);border-bottom:1px solid var(--line)}
.el-btn{background:var(--ink-700);border:1px solid var(--line);border-radius:4px;padding:5px 10px;color:var(--fog);align-self:center;white-space:nowrap}
.el-tab-row{display:flex;flex-wrap:wrap;gap:4px;padding:8px 10px;background:var(--ink-850);border-bottom:1px solid var(--line)}
.el-tab{padding:5px 11px;border-radius:4px;border:1px solid var(--line);background:var(--ink-800);color:var(--steel)}
.el-tab.active{background:var(--amber);color:var(--ink-900);border-color:var(--amber-hot);font-weight:600}
.editor-layout-grid{display:grid;grid-template-columns:1fr 200px;grid-auto-flow:row}
.editor-layout-grid>.el-topbar{grid-column:1 / -1}
.editor-layout-grid>.el-map{grid-column:1}
.editor-layout-grid>.el-palette{grid-column:2;grid-row:2}
@media (max-width:560px){.editor-layout-grid{grid-template-columns:1fr}
  .editor-layout-grid>.el-topbar,.editor-layout-grid>.el-map,.editor-layout-grid>.el-palette{grid-column:1}
  .editor-layout-grid>.el-palette{grid-row:auto}}
.el-map{min-height:200px;background:
  linear-gradient(rgba(242,160,0,.06) 1px,transparent 1px),
  linear-gradient(90deg,rgba(242,160,0,.06) 1px,transparent 1px),
  radial-gradient(circle at 60% 70%,rgba(242,160,0,.12),transparent 60%);
  background-size:24px 24px,24px 24px,100% 100%;padding:14px;color:var(--steel)}
.el-palette{border-left:1px solid var(--line);background:var(--ink-850);padding:12px;color:var(--steel);display:grid;gap:6px;align-content:start}
@media (max-width:560px){.el-palette{border-left:none;border-top:1px solid var(--line)}}

/* colour-name helper spans used inline in editor guide */
.amber{color:var(--amber-hot)}
.green{color:#6fcf83}
.blue{color:#5b9bff}
.purple{color:#b777ff}

/* ── enemy cards (user guide) ──────────────────────────────────────────── */
.enemy-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:18px 0 6px}
@media (max-width:680px){.enemy-grid{grid-template-columns:1fr}}
.enemy-card{display:flex;gap:18px;border:1px solid var(--line);border-radius:var(--r-md);
  background:var(--ink-850);padding:18px;align-items:flex-start}
.enemy-sprite{flex:0 0 auto;width:96px;height:96px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:#0a0a0e;display:flex;align-items:center;justify-content:center;overflow:hidden}
.enemy-sprite img{image-rendering:pixelated;width:auto;height:auto;max-width:84px;max-height:84px;
  transform:scale(1.15);transform-origin:center}
.enemy-info{min-width:0}
.enemy-info .code{font-family:var(--ff-mono);font-size:.68rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--amber);border:1px solid var(--amber);border-radius:100px;padding:2px 9px;display:inline-block;margin-bottom:6px}
.enemy-info h4{font-size:1.15rem;color:var(--silver);margin:0 0 4px;text-transform:uppercase;letter-spacing:.02em}
.enemy-info p{font-size:.9rem;color:var(--fog);margin:0 0 8px}
.enemy-info .stomp{font-family:var(--ff-mono);font-size:.72rem;letter-spacing:.06em;display:inline-flex;
  align-items:center;gap:6px}
.enemy-info .stomp.yes{color:#8fd18f}
.enemy-info .stomp.no{color:#e0644b}
.enemy-info .stomp.partial{color:var(--amber-hot)}

/* ── inline figures / screenshots inside guide content ─────────────────── */
.guide-figure{margin:18px 0;border:1px solid var(--line);border-radius:var(--r-md);overflow:hidden;background:var(--ink-800)}
.guide-figure img{width:100%;display:block}
.guide-figure figcaption{font-family:var(--ff-mono);font-size:.74rem;letter-spacing:.04em;color:var(--steel);
  padding:10px 14px;border-top:1px solid var(--line);background:var(--ink-850)}
.guide-figure.float{max-width:420px}