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

body{
  background:
    radial-gradient(circle at 15% -10%, rgba(90,168,221,0.10), transparent 45%),
    radial-gradient(circle at 90% 10%, rgba(148,201,61,0.07), 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:680px;
}
.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;
}
.brandbar .dot{
  width:6px;height:6px;border-radius:50%;
  background:var(--signal);
  box-shadow:0 0 10px var(--signal);
}
.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);
  background:
    linear-gradient(135deg, rgba(90,168,221,0.18), rgba(148,201,61,0.12) 60%, rgba(23,33,46,0.4)),
    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{
  flex:0 0 auto;
  width:96px;
  aspect-ratio:16/9;
  border-radius:var(--radius-sm);
  border:1.5px solid var(--line);
  background:
    linear-gradient(135deg, rgba(90,168,221,0.12), rgba(148,201,61,0.08)),
    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:14px;
  margin-bottom:10px;
}
.tile{
  position:relative;
  background:var(--bg-panel);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:20px 16px 18px;
  cursor:pointer;
  text-align:left;
  display:flex;
  flex-direction:column;
  gap:14px;
  transition:transform .12s ease, border-color .12s ease, background .12s ease;
  font-family:var(--font-body);
  color:var(--text-primary);
}
.tile:hover:not(.disabled){border-color:var(--signal-dim); transform:translateY(-2px); background:var(--bg-panel-2);}
.tile:active:not(.disabled){transform:translateY(0px) scale(0.98);}
.tile .notch{position:absolute; top:14px; right:14px; width:8px;height:8px; 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:34px;height:34px; display:flex;align-items:center;justify-content:center; color:var(--text-primary);}
.tile-icon svg{width:100%;height:100%;}
.tile-name{font-family:var(--font-display); font-size:16px; font-weight:600;}
.tile-status{font-size:12px; 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);}

.reveal{
  display:none;
  background:var(--bg-panel);
  border:1px solid var(--signal-dim);
  border-radius:var(--radius-lg);
  padding:26px 22px;
  margin-top:8px;
  box-shadow:0 0 0 1px rgba(90,168,221,0.05), 0 20px 40px -20px rgba(90,168,221,0.25);
}
.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;}

@media (max-width:420px){
  .grid{grid-template-columns:1fr 1fr; gap:10px;}
  h1{font-size:24px;}
  .tile{padding:16px 12px;}
  .thumb{width:74px;}
}