/* ======================================================================
   TOKYO ANIME HUNTER — Frontend Enhancements CSS (v3)
   File: public/css/frontend-enhancements.css
   Load AFTER public/css/frontend.css in layouts/frontend.blade.php:

     <link rel="stylesheet" href="{{ asset('css/frontend-enhancements.css') }}">

   Additive only — no overrides of existing tah-* classes. New systems:
     • .tah-journey      — 7-phase kuji stepper with icons + pulse
     • .tah-stage        — phase-specific "what's happening now" panel
     • .tah-bt-*         — Battle Theater overlay (fights, pips, ranks)
     • .tah-bracket-*    — playoff bracket overview
     • .tah-turn-*       — live draft room turn banner + queue
     • .tah-wl-*         — wishlist ranker
     • .tah-sale-hero    — fire-sale-first shop treatment
     • .tah-pd-*         — industry-standard product page pieces
     • .tah-live-*       — live selling arena (stream + claim rail)
     • .tah-myslot-* / .tah-dispatch-* — Hunter HQ kuji tab
     • utilities: .tah-ticker, .tah-chip-rail, .tah-stat-band,
                  .tah-cd countdowns, [data-tah-reveal]
   ====================================================================== */

/* Local fallbacks so this file works even if a var is missing upstream */
:root {
    --tahx-pink:   var(--tah-primary, #FF2D78);
    --tahx-purple: #6B2FA0;
    --tahx-bg:     #0D0B1E;
    --tahx-gold:   #FFC94D;
    --tahx-cyan:   #4DD7FF;
    --tahx-green:  var(--tah-success, #3AC98A);
    --tahx-red:    var(--tah-danger, #FF4D6D);
    --tahx-border: var(--tah-border, rgba(255,255,255,.09));
    --tahx-surface: var(--tah-surface-2, rgba(255,255,255,.04));
}

/* ─────────────────────────── Utilities ─────────────────────────── */

[data-tah-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
[data-tah-reveal].tah-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-tah-reveal] { opacity: 1; transform: none; transition: none; }
}

.tah-pulse-dot {
    display: inline-block; width: 9px; height: 9px; border-radius: 50%;
    background: var(--tahx-pink); box-shadow: 0 0 0 0 rgba(255,45,120,.6);
    animation: tahPulse 1.6s infinite;
}
@keyframes tahPulse {
    0%   { box-shadow: 0 0 0 0 rgba(255,45,120,.55); }
    70%  { box-shadow: 0 0 0 10px rgba(255,45,120,0); }
    100% { box-shadow: 0 0 0 0 rgba(255,45,120,0); }
}

/* Ticker band (homepage "happening now") */
.tah-ticker {
    overflow: hidden; border-block: 1px solid var(--tahx-border);
    background: linear-gradient(90deg, rgba(107,47,160,.16), rgba(255,45,120,.10), rgba(107,47,160,.16));
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.tah-ticker-track {
    display: inline-flex; gap: 2.5rem; padding: .55rem 0; white-space: nowrap;
    animation: tahTicker 32s linear infinite; will-change: transform;
}
.tah-ticker:hover .tah-ticker-track { animation-play-state: paused; }
@keyframes tahTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .tah-ticker-track { animation: none; } }
.tah-ticker-item { font-size: .8rem; letter-spacing: .04em; display: inline-flex; align-items: center; gap: .45rem; }
a.tah-ticker-item, .tah-ticker-item a { text-decoration: none; color: inherit; }
.tah-ticker-item i { color: var(--tahx-pink); }
.tah-ticker-item.hot { color: var(--tahx-pink); font-weight: 700; }
.tah-ticker-item.hot i { animation: tahx-blink 1.2s ease-in-out infinite; }
@keyframes tahx-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Horizontal chip rail (categories / quick filters) */
.tah-chip-rail {
    display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .35rem;
    scrollbar-width: thin;
}
.tah-chip {
    flex: 0 0 auto; display: inline-flex; align-items: center; gap: .4rem;
    padding: .42rem .85rem; border-radius: 999px; font-size: .8rem;
    border: 1px solid var(--tahx-border); background: var(--tahx-surface);
    color: inherit; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: border-color .2s, color .2s, background .2s;
}
.tah-chip:hover { border-color: var(--tahx-pink); color: var(--tahx-pink); }
.tah-chip.on { border-color: var(--tahx-pink); background: rgba(255,45,120,.14); color: var(--tahx-pink); font-weight: 600; }

/* Stat band */
.tah-stat-band {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1px; background: var(--tahx-border); border: 1px solid var(--tahx-border);
    border-radius: 14px; overflow: hidden;
}
.tah-stat-cell { background: var(--tahx-bg); padding: .9rem 1.1rem; }
.tah-stat-cell b { font-family: 'Orbitron', sans-serif; font-size: 1.15rem; display: block; }
.tah-stat-cell span { font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; opacity: .6; }

/* Compact countdown pill for [data-tah-countdown] */
.tah-cd {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: 'Orbitron', sans-serif; font-size: 1rem; letter-spacing: .06em;
    padding: .3rem .8rem; border-radius: 10px;
    border: 1px solid var(--tahx-border); background: var(--tahx-surface);
}
.tah-cd.big { font-size: 1.5rem; padding: .5rem 1.1rem; }
.tah-cd.expired { color: var(--tahx-red); border-color: var(--tahx-red); animation: tahBlink 1s steps(2) infinite; }
@keyframes tahBlink { 50% { opacity: .45; } }

/* ─────────────────────── Kuji phase journey ─────────────────────── */

.tah-journey { display: flex; flex-wrap: wrap; gap: .35rem 0; margin: .25rem 0; }
.tah-journey-step {
    position: relative; flex: 1 1 0; min-width: 86px; text-align: center;
    padding-top: 34px; font-size: .68rem; letter-spacing: .06em;
    text-transform: uppercase; opacity: .45;
}
.tah-journey-step .ic {
    position: absolute; top: 0; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--tahx-border); background: var(--tahx-bg);
    font-size: .78rem; z-index: 1;
}
.tah-journey-step::before {
    content: ''; position: absolute; top: 14px; left: -50%; width: 100%;
    height: 1px; background: var(--tahx-border);
}
.tah-journey-step:first-child::before { display: none; }
.tah-journey-step.done { opacity: .85; }
.tah-journey-step.done .ic { border-color: var(--tahx-green); color: var(--tahx-green); }
.tah-journey-step.done::before { background: var(--tahx-green); }
.tah-journey-step.now { opacity: 1; font-weight: 700; color: var(--tahx-pink); }
.tah-journey-step.now .ic {
    border-color: var(--tahx-pink); color: var(--tahx-pink);
    box-shadow: 0 0 0 0 rgba(255,45,120,.5); animation: tahPulse 1.8s infinite;
}
.tah-journey-step.now::before { background: linear-gradient(90deg, var(--tahx-green), var(--tahx-pink)); }
.tah-journey-step .when { display: block; font-size: .62rem; opacity: .65; text-transform: none; letter-spacing: 0; }

/* ───────────────── "Happening now" stage panel ──────────────────── */

.tah-stage {
    border: 1px solid rgba(255,45,120,.35); border-radius: 16px;
    background:
        radial-gradient(600px 220px at 12% -10%, rgba(255,45,120,.14), transparent 60%),
        radial-gradient(600px 220px at 92% 110%, rgba(107,47,160,.20), transparent 60%),
        var(--tahx-bg);
    padding: 1.25rem;
}
.tah-stage-head { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem 1rem; margin-bottom: 1rem; }
.tah-stage-head h2 { margin: 0; }

/* Turn banner — live draft room */
.tah-turn-banner {
    display: flex; flex-wrap: wrap; align-items: center; gap: 1rem;
    border: 1px solid var(--tahx-pink); border-radius: 14px;
    background: linear-gradient(90deg, rgba(255,45,120,.18), rgba(107,47,160,.18));
    padding: 1rem 1.2rem;
}
.tah-turn-banner.mine { border-color: var(--tahx-gold); box-shadow: 0 0 24px rgba(255,201,77,.25); }
.tah-turn-rank {
    font-family: 'Orbitron', sans-serif; font-size: 2rem; line-height: 1;
    color: var(--tahx-pink); min-width: 74px; text-align: center;
}
.tah-turn-banner.mine .tah-turn-rank { color: var(--tahx-gold); }

/* Queue strip */
.tah-queue-strip { display: flex; gap: .5rem; overflow-x: auto; padding-bottom: .3rem; }
.tah-queue-chip {
    flex: 0 0 auto; min-width: 84px; text-align: center; padding: .5rem .65rem;
    border: 1px solid var(--tahx-border); border-radius: 12px; background: var(--tahx-surface);
    font-size: .72rem;
}
.tah-queue-chip b { display: block; font-family: 'Orbitron', sans-serif; font-size: .95rem; }
.tah-queue-chip.done { opacity: .4; text-decoration: line-through; }
.tah-queue-chip.now { border-color: var(--tahx-pink); color: var(--tahx-pink); box-shadow: 0 0 12px rgba(255,45,120,.35); }
.tah-queue-chip.me { border-color: var(--tahx-gold); color: var(--tahx-gold); }

/* Pickable prize tiles in the draft room */
.tah-pickable { cursor: pointer; transition: transform .15s ease, box-shadow .15s ease; }
.tah-pickable:hover { transform: translateY(-3px); box-shadow: 0 8px 26px rgba(255,45,120,.28); }
.tah-picked-overlay {
    position: absolute; inset: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: .2rem;
    background: rgba(13,11,30,.72); backdrop-filter: blur(1px);
    font-size: .72rem; text-align: center; padding: .4rem; border-radius: inherit;
}
.tah-picked-overlay b { color: var(--tahx-pink); }

/* ───────────────────── Wishlist ranker ──────────────────────────── */

.tah-wl-item {
    display: flex; align-items: center; gap: .75rem;
    border: 1px solid var(--tahx-border); border-radius: 12px;
    background: var(--tahx-surface); padding: .55rem .7rem; margin-bottom: .5rem;
}
.tah-wl-rank {
    font-family: 'Orbitron', sans-serif; min-width: 34px; text-align: center;
    color: var(--tahx-pink); font-size: 1.05rem;
}
.tah-wl-thumb {
    width: 42px; height: 42px; border-radius: 8px; overflow: hidden; flex: 0 0 auto;
    background: var(--tahx-bg); display: flex; align-items: center; justify-content: center;
}
.tah-wl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tah-wl-item.taken { opacity: .45; }
.tah-wl-item.taken .tah-wl-rank { color: inherit; }
.tah-wl-controls { display: flex; gap: .25rem; margin-left: auto; }
.tah-wl-controls button {
    width: 30px; height: 30px; border-radius: 8px; border: 1px solid var(--tahx-border);
    background: transparent; color: inherit; font-size: .8rem;
    display: flex; align-items: center; justify-content: center;
}
.tah-wl-controls button:hover:not(:disabled) { border-color: var(--tahx-pink); color: var(--tahx-pink); }
.tah-wl-controls button:disabled { opacity: .25; }

/* ───────────────────── Battle Theater ───────────────────────────── */

.tah-bt-launch {
    position: relative; overflow: hidden; isolation: isolate;
}
.tah-bt-launch::after {
    content: ''; position: absolute; inset: -60%; z-index: -1;
    background: conic-gradient(from 0deg, transparent 70%, rgba(255,45,120,.5), transparent 85%);
    animation: tahSpin 3.2s linear infinite;
}
@keyframes tahSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tah-bt-launch::after { animation: none; } }

