/* =========================================================
   $GLOB — burn portal styles
   extends style.css (terminal CRT theme)
   ========================================================= */

.burn-main { padding-bottom: 4rem; }

/* =========================================================
   PORTAL HEAD
   ========================================================= */
.portal-head {
    text-align: center;
    margin: 2.4rem auto 2rem;
    max-width: 760px;
}
.portal-title {
    font-family: var(--mono);
    font-weight: 700;
    font-size: clamp(2.2rem, 7vw, 4rem);
    color: var(--green);
    letter-spacing: 6px;
    text-transform: lowercase;
    text-shadow:
        0 0 12px var(--green-glow),
        0 0 28px rgba(0, 255, 102, 0.35);
    margin: .35rem 0 .6rem;
}
.portal-sub {
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.7;
    margin: .6rem auto 0;
}
.portal-sub b {
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
}

/* =========================================================
   CTA on main page \u2192 burn portal
   ========================================================= */
.portal-cta {
    display: inline-flex;
    align-items: center;
    gap: .65rem;
    margin: 1.2rem auto 0;
    padding: .9rem 1.2rem;
    background: var(--green);
    color: var(--bg);
    font-family: var(--mono);
    font-weight: 700;
    font-size: .92rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    border: 1px solid var(--green);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 22px rgba(0, 255, 102, 0.45);
    transition: background .15s ease, color .15s ease, transform .12s ease, box-shadow .2s ease;
}
.portal-cta:hover {
    background: var(--acid);
    border-color: var(--acid);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 30px rgba(179, 255, 0, 0.6);
}
.portal-cta:active { transform: translateY(1px); }
.portal-cta-ico   { font-size: 1.05rem; }
.portal-cta-arrow { font-size: 1.1rem; transition: transform .2s ease; }
.portal-cta:hover .portal-cta-arrow { transform: translateX(4px); }

/* highlighted nav link to portal */
.topnav-cta {
    color: var(--green) !important;
    border-color: var(--green) !important;
    background: var(--green-faint);
    text-shadow: 0 0 6px var(--green-glow);
}
.topnav-cta:hover {
    background: var(--green) !important;
    color: var(--bg) !important;
    text-shadow: none !important;
}

/* =========================================================
   PANELS (shared)
   ========================================================= */
.panel {
    background: var(--panel);
    border: 1px solid var(--green);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 24px rgba(0, 255, 102, 0.15);
    padding: 0;
    display: grid;
    grid-template-rows: auto 1fr;
}
.panel-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: .6rem;
    padding: .6rem .9rem;
    border-bottom: 1px dashed var(--green-soft);
    background: rgba(0, 255, 102, 0.04);
}
.panel-name {
    color: var(--green);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: 3px;
    text-shadow: 0 0 6px var(--green-glow);
}
.panel-tag {
    color: var(--ink-dim);
    font-size: .72rem;
    letter-spacing: 2px;
    text-transform: uppercase;
}
.panel-tag.live { color: var(--green); }
.panel-tag.live::before {
    content: "● ";
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
}

/* =========================================================
   PORTAL GRID
   ========================================================= */
.portal-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
    gap: 1.2rem;
    margin-bottom: 2.4rem;
}
@media (max-width: 880px) {
    .portal-grid { grid-template-columns: 1fr; }
}

/* =========================================================
   BURN PANEL (left)
   ========================================================= */
.panel-burn { min-height: 360px; }
.panel-burn > .connect-box,
.panel-burn > .burn-box   { padding: 1.2rem 1.2rem 1.3rem; }

#connectionTag { color: var(--ink-dim); }
#connectionTag.connected {
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
}
#connectionTag.connected::before {
    content: "● ";
    color: var(--green);
}

/* connect step */
.connect-box .hint {
    color: var(--ink-dim);
    font-size: .82rem;
    margin-top: .9rem;
    line-height: 1.55;
    text-align: center;
}

