/* $GOOD public visual layer over the stable hub layout. */
:root {
    --bg: #0b0d0a;
    --bg2: #151913;
    --card: rgba(21, 25, 19, 0.92);
    --border: rgba(200, 255, 0, 0.24);
    --border-hover: rgba(200, 255, 0, 0.62);
    --cyan: #c8ff00;
    --cyan2: #9ed900;
    --gold: #ffef62;
    --glow: rgba(200, 255, 0, 0.24);
    --text: #f4f1e8;
    --text-2: rgba(244, 241, 232, 0.72);
    --text-3: rgba(244, 241, 232, 0.42);
    --ink: #090b08;
    --lime: #c8ff00;
    --paper: #f4f1e8;
    --danger: #f04438;
    --radius: 8px;
    --radius-sm: 6px;
    --app-safe-top: max(env(safe-area-inset-top, 0px), var(--tg-content-safe-area-inset-top, 0px));
    --app-safe-right: max(env(safe-area-inset-right, 0px), var(--tg-content-safe-area-inset-right, 0px));
    --app-safe-bottom: max(env(safe-area-inset-bottom, 0px), var(--tg-content-safe-area-inset-bottom, 0px));
    --app-safe-left: max(env(safe-area-inset-left, 0px), var(--tg-content-safe-area-inset-left, 0px));
}

html, body {
    background: var(--bg);
    color: var(--text);
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    opacity: .14;
    z-index: 0;
    background-image:
        radial-gradient(circle at 15% 18%, rgba(200,255,0,.9) 0 1px, transparent 1.5px),
        radial-gradient(circle at 82% 72%, rgba(244,241,232,.7) 0 1px, transparent 1.5px);
    background-size: 19px 23px, 31px 29px;
    mix-blend-mode: screen;
}

.grid-overlay {
    background-image:
        linear-gradient(rgba(200,255,0,.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(200,255,0,.045) 1px, transparent 1px);
    background-size: 34px 34px;
    transform: skewY(-4deg) scale(1.1);
}

.orb-a { background: rgba(164, 221, 0, .2); }
.orb-b { background: rgba(200, 255, 0, .1); }
.orb-c { background: rgba(244, 241, 232, .03); }
.beam { display: none; }

#app {
    max-width: 460px;
    justify-content: flex-start;
    padding:
        max(0px, var(--app-safe-top))
        max(14px, var(--app-safe-right))
        max(12px, var(--app-safe-bottom))
        max(14px, var(--app-safe-left));
    scrollbar-width: none;
}
#app::-webkit-scrollbar { display: none; }

.game-section { gap: 11px; padding-top: 10px; }

.nav {
    min-height: 42px;
    padding: 3px 2px;
    border-bottom: 2px solid rgba(200,255,0,.22);
}

.nav-mark {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    overflow: visible;
    background: var(--lime);
    color: var(--ink);
    border: 2px solid var(--ink);
    border-radius: 50% 46% 52% 43%;
    box-shadow: 2px 2px 0 var(--paper);
    transform: rotate(-7deg);
}

.boyz-mark {
    font: 28px/1 'Bangers', Impact, sans-serif;
    transform: rotate(7deg);
}

.nav-name {
    font: 22px/1 'Bangers', Impact, sans-serif;
    letter-spacing: 1.5px;
}

.lang-btn {
    border: 1px solid rgba(244,241,232,.14);
    border-radius: 3px;
}
.lang-btn.active {
    color: var(--ink);
    background: var(--lime);
    border-color: var(--lime);
}
.nav-avatar { border: 2px solid var(--lime); background: #20251d; }
.nav-letter { color: var(--lime); }

.hero { position: relative; }
.hero-mascot-wrap {
    width: 152px;
    height: 152px;
    margin: 1px 0 4px;
    transform: rotate(-1.5deg);
}
.mascot-ring {
    inset: -5px;
    border: 2px solid var(--ink);
    border-radius: 9px;
    background: var(--lime);
    box-shadow: 7px 7px 0 rgba(200,255,0,.34), 9px 9px 0 var(--ink);
    animation: none;
}
.hero-mascot {
    position: relative;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border: 3px solid var(--ink);
    border-radius: 7px;
    filter: saturate(1.05) contrast(1.03);
    animation: none;
}
.hero-kicker {
    padding: 3px 9px 2px;
    margin-top: -12px;
    position: relative;
    z-index: 2;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.5px;
    transform: rotate(1deg);
}
.hero-title { margin: 1px 0 4px; }
.title-boyz {
    font: 35px/.93 'Bangers', Impact, sans-serif;
    letter-spacing: 2px;
    color: var(--lime);
    -webkit-text-stroke: 1.5px var(--ink);
    text-shadow: 3px 3px 0 var(--paper), 6px 6px 0 var(--ink);
    transform: rotate(-1deg);
}

.hero-stats { gap: 6px; margin-top: 4px; }
.hs-chip {
    min-width: 76px;
    justify-content: center;
    border: 2px solid var(--ink);
    border-radius: 4px;
    padding: 5px 10px;
    background: var(--paper);
    color: var(--ink);
    box-shadow: 3px 3px 0 rgba(200,255,0,.5);
    backdrop-filter: none;
}
.hs-emoji, .hs-val { color: var(--ink); }
.hs-emoji { color: #66a700; }
.hs-label { font-size: 7px; font-weight: 900; letter-spacing: 1px; }

.cta-btn {
    border: 3px solid var(--ink);
    border-radius: 7px;
    color: var(--ink);
    background: var(--lime);
    box-shadow: 6px 6px 0 var(--paper);
    clip-path: polygon(0 0, 96% 0, 100% 20%, 100% 100%, 4% 100%, 0 82%);
    backdrop-filter: none;
}
.cta-inner { padding: 16px 17px; }
.cta-game-name {
    color: var(--ink);
    font: 25px/1 'Bangers', Impact, sans-serif;
    letter-spacing: 1.4px;
}
.cta-game-desc { color: rgba(9,11,8,.67); font-weight: 800; text-transform: uppercase; }
.cta-live-badge-inline { color: var(--paper); background: var(--ink); box-shadow: none; }
.cta-dot { background: var(--lime); }
.cta-play-circle {
    width: 45px;
    height: 45px;
    color: var(--lime);
    background: var(--ink);
    border: 2px solid var(--paper);
    box-shadow: 3px 3px 0 rgba(9,11,8,.22);
}

.play-modes {
    display:grid;
    gap:9px;
    margin-top:5px;
}
.play-modes-heading {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 2px;
    color:var(--lime);
    font:900 8px/1 monospace;
    letter-spacing:1.8px;
}
.play-modes-heading small {
    color:rgba(244,241,232,.34);
    font:800 7px/1 monospace;
    letter-spacing:1.2px;
}

.one-shot-card {
    position:relative;
    margin-top:0;
    padding:14px 14px 12px;
    overflow:hidden;
    border:1px solid rgba(200,255,0,.48);
    border-left:4px solid var(--lime);
    border-radius:5px;
    color:var(--paper);
    background:
        radial-gradient(circle at 92% 15%,rgba(200,255,0,.1),transparent 30%),
        #151913;
    box-shadow:4px 4px 0 rgba(9,11,8,.9);
    clip-path:none;
}
.one-shot-card::before{content:'';position:absolute;left:13px;top:0;width:62px;height:3px;background:var(--lime)}
.one-shot-kicker{color:var(--lime)}
.one-shot-day{padding:3px 6px;border:1px solid rgba(244,241,232,.13);border-radius:2px;color:rgba(244,241,232,.52);background:rgba(244,241,232,.035)}
.one-shot-title-row h2{color:var(--paper);font:30px/.9 'Bangers',Impact,sans-serif;letter-spacing:1.6px;text-shadow:3px 3px 0 #000}
.one-shot-status{border:1px solid rgba(200,255,0,.4);border-radius:2px;color:var(--lime);background:rgba(200,255,0,.08)}
.one-shot-copy p{color:rgba(244,241,232,.57);font-weight:700;text-transform:uppercase}
.one-shot-action{min-width:0;flex-basis:101px;border:2px solid var(--ink);border-radius:4px;color:var(--ink);background:var(--lime);box-shadow:3px 3px 0 var(--paper)}
.one-shot-action:active:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--paper)}
.one-shot-action:disabled{color:rgba(9,11,8,.55);opacity:.58}
.one-shot-stats{border-color:rgba(200,255,0,.18)}
.one-shot-stats>span+span{border-color:rgba(244,241,232,.12)}
.one-shot-stats small{color:rgba(244,241,232,.36)}
.one-shot-stats strong{color:var(--lime)}
.one-shot-lb-meta{padding:8px 9px;border:1px dashed rgba(200,255,0,.3);background:rgba(200,255,0,.04)}
.one-shot-lb-meta strong{color:var(--lime)}
.os-board-switch{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:5px;
    flex:0 0 auto;
    margin-bottom:9px;
    padding:4px;
    border:1px solid rgba(244,241,232,.11);
    border-radius:6px;
    background:#11140f;
}
.os-board-tab{
    min-width:0;
    padding:9px 6px 8px;
    border:1px solid transparent;
    border-radius:4px;
    color:rgba(244,241,232,.43);
    background:transparent;
    font:900 8px/1 monospace;
    letter-spacing:.7px;
    white-space:nowrap;
}
.os-board-tab span{margin-right:3px;color:rgba(200,255,0,.35)}
.os-board-tab.active{
    color:var(--ink);
    border-color:var(--lime);
    background:var(--lime);
    box-shadow:2px 2px 0 var(--paper);
}
.os-board-tab.active span{color:var(--ink)}
.os-board-view{
    display:flex;
    flex:1;
    min-height:0;
    flex-direction:column;
    overflow:hidden;
}
.os-board-view.hidden{display:none}
.os-archive-heading{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
    flex:0 0 auto;
    padding:2px 2px 8px;
}
.os-archive-heading span{
    display:block;
    color:var(--lime);
    font:400 20px/1 'Bangers',Impact,sans-serif;
    letter-spacing:1.1px;
}
.os-archive-heading strong{
    display:block;
    margin-top:3px;
    color:rgba(244,241,232,.4);
    font:900 7px/1 monospace;
    letter-spacing:1.15px;
}
.os-archive-heading small{
    padding:4px 5px;
    border:1px solid rgba(200,255,0,.22);
    border-radius:3px;
    color:rgba(244,241,232,.5);
    font:900 7px/1 monospace;
    letter-spacing:.5px;
    white-space:nowrap;
}
.os-archive-weeks{
    display:flex;
    gap:6px;
    flex:0 0 auto;
    overflow-x:auto;
    margin:0 -1px 8px;
    padding:1px 1px 4px;
    scrollbar-width:none;
}
.os-archive-weeks::-webkit-scrollbar{display:none}
.os-week-chip{
    flex:0 0 auto;
    min-width:72px;
    padding:7px 8px 6px;
    border:1px solid rgba(244,241,232,.14);
    border-radius:4px;
    color:rgba(244,241,232,.5);
    text-align:left;
    background:#171b15;
}
.os-week-chip strong{
    display:block;
    color:inherit;
    font:900 8px/1 monospace;
    letter-spacing:.5px;
}
.os-week-chip small{
    display:block;
    margin-top:4px;
    color:rgba(244,241,232,.3);
    font:800 7px/1 monospace;
}
.os-week-chip.active{
    border-color:var(--lime);
    color:var(--lime);
    background:rgba(200,255,0,.08);
    box-shadow:inset 3px 0 0 var(--lime);
}
.os-week-chip.active small{color:rgba(200,255,0,.55)}
.os-archive-meta{display:flex;align-items:center;justify-content:space-between;gap:8px;flex:0 0 auto}
.os-archive-meta strong{font-size:8px;letter-spacing:.6px}
#os-archive-view .top3{padding-top:8px;padding-bottom:11px}
#os-archive-view .t3-item{gap:3px}
#os-archive-view .t3-item.first .t3-avatar{width:48px;height:48px}
#os-archive-view .t3-item.second .t3-avatar,
#os-archive-view .t3-item.third .t3-avatar{width:39px;height:39px}
#os-archive-my-rank{
    border-color:rgba(200,255,0,.42);
    background:rgba(200,255,0,.07);
}
#os-archive-my-rank .mr-tag{color:var(--ink);background:var(--lime)}

.trn-banner {
    margin-top: clamp(20px, 6vh, 50px);
    border: 1px dashed rgba(200,255,0,.58);
    border-radius: 4px;
    background: #151913;
    box-shadow: none;
}
.trn-banner::after { background: linear-gradient(90deg, transparent, rgba(200,255,0,.08), transparent); }
.trn-banner-dot { background: var(--lime); box-shadow: 0 0 8px var(--lime); }
.trn-banner-text, .trn-banner-name { color: var(--lime); }
.trn-banner-countdown {
    padding: 5px 7px;
    border: 1px solid rgba(200,255,0,.3);
    border-radius: 3px;
    color: var(--lime);
    background: rgba(200,255,0,.06);
}

.quick-actions { gap: 7px; margin-top: 2px; }
.qa-btn {
    min-height: 52px;
    padding: 8px 9px;
    border: 2px solid rgba(244,241,232,.16);
    border-radius: 5px;
    background: #171b15;
    backdrop-filter: none;
}
.qa-btn:nth-child(2) { background:#171b15; color:var(--paper); border-color:rgba(200,255,0,.3); }
.qa-btn:nth-child(2) .qa-label { color:var(--paper); }
.qa-btn:nth-child(2) .qa-sub { color:rgba(244,241,232,.42); }
.qa-btn:nth-child(2) .qa-arrow { color:var(--lime); }
.qa-icon { font-size: 17px; }
.qa-label { font-size: 10px; font-weight: 900; text-transform: uppercase; }
.qa-sub { color: rgba(244,241,232,.42); }
.qa-arrow { color: var(--lime); }

.project-section {
    position:relative;
    gap: 0;
    padding-bottom: 0;
    margin-top:clamp(30px,6vh,54px);
    padding-top:20px;
    border-top:1px solid rgba(200,255,0,.18);
}
.project-section::before {
    content:'COMMUNITY // LINKS';
    position:absolute;
    top:-4px;
    left:2px;
    padding-right:9px;
    color:rgba(200,255,0,.44);
    background:var(--bg);
    font:900 7px/1 monospace;
    letter-spacing:1.4px;
}

/* ═══ SOCIAL BUTTONS ═══ */
.hood-socials {
    display: flex;
    gap: 8px;
    padding: 0 2px;
    margin-bottom: 2px;
}
.hood-social-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    border: 2px solid rgba(244,241,232,.14);
    border-radius: 5px;
    background: #171b15;
    color: var(--text-2);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .5px;
    text-transform: uppercase;
    text-decoration: none;
    transition: all .15s;
}
.hood-social-btn small {
    color: var(--text-3);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: .2px;
    white-space: nowrap;
    margin-left: auto;
}
.hood-social-btn span { line-height: 1; }
.hood-social-btn svg { color: var(--lime); transition: transform .2s; }
.hood-social-btn:active {
    transform: scale(.94);
    border-color: var(--lime);
    background: rgba(200,255,0,.08);
    color: var(--lime);
}
.hood-social-btn:active svg { transform: scale(1.15); }

