/* ═══════════════════════════════════════════════════════════════
   gamification.css — shared styles for Leaderboard / Achievements / Game History
   Place at: wwwroot/css/gamification.css
   ═══════════════════════════════════════════════════════════════ */


/* ── Variables ──────────────────────────────────────────────── */
:root {
    --cyan:         #00f5ff;
    --pink:         #ff0080;
    --gold:         #ffd700;
    --green:        #39ff14;
    --bg:           #06060f;
    --bg-card:      #0b0b1c;
    --bg-card-hover:#101028;
    --border:       rgba(0,245,255,.15);
    --f-display:    'Orbitron', monospace;
    --f-mono:       'Share Tech Mono', monospace;
}

/* ── Page shell ─────────────────────────────────────────────── */
.gf-page {
    background: var(--bg);
    min-height: 100vh;
    font-family: var(--f-mono);
    color: #fff;
    padding-bottom: 80px;
}

/* ── Animations ─────────────────────────────────────────────── */
@keyframes gf-in-left {
    from { opacity:0; transform:translateX(-12px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes gf-in-right {
    from { opacity:0; transform:translateX(12px); }
    to   { opacity:1; transform:translateX(0); }
}
@keyframes gf-up {
    from { opacity:0; transform:translateY(10px); }
    to   { opacity:1; transform:translateY(0); }
}
@keyframes gf-flicker {
    0%,94%,100% { opacity:1; }
    95%  { opacity:.82; }
    97%  { opacity:1; }
    99%  { opacity:.9; }
}

/* ── Section label ──────────────────────────────────────────── */
.gf-label {
    font-family: var(--f-display);
    font-size: .58rem;
    letter-spacing: .26em;
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
.gf-label::after { content:''; flex:1; height:1px; }
.gf-label-cyan {
    color: #000000;
    text-shadow: 0 0 8px rgba(0,245,255,.4);
}
.gf-label-cyan::after  { background:linear-gradient(90deg,rgba(0,245,255,.35),transparent); }
.gf-label-pink  { color:var(--pink);  text-shadow:0 0 8px rgba(255,0,128,.4); }
.gf-label-pink::after  { background:linear-gradient(90deg,rgba(255,0,128,.35),transparent); }
.gf-label-gold  { color:var(--gold);  text-shadow:0 0 8px rgba(255,215,0,.4); }
.gf-label-gold::after  { background:linear-gradient(90deg,rgba(255,215,0,.35),transparent); }
.gf-label-dim   { color:rgba(255,255,255,.28); }
.gf-label-dim::after   { background:linear-gradient(90deg,rgba(255,255,255,.1),transparent); }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.gf-nav {
    max-width: 1240px;
    margin: 0 auto;
    padding: 20px 24px 0;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: .68rem;
    color: rgba(255,255,255,.28);
    flex-wrap: wrap;
}
.gf-nav a { color:var(--cyan); text-decoration:none; letter-spacing:.08em; transition:text-shadow .18s; }
.gf-nav a:hover { text-shadow:0 0 8px var(--cyan); }
.gf-nav-cur { color:#fff; }
.gf-nav-ml  { margin-left:auto; }

/* ── Stat block ─────────────────────────────────────────────── */
.gf-stat { text-align:center; }
.gf-stat-val { font-family:var(--f-display); font-size:1.35rem; font-weight:700; line-height:1; }
.gf-stat-lbl { font-size:.58rem; letter-spacing:.14em; color:rgba(255,255,255,.36); margin-top:4px; }
.gf-stat-cyan  .gf-stat-val { color:var(--cyan);  text-shadow:0 0 12px rgba(0,245,255,.4); }
.gf-stat-pink  .gf-stat-val { color:var(--pink);  text-shadow:0 0 12px rgba(255,0,128,.4); }
.gf-stat-gold  .gf-stat-val { color:var(--gold);  text-shadow:0 0 12px rgba(255,215,0,.4); }
.gf-stat-green .gf-stat-val { color:var(--green); text-shadow:0 0 12px rgba(57,255,20,.4); }

/* ── Platform badge ─────────────────────────────────────────── */
.gf-badge {
    display:inline-block; padding:2px 7px;
    border:1px solid rgba(0,245,255,.22);
    background:rgba(0,245,255,.06);
    color:var(--cyan); font-size:.57rem; letter-spacing:.1em;
}

/* ── Thumbnail ──────────────────────────────────────────────── */
.gf-thumb    { object-fit:cover; border:1px solid rgba(255,255,255,.08); display:block; }
.gf-thumb-ph {
    background:linear-gradient(135deg,#0d0d1e,#181830);
    border:1px solid rgba(255,255,255,.06);
    display:flex; align-items:center; justify-content:center; font-size:1.3rem;
}

/* ── Inner container ────────────────────────────────────────── */
.gf-inner { max-width:1240px; margin:0 auto; padding:0 24px; }


/* ════════════════════════════════════════════════════════════
   LEADERBOARD
   ════════════════════════════════════════════════════════════ */

.lb-hero {
    text-align:center; padding:56px 20px 40px; position:relative;
}
.lb-hero::after {
    content:'';
    position:absolute; bottom:0; left:8%; right:8%;
    height:1px;
    background:linear-gradient(90deg,transparent,var(--cyan),transparent);
}
.lb-title {
    font-family:var(--f-display);
    font-size:clamp(2rem,6vw,4.2rem); font-weight:900; letter-spacing:.14em;
    color:#fff;
    text-shadow:0 0 22px var(--cyan), 0 0 60px rgba(0,245,255,.22);
    margin:0 0 8px;
    animation:gf-flicker 10s infinite;
}
.lb-eyebrow { color:var(--cyan); font-size:.76rem; letter-spacing:.32em; opacity:.58; margin-bottom:6px; }

.lb-tabs {
    display:flex; justify-content:center; gap:8px;
    padding:30px 20px 0; flex-wrap:wrap;
}
.lb-tab {
    font-family:var(--f-display); font-size:.6rem; letter-spacing:.14em;
    padding:9px 20px;
    border:1px solid rgba(0,245,255,.2);
    background:transparent; color:rgba(255,255,255,.38);
    text-decoration:none; transition:all .18s;
    clip-path:polygon(7px 0%,100% 0%,calc(100% - 7px) 100%,0% 100%);
}
.lb-tab:hover, .lb-tab.active {
    border-color:var(--cyan); color:var(--cyan);
    background:rgba(0,245,255,.07); text-shadow:0 0 10px var(--cyan);
}

.lb-grid {
    display:grid; grid-template-columns:1fr 310px;
    gap:24px;
}
@media (max-width:920px) { .lb-grid { grid-template-columns:1fr; } }

.lb-list { display:flex; flex-direction:column; gap:6px; }

.lb-row {
    display:grid;
    grid-template-columns:44px 58px 1fr auto 68px;
    align-items:center; gap:14px; padding:13px 5px;
    background:var(--bg-card);
    border:1px solid rgba(255,255,255,.06);
    position:relative; overflow:hidden;
    transition:all .18s;
    animation:gf-in-left .38s ease both;
}
.lb-row:hover {
    border-color:rgba(0,245,255,.26); background:var(--bg-card-hover); transform:translateX(4px);
}
.lb-row::before {
    content:''; position:absolute; left:0; top:0; bottom:0; width:3px;
    background:var(--cyan); opacity:0; transition:opacity .18s;
}
.lb-row:hover::before          { opacity:1; }
.lb-row[data-rank="1"]         { border-color:rgba(255,215,0,.28); }
.lb-row[data-rank="1"]::before { background:var(--gold); opacity:1; }
.lb-row[data-rank="2"]::before { background:#c0c0c0;     opacity:1; }
.lb-row[data-rank="3"]::before { background:#cd7f32;     opacity:1; }

.lb-rank { font-family:var(--f-display); font-size:1rem; font-weight:900; text-align:center; color:rgba(255,255,255,.2); }
.lb-row[data-rank="1"] .lb-rank { color:var(--gold); text-shadow:0 0 10px var(--gold); font-size:1.2rem; }
.lb-row[data-rank="2"] .lb-rank { color:#c0c0c0; }
.lb-row[data-rank="3"] .lb-rank { color:#cd7f32; }

.lb-game-name {
    color:#fff; font-size:.88rem; font-weight:600;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px;
}
.lb-game-meta { display:flex; gap:10px; flex-wrap:wrap; font-size:.67rem; color:rgba(255,255,255,.34); align-items:center; }

.lb-stat-r { text-align:right; }
.lb-stat-r .val { font-family:var(--f-display); font-size:.82rem; color:var(--cyan); text-shadow:0 0 6px rgba(0,245,255,.38); }
.lb-stat-r .lbl { font-size:.56rem; color:rgba(255,255,255,.24); letter-spacing:.1em; }

.lb-trend { font-family:var(--f-display); font-size:.7rem; color:var(--green); text-shadow:0 0 6px rgba(57,255,20,.32); text-align:right; }

/* Player sidebar */
.lb-players { display:flex; flex-direction:column; gap:5px; }
.lb-player {
    display:grid; grid-template-columns:26px 1fr auto;
    align-items:center; gap:10px; padding:10px 14px;
    background:var(--bg-card); border:1px solid rgba(255,255,255,.06);
    text-decoration:none; transition:all .18s;
    animation:gf-in-right .38s ease both;
}
.lb-player:hover { border-color:rgba(255,0,128,.26); background:var(--bg-card-hover); transform:translateX(-3px); }
.lb-player-pos { font-family:var(--f-display); font-size:.7rem; color:rgba(255,255,255,.24); text-align:center; }
.lb-player-pos.p1 { color:var(--gold); text-shadow:0 0 8px var(--gold); }
.lb-player-pos.p2 { color:#c0c0c0; }
.lb-player-pos.p3 { color:#cd7f32; }
.lb-player-name  { color:#fff; font-size:.8rem; margin-bottom:2px; }
.lb-player-badge { font-size:.62rem; letter-spacing:.06em; }
.lb-player-time  { font-family:var(--f-display); font-size:.68rem; color:var(--pink); text-shadow:0 0 6px rgba(255,0,128,.28); white-space:nowrap; }

.lb-qlink {
    display:block; padding:11px 16px; border:1px solid;
    text-decoration:none; font-size:.7rem; letter-spacing:.1em;
    transition:background .18s; margin-bottom:7px;
}
.lb-qlink-pink { color:var(--pink); border-color:rgba(255,0,128,.24); }
.lb-qlink-pink:hover { background:rgba(255,0,128,.07); }
.lb-qlink-cyan { color:var(--cyan); border-color:rgba(0,245,255,.24); }
.lb-qlink-cyan:hover { background:rgba(0,245,255,.07); }


/* ════════════════════════════════════════════════════════════
   ACHIEVEMENTS
   ════════════════════════════════════════════════════════════ */

.ach-hero {
    background:linear-gradient(180deg,#09092a 0%,var(--bg) 100%);
    padding:50px 24px 40px; text-align:center;
    border-bottom:1px solid rgba(0,245,255,.1);
}
.ach-avatar {
    width:76px; height:76px; border-radius:50%;
    border:2px solid var(--cyan);
    box-shadow:0 0 20px rgba(0,245,255,.28),0 0 50px rgba(0,245,255,.08);
    margin:0 auto 14px;
    display:flex; align-items:center; justify-content:center;
    font-size:1.9rem; background:var(--bg-card);
}
.ach-username { font-family:var(--f-display); font-size:1.5rem; font-weight:900; letter-spacing:.1em; margin-bottom:6px; }
.ach-rank-tag { display:inline-block; padding:3px 14px; border:1px solid; font-size:.6rem; letter-spacing:.17em; margin-bottom:22px; }
.ach-stats    { display:flex; justify-content:center; gap:38px; flex-wrap:wrap; }

.ach-progress-wrap { max-width:540px; margin:22px auto 0; }
.ach-progress-hd {
    display:flex; justify-content:space-between;
    font-size:.6rem; color:rgba(255,255,255,.32); letter-spacing:.1em; margin-bottom:6px;
}
.ach-bar      { height:5px; background:rgba(255,255,255,.07); overflow:hidden; }
.ach-bar-fill { height:100%; background:linear-gradient(90deg,var(--cyan),var(--pink)); box-shadow:0 0 8px var(--cyan); transition:width 1.2s ease; }

.ach-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(205px,1fr)); gap:10px; }

.ach-card { padding:20px 16px; position:relative; overflow:hidden; transition:all .22s; animation:gf-up .42s ease both; }
.ach-card.unlocked {
    background:linear-gradient(135deg,#0a0a1c,#13110a);
    border:1px solid rgba(255,215,0,.26);
}
.ach-card.unlocked:hover { border-color:var(--gold); transform:translateY(-3px); box-shadow:0 8px 28px rgba(255,215,0,.1); }
.ach-card.locked { background:var(--bg-card); border:1px solid rgba(255,255,255,.05); filter:saturate(.1) brightness(.5); }
.ach-card.locked:hover { filter:saturate(.2) brightness(.65); }

.ach-glow {
    position:absolute; top:-20px; right:-20px; width:80px; height:80px; border-radius:50%;
    background:radial-gradient(circle,var(--gold),transparent); opacity:.17; pointer-events:none;
}
.ach-icon { font-size:2.1rem; display:block; margin-bottom:10px; filter:drop-shadow(0 0 6px currentColor); }
.ach-name { font-family:var(--f-display); font-size:.66rem; font-weight:700; letter-spacing:.07em; color:#fff; margin-bottom:6px; }
.ach-desc { font-size:.66rem; color:rgba(255,255,255,.38); line-height:1.55; margin-bottom:10px; }
.ach-date { font-size:.58rem; letter-spacing:.07em; padding:3px 8px; border:1px solid rgba(255,215,0,.24); color:var(--gold); display:inline-block; }
.ach-hint { font-size:.61rem; color:rgba(255,255,255,.2); }


/* ════════════════════════════════════════════════════════════
   GAME HISTORY
   ════════════════════════════════════════════════════════════ */

.gh-hero {
    background:linear-gradient(180deg,#080820 0%,var(--bg) 100%);
    padding:48px 24px 36px;
    border-bottom:1px solid rgba(0,245,255,.1);
    position:relative; overflow:hidden;
}
.gh-hero::after {
    content:'GAME HISTORY';
    position:absolute; right:-8px; bottom:-18px;
    font-family:var(--f-display); font-size:6rem; font-weight:900;
    color:rgba(255,255,255,.02); pointer-events:none; white-space:nowrap;
}
.gh-hero-inner {
    max-width:1240px; margin:0 auto;
    display:flex; justify-content:space-between; align-items:flex-end; flex-wrap:wrap; gap:20px;
}
.gh-eyebrow  { font-size:.6rem; letter-spacing:.25em; color:var(--cyan); opacity:.58; margin-bottom:5px; }
.gh-username { font-family:var(--f-display); font-size:1.9rem; font-weight:900; letter-spacing:.08em; text-shadow:0 0 28px rgba(0,245,255,.15); margin-bottom:6px; }
.gh-rank-tag { display:inline-block; padding:3px 12px; border:1px solid; font-size:.58rem; letter-spacing:.13em; }
.gh-hero-stats { display:flex; gap:30px; flex-wrap:wrap; text-align:right; }

.gh-list { display:flex; flex-direction:column; gap:6px; }

.gh-row {
    display:grid; grid-template-columns:32px 72px 1fr auto 130px;
    align-items:center; gap:16px; padding:13px 18px;
    background:var(--bg-card); border:1px solid rgba(255,255,255,.06);
    position:relative; overflow:hidden;
    transition:all .18s; animation:gf-in-left .36s ease both;
}
.gh-row:hover { border-color:rgba(0,245,255,.24); background:var(--bg-card-hover); transform:translateX(4px); }
.gh-row::before {
    content:''; position:absolute; left:0; bottom:0;
    height:2px; width:var(--bar,0%);
    background:linear-gradient(90deg,var(--cyan),transparent); opacity:.28;
}
.gh-row.fav { border-color:rgba(255,215,0,.16); }
.gh-row.fav::after {
    content:'FAV'; position:absolute; right:8px; top:4px;
    font-family:var(--f-display); font-size:.48rem; color:var(--gold); letter-spacing:.1em; opacity:.52;
}

.gh-pos { font-family:var(--f-display); font-size:.7rem; color:rgba(255,255,255,.2); text-align:center; }
.gh-row.fav .gh-pos { color:var(--gold); }

.gh-info   { min-width:0; }
.gh-name   { color:#fff; font-size:.88rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-bottom:4px; }
.gh-meta   { display:flex; gap:10px; font-size:.66rem; color:rgba(255,255,255,.3); flex-wrap:wrap; align-items:center; }

.gh-sessions { text-align:center; }
.gh-ses-val  { font-family:var(--f-display); font-size:.88rem; color:var(--pink); text-shadow:0 0 6px rgba(255,0,128,.28); }
.gh-ses-lbl  { font-size:.56rem; color:rgba(255,255,255,.24); letter-spacing:.08em; }

.gh-time      { text-align:right; }
.gh-time-val  { font-family:var(--f-display); font-size:.98rem; font-weight:700; color:var(--cyan); text-shadow:0 0 8px rgba(0,245,255,.32); }
.gh-time-last { font-size:.58rem; color:rgba(255,255,255,.24); margin-top:2px; }

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width:680px) {
    .gh-row      { grid-template-columns:28px 56px 1fr 90px; }
    .gh-sessions { display:none; }
    .lb-row      { grid-template-columns:15px 50px 1fr auto; gap : 10px }
    .lb-trend    { display:none; }
    .lb-grid{
        display:block;
    }
    .lb-rank {
        font-size: xx-small;
    }
}
/* ═══════════════════════════════════════════════════════════════
   gift-codes.css — Gift Code page styles
   Requires: gamification/_base vars already defined via gf-page
   ═══════════════════════════════════════════════════════════════ */

/* ── Hero ───────────────────────────────────────────────────── */
.gc-hero {
    background: linear-gradient(180deg, #0a1a0a 0%, var(--bg) 100%);
    padding: 48px 24px 36px;
    border-bottom: 1px solid rgba(57,255,20,.1);
    position: relative;
    overflow: hidden;
}

    .gc-hero::after {
        content: 'GIFT CODES';
        position: absolute;
        right: -8px;
        bottom: -16px;
        font-family: var(--f-display);
        font-size: 6rem;
        font-weight: 900;
        color: rgba(255,255,255,.022);
        pointer-events: none;
        white-space: nowrap;
    }

.gc-hero-inner {
    max-width: 1240px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-wrap: wrap;
    gap: 20px;
}

.gc-eyebrow {
    font-size: .6rem;
    letter-spacing: .25em;
    color: var(--green);
    opacity: .65;
    margin-bottom: 5px;
}

.gc-title {
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 900;
    letter-spacing: .08em;
    margin-bottom: 6px;
    text-shadow: 0 0 28px rgba(57,255,20,.2);
}

.gc-hero-stats {
    display: flex;
    gap: 28px;
    flex-wrap: wrap;
    text-align: right;
}

/* ── Alert banners ──────────────────────────────────────────── */
.gc-alert {
    max-width: 1240px;
    margin: 16px auto 0;
    padding: 0 24px;
}

.gc-alert-box {
    padding: 12px 18px;
    border: 1px solid;
    font-size: .78rem;
    letter-spacing: .06em;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .gc-alert-box.success {
        border-color: rgba(57,255,20,.35);
        color: var(--green);
        background: rgba(57,255,20,.06);
    }

    .gc-alert-box.error {
        border-color: rgba(255,0,128,.35);
        color: var(--pink);
        background: rgba(255,0,128,.06);
    }

/* ── Main layout ────────────────────────────────────────────── */
.gc-grid {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    margin-top: 32px;
}

@media (max-width: 960px) {
    .gc-grid {
        grid-template-columns: 1fr;
    }
}

/* ── My codes list ──────────────────────────────────────────── */
.gc-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gc-row {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    align-items: center;
    gap: 16px;
    padding: 14px 18px;
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.06);
    position: relative;
    overflow: hidden;
    transition: all .18s;
    animation: gf-in-left .36s ease both;
}

    .gc-row:hover {
        border-color: rgba(57,255,20,.2);
        background: var(--bg-card-hover);
    }

    .gc-row.used {
        filter: saturate(.2) brightness(.55);
    }

    .gc-row.expired {
        border-color: rgba(255,0,128,.15);
    }

    /* left accent */
    .gc-row::before {
        content: '';
        position: absolute;
        left: 0;
        top: 0;
        bottom: 0;
        width: 3px;
        background: var(--green);
        opacity: 0;
        transition: opacity .18s;
    }

    .gc-row:hover::before {
        opacity: 1;
    }

    .gc-row.used::before {
        background: rgba(255,255,255,.2);
        opacity: 1;
    }

    .gc-row.expired::before {
        background: var(--pink);
        opacity: 1;
    }

.gc-code-val {
    font-family: var(--f-display);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: .2em;
    color: var(--green);
    text-shadow: 0 0 10px rgba(57,255,20,.35);
    margin-bottom: 4px;
    cursor: pointer;
    user-select: all;
}

.gc-row.used .gc-code-val {
    color: rgba(255,255,255,.3);
    text-shadow: none;
}

.gc-row.expired .gc-code-val {
    color: var(--pink);
    text-shadow: none;
}

.gc-code-meta {
    font-size: .65rem;
    color: white;
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.gc-status {
    font-family: var(--f-display);
    font-size: .58rem;
    letter-spacing: .1em;
    padding: 4px 10px;
    border: 1px solid;
    white-space: nowrap;
}

    .gc-status.available {
        color: var(--green);
        border-color: rgba(57,255,20,.3);
        background: rgba(57,255,20,.06);
    }

    .gc-status.used {
        color: rgba(255,255,255,.3);
        border-color: rgba(255,255,255,.1);
    }

    .gc-status.expired {
        color: var(--pink);
        border-color: rgba(255,0,128,.3);
        background: rgba(255,0,128,.06);
    }

/* copy button */
.gc-copy-btn {
    font-family: var(--f-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    padding: 6px 12px;
    border: 1px solid rgba(0,245,255,.25);
    background: transparent;
    color: var(--cyan);
    cursor: pointer;
    transition: all .18s;
    white-space: nowrap;
}

    .gc-copy-btn:hover {
        background: rgba(0,245,255,.08);
        border-color: var(--cyan);
    }

    .gc-copy-btn.copied {
        color: var(--green);
        border-color: rgba(57,255,20,.35);
    }

/* delete button */
.gc-del-btn {
    font-family: var(--f-mono);
    font-size: .65rem;
    letter-spacing: .08em;
    padding: 6px 10px;
    border: 1px solid rgba(255,0,128,.2);
    background: transparent;
    color: rgba(255,0,128,.5);
    cursor: pointer;
    transition: all .18s;
}

    .gc-del-btn:hover {
        background: rgba(255,0,128,.08);
        color: var(--pink);
        border-color: var(--pink);
    }

/* ── Sidebar panels ─────────────────────────────────────────── */
.gc-panel {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,.07);
    padding: 20px;
    margin-bottom: 16px;
    width:100% !important;
}

/* Create panel */
.gc-create-balance {
    text-align: center;
    padding: 16px 0 20px;
    border-bottom: 1px solid rgba(255,255,255,.06);
    margin-bottom: 20px;
}

.gc-balance-val {
    font-family: var(--f-display);
    font-size: 2rem;
    font-weight: 900;
    color: var(--gold);
    text-shadow: 0 0 16px rgba(255,215,0,.4);
    line-height: 1;
}

.gc-balance-lbl {
    font-size: .6rem;
    letter-spacing: .16em;
    color: rgba(255,255,255,.35);
    margin-top: 4px;
}

.gc-create-info {
    font-size: .72rem;
    color: rgba(255,255,255,.4);
    line-height: 1.6;
    margin-bottom: 18px;
}

    .gc-create-info span {
        color: #fff;
    }

.gc-create-btn {
    display: block;
    width: 100%;
    padding: 13px;
    font-family: var(--f-display);
    font-size: .7rem;
    letter-spacing: .14em;
    border: 1px solid var(--green);
    background: rgba(57,255,20,.08);
    color: var(--green);
    text-shadow: 0 0 8px rgba(57,255,20,.4);
    cursor: pointer;
    transition: all .2s;
    clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
}

    .gc-create-btn:hover:not(:disabled) {
        background: rgba(57,255,20,.15);
        box-shadow: 0 0 20px rgba(57,255,20,.15);
    }

    .gc-create-btn:disabled {
        border-color: rgba(255,255,255,.1);
        color: rgba(255,255,255,.2);
        background: transparent;
        cursor: not-allowed;
        text-shadow: none;
        clip-path: none;
    }

.gc-insufficient {
    font-size: .65rem;
    color: var(--pink);
    text-align: center;
    margin-top: 8px;
    letter-spacing: .06em;
}

/* Redeem panel */
.gc-redeem-input {
    width: 100%;
    background: rgba(0,0,0,.4);
    border: 1px solid rgba(0,245,255,.2);
    color: #fff;
    font-family: var(--f-display);
    font-size: .85rem;
    letter-spacing: .2em;
    padding: 11px 14px;
    text-transform: uppercase;
    outline: none;
    transition: border-color .18s;
    box-sizing: border-box;
    margin-bottom: 10px;
}

    .gc-redeem-input:focus {
        border-color: var(--cyan);
        box-shadow: 0 0 12px rgba(0,245,255,.12);
    }

    .gc-redeem-input::placeholder {
        color: rgba(255,255,255,.2);
        font-size: .7rem;
        letter-spacing: .15em;
    }

.gc-redeem-btn {
    display: block;
    width: 100%;
    padding: 12px;
    font-family: var(--f-display);
    font-size: .68rem;
    letter-spacing: .14em;
    border: 1px solid rgba(0,245,255,.35);
    background: rgba(0,245,255,.07);
    color: var(--cyan);
    cursor: pointer;
    transition: all .2s;
    clip-path: polygon(6px 0%,100% 0%,calc(100% - 6px) 100%,0% 100%);
}

    .gc-redeem-btn:hover {
        background: rgba(0,245,255,.13);
        box-shadow: 0 0 16px rgba(0,245,255,.12);
    }

/* Coin history */
.gc-tx-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.gc-tx-row {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
    font-size: .7rem;
}

.gc-tx-amount {
    font-family: var(--f-display);
    font-size: .78rem;
    white-space: nowrap;
}

    .gc-tx-amount.plus {
        color: var(--green);
    }

    .gc-tx-amount.minus {
        color: var(--pink);
    }

.gc-tx-desc {
    color: rgba(255,255,255,.4);
    font-size: .66rem;
}

.gc-tx-date {
    color: rgba(255,255,255,.22);
    font-size: .6rem;
    white-space: nowrap;
}

/* Empty state */
.gc-empty {
    padding: 50px 20px;
    text-align: center;
    color: rgba(255,255,255,.22);
    font-size: .8rem;
    letter-spacing: .12em;
    border: 1px dashed rgba(255,255,255,.08);
}