/* ==========================================================================
   Game page dialog, playtime cards, reviews and comments.
   Uses only the tokens defined in styles.css.
   ========================================================================== */

/* ---------------- dialog shell ---------------- */

dialog {
  border:1px solid var(--line-strong); border-radius:var(--radius-lg); padding:0;
  background:var(--surface); color:var(--text); box-shadow:var(--shadow-float);
  border-top:3px solid var(--tint,var(--line-strong));
  width:min(1040px,calc(100vw - var(--space-6))); max-height:90vh; overflow:auto;
}
dialog::backdrop { background:var(--scrim); }
/* Solid square over the hero: readable on bright art and on the plain surface alike. */
.close-button {
  position:sticky; top:0; float:right; z-index:5;
  width:var(--control-h); height:var(--control-h); margin:var(--space-3) var(--space-3) 0;
  display:grid; place-items:center;
  background:var(--surface-2);
  border:1px solid var(--line-strong); border-radius:var(--radius);
  color:var(--text); font-size:var(--text-lg); line-height:1; cursor:pointer;
  transition:border-color var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.close-button:hover { border-color:var(--text-muted); background:var(--surface-3); }

/* Backdrop band: the game's wide art fading into the dialog surface. The
   profile below pulls up over its lower edge so the cover overlaps it. */
.detail-hero { position:relative; height:260px; overflow:clip; background:var(--tint,var(--surface-2)); }
.detail-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 20%; display:block; }
.detail-hero.soft img { filter:blur(24px) saturate(1.3); transform:scale(1.15); }
.detail-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(var(--bg-rgb),0.15) 0%,color-mix(in srgb,var(--tint,var(--surface)) 45%,transparent) 50%,var(--surface) 100%); }

/* ---------------- game page ---------------- */

/* Two columns. Left: the art, your numbers, the actions. Right: the
   title and a reference sheet, then the review tabs. */
.game-profile { display:grid; grid-template-columns:240px minmax(0,1fr); gap:var(--space-6); padding:var(--space-6); margin-top:-120px; position:relative; }
.game-profile-aside { display:flex; flex-direction:column; gap:var(--space-3); position:sticky; top:var(--space-5); align-self:start; min-width:0; }
.game-profile-aside .cover { width:100%; border-radius:var(--radius); box-shadow:var(--shadow-cover),0 0 0 1px var(--line-strong); }
.game-profile-main { min-width:0; }

/* Your numbers: one small card per stat. */
.detail-stats { display:flex; gap:var(--space-2); margin:0; }
.detail-stats > div { flex:1; min-width:0; padding:var(--space-2) var(--space-3); background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius); }
.detail-stats dt { font-size:var(--text-xs); color:var(--text-muted); }
.detail-stats dd { margin:2px 0 0; font-size:var(--text-md); font-weight:600; color:var(--text); overflow-wrap:anywhere; }
.detail-stats dd.played { color:var(--verified); }
.detail-actions .button { width:100%; }
.detail-links { display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-4); }
.detail-links .text-button { font-size:var(--text-sm); }

.detail-header { padding:var(--space-7) 0 var(--space-5); }
.detail-kicker { font-size:var(--text-sm); color:var(--text-muted); }
.detail-info h2 { font-family:var(--font-display); font-stretch:var(--display-stretch); font-size:var(--text-3xl); font-weight:800; line-height:var(--leading-tight); letter-spacing:var(--tracking-tight); margin:2px 0 var(--space-4); overflow-wrap:anywhere; }
.detail-info .helper { margin-top:var(--space-2); }
.detail-summary { margin:var(--space-4) 0 var(--space-1); max-width:68ch; color:var(--text); line-height:var(--leading); white-space:pre-line; }
.detail-credit { font-size:var(--text-xs); }

/* Hardware capsules, here and on review rows. */
.platform-badges { display:flex; flex-wrap:wrap; gap:var(--space-1); list-style:none; margin:0; padding:0; }
.platform-badge {
  display:inline-block; font-size:var(--text-xs); font-weight:600; line-height:16px; color:var(--text);
  background:var(--surface-3); border-radius:var(--radius-sm); padding:0 var(--space-1);
}

/* PlayStation trophies by grade, under the cover with the other numbers. */
.trophy-grades { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-2) var(--space-4); margin:var(--space-4) 0 0; padding-top:var(--space-3); border-top:1px solid var(--line); }
.trophy-grades dt { font-size:var(--text-sm); color:var(--text-muted); }
.trophy-grades dd { margin:0; font-family:var(--font-mono); font-size:var(--text-ui); color:var(--text); }