/* ═══ CREW TICKER ═══ */
.crew-ticker-wrap {
    overflow: hidden;
    border-top: 1px solid rgba(200,255,0,.16);
    border-bottom: 1px solid rgba(200,255,0,.16);
    padding: 7px 0;
    margin-top: 8px;
}
.crew-ticker {
    display: flex;
    width: max-content;
    animation: tickerScroll 18s linear infinite;
}
.ticker-content {
    white-space: nowrap;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: 2px;
    color: rgba(200,255,0,.35);
    text-transform: uppercase;
}
@keyframes tickerScroll {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

.network-strip {
    margin-top: 0;
    border-top: none;
    padding: 5px 10px 8px;
}
.footer { display: none; }

/* Sheets and drawers inherit the comic/acid system. */
.tm-backdrop, .overlay { background: rgba(9,11,8,.88); }
.tm-sheet, .drawer {
    background: #10130f;
    border-color: rgba(200,255,0,.34);
    border-radius: 10px 10px 0 0;
}
.tm-sheet::before, .drawer::before { background: var(--lime); }
.tm-title, .drawer-top h2 { font-family: 'Bangers', Impact, sans-serif; letter-spacing: 1px; }
.tm-hero-full {
    background: #171b15;
    border: 2px solid rgba(200,255,0,.28);
    border-radius: 6px;
}
.tm-hero-full::before { background: var(--lime); }
.tm-clock-num, .tm-pool-val { color: var(--lime); text-shadow: 2px 2px 0 var(--ink); }
.tm-clock-lbl, .tm-clock-sep, .tm-pool-currency, .tm-onchain-badge { color: var(--lime); }
.tm-pool-usd-val { color: var(--text-3); }
.tm-info-icon, .tm-ended-t { color: var(--lime); }
.tm-wallet-card, .tm-cta { display: none !important; }
.tm-dist-badge, .tm-row, .info-cards .ic {
    border-radius: 4px;
    background: #1b2018;
    border-color: rgba(244,241,232,.14);
}
.tm-my-rank-bar, .my-rank { background: rgba(200,255,0,.1); border-color: rgba(200,255,0,.35); }
.tm-my-rank-bar .mr-tag, .mr-tag { background: var(--lime); color: var(--ink); }
.tm-my-rank-bar .mr-score, .my-rank .mr-score { color: var(--lime); }
.tab.active { color: var(--ink); background: var(--lime); border-color: var(--lime); }

/* Profile and utility drawers share one visual grammar with the game. */
#profile-sheet {
    isolation: isolate;
    color: var(--paper);
    background:
        radial-gradient(circle at 14% 10%, rgba(200,255,0,.09) 0 1px, transparent 1.5px) 0 0 / 18px 18px,
        linear-gradient(165deg, rgba(200,255,0,.065), transparent 36%),
        #10130f;
    border: 2px solid rgba(200,255,0,.52);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -7px 0 var(--ink), 0 -11px 0 rgba(200,255,0,.18), 0 -25px 70px rgba(0,0,0,.7);
}
#profile-sheet::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--lime);
}
#profile-sheet .account-pill { width: 46px; height: 4px; border-radius: 1px; background: var(--lime); }
#profile-sheet .account-kicker { color: var(--lime); }
#profile-sheet .account-head h2 {
    color: var(--paper);
    font-size: 31px;
    text-shadow: 3px 3px 0 rgba(200,255,0,.3);
    transform: rotate(-1deg);
    transform-origin: left center;
}
#profile-sheet .account-close,
.drawer-x {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    box-shadow: 3px 3px 0 var(--lime);
    line-height: 1;
}
.profile-identity {
    padding: 15px;
    background: #171b15;
    border: 2px solid rgba(244,241,232,.2);
    border-radius: 5px;
}
.profile-avatar {
    border: 3px solid var(--ink);
    border-radius: 50% 45% 52% 47%;
    background: var(--lime);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--paper);
    transform: rotate(-3deg);
}
.profile-identity strong {
    color: var(--paper);
    font: 22px/1 'Bangers', Impact, sans-serif;
    letter-spacing: 1px;
}
.profile-identity span { color: rgba(200,255,0,.62); }
.profile-stats { gap: 9px; margin: 11px 0; }
.profile-stats div {
    min-height: 76px;
    background: #171b15;
    border: 2px solid rgba(244,241,232,.16);
    border-radius: 4px;
}
.profile-stats div:first-child { color: var(--ink); background: var(--lime); border-color: var(--ink); }
.profile-stats div:first-child small,
.profile-stats div:first-child b { color: var(--ink); }
.profile-stats small { color: rgba(244,241,232,.48); }
.profile-stats b { color: var(--lime); font-family: 'Courier New', monospace; }
.profile-sync-status { color: rgba(244,241,232,.36); }

