/* ============================================================
   Gametopus — shared play-page shell
   One layout wraps every game, so branding, ads and analytics
   are integrated in exactly one place.
   ============================================================ */
* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  --bg: #0b0d14;
  --panel: #131722;
  --panel2: #1a1f2e;
  --line: rgba(124, 92, 255, .16);
  --text: #eaf0ff;
  --dim: #8b93a8;
  --accent: #7c5cff;
  --accent2: #ff5ec4;
  --gold: #ffd166;
  --game: #7c5cff;            /* overridden per game */
  --rail: 160px;
}

html, body { background: var(--bg); color: var(--text); font-family: "Segoe UI", system-ui, -apple-system, sans-serif; }
body { min-height: 100vh; display: flex; flex-direction: column; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }

/* ---------------- header ---------------- */
.gt-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: 18px;
  padding: 10px 20px;
  background: rgba(11, 13, 20, .92);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--line);
}
.gt-logo { display: flex; align-items: center; gap: 9px; font-size: 21px; font-weight: 900; letter-spacing: .5px; }
.gt-logo .octo { font-size: 24px; filter: drop-shadow(0 0 8px rgba(124, 92, 255, .8)); }
.gt-logo b { color: var(--accent); }
.gt-nav { display: flex; gap: 6px; flex-wrap: wrap; }
.gt-nav a {
  padding: 7px 13px; border-radius: 999px; font-size: 12px; font-weight: 700;
  letter-spacing: .6px; color: var(--dim); border: 1px solid transparent; transition: .15s;
}
.gt-nav a:hover, .gt-nav a.on { color: var(--text); border-color: var(--line); background: var(--panel); }
.gt-spacer { flex: 1; }
.gt-allgames {
  padding: 8px 16px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 1px;
  background: linear-gradient(90deg, var(--accent), var(--accent2)); color: #fff;
}

/* ---------------- layout ---------------- */
.gt-main {
  flex: 1; width: 100%; max-width: 1500px; margin: 0 auto;
  display: grid;
  /* auto rails collapse to nothing when empty, so the game column keeps the
     full width — the rails must stay in the flow (never display:none) or the
     centre column would be auto-placed into the first track */
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 18px; padding: 18px 20px 40px;
  align-items: start;
}
.gt-rail { position: sticky; top: 74px; align-self: start; width: var(--rail); min-width: 0; }
.gt-rail:empty { width: 0; overflow: hidden; }
.gt-col { grid-column: 2; min-width: 0; }

/* ---------------- game stage ---------------- */
.gt-stage {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  /* The whole game card is capped so the 16:9 frame always fits the screen
     without scrolling: height of the frame = width × 9/16, and the width is
     limited by the space left after the header, the stage bar and padding. */
  --chrome: 152px;
  width: min(100%, calc((100vh - var(--chrome)) * 16 / 9));
  width: min(100%, calc((100dvh - var(--chrome)) * 16 / 9));
  margin-inline: auto;
}
.gt-stagebar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--game) 22%, transparent), transparent);
  border-bottom: 1px solid var(--line);
}
.gt-stagebar h1 { font-size: 17px; font-weight: 900; letter-spacing: .5px; }
.gt-stagebar .sub { font-size: 11px; color: var(--dim); letter-spacing: .5px; }
.gt-tools { margin-left: auto; display: flex; gap: 6px; }
.gt-tool {
  cursor: pointer; background: var(--panel2); border: 1px solid var(--line);
  color: var(--text); border-radius: 9px; padding: 7px 11px;
  font-family: inherit; font-size: 12px; font-weight: 700; letter-spacing: .5px;
  display: flex; align-items: center; gap: 6px; transition: .14s;
}
.gt-tool:hover { border-color: var(--game); transform: translateY(-1px); }
.gt-tool.on { color: var(--gold); border-color: rgba(255, 209, 102, .5); }

.gt-frame {
  position: relative; width: 100%; aspect-ratio: 16 / 9;
  background: #05070c; min-height: 240px;
}
.gt-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.gt-frame.fs {
  position: fixed; inset: 0; z-index: 200;
  aspect-ratio: auto; border-radius: 0;
  width: auto; height: auto; max-height: none; min-height: 0;
}