.detail-tabs { display:flex; flex-wrap:wrap; gap:var(--space-5); border-bottom:1px solid var(--line); margin-bottom:var(--space-5); }
.detail-tab {
  height:calc(var(--control-h) + var(--space-2)); padding:0; margin-bottom:-1px;
  font-size:var(--text-ui); font-weight:500; color:var(--text-muted);
  background:none; border:0; border-radius:0; cursor:pointer; position:relative;
  transition:color var(--dur) var(--ease);
}
.detail-tab::after { content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:var(--accent); transform:scaleX(0); transition:transform var(--dur) var(--ease); }
.detail-tab:hover { color:var(--text); }
.detail-tab[aria-selected="true"] { color:var(--text); }
.detail-tab[aria-selected="true"]::after { transform:scaleX(1); }
.game-profile-main [role="tabpanel"] { min-height:280px; }
.game-profile-main h3 { font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-lg); margin-bottom:var(--space-2); }
.metadata-table { display:grid; grid-template-columns:104px minmax(0,1fr); margin:0; font-size:var(--text-ui); border-top:1px solid var(--line); }
.metadata-table dt, .metadata-table dd { padding:6px 0; margin:0; border-bottom:1px solid var(--line); }
.metadata-table dd { color:var(--text); }
.metadata-table dt { color:var(--text-muted); }
.metadata-table dd { overflow-wrap:anywhere; }
.delete-confirmation { border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4); margin-top:var(--space-2); }
.delete-confirmation p { margin-bottom:var(--space-4); font-size:var(--text-ui); }
.delete-confirmation button { margin:0 var(--space-2) var(--space-2) 0; }
.review-removal { margin-top:var(--space-3); }
.review-actions { display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-1) var(--space-4); margin-top:var(--space-2); }
.review-actions .text-button { font-size:var(--text-xs); color:var(--text-muted); }
.review-actions .text-button:hover { color:var(--text); }
.write-review > .button, .review-form > .button { align-self:flex-start; }

/* ---------------- playtime cards ---------------- */

/* Library view: most played beside top genres. Playtime view: most played
   spans the top and the two charts share the row beneath it. */
.insights { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); }
.insights > :only-child, .insights.expanded .spotlight { grid-column:1 / -1; }

.insight-card, .spotlight {
  display:flex; flex-direction:column; gap:var(--space-3); min-width:0;
  border:1px solid var(--line); border-radius:var(--radius-lg);
  background:var(--surface); padding:var(--space-5);
}
.insight-card h2, .spotlight h2 { font-family:var(--font-display); font-stretch:var(--display-stretch); font-weight:800; font-size:var(--text-lg); }
.insight-card .section-heading { margin:0; }
.card-footnote { margin-top:auto; font-size:var(--text-sm); color:var(--text-muted); }

/* ---------------- bar list ----------------
   One series in one color. Bars grow from a shared baseline, stay 8px thick,
   and carry the value at the tip. The whole row is the hit target. */