.drawer {
    isolation: isolate;
    background:
        radial-gradient(circle at 12% 8%, rgba(200,255,0,.08) 0 1px, transparent 1.5px) 0 0 / 18px 18px,
        #10130f;
    border: 2px solid rgba(200,255,0,.52);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -7px 0 var(--ink), 0 -11px 0 rgba(200,255,0,.18), 0 -25px 70px rgba(0,0,0,.7);
}
.drawer::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--lime);
}
.drawer-pill { width: 46px; height: 4px; border-radius: 1px; background: var(--lime); }
.drawer-top { padding: 13px 2px 11px; }
.drawer-top h2 {
    color: var(--paper);
    font-size: 27px;
    font-weight: 400;
    letter-spacing: 1.2px;
    text-shadow: 3px 3px 0 rgba(200,255,0,.28);
    transform: rotate(-1deg);
}
.tab-row { gap: 8px; }
.tab {
    padding: 9px 8px;
    color: rgba(244,241,232,.58);
    background: #171b15;
    border: 2px solid rgba(244,241,232,.16);
    border-radius: 4px;
    font-size: 10px;
    font-weight: 900;
    text-transform: uppercase;
}
.tab.active { color: var(--ink); background: var(--lime); border-color: var(--ink); box-shadow: 3px 3px 0 var(--paper); }
.info-section-label{margin:3px 2px -3px;color:rgba(244,241,232,.42);font:900 8px/1 monospace;letter-spacing:1.5px}
.top3 { padding-top: 15px; }
.t3-avatar {
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 50% 45% 52% 47%;
    box-shadow: 2px 2px 0 rgba(200,255,0,.72);
}
.t3-item.first .t3-avatar { border-color: var(--ink); background: var(--lime); box-shadow: 4px 4px 0 var(--paper); }
.t3-name { color: var(--text-2); font-weight: 800; }
.t3-score { color: var(--lime); font-family: 'Courier New', monospace; }
.lb-list { gap: 7px; }
.lb-row {
    padding: 10px 11px;
    background: #171b15;
    border: 2px solid rgba(244,241,232,.14);
    border-radius: 4px;
}
.lb-row:nth-child(even) { background: #1b2018; }
.lb-row.is-me { background: rgba(200,255,0,.1); border-color: rgba(200,255,0,.58); }
.lb-pos { color: rgba(244,241,232,.42); font-family: 'Courier New', monospace; }
.lb-avatar {
    color: var(--ink);
    background: var(--lime);
    border: 2px solid var(--ink);
    border-radius: 4px;
}
.lb-name { color: var(--paper); font-weight: 800; }
.lb-score { color: var(--lime); font-family: 'Courier New', monospace; }
.lb-you-tag { color: var(--ink); background: var(--lime); border-radius: 2px; }
.my-rank { border-radius: 4px; }
.skel { border-radius: 4px; background: linear-gradient(90deg,#171b15 25%,#252d21 50%,#171b15 75%); background-size: 200% 100%; }

.info-cards { gap: 11px; }
.info-cards .ic {
    align-items: center;
    padding: 15px;
    background: #171b15;
    border: 2px solid rgba(244,241,232,.16);
    border-radius: 4px;
}
.info-cards .ic:nth-child(2) { border-color: rgba(200,255,0,.4); transform: rotate(.35deg); }
.ic-emoji {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: var(--lime);
    border: 2px solid var(--ink);
    border-radius: 4px;
    box-shadow: 3px 3px 0 var(--paper);
    transform: rotate(-4deg);
}
.ic-body h3 {
    margin-bottom: 5px;
    color: var(--lime);
    font: 19px/1 'Bangers', Impact, sans-serif;
    letter-spacing: .8px;
}
.ic-body p { color: rgba(244,241,232,.62); font-size: 11px; font-weight: 600; }

/* Wallet: secure finance, expressed in the same comic/acid language as the hub. */
.profile-wallet-status-card {
    color: var(--ink);
    background: var(--lime);
    border: 2px solid var(--ink);
    border-radius: 5px;
    box-shadow: 4px 4px 0 var(--paper);
    clip-path: polygon(0 0, 96% 0, 100% 24%, 100% 100%, 3% 100%, 0 78%);
}
.profile-wallet-status-card small { color: rgba(9,11,8,.67); }
.profile-wallet-icon {
    color: var(--lime);
    background: var(--ink);
    border: 2px solid var(--paper);
    border-radius: 4px;
    transform: rotate(-3deg);
}

.account-backdrop { background: rgba(9,11,8,.9); }
.wallet-sheet {
    isolation: isolate;
    color: var(--paper);
    background:
        radial-gradient(circle at 12% 9%, rgba(200,255,0,.1) 0 1px, transparent 1.5px) 0 0 / 17px 17px,
        linear-gradient(165deg, rgba(200,255,0,.07), transparent 34%),
        #10130f;
    border: 2px solid rgba(200,255,0,.52);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -7px 0 var(--ink), 0 -11px 0 rgba(200,255,0,.18), 0 -25px 70px rgba(0,0,0,.7);
}
.wallet-sheet::before {
    content: '';
    position: absolute;
    z-index: -1;
    top: 0;
    right: 0;
    left: 0;
    height: 5px;
    background: var(--lime);
}
.wallet-sheet .account-pill {
    width: 46px;
    height: 4px;
    border-radius: 1px;
    background: var(--lime);
}
.wallet-sheet .account-kicker { color: var(--lime); }
.wallet-sheet .account-head h2 {
    color: var(--paper);
    font-size: 31px;
    text-shadow: 3px 3px 0 rgba(200,255,0,.3);
    transform: rotate(-1deg);
    transform-origin: left center;
}
.wallet-sheet .account-close,
.wallet-send-sheet header button {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
    box-shadow: 3px 3px 0 var(--lime);
    line-height: 1;
}

.wallet-loader { color: var(--lime); }
.wallet-loader.session-expired {
    border: 2px dashed rgba(200,255,0,.55);
    border-radius: 5px;
    background: #171b15;
}
.wallet-loader.session-expired .wallet-expired-icon,
.wallet-loader.session-expired button { color: var(--ink); background: var(--lime); border-radius: 4px; }
.wallet-loader.session-expired strong { color: var(--paper); }

.wallet-app { gap: 11px; }
.wallet-state {
    padding: 9px 11px;
    color: rgba(244,241,232,.58);
    background: var(--ink);
    border: 1px dashed rgba(244,241,232,.28);
    border-radius: 3px;
    font-family: 'Courier New', monospace;
}
.wallet-state::before { color: rgba(244,241,232,.4); }
.wallet-state.ready {
    color: var(--lime);
    background: rgba(200,255,0,.055);
    border-color: rgba(200,255,0,.52);
}
.wallet-state.ready::before { color: var(--lime); text-shadow: 0 0 8px rgba(200,255,0,.65); }

.wallet-address-card {
    position: relative;
    padding: 15px;
    color: var(--paper);
    background: #171b15;
    border: 2px solid rgba(244,241,232,.2);
    border-radius: 5px;
    box-shadow: 5px 5px 0 rgba(200,255,0,.72);
}
.wallet-address-card::after {
    content: 'EOA';
    position: absolute;
    top: 10px;
    right: 10px;
    padding: 2px 5px;
    color: var(--ink);
    background: var(--lime);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}
.wallet-address-card small { color: var(--lime); }
.wallet-address-card code { color: var(--paper); font-weight: 800; }
.wallet-address-card span { color: rgba(244,241,232,.52); }

.wallet-primary {
    color: var(--ink);
    background: var(--lime);
    border: 3px solid var(--ink);
    border-radius: 5px;
    box-shadow: 5px 5px 0 var(--paper);
    clip-path: polygon(0 0, 97% 0, 100% 24%, 100% 100%, 3% 100%, 0 78%);
}
.wallet-primary:active:not(:disabled) { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--paper); }

.wallet-assets {
    overflow: visible;
    background: #171b15;
    border: 2px solid rgba(244,241,232,.18);
    border-radius: 5px;
}
.wallet-assets > div { padding: 14px; }
.asset-icon {
    color: var(--ink);
    background: var(--lime);
    border: 2px solid var(--ink);
    border-radius: 4px;
    box-shadow: 2px 2px 0 var(--paper);
    transform: rotate(-4deg);
}
.wallet-assets strong { color: var(--paper); font-weight: 900; text-transform: uppercase; }
.wallet-assets em { color: var(--lime); font-size: 13px; }

.wallet-actions { gap: 8px; }
.wallet-actions button {
    min-height: 44px;
    color: var(--paper);
    background: #171b15;
    border: 2px solid rgba(244,241,232,.2);
    border-radius: 4px;
}
.wallet-actions button:first-child { color: var(--ink); background: var(--lime); border-color: var(--ink); }
.wallet-actions button:nth-child(2) { color: var(--ink); background: var(--paper); border-color: var(--ink); }
.wallet-actions button:active:not(:disabled) { transform: scale(.95) rotate(-1deg); }

.wallet-warning,
.wallet-message {
    color: var(--paper);
    background: rgba(200,255,0,.07);
    border: 1px dashed rgba(200,255,0,.48);
    border-radius: 3px;
}
.wallet-message.error { color: #ff9f96; border-color: rgba(240,68,56,.68); background: rgba(240,68,56,.08); }
.wallet-qr-panel {
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 5px;
    box-shadow: 5px 5px 0 var(--lime);
}
.wallet-qr-panel p { color: var(--ink); text-transform: uppercase; letter-spacing: .5px; }
.wallet-settings { gap: 7px; }
.wallet-settings button {
    padding: 6px 8px;
    color: var(--text-2);
    background: #171b15;
    border: 1px solid rgba(244,241,232,.16);
    border-radius: 3px;
    text-decoration: none;
    text-transform: uppercase;
}
.wallet-explorer {
    color: var(--lime);
    border: 1px dashed rgba(200,255,0,.34);
    border-radius: 3px;
    letter-spacing: .7px;
}
.wallet-privy-badge { opacity: .9; filter: saturate(.75) contrast(1.12); }

.wallet-send-backdrop { background: rgba(9,11,8,.9); backdrop-filter: blur(5px); }
.wallet-send-sheet {
    color: var(--paper);
    background:
        linear-gradient(rgba(200,255,0,.035) 1px, transparent 1px) 0 0 / 22px 22px,
        #10130f;
    border: 2px solid rgba(200,255,0,.52);
    border-bottom: 0;
    border-radius: 10px 10px 0 0;
    box-shadow: 0 -7px 0 var(--ink), 0 -11px 0 rgba(200,255,0,.18), 0 -25px 70px rgba(0,0,0,.72);
}
.wallet-send-sheet h3 { color: var(--lime); font-size: 30px; text-shadow: 2px 2px 0 rgba(244,241,232,.22); }
.wallet-send-sheet header p,
.wallet-send-sheet label { color: rgba(244,241,232,.52); }
.wallet-send-available {
    margin-bottom: 7px;
    padding: 8px 10px;
    color: rgba(244,241,232,.5);
    background: #171b15;
    border-left: 3px solid var(--lime);
}
.wallet-send-available strong { color: var(--paper); }
.wallet-send-sheet input,
.wallet-send-sheet select,
.wallet-amount-input {
    color: var(--ink);
    background: var(--paper);
    border: 2px solid var(--ink);
    border-radius: 4px;
}
.wallet-send-sheet input::placeholder { color: rgba(9,11,8,.42); }
.wallet-send-sheet input:focus,
.wallet-send-sheet select:focus,
.wallet-amount-input:focus-within { border-color: var(--lime); box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--lime); }
.wallet-amount-input input { color: var(--ink); background: transparent; border: 0; box-shadow: none; }
.wallet-amount-input input:focus { border: 0; box-shadow: none; }
.wallet-amount-input button {
    color: var(--lime);
    background: var(--ink);
    border-left: 2px solid var(--ink);
}
.wallet-fee-card {
    background: #171b15;
    border: 1px dashed rgba(200,255,0,.42);
    border-radius: 4px;
}
.wallet-fee-card > div { color: rgba(244,241,232,.48); }
.wallet-fee-card > div + div { border-color: rgba(244,241,232,.09); }
.wallet-fee-card strong { color: var(--paper); }
.wallet-fee-card > div:nth-child(2) strong { color: var(--lime); }
.wallet-fee-card small { color: rgba(200,255,0,.64); border-color: rgba(200,255,0,.18); }
.wallet-quote-message { color: var(--lime); }

@media (min-width: 560px) {
    #profile-sheet,
    .drawer,
    .wallet-sheet,
    .wallet-send-sheet { border-bottom: 2px solid rgba(200,255,0,.52); border-radius: 10px; }
}

@media (max-height: 720px) {
    .hero-mascot-wrap { width: 138px; height: 138px; }
    .title-boyz { font-size: 31px; }
    .hero-kicker { margin-top: -9px; }
    .cta-inner { padding: 13px 15px; }
    .game-section { gap: 8px; }
    .trn-banner { margin-top:18px; }
    .play-modes { margin-top:2px; gap:7px; }
    .quick-actions { margin-top: 3px; }
    .project-section { margin-top:28px; padding-top:18px; }
    .qa-btn { min-height: 46px; padding: 6px 8px; }
    .qa-icon { font-size: 15px; }
    .qa-sub { display: none; }
    .hood-social-btn { padding: 8px 9px; }
    .hood-social-btn small { display: none; }
}

@media (min-height: 800px) {
    .trn-banner { margin-top:clamp(88px,11vh,112px); }
}

@media (max-height: 620px) {
    .hero-mascot-wrap { width: 112px; height: 112px; }
    .hero-stats { display: none; }
    .project-section { display: none; }
}

@media (max-width: 350px) {
    .trn-banner-name { font-size: 9px; }
    .trn-banner-countdown { font-size: 8px; padding: 4px 5px; }
    .qa-label { font-size: 8px; }
    .one-shot-card{padding:11px 12px 10px}
    .one-shot-action{min-width:0;flex-basis:86px;padding:0 7px;font-size:8px}
    .one-shot-copy p{font-size:8px}
}

/* ============================================================
   $GOOD — GOOD IN THE HOOD
   Public visual identity. Layout hooks and application logic stay unchanged.
   ============================================================ */
:root {
    --bg: #050806;
    --bg2: #0b120d;
    --card: rgba(13, 20, 15, .94);
    --border: rgba(199, 244, 59, .16);
    --border-hover: rgba(199, 244, 59, .42);
    --cyan: #c7f43b;
    --cyan2: #93c818;
    --gold: #d7ad62;
    --glow: rgba(199, 244, 59, .16);
    --text: #f5f2e9;
    --text-2: rgba(245, 242, 233, .68);
    --text-3: rgba(245, 242, 233, .38);
    --ink: #050806;
    --lime: #c7f43b;
    --paper: #f5f2e9;
    --good-green: #006b3e;
    --good-green-2: #0a4b30;
    --good-copper: #b9653d;
    --good-gold: #d7ad62;
    --danger: #ff5d57;
    --radius: 16px;
    --radius-sm: 12px;
}

html,
body {
    background:
        radial-gradient(circle at 50% -12%, rgba(0, 107, 62, .34), transparent 36%),
        linear-gradient(180deg, #07100a 0%, var(--bg) 47%, #030504 100%);
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

body::before {
    opacity: .28;
    background-image:
        radial-gradient(circle at 20% 12%, rgba(199, 244, 59, .16) 0 1px, transparent 1.5px),
        linear-gradient(115deg, transparent 0 48%, rgba(255, 255, 255, .018) 49% 50%, transparent 51%);
    background-size: 38px 38px, 78px 78px;
    mix-blend-mode: normal;
}

.grid-overlay {
    opacity: .55;
    background-image:
        linear-gradient(rgba(199, 244, 59, .028) 1px, transparent 1px),
        linear-gradient(90deg, rgba(199, 244, 59, .028) 1px, transparent 1px);
    background-size: 48px 48px;
    transform: none;
    mask-image: linear-gradient(180deg, #000, transparent 82%);
}

.orb-a {
    width: 360px;
    height: 360px;
    top: -160px;
    left: -110px;
    background: rgba(0, 143, 82, .28);
}

.orb-b {
    right: -120px;
    bottom: 4%;
    background: rgba(199, 244, 59, .08);
}

.orb-c {
    background: rgba(185, 101, 61, .055);
}

#app {
    max-width: 480px;
    padding:
        max(4px, var(--app-safe-top))
        max(15px, var(--app-safe-right))
        max(14px, var(--app-safe-bottom))
        max(15px, var(--app-safe-left));
}

.game-section {
    gap: 11px;
    padding-top: 8px;
}

.nav {
    min-height: 46px;
    padding: 4px 1px 8px;
    border-bottom: 1px solid rgba(245, 242, 233, .1);
}

.nav-brand {
    gap: 10px;
}

.nav-mark {
    width: 35px;
    height: 35px;
    color: var(--ink);
    border: 1px solid rgba(199, 244, 59, .8);
    border-radius: 11px;
    background: linear-gradient(145deg, #d9ff5b, #a8de20);
    box-shadow: 0 6px 18px rgba(199, 244, 59, .15), inset 0 1px rgba(255, 255, 255, .55);
    transform: none;
}

.boyz-mark {
    font: 900 25px/1 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: -1px;
    transform: none;
}

.nav-name {
    color: var(--paper);
    font: 900 20px/1 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: 1.2px;
}

.nav-name::after {
    content: 'GOOD IN THE HOOD';
    display: block;
    margin-top: 3px;
    color: rgba(245, 242, 233, .35);
    font: 800 6px/1 'Inter', sans-serif;
    letter-spacing: 1.55px;
}

.nav-avatar {
    width: 36px;
    height: 36px;
    border: 1px solid rgba(199, 244, 59, .48);
    background: #101812;
    box-shadow: 0 0 0 3px rgba(199, 244, 59, .045);
}

.nav-letter {
    color: var(--lime);
    font-weight: 900;
}

.hero {
    align-items: stretch;
    text-align: left;
}

.hero-mascot-wrap {
    width: 100%;
    height: clamp(218px, 30vh, 272px);
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(199, 244, 59, .22);
    border-radius: 22px;
    background: #020403;
    box-shadow:
        0 20px 50px rgba(0, 0, 0, .38),
        inset 0 0 0 1px rgba(255, 255, 255, .025);
    transform: none;
}

.hero-mascot-wrap::after {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, transparent 46%, rgba(3, 8, 5, .22) 68%, rgba(3, 8, 5, .82) 100%),
        linear-gradient(90deg, rgba(0, 107, 62, .18), transparent 36% 70%, rgba(199, 244, 59, .04));
}

.mascot-ring {
    z-index: 3;
    inset: 10px;
    border: 1px solid rgba(245, 242, 233, .12);
    border-radius: 14px;
    background: transparent;
    box-shadow: none;
}

.mascot-ring::before,
.mascot-ring::after {
    content: '';
    position: absolute;
    width: 28px;
    height: 1px;
    background: var(--lime);
}

.mascot-ring::before {
    top: -1px;
    left: 0;
}

.mascot-ring::after {
    right: 0;
    bottom: -1px;
}

.hero-mascot {
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 10%;
    filter: saturate(.96) contrast(1.06);
}

.hero-kicker {
    z-index: 4;
    align-self: flex-start;
    margin: -29px 0 0 14px;
    padding: 7px 10px 6px;
    color: var(--ink);
    border: 0;
    border-radius: 7px;
    background: var(--lime);
    box-shadow: 0 5px 18px rgba(199, 244, 59, .14);
    font: 900 7px/1 'Inter', sans-serif;
    letter-spacing: 1.5px;
    transform: none;
}

.hero-title {
    margin: 13px 0 0;
}

.title-boyz {
    display: block;
    color: var(--paper);
    font: 900 clamp(37px, 11vw, 50px)/.84 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: -.5px;
    -webkit-text-stroke: 0;
    text-shadow: none;
    transform: none;
}

.title-boyz::first-letter {
    color: var(--lime);
}

.hero-manifesto {
    margin-top: 8px;
    color: rgba(245, 242, 233, .48);
    font: 800 8px/1 'Inter', sans-serif;
    letter-spacing: 1.8px;
}

.hero-manifesto span {
    padding: 0 5px;
    color: var(--lime);
}

.hero-stats {
    width: 100%;
    margin-top: 13px;
    gap: 7px;
}

.hs-chip {
    min-width: 0;
    min-height: 37px;
    flex: 1;
    justify-content: center;
    padding: 5px 8px;
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 11px;
    background: linear-gradient(180deg, rgba(22, 33, 25, .96), rgba(12, 18, 14, .96));
    box-shadow: none;
}

.hs-emoji,
.hs-val {
    color: var(--paper);
}

.hs-emoji {
    color: var(--lime);
    font-size: 10px;
}

.hs-val {
    font-size: 12px;
    font-weight: 900;
}

.hs-label {
    color: rgba(245, 242, 233, .34);
    font-size: 6px;
}

.play-modes {
    gap: 8px;
    margin-top: 6px;
}

.play-modes-heading {
    color: var(--lime);
    font: 900 7px/1 'Inter', sans-serif;
    letter-spacing: 1.65px;
}

.play-modes-heading small {
    color: rgba(245, 242, 233, .28);
    font: 800 6px/1 'Inter', sans-serif;
}

.cta-btn {
    color: var(--paper);
    border: 1px solid rgba(199, 244, 59, .3);
    border-radius: 16px;
    background:
        radial-gradient(circle at 90% 20%, rgba(199, 244, 59, .13), transparent 28%),
        linear-gradient(135deg, #0d3b27, #102219 72%);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .3);
    clip-path: none;
}

.cta-btn::before {
    opacity: 1;
    background: linear-gradient(90deg, var(--lime) 0 4px, transparent 4px);
}

.cta-btn:active {
    transform: scale(.985);
}

.cta-inner {
    min-height: 78px;
    padding: 16px 15px 16px 18px;
}

.cta-game-name {
    color: var(--paper);
    font: 900 24px/1 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .4px;
    text-transform: uppercase;
}

.cta-game-desc {
    margin-top: 3px;
    color: rgba(245, 242, 233, .5);
    font-size: 8px;
    letter-spacing: .35px;
}

.cta-live-badge-inline {
    color: var(--lime);
    border: 1px solid rgba(199, 244, 59, .25);
    border-radius: 20px;
    background: rgba(5, 8, 6, .58);
}

.cta-dot {
    background: var(--lime);
}

.cta-play-circle {
    width: 47px;
    height: 47px;
    color: var(--ink);
    border: 0;
    background: var(--lime);
    box-shadow: 0 8px 24px rgba(199, 244, 59, .18);
}

.one-shot-card {
    padding: 14px;
    border: 1px solid rgba(199, 244, 59, .2);
    border-left: 4px solid var(--lime);
    border-radius: 15px;
    background:
        radial-gradient(circle at 94% 0, rgba(199, 244, 59, .09), transparent 34%),
        #0d1510;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .24);
}

.one-shot-card::before {
    display: none;
}

.one-shot-day,
.one-shot-status {
    border-radius: 20px;
}

.one-shot-title-row h2 {
    font-family: 'Barlow Condensed', Impact, sans-serif;
    text-shadow: none;
}

.one-shot-action {
    color: var(--ink);
    border: 0;
    border-radius: 10px;
    background: var(--lime);
    box-shadow: none;
}

.quick-actions {
    gap: 8px;
    margin-top: 2px;
}

.qa-btn,
.qa-btn:nth-child(2) {
    min-height: 54px;
    padding: 8px 10px;
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 13px;
    background: rgba(13, 20, 15, .94);
}

.qa-btn:active {
    border-color: rgba(199, 244, 59, .36);
    background: #111b14;
}

.qa-icon {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--lime);
    border: 1px solid rgba(199, 244, 59, .28);
    border-radius: 8px;
    background: rgba(199, 244, 59, .055);
    font: 900 13px/1 'Inter', sans-serif;
}

.qa-label,
.qa-btn:nth-child(2) .qa-label {
    color: var(--paper);
    font-size: 9px;
}

.qa-sub,
.qa-btn:nth-child(2) .qa-sub {
    color: rgba(245, 242, 233, .34);
    font-size: 7px;
}

.qa-arrow,
.qa-btn:nth-child(2) .qa-arrow {
    color: var(--lime);
}

.project-section {
    margin-top: clamp(24px, 5vh, 42px);
    padding-top: 19px;
    border-top: 1px solid rgba(245, 242, 233, .08);
}

.project-section::before {
    content: 'THE HOOD // COMMUNITY';
    top: -4px;
    color: rgba(199, 244, 59, .5);
    background: #050806;
    font-family: 'Inter', sans-serif;
}

.hood-socials {
    gap: 8px;
}

.hood-social-btn {
    min-height: 44px;
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 12px;
    background: rgba(13, 20, 15, .86);
}

.hood-social-btn svg {
    color: var(--lime);
}

.hood-social-btn small {
    color: rgba(245, 242, 233, .23);
}

.crew-ticker-wrap {
    margin-top: 13px;
    border-top: 1px solid rgba(199, 244, 59, .16);
    border-bottom: 1px solid rgba(199, 244, 59, .16);
    background: rgba(0, 107, 62, .08);
    transform: none;
}

.crew-ticker {
    color: rgba(199, 244, 59, .42);
    font-family: 'Inter', sans-serif;
    letter-spacing: 1.6px;
}

/* Sheets, rankings and account surfaces */
.account-backdrop,
.tm-backdrop,
.drawer-backdrop {
    background: rgba(1, 4, 2, .76);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.tm-sheet,
.drawer,
.account-sheet,
.wallet-send-sheet {
    color: var(--paper);
    border: 1px solid rgba(199, 244, 59, .17);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 107, 62, .19), transparent 34%),
        #0b120d;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .56);
}

.tm-sheet::before,
.drawer::before {
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--lime), transparent);
}

.account-pill,
.drawer-pill,
.tm-pill,
#profile-sheet .account-pill {
    width: 42px;
    height: 4px;
    border-radius: 8px;
    background: rgba(245, 242, 233, .28);
}