.tah-bt-overlay {
    position: fixed; inset: 0; z-index: 1080; display: flex; flex-direction: column;
    background: radial-gradient(1200px 600px at 50% 0%, rgba(107,47,160,.35), transparent 65%), rgba(9,7,22,.96);
    padding: max(1rem, env(safe-area-inset-top)) 1rem 1rem;
    overflow-y: auto;
}
.tah-bt-top { display: flex; align-items: center; justify-content: space-between; gap: 1rem; max-width: 980px; width: 100%; margin: 0 auto .5rem; }
.tah-bt-title { font-family: 'Orbitron', sans-serif; letter-spacing: .1em; font-size: .8rem; text-transform: uppercase; opacity: .8; }
.tah-bt-close {
    width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--tahx-border);
    background: transparent; color: #fff; font-size: 1rem;
}
.tah-bt-close:hover { border-color: var(--tahx-pink); color: var(--tahx-pink); }

.tah-bt-stage { max-width: 980px; width: 100%; margin: 0 auto; flex: 1; display: flex; flex-direction: column; }

.tah-bt-roundbanner {
    margin: auto; text-align: center; animation: tahZoomIn .5s ease both;
}
.tah-bt-roundbanner h3 {
    font-family: 'Orbitron', sans-serif; font-size: clamp(1.6rem, 5vw, 3rem);
    background: linear-gradient(90deg, var(--tahx-pink), var(--tahx-gold));
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
@keyframes tahZoomIn { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.tah-bt-arena {
    display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .8rem;
    margin: auto 0; position: relative;
}
.tah-bt-arena.shake { animation: tahShake .45s ease; }
@keyframes tahShake {
    0%,100% { transform: translate(0,0); }
    20% { transform: translate(-7px, 3px); } 40% { transform: translate(6px, -4px); }
    60% { transform: translate(-4px, -3px); } 80% { transform: translate(4px, 2px); }
}
@media (prefers-reduced-motion: reduce) { .tah-bt-arena.shake { animation: none; } }

.tah-bt-fighter {
    border: 1px solid var(--tahx-border); border-radius: 18px; padding: 1.1rem 1rem 1.3rem;
    background: linear-gradient(180deg, rgba(255,255,255,.045), transparent 55%), var(--tahx-bg);
    text-align: center; transition: border-color .25s, box-shadow .25s, opacity .25s, transform .25s;
    min-width: 0;
}
.tah-bt-fighter.left  { animation: tahSlideL .45s ease both; }
.tah-bt-fighter.right { animation: tahSlideR .45s ease both; }
@keyframes tahSlideL { from { transform: translateX(-40px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes tahSlideR { from { transform: translateX(40px);  opacity: 0; } to { transform: none; opacity: 1; } }
.tah-bt-fighter.win {
    border-color: var(--tahx-gold);
    box-shadow: 0 0 34px rgba(255,201,77,.35);
    transform: translateY(-4px) scale(1.02);
}
.tah-bt-fighter.lose { opacity: .45; filter: grayscale(.5); }

.tah-bt-slotno {
    font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; opacity: .6;
}
.tah-bt-name {
    font-family: 'Rajdhani', sans-serif; font-weight: 700; font-size: 1.15rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tah-bt-power {
    font-family: 'Orbitron', sans-serif; font-size: clamp(1.7rem, 6vw, 3.2rem);
    line-height: 1.1; margin-top: .5rem; color: var(--tahx-cyan);
    font-variant-numeric: tabular-nums; text-shadow: 0 0 18px rgba(77,215,255,.4);
}
.tah-bt-fighter.win  .tah-bt-power { color: var(--tahx-gold); text-shadow: 0 0 22px rgba(255,201,77,.55); }
.tah-bt-move { font-size: .74rem; margin-top: .35rem; min-height: 1.1em; color: var(--tahx-pink); }
.tah-bt-seed { font-size: .68rem; opacity: .55; }

.tah-bt-vs {
    align-self: center; font-family: 'Orbitron', sans-serif;
    font-size: clamp(1.2rem, 4vw, 2rem); color: var(--tahx-pink);
    text-shadow: 0 0 16px rgba(255,45,120,.6); padding: 0 .2rem;
    animation: tahVs 1.4s ease-in-out infinite alternate;
}
@keyframes tahVs { from { transform: scale(1); } to { transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .tah-bt-vs { animation: none; } }

.tah-bt-pips { display: flex; justify-content: center; gap: .35rem; margin-top: .6rem; }
.tah-bt-pips .pip {
    width: 11px; height: 11px; border-radius: 50%;
    border: 1px solid var(--tahx-border); background: transparent; transition: all .25s;
}
.tah-bt-pips .pip.on { background: var(--tahx-gold); border-color: var(--tahx-gold); box-shadow: 0 0 8px rgba(255,201,77,.6); }

.tah-bt-matchlabel { text-align: center; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; opacity: .7; margin-bottom: .8rem; }
.tah-bt-winnerbanner {
    text-align: center; margin-top: 1rem; font-family: 'Orbitron', sans-serif;
    font-size: clamp(1rem, 3.4vw, 1.6rem); color: var(--tahx-gold); animation: tahZoomIn .4s ease both;
}

.tah-bt-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; padding: 1.1rem 0 .4rem; }

.tah-bt-ranktable { max-width: 640px; margin: 1rem auto; width: 100%; }
.tah-bt-rankrow {
    display: flex; align-items: center; gap: .9rem; padding: .6rem .9rem;
    border: 1px solid var(--tahx-border); border-radius: 12px; margin-bottom: .45rem;
    background: var(--tahx-surface); animation: tahSlideL .4s ease both;
}
.tah-bt-rankrow .r {
    font-family: 'Orbitron', sans-serif; min-width: 46px; text-align: center; font-size: 1.05rem;
}
.tah-bt-rankrow.first { border-color: var(--tahx-gold); box-shadow: 0 0 22px rgba(255,201,77,.25); }
.tah-bt-rankrow.first .r { color: var(--tahx-gold); }
.tah-bt-rankrow.second .r { color: #cfd6e4; }
.tah-bt-rankrow.third .r { color: #d29a6b; }

/* Bracket overview */
.tah-bracket { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: .5rem; }
.tah-bracket-round { flex: 0 0 230px; display: flex; flex-direction: column; gap: .6rem; justify-content: space-around; }
.tah-bracket-round > .rn { font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; opacity: .6; text-align: center; }
.tah-bracket-match { border: 1px solid var(--tahx-border); border-radius: 10px; overflow: hidden; font-size: .78rem; background: var(--tahx-surface); }
.tah-bracket-match .side { display: flex; justify-content: space-between; gap: .5rem; padding: .38rem .6rem; }
.tah-bracket-match .side + .side { border-top: 1px dashed var(--tahx-border); }
.tah-bracket-match .side.w { color: var(--tahx-gold); font-weight: 700; background: rgba(255,201,77,.07); }
.tah-bracket-match .side .sc { font-family: 'Orbitron', sans-serif; }

/* ─────────────────────── Shop / fire sale ───────────────────────── */

.tah-sale-hero {
    position: relative; overflow: hidden; border-radius: 18px;
    border: 1px solid rgba(255,152,45,.45);
    background:
        radial-gradient(700px 300px at 8% -20%, rgba(255,120,45,.28), transparent 60%),
        radial-gradient(700px 300px at 95% 120%, rgba(255,45,120,.22), transparent 60%),
        var(--tahx-bg);
    padding: 1.6rem 1.5rem;
    margin-bottom: 1.5rem;
}
.tah-sale-hero .flames {
    position: absolute; inset: auto 0 0 0; height: 5px;
    background: linear-gradient(90deg, #FF982D, var(--tahx-pink), #FF982D);
    background-size: 200% 100%; animation: tahFlames 3s linear infinite;
}
@keyframes tahFlames { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { .tah-sale-hero .flames { animation: none; } }

.tah-soldbar { height: 6px; border-radius: 3px; background: var(--tahx-surface); overflow: hidden; }
.tah-soldbar > div { height: 100%; border-radius: 3px; background: linear-gradient(90deg, #FF982D, var(--tahx-pink)); transition: width .4s; }

.tah-qadd {
    position: absolute; right: .55rem; bottom: .55rem; z-index: 2;
    width: 38px; height: 38px; border-radius: 50%;
    border: none; background: var(--tahx-pink); color: #fff;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 14px rgba(255,45,120,.45);
    opacity: 0; transform: translateY(6px); transition: opacity .2s, transform .2s;
}
.tah-card:hover .tah-qadd, .tah-qadd:focus-visible { opacity: 1; transform: none; }
@media (hover: none) { .tah-qadd { opacity: 1; transform: none; width: 34px; height: 34px; } }

/* ─────────────────── Product detail (industry std) ──────────────── */

.tah-pd-sticky { position: sticky; top: calc(var(--nav-h, 64px) + 14px); }
@media (max-width: 991px) { .tah-pd-sticky { position: static; } }

.tah-pd-zoom { overflow: hidden; cursor: zoom-in; }
.tah-pd-zoom img { transition: transform .18s ease; will-change: transform; }
.tah-pd-zoom.zooming img { transform: scale(1.9); }
@media (hover: none), (prefers-reduced-motion: reduce) { .tah-pd-zoom.zooming img { transform: none; } .tah-pd-zoom { cursor: default; } }

.tah-pd-thumb {
    width: 64px; height: 64px; border-radius: 10px; overflow: hidden; padding: 0;
    background: var(--tahx-surface); border: 2px solid transparent; flex: 0 0 auto;
}
.tah-pd-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tah-pd-thumb.on { border-color: var(--tahx-pink); }

.tah-qty { display: inline-flex; border: 1px solid var(--tahx-border); border-radius: 10px; overflow: hidden; }
.tah-qty button { width: 40px; border: none; background: var(--tahx-surface); color: inherit; font-size: 1rem; }
.tah-qty button:hover { color: var(--tahx-pink); }
.tah-qty input {
    width: 56px; text-align: center; border: none; background: transparent; color: inherit;
    font-family: 'Orbitron', sans-serif; -moz-appearance: textfield;
}
.tah-qty input::-webkit-outer-spin-button, .tah-qty input::-webkit-inner-spin-button { -webkit-appearance: none; }

.tah-trust-strip {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .6rem;
    margin-top: 1rem;
}
.tah-trust-strip > div {
    display: flex; gap: .6rem; align-items: flex-start; font-size: .74rem;
    border: 1px solid var(--tahx-border); border-radius: 10px; padding: .6rem .7rem;
    background: var(--tahx-surface);
}
.tah-trust-strip i { color: var(--tahx-pink); font-size: 1rem; margin-top: .05rem; }

.tah-pd-tabs { display: flex; gap: .25rem; border-bottom: 1px solid var(--tahx-border); margin-bottom: 1rem; overflow-x: auto; }
.tah-pd-tabs button {
    border: none; background: none; color: inherit; opacity: .6; padding: .6rem .9rem;
    font-family: 'Rajdhani', sans-serif; font-weight: 700; letter-spacing: .04em; white-space: nowrap;
    border-bottom: 2px solid transparent;
}
.tah-pd-tabs button.on { opacity: 1; color: var(--tahx-pink); border-bottom-color: var(--tahx-pink); }

.tah-spec-table { width: 100%; font-size: .85rem; }
.tah-spec-table td { padding: .5rem .6rem; border-bottom: 1px dashed var(--tahx-border); }
.tah-spec-table td:first-child { width: 38%; opacity: .6; text-transform: uppercase; font-size: .72rem; letter-spacing: .06em; }

.tah-share-btns { display: flex; gap: .4rem; }
.tah-share-btns a, .tah-share-btns button {
    width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--tahx-border);
    background: transparent; color: inherit; display: flex; align-items: center; justify-content: center;
    font-size: .85rem; text-decoration: none;
}
.tah-share-btns a:hover, .tah-share-btns button:hover { border-color: var(--tahx-pink); color: var(--tahx-pink); }

/* ─────────────────────── Live selling arena ─────────────────────── */

.tah-live-frame {
    position: relative; border-radius: 16px; overflow: hidden;
    border: 1px solid var(--tahx-border); background: #000; aspect-ratio: 16/9;
}
.tah-live-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.tah-live-onair {
    position: absolute; top: .8rem; left: .8rem; z-index: 2;
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(255,45,120,.92); color: #fff; font-weight: 700;
    font-size: .72rem; letter-spacing: .1em; padding: .3rem .7rem; border-radius: 999px;
}

.tah-live-chip {
    display: inline-flex; align-items: center; gap: .5rem;
    font-family: 'Orbitron', sans-serif; font-size: .92rem; letter-spacing: .08em;
    border: 1px dashed var(--tahx-pink); color: var(--tahx-pink);
    padding: .35rem .8rem; border-radius: 10px; background: rgba(255,45,120,.08);
    cursor: pointer; user-select: none;
}
.tah-live-chip:hover { background: rgba(255,45,120,.16); }
.tah-live-chip i { font-size: .8rem; }

.tah-claim-feed { max-height: 420px; overflow-y: auto; }
.tah-claim-row {
    display: flex; gap: .6rem; align-items: baseline; font-size: .8rem;
    padding: .45rem .2rem; border-bottom: 1px dashed var(--tahx-border);
}
.tah-claim-row b { color: var(--tahx-pink); }

.tah-howto-step {
    border: 1px solid var(--tahx-border); border-radius: 12px; padding: 1rem;
    background: var(--tahx-surface); height: 100%;
}
.tah-howto-step .n {
    font-family: 'Orbitron', sans-serif; color: var(--tahx-pink); font-size: 1.2rem;
}

/* ───────────────────── Hunter HQ — Kuji tab ─────────────────────── */

.tah-myslot-chips { display: flex; flex-wrap: wrap; gap: .35rem; }
.tah-myslot-chips span {
    font-family: 'Orbitron', sans-serif; font-size: .78rem;
    border: 1px solid var(--tahx-border); border-radius: 8px; padding: .2rem .55rem;
    background: var(--tahx-surface);
}
.tah-myslot-chips span.ranked { border-color: var(--tahx-purple); color: #C9A0F0; }

.tah-dispatch-steps { display: flex; gap: .25rem; flex-wrap: wrap; }
.tah-dispatch-steps span {
    font-size: .64rem; letter-spacing: .05em; text-transform: uppercase;
    padding: .2rem .5rem; border-radius: 999px; border: 1px solid var(--tahx-border); opacity: .45;
}
.tah-dispatch-steps span.on { opacity: 1; border-color: var(--tahx-green); color: var(--tahx-green); }
.tah-dispatch-steps span.now { opacity: 1; border-color: var(--tahx-pink); color: var(--tahx-pink); }

.tah-gamify-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
.tah-gamify-chips > div {
    display: flex; align-items: center; gap: .5rem; font-size: .78rem;
    border: 1px solid var(--tahx-border); border-radius: 999px; padding: .35rem .85rem;
    background: var(--tahx-surface);
}
.tah-gamify-chips b { font-family: 'Orbitron', sans-serif; }
.tah-gamify-chips i { color: var(--tahx-gold); }

/* ─────────────────────── Homepage extras ────────────────────────── */

.tah-cat-tile {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .45rem;
    border: 1px solid var(--tahx-border); border-radius: 14px; padding: 1.1rem .6rem;
    background: var(--tahx-surface); text-decoration: none; color: inherit; height: 100%;
    text-align: center; font-size: .8rem; transition: border-color .2s, transform .2s;
}
.tah-cat-tile i { font-size: 1.4rem; color: var(--tahx-pink); }
.tah-cat-tile:hover { border-color: var(--tahx-pink); transform: translateY(-3px); color: inherit; }
.tah-cat-tile small { opacity: .55; font-size: .68rem; }

/* Utility */
.tah-obj-contain img { object-fit: contain !important; }
.tah-scroll-x { overflow-x: auto; }