/* burn step */
.wallet-row, .balance-row {
    display: flex;
    align-items: center;
    gap: .5rem;
    color: var(--ink-dim);
    font-size: .9rem;
    margin-bottom: .35rem;
    flex-wrap: wrap;
}
.wallet-label, .balance-label {
    color: var(--ink-dim);
    font-weight: 700;
}
.wallet-addr {
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
    font-family: var(--mono);
    word-break: break-all;
}
.balance-val {
    color: var(--green);
    font-weight: 700;
    text-shadow: 0 0 6px var(--green-glow);
    flex: 1 1 auto;
}

.amount-label {
    display: block;
    color: var(--green);
    font-weight: 700;
    font-size: .85rem;
    letter-spacing: 2px;
    margin: 1rem 0 .4rem;
    text-shadow: 0 0 6px var(--green-glow);
}

.amount-input-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    background: var(--bg-2);
    border: 1px solid var(--green);
    transition: box-shadow .2s ease;
}
.amount-input-wrap:focus-within {
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 0 16px rgba(0, 255, 102, 0.45);
}

.amount-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--green);
    font-family: var(--pixel);
    font-size: 1.8rem;
    letter-spacing: 2px;
    padding: .55rem .85rem;
    outline: none;
    text-shadow: 0 0 8px var(--green-glow);
    transition: color .28s ease, text-shadow .28s ease;
}
.amount-input::placeholder { color: var(--ink-faint); }