.account-head h2,
.drawer-head h2,
.tm-title,
.wallet-send-sheet h3 {
    color: var(--paper);
    font-family: 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .5px;
    text-shadow: none;
}

.account-kicker,
#profile-sheet .account-kicker,
.wallet-sheet .account-kicker {
    color: var(--lime);
}

.account-close,
.drawer-x,
.tm-x,
.wallet-send-sheet header button {
    border: 1px solid rgba(245, 242, 233, .12);
    border-radius: 10px;
    background: rgba(245, 242, 233, .04);
    box-shadow: none;
}

.profile-identity,
.profile-stats div,
.profile-wallet-status-card,
.ic,
.tm-hero-full,
.tm-info-accordion,
.t3-item,
.lb-row,
.wallet-address-card,
.wallet-assets > div,
.wallet-settings,
.wallet-fee-card,
.wallet-send-available {
    border-color: rgba(245, 242, 233, .1);
    border-radius: 13px;
    background: rgba(18, 27, 21, .86);
    box-shadow: none;
}

.profile-avatar {
    color: var(--ink);
    border: 0;
    border-radius: 12px;
    background: var(--lime);
    box-shadow: none;
}

.profile-stats div:first-child {
    color: var(--paper);
    border-color: rgba(199, 244, 59, .25);
    background: rgba(199, 244, 59, .07);
}

.profile-stats b,
.t3-score,
.lb-score,
.wallet-assets em {
    color: var(--lime);
    font-family: 'Inter', sans-serif;
}

.profile-wallet-status-card,
.wallet-primary,
.wallet-actions button:first-child {
    color: var(--ink);
    border: 0;
    border-radius: 12px;
    background: var(--lime);
    box-shadow: 0 10px 28px rgba(199, 244, 59, .12);
}

.profile-wallet-status-card small {
    color: rgba(5, 8, 6, .58);
}

.tabs {
    border: 1px solid rgba(245, 242, 233, .08);
    border-radius: 12px;
    background: rgba(5, 8, 6, .46);
}

.tab {
    border-radius: 9px;
}

.tab.active {
    color: var(--ink);
    border: 0;
    background: var(--lime);
    box-shadow: none;
}

.tm-clock-num,
.tm-pool-val {
    color: var(--lime);
    font-family: 'Barlow Condensed', Impact, sans-serif;
    text-shadow: none;
}

.tm-dist-badge {
    border-radius: 10px;
}

.tm-my-rank-bar .mr-tag,
.mr-tag,
.lb-you-tag {
    color: var(--ink);
    border-radius: 6px;
    background: var(--lime);
}

.wallet-sheet {
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
}

.wallet-address-card {
    border-left: 3px solid var(--lime);
}

.wallet-address-card::before,
.wallet-address-card::after {
    display: none;
}

.wallet-state {
    border-radius: 9px;
    background: rgba(245, 242, 233, .035);
}

.wallet-actions button,
.wallet-settings button,
.wallet-explorer {
    border-color: rgba(245, 242, 233, .11);
    border-radius: 10px;
    background: rgba(245, 242, 233, .035);
}

.wallet-qr-panel img {
    border: 7px solid var(--paper);
    border-radius: 12px;
}

.wallet-send-sheet {
    border: 1px solid rgba(199, 244, 59, .2);
    border-radius: 22px;
}

.wallet-send-sheet input,
.wallet-amount-input {
    border-color: rgba(245, 242, 233, .13);
    border-radius: 11px;
    background: rgba(5, 8, 6, .66);
}

.wallet-amount-input:focus-within {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(199, 244, 59, .1);
}

.wallet-amount-input button {
    border-radius: 7px;
}

@media (max-height: 720px) {
    .hero-mascot-wrap {
        height: 190px;
    }

    .title-boyz {
        font-size: 34px;
    }

    .hero-kicker {
        margin-top: -26px;
    }

    .hero-manifesto {
        margin-top: 6px;
    }

    .hero-stats {
        margin-top: 9px;
    }

    .project-section {
        margin-top: 22px;
    }
}

@media (max-height: 620px) {
    .hero-mascot-wrap {
        width: 100%;
        height: 155px;
    }

    .hero-title {
        margin-top: 10px;
    }

    .hero-stats {
        display: flex;
    }

    .project-section {
        display: none;
    }
}

@media (min-height: 900px) {
    .hero-mascot-wrap {
        height: 286px;
    }
}

/* High-specificity cleanup for the legacy themed sheets. */
#profile-sheet,
.wallet-sheet,
.drawer {
    color: var(--paper);
    border: 1px solid rgba(199, 244, 59, .17);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 107, 62, .19), transparent 34%),
        #0b120d;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .56);
}

#profile-sheet::before,
.wallet-sheet::before,
.drawer::before {
    z-index: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--lime), transparent);
}

#profile-sheet .account-pill,
.wallet-sheet .account-pill,
.drawer-pill {
    width: 42px;
    height: 4px;
    border-radius: 8px;
    background: rgba(245, 242, 233, .28);
}

#profile-sheet .account-head h2,
.wallet-sheet .account-head h2,
.drawer-top h2 {
    color: var(--paper);
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: 800;
    letter-spacing: .4px;
    text-shadow: none;
    transform: none;
}

#profile-sheet .account-close,
.wallet-sheet .account-close,
.drawer-x,
.wallet-send-sheet header button {
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .12);
    border-radius: 10px;
    background: rgba(245, 242, 233, .04);
    box-shadow: none;
}

.profile-identity {
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 14px;
    background: rgba(18, 27, 21, .86);
}

.profile-avatar {
    color: var(--ink);
    border: 0;
    border-radius: 13px;
    background: var(--lime);
    box-shadow: none;
    transform: none;
}

.profile-identity strong {
    color: var(--paper);
    font: 800 21px/1 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .3px;
}

.profile-identity span {
    color: rgba(199, 244, 59, .62);
}

.profile-stats div,
.profile-stats div:first-child {
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 13px;
    background: rgba(18, 27, 21, .86);
}

.profile-stats div:first-child {
    border-color: rgba(199, 244, 59, .25);
    background: rgba(199, 244, 59, .07);
}

.profile-stats div:first-child small {
    color: rgba(245, 242, 233, .45);
}

.profile-stats div:first-child b,
.profile-stats b {
    color: var(--lime);
    font-family: 'Inter', sans-serif;
}

.drawer-top h2 {
    font-size: 29px;
}

.tab {
    color: rgba(245, 242, 233, .52);
    border: 1px solid rgba(245, 242, 233, .09);
    border-radius: 9px;
    background: rgba(245, 242, 233, .03);
}

.tab.active {
    color: var(--ink);
    border: 0;
    background: var(--lime);
    box-shadow: none;
}

.t3-avatar,
.t3-item.first .t3-avatar,
.lb-avatar {
    border: 1px solid rgba(199, 244, 59, .28);
    border-radius: 10px;
    background: rgba(199, 244, 59, .09);
    box-shadow: none;
}

.lb-row,
.lb-row:nth-child(even) {
    border: 1px solid rgba(245, 242, 233, .09);
    border-radius: 11px;
    background: rgba(18, 27, 21, .76);
}

.lb-row.is-me {
    border-color: rgba(199, 244, 59, .35);
    background: rgba(199, 244, 59, .06);
}

.info-cards .ic,
.info-cards .ic:nth-child(2) {
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 13px;
    background: rgba(18, 27, 21, .86);
    transform: none;
}

.ic-emoji {
    color: var(--ink);
    border: 0;
    border-radius: 10px;
    background: var(--lime);
    box-shadow: none;
    transform: none;
}

.ic-body h3 {
    color: var(--paper);
    font: 800 19px/1 'Barlow Condensed', Impact, sans-serif;
}

.profile-wallet-status-card {
    color: var(--ink);
    border: 0;
    border-radius: 12px;
    background: var(--lime);
    box-shadow: 0 10px 28px rgba(199, 244, 59, .12);
    clip-path: none;
}

.profile-wallet-icon {
    color: var(--lime);
    border: 0;
    border-radius: 9px;
    background: var(--ink);
    transform: none;
}

.wallet-state {
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 9px;
    background: rgba(245, 242, 233, .03);
    font-family: 'Inter', sans-serif;
}

.wallet-address-card {
    border: 1px solid rgba(245, 242, 233, .1);
    border-left: 3px solid var(--lime);
    border-radius: 13px;
    background: rgba(18, 27, 21, .86);
    box-shadow: none;
}

.wallet-primary {
    color: var(--ink);
    border: 0;
    border-radius: 12px;
    background: var(--lime);
    box-shadow: 0 10px 28px rgba(199, 244, 59, .12);
    clip-path: none;
}

.wallet-assets {
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 13px;
    background: rgba(18, 27, 21, .86);
}

.asset-icon {
    color: var(--ink);
    border: 0;
    border-radius: 9px;
    background: var(--lime);
    box-shadow: none;
    transform: none;
}

.wallet-actions button,
.wallet-actions button:nth-child(2) {
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .11);
    border-radius: 10px;
    background: rgba(245, 242, 233, .035);
}

.wallet-actions button:first-child {
    color: var(--ink);
    border: 0;
    background: var(--lime);
}

.wallet-settings button,
.wallet-explorer {
    border-color: rgba(245, 242, 233, .1);
    border-radius: 9px;
    background: rgba(245, 242, 233, .03);
}

.wallet-qr-panel {
    border: 0;
    border-radius: 13px;
    box-shadow: none;
}

.wallet-send-sheet {
    border: 1px solid rgba(199, 244, 59, .18);
    border-radius: 22px 22px 0 0;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 107, 62, .18), transparent 34%),
        #0b120d;
    box-shadow: 0 -24px 70px rgba(0, 0, 0, .58);
}

.wallet-send-sheet h3 {
    color: var(--paper);
    font-family: 'Barlow Condensed', Impact, sans-serif;
    text-shadow: none;
}

.wallet-send-available,
.wallet-fee-card {
    border: 1px solid rgba(245, 242, 233, .09);
    border-left: 3px solid var(--lime);
    border-radius: 10px;
    background: rgba(18, 27, 21, .8);
}

.wallet-send-sheet input,
.wallet-send-sheet select,
.wallet-amount-input {
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .13);
    border-radius: 11px;
    background: rgba(5, 8, 6, .66);
}

.wallet-send-sheet input::placeholder {
    color: rgba(245, 242, 233, .28);
}

.wallet-amount-input input {
    color: var(--paper);
}

.wallet-amount-input:focus-within,
.wallet-send-sheet input:focus,
.wallet-send-sheet select:focus {
    border-color: var(--lime);
    box-shadow: 0 0 0 3px rgba(199, 244, 59, .1);
}

@media (min-width: 560px) {
    #profile-sheet,
    .drawer,
    .wallet-sheet,
    .wallet-send-sheet {
        border-bottom: 1px solid rgba(199, 244, 59, .17);
        border-radius: 24px;
    }
}

/* ═══════════════════════════════════════════════════════════
   $GOOD HOOD VAULT — focused wallet experience
   The account shell keeps its controls fixed. Transaction flows
   render through a body portal with fixed header/footer and an
   independently scrolling body, so mobile keyboards never hide X.
   ═══════════════════════════════════════════════════════════ */
