/* ==========================================================================
   Key Lair — Product Claim Page
   Requires tokens.css to be loaded first. Extends claim-page.css patterns.
   ========================================================================== */

body{
  /* Blue-only ambient glow (signal + signal-dim), not signal + key-gold's
     green -- every built-in theme's signal color already differs enough
     on its own (Default's is a "softened Steam blue" by design, Steam's
     is the fully-saturated original) to read as themed; adding a green
     tint on top mostly just made the two look like variations on the
     same blue-green blend instead of Steam's actual all-blue/navy look. */
  background:
    radial-gradient(circle at 15% -10%, color-mix(in srgb, var(--signal) 10%, transparent), transparent 45%),
    radial-gradient(circle at 90% 10%, color-mix(in srgb, var(--signal-dim) 9%, transparent), transparent 40%),
    var(--bg-void);
  color:var(--text-primary);
  font-family:var(--font-body);
  min-height:100vh;
  display:flex;
  justify-content:center;
  padding:40px 20px 80px;
}
.page{
  width:100%;
  max-width:940px;
}
.crumb{
  display:flex;
  align-items:center;
  gap:8px;
  font-size:12.5px;
  color:var(--text-faint);
  margin-bottom:22px;
}
.crumb a{color:var(--text-muted); text-decoration:none;}
.crumb a:hover{color:var(--signal);}
.brandbar{
  display:flex;
  align-items:center;
  gap:10px;
  justify-content:center;
  margin-bottom:28px;
  color:var(--text-faint);
  font-size:13px;
  letter-spacing:0.08em;
  text-transform:uppercase;
  font-weight:500;
}
.brand-icon{width:18px; height:18px; border-radius:4px; object-fit:contain; flex-shrink:0;}
.hero{
  text-align:center;
  margin-bottom:8px;
}

/* Media showcase — Steam-style hero: big viewer + thumbnail strip, sits above the title */
.media-showcase{margin-bottom:22px;}
.media-main{
  width:100%;
  aspect-ratio:16/9;
  border-radius:var(--radius-lg);
  /* Tinted with the active theme's own accent colors (color-mix, not
     hardcoded rgba blue/green) so this placeholder actually re-themes --
     it used to stay the same soft blue/green under every theme, which
     looked fine on Default (close to that theme's own colors by
     coincidence) but read as un-themed and out of place next to Steam's
     navy/sharp-cornered look. Blue-only (signal + signal-dim), not
     signal + key-gold's green -- see body{} above for why. */
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--signal) 24%, transparent), color-mix(in srgb, var(--signal-dim) 20%, transparent) 60%, color-mix(in srgb, var(--bg-void) 55%, transparent)),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.025) 0 2px, transparent 2px 26px);
  border:1px solid var(--line);
  margin-bottom:10px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  position:relative;
  overflow:hidden;
}
.media-main::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, transparent 40%, rgba(23,33,46,0.55));
  pointer-events:none;
}
.media-main.is-shot::after{background:linear-gradient(180deg, transparent 60%, rgba(23,33,46,0.4));}
.media-main-label{
  position:relative;
  z-index:1;
  font-family:var(--font-display);
  font-size:15px;
  letter-spacing:0.14em;
  text-transform:uppercase;
  color:var(--text-muted);
}
.media-main .play-badge{position:relative; z-index:1;}

.media-thumbs{
  display:flex;
  gap:8px;
  overflow-x:auto;
  padding-bottom:2px;
}
.media-thumbs::-webkit-scrollbar{height:5px;}
.media-thumbs::-webkit-scrollbar-thumb{background:var(--line); border-radius:99px;}
.thumb{
  /* grow:1 so a handful of thumbnails stretch to fill the row instead of
     leaving empty space on the right; shrink:0 so once there are enough
     of them to fill the row on their own, later ones don't get squeezed
     below a usable size -- they overflow into the existing horizontal
     scroll instead, same as before. */
  flex:1 0 128px;
  aspect-ratio:16/9;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--signal) 17%, transparent), color-mix(in srgb, var(--signal-dim) 13%, transparent)),
    repeating-linear-gradient(115deg, rgba(255,255,255,0.02) 0 2px, transparent 2px 20px);
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  opacity:0.6;
  transition:opacity .12s ease, border-color .12s ease;
}
.thumb:hover{opacity:0.9;}
.thumb.active{opacity:1; border-color:var(--signal);}
.thumb-label{
  font-family:var(--font-mono);
  font-size:10px;
  color:var(--text-faint);
}
.thumb-play{
  width:22px;height:22px;
  border-radius:50%;
  background:var(--signal);
  display:flex;align-items:center;justify-content:center;
}
.thumb-play svg{width:9px;height:9px;}