.bar-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; }
.bar-hit {
  display:grid; grid-template-columns:minmax(84px,32%) minmax(0,1fr); align-items:center; gap:var(--space-3);
  width:calc(100% + var(--space-4)); min-height:var(--control-h); margin:0 calc(var(--space-2) * -1); padding:var(--space-1) var(--space-2);
  background:none; border:0; border-radius:var(--radius); text-align:left; cursor:default;
  transition:background-color var(--dur) var(--ease);
}
button.bar-hit { cursor:pointer; }
.bar-hit:hover, .bar-hit:focus-visible { background:var(--surface-2); }
.bar-label { font-size:var(--text-ui); color:var(--text-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bar-track { display:flex; align-items:center; gap:var(--space-2); min-width:0; }
/* The fraction scales only the room left after the value label, so every
   bar stays proportional and the longest one never pushes its label out. */
.bar {
  flex:none; height:8px; width:calc(var(--fraction, 0) * (100% - 5.5rem));
  background:var(--series); border-radius:var(--radius-sm);
  transition:filter var(--dur) var(--ease);
}
.bar-hit:hover .bar, .bar-hit:focus-visible .bar { filter:brightness(1.15); }
.bar-value { flex:none; font-size:var(--text-sm); color:var(--text); white-space:nowrap; }

.most-played .bar-hit { grid-template-columns:auto minmax(0,36%) minmax(0,1fr); min-height:var(--space-7); }
.bar-lead { display:flex; align-items:center; gap:var(--space-3); }
.bar-rank { width:2ch; text-align:right; font-family:var(--font-mono); font-size:var(--text-sm); color:var(--text-muted); }
.bar-lead .cover { width:28px; flex:none; border-radius:var(--radius-sm); }

/* Values lead, labels follow: the reader already has the row and wants the number. */
.chart-tip {
  position:fixed; z-index:60; pointer-events:none;
  display:flex; flex-direction:column; gap:var(--space-1);
  background:var(--surface-2); border:1px solid var(--line-strong); border-radius:var(--radius);
  padding:var(--space-2) var(--space-3); font-size:var(--text-sm); color:var(--text-muted); white-space:nowrap;
}
.chart-tip strong { font-weight:500; font-size:var(--text-ui); color:var(--text); }

/* ---------------- most played ---------------- */

.spotlight-body { display:grid; grid-template-columns:96px minmax(0,1fr); gap:var(--space-5); align-items:center; }
.spotlight-cover { width:96px; padding:0; border:0; background:none; cursor:pointer; border-radius:var(--radius-sm); box-shadow:var(--shadow-cover); }
.spotlight-cover:hover .cover img { filter:brightness(1.12); }
.spotlight-copy { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:var(--space-2); }
.spotlight-copy h3 { font-size:var(--text-xl); overflow-wrap:anywhere; }
.spotlight-hours { font-size:var(--text-md); }
.spotlight-meta { font-size:var(--text-ui); color:var(--text-muted); }

/* ---------------- reviews ---------------- */

.reviews-list { display:flex; flex-direction:column; }

/* Unboxed rows with a hairline between them. In the feed the card around it is the row, so no rule. */
.review-card { display:grid; grid-template-columns:32px minmax(0,1fr); gap:var(--space-3); padding:var(--space-4) 0; border-bottom:1px solid var(--line); }
.review-card:last-child { border-bottom:0; }
.feed-card .review-card { padding:0; border:0; }
.review-card .avatar { background:var(--surface-3); box-shadow:none; color:var(--text); font-weight:600; }
.review-main { min-width:0; }
/* One meta line: author, stars, platform, verified hours, then the date on the right. */
.review-byline { display:flex; align-items:center; gap:var(--space-1) var(--space-2); flex-wrap:wrap; font-size:var(--text-xs); min-height:20px; }
.review-author { font-size:var(--text-sm); font-weight:600; color:var(--text); }
.review-date { font-size:var(--text-xs); color:var(--text-muted); font-variant-numeric:tabular-nums; }
.review-byline .review-date { margin-left:auto; }
.review-rating { display:inline-flex; flex:none; }
.review-body { margin:var(--space-1) 0 0; font-size:var(--text-ui); max-width:72ch; white-space:pre-wrap; overflow-wrap:anywhere; }

/* Verified hours: green text on a green hairline. Green means verified and nothing else. */
.verified-label:not(.unverified) { font-size:var(--text-xs); font-weight:500; line-height:1.4; color:var(--verified); border:1px solid var(--verified-line); border-radius:var(--radius-sm); padding:1px 6px; }
.verified-label.unverified { font-size:var(--text-xs); color:var(--text-muted); }

.review-empty, .feed-empty, .comment-posted {
  font-size:var(--text-ui); color:var(--text-muted);
  border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--space-4);
}
.review-disclosure { font-size:var(--text-sm); color:var(--text-muted); }

/* ---------------- forms ---------------- */

.write-review, .review-form, .comment-form { display:flex; flex-direction:column; gap:var(--space-3); }
.comment-form { border-top:1px solid var(--line); padding-top:var(--space-4); margin-top:var(--space-2); }
.review-form label, .comment-form label { display:flex; flex-direction:column; gap:var(--space-2); font-size:var(--text-ui); font-weight:500; }
textarea, input[type="text"] {
  width:100%; font-size:var(--text-md); line-height:var(--leading);
  color:var(--text); background:var(--bg);
  border:1px solid var(--line); border-radius:var(--radius); padding:var(--space-2) var(--space-3);
  resize:vertical; font-weight:400;
  transition:border-color var(--dur) var(--ease);
}
textarea:hover { border-color:var(--line-strong); }
textarea::placeholder { color:var(--text-muted); }
textarea:focus-visible { border-color:var(--accent); }
.form-error { font-size:var(--text-ui); color:var(--danger); }

/* ---------------- comments ---------------- */

.comments { margin-top:var(--space-4); }
.comment-list { display:flex; flex-direction:column; }
.comment { padding:var(--space-3) 0; border-top:1px solid var(--line); font-size:var(--text-ui); }
.comment strong { font-weight:500; }
.comment > .review-date { margin-left:var(--space-2); }
.comment p { margin-top:var(--space-1); }

@media (max-width:860px) {
  .detail-hero { height:220px; }
  .game-profile { grid-template-columns:180px minmax(0,1fr); gap:var(--space-5); padding:var(--space-5); margin-top:-100px; }
  .detail-info h2 { font-size:var(--text-2xl); }
  .insights { grid-template-columns:minmax(0,1fr); }
  .spotlight-body { grid-template-columns:80px minmax(0,1fr); gap:var(--space-4); }
  .spotlight-cover { width:80px; }
  .most-played .bar-hit { grid-template-columns:auto minmax(0,1fr); }
  .most-played .bar-track { grid-column:2; }
}
@media (max-width:600px) {
  dialog { width:calc(100vw - var(--space-4)); max-height:94dvh; }
  .detail-hero { height:170px; }
  .game-profile { grid-template-columns:minmax(0,1fr); gap:var(--space-5); padding:var(--space-4); margin-top:-64px; }
  .game-profile-aside { position:static; display:grid; grid-template-columns:104px minmax(0,1fr); column-gap:var(--space-4); row-gap:var(--space-2); align-items:center; }
  .game-profile-aside .cover { grid-row:1 / 4; }
  .detail-header { padding:0 0 var(--space-2); }
  .detail-stats { flex-direction:column; }
  .detail-info h2 { font-size:var(--text-xl); }
  .detail-tabs { gap:var(--space-4); margin-bottom:var(--space-4); }
  .metadata-table { grid-template-columns:104px minmax(0,1fr); }
}