.wallet-sheet {
    height: min(94dvh, 780px);
    max-height: min(94dvh, 780px);
    display: flex;
    overflow: hidden;
    flex-direction: column;
    padding: 10px 16px max(18px, var(--app-safe-bottom, 0px));
}

.wallet-sheet .account-pill,
.wallet-sheet .account-head,
.wallet-sheet .wallet-loader {
    flex: 0 0 auto;
}

.wallet-sheet .account-head {
    position: relative;
    z-index: 5;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(245, 242, 233, .08);
}

.wallet-sheet .account-close {
    width: 42px;
    height: 42px;
    flex: 0 0 auto;
    font-size: 27px;
}

#wallet-hybrid-root {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-color: rgba(199, 244, 59, .28) transparent;
    scrollbar-width: thin;
}

.wallet-app {
    gap: 12px;
    padding: 1px 1px 10px;
}

.wallet-status-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.wallet-status-row .wallet-state {
    min-width: 0;
    flex: 1;
    overflow: hidden;
    padding: 8px 10px;
    border: 0;
    color: rgba(245, 242, 233, .54);
    background: rgba(245, 242, 233, .035);
    font-size: 8px;
    letter-spacing: .7px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-status-row .wallet-state.ready {
    color: var(--lime);
    background: rgba(199, 244, 59, .065);
}

.wallet-status-row .wallet-state::before {
    display: inline-block;
    font-size: 7px;
    animation: good-wallet-pulse 2.2s ease-in-out infinite;
}

.wallet-guard-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    padding: 7px 9px;
    color: rgba(245, 242, 233, .7);
    border: 1px solid rgba(199, 244, 59, .16);
    border-radius: 999px;
    background: rgba(0, 107, 62, .12);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}

.wallet-guard-chip .wallet-icon {
    width: 12px;
    height: 12px;
    color: var(--lime);
}

.wallet-vault-hero {
    position: relative;
    min-height: 142px;
    display: flex;
    overflow: hidden;
    align-items: stretch;
    border: 1px solid rgba(199, 244, 59, .19);
    border-radius: 18px;
    background:
        radial-gradient(circle at 84% 12%, rgba(199, 244, 59, .15), transparent 35%),
        linear-gradient(135deg, rgba(0, 107, 62, .3), rgba(8, 15, 10, .96) 58%);
    box-shadow: inset 0 1px 0 rgba(245, 242, 233, .06), 0 18px 42px rgba(0, 0, 0, .22);
}

.wallet-vault-hero::after {
    content: '';
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent 5%, var(--lime) 45%, transparent 90%);
    opacity: .58;
}

.wallet-vault-copy {
    position: relative;
    z-index: 2;
    min-width: 0;
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    justify-content: center;
    padding: 18px 8px 17px 17px;
}

.wallet-vault-eyebrow {
    color: rgba(199, 244, 59, .74);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: 1.25px;
}

.wallet-vault-copy > strong {
    display: flex;
    min-width: 0;
    align-items: baseline;
    gap: 7px;
    margin: 7px 0 12px;
    color: var(--paper);
    font: 800 clamp(30px, 9vw, 42px)/.95 'Barlow Condensed', Impact, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -.6px;
}

.wallet-vault-copy > strong small {
    color: var(--lime);
    font: 800 11px/1 'Inter', sans-serif;
    letter-spacing: .5px;
}

.wallet-chain-pill {
    width: max-content;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 9px;
    color: rgba(245, 242, 233, .68);
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 999px;
    background: rgba(5, 8, 6, .5);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}

.wallet-chain-pill i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 10px rgba(199, 244, 59, .72);
}

.wallet-vault-guardian {
    position: relative;
    width: 116px;
    flex: 0 0 116px;
}

.wallet-vault-guardian::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    background: linear-gradient(90deg, #0b140d 0, transparent 42%), linear-gradient(0deg, #071008 0, transparent 56%);
}

.wallet-vault-guardian img {
    width: 150px;
    height: 166px;
    position: absolute;
    top: -9px;
    right: -21px;
    object-fit: cover;
    object-position: 70% 31%;
    filter: saturate(.92) contrast(1.03);
}

.wallet-vault-guardian span {
    position: absolute;
    z-index: 3;
    right: 10px;
    bottom: 11px;
    color: rgba(245, 242, 233, .68);
    font-size: 6px;
    font-weight: 900;
    line-height: 1.35;
    letter-spacing: .9px;
    text-align: right;
}

.wallet-address-card {
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 11px 12px;
    border: 1px solid rgba(245, 242, 233, .08);
    border-left: 2px solid rgba(199, 244, 59, .55);
    border-radius: 12px;
    background: rgba(18, 27, 21, .62);
}

.wallet-address-card > div {
    min-width: 0;
    flex: 1;
}

.wallet-address-card small {
    color: rgba(245, 242, 233, .38);
    font-size: 7px;
    letter-spacing: 1px;
}

.wallet-address-card code {
    overflow: hidden;
    margin: 5px 0 0;
    color: rgba(245, 242, 233, .84);
    font: 700 10px/1.2 'Courier New', monospace;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-address-card > span {
    flex: 0 0 auto;
    color: var(--lime);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .5px;
}

.wallet-assets {
    border-color: rgba(245, 242, 233, .08);
    border-radius: 13px;
    background: rgba(18, 27, 21, .58);
}

.wallet-assets > div {
    padding: 11px 12px;
}

.wallet-assets .asset-icon,
.wallet-send-asset .asset-icon {
    width: 36px;
    height: 36px;
    color: var(--ink);
    border: 0;
    border-radius: 11px;
    background: var(--lime);
    box-shadow: 0 6px 18px rgba(199, 244, 59, .12);
    transform: none;
}

.wallet-assets small {
    color: rgba(245, 242, 233, .36);
    letter-spacing: .55px;
}

.wallet-assets em {
    color: var(--paper);
    font-size: 11px;
}

.wallet-actions {
    gap: 8px;
}

.wallet-actions button,
.wallet-actions button:nth-child(2) {
    min-height: 62px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 8px 6px;
    color: rgba(245, 242, 233, .78);
    border: 1px solid rgba(245, 242, 233, .09);
    border-radius: 13px;
    background: rgba(245, 242, 233, .035);
}

.wallet-actions button:first-child {
    color: var(--ink);
    border: 0;
    background: var(--lime);
    box-shadow: 0 12px 26px rgba(199, 244, 59, .1);
}

.wallet-actions button .wallet-icon {
    width: 19px;
    height: 19px;
    flex: 0 0 auto;
}

.wallet-actions button > span {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    font-size: 9px;
    line-height: 1;
    letter-spacing: .5px;
}

.wallet-actions button small {
    margin-top: 5px;
    color: currentColor;
    font-size: 6px;
    letter-spacing: .7px;
    opacity: .48;
}

.wallet-section-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 10px;
    margin: 3px 2px -4px;
}

.wallet-section-heading span {
    color: rgba(245, 242, 233, .76);
    font: 800 13px/1 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .7px;
}

.wallet-section-heading small {
    color: rgba(199, 244, 59, .42);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .8px;
}

.wallet-settings {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 7px;
}

.wallet-settings button {
    min-width: 0;
    min-height: 52px;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-direction: column;
    padding: 9px;
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .08);
    border-radius: 11px;
    background: rgba(245, 242, 233, .025);
    text-align: left;
    text-decoration: none;
}

.wallet-settings button small {
    overflow: hidden;
    width: 100%;
    color: rgba(245, 242, 233, .34);
    font-size: 6px;
    letter-spacing: .55px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-settings button strong {
    overflow: hidden;
    width: 100%;
    margin-top: 6px;
    color: rgba(245, 242, 233, .82);
    font-size: 7px;
    letter-spacing: .25px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-explorer,
.wallet-transaction-link {
    display: flex;
    min-height: 34px;
    align-items: center;
    justify-content: center;
    gap: 7px;
    padding: 7px 10px;
    color: rgba(199, 244, 59, .72);
    border: 0;
    border-radius: 9px;
    background: rgba(199, 244, 59, .045);
}

.wallet-explorer .wallet-icon {
    width: 12px;
    height: 12px;
}

.wallet-security-note {
    margin-top: 0;
}

.wallet-privy-badge {
    height: 13px;
    opacity: .62;
}

.wallet-setup-card {
    position: relative;
    overflow: hidden;
    padding: 16px;
    border: 1px solid rgba(199, 244, 59, .16);
    border-radius: 17px;
    background:
        radial-gradient(circle at 100% 0, rgba(199, 244, 59, .11), transparent 38%),
        linear-gradient(145deg, rgba(0, 107, 62, .2), rgba(13, 21, 15, .94) 52%);
    box-shadow: inset 0 1px 0 rgba(245, 242, 233, .05), 0 18px 42px rgba(0, 0, 0, .2);
}

.wallet-setup-card::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 72px;
    height: 2px;
    background: var(--lime);
    box-shadow: 0 0 18px rgba(199, 244, 59, .5);
}

.wallet-setup-card-head {
    display: flex;
    align-items: center;
    gap: 11px;
}

.wallet-setup-card-head > span {
    width: 40px;
    height: 40px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--ink);
    border-radius: 12px;
    background: var(--lime);
    box-shadow: 0 8px 24px rgba(199, 244, 59, .13);
}

.wallet-setup-card-head .wallet-icon {
    width: 20px;
    height: 20px;
}

.wallet-setup-card-head > div {
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.wallet-setup-card-head small {
    color: rgba(199, 244, 59, .65);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: 1.1px;
}

.wallet-setup-card-head strong {
    margin-top: 5px;
    color: var(--paper);
    font: 800 19px/1 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .45px;
}

.wallet-setup-card > p {
    margin: 14px 0 13px;
    color: rgba(245, 242, 233, .55);
    font-size: 9px;
    font-weight: 600;
    line-height: 1.58;
}

.wallet-setup-card > code {
    display: block;
    margin: -2px 0 13px;
    color: var(--lime);
    font: 800 10px/1.2 'Courier New', monospace;
    letter-spacing: .3px;
}

.wallet-setup-trust {
    display: flex;
    gap: 5px;
    margin-bottom: 13px;
}

.wallet-setup-trust span {
    min-width: 0;
    flex: 1;
    padding: 7px 4px;
    color: rgba(245, 242, 233, .56);
    border: 1px solid rgba(245, 242, 233, .07);
    border-radius: 8px;
    background: rgba(245, 242, 233, .025);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .45px;
    text-align: center;
}

.wallet-setup-card .wallet-primary {
    min-height: 50px;
    border-radius: 13px;
}

.wallet-setup-card-ready {
    border-color: rgba(245, 242, 233, .12);
}

.wallet-setup-card-ready .wallet-setup-card-head > span {
    color: var(--lime);
    border: 1px solid rgba(199, 244, 59, .24);
    background: rgba(199, 244, 59, .07);
}

.wallet-safety-review {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    color: var(--paper);
    border: 1px solid rgba(199, 244, 59, .12);
    border-radius: 12px;
    background: linear-gradient(110deg, rgba(0, 107, 62, .13), rgba(245, 242, 233, .025));
    text-align: left;
    cursor: pointer;
}

.wallet-safety-review > span:first-child {
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--lime);
    border: 1px solid rgba(199, 244, 59, .16);
    border-radius: 10px;
    background: rgba(199, 244, 59, .055);
}

.wallet-safety-review > span:first-child .wallet-icon {
    width: 17px;
    height: 17px;
}