h1{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:600;
  margin:0 0 22px;
  letter-spacing:-0.01em;
  text-align:center;
}

/* Text blocks (intro / outro) */
.text-block{
  font-size:14.5px;
  line-height:1.65;
  color:var(--text-muted);
  margin-bottom:28px;
}
.text-block p{margin:0 0 12px;}
.text-block p:last-child{margin-bottom:0;}
.text-block a{color:var(--signal);}
.text-block strong{color:var(--text-primary); font-weight:600;}
.text-block-label{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-faint);
  font-weight:600;
  margin:0 0 10px;
}

.claims-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 18px;
  margin-bottom:24px;
}
.claims-label{font-size:13px; color:var(--text-muted); font-weight:500;}
.claims-count{font-family:var(--font-mono); font-size:14px; color:var(--signal); font-weight:600;}
.claims-track{flex:1; height:6px; background:var(--line); border-radius:99px; overflow:hidden; margin:0 4px;}
.claims-fill{height:100%; width:40%; background:linear-gradient(90deg, var(--signal-dim), var(--signal)); border-radius:99px;}

.section-label{
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:0.1em;
  color:var(--text-faint);
  font-weight:600;
  margin:0 0 14px 2px;
}
.grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-bottom:10px;
}
/* Grid items default to a content-based min-width (not 0), so a long
   platform name (e.g. "Nintendo Switch 2 US") could force its column --
   and with it the whole page -- wider than the viewport on mobile,
   despite .tile-name's own overflow:hidden/ellipsis, which only ever
   gets a chance to kick in once the box around it is actually allowed to
   shrink. Applies to both direct tiles and the <form> wrapping a
   claimable one (product.php), and to the nested grid inside an expanded
   platform-family group.
   Same root cause as .tile's own width:100% above: a <form> (like a
   <button>) is a form-control-adjacent element that defaults to
   content-based grid-item sizing instead of stretching to its track --
   without this, a claimable tile wrapped in its own <form> renders
   narrower than its column, leaving empty space beside it. */
.grid > *, .tile-group-body > *{min-width:0; width:100%;}
/* A row layout (icon beside name+status) instead of the old stacked one
   (icon above name above status) -- a product can have many platforms
   (admin-configurable, unbounded), and the old ~130px-tall tile meant a
   handful of them alone could push the key reveal off screen. This cuts
   each tile to roughly a third of that. */
.tile{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:10px 30px 10px 12px;
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  transition:border-color .12s ease, background .12s ease;
  font-family:var(--font-body);
  color:var(--text-primary);
  /* Form controls (a <button>, here) default to content-based grid-item
     sizing instead of stretching to their track like a plain block
     element (<details>, used for a platform-family group) would --
     without this, a lone single-platform tile (.tile-full, no sibling
     to share the row with) renders narrower than every other row. */
  width:100%;
}
/* A lone single tile with nothing beside it (see product.php's
   isolated_single_indexes()) spans both columns instead of leaving the
   row half-empty -- same as a platform-family group already does. */
