/* Game page (layout/page_game.php), laid out like the reference theme (topgames): the play frame
   right under the header, a bar with the title and tools under it, a row of similar games, then
   the info panel; most played games on the right. The waiting screen and the Play button live
   inside the frame (embed/index.php). Behaviour (fullscreen, phone mode) in site.js > play.
   Loaded on game pages only. */

.game-wrap{ padding-top:16px; }

.game-layout{ display:grid; gap:24px; grid-template-columns:minmax(0,1fr); align-items:start; }
@media (min-width:1020px){
  .game-layout{ grid-template-columns:minmax(0,1fr) 300px; }
  .game-side{ position:sticky; top:80px; }
}
.game-main{ min-width:0; }
/* Under the frame: name with skill and grade on the left, tools on the right. */
.game-bar{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:12px 20px; margin:16px 0 4px; }
.game-head{ display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 14px; min-width:0; }
.game-head h1{ margin:0; font:700 clamp(26px,3vw,34px)/1 var(--f-display); text-transform:uppercase; letter-spacing:.005em; text-wrap:balance; }
.game-head .league{ font:500 13px/1 var(--f-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }

/* ---------- play area ---------- */
/* 4:3, but never taller than the screen minus header and the title bar under the frame
   (~170px): on a 1366x768 Chromebook the frame and its title bar fit without scrolling. */
.stage{
  position:relative; width:100%; aspect-ratio:4/3;
  max-height:calc(100vh - 170px); max-height:calc(100svh - 170px); min-height:280px;
  display:grid; place-items:center; overflow:hidden;
  border-radius:14px; background:
    linear-gradient(#262A33,#262A33) center 30%/100% 2px no-repeat,
    linear-gradient(#262A33,#262A33) center 70%/100% 2px no-repeat,
    #14161C;
  box-shadow:0 5px 0 var(--c2), 0 18px 40px -24px rgba(20,22,27,.7);
}
/* The embed fills the frame from the start. Transparent: it paints the same dark ground. */
.stage iframe{ position:absolute; inset:0; z-index:1; width:100%; height:100%; border:0; background:transparent; }
.stage:fullscreen{ aspect-ratio:auto; width:100%; height:100%; max-height:none; border-radius:0; }

/* Emulated fullscreen (iOS has no Fullscreen API for elements; phone play mode). */
.stage.faux-fs{
  position:fixed; z-index:100; left:0; right:0;
  top:env(safe-area-inset-top,0px); bottom:env(safe-area-inset-bottom,0px);
  width:auto; height:auto; max-width:none; max-height:none; min-height:0;
  aspect-ratio:auto; border-radius:0; box-shadow:none;
}
.stage.faux-fs.has-bar{ bottom:calc(44px + env(safe-area-inset-bottom,0px)); }
.fs-exit{
  display:none; position:absolute; z-index:6; top:10px; right:10px;
  width:34px; height:34px; place-items:center; border:0; border-radius:8px;
  background:rgba(20,22,28,.8); color:#fff; cursor:pointer;
}
.fs-exit svg{ width:14px; height:14px; }
.stage.faux-fs .fs-exit{ display:grid; }
.stage.faux-fs.has-bar .fs-exit{ display:none; }
body.game-lock{ overflow:hidden; position:fixed; width:100%; }

.mobile-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:101;
  height:44px; padding:0 max(10px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(10px,env(safe-area-inset-left,0px));
  box-sizing:content-box; align-items:center; gap:10px;
  background:#14161C; color:#fff;
}
.mobile-bar.active{ display:flex; }
.mobile-bar-back{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto; height:34px; padding:0 12px;
  border:0; border-radius:8px; background:rgba(255,255,255,.14); color:#fff; font:600 14px/1 var(--f-ui); cursor:pointer;
}
.mobile-bar-back svg{ width:13px; height:13px; }
.mobile-bar-title{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:700 18px/1 var(--f-display); text-transform:uppercase; }

/* ---------- toolbar ---------- */
.toolbar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; }
.vote{ display:inline-flex; gap:6px; }
.vote-btn .n{ font:600 13px/1 var(--f-mono); font-variant-numeric:tabular-nums; }
.vote-btn[aria-pressed="true"]{ color:#14161B; background:var(--bus); border-color:var(--bus-edge); box-shadow:0 2px 0 var(--bus-edge); }
.vote-btn[data-vote="dislike"][aria-pressed="true"]{ color:#fff; background:var(--ink-soft); border-color:var(--ink); box-shadow:0 2px 0 var(--ink); }
.vote-btn[disabled]{ opacity:.6; cursor:progress; }
/* Phones: icons only for Copy link and Fullscreen, so the tools stay on one row. The words stay
   for screen readers. */
@media (max-width:479px){
  .toolbar [data-share-label], .toolbar [data-fullscreen] span{
    position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
  }
}
.tool{
  display:inline-flex; align-items:center; gap:7px; padding:8px 12px;
  background:var(--card); color:var(--ink-soft); border:1px solid var(--line-strong); border-radius:8px;
  box-shadow:0 2px 0 var(--line-strong); font:600 14px/1 var(--f-ui); cursor:pointer;
}
.tool:hover{ color:var(--ink); background:var(--paper); }
.tool:active{ transform:translateY(2px); box-shadow:none; }
.tool svg{ width:15px; height:15px; flex:none; }

/* ---------- similar games, then the info panel ---------- */
.game-more{ margin-top:22px; }
.game-info{ margin-top:26px; padding:18px 22px 24px; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); }
.game-info .crumbs{ margin:0 0 12px; padding-top:0; }
/* Summary table, like GameSummary in the reference theme: label and value on one line. */
.game-facts{ display:grid; gap:0 28px; margin:0 0 6px; }
@media (min-width:640px){ .game-facts{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
.game-facts div{ display:flex; gap:10px; padding:7px 0; border-bottom:1px solid var(--line); }
.game-facts dt{ flex:0 0 88px; font:500 12px/1.6 var(--f-mono); letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.game-facts dd{ margin:0; font:500 14px/1.5 var(--f-ui); color:var(--ink); }
.game-lede{ max-width:65ch; margin-top:16px; }
.game-hubs{ margin:0 0 6px; }
.game-block{ margin-top:28px; max-width:70ch; }
.game-block .section-title{ margin-bottom:10px; font-size:26px; }
.game-block.prose{ padding:0; }

/* ---------- side column ---------- */
.ad-bare{ margin-bottom:22px; }
.side-title{ margin:0 0 10px; font:700 22px/1 var(--f-display); text-transform:uppercase; }
.side-list{ list-style:none; margin:0; padding:0; display:grid; gap:10px; }
.sidecard{
  display:flex; align-items:center; gap:12px; padding:8px; text-decoration:none; color:var(--ink);
  background:var(--card); border:1px solid var(--line); border-radius:var(--radius);
  transition:border-color .12s, transform .12s;
}
.sidecard:hover{ border-color:var(--c1); transform:translateX(2px); }
.sidecard .key{ flex:none; width:44px; height:44px; padding:0; border-color:var(--c2); box-shadow:0 3px 0 var(--c2); }
.sidecard .sx{ min-width:0; }
.sidecard b{ display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font:600 15px/1.2 var(--f-ui); }
.sidecard em{ display:block; margin-top:3px; font:400 13px/1.3 var(--f-ui); font-style:normal; color:var(--muted); }
.side-all{ display:inline-block; margin-top:12px; font:600 14px/1 var(--f-ui); color:var(--ink-soft); text-decoration:none; }
.side-all:hover{ color:var(--lane); }

/* ---------- report a problem ---------- */
/* Native <dialog>: the browser owns Esc, focus trapping and the backdrop. Without JS the
   button would do nothing, so it only appears once site.js can open the dialog (.js on <html>,
   set in layout/header.php). */
[data-report-open]{ display:none; }
.js [data-report-open]{ display:inline-flex; }
.report-dialog{
  width:min(440px, calc(100vw - 32px)); padding:0;
  color:var(--ink); background:var(--card);
  border:1px solid var(--line-strong); border-radius:12px;
  box-shadow:0 20px 50px -20px rgba(20,22,27,.5);
}
.report-dialog::backdrop{ background:rgba(20,22,27,.55); }
.report-form{ display:grid; gap:12px; padding:18px 20px 20px; }
.report-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.report-head h2{ margin:0; font:700 22px/1 var(--f-display); text-transform:uppercase; letter-spacing:.01em; }
.report-x{
  display:grid; place-items:center; width:32px; height:32px; padding:0; cursor:pointer;
  color:var(--ink-soft); background:transparent; border:0; border-radius:8px;
}
.report-x:hover{ background:var(--paper); color:var(--ink); }
.report-x svg{ width:13px; height:13px; }
.report-game{ margin:-6px 0 0; font:600 15px/1.3 var(--f-ui); color:var(--muted); }
.report-issues{ margin:0; padding:0; border:0; display:grid; gap:7px; }
.report-issues legend{ padding:0 0 7px; font:600 14px/1.2 var(--f-ui); }
.report-issues label{ display:flex; align-items:center; gap:9px; font-size:15px; cursor:pointer; }
.report-note-label{ font:600 14px/1.2 var(--f-ui); }
.report-note-label span{ font-weight:400; color:var(--muted); }
.report-form textarea{
  width:100%; padding:9px 11px; font:inherit; font-size:15px; resize:vertical;
  color:var(--ink); background:var(--paper);
  border:1px solid var(--line-strong); border-radius:8px;
}
.report-hint{ margin:-4px 0 0; font-size:13px; color:var(--muted); }
.report-status{ margin:0; font-size:14px; color:var(--ink-soft); }
.report-status:empty{ display:none; }
.report-actions{ display:flex; justify-content:flex-end; gap:10px; margin-top:2px; }
/* game.css nạp TRƯỚC style.css (header in $custom rồi mới tới style.css), nên .btn-quiet phải
   nhiều class hơn .btn mới thắng. */
.report-actions .btn-quiet{ background:transparent; border:1px solid var(--line-strong); box-shadow:none; }
.report-actions .btn-quiet:hover{ background:var(--paper); }
.report-actions .btn-quiet:active{ transform:none; box-shadow:none; }