/* Reviews page (/reviews/): the curator's reviews as a wall of game cards. Builds on /assets/common.css.
   CSP: no inline styles anywhere; everything the page needs is a class here. Works from 360 px wide. */

/* While the first answer loads, the page keeps (at least) a screen's height: the footer does not show up in the
   first screen and then jump away (layout shift). */
#rv-root[aria-busy="true"]{min-height:calc(100vh - 64px)}
/* The shared topbar is filled in by common.js; until then it keeps its final height (60 px row + 20 px border),
   so the page does not jump down when it appears. (Suggested for common.css, where every sub-page would get it.) */
#gu-top:empty::before{content:"";display:block;min-height:60px}

/* ---------- hero ---------- */
.rv-hero{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end;margin-bottom:28px}
.rv-hero-text{display:grid;gap:10px;min-width:0}
.rv-hero h1{font-size:40px;color:var(--text);text-shadow:0 4px 0 #0d0910}
.rv-lede{color:var(--muted);max-width:40em;font-size:16px}
.rv-stats{display:flex;flex-wrap:wrap;gap:12px 28px;margin-top:10px}
.rv-stats .stat b{font-size:26px}
.rv-follow{display:grid;gap:10px;justify-items:start;max-width:340px;
  border:28px solid transparent;border-image:url(/img/ui/panel_wood.png) 28 fill / 28px round;padding:2px 4px}
.rv-follow p{font-size:14px;line-height:1.6;color:var(--cream)}
.rv-follow .btn{width:100%}

/* ---------- tools: search, sentiment, tag ---------- */
.rv-tools{display:grid;grid-template-columns:minmax(0,1.4fr) auto minmax(0,1fr);gap:12px 16px;align-items:center;margin-bottom:14px}
.rv-search{position:relative}
.rv-search input{padding-left:40px}
.rv-search svg{position:absolute;left:12px;top:50%;width:18px;height:18px;margin-top:-9px;color:var(--muted);pointer-events:none}
.rv-seg{display:flex;flex-wrap:wrap;gap:4px}
.rv-seg button{font:16px/1 var(--pixel);color:var(--muted);background:var(--well);border:2px solid var(--stone-3);min-height:48px;padding:0 12px;cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rv-seg button:hover{color:var(--cream);border-color:var(--ink-2)}
.rv-seg button[aria-pressed="true"]{color:var(--stone);background:var(--honey);border-color:var(--honey)}
.rv-seg .n{font:13px/1 var(--body);opacity:.8}
.rv-tag select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--honey) 50%),linear-gradient(135deg,var(--honey) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 12px) 50%;background-size:6px 6px;background-repeat:no-repeat;padding-right:36px}
.rv-bar{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;margin-bottom:20px;min-height:32px}
.rv-count{font-size:14px;color:var(--muted)}
.rv-count b{color:var(--text);font-weight:500}
.rv-active{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

/* ---------- cards ---------- */
.rv-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,272px),1fr));gap:20px}
.rv-card{border:24px solid transparent;border-image:url(/img/ui/panel_dark.png) 24 fill / 24px stretch;display:flex;flex-direction:column;gap:12px;min-width:0;padding:0 2px 2px;position:relative}
.rv-cap{display:block;text-decoration:none;margin:-6px -8px 0;position:relative;background:var(--well);box-shadow:0 0 0 2px #0d0910}
.rv-cap img,.rv-media img{display:block;width:100%;height:auto;aspect-ratio:292/136;object-fit:cover;background:var(--well)}
.rv-cap:hover img{filter:brightness(1.12)}
.rv-ph{display:grid;place-items:center;width:100%;aspect-ratio:292/136;background:repeating-linear-gradient(45deg,#1d1523 0 8px,#221928 8px 16px);
  color:var(--muted);font:18px/1.2 var(--pixel);text-align:center;padding:12px;overflow:hidden}
.rv-meta{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;font-size:13px;color:var(--muted)}
.rv-name{font-size:20px;line-height:1.35}
.rv-name a{color:var(--text);text-decoration:none}
.rv-name a:hover{color:var(--honey);text-decoration:underline}
.rv-alt{font-size:13px;color:var(--muted);margin-top:-6px}
.rv-text{font-size:15px;line-height:1.75;color:var(--text);white-space:pre-line;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:7;overflow:hidden}
.rv-tags{display:flex;flex-wrap:wrap;gap:6px}
.rv-tags a{font:13px/1 var(--body);color:var(--muted);text-decoration:none;border:1px solid var(--stone-3);padding:5px 8px;background:rgba(0,0,0,.18)}
.rv-tags a:hover{color:var(--honey);border-color:var(--honey)}
.rv-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:auto;padding-top:4px}
.rv-actions .btn-sm{display:inline-flex;align-items:center;justify-content:center;gap:6px;text-decoration:none;font-size:15px;line-height:1.2;min-height:44px;flex:1 1 auto;text-align:center}
.rv-actions svg{width:14px;height:14px;flex:none}
.rv-disc{font-size:12px;color:var(--muted);display:flex;gap:6px;align-items:center}
.rv-plat{display:inline-flex;gap:4px;align-items:center}
.rv-plat svg{width:14px;height:14px;color:var(--muted)}

/* sentiment badges */
.rv-badge{display:inline-flex;align-items:center;gap:6px;font:14px/1 var(--pixel);padding:5px 8px 5px 6px;border:2px solid currentColor;white-space:nowrap;background:rgba(0,0,0,.25)}
.rv-badge svg{width:14px;height:14px;flex:none}
.rv-recommended{color:var(--ok)}
.rv-informative{color:#8ec5ff}
.rv-not_recommended{color:var(--danger)}

.rv-more{display:grid;justify-items:center;gap:8px;margin-top:32px}
.rv-more .btn[aria-disabled="true"]{opacity:.65;cursor:progress}
/* A filter or search is loading: the old cards fade until the new ones arrive. */
#rv-results{transition:opacity .15s}
#rv-results[aria-busy="true"]{opacity:.45}
@media (prefers-reduced-motion:reduce){#rv-results{transition:none}}
.rv-more p{font-size:13px;color:var(--muted)}

/* ---------- detail ---------- */
.rv-back{margin-bottom:20px;font-size:15px}
.rv-back a{display:inline-flex;align-items:center;gap:6px;min-height:44px}
.rv-detail{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:28px 40px;align-items:start}
.rv-media{border:24px solid transparent;border-image:url(/img/ui/panel_dark.png) 24 fill / 24px stretch;padding:0}
.rv-media img{aspect-ratio:460/215}
.rv-media .rv-ph{aspect-ratio:460/215}
.rv-info{display:grid;gap:14px;min-width:0}
.rv-info h1{font-size:34px;line-height:1.25}
.rv-quote{border:20px solid transparent;border-image:url(/img/ui/panel_parchment.png) 20 fill / 20px stretch;color:var(--ink);padding:10px 14px;margin:6px 0 0;
  font-size:18px;line-height:1.9;white-space:pre-line;box-shadow:0 14px 30px rgba(0,0,0,.35);position:relative}
.rv-quote::before{content:"";position:absolute;top:-26px;left:24px;width:12px;height:12px;background:#c8413b;box-shadow:inset -3px -3px 0 #8a2622,inset 3px 3px 0 #f07a6a}
.rv-quote footer{margin-top:10px;font:15px/1.5 var(--pixel);color:var(--ink-2)}
.rv-detail .rv-actions .btn-sm{flex:0 1 auto}
.rv-side{display:grid;gap:16px}
.rv-follow-band{margin-top:40px;display:flex;flex-wrap:wrap;gap:16px 28px;align-items:center;justify-content:space-between;
  border:20px solid transparent;border-image:url(/img/ui/panel_parchment.png) 20 fill / 20px stretch;color:var(--ink);padding:4px 8px}
.rv-follow-band p{max-width:40em;font-size:15px}
.rv-follow-band strong{font:400 18px/1.4 var(--pixel);display:block;margin-bottom:4px}

/* ---------- states ---------- */
.rv-state{display:grid;justify-items:center;gap:14px;text-align:center;padding:48px 16px;color:var(--muted)}
.rv-state h2{color:var(--text)}
.rv-state img{image-rendering:pixelated;width:112px;height:120px}
.rv-state p{max-width:34em}
.rv-state .spinner{vertical-align:-2px;margin-right:4px}
.rv-skel{border:24px solid transparent;border-image:url(/img/ui/panel_dark.png) 24 fill / 24px stretch;min-height:340px;opacity:.5}

@media (hover:hover) and (prefers-reduced-motion:no-preference){
  .rv-card{transition:transform .12s steps(2)}
  .rv-card:hover{transform:translateY(-3px)}
}
@media (max-width:900px){
  .rv-hero{grid-template-columns:1fr}
  .rv-follow{max-width:none;width:100%}
  .rv-tools{grid-template-columns:1fr 1fr}
  .rv-search{grid-column:1/-1}
  .rv-detail{grid-template-columns:1fr}
}
@media (max-width:640px){
  .rv-hero h1{font-size:30px}
  .rv-hero{margin-bottom:20px}
  .rv-lede{font-size:15px}
  /* Phones: the list's follow box gives way to the cards (the band below the list keeps the link to Steam). */
  .rv-hero-list .rv-follow{display:none}
  .rv-tools{grid-template-columns:1fr}
  .rv-seg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-seg button{justify-content:center;padding:0 6px}
  .rv-card{border-width:16px;border-image-width:16px}
  .rv-cap{margin:-2px -4px 0}
  .rv-media{border-width:16px;border-image-width:16px}
  .rv-info h1{font-size:26px}
  .rv-quote{font-size:16px}
  .rv-follow{border-width:20px;border-image-width:20px}
}