/* tier-coloured input + wrap (color shifts as user types past thresholds) */
.amount-input.tier-none    { color: var(--ink-dim); text-shadow: none; }
.amount-input.tier-imp     { color: #94a3b8; text-shadow: 0 0 8px rgba(148,163,184,0.55); }
.amount-input.tier-goblin  { color: #00ff66; text-shadow: 0 0 9px rgba(0,255,102,0.65); }
.amount-input.tier-ogre    { color: #ffd34d; text-shadow: 0 0 10px rgba(255,211,77,0.65); }
.amount-input.tier-warlord { color: #ff5c00; text-shadow: 0 0 11px rgba(255,92,0,0.7); }

.amount-input-wrap { transition: border-color .28s ease, box-shadow .28s ease; }
.amount-input-wrap.tier-imp     { border-color: #94a3b8; }
.amount-input-wrap.tier-goblin  { border-color: #00ff66; }
.amount-input-wrap.tier-ogre    { border-color: #ffd34d; }
.amount-input-wrap.tier-warlord { border-color: #ff5c00; }
.amount-input-wrap.tier-imp:focus-within     { box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 0 16px rgba(148,163,184,0.5); }
.amount-input-wrap.tier-goblin:focus-within  { box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 0 18px rgba(0,255,102,0.55); }
.amount-input-wrap.tier-ogre:focus-within    { box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 0 18px rgba(255,211,77,0.55); }
.amount-input-wrap.tier-warlord:focus-within { box-shadow: 0 0 0 1px rgba(0,0,0,.9), 0 0 20px rgba(255,92,0,0.6); }

.amount-suffix {
    align-self: center;
    padding-right: .9rem;
    color: var(--ink-dim);
    font-size: .85rem;
    letter-spacing: 2px;
}

.quick-row {
    display: flex;
    gap: .4rem;
    margin: .55rem 0;
    flex-wrap: wrap;
}
.chip {
    background: transparent;
    border: 1px solid var(--green-soft);
    color: var(--ink-dim);
    font-family: var(--mono);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: 1.5px;
    padding: .35rem .65rem;
    cursor: pointer;
    transition: background .15s ease, color .15s ease, border-color .15s ease, text-shadow .15s ease;
}
.chip:hover {
    color: var(--green);
    border-color: var(--green);
    background: var(--green-faint);
    text-shadow: 0 0 6px var(--green-glow);
}

.min-note {
    color: var(--ink-dim);
    font-size: .82rem;
    margin-top: .35rem;
    margin-bottom: .9rem;
    letter-spacing: 1px;
}
.min-note b { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }

/* =========================================================
   TIER HOTKEYS — burn the exact threshold for an NFT tier
   ========================================================= */
.tier-hk-label {
    margin: .4rem 0 .45rem;
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: 1.5px;
}
.tier-hk-label small {
    margin-left: .3rem;
    color: var(--ink-faint);
    font-size: .68rem;
    letter-spacing: 1px;
    text-transform: uppercase;
}

.tier-hotkeys {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: .45rem;
    margin: 0 0 .9rem;
}
@media (max-width: 560px) {
    .tier-hotkeys { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.tier-hk {
    --hk-c: #94a3b8;
    --hk-g: rgba(148, 163, 184, 0.45);
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: .55rem;
    padding: .45rem .55rem;
    background: var(--bg-2);
    border: 1px solid var(--hk-c);
    color: var(--hk-c);
    font-family: var(--mono);
    cursor: pointer;
    text-align: left;
    transition: background .15s ease, transform .12s ease, box-shadow .25s ease;
    text-shadow: 0 0 5px var(--hk-g);
    position: relative;
}
.tier-hk[data-tier="imp"]     { --hk-c: #94a3b8; --hk-g: rgba(148, 163, 184, 0.45); }
.tier-hk[data-tier="goblin"]  { --hk-c: #00ff66; --hk-g: rgba(0,   255, 102, 0.55); }
.tier-hk[data-tier="ogre"]    { --hk-c: #ffd34d; --hk-g: rgba(255, 211,  77, 0.55); }
.tier-hk[data-tier="warlord"] { --hk-c: #ff5c00; --hk-g: rgba(255,  92,   0, 0.60); }

.tier-hk img {
    width: 32px; height: 32px;
    object-fit: cover;
    border: 1px solid var(--hk-c);
    box-shadow: 0 0 10px var(--hk-g);
    display: block;
    image-rendering: auto;
}

.tier-hk-body {
    display: flex; flex-direction: column;
    line-height: 1.18;
    min-width: 0;
}
.tier-hk-name {
    font-weight: 700;
    font-size: .8rem;
    letter-spacing: 2px;
}
.tier-hk-amount {
    color: var(--ink-dim);
    font-size: .7rem;
    letter-spacing: 1px;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.tier-hk-key {
    display: inline-grid;
    place-items: center;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    border: 1px solid var(--ink-faint);
    color: var(--ink-dim);
    background: var(--bg);
    font-family: var(--mono);
    font-size: .68rem;
    line-height: 1;
    text-shadow: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .2s ease;
}

.tier-hk:hover,
.tier-hk:focus-visible {
    background: var(--bg);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 18px var(--hk-g);
    transform: translateY(-1px);
    outline: none;
}
.tier-hk:hover .tier-hk-key,
.tier-hk:focus-visible .tier-hk-key {
    border-color: var(--hk-c);
    color: var(--hk-c);
    box-shadow: 0 0 6px var(--hk-g);
}
.tier-hk:active { transform: translateY(0); }

/* "current tier" highlight — when amount in input matches this tier */
.tier-hk.is-active {
    background: var(--bg);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 22px var(--hk-g);
}
.tier-hk.is-active .tier-hk-key {
    background: var(--hk-c);
    color: var(--bg);
    border-color: var(--hk-c);
    box-shadow: 0 0 10px var(--hk-g);
}
.tier-hk.is-active .tier-hk-amount {
    color: var(--hk-c);
    text-shadow: 0 0 5px var(--hk-g);
}

/* tiny keyboard-press feedback (added briefly via JS on hotkey trigger) */
.tier-hk.pressed {
    transform: translateY(0) scale(.97);
}

.btn-block { width: 100%; justify-content: center; }
.btn-burn {
    margin-top: .35rem;
    background: var(--ember);
    border-color: var(--ember);
    color: var(--bg);
    box-shadow: 0 0 18px rgba(255, 92, 0, 0.4);
}
.btn-burn:hover {
    background: #ff7a2e;
    border-color: #ff7a2e;
    box-shadow: 0 0 26px rgba(255, 92, 0, 0.6);
}
.btn-burn:disabled {
    background: rgba(255, 92, 0, 0.18);
    border-color: rgba(255, 92, 0, 0.4);
    color: rgba(255, 255, 255, 0.4);
    box-shadow: none;
    cursor: not-allowed;
}

.status-log {
    margin-top: 1rem;
    padding: .7rem .85rem;
    background: var(--bg-2);
    border: 1px dashed var(--green-soft);
    color: var(--green);
    font-family: var(--mono);
    font-size: .82rem;
    line-height: 1.65;
    min-height: 5.5rem;
    max-height: 12rem;
    overflow: auto;
    text-shadow: 0 0 6px var(--green-glow);
    white-space: pre-wrap;
    word-break: break-all;
}
.status-log .err  { color: var(--ember); text-shadow: 0 0 6px var(--ember); }
.status-log .ok   { color: var(--green); }
.status-log .hash { color: var(--acid);  text-shadow: 0 0 6px rgba(179, 255, 0, 0.5); }

.link-mini {
    background: transparent;
    border: none;
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: 1px;
    cursor: pointer;
    padding: 0;
    transition: color .15s ease, text-shadow .15s ease;
}
.link-mini:hover {
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
}

/* =========================================================
   REWARDS PANEL (right)
   ========================================================= */
.panel-rewards { padding: 0; }
.panel-rewards .rewards-list,
.panel-rewards .rewards-total,
.panel-rewards .rewards-note,
.panel-rewards .my-position { margin: 0 1.2rem; }
.panel-rewards .rewards-list { margin-top: 1.1rem; }

.rewards-list {
    list-style: none;
    display: grid;
    gap: .35rem;
}
.rewards-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .55rem .8rem;
    background: rgba(0, 255, 102, 0.04);
    border: 1px dashed var(--green-soft);
    font-family: var(--mono);
    font-size: .9rem;
}
.rank {
    color: var(--ink-dim);
    font-weight: 700;
    letter-spacing: 1.5px;
}
.rank-gold   { color: #ffd34d; text-shadow: 0 0 8px rgba(255, 211, 77, 0.5); }
.rank-silver { color: #d8e6ff; text-shadow: 0 0 6px rgba(216, 230, 255, 0.4); }
.rank-bronze { color: #ffb077; text-shadow: 0 0 6px rgba(255, 176, 119, 0.4); }
.reward {
    color: var(--green);
    font-weight: 700;
    text-shadow: 0 0 6px var(--green-glow);
}

.rewards-total {
    margin-top: .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: .6rem .8rem;
    border: 1px solid var(--green);
    color: var(--ink);
    background: var(--green-faint);
    font-family: var(--mono);
    font-size: .9rem;
}
.rewards-total b {
    color: var(--green);
    font-weight: 700;
    text-shadow: 0 0 6px var(--green-glow);
}
.rewards-total b small {
    margin-left: .35rem;
    color: var(--ink-dim);
    font-weight: 400;
    font-size: .72rem;
    letter-spacing: 1.5px;
    text-shadow: none;
    text-transform: uppercase;
}

.rewards-note {
    margin-top: .7rem;
    margin-bottom: 1.1rem;
    color: var(--ink-dim);
    font-size: .78rem;
    line-height: 1.55;
}

.my-position {
    margin-bottom: 1.1rem;
    padding: .9rem 1rem;
    background: var(--bg-2);
    border: 1px dashed var(--green);
    display: grid;
    gap: .25rem;
}
.my-head {
    color: var(--green);
    font-weight: 700;
    font-size: .82rem;
    letter-spacing: 2px;
    text-shadow: 0 0 6px var(--green-glow);
    border-bottom: 1px dashed var(--green-soft);
    padding-bottom: .35rem;
    margin-bottom: .3rem;
}
.my-row {
    display: flex;
    justify-content: space-between;
    color: var(--ink-dim);
    font-size: .86rem;
}
.my-row b {
    color: var(--green);
    font-weight: 700;
    text-shadow: 0 0 6px var(--green-glow);
}

/* =========================================================
   LEADERBOARD
   ========================================================= */
.lb-section { margin-bottom: 2.6rem; }

.lb-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}
.lb-head .section-title { text-align: left; }

.lb-meta {
    display: grid;
    gap: .15rem;
    color: var(--ink-dim);
    font-size: .82rem;
    text-align: right;
    font-family: var(--mono);
}
.lb-meta b { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }
.lb-meta-row { display: block; }

.lb-wrap {
    background: var(--panel);
    border: 1px solid var(--green);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 24px rgba(0, 255, 102, 0.15);
    overflow-x: auto;
    overflow-y: auto;
    max-height: 720px;
}

/* sticky header for long lists */
.lb-table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
}

.lb-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--mono);
    font-size: .92rem;
    min-width: 640px;
}
.lb-table thead th {
    background: rgba(0, 255, 102, 0.06);
    color: var(--green);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: 2.5px;
    text-align: left;
    padding: .7rem .9rem;
    border-bottom: 1px solid var(--green);
    text-shadow: 0 0 6px var(--green-glow);
}
.lb-table tbody td {
    padding: .7rem .9rem;
    border-bottom: 1px dashed var(--green-soft);
    color: var(--ink);
}
.lb-table tbody tr:hover td {
    background: rgba(0, 255, 102, 0.06);
}
.lb-table tbody tr.lb-empty td {
    text-align: center;
    color: var(--ink-dim);
    padding: 1.5rem .9rem;
}
.lb-table tbody tr.lb-mine td {
    background: rgba(255, 92, 0, 0.10);
    color: var(--ember);
    text-shadow: 0 0 6px rgba(255, 92, 0, 0.4);
}
.lb-table tbody tr.lb-mine td b { color: var(--ember); }

.lb-col-rank   { width: 80px; }
.lb-col-burned { text-align: right; }
.lb-col-tier   { width: 100px; }
.lb-col-reward { text-align: right; width: 140px; color: var(--green); }

.lb-rank {
    font-family: var(--pixel);
    font-size: 1.2rem;
    color: var(--ink-dim);
    letter-spacing: 1px;
}
.lb-rank.r-1 { color: #ffd34d; text-shadow: 0 0 10px rgba(255, 211, 77, 0.5); }
.lb-rank.r-2 { color: #d8e6ff; text-shadow: 0 0 8px rgba(216, 230, 255, 0.4); }
.lb-rank.r-3 { color: #ffb077; text-shadow: 0 0 8px rgba(255, 176, 119, 0.4); }

.lb-wallet {
    color: var(--green);
    text-shadow: 0 0 6px var(--green-glow);
}
.lb-wallet:hover { color: var(--acid); }
.lb-wallet small {
    margin-left: .3rem;
    color: var(--ink-faint);
    font-size: .72rem;
    letter-spacing: 1px;
}

.lb-burned   { color: var(--green); font-weight: 700; text-shadow: 0 0 6px var(--green-glow); text-align: right; }
.lb-tier     { font-size: .78rem; letter-spacing: 2px; }
.lb-tier-imp     { color: #94a3b8; }
.lb-tier-goblin  { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }
.lb-tier-ogre    { color: #ffd34d; text-shadow: 0 0 6px rgba(255, 211, 77, 0.4); }
.lb-tier-warlord { color: var(--ember); text-shadow: 0 0 6px var(--ember); }
.lb-reward { text-align: right; color: var(--green); font-weight: 700; text-shadow: 0 0 6px var(--green-glow); }

.lb-foot {
    margin-top: .8rem;
    color: var(--ink-dim);
    font-size: .8rem;
    letter-spacing: 1px;
    text-align: center;
}

/* =========================================================
   RECENT BURNS LOG
   ========================================================= */
.recent-section { margin-bottom: 1.6rem; }
.recent-head { text-align: left; margin-bottom: .8rem; }
.recent-head .section-title { text-align: left; }

.recent-log {
    background: var(--panel);
    border: 1px solid var(--green);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 22px rgba(0, 255, 102, 0.15);
    padding: 1rem 1.2rem;
    color: var(--ink);
    font-family: var(--mono);
    font-size: .85rem;
    line-height: 1.7;
    min-height: 8rem;
    max-height: 22rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}
.recent-log .ts     { color: var(--ink-faint); }
.recent-log .who    { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }
.recent-log .amount { color: var(--ember);  text-shadow: 0 0 6px var(--ember); font-weight: 700; }
.recent-log .sig    { color: var(--ink-dim); }
.recent-log .sig:hover { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }

/* =========================================================
   CLAIM SOULBOUND NFT SECTION
   ========================================================= */
.claim-section {
    margin: 2.2rem 0 2rem;
    animation: claimSectionIn .55s cubic-bezier(.22,.9,.25,1);
}
@keyframes claimSectionIn {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

.claim-head {
    text-align: left;
    margin-bottom: 1rem;
}
.claim-head .section-title { text-align: left; }
.claim-head .kicker { color: var(--ink-dim); }
#claimTierKey { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }

/* tier-tinted accent for the entire stage */
.claim-stage {
    --c-accent:      var(--green);
    --c-accent-glow: var(--green-glow);
    --c-accent-faint: rgba(0, 255, 102, 0.08);

    position: relative;
    background: var(--panel);
    border: 1px solid var(--c-accent);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 26px var(--c-accent-glow);
    padding: 1.6rem;
    overflow: hidden;
    transition: border-color .35s ease, box-shadow .35s ease;
}
.claim-stage[data-tier="imp"]     { --c-accent: #94a3b8; --c-accent-glow: rgba(148,163,184,0.45); --c-accent-faint: rgba(148,163,184,0.08); }
.claim-stage[data-tier="goblin"]  { --c-accent: #00ff66; --c-accent-glow: rgba(0,255,102,0.55);   --c-accent-faint: rgba(0,255,102,0.08); }
.claim-stage[data-tier="ogre"]    { --c-accent: #ffd34d; --c-accent-glow: rgba(255,211,77,0.55);  --c-accent-faint: rgba(255,211,77,0.08); }
.claim-stage[data-tier="warlord"] { --c-accent: #ff5c00; --c-accent-glow: rgba(255,92,0,0.6);     --c-accent-faint: rgba(255,92,0,0.10); }

/* state machine: show one state at a time */
.claim-state { display: none; }
.claim-stage[data-state="ready"]    .claim-state-ready    { display: grid; }
.claim-stage[data-state="minting"]  .claim-state-minting  { display: block; }
.claim-stage[data-state="revealed"] .claim-state-revealed { display: grid; }

/* shared two-column layout for ready + revealed states */
.claim-state-ready,
.claim-state-revealed {
    grid-template-columns: minmax(0, 280px) minmax(0, 1fr);
    gap: 1.6rem;
    align-items: center;
}
@media (max-width: 720px) {
    .claim-state-ready,
    .claim-state-revealed { grid-template-columns: 1fr; }
}

/* ─── PREVIEW (unrevealed) ─── */
.claim-preview { text-align: center; }
.claim-preview-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    background:
        repeating-linear-gradient(
            45deg,
            rgba(0, 0, 0, 0.4) 0,
            rgba(0, 0, 0, 0.4) 6px,
            var(--bg) 6px,
            var(--bg) 12px
        );
    border: 1px solid var(--c-accent);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 0 24px var(--c-accent-glow);
    display: grid;
    place-items: center;
    overflow: hidden;
}
.claim-preview-glyph {
    position: relative;
    width: 64px; height: 64px;
    font-family: var(--mono);
    font-size: 2.6rem;
    font-weight: 700;
    color: var(--c-accent);
    text-shadow: 0 0 14px var(--c-accent-glow);
    display: grid; place-items: center;
}
.claim-preview-glyph span {
    position: absolute;
    inset: 0;
    display: grid; place-items: center;
    opacity: 0;
    animation: glyphCycle 1.6s steps(1) infinite;
}
.claim-preview-glyph .g0 { animation-delay: 0s;    }
.claim-preview-glyph .g1 { animation-delay: .4s;   }
.claim-preview-glyph .g2 { animation-delay: .8s;   }
.claim-preview-glyph .g3 { animation-delay: 1.2s;  }
@keyframes glyphCycle {
    0%, 24%  { opacity: 1; }
    25%, 100% { opacity: 0; }
}

.claim-preview-scan {
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 3px,
        rgba(0, 0, 0, 0.25) 4px,
        rgba(0, 0, 0, 0.25) 5px
    );
    mix-blend-mode: multiply;
    pointer-events: none;
}
.claim-preview-corner {
    position: absolute;
    color: var(--c-accent);
    font-family: var(--mono);
    text-shadow: 0 0 6px var(--c-accent-glow);
    font-size: 1.1rem;
    line-height: 1;
}
.claim-preview-corner.tl { top: 6px;    left: 6px;    }
.claim-preview-corner.tr { top: 6px;    right: 6px;   }
.claim-preview-corner.bl { bottom: 6px; left: 6px;    }
.claim-preview-corner.br { bottom: 6px; right: 6px;   }
.claim-preview-caption {
    margin-top: .6rem;
    color: var(--ink-dim);
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: 2px;
}

/* ─── INFO column (shared) ─── */
.claim-info { display: flex; flex-direction: column; gap: .55rem; }
.claim-info .claim-kicker {
    color: var(--c-accent);
    font-family: var(--mono);
    font-size: .8rem;
    letter-spacing: 3px;
    text-shadow: 0 0 6px var(--c-accent-glow);
    margin: 0;
}
.claim-info .claim-title {
    font-family: var(--mono);
    font-weight: 700;
    color: var(--c-accent);
    letter-spacing: 4px;
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    text-transform: uppercase;
    text-shadow: 0 0 14px var(--c-accent-glow);
    margin: 0 0 .25rem;
}
.claim-info .claim-desc {
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.6;
    margin: 0;
}
.claim-info .claim-desc b { color: var(--c-accent); text-shadow: 0 0 6px var(--c-accent-glow); }
.claim-info code {
    background: var(--bg);
    border: 1px solid var(--ink-faint);
    padding: 1px 6px;
    color: var(--c-accent);
    font-family: var(--mono);
    font-size: .82rem;
    letter-spacing: 1px;
}
.claim-meta {
    list-style: none;
    padding: .6rem .85rem;
    margin: .4rem 0 .9rem;
    background: var(--c-accent-faint);
    border: 1px dashed var(--c-accent);
    color: var(--ink);
    font-family: var(--mono);
    font-size: .85rem;
    letter-spacing: 1px;
    display: flex; flex-direction: column; gap: .25rem;
}
.claim-meta b { color: var(--c-accent); text-shadow: 0 0 4px var(--c-accent-glow); }
.claim-meta small { color: var(--ink-faint); font-size: .72rem; margin-left: .25rem; }

.tier-badge {
    display: inline-block;
    padding: 1px 8px;
    border: 1px solid currentColor;
    letter-spacing: 2px;
    font-size: .8rem;
}
.tier-badge.tier-imp     { color: #94a3b8; }
.tier-badge.tier-goblin  { color: var(--green); text-shadow: 0 0 6px var(--green-glow); }
.tier-badge.tier-ogre    { color: #ffd34d; text-shadow: 0 0 6px rgba(255,211,77,0.5); }
.tier-badge.tier-warlord { color: var(--ember); text-shadow: 0 0 6px var(--ember); }

/* claim button — uses tier accent */
.btn-claim {
    background: var(--c-accent) !important;
    color: var(--bg) !important;
    border-color: var(--c-accent) !important;
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 22px var(--c-accent-glow) !important;
    text-shadow: none !important;
}
.btn-claim:hover {
    filter: brightness(1.18);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 30px var(--c-accent-glow) !important;
}

.claim-skip { margin: 0; text-align: center; }

/* ─── MINTING STATE ─── */
.claim-state-minting {
    padding: 2rem 1rem 1.4rem;
}
.claim-minting-wrap {
    max-width: 620px;
    margin: 0 auto;
    text-align: center;
}
.claim-glyph {
    font-family: var(--mono);
    font-size: 1.05rem;
    color: var(--c-accent);
    text-shadow: 0 0 8px var(--c-accent-glow);
    letter-spacing: 3px;
    text-transform: lowercase;
    margin: 0 0 1rem;
}
.claim-glyph .glyph-prefix { margin-right: .35rem; color: var(--ink-dim); }
.claim-glyph .glyph-dots   {
    display: inline-flex; gap: 3px;
    margin-left: 4px;
}
.claim-glyph .glyph-dots i {
    width: 6px; height: 6px;
    background: var(--c-accent);
    box-shadow: 0 0 6px var(--c-accent-glow);
    opacity: 0;
    animation: dotPulse 1.1s ease-in-out infinite;
}
.claim-glyph .glyph-dots i:nth-child(2) { animation-delay: .15s; }
.claim-glyph .glyph-dots i:nth-child(3) { animation-delay: .30s; }
@keyframes dotPulse {
    0%, 100% { opacity: .1; transform: translateY(0); }
    50%      { opacity: 1;  transform: translateY(-3px); }
}

.claim-bar {
    height: 14px;
    border: 1px solid var(--c-accent);
    background: var(--bg);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .9), 0 0 18px var(--c-accent-glow);
    margin: 0 auto 1rem;
    max-width: 480px;
    position: relative;
    overflow: hidden;
}
.claim-bar-fill {
    height: 100%;
    width: 0%;
    background: var(--c-accent);
    box-shadow: 0 0 12px var(--c-accent-glow);
    position: relative;
}
.claim-bar-fill::after {
    content: "";
    position: absolute; inset: 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.45) 50%,
        transparent 100%
    );
    animation: barSheen 1.4s linear infinite;
}
@keyframes barSheen {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%); }
}

.claim-mint-log {
    text-align: left;
    background: var(--bg);
    border: 1px dashed var(--c-accent);
    color: var(--ink);
    font-family: var(--mono);
    font-size: .82rem;
    line-height: 1.6;
    padding: .8rem 1rem;
    max-height: 11rem;
    min-height: 8rem;
    overflow: auto;
    white-space: pre-wrap;
    word-break: break-all;
}

/* ─── REVEALED STATE ─── */
.claim-state-revealed { animation: revealIn .5s cubic-bezier(.22,.9,.25,1); }
@keyframes revealIn {
    from { opacity: 0; transform: scale(.96); }
    to   { opacity: 1; transform: scale(1);    }
}

.claim-reveal { text-align: center; perspective: 800px; }
.claim-reveal-frame {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid var(--c-accent);
    box-shadow:
        0 0 0 1px rgba(0, 0, 0, .9),
        0 0 32px var(--c-accent-glow),
        0 0 80px var(--c-accent-glow);
    overflow: hidden;
    background: var(--bg-2);
    animation: revealFlip .9s cubic-bezier(.22,.9,.25,1) both;
    transform-origin: center;
}
@keyframes revealFlip {
    0%   { transform: rotateY(180deg); opacity: 0; }
    55%  { opacity: 1; }
    100% { transform: rotateY(0deg);   opacity: 1; }
}
.claim-reveal-frame img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.claim-reveal-shine {
    position: absolute; inset: 0;
    background: linear-gradient(
        125deg,
        transparent 35%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 65%
    );
    transform: translateX(-100%);
    animation: revealShine 1.4s ease-out 1s both;
    pointer-events: none;
}
@keyframes revealShine {
    from { transform: translateX(-100%); }
    to   { transform: translateX(100%);  }
}
.claim-reveal-corner {
    position: absolute;
    color: var(--c-accent);
    font-family: var(--mono);
    text-shadow: 0 0 6px var(--c-accent-glow);
    font-size: 1.1rem;
    line-height: 1;
    z-index: 2;
}
.claim-reveal-corner.tl { top: 6px;    left: 6px;    }
.claim-reveal-corner.tr { top: 6px;    right: 6px;   }
.claim-reveal-corner.bl { bottom: 6px; left: 6px;    }
.claim-reveal-corner.br { bottom: 6px; right: 6px;   }

.claim-reveal-caption {
    margin-top: .6rem;
    color: var(--c-accent);
    font-family: var(--mono);
    font-size: .78rem;
    letter-spacing: 2px;
    text-shadow: 0 0 6px var(--c-accent-glow);
}

.claim-mint-addr {
    word-break: break-all;
    font-size: .75rem !important;
}

.claim-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: .4rem;
}
.claim-actions .btn { padding: .65rem 1rem; }
.claim-actions [aria-disabled="true"] {
    opacity: .5;
    pointer-events: none;
}