/* splash / ad gate — the single insertion point before play */
.gt-gate {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
  text-align: center; padding: 24px;
  background:
    radial-gradient(circle at 50% 35%, color-mix(in srgb, var(--game) 26%, transparent), transparent 62%),
    linear-gradient(160deg, #10141f, #070910);
}
.gt-gate .art {
  width: min(320px, 60%); aspect-ratio: 16/9; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: #05070c;
}
.gt-gate .art canvas { width: 100%; height: 100%; display: block; }
.gt-gate h2 { font-size: 26px; font-weight: 900; letter-spacing: 1px; }
.gt-gate p { font-size: 13px; color: var(--dim); max-width: 420px; line-height: 1.6; }
.gt-play {
  cursor: pointer; font-family: inherit;
  padding: 15px 44px; border: 0; border-radius: 999px;
  font-size: 15px; font-weight: 900; letter-spacing: 3px; color: #fff;
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 30px rgba(124, 92, 255, .4);
  transition: transform .15s;
}
.gt-play:hover { transform: translateY(-2px) scale(1.02); }
.gt-gate small { font-size: 10px; color: var(--dim); letter-spacing: 1px; }

/* ad container inside the gate */
.gt-adbox {
  width: min(640px, 96%); min-height: 0; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 10px;
}
.gt-adbox.show { display: flex; }
.gt-adbox .label { font-size: 9px; letter-spacing: 3px; color: var(--dim); }
.gt-adslot { width: 100%; min-height: 250px; background: #0a0d15; border: 1px dashed var(--line); border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: var(--dim); font-size: 12px; }
.gt-adskip { font-size: 12px; color: var(--dim); letter-spacing: 1px; }

.gt-loading {
  position: absolute; inset: 0; z-index: 4; display: none;
  align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  background: #05070c; color: var(--dim); font-size: 12px; letter-spacing: 2px;
}
.gt-loading.show { display: flex; }
.gt-spin {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid rgba(255, 255, 255, .12); border-top-color: var(--game);
  animation: gtspin .8s linear infinite;
}
@keyframes gtspin { to { transform: rotate(360deg); } }

/* ---------------- info + SEO copy ---------------- */
.gt-info { margin-top: 18px; display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 18px; }
.gt-card { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 20px; }
.gt-card h2 { font-size: 15px; letter-spacing: 2px; margin-bottom: 10px; }
.gt-card h3 { font-size: 13px; letter-spacing: 1.5px; margin: 14px 0 6px; color: var(--dim); }
.gt-card p { font-size: 13.5px; line-height: 1.75; color: #cbd3e6; }
.gt-card ul { list-style: none; display: flex; flex-direction: column; gap: 7px; margin-top: 6px; }
.gt-card li { font-size: 13px; color: #cbd3e6; display: flex; gap: 9px; align-items: baseline; }
.gt-card li b { color: var(--text); font-size: 12px; letter-spacing: 1px; min-width: 128px; }
.gt-meta { display: flex; flex-direction: column; gap: 10px; }
.gt-metarow { display: flex; justify-content: space-between; font-size: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); }
.gt-metarow:last-child { border: 0; }
.gt-metarow span { color: var(--dim); letter-spacing: 1px; }
.gt-metarow b { font-weight: 700; }
.gt-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.gt-tag { font-size: 10px; font-weight: 700; letter-spacing: 1px; padding: 4px 10px; border-radius: 6px;
  background: var(--panel2); border: 1px solid var(--line); color: var(--dim); }

/* ---------------- related grid ---------------- */
.gt-section-title { margin: 28px 0 12px; font-size: 13px; letter-spacing: 3px; color: var(--dim); }
.gt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.gt-gcard {
  background: var(--panel); border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  transition: transform .16s, border-color .16s, box-shadow .16s;
}
.gt-gcard:hover { transform: translateY(-4px); border-color: var(--accent); box-shadow: 0 10px 26px rgba(124, 92, 255, .22); }
.gt-gthumb { aspect-ratio: 16/9; background: #0a0c14; position: relative; }
.gt-gthumb canvas { width: 100%; height: 100%; display: block; }
.gt-gname { padding: 9px 12px 11px; }
.gt-gname b { font-size: 13px; font-weight: 800; display: block; }
.gt-gname small { font-size: 10px; color: var(--dim); letter-spacing: .5px; }

/* ---------------- footer ---------------- */
.gt-footer {
  border-top: 1px solid var(--line); padding: 26px 20px 34px;
  text-align: center; color: var(--dim); font-size: 12px; line-height: 1.9;
}
.gt-footer a { color: var(--dim); }
.gt-footer a:hover { color: var(--text); }
.gt-footer .links { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }

/* ---------------- responsive ---------------- */
@media (max-width: 1180px) {
  .gt-main { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .gt-rail { display: none; }
  .gt-col { grid-column: 1; }
}
@media (max-width: 820px) {
  .gt-info { grid-template-columns: minmax(0, 1fr); }
  .gt-stage { --chrome: 118px; }
  .gt-frame { min-height: 200px; }
  .gt-stagebar h1 { font-size: 15px; }
  .gt-nav { display: none; }
}

/* touch warning */
.gt-touchnote {
  display: none; margin-top: 10px; padding: 10px 14px; border-radius: 10px;
  background: rgba(255, 209, 102, .1); border: 1px solid rgba(255, 209, 102, .3);
  color: var(--gold); font-size: 12px; letter-spacing: .5px;
}
.gt-touchnote.show { display: block; }