/* header.css - Header bar, pair dropdown, hamburger, mode selector, tap grid, topbar controls, wallet */
/* Header bar */
.topbar{grid-column:1/-1;background:#0d0e12;border-bottom:1px solid #2B2F36;display:flex;align-items:center;padding:0 16px;gap:12px;flex-shrink:0;overflow:visible;z-index:65;position:relative}
.topbar-brand{display:flex;align-items:center;gap:6px;cursor:pointer;position:relative;padding:4px 6px;border-radius:6px;overflow:hidden}
.topbar-brand::after{content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;background:linear-gradient(90deg,transparent,rgba(252,213,53,0.35),transparent);pointer-events:none;opacity:0;transition:opacity 0.2s}
.topbar-brand:hover::after{opacity:1;animation:brandShine 0.6s ease forwards}
@keyframes brandShine{0%{left:-60%}100%{left:120%}}
.topbar-logo{height:25px;width:auto;position:relative;top:-2px}
.topbar-badge{background:#FCD535;color:#0a0b0e;font-size:12px;font-weight:800;padding:4px 8px;border-radius:3px;letter-spacing:1px}
.topbar-pair{font-size:15px;font-weight:600;color:#EAECEF;position:relative;cursor:pointer;padding:6px 10px;border-radius:4px;transition:all 0.15s;border:1px solid transparent;z-index:51;display:none}
.topbar.rush-active .topbar-pair{display:block}
.topbar-pair:hover{background:#111318;border-color:#2B2F36;border-bottom:2px solid #111318;border-radius:4px 4px 0 0;margin-bottom:-1px}
.topbar-pair .pair-text{line-height:1}
.topbar-pair .pair-arrow{font-size:18px;margin-left:6px;color:#5E6673}
.pair-dropdown-backdrop{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:80;background:transparent;touch-action:none}
.pair-dropdown{position:absolute;top:calc(100% - 1px);left:-1px;width:400px;background:#111318;border:1px solid #2B2F36;border-radius:0 6px 6px 6px;z-index:81;display:none;box-shadow:0 12px 36px rgba(0,0,0,0.7)}
.topbar-pair:hover .pair-dropdown{display:block}
.topbar-pair.pair-locked{pointer-events:none;opacity:1;display:block;cursor:default}
.topbar-pair.pair-locked .pair-arrow{display:none}
.topbar-pair.pair-locked:hover .pair-dropdown{display:none}
.stake-overlay.combat-locked .stake-slider,.stake-overlay.combat-locked .stake-range,.stake-overlay.combat-locked .stake-presets,.stake-overlay.combat-locked .bet-buttons{display:none}
.stake-overlay.combat-locked{width:280px;padding:0 14px;height:38px;display:flex;align-items:center;border-color:rgba(246,70,93,0.2)}
.stake-overlay.combat-locked .stake-header{margin:0;width:100%;justify-content:space-between}
.pd-search{display:flex;align-items:center;padding:10px 12px;border-bottom:1px solid #2B2F36}
.pd-search svg{margin-right:8px;flex-shrink:0}
.pd-search input{background:none;border:none;outline:none;color:#EAECEF;font-family:'Fira Code',monospace;font-size:12px;width:100%}
.pd-search input::placeholder{color:#5E6673}
.pd-tags{display:flex;gap:6px;padding:10px 12px;border-bottom:1px solid #2B2F36;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.pd-tags::-webkit-scrollbar{display:none}
.pd-tag{font-size:12px;font-weight:600;padding:6px 12px;border-radius:4px;cursor:pointer;transition:all 0.15s;color:#848E9C;background:#1a1d24;border:1px solid #2B2F36;letter-spacing:0.3px;white-space:nowrap}
.pd-tag[data-category="favorites"]{font-size:20px;line-height:1;padding:3px 10px}
.pd-tag:hover{color:#EAECEF;background:#23262F;border-color:#3a3f47}
.pd-tag.active{color:#0a0b0e;background:#FCD535;border-color:#FCD535;font-weight:700}
.pd-header{display:flex;align-items:center;padding:6px 12px;font-size:10px;color:#5E6673;letter-spacing:0.5px;text-transform:uppercase;border-bottom:1px solid rgba(43,47,54,0.5)}
.pd-header .pd-h-fav{width:34px;flex-shrink:0}
.pd-header .pd-h-logo{width:32px;flex-shrink:0}
.pd-header .pd-h-name{flex:1}
.pd-header .pd-h-vol{width:80px;text-align:right}
.pd-header .pd-h-profit{width:60px;text-align:right}
.pd-empty{padding:24px 16px;text-align:center;font-size:12px;color:#5E6673}
.pd-list{max-height:380px;overflow-y:auto;scrollbar-width:none;-ms-overflow-style:none}
.pd-list::-webkit-scrollbar{display:none}
.pd-row{display:flex;align-items:center;padding:8px 12px;cursor:pointer;transition:background 0.1s}
.pd-row:hover{background:rgba(234,236,239,0.04)}
.pd-row.active{background:rgba(252,213,53,0.04)}
.pd-row.pd-inactive{opacity:0.4;cursor:default}
.pd-row.pd-inactive:hover{background:none}
.pd-fav{width:34px;font-size:28px;color:#2B2F36;cursor:pointer;transition:color 0.15s;flex-shrink:0;display:flex;align-items:center;justify-content:center;position:relative;top:-3px}
.pd-fav:hover{color:#5E6673}
.pd-fav.starred{color:#FCD535}
.pd-logo{width:32px;height:32px;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center;background:rgba(252,213,53,0.08);border-radius:50%;flex-shrink:0;margin-right:8px;color:#FCD535;letter-spacing:-0.5px}
.pd-logo-img{background:transparent;overflow:hidden;border:none}
.pd-logo-icon{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pd-logo-fx{background:none;position:relative;overflow:visible}
.pd-flag{width:22px;height:22px;border-radius:50%;position:absolute;border:2px solid #111318}
.pd-flag-back{right:0;bottom:0}
.pd-flag-front{left:0;top:0}
.pd-info{flex:1;display:flex;flex-direction:column;gap:1px;min-width:0}
.pd-sym{font-size:13px;font-weight:600;color:#EAECEF;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pd-coin{font-size:10px;color:#5E6673}
.pd-vol{width:80px;text-align:right;font-size:11px;color:#848E9C;font-family:'Fira Code',monospace;flex-shrink:0}
.pd-profit{width:60px;text-align:right;font-size:12px;font-weight:600;color:#0ecb81;font-family:'Fira Code',monospace;flex-shrink:0;padding-left:8px}
.pd-countdown{color:#848E9C;font-style:italic}
.topbar-live{font-size:11px;font-weight:800;color:#0ecb81;background:rgba(14,203,129,0.15);padding:3px 8px 3px 18px;border-radius:2px;position:relative;letter-spacing:0.5px}
.topbar-live::before{content:'';position:absolute;left:6px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:50%;background:#0ecb81;animation:livePulse 1.5s ease infinite}
@keyframes livePulse{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(14,203,129,0.5)}50%{opacity:0.7;box-shadow:0 0 0 3px rgba(14,203,129,0)}}

/* Hamburger menu */
.hamburger{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:2px;cursor:pointer;transition:background 0.15s;position:relative}
.hamburger:hover{background:rgba(252,213,53,0.1)}
.hamburger-icon{display:flex;flex-direction:column;gap:4px}
.hamburger-icon span{display:block;width:18px;height:2px;background:#FCD535;border-radius:1px;transition:all 0.2s}
.hamburger:hover .hamburger-icon span{background:#FCD535}
.nav-menu{position:absolute;top:100%;left:0;min-width:180px;background:#1a1d24;border:1px solid #2B2F36;border-radius:4px;z-index:50;display:none;box-shadow:0 8px 24px rgba(0,0,0,0.5)}
.hamburger:hover .nav-menu{display:block}
.nav-item{display:flex;align-items:center;gap:8px;padding:10px 14px;font-size:13px;color:#EAECEF;cursor:pointer;transition:all 0.1s;border-bottom:1px solid rgba(43,47,54,0.5)}
.nav-item:last-child{border-bottom:none}
.nav-item:hover{background:rgba(252,213,53,0.08);color:#FCD535}
.nav-item .nav-icon{font-size:22px;width:24px;text-align:center;line-height:1;display:flex;align-items:center;justify-content:center;position:relative;top:-2px}

/* Mode selector */
.mode-selector{position:relative;cursor:pointer;padding:6px 10px;border-radius:4px;font-size:13px;font-weight:800;letter-spacing:1px;transition:all 0.15s;border:1px solid #2B2F36;z-index:51}
.mode-selector.mode-1000x{background:#111318;color:#EAECEF}
.mode-selector.mode-combat{background:#111318;color:#EAECEF}
.mode-selector.mode-pirate{background:#111318;color:#EAECEF}
.mode-selector.mode-tap{background:#111318;color:#EAECEF}
.mode-dropdown-item.m-tap .md-title{color:#e88c30}
.mode-selector:hover{background:#111318;border-radius:4px 4px 0 0;border-bottom-color:#111318}
.mode-dropdown{position:absolute;top:calc(100% - 1px);left:-1px;width:420px;background:#111318;border:1px solid #2B2F36;border-radius:0 6px 6px 6px;z-index:50;display:none;box-shadow:0 12px 36px rgba(0,0,0,0.6)}
.mode-selector:hover .mode-dropdown{display:block}
.mode-dropdown-item{padding:10px 14px;cursor:pointer;transition:background 0.1s;border-bottom:1px solid rgba(43,47,54,0.5);display:flex;align-items:flex-start;gap:10px}
.mode-dropdown-item:last-child{border-bottom:none}
.mode-dropdown-item:hover{background:rgba(234,236,239,0.04)}
.mode-dropdown-item.active{border-left:2px solid #FCD535;background:rgba(252,213,53,0.03);padding-left:12px}
.mode-dropdown-item .md-content{flex:1;display:flex;flex-direction:column;gap:2px}
.mode-dropdown-item .md-title{font-size:13px;font-weight:700;letter-spacing:0.5px}
.mode-dropdown-item .md-desc{font-size:12px;color:#848E9C;line-height:1.5}
.mode-dropdown-item.m-1000x .md-title{color:#FCD535}
.mode-dropdown-item.m-combat .md-title{color:#f6465d}
.mode-dropdown-item .md-info{font-size:14px;color:#5E6673;cursor:pointer;transition:color 0.15s;flex-shrink:0;padding:2px}
.mode-dropdown-item .md-info:hover{color:#FCD535}
.mode-hint{position:absolute;top:calc(100% + 16px);left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:0;font-size:12px;color:#848E9C;opacity:0;animation:hintFadeIn 0.6s ease 2s forwards;pointer-events:none;white-space:nowrap}
.mode-hint-arrow{color:#FCD535;font-size:14px;line-height:1}
.mode-hint-text{display:flex;align-items:center;gap:4px}
.mode-hint-text span{color:#FCD535}
.mode-hint.hint-hidden{display:none!important}
@keyframes hintFadeIn{0%{opacity:0;transform:translateX(-50%) translateY(-6px)}100%{opacity:1;transform:translateX(-50%) translateY(0)}}

/* Tap mode grid */
.tap-grid-overlay{position:absolute;top:22px;bottom:0;z-index:5;display:grid;gap:1px;pointer-events:auto;overflow:visible;will-change:transform}
.tap-cell{display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;border:1px solid rgba(43,47,54,0.4);border-radius:2px;transition:background 0.15s,border-color 0.15s,transform 0.1s;padding:2px;font-family:'Fira Code',monospace;position:relative;overflow:hidden;user-select:none}
.tap-cell:hover{border-color:rgba(252,213,53,0.5);z-index:1;background:rgba(252,213,53,0.06)}
.tap-cell:active{transform:scale(0.96)}
.tap-cell .tap-mult{font-size:12px;font-weight:700;color:#EAECEF;line-height:1.2}
.tap-cell .tap-payout{font-size:9px;color:#0ecb81;margin-top:1px;line-height:1.2}
.tap-cell.tap-hot{background:rgba(246,70,93,0.18);border-color:rgba(246,70,93,0.25)}
.tap-cell.tap-hot .tap-payout{color:#f6465d}
.tap-cell.tap-warm{background:rgba(232,140,48,0.14);border-color:rgba(232,140,48,0.2)}
.tap-cell.tap-warm .tap-payout{color:#e88c30}
.tap-cell.tap-cool{background:rgba(14,203,129,0.08);border-color:rgba(14,203,129,0.15)}
.tap-cell.tap-cold{background:rgba(14,203,129,0.16);border-color:rgba(14,203,129,0.28)}
.tap-cell.tap-active{border:2px solid #FCD535;background:rgba(252,213,53,0.15);animation:tapPulse 1s ease infinite}
@keyframes tapPulse{0%,100%{box-shadow:0 0 0 0 rgba(252,213,53,0.3)}50%{box-shadow:0 0 8px 2px rgba(252,213,53,0.15)}}
.tap-time-header{position:absolute;top:0;z-index:6;pointer-events:none;height:20px;display:flex;align-items:center;will-change:transform}
.tap-time-label{flex:1;text-align:center;font-size:9px;color:#5E6673;font-family:'Fira Code',monospace;padding:2px 0}
.tap-price-labels{position:absolute;top:10px;bottom:20px;z-index:6;pointer-events:none;display:flex;flex-direction:column;justify-content:space-around}
.tap-price-label{font-size:9px;color:rgba(234,236,239,0.35);font-family:'Fira Code',monospace;text-align:right;padding:0 4px}

.topbar-spacer{flex:1}
.topbar-stat{display:flex;flex-direction:column;align-items:center;padding:0 4px 0 16px;border-left:1px solid #2B2F36}
.topbar-stat-label{font-size:9px;color:#5E6673;letter-spacing:0.5px;text-transform:uppercase}
.topbar-stat-val{font-size:14px;font-weight:600}
.topbar-balance-wrap{position:relative;z-index:51}
.topbar-balance{font-size:15px;font-weight:700;color:#FCD535;background:rgba(252,213,53,0.08);padding:4px 12px;border-radius:4px;border:1px solid rgba(252,213,53,0.25);cursor:pointer;transition:all 0.15s;display:block}
.topbar-balance-wrap:hover .topbar-balance{background:#111318;border-color:#2B2F36;border-bottom-color:#111318;border-radius:4px 4px 0 0}
.balance-dropdown{position:absolute;top:calc(100% - 1px);right:0;min-width:180px;background:#111318;border:1px solid #2B2F36;border-radius:6px 0 6px 6px;z-index:50;display:none;box-shadow:0 12px 36px rgba(0,0,0,0.6)}
.topbar-balance-wrap:hover .balance-dropdown{display:block}
.topbar-balance-wrap.bal-no-drop .topbar-balance{opacity:0.5;cursor:default}
.topbar-balance-wrap.bal-no-drop:hover .balance-dropdown{display:none}
.topbar-balance-wrap.bal-no-drop:hover .topbar-balance{background:rgba(252,213,53,0.08);border-color:rgba(252,213,53,0.25);border-radius:4px}
.bal-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:#EAECEF;cursor:pointer;transition:background 0.1s;border-bottom:1px solid rgba(43,47,54,0.5)}
.bal-item:last-child{border-bottom:none}
.bal-item:hover{background:rgba(234,236,239,0.04)}
.bal-item svg{flex-shrink:0}
.topbar-sound,.topbar-theme{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:2px;transition:background 0.15s;color:#5E6673}
.topbar-sound:hover,.topbar-theme:hover{background:#2B2F36;color:#FCD535}
.topbar-sound{color:#FCD535}
.topbar-sound.muted{color:#5E6673}
.topbar-theme.active{color:#FCD535}
.theme-wrap{position:relative}
.theme-picker-overlay{display:none;position:fixed;top:0;left:0;right:0;bottom:0;z-index:300;background:rgba(0,0,0,0.6);align-items:center;justify-content:center}
.theme-picker-overlay.visible{display:flex}
.theme-picker{background:#1E2026;border:1px solid #2B2F36;border-radius:10px;padding:20px;max-width:420px;width:90vw;box-shadow:0 12px 40px rgba(0,0,0,0.6)}
.theme-picker-title{font-size:14px;font-weight:600;color:#EAECEF;margin-bottom:14px;font-family:'Plus Jakarta Sans',sans-serif}
.theme-picker-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.theme-picker-item{padding:10px;border:2px solid #2B2F36;border-radius:8px;cursor:pointer;transition:border-color 0.15s,background 0.15s;display:flex;flex-direction:column;align-items:center;gap:8px}
.theme-picker-item:hover{border-color:#5E6673;background:rgba(255,255,255,0.02)}
.theme-picker-item.selected{border-color:#FCD535;background:rgba(252,213,53,0.05)}
.theme-picker-item canvas{border-radius:4px}
.theme-picker-label{font-size:11px;font-family:'Plus Jakarta Sans',sans-serif;color:#848E9C;font-weight:500}
.theme-picker-item.selected .theme-picker-label{color:#FCD535}
.theme-picker-section{margin-top:16px;padding-top:14px;border-top:1px solid #2B2F36}
.theme-picker-section-title{font-size:14px;font-weight:600;color:#EAECEF;margin-bottom:10px;font-family:'Plus Jakarta Sans',sans-serif}
.topbar-toggle{display:flex;gap:6px}
.topbar-toggle-btn{flex:1;padding:10px 12px;border:2px solid #2B2F36;border-radius:8px;cursor:pointer;transition:border-color 0.15s,background 0.15s;display:flex;align-items:center;justify-content:center;gap:8px;font-size:12px;font-family:'Plus Jakarta Sans',sans-serif;color:#848E9C;font-weight:500;background:transparent}
.topbar-toggle-btn:hover{border-color:#5E6673;background:rgba(255,255,255,0.02)}
.topbar-toggle-btn.selected{border-color:#FCD535;background:rgba(252,213,53,0.05);color:#FCD535}
.topbar-toggle-icon{font-size:16px}
.topbar-help{font-size:11px;color:#5E6673;padding:3px 8px;border:1px solid #2B2F36;border-radius:2px}
.connect-wallet{font-size:13px;font-weight:800;color:#0a0b0e;background:#FCD535;padding:6px 16px;border-radius:3px;letter-spacing:0.5px;transition:all 0.15s;text-transform:uppercase}
.connect-wallet:hover{background:#ffe066;box-shadow:0 0 16px rgba(252,213,53,0.4)}
.wallet-wrap{position:relative;z-index:51}
.wallet-wrap.connected:hover .wallet-dropdown{display:block}
.wallet-wrap.connected:hover .connect-wallet{border-radius:3px 3px 0 0;border-bottom-color:#111318;background:#111318}
.wallet-dropdown{position:absolute;top:100%;right:0;min-width:200px;background:#111318;border:1px solid #2B2F36;border-radius:6px 0 6px 6px;z-index:50;display:none;box-shadow:0 12px 36px rgba(0,0,0,0.6)}
.wd-profile{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid rgba(43,47,54,0.5)}
.wd-avatar{width:28px;height:28px;border-radius:50%;object-fit:cover;flex-shrink:0}
.wd-info{display:flex;flex-direction:column;gap:2px}
.wd-nick{font-size:13px;font-weight:700;color:#EAECEF}
.wd-addr{font-size:11px;color:#848E9C;font-family:'Fira Code',monospace}
.wd-item{display:flex;align-items:center;gap:10px;padding:10px 14px;font-size:13px;color:#EAECEF;cursor:pointer;transition:background 0.1s;border-bottom:1px solid rgba(43,47,54,0.5)}
.wd-item:last-child{border-bottom:none}
.wd-item:hover{background:rgba(234,236,239,0.04)}
.wd-item svg{width:16px;height:16px;flex-shrink:0;color:#848E9C}
.wd-item.wd-disconnect{color:#f6465d}
.wd-item.wd-disconnect svg{color:#f6465d}
.wd-vault-addr{font-size:11px;color:#848E9C;font-family:'Fira Code',monospace;margin-left:auto;text-transform:lowercase}