.tile-full{grid-column:1 / -1;}
.tile:hover:not(.disabled){border-color:var(--signal-dim); background:var(--bg-panel-2);}
.tile:active:not(.disabled){transform:scale(0.98);}
.tile .notch{position:absolute; top:10px; right:10px; width:7px;height:7px; border-radius:2px; background:var(--line);}
.tile.disabled .notch{background:var(--text-faint);}
.tile:not(.disabled) .notch{background:var(--signal); box-shadow:0 0 8px var(--signal);}
.tile-icon{width:22px;height:22px; display:flex;align-items:center;justify-content:center; color:var(--text-primary); flex-shrink:0;}
.tile-icon svg{width:100%;height:100%;}
.tile-icon img{width:100%;height:100%;object-fit:contain;}
.tile-info{display:flex; flex-direction:column; gap:1px; min-width:0;}
.tile-name{font-family:var(--font-display); font-size:13.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.tile-status{font-size:11px; color:var(--signal); font-weight:500;}
.tile.disabled{cursor:not-allowed; opacity:0.55;}
.tile.disabled .tile-status{color:var(--danger);}
.tile.disabled .tile-icon{color:var(--text-faint);}

/* A platform family with several regional variants (Nintendo Switch 2,
   PlayStation 5, ...) collapses behind one <summary> instead of listing
   every region as its own tile -- expand to pick the specific region.
   Plain <details>/<summary>, no JS needed for the toggle itself. */
.tile-group{grid-column:1 / -1;}
.tile-group-summary{
  list-style:none;
  cursor:pointer;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:10px 14px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  font-family:var(--font-body);
  color:var(--text-primary);
  transition:border-color .12s ease, background .12s ease;
}
.tile-group-summary::-webkit-details-marker{display:none;}
.tile-group-summary:hover{border-color:var(--signal-dim); background:var(--bg-panel-2);}
.tile-group[open] > .tile-group-summary{border-bottom-left-radius:0; border-bottom-right-radius:0;}
.tile-group-summary .tile-info{flex:1; min-width:0;}
.group-chevron{width:16px; height:16px; color:var(--text-faint); flex-shrink:0; transition:transform .15s ease;}
.tile-group[open] .group-chevron{transform:rotate(180deg);}
/* No region in the family has stock -- dimmed the same way an individual
   sold-out tile is, rather than looking exactly like an available one
   until it's actually expanded. Still expandable (not hidden), matching
   how an individual sold-out platform stays visible instead of being
   removed entirely. */
.tile-group.disabled > .tile-group-summary{cursor:not-allowed; opacity:0.55;}
.tile-group.disabled .tile-status{color:var(--danger);}
.tile-group.disabled .tile-icon{color:var(--text-faint);}
.tile-group-body{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  padding:8px;
  background:var(--bg-void);
  border:1px solid var(--line);
  border-top:none;
  border-bottom-left-radius:var(--radius-md);
  border-bottom-right-radius:var(--radius-md);
}

.reveal{
  display:none;
  background:var(--bg-panel);
  border:1px solid var(--signal-dim);
  border-radius:var(--radius-lg);
  padding:26px 22px;
  margin-top:8px;
  margin-bottom:24px;
  box-shadow:0 0 0 1px color-mix(in srgb, var(--signal) 5%, transparent), 0 20px 40px -20px color-mix(in srgb, var(--signal) 25%, transparent);
}
.reveal.show{display:block; animation:slideIn .28s ease;}
@keyframes slideIn{from{opacity:0; transform:translateY(10px);} to{opacity:1; transform:translateY(0);}}
.reveal-top{display:flex; align-items:center; gap:10px; margin-bottom:16px;}
.reveal-check{width:22px;height:22px;border-radius:50%; background:var(--signal); display:flex;align-items:center;justify-content:center; flex-shrink:0;}
.reveal-check svg{width:12px;height:12px;}
.reveal-title{font-family:var(--font-display); font-size:16px; font-weight:600;}
.readout{
  background:var(--bg-void);
  border:1px dashed var(--key-gold);
  border-radius:var(--radius-sm);
  padding:16px 14px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:14px;
}
.readout-code{font-family:var(--font-mono); font-size:17px; letter-spacing:0.06em; color:var(--key-gold); font-weight:600; word-break:break-all;}
.copy-btn{
  flex-shrink:0;
  background:var(--bg-panel-2);
  border:1px solid var(--line);
  color:var(--text-primary);
  font-family:var(--font-body);
  font-size:12px;
  font-weight:600;
  padding:9px 14px;
  border-radius:var(--radius-sm);
  cursor:pointer;
  transition:background .12s ease, border-color .12s ease;
}
.copy-btn:hover{background:var(--line-soft); border-color:var(--signal-dim);}
.reveal-note{font-size:12.5px; color:var(--text-muted); line-height:1.5; margin:0;}
.back-link{display:inline-block; margin-top:16px; font-size:13px; color:var(--text-muted); cursor:pointer; text-decoration:underline; text-underline-offset:3px;}
.back-link:hover{color:var(--signal);}

.play-badge{
  width:44px;height:44px;
  border-radius:50%;
  background:var(--signal);
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.play-badge svg{width:16px;height:16px;}

footer{text-align:center; margin-top:40px; font-size:12px; color:var(--text-faint); line-height:1.6;}
footer a{color:var(--text-faint); text-decoration:underline;}
footer a:hover{color:var(--text-muted);}

@media (max-width:420px){
  h1{font-size:24px;}
  .thumb{flex-basis:92px;}
}