.wallet-safety-review > span:nth-child(2) {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.wallet-safety-review small {
    color: rgba(199, 244, 59, .58);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .9px;
}

.wallet-safety-review strong {
    margin-top: 4px;
    color: rgba(245, 242, 233, .86);
    font-size: 8px;
    letter-spacing: .35px;
}

.wallet-safety-review em {
    overflow: hidden;
    margin-top: 4px;
    color: rgba(245, 242, 233, .34);
    font-size: 7px;
    font-style: normal;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.wallet-safety-review > b {
    color: rgba(199, 244, 59, .62);
    font: 400 24px/1 'Inter', sans-serif;
}

.wallet-safety-review:active {
    border-color: rgba(199, 244, 59, .35);
    background: rgba(199, 244, 59, .08);
}

.wallet-icon {
    width: 18px;
    height: 18px;
    display: block;
}

.wallet-flow-backdrop {
    position: fixed;
    z-index: 1200;
    inset: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-top: max(10px, env(safe-area-inset-top));
    background: rgba(1, 4, 2, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wallet-flow-sheet,
.wallet-send-sheet,
.wallet-receive-sheet {
    width: min(100%, 520px);
    height: min(94dvh, 760px);
    max-height: calc(100dvh - max(10px, env(safe-area-inset-top)));
    display: grid;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr) auto;
    box-sizing: border-box;
    padding: 0;
    color: var(--paper);
    border: 1px solid rgba(199, 244, 59, .18);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    background:
        radial-gradient(circle at 100% 0, rgba(0, 107, 62, .2), transparent 34%),
        #0b120d;
    box-shadow: 0 -24px 80px rgba(0, 0, 0, .66);
}

.wallet-flow-head {
    min-height: 74px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 16px 13px;
    margin: 0;
    border-bottom: 1px solid rgba(245, 242, 233, .08);
    background: rgba(8, 14, 9, .88);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
}

.wallet-flow-head > div > span {
    display: block;
    color: var(--lime);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.4px;
}

.wallet-flow-head h3,
.wallet-send-sheet .wallet-flow-head h3 {
    margin: 3px 0 0;
    color: var(--paper);
    font: 800 28px/.9 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .4px;
}

.wallet-flow-head p,
.wallet-send-sheet .wallet-flow-head p {
    margin: 5px 0 0;
    color: rgba(245, 242, 233, .4);
    font-size: 7px;
    font-weight: 800;
    letter-spacing: .8px;
    text-transform: uppercase;
}

.wallet-flow-head button,
.wallet-send-sheet .wallet-flow-head button {
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    padding: 0;
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .12);
    border-radius: 13px;
    background: rgba(245, 242, 233, .045);
    box-shadow: none;
    font-size: 28px;
    line-height: 1;
    cursor: pointer;
}

.wallet-flow-head button:disabled {
    opacity: .38;
}

.wallet-flow-scroll {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px 16px 18px;
    scrollbar-color: rgba(199, 244, 59, .3) transparent;
    scrollbar-width: thin;
}

.wallet-flow-footer {
    padding: 11px 16px max(13px, env(safe-area-inset-bottom));
    border-top: 1px solid rgba(245, 242, 233, .08);
    background: rgba(8, 14, 9, .94);
    box-shadow: 0 -16px 32px rgba(0, 0, 0, .2);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
}

.wallet-flow-footer .wallet-primary {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border-radius: 13px;
    box-shadow: 0 12px 30px rgba(199, 244, 59, .12);
}

.wallet-flow-footer .wallet-primary .wallet-icon {
    width: 17px;
    height: 17px;
}

.wallet-flow-footer > p {
    margin: 8px 0 0;
    color: rgba(245, 242, 233, .34);
    font-size: 7px;
    font-weight: 700;
    line-height: 1.4;
    text-align: center;
}

.wallet-onboarding-sheet {
    grid-template-rows: auto 4px minmax(0, 1fr) auto;
}

.wallet-onboarding-head {
    min-height: 78px;
}

.wallet-onboarding-progress {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 0 16px;
    background: rgba(8, 14, 9, .88);
}

.wallet-onboarding-progress i {
    height: 2px;
    align-self: center;
    border-radius: 99px;
    background: rgba(245, 242, 233, .09);
    transition: background .22s ease, box-shadow .22s ease;
}

.wallet-onboarding-progress i.active {
    background: var(--lime);
    box-shadow: 0 0 10px rgba(199, 244, 59, .42);
}

.wallet-onboarding-scroll {
    padding-top: 18px;
}

.wallet-onboarding-symbol {
    position: relative;
    width: 62px;
    height: 62px;
    display: grid;
    place-items: center;
    margin-bottom: 17px;
    color: var(--lime);
    border: 1px solid rgba(199, 244, 59, .2);
    border-radius: 20px;
    background:
        radial-gradient(circle, rgba(199, 244, 59, .1), transparent 68%),
        rgba(0, 107, 62, .08);
    box-shadow: inset 0 0 0 6px rgba(199, 244, 59, .02), 0 13px 32px rgba(0, 0, 0, .22);
}

.wallet-onboarding-symbol::after {
    content: '';
    position: absolute;
    right: -7px;
    bottom: 9px;
    width: 14px;
    height: 2px;
    background: var(--lime);
    box-shadow: 0 0 10px rgba(199, 244, 59, .55);
}

.wallet-onboarding-symbol > span {
    position: absolute;
    top: 5px;
    right: 6px;
    color: rgba(245, 242, 233, .24);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .3px;
}

.wallet-onboarding-symbol .wallet-icon {
    width: 27px;
    height: 27px;
}

.wallet-onboarding-kicker {
    display: block;
    color: rgba(199, 244, 59, .68);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1.3px;
}

.wallet-onboarding-scroll > h4 {
    max-width: 360px;
    margin: 7px 0 10px;
    color: var(--paper);
    font: 800 clamp(26px, 8vw, 34px)/.94 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .25px;
}

.wallet-onboarding-lead {
    max-width: 440px;
    margin: 0;
    color: rgba(245, 242, 233, .57);
    font-size: 10px;
    font-weight: 600;
    line-height: 1.58;
}

.wallet-onboarding-facts {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin-top: 17px;
}

.wallet-onboarding-facts > div {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 11px;
    border: 1px solid rgba(245, 242, 233, .07);
    border-radius: 11px;
    background: rgba(245, 242, 233, .025);
}

.wallet-onboarding-facts > div > span {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: var(--ink);
    border-radius: 6px;
    background: var(--lime);
}

.wallet-onboarding-facts .wallet-icon {
    width: 12px;
    height: 12px;
    stroke-width: 2.4;
}

.wallet-onboarding-facts p {
    margin: 1px 0 0;
    color: rgba(245, 242, 233, .67);
    font-size: 8px;
    font-weight: 650;
    line-height: 1.5;
}

.wallet-onboarding-note {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 10px;
    padding: 10px 11px;
    border-left: 2px solid rgba(199, 244, 59, .56);
    border-radius: 0 9px 9px 0;
    background: rgba(0, 107, 62, .1);
}

.wallet-onboarding-note .wallet-icon {
    width: 16px;
    height: 16px;
    flex: 0 0 auto;
    color: var(--lime);
}

.wallet-onboarding-note p {
    margin: 0;
    color: rgba(199, 244, 59, .56);
    font-size: 7px;
    font-weight: 750;
    line-height: 1.48;
}

.wallet-onboarding-link {
    width: max-content;
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 12px 1px 0;
    color: rgba(245, 242, 233, .54);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .55px;
    text-decoration: none;
}

.wallet-onboarding-link .wallet-icon {
    width: 12px;
    height: 12px;
    color: var(--lime);
}

.wallet-onboarding-consent {
    display: block;
    margin-top: 12px;
    cursor: pointer;
}

.wallet-onboarding-consent input {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}

.wallet-onboarding-consent > span {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px;
    color: rgba(245, 242, 233, .68);
    border: 1px solid rgba(199, 244, 59, .16);
    border-radius: 11px;
    background: rgba(199, 244, 59, .035);
    font-size: 8px;
    font-weight: 700;
    line-height: 1.45;
}

.wallet-onboarding-consent > span > i {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    color: transparent;
    border: 1px solid rgba(245, 242, 233, .22);
    border-radius: 6px;
    background: rgba(5, 8, 6, .45);
}

.wallet-onboarding-consent .wallet-icon {
    width: 12px;
    height: 12px;
}

.wallet-onboarding-consent input:checked + span {
    border-color: rgba(199, 244, 59, .4);
    background: rgba(199, 244, 59, .07);
}

.wallet-onboarding-consent input:checked + span > i {
    color: var(--ink);
    border-color: var(--lime);
    background: var(--lime);
}

.wallet-onboarding-consent input:focus-visible + span {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

.wallet-onboarding-footer > div {
    display: flex;
    gap: 8px;
}

.wallet-onboarding-footer .wallet-primary {
    min-width: 0;
    flex: 1;
}

.wallet-onboarding-back {
    min-width: 76px;
    min-height: 50px;
    padding: 0 14px;
    color: rgba(245, 242, 233, .66);
    border: 1px solid rgba(245, 242, 233, .1);
    border-radius: 13px;
    background: rgba(245, 242, 233, .035);
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .7px;
}

.wallet-send-asset {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
    padding: 11px;
    border: 1px solid rgba(245, 242, 233, .09);
    border-radius: 13px;
    background: rgba(18, 27, 21, .78);
}

.wallet-send-asset > span {
    min-width: 0;
    display: flex;
    flex: 1;
    flex-direction: column;
}

.wallet-send-asset small {
    color: rgba(245, 242, 233, .36);
    font-size: 6px;
    font-weight: 900;
    letter-spacing: .75px;
}

.wallet-send-asset strong {
    margin-top: 5px;
    color: var(--paper);
    font-size: 10px;
}

.wallet-send-asset em {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    color: var(--lime);
    font-size: 9px;
    font-weight: 900;
    font-style: normal;
    font-variant-numeric: tabular-nums;
}

.wallet-send-asset em small {
    margin-bottom: 5px;
}

.wallet-send-sheet label {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 13px;
    color: rgba(245, 242, 233, .5);
}

.wallet-send-sheet label > span {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 8px;
    font-weight: 900;
    letter-spacing: .9px;
}

.wallet-send-sheet label > span b {
    width: 20px;
    height: 20px;
    display: grid;
    place-items: center;
    color: var(--ink);
    border-radius: 6px;
    background: var(--lime);
    font-size: 7px;
}

.wallet-send-sheet input,
.wallet-amount-input {
    min-height: 48px;
    color: var(--paper);
    border: 1px solid rgba(245, 242, 233, .12);
    border-radius: 12px;
    background: rgba(5, 8, 6, .72);
    box-shadow: inset 0 1px 0 rgba(245, 242, 233, .025);
}

.wallet-send-sheet input {
    padding: 13px 14px;
    font-size: 13px;
}

.wallet-amount-input input {
    min-height: 46px;
    padding: 12px 14px;
}

.wallet-amount-input button {
    margin: 6px;
    padding: 0 13px;
    color: var(--ink);
    border: 0;
    border-radius: 8px;
    background: var(--lime);
}

.wallet-fee-card {
    margin: 14px 0 11px;
    padding: 8px 12px;
    border: 1px solid rgba(245, 242, 233, .08);
    border-left: 2px solid rgba(199, 244, 59, .52);
    border-radius: 12px;
    background: rgba(18, 27, 21, .68);
}

.wallet-fee-card > div {
    min-height: 26px;
    color: rgba(245, 242, 233, .42);
    font-size: 8px;
}

.wallet-fee-card strong {
    color: rgba(245, 242, 233, .86);
    font-size: 8px;
}

.wallet-fee-card > div:nth-child(3) strong {
    color: var(--lime);
}

.wallet-fee-card small {
    color: rgba(199, 244, 59, .5);
}

.wallet-quote-message {
    padding: 9px 10px;
    border: 1px solid rgba(199, 244, 59, .14);
    border-radius: 9px;
    background: rgba(199, 244, 59, .045);
}

.wallet-guard-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 11px 12px;
    border: 1px solid rgba(199, 244, 59, .12);
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(0, 107, 62, .14), rgba(199, 244, 59, .025));
}

.wallet-guard-callout > .wallet-icon {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    color: var(--lime);
}

.wallet-guard-callout strong {
    display: block;
    color: rgba(245, 242, 233, .78);
    font-size: 8px;
    letter-spacing: .5px;
}

.wallet-guard-callout p {
    margin: 5px 0 0;
    color: rgba(245, 242, 233, .4);
    font-size: 8px;
    line-height: 1.45;
}

.wallet-qr-panel {
    padding: 14px;
    border: 1px solid rgba(245, 242, 233, .08);
    border-radius: 16px;
    background: var(--paper);
}

.wallet-qr-panel > span {
    display: block;
    margin-bottom: 10px;
    color: rgba(5, 8, 6, .56);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: 1px;
}

.wallet-qr-panel img {
    width: min(220px, 100%);
    border: 0;
    border-radius: 11px;
}

.wallet-qr-panel p {
    max-width: 270px;
    margin: 10px auto 0;
    color: rgba(5, 8, 6, .58);
    font-size: 7px;
    line-height: 1.45;
    text-transform: none;
}

.wallet-receive-address {
    min-width: 0;
    margin: 12px 0;
    padding: 11px 12px;
    border: 1px solid rgba(245, 242, 233, .08);
    border-radius: 12px;
    background: rgba(18, 27, 21, .72);
}

.wallet-receive-address small {
    display: block;
    color: rgba(199, 244, 59, .58);
    font-size: 7px;
    font-weight: 900;
    letter-spacing: .8px;
}

.wallet-receive-address code {
    display: block;
    overflow-wrap: anywhere;
    margin-top: 7px;
    color: rgba(245, 242, 233, .76);
    font-size: 9px;
    line-height: 1.45;
    user-select: text;
}

.wallet-primary:focus-visible,
.wallet-actions button:focus-visible,
.wallet-settings button:focus-visible,
.wallet-explorer:focus-visible,
.wallet-flow-head button:focus-visible,
.wallet-send-sheet input:focus-visible,
.wallet-amount-input:focus-within {
    outline: 2px solid var(--lime);
    outline-offset: 2px;
}

@keyframes good-wallet-pulse {
    0%, 100% { opacity: .48; transform: scale(.9); }
    50% { opacity: 1; transform: scale(1.08); }
}

@media (max-width: 350px) {
    .wallet-vault-guardian {
        width: 94px;
        flex-basis: 94px;
    }
    .wallet-vault-guardian img {
        right: -31px;
    }
    .wallet-actions button {
        gap: 5px;
    }
    .wallet-actions button .wallet-icon {
        width: 16px;
        height: 16px;
    }
    .wallet-settings button {
        padding: 8px 6px;
    }
}

@media (min-width: 560px) {
    .wallet-sheet {
        height: min(88dvh, 780px);
        border-bottom: 1px solid rgba(199, 244, 59, .17);
        border-radius: 24px;
    }
    .wallet-flow-backdrop {
        align-items: center;
        padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
    }
    .wallet-flow-sheet,
    .wallet-send-sheet,
    .wallet-receive-sheet {
        height: min(90dvh, 760px);
        border-bottom: 1px solid rgba(199, 244, 59, .18);
        border-radius: 24px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wallet-status-row .wallet-state::before {
        animation: none;
    }
}

/* ============================================================
   $GOOD HOOD COMMAND CENTER
   Editorial hub experience layered over the stable application.
   ============================================================ */

:root {
    --command-bg: #030604;
    --command-panel: rgba(10, 17, 12, .82);
    --command-panel-solid: #0a110c;
    --command-line: rgba(231, 238, 221, .11);
    --command-muted: rgba(231, 238, 221, .46);
    --command-lime: #c9ff38;
    --command-lime-soft: #a8d72a;
    --command-bone: #e7eedd;
    --command-copper: #b66a43;
    --command-green: #0b6b42;
    --command-shadow: 0 24px 70px rgba(0, 0, 0, .42);
}

html,
body {
    background: var(--command-bg);
}

body {
    color: var(--command-bone);
    font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
}

.bg-effects {
    background:
        radial-gradient(ellipse at 50% -6%, rgba(14, 112, 68, .42), transparent 48%),
        linear-gradient(180deg, #06140c 0%, #030604 40%, #020403 100%);
}

.grid-overlay {
    opacity: .68;
    background-image:
        linear-gradient(rgba(201, 255, 56, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(201, 255, 56, .025) 1px, transparent 1px);
    background-size: 54px 54px;
    mask-image: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .6) 62%, transparent 100%);
}

.hood-spotlight {
    position: absolute;
    width: min(130vw, 620px);
    height: min(130vw, 620px);
    top: 18vh;
    left: 50%;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 255, 56, .065), transparent 66%);
    transform: translateX(-50%);
}

.hood-noise {
    position: absolute;
    inset: 0;
    opacity: .17;
    background-image:
        url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.34'/%3E%3C/svg%3E");
    mix-blend-mode: soft-light;
}

.orb-a {
    width: 430px;
    height: 430px;
    top: -250px;
    left: -190px;
    background: rgba(25, 157, 94, .26);
}

.orb-b {
    width: 330px;
    height: 330px;
    right: -210px;
    bottom: 12%;
    background: rgba(201, 255, 56, .07);
}

