body { margin:0; background:#120b0d; }
  a { color:#ffb43c; text-decoration:none; }
  a:hover { color:#fff0c9; }
  ::selection { background:#ff7a1a; color:#1a0b06; }
  @keyframes tmlEmber { 0%{transform:translateY(0) scale(1);opacity:0} 12%{opacity:1} 100%{transform:translateY(-320px) scale(.4);opacity:0} }
  @keyframes tmlFlick { 0%,100%{opacity:.85;filter:brightness(1)} 45%{opacity:1;filter:brightness(1.35)} 70%{opacity:.7;filter:brightness(.9)} }
  @keyframes tmlBob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }
  @keyframes tmlMarq { 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
  @keyframes tmlPulse { 0%,100%{box-shadow:0 0 0 0 rgba(51,224,208,.7)} 70%{box-shadow:0 0 0 12px rgba(51,224,208,0)} }
  @keyframes tmlGlow { 0%,100%{box-shadow:inset 0 4px 0 rgba(255,255,255,.15),0 0 0 4px #2a0f06,0 0 34px 6px rgba(255,122,26,.55)} 50%{box-shadow:inset 0 4px 0 rgba(255,255,255,.15),0 0 0 4px #2a0f06,0 0 54px 14px rgba(239,61,23,.8)} }
  @keyframes tmlShift { 0%{background-position:0 0} 100%{background-position:64px 0} }

.hv1:hover{transform:translateY(4px);box-shadow:inset 0 5px 0 rgba(255,255,255,.5),0 6px 0 #8f1c06,0 0 50px rgba(255,122,26,.7)}
.hv2:hover{background:#7bfff0}
.hv3:hover{transform:rotate(0deg) translateY(-6px);box-shadow:14px 18px 0 #ff7a1a}
.hv4:hover{transform:rotate(0deg) translateY(-6px);box-shadow:14px 18px 0 #7b3ff2}
.hv5:hover{transform:rotate(0deg) translateY(-6px);box-shadow:14px 18px 0 #33e0d0}
.hv6:hover{transform:translateY(3px);box-shadow:0 5px 0 #8f1c06}
.hv7:hover{transform:translateY(-8px)}
.hv8:hover{transform:translateY(3px);box-shadow:0 3px 0 #8f1c06}
.hv9:hover{transform:translateY(3px);box-shadow:0 3px 0 #3d1a8a}
.hv10:hover{transform:translateY(3px);box-shadow:0 3px 0 #17877c}
.hv11:hover{transform:translateY(-34px) scale(1.05)}
.hv12:hover{transform:translateY(3px);box-shadow:inset 0 4px 0 rgba(255,255,255,.5),0 4px 0 #8f1c06}
.hv13:hover{transform:translateY(-5px)}
.hv14:hover{transform:translateY(-6px);box-shadow:12px 18px 0 #ef3d17}
.hv15:hover{transform:translateY(-6px);box-shadow:12px 18px 0 #7b3ff2}
.hv16:hover{transform:translateY(3px);box-shadow:0 4px 0 #2b3299}

/* ── added when converting the design to a live site ─────────────────────────
   Image slots become real elements: package artwork drops in as a background,
   and anything without art falls back to a lava tile rather than a gap. */
.art{
  position:absolute;inset:0;
  background:#1a0f11 center/cover no-repeat;
  image-rendering:auto;
}
.art.tile{
  background:
    repeating-linear-gradient(135deg,rgba(0,0,0,.18) 0 8px,transparent 8px 16px),
    var(--tile,#8f1c06);
  display:grid;place-items:center;
}
.art .glyph{
  font-family:'Bungee',sans-serif;font-size:56px;color:rgba(255,245,224,.85);
  text-shadow:3px 3px 0 rgba(0,0,0,.35);
}

/* The design uses transform on hover; keep it smooth rather than instant. */
[class^="hv"],[class*=" hv"]{transition:transform .14s ease,box-shadow .14s ease}

/* Long Tebex descriptions live behind a toggle so cards stay the same height. */
.perk-more{
  align-self:flex-start;background:none;border:0;cursor:pointer;padding:2px 0;
  font-family:'Silkscreen',monospace;font-size:12px;letter-spacing:1px;color:#33e0d0;
}
.perk-more:hover{color:#7bfff0}
.perk-full{
  font-size:14px;line-height:1.6;color:#d8c6bd;
  max-height:300px;overflow-y:auto;
  border-top:3px solid rgba(255,255,255,.1);padding-top:12px;
}
.perk-full ul,.perk-full ol{margin:0 0 10px;padding-inline-start:18px}
.perk-full li{margin-bottom:4px}
.perk-full p{margin:0 0 8px}
.perk-full strong{color:#ffe9c9}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important;transition:none !important}
}