#app {
    max-width: 500px;
    padding:
        max(4px, var(--app-safe-top))
        max(14px, var(--app-safe-right))
        calc(max(14px, var(--app-safe-bottom)) + 92px)
        max(14px, var(--app-safe-left));
    scroll-behavior: smooth;
    scrollbar-width: none;
}

#app::-webkit-scrollbar {
    display: none;
}

.game-section {
    gap: 14px;
    padding-top: 0;
}

.nav {
    position: sticky;
    z-index: 70;
    top: 0;
    min-height: 58px;
    margin: 0 -3px;
    padding: 9px 3px 8px;
    border: 0;
    background: linear-gradient(180deg, rgba(3, 8, 5, .98) 0%, rgba(3, 8, 5, .86) 72%, transparent 100%);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

.nav-brand {
    gap: 10px;
}

.nav-mark {
    width: 38px;
    height: 38px;
    overflow: hidden;
    border: 0;
    border-radius: 12px;
    background: #153e24;
    box-shadow:
        0 8px 26px rgba(201, 255, 56, .14),
        0 0 0 1px rgba(201, 255, 56, .26);
}

.good-profile-mark {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
    border-radius: inherit;
}

.nav-name {
    display: flex;
    flex-direction: column;
    gap: 4px;
    color: var(--command-bone);
    font: 900 21px/.8 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: 1.25px;
}

.nav-name::after {
    display: none;
}

.nav-name small {
    color: rgba(231, 238, 221, .34);
    font: 700 6px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.72px;
}

.hero {
    align-items: stretch;
    text-align: left;
}

.hero-mascot-wrap {
    isolation: isolate;
    width: 100%;
    height: clamp(360px, 48dvh, 430px);
    min-height: 360px;
    margin: 0;
    overflow: hidden;
    border: 1px solid rgba(231, 238, 221, .13);
    border-radius: 28px;
    background: #010302;
    box-shadow: var(--command-shadow);
}

.hero-mascot-wrap::before {
    content: '';
    position: absolute;
    z-index: 2;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(180deg, rgba(2, 6, 3, .26) 0%, transparent 28%, transparent 45%, rgba(2, 5, 3, .84) 83%, #020503 100%),
        linear-gradient(90deg, rgba(2, 8, 4, .32), transparent 38% 74%, rgba(201, 255, 56, .035));
}

.hero-mascot-wrap::after {
    content: '';
    position: absolute;
    z-index: 3;
    inset: 10px;
    pointer-events: none;
    border: 1px solid rgba(231, 238, 221, .085);
    border-radius: 20px;
    background:
        linear-gradient(var(--command-lime), var(--command-lime)) 0 0 / 32px 1px no-repeat,
        linear-gradient(var(--command-lime), var(--command-lime)) 0 0 / 1px 32px no-repeat,
        linear-gradient(var(--command-lime), var(--command-lime)) 100% 100% / 32px 1px no-repeat,
        linear-gradient(var(--command-lime), var(--command-lime)) 100% 100% / 1px 32px no-repeat;
}

.mascot-ring {
    display: none;
}

.hero-mascot {
    z-index: 1;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: 50% 8%;
    filter: saturate(.93) contrast(1.08) brightness(.91);
    transform: scale(1.015);
    animation: good-hero-breathe 8s ease-in-out infinite alternate;
}

.hero-stage-meta {
    position: absolute;
    z-index: 5;
    top: 24px;
    left: 23px;
    right: 23px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hero-stage-meta span,
.hero-stage-meta b {
    color: rgba(231, 238, 221, .7);
    font: 700 7px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.32px;
}

.hero-stage-meta span {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hero-stage-meta i {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--command-lime);
    box-shadow: 0 0 12px rgba(201, 255, 56, .9);
    animation: good-status-pulse 2s ease-in-out infinite;
}

.hero-stage-meta b {
    color: rgba(231, 238, 221, .3);
}

.hero-stage-copy {
    position: absolute;
    z-index: 5;
    right: 24px;
    bottom: 25px;
    left: 24px;
}

.hero-kicker {
    display: inline-flex;
    margin: 0 0 12px;
    padding: 7px 10px 6px;
    color: #061008;
    border: 0;
    border-radius: 6px;
    background: var(--command-lime);
    box-shadow: 0 8px 24px rgba(201, 255, 56, .18);
    font: 800 7px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.45px;
}

.hero-title {
    margin: 0;
}

.title-boyz {
    color: var(--command-bone);
    font: 900 clamp(52px, 15.2vw, 70px)/.76 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: -1.45px;
    text-wrap: balance;
    text-shadow: 0 12px 38px rgba(0, 0, 0, .74);
}

.title-boyz::first-letter {
    color: var(--command-bone);
}

.hero-manifesto {
    margin-top: 12px;
    color: rgba(231, 238, 221, .62);
    font: 700 8px/1 'Space Grotesk', sans-serif;
    letter-spacing: 2px;
}

.hero-manifesto span {
    padding: 0 6px;
    color: var(--command-lime);
}

.hero-stage-caption {
    position: absolute;
    z-index: 5;
    right: 16px;
    top: 50%;
    color: rgba(231, 238, 221, .28);
    font: 700 6px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.7px;
    transform: translate(50%, -50%) rotate(90deg);
}

.hero-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: calc(100% - 20px);
    margin: -1px auto 0;
    padding: 12px 0 10px;
    gap: 0;
    border: 1px solid rgba(231, 238, 221, .1);
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: rgba(11, 18, 13, .84);
    box-shadow: 0 14px 28px rgba(0, 0, 0, .18);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
}

.hs-chip {
    min-width: 0;
    min-height: 38px;
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    justify-content: center;
    gap: 7px;
    padding: 0 13px;
    color: var(--command-bone);
    border: 0;
    border-radius: 0;
    background: transparent;
}

.hs-chip + .hs-chip {
    border-left: 1px solid rgba(231, 238, 221, .1);
}

.hs-label {
    color: rgba(231, 238, 221, .34);
    font: 700 6px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.05px;
    white-space: nowrap;
}

.hs-value-row {
    display: flex;
    align-items: center;
    gap: 7px;
}

.hs-emoji {
    color: var(--command-lime);
    font: 800 10px/1 'Space Grotesk', sans-serif;
}

.hs-val {
    color: var(--command-bone);
    font: 700 16px/.8 'Space Grotesk', sans-serif;
    font-variant-numeric: tabular-nums;
}

.play-modes {
    gap: 9px;
    margin-top: 6px;
}

.play-modes-heading {
    padding: 0 2px;
    color: var(--command-lime);
    font: 700 7px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.75px;
}

.play-modes-heading small {
    color: rgba(231, 238, 221, .25);
    font: 700 6px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.4px;
}

.cta-btn {
    overflow: hidden;
    color: #061008;
    border: 0;
    border-radius: 22px;
    background:
        radial-gradient(circle at 86% 12%, rgba(255, 255, 255, .42), transparent 24%),
        linear-gradient(135deg, #d8ff61 0%, var(--command-lime) 48%, #a8d72a 100%);
    box-shadow:
        0 18px 45px rgba(113, 158, 19, .24),
        inset 0 1px 0 rgba(255, 255, 255, .56);
}

.cta-btn::before {
    display: none;
}

.cta-btn::after {
    content: '';
    position: absolute;
    inset: 0;
    opacity: .18;
    pointer-events: none;
    background:
        repeating-linear-gradient(118deg, transparent 0 18px, rgba(5, 8, 6, .14) 19px, transparent 20px);
    mask-image: linear-gradient(90deg, transparent, #000);
}

.cta-inner {
    position: relative;
    z-index: 2;
    min-height: 91px;
    padding: 18px 17px;
    gap: 12px;
}

.cta-index {
    align-self: flex-start;
    padding-top: 3px;
    color: rgba(5, 8, 6, .4);
    font: 700 7px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1px;
}

.cta-left {
    flex: 1;
    gap: 5px;
}

.cta-title-row {
    gap: 8px;
}

.cta-game-name {
    color: #061008;
    font: 900 clamp(25px, 7.2vw, 32px)/.9 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: -.2px;
}

.cta-game-desc {
    color: rgba(5, 8, 6, .55);
    font: 700 7px/1.3 'Space Grotesk', sans-serif;
    letter-spacing: .65px;
}

.cta-live-badge-inline {
    padding: 3px 7px;
    color: var(--command-lime);
    border: 0;
    background: #071009;
    font: 700 6px/1 'Space Grotesk', sans-serif;
    letter-spacing: .8px;
}

.cta-dot {
    background: var(--command-lime);
}

.cta-play-circle {
    width: 50px;
    height: 50px;
    color: var(--command-lime);
    border: 1px solid rgba(201, 255, 56, .16);
    background: #061008;
    box-shadow: 0 12px 28px rgba(5, 8, 6, .22);
    transition: transform .2s ease;
}

.cta-btn:active {
    transform: scale(.985);
}

.cta-btn:active .cta-play-circle {
    transform: translateX(3px);
}

.cta-signal {
    position: absolute;
    z-index: 2;
    right: 79px;
    bottom: 12px;
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 11px;
    opacity: .26;
}

.cta-signal span {
    width: 2px;
    border-radius: 3px;
    background: #061008;
}

.cta-signal span:nth-child(1) { height: 3px; }
.cta-signal span:nth-child(2) { height: 7px; }
.cta-signal span:nth-child(3) { height: 10px; }
.cta-signal span:nth-child(4) { height: 6px; }
.cta-signal span:nth-child(5) { height: 9px; }

.one-shot-card {
    border: 1px solid rgba(231, 238, 221, .11);
    border-left: 0;
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(182, 106, 67, .16), transparent 38%),
        rgba(11, 18, 13, .92);
    box-shadow: 0 16px 38px rgba(0, 0, 0, .24);
}

.one-shot-kicker {
    color: #d69a74;
}

.one-shot-action {
    color: #061008;
    background: var(--command-lime);
}

.one-shot-action.is-ranking {
    color: var(--command-lime);
    border: 1px solid rgba(201, 255, 56, .28);
    background: rgba(201, 255, 56, .065);
    box-shadow: none;
}

.one-shot-action.is-ranking b {
    color: var(--command-lime);
}

.quick-actions {
    gap: 9px;
    margin-top: 0;
}

.qa-btn,
.qa-btn:nth-child(2) {
    min-height: 70px;
    padding: 12px;
    gap: 10px;
    color: var(--command-bone);
    border: 1px solid rgba(231, 238, 221, .1);
    border-radius: 18px;
    background:
        linear-gradient(145deg, rgba(255, 255, 255, .025), transparent),
        rgba(10, 17, 12, .86);
    box-shadow: 0 12px 28px rgba(0, 0, 0, .14);
}

.qa-btn:active {
    transform: scale(.975);
    border-color: rgba(201, 255, 56, .35);
}

.qa-icon {
    width: 34px;
    height: 34px;
    color: var(--command-lime);
    border: 1px solid rgba(201, 255, 56, .16);
    border-radius: 11px;
    background: rgba(201, 255, 56, .045);
}

.qa-icon svg {
    width: 17px;
    height: 17px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.qa-label,
.qa-btn:nth-child(2) .qa-label {
    color: var(--command-bone);
    font: 700 9px/1 'Space Grotesk', sans-serif;
    letter-spacing: .25px;
}

.qa-sub,
.qa-btn:nth-child(2) .qa-sub {
    margin-top: 2px;
    color: rgba(231, 238, 221, .34);
    font: 600 6.5px/1.2 'Space Grotesk', sans-serif;
}

.qa-arrow,
.qa-btn:nth-child(2) .qa-arrow {
    color: rgba(201, 255, 56, .74);
    font: 700 12px/1 'Space Grotesk', sans-serif;
}

.hood-promise {
    position: relative;
    isolation: isolate;
    min-height: 220px;
    margin-top: 6px;
    overflow: hidden;
    padding: 23px 20px 18px;
    border: 1px solid rgba(231, 238, 221, .11);
    border-radius: 24px;
    background:
        radial-gradient(circle at 96% 4%, rgba(182, 106, 67, .25), transparent 34%),
        linear-gradient(145deg, #111b14, #080d0a 66%);
    box-shadow: 0 20px 50px rgba(0, 0, 0, .23);
}

.hood-promise::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    opacity: .24;
    background:
        repeating-linear-gradient(112deg, transparent 0 29px, rgba(231, 238, 221, .04) 30px, transparent 31px);
}

.hood-promise::after {
    content: 'GOOD';
    position: absolute;
    z-index: -1;
    right: -9px;
    bottom: -33px;
    color: rgba(231, 238, 221, .026);
    font: 900 128px/.8 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: -5px;
}

.hood-promise-mark {
    position: absolute;
    top: 20px;
    right: 18px;
    width: 38px;
    height: 38px;
    display: grid;
    place-items: center;
    color: #061008;
    border-radius: 12px;
    background: var(--command-copper);
    font: 900 27px/1 'Barlow Condensed', Impact, sans-serif;
    transform: rotate(4deg);
}

.hood-promise-copy {
    max-width: 82%;
}

.hood-promise-copy > span {
    display: block;
    margin-bottom: 16px;
    color: #d69a74;
    font: 700 7px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.75px;
}

.hood-promise h2 {
    color: var(--command-bone);
    font: 900 clamp(27px, 8vw, 37px)/.92 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: -.4px;
}

.hood-promise h2 em {
    color: var(--command-lime);
    font-style: normal;
}

.hood-promise p {
    max-width: 280px;
    margin-top: 13px;
    color: rgba(231, 238, 221, .42);
    font: 600 9px/1.55 'Space Grotesk', sans-serif;
}

.hood-traits {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 19px;
}

.hood-traits span {
    padding: 6px 8px 5px;
    color: rgba(231, 238, 221, .58);
    border: 1px solid rgba(231, 238, 221, .1);
    border-radius: 20px;
    background: rgba(231, 238, 221, .025);
    font: 700 6px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1px;
}

.project-section {
    margin-top: 26px;
    padding-top: 21px;
    border-top: 1px solid rgba(231, 238, 221, .08);
}

.project-section::before {
    content: 'THE HOOD // COMMUNITY';
    top: -4px;
    color: rgba(201, 255, 56, .52);
    background: #030604;
    font: 700 6px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.6px;
}

.hood-socials {
    gap: 9px;
}

.hood-social-btn {
    min-height: 58px;
    padding: 10px 13px;
    border: 1px solid rgba(231, 238, 221, .1);
    border-radius: 17px;
    background: rgba(10, 17, 12, .8);
}

.hood-social-btn svg {
    color: var(--command-lime);
}

.hood-social-btn span {
    font: 700 9px/1 'Space Grotesk', sans-serif;
}

.hood-social-btn small {
    color: rgba(231, 238, 221, .22);
    font: 600 5px/1 'Space Grotesk', sans-serif;
}

.hood-community-note {
    margin: 15px 2px 0;
    color: rgba(231, 238, 221, .3);
    font: 600 7px/1.55 'Space Grotesk', sans-serif;
    letter-spacing: .95px;
    text-align: center;
}

.hood-community-note strong {
    color: rgba(201, 255, 56, .62);
}

.crew-ticker-wrap {
    margin: 17px -14px 0;
    border-color: rgba(201, 255, 56, .12);
    background: rgba(201, 255, 56, .035);
}

.crew-ticker {
    color: rgba(201, 255, 56, .4);
    font-family: 'Space Grotesk', sans-serif;
}

/* Primary thumb navigation */
.app-dock {
    position: fixed;
    z-index: 80;
    right: max(10px, var(--app-safe-right));
    bottom: max(9px, var(--app-safe-bottom));
    left: max(10px, var(--app-safe-left));
    width: auto;
    max-width: 456px;
    min-height: 67px;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    align-items: center;
    margin: 0 auto;
    padding: 7px 8px;
    border: 1px solid rgba(231, 238, 221, .13);
    border-radius: 23px;
    background: rgba(7, 12, 9, .88);
    box-shadow:
        0 22px 55px rgba(0, 0, 0, .52),
        inset 0 1px 0 rgba(255, 255, 255, .035);
    backdrop-filter: blur(22px) saturate(130%);
    -webkit-backdrop-filter: blur(22px) saturate(130%);
}

.dock-item {
    position: relative;
    min-height: 50px;
    display: flex;
    align-items: center;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    color: rgba(231, 238, 221, .34);
    border-radius: 16px;
    transition: color .18s ease, background .18s ease, transform .12s ease;
}

.dock-item svg {
    width: 19px;
    height: 19px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.75;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.dock-profile-avatar {
    width: 21px;
    height: 21px;
    display: grid;
    place-items: center;
    overflow: hidden;
    color: inherit;
    border: 1px solid currentColor;
    border-radius: 50%;
    background: rgba(231, 238, 221, .025);
    font: 800 9px/1 'Space Grotesk', sans-serif;
}

.dock-profile-avatar svg {
    width: 14px;
    height: 14px;
}

.dock-profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.dock-item > span:last-child {
    font: 700 6px/1 'Space Grotesk', sans-serif;
    letter-spacing: .8px;
}

.dock-item.active {
    color: var(--command-lime);
    background: rgba(201, 255, 56, .055);
}

.dock-item:active {
    transform: scale(.92);
}

.dock-run {
    color: var(--command-bone);
}

.dock-run-icon {
    width: 35px;
    height: 35px;
    display: grid;
    place-items: center;
    margin-top: -21px;
    color: #061008;
    border: 4px solid #071009;
    border-radius: 13px;
    background: var(--command-lime);
    box-shadow: 0 8px 22px rgba(201, 255, 56, .2);
    transform: rotate(45deg);
}

.dock-run-icon svg {
    width: 18px;
    height: 18px;
    transform: rotate(-45deg);
}

.dock-run > span:last-child {
    margin-top: -1px;
    color: rgba(231, 238, 221, .66);
}

/* Premium account and information surfaces */
#profile-sheet,
.drawer,
.tm-sheet {
    border-color: rgba(231, 238, 221, .12);
    border-radius: 28px 28px 0 0;
    background:
        radial-gradient(circle at 86% 0, rgba(22, 120, 73, .19), transparent 34%),
        linear-gradient(180deg, #0b130e, #060a07);
    box-shadow: 0 -28px 80px rgba(0, 0, 0, .66);
}

#profile-sheet {
    height: min(78dvh, 660px);
    padding-inline: 17px;
}

#profile-sheet .account-head {
    padding-bottom: 13px;
    border-bottom: 1px solid rgba(231, 238, 221, .08);
}

#profile-sheet .account-head h2,
.drawer-top h2,
.tm-title {
    color: var(--command-bone);
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-weight: 900;
    letter-spacing: .35px;
}

#profile-sheet .account-kicker {
    color: var(--command-lime);
    font-family: 'Space Grotesk', sans-serif;
}

#profile-sheet .account-close,
.drawer-x,
.tm-x {
    width: 42px;
    height: 42px;
    color: rgba(231, 238, 221, .68);
    border: 1px solid rgba(231, 238, 221, .1);
    border-radius: 14px;
    background: rgba(231, 238, 221, .035);
}

.profile-identity {
    position: relative;
    min-height: 112px;
    margin-top: 16px;
    overflow: hidden;
    padding: 18px;
    border: 1px solid rgba(231, 238, 221, .1);
    border-radius: 20px;
    background:
        radial-gradient(circle at 100% 0, rgba(201, 255, 56, .11), transparent 35%),
        #0d1710;
}

.profile-identity::after {
    content: 'MEMBER OF THE HOOD';
    position: absolute;
    right: 13px;
    bottom: 10px;
    color: rgba(231, 238, 221, .18);
    font: 700 5px/1 'Space Grotesk', sans-serif;
    letter-spacing: 1.35px;
}

.profile-avatar {
    width: 66px;
    height: 66px;
    padding: 0;
    overflow: hidden;
    color: #061008;
    border: 0;
    border-radius: 20px;
    background: #08100b;
    box-shadow: 0 0 0 1px rgba(201, 255, 56, .34);
}

.profile-avatar img,
.t3-avatar img,
.lb-avatar img,
.dock-profile-avatar img {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: inherit;
    object-fit: cover;
}

.profile-avatar img {
    min-width: 100%;
    min-height: 100%;
}

.profile-identity strong {
    color: var(--command-bone);
    font: 900 22px/.95 'Barlow Condensed', Impact, sans-serif;
    letter-spacing: .3px;
}

.profile-identity span {
    color: rgba(201, 255, 56, .5);
}

.profile-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.profile-stats div,
.profile-stats div:first-child {
    min-height: 72px;
    padding: 13px;
    border: 1px solid rgba(231, 238, 221, .09);
    border-radius: 16px;
    background: rgba(13, 23, 16, .86);
}

.profile-stats small,
.profile-stats div:first-child small {
    color: rgba(231, 238, 221, .34);
    font-family: 'Space Grotesk', sans-serif;
}

.profile-stats b,
.profile-stats div:first-child b {
    color: var(--command-bone);
    font: 700 20px/1 'Space Grotesk', sans-serif;
}

.profile-stats div:first-child b {
    color: var(--command-lime);
}

.profile-wallet-status-card {
    appearance: none;
    min-height: 60px;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 14px;
    color: var(--command-bone);
    border: 1px solid rgba(201, 255, 56, .16);
    border-radius: 17px;
    background: rgba(201, 255, 56, .045);
    box-shadow: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.profile-wallet-status-card > span:nth-child(2) {
    min-width: 0;
    flex: 1;
}

.profile-wallet-status-card em {
    flex: 0 0 auto;
    color: rgba(201, 255, 56, .7);
    font: 800 7px/1 'Space Grotesk', sans-serif;
    letter-spacing: .75px;
    white-space: nowrap;
}

.profile-wallet-status-card.wallet-active {
    border-color: rgba(201, 255, 56, .3);
    background:
        linear-gradient(90deg, rgba(201, 255, 56, .09), rgba(201, 255, 56, .035)),
        rgba(13, 23, 16, .9);
}

.profile-wallet-status-card:disabled {
    cursor: wait;
    opacity: .58;
}

.profile-wallet-status-card:not(:disabled):active {
    transform: scale(.985);
}

.profile-wallet-status-card strong {
    color: var(--command-bone);
}

.profile-wallet-status-card small {
    color: rgba(231, 238, 221, .42);
}

.profile-sync-status {
    color: rgba(231, 238, 221, .25);
    font-family: 'Space Grotesk', sans-serif;
}

.drawer {
    height: min(91dvh, 780px);
    max-height: min(91dvh, 780px);
    padding-inline: 15px;
}

#lb-panel,
#info-panel {
    height: min(91dvh, 780px);
    max-height: min(91dvh, 780px);
}

.drawer-top {
    min-height: 60px;
    padding: 10px 2px 12px;
    border-bottom: 1px solid rgba(231, 238, 221, .08);
}

.drawer-top h2 {
    font-size: 25px;
}

.tab-row {
    gap: 5px;
    padding: 5px;
    border: 1px solid rgba(231, 238, 221, .08);
    border-radius: 15px;
    background: rgba(3, 7, 4, .58);
}

.tab {
    min-height: 38px;
    border: 0;
    border-radius: 11px;
    color: rgba(231, 238, 221, .38);
    font-family: 'Space Grotesk', sans-serif;
}

.tab.active {
    color: #061008;
    background: var(--command-lime);
}

.t3-item,
.lb-row,
.info-cards .ic {
    border-color: rgba(231, 238, 221, .09);
    border-radius: 16px;
    background: rgba(13, 23, 16, .82);
}

.t3-item.first {
    border-color: rgba(201, 255, 56, .2);
    background:
        radial-gradient(circle at 50% 0, rgba(201, 255, 56, .1), transparent 50%),
        rgba(13, 23, 16, .9);
}

.t3-item.first .t3-avatar {
    border-color: var(--command-lime);
    background: rgba(201, 255, 56, .08);
    box-shadow: 0 0 0 4px rgba(201, 255, 56, .055);
}

.t3-score,
.lb-score {
    color: var(--command-lime);
    font-family: 'Space Grotesk', sans-serif;
}

.lb-row.is-me,
.my-rank {
    border-color: rgba(201, 255, 56, .26);
    background: rgba(201, 255, 56, .065);
}

.info-section-label {
    color: rgba(201, 255, 56, .55);
    font-family: 'Space Grotesk', sans-serif;
}

.info-cards {
    gap: 10px;
    padding-bottom: max(20px, var(--app-safe-bottom));
}

.info-cards .ic {
    min-height: 91px;
    padding: 15px;
}

.ic-emoji {
    width: 43px;
    height: 43px;
    color: #061008;
    border: 0;
    border-radius: 14px;
    background: var(--command-lime);
    box-shadow: none;
}

.ic-body h3 {
    color: var(--command-bone);
    font-family: 'Barlow Condensed', Impact, sans-serif;
    font-size: 18px;
}

.ic-body p {
    color: rgba(231, 238, 221, .43);
    font-family: 'Space Grotesk', sans-serif;
}

.tm-sheet {
    height: min(92dvh, 790px);
}

.tm-hero-full {
    border-color: rgba(201, 255, 56, .12);
    border-radius: 19px;
    background:
        radial-gradient(circle at 50% 0, rgba(201, 255, 56, .08), transparent 52%),
        rgba(13, 23, 16, .86);
}

.tm-clock-num,
.tm-pool-val {
    color: var(--command-lime);
}

.tm-dist-badge,
.tm-info-accordion {
    border-color: rgba(231, 238, 221, .09);
    border-radius: 13px;
    background: rgba(13, 23, 16, .82);
}

/* Entrance sequencing: motion with a clear hierarchy, not constant noise. */
.nav,
.hero-mascot-wrap,
.hero-stats,
.play-modes,
.quick-actions,
.hood-promise {
    animation: good-enter .7s cubic-bezier(.2, .72, .18, 1) both;
}

.hero-mascot-wrap { animation-delay: .04s; }
.hero-stats { animation-delay: .1s; }
.play-modes { animation-delay: .16s; }
.quick-actions { animation-delay: .22s; }
.hood-promise { animation-delay: .28s; }

@keyframes good-enter {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes good-hero-breathe {
    from { transform: scale(1.015); }
    to { transform: scale(1.045); }
}

@keyframes good-status-pulse {
    0%, 100% { opacity: .45; transform: scale(.8); }
    50% { opacity: 1; transform: scale(1.05); }
}

.cta-btn:focus-visible,
.qa-btn:focus-visible,
.hood-social-btn:focus-visible,
.dock-item:focus-visible,
#profile-sheet .account-close:focus-visible,
.drawer-x:focus-visible,
.tm-x:focus-visible {
    outline: 2px solid var(--command-lime);
    outline-offset: 3px;
}

@media (max-height: 700px) {
    .hero-mascot-wrap {
        height: clamp(286px, 45dvh, 320px);
        min-height: clamp(286px, 45dvh, 320px);
    }

    .hero-stage-copy {
        bottom: 21px;
    }

    .title-boyz {
        font-size: clamp(44px, 14vw, 58px);
    }

    .hood-promise {
        min-height: 205px;
    }
}

@media (max-width: 350px) {
    .hero-mascot-wrap {
        height: clamp(286px, 45dvh, 350px);
        min-height: clamp(286px, 45dvh, 350px);
        border-radius: 24px;
    }

    .hero-stage-copy {
        right: 19px;
        bottom: 21px;
        left: 19px;
    }

    .hero-stage-meta {
        top: 21px;
        right: 19px;
        left: 19px;
    }

    .hero-stage-caption {
        display: none;
    }

    .title-boyz {
        font-size: 49px;
    }

    .hs-chip {
        padding-inline: 9px;
    }

    .hs-label {
        letter-spacing: .68px;
    }

    .cta-index {
        display: none;
    }

    .cta-inner {
        padding-inline: 14px;
    }

    .cta-game-name {
        font-size: 24px;
    }

    .qa-btn {
        padding-inline: 9px;
    }

    .qa-icon {
        display: none;
    }

    .hood-promise-copy {
        max-width: 88%;
    }
}

@media (min-width: 560px) {
    .app-dock {
        right: auto;
        left: 50%;
        width: 456px;
        transform: translateX(-50%);
    }

    #profile-sheet,
    .drawer,
    .tm-sheet {
        bottom: 14px;
        border: 1px solid rgba(231, 238, 221, .12);
        border-radius: 28px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .nav,
    .hero-mascot-wrap,
    .hero-stats,
    .play-modes,
    .quick-actions,
    .hood-promise,
    .hero-mascot,
    .hero-stage-meta i {
        animation: none;
    }

    #app {
        scroll-behavior: auto;
    }
}