/* StarVault v3.1 — Cosmic Mobile UI */
/* ═════════════ ROOT ═════════════ */
:root{
  --bg-deep:#06060e;--bg-card:#0e0e1a;--bg-elevated:#161625;
  --star-gold:#d4a853;--gold-light:#f0c060;--gold-dark:#8b6914;
  --star-purple:#5b2d8e;--purple-light:#7b4dae;
  --text:#e0d8cc;--text-dim:#8a8578;
  --border:#1e1c2a;--border-gold:rgba(212,168,83,.25);
  --danger:#dc3545;--success:#2ecc71;
  --r-n:#8888aa;--r-r:#2ecc71;--r-sr:#3498db;--r-ssr:#9b59b6;--r-ur:#f0c060;
  --top-h:48px;--bottom-h:60px;--safe-b:env(safe-area-inset-bottom,0px);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  background:var(--bg-deep);color:var(--text);min-height:100vh;min-height:100dvh;
  padding-top:var(--top-h);padding-bottom:calc(var(--bottom-h) + var(--safe-b));
  background-image:radial-gradient(ellipse at 20% 0%,rgba(91,45,142,.08) 0%,transparent 50%),radial-gradient(ellipse at 80% 100%,rgba(212,168,83,.04) 0%,transparent 50%);
  -webkit-font-smoothing:antialiased
}
::selection{background:rgba(212,168,83,.25);color:#fff}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:var(--bg-deep)}::-webkit-scrollbar-thumb{background:var(--border);border-radius:2px}
:focus-visible{outline:2px solid var(--star-gold);outline-offset:2px}
a{color:var(--star-gold);text-decoration:none;transition:color .2s}a:hover{color:var(--gold-light)}
img{max-width:100%;height:auto}

/* ═════════════ TOP BAR ═════════════ */
.top-bar{position:fixed;top:0;left:0;right:0;z-index:200;height:var(--top-h);background:rgba(6,6,14,.94);-webkit-border-bottom:1px solid var(--border-gold);display:flex;align-items:center;justify-content:space-between;padding:0 14px}
.top-logo{font-family:Georgia,serif;font-size:1.15em;color:var(--star-gold);letter-spacing:1.5px;font-weight:bold}
.top-logo span{color:var(--text-dim);font-size:.55em;letter-spacing:3px;margin-left:2px}
.top-actions{display:flex;align-items:center;gap:8px}
.balance-badge{background:linear-gradient(135deg,var(--gold-dark),var(--star-gold));color:#1a1a0a;padding:3px 9px;border-radius:10px;font-size:.75em;font-weight:700;white-space:nowrap}

/* ═════════════ BOTTOM NAV ═════════════ */
.bottom-nav{position:fixed;bottom:0;left:0;right:0;z-index:200;height:var(--bottom-h);padding-bottom:var(--safe-b);background:rgba(6,6,14,.96);-webkit-border-top:1px solid var(--border-gold);display:flex;align-items:center;justify-content:space-around}
.nav-item{display:flex;flex-direction:column;align-items:center;gap:1px;color:var(--text-dim);font-size:.6em;text-decoration:none;padding:6px 0;min-width:60px;transition:all .2s}
.nav-item.active{color:var(--star-gold)}.nav-item:hover{color:var(--gold-light)}
.nav-icon{font-size:1.6em;line-height:1}.nav-label{letter-spacing:.3px;text-transform:uppercase}

/* ═════════════ MAIN ═════════════ */
.app-main{min-height:100vh;min-height:calc(100dvh - var(--top-h) - var(--bottom-h));opacity:1}
@keyframes fadeIn{0%{opacity:0;transform:translateY(6px)}100%{opacity:1;transform:translateY(0)}}
.container{max-width:600px;margin:0 auto}

/* ═════════════ BUTTONS ═════════════ */
.btn{display:inline-flex;align-items:center;justify-content:center;padding:10px 18px;border-radius:8px;border:none;cursor:pointer;font-size:.85em;font-weight:600;letter-spacing:.3px;transition:all .25s;text-transform:uppercase;gap:4px}
.btn-gold{background:linear-gradient(135deg,var(--gold-dark),var(--star-gold));color:#1a1a0a;box-shadow:0 2px 10px rgba(212,168,83,.2)}
.btn-gold:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(212,168,83,.35)}
.btn-gold:active{transform:scale(.97)}
.btn-purple{background:linear-gradient(135deg,var(--star-purple),var(--purple-light));color:#fff}
.btn-purple:hover{transform:translateY(-1px)}
.btn-outline{background:transparent;border:1px solid var(--border-gold);color:var(--star-gold)}
.btn-outline:hover{background:rgba(212,168,83,.06)}
.btn-xs{padding:5px 10px;font-size:.68em;border-radius:6px}
.btn-sm{padding:8px 14px;font-size:.75em;border-radius:7px}
.btn-lg{padding:14px 28px;font-size:1em;border-radius:10px}
.btn-block{width:100%;justify-content:center}
.btn:disabled{opacity:.4;cursor:not-allowed;transform:none!important;box-shadow:none!important}

/* ═════════════ CAROUSEL ═════════════ */
.carousel{position:relative;overflow:hidden;border-radius:14px;background:var(--bg-card);border:1px solid var(--border);min-height:180px}
.carousel-track{position:relative}
.carousel-slide{display:none;position:relative}
.carousel-slide.active{display:block;animation:fadeIn .5s}
.carousel-img{width:100%;height:180px;object-fit:cover;border-radius:14px}
.carousel-caption{position:absolute;bottom:0;left:0;right:0;padding:20px 16px;background:linear-gradient(transparent,rgba(6,6,14,.95));text-align:center}
.carousel-caption h3{color:var(--star-gold);font-size:.95em;margin-bottom:8px}
.carousel-dots{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;gap:6px;z-index:2}
.carousel-dot{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.3);cursor:pointer;transition:all .3s}
.carousel-dot.active{background:var(--star-gold);width:18px;border-radius:3px}

/* ═════════════ SECTION CARD ═════════════ */
.section-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px}
.section-head{font-size:.95em;color:var(--star-gold);margin-bottom:12px;display:flex;align-items:center;gap:6px;font-family:Georgia,serif}
.card-progress{font-size:.7em;color:var(--text-dim);font-family:sans-serif;font-weight:400}

/* ═════════════ ANNOUNCE LIST ═════════════ */
.announce-list{display:flex;flex-direction:column;gap:10px}
.announce-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);font-size:.78em;color:var(--text-dim)}
.announce-item:last-child{border-bottom:none}
.announce-dot-live{width:8px;height:8px;border-radius:50%;background:var(--star-gold);flex-shrink:0;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ═════════════ HOME STATS ═════════════ */
.home-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.home-stat{background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px 6px;text-align:center}
.home-stat-value{font-size:1.1em;font-weight:700;color:var(--star-gold);line-height:1.3}
.home-stat-label{font-size:.62em;color:var(--text-dim);margin-top:3px;text-transform:uppercase;letter-spacing:.5px}

/* ═════════════ INVITE PAGE ═════════════ */
.invite-link-card{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:16px;text-align:center}
.invite-code-display{font-size:1.2em;color:var(--star-gold);font-weight:700;font-family:monospace;margin:10px 0;word-break:break-all}
.invite-code-label{font-size:.65em;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}
.invite-rule-item{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.78em;color:var(--text-dim)}
.invite-rule-item:last-child{border-bottom:none}
.invite-rule-num{width:24px;height:24px;border-radius:50%;background:var(--star-gold);color:var(--bg-deep);display:flex;align-items:center;justify-content:center;font-size:.7em;font-weight:700;flex-shrink:0}
.invite-rule-text{line-height:1.5;flex:1}
.invite-recent{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:.75em}
.invite-recent:last-child{border-bottom:none}
.invite-recent-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-weight:700;color:var(--star-gold);flex-shrink:0;font-size:.7em}
.invite-recent-name{flex:1;color:var(--text-primary)}
.invite-recent-date{color:var(--text-dim);font-size:.7em}
.invite-empty{text-align:center;padding:16px;color:var(--text-dim);font-size:.7em}

@media(max-width:480px){
  .home-stats{grid-template-columns:repeat(2,1fr)}
}
/* ═════════════ DEPOSIT/WITHDRAW ROW ═════════════ */
.dw-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dw-card{display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 16px;border-radius:14px;text-decoration:none;transition:all .3s;border:1px solid transparent}
.dw-card:hover{transform:translateY(-2px)}
.dw-deposit{background:linear-gradient(135deg,rgba(46,204,113,.08),rgba(46,204,113,.02));border-color:rgba(46,204,113,.2)}
.dw-deposit:hover{box-shadow:0 4px 20px rgba(46,204,113,.15)}
.dw-withdraw{background:linear-gradient(135deg,rgba(212,168,83,.08),rgba(212,168,83,.02));border-color:rgba(212,168,83,.2)}
.dw-withdraw:hover{box-shadow:0 4px 20px rgba(212,168,83,.15)}
.dw-icon{font-size:2em}
.dw-label{font-size:.75em;color:var(--text);font-weight:600}

/* ═════════════ POOL HERO ═════════════ */
.pool-hero{position:relative;overflow:hidden;border-radius:14px;padding:28px 20px;text-align:center;background:linear-gradient(135deg,#1a1030,#0f0f20);border:1px solid var(--border-gold)}
.pool-glow{position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(ellipse at center,rgba(212,168,83,.06) 0%,transparent 60%);pointer-events:none}
.pool-content{position:relative;z-index:1}
.pool-icon{font-size:2.5em;margin-bottom:8px}
.pool-title{font-size:.75em;color:var(--text-dim);text-transform:uppercase;letter-spacing:2px;margin-bottom:4px}
.pool-amount{font-family:Georgia,serif;font-size:2.2em;font-weight:700;color:var(--star-gold);line-height:1.1}
.pool-amount small{font-size:.35em;color:var(--text-dim);display:block;font-family:sans-serif;font-weight:400}
.pool-info{font-size:.68em;color:var(--text-dim);margin-top:8px}

/* ═════════════ EARNINGS ═════════════ */
.earn-amount{font-family:Georgia,serif;font-size:1.4em;color:var(--star-gold);font-weight:700;margin-top:4px}
.earn-claimed{color:var(--success);font-size:.85em}
.earn-sub{font-size:.7em;color:var(--text-dim);margin-top:6px}

/* ═════════════ MENU ITEMS ═════════════ */
.menu-item{display:flex;align-items:center;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);text-decoration:none;color:var(--text);transition:all .2s}
.menu-item:last-child{border-bottom:none}
.menu-item:hover{color:var(--star-gold)}
.menu-icon{font-size:1.3em;flex-shrink:0;width:28px;text-align:center}
.menu-text{flex:1;font-size:.85em}
.menu-arrow{color:var(--text-dim);font-size:1.2em}

/* ═════════════ EMPTY STATE ═════════════ */
.empty-state{text-align:center;padding:30px 16px;color:var(--text-dim);font-size:.85em}

/* ═════════════ GUEST ═════════════ */
.guest-hero{text-align:center;padding:50px 16px 30px}
.guest-stars{font-size:4em;margin-bottom:12px;animation:float 3s ease-in-out infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.guest-title{font-family:Georgia,serif;font-size:2.4em;color:var(--star-gold);letter-spacing:3px;text-shadow:0 0 40px rgba(212,168,83,.2)}
.guest-desc{color:var(--text-dim);font-size:.95em;margin-top:8px;max-width:300px;margin-left:auto;margin-right:auto;line-height:1.6}
.guest-features{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.gf-card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:20px 12px;text-align:center}
.gf-icon{font-size:2em;margin-bottom:8px}
.gf-card h4{color:var(--star-gold);font-size:.85em;margin-bottom:4px}
.gf-card p{color:var(--text-dim);font-size:.68em}

/* ═════════════ CARD GRID ═════════════ */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(135px,1fr));gap:8px}
.card-item{background:var(--bg-elevated);border:1px solid var(--border);border-radius:12px;padding:14px 10px;text-align:center;transition:all .3s;animation:cardPop .3s ease-out}
.card-item:hover{transform:translateY(-3px);border-color:var(--border-gold);box-shadow:0 6px 20px rgba(212,168,83,.1)}
.card-item:has(.rarity-UR){box-shadow:0 0 12px rgba(240,192,96,.1);animation:urGlow 3s ease-in-out infinite}
.card-img{margin-bottom:6px;min-height:40px;display:flex;align-items:center;justify-content:center}
.card-name{font-size:.75em;font-weight:600;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.card-info{font-size:.6em;color:var(--text-dim);margin-top:3px}
.card-btns{margin-top:8px;display:flex;gap:3px;justify-content:center;flex-wrap:wrap}
@keyframes cardPop{0%{opacity:0;transform:scale(.9) translateY(4px)}100%{opacity:1;transform:scale(1) translateY(0)}}
@keyframes urGlow{0%,100%{box-shadow:0 0 6px rgba(240,192,96,.1)}50%{box-shadow:0 0 18px rgba(240,192,96,.25)}}

/* ═════════════ RARITY ═════════════ */
.rarity{display:inline-block;padding:2px 8px;border-radius:3px;font-size:.6em;font-weight:700;letter-spacing:.5px;text-transform:uppercase}
.rarity-N{background:rgba(136,136,170,.12);color:var(--r-n);border:1px solid rgba(136,136,170,.25)}
.rarity-R{background:rgba(46,204,113,.12);color:var(--r-r);border:1px solid rgba(46,204,113,.25)}
.rarity-SR{background:rgba(52,152,219,.12);color:var(--r-sr);border:1px solid rgba(52,152,219,.25)}
.rarity-SSR{background:rgba(155,89,182,.12);color:var(--r-ssr);border:1px solid rgba(155,89,182,.25)}
.rarity-UR{background:rgba(240,192,96,.15);color:var(--r-ur);border:1px solid rgba(240,192,96,.4);box-shadow:0 0 8px rgba(240,192,96,.1)}
.max-badge{display:inline-block;padding:2px 8px;border-radius:8px;font-size:.6em;background:rgba(212,168,83,.1);color:var(--star-gold);border:1px solid rgba(212,168,83,.25)}
.destroy-btn{background:linear-gradient(135deg,#5a0000,#993333)!important;color:#fff!important}

/* ═════════════ FORMS ═════════════ */
.form-group{margin-bottom:14px}
.form-label{display:block;color:var(--text-dim);margin-bottom:5px;font-size:.75em;text-transform:uppercase;letter-spacing:.5px}
.form-input{width:100%;padding:11px 14px;background:var(--bg-deep);border:1px solid var(--border);border-radius:8px;color:var(--text);font-size:16px;transition:border-color .3s}
.form-input:focus{outline:none;border-color:var(--star-gold);box-shadow:0 0 0 2px rgba(212,168,83,.06)}
.phone-row{display:flex;gap:8px;align-items:center}

/* ═════════════ PAGE TITLE ═════════════ */
.page-title{font-family:Georgia,serif;font-size:1.4em;color:var(--star-gold);margin-bottom:12px}
.page-subtitle{color:var(--text-dim);margin-bottom:16px;font-size:.85em}

/* ═════════════ LANG / MUTE ═════════════ */
.lang-switch{position:relative}.lang-current{background:transparent;border:1px solid var(--border);color:var(--text-dim);padding:4px 8px;border-radius:5px;cursor:pointer;font-size:.8em;line-height:1}
.lang-current:hover{border-color:var(--star-gold)}
.lang-dropdown{display:none;position:absolute;top:100%;right:0;background:var(--bg-card);border:1px solid var(--border-gold);border-radius:8px;min-width:140px;z-index:300;box-shadow:0 8px 24px rgba(0,0,0,.6)}
.lang-dropdown.show{display:block}.lang-option{display:block;padding:9px 12px;color:var(--text-dim);text-decoration:none;font-size:.78em;transition:background .2s}
.lang-option:hover{background:rgba(212,168,83,.06);color:var(--star-gold)}.lang-option.active{color:var(--star-gold);font-weight:700}
.mute-btn{position:fixed;bottom:75px;right:12px;z-index:999;width:32px;height:32px;border-radius:50%;background:var(--bg-card);border:1px solid var(--border);color:var(--text-dim);cursor:pointer;font-size:.85em;display:flex;align-items:center;justify-content:center;transition:all .3s}
.mute-btn:hover{border-color:var(--star-gold);color:var(--star-gold)}


/* ═════════════ MOBILE FULL OPTIMIZATION ═════════════ */

/* Prevent iOS overscroll bounce */
body {
  overscroll-behavior-y: none;
  -webkit-overflow-scrolling: touch;
}

/* Prevent long-press context menu on interactive elements */
.btn, .nav-item, .open-item, .shop-box-card, .menu-item, a, button {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Sticky hover fix for touch devices */
@media (hover: none) {
  .btn:hover, .card-item:hover, .open-item:hover, .shop-box-card:hover,
  .nav-item:hover, .menu-item:hover, .dw-card:hover {
    transform: none !important;
    box-shadow: none !important;
  }
  .card-item:active, .open-item:active, .shop-box-card:active,
  .dw-card:active, .menu-item:active {
    transform: scale(0.97) !important;
  }
}

/* ═══ MINIMUM TOUCH TARGETS (44px Apple HIG) ═══ */
.btn-xs {
  padding: 8px 14px !important;
  font-size: 0.75em !important;
  min-height: 36px;
  min-width: 44px;
}
.btn-sm {
  padding: 10px 18px !important;
  min-height: 40px;
  min-width: 44px;
}
.btn {
  min-height: 44px;
}
.nav-item {
  padding: 8px 4px !important;
  min-width: 64px !important;
  font-size: 0.7em !important;
}
.nav-icon {
  font-size: 1.4em !important;
}
.nav-label {
  font-size: 0.68em !important;
  letter-spacing: 0.2px !important;
}

/* ═══ CARD GRID MOBILE ═══ */
@media (max-width: 480px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 6px !important;
  }
  .card-item {
    padding: 12px 8px !important;
  }
  .card-img img {
    width: 44px !important;
    height: 44px !important;
  }
  .card-name {
    font-size: 0.7em !important;
  }
  .card-info {
    font-size: 0.65em !important;
  }
}

@media (max-width: 340px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }
  .card-item {
    padding: 8px 4px !important;
  }
  .card-img img {
    width: 36px !important;
    height: 36px !important;
  }
}

/* ═══ FORM OPTIMIZATION ═══ */
.form-input, select.form-input {
  font-size: 16px !important; /* prevent iOS zoom */
  padding: 12px 14px !important;
  min-height: 44px;
}
.form-label {
  font-size: 0.8em !important;
}
input[type="number"] {
  font-size: 16px !important;
}

/* ═══ TOAST MOBILE POSITION ═══ */
.toast-container {
  top: 56px !important;
  width: 92% !important;
  max-width: none !important;
}
.toast {
  font-size: 0.85em !important;
  padding: 14px 16px !important;
}

/* ═══ MODAL / OVERLAY MOBILE ═══ */
.announce-modal {
  max-width: 90vw !important;
  padding: 24px 18px !important;
  margin: 0 12px;
}
.reveal-card {
  min-width: auto !important;
  width: 85vw !important;
  max-width: 320px !important;
  padding: 24px 16px !important;
}

/* ═══ SHOP BOXES MOBILE ═══ */
@media (max-width: 480px) {
  .shop-box-card {
    padding: 16px 12px !important;
  }
  .shop-box-icon {
    font-size: 2em !important;
  }
  .shop-box-price {
    font-size: 1.3em !important;
  }
}

/* ═══ GUEST PAGE MOBILE ═══ */
@media (max-width: 480px) {
  .guest-hero {
    padding: 30px 12px 20px !important;
  }
  .guest-title {
    font-size: 1.8em !important;
  }
  .guest-stars {
    font-size: 3em !important;
  }
  .guest-features {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 6px !important;
  }
  .gf-card {
    padding: 14px 8px !important;
  }
  .gf-icon {
    font-size: 1.5em !important;
  }
  .gf-card h4 {
    font-size: 0.75em !important;
  }
}

/* ═══ PROFILE TOP MOBILE ═══ */
@media (max-width: 480px) {
  .profile-avatar-large {
    width: 48px !important;
    height: 48px !important;
  }
  .profile-top-info h2 {
    font-size: 1.05em !important;
  }
  .profile-balance-big {
    font-size: 1.3em !important;
  }
}

/* ═══ DEPOSIT/WITHDRAW ROW MOBILE ═══ */
@media (max-width: 400px) {
  .dw-row {
    gap: 8px !important;
  }
  .dw-card {
    padding: 16px 10px !important;
  }
  .dw-icon {
    font-size: 1.5em !important;
  }
}

/* ═══ SYNTHESIS MOBILE ═══ */
@media (max-width: 480px) {
  .synth-row {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 12px 0 !important;
  }
  .synth-rarity {
    min-width: auto !important;
    width: 100% !important;
    font-size: 1em !important;
  }
  .synth-count, .synth-fail {
    font-size: 0.85em !important;
  }
}

/* ═══ INVITE PAGE MOBILE ═══ */
@media (max-width: 480px) {
  .invite-link-card {
    padding: 12px !important;
  }
  .invite-code-display {
    font-size: 1em !important;
  }
  .invite-recent-name {
    font-size: 0.85em !important;
  }
}

/* ═══ CAROUSEL MOBILE ═══ */
@media (max-width: 480px) {
  .carousel {
    min-height: 140px !important;
  }
  .carousel-img {
    height: 140px !important;
  }
  .carousel-caption {
    padding: 14px 12px !important;
  }
  .carousel-caption h3 {
    font-size: 0.85em !important;
  }
  .carousel-dots {
    bottom: 30px !important;
  }
}

/* ═══ BOTTOM NAV FIX ═══ */
.bottom-nav {
  height: 56px !important;
}
:root {
  --bottom-h: 56px;
}
.mute-btn {
  bottom: 68px !important;
  right: 8px !important;
  width: 36px !important;
  height: 36px !important;
}

/* ═══ SECTION CARD MOBILE ═══ */
@media (max-width: 480px) {
  .section-card {
    padding: 12px !important;
    border-radius: 10px !important;
  }
  .section-head {
    font-size: 0.9em !important;
    margin-bottom: 8px !important;
  }
}

/* ═══ ADMIN TABLE SCROLL ═══ */
.admin-table {
  font-size: 0.75em !important;
}
@media (max-width: 480px) {
  .admin-table th, .admin-table td {
    padding: 6px 8px !important;
    font-size: 0.7em !important;
  }
}

/* ═══ OPEN PAGE MOBILE ═══ */
.open-grid {
  grid-template-columns: repeat(2, 1fr) !important;
  gap: 8px !important;
}
/* Open page mobile handled in v4 */

/* ═══ POOL HERO MOBILE ═══ */
@media (max-width: 480px) {
  .pool-hero {
    padding: 20px 14px !important;
  }
  .pool-amount {
    font-size: 1.8em !important;
  }
}

/* ═══ EARNINGS MOBILE ═══ */
@media (max-width: 480px) {
  .earn-amount {
    font-size: 1.2em !important;
  }
}

/* ═══ FIX 100VH ON MOBILE SAFARI ═══ */
@supports (-webkit-touch-callout: none) {
  body {
    min-height: 100vh;min-height: -webkit-fill-available;
  }
  .app-main {
    min-height: 100vh;min-height: -webkit-fill-available;
  }
}


/* ═════════════ PARTICLES ═════════════ */
.particles{position:fixed;inset:0;pointer-events:none;z-index:-1}
.particle{position:absolute;width:1.5px;height:1.5px;background:var(--star-gold);border-radius:50%;animation:float-up 6s infinite;opacity:0}
@keyframes float-up{0%{transform:translateY(100vh) scale(0);opacity:0}10%{opacity:.4}90%{opacity:.4}100%{transform:translateY(-100px) scale(1);opacity:0}}

/* ═════════════ UTILS ═════════════ */
.text-center{text-align:center}
.mt-1{margin-top:6px}.mt-2{margin-top:12px}.mt-3{margin-top:18px}.mb-2{margin-bottom:12px}.mb-3{margin-bottom:18px}
.flex{display:flex}.flex-between{justify-content:space-between}.flex-center{align-items:center}
.hidden{display:none}
.flash{padding:8px 14px;border-radius:6px;margin-bottom:12px;font-size:.8em}
.flash-success{background:rgba(40,167,69,.1);border:1px solid rgba(40,167,69,.25);color:var(--success)}
.flash-error{background:rgba(220,53,69,.1);border:1px solid rgba(220,53,69,.25);color:var(--danger)}

/* ═════════════ RESPONSIVE ═════════════ */
@media(min-width:600px){
  .container{max-width:600px;padding:0 16px}
  .card-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
}
@media(max-width:360px){
  .dw-row{grid-template-columns:1fr 1fr;gap:8px}
  .guest-features{grid-template-columns:1fr}
  .pool-amount{font-size:1.8em}
}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}


    .shop-boxes{display:flex;flex-direction:column;gap:12px}
    .shop-box-card{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:20px 16px;text-align:center;transition:all .3s}
    .shop-box-card:hover{border-color:var(--border-gold);transform:translateY(-2px)}
    .shop-box-top{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:10px}
    .shop-box-icon{font-size:2.5em}
    .shop-box-name{font-family:Georgia,serif;font-size:1.1em;color:var(--star-gold)}
    .shop-box-price{font-family:Georgia,serif;font-size:1.5em;font-weight:700;color:var(--star-gold);margin-bottom:8px}
    .shop-box-price small{font-size:.45em;color:var(--text-dim);font-family:sans-serif;font-weight:400}
    .shop-box-drops{font-size:.65em;color:var(--text-dim);margin-bottom:14px;line-height:1.4}
    .unopened-list{display:flex;flex-direction:column;gap:6px}
    .unopened-item{display:flex;align-items:center;gap:12px;background:var(--bg-card);border:1px solid var(--border);border-radius:10px;padding:14px;text-decoration:none;color:var(--text);transition:all .2s}
    .unopened-item:hover{border-color:var(--border-gold)}
    .unopened-icon{font-size:1.8em}.unopened-name{flex:1;font-size:.85em}.unopened-arrow{color:var(--text-dim)}
    .invite-link-row{display:flex;gap:8px;align-items:center}
    .support-cards{display:flex;flex-direction:column;gap:12px}
    .support-card{display:flex;flex-direction:column;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:30px 20px;text-decoration:none;color:var(--text);transition:all .3s}
    .support-card:hover{border-color:var(--border-gold);transform:translateY(-2px)}
    .support-card-icon{font-size:3em}.support-card h3{color:var(--star-gold);font-size:1.05em}.support-card p{color:var(--text-dim);font-size:.78em}
    

/* ═══ OPEN PAGE ═══ */
.open-box-list{display:flex;flex-direction:column;gap:8px}
.open-box-card{display:flex;align-items:center;gap:14px;background:var(--bg-card);border:1px solid var(--border);border-radius:14px;padding:16px;transition:all .3s}
.open-box-card:hover{border-color:var(--border-gold)}
.open-box-new{border-color:var(--star-gold);animation:urGlow 2s infinite}
.open-box-icon{font-size:2.8em;flex-shrink:0}
.open-box-info{flex:1;min-width:0}
.open-box-name{font-size:.9em;font-weight:600;color:var(--text)}
.open-box-tier{font-size:.65em;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px;margin:2px 0}
.open-box-date{font-size:.62em;color:var(--text-dim)}

/* ═══ REVEAL OVERLAY ═══ */

/* ═══ PROFILE TOP ═══ */
.profile-top{display:flex;align-items:center;gap:14px;padding:8px 0 16px}
.profile-top-info{flex:1}
.profile-top-info h2{font-size:1.2em;margin-bottom:4px}
.profile-balance-big{font-family:Georgia,serif;font-size:1.5em;color:var(--star-gold);font-weight:700}
.profile-balance-big small{font-size:.45em;color:var(--text-dim);font-weight:400;font-family:sans-serif}


.synth-row{display:flex;align-items:center;gap:8px;padding:10px 0;border-bottom:1px solid var(--border);font-size:.75em}
.synth-row:last-child{border-bottom:none}
.synth-rarity{font-weight:700;color:var(--star-gold);min-width:60px}
.synth-count{color:var(--text-dim)}
.synth-fail{color:var(--danger);font-size:.85em}
.synth-locked{color:var(--text-dim);font-size:.8em;font-style:italic}
@media(max-width:380px){.open-grid{grid-template-columns:repeat(2,1fr);gap:6px}}
/* ═════════════ AVATARS ═════════════ */
.nav-avatar{width:28px;height:28px;border-radius:50%;overflow:hidden;flex-shrink:0;display:inline-flex;align-items:center;justify-content:center;background:var(--bg-elevated)}
.nav-avatar img{width:100%;height:100%;object-fit:cover}
.profile-avatar-large{width:58px;height:58px;border-radius:50%;overflow:hidden;flex-shrink:0;background:var(--bg-elevated);display:flex;align-items:center;justify-content:center;font-size:1.2em;font-weight:700;color:var(--star-gold)}
.profile-avatar-large img{width:100%;height:100%;object-fit:cover}

/* ═════════════ OPEN GRID v4 ═════════════ */
.open-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.open-item{
  background:linear-gradient(180deg,var(--bg-card),#0c0c18);
  border:1px solid var(--border);border-radius:16px;
  padding:20px 10px 14px;text-align:center;cursor:pointer;
  transition:transform .2s,border-color .2s;
  position:relative;overflow:hidden
}
.open-item:active{transform:scale(.97)}
.open-item-img-wrap{
  position:relative;width:80px;height:80px;
  margin:0 auto 10px;z-index:1
}
.open-item-ring{
  position:absolute;inset:-4px;border-radius:50%;
  border:2px solid;opacity:.25
}
.open-item:hover .open-item-ring{opacity:.6}
.open-item-img{
  width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 4px 12px rgba(0,0,0,.4));
  transition:transform .2s
}
.open-item:active .open-item-img{transform:scale(1.05)}
.open-item-badge{
  position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);
  font-size:.5em;font-weight:800;letter-spacing:1.5px;
  padding:2px 10px;border-radius:10px;
  white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5)
}
.open-item-name{
  font-size:.78em;font-weight:700;color:var(--text);
  margin-bottom:2px;position:relative;z-index:1
}
.open-item-tier-text{
  font-size:.6em;color:var(--text-dim);
  text-transform:uppercase;letter-spacing:1px;
  margin-bottom:6px;position:relative;z-index:1
}
.open-item-meta{
  font-size:.55em;color:var(--text-dim);opacity:.6;
  position:relative;z-index:1
}
.open-new{
  border-color:var(--star-gold);
  animation:newHint 3s ease-in-out infinite
}
@keyframes newHint{
  0%,100%{box-shadow:0 0 0 0 rgba(212,168,83,.1)}
  50%{box-shadow:0 0 12px 2px rgba(212,168,83,.08)}
}
@media(max-width:380px){
  .open-grid{gap:8px}
  .open-item{padding:14px 8px 10px}
  .open-item-img-wrap{width:64px;height:64px}
}


/* Empty state */
.empty-state{text-align:center;padding:60px 20px}
.empty-state img{width:160px;height:160px;margin-bottom:16px;opacity:.8}
.empty-state p{color:var(--text-dim);margin-bottom:16px;font-size:.9em}

@media(max-width:380px){
  .open-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .open-item{padding:14px 8px 10px}
  .open-item-img-wrap{width:70px;height:70px}
}


.reveal-overlay{position:fixed;inset:0;background:rgba(2,2,10,.96);z-index:9999;display:none;align-items:center;justify-content:center;flex-direction:column}
.reveal-overlay.active{display:flex}
.reveal-box{display:flex;flex-direction:column;align-items:center;gap:12px;animation:boxFloat .8s ease-out}
@keyframes boxFloat{0%{transform:scale(.3) rotate(-10deg);opacity:0}60%{transform:scale(1.1) rotate(3deg)}100%{transform:scale(1) rotate(0);opacity:1}}
.reveal-anim{font-size:5em;animation:revealShake .4s ease-in-out 3}
@keyframes revealShake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.reveal-text{color:var(--star-gold);font-family:Georgia,serif;font-size:1.1em}
.reveal-result{display:none;flex-direction:column;align-items:center;gap:14px;animation:boxFloat .6s ease-out}
.reveal-result.show{display:flex}
.reveal-card-img{width:80px;height:80px;border-radius:50%;object-fit:cover;border:2px solid var(--star-gold);box-shadow:0 0 30px rgba(212,168,83,.3)}
/* ═════════════ CARD + STAT + GRID ═════════════ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:16px}
.card-gold{background:linear-gradient(135deg,rgba(212,168,83,.08),rgba(212,168,83,.02));border:1px solid var(--border-gold)}
.card-purple{background:linear-gradient(135deg,rgba(91,45,142,.08),rgba(91,45,142,.02));border:1px solid rgba(91,45,142,.25)}
.stat-card{text-align:center;padding:16px 10px;display:flex;flex-direction:column;gap:4px}
.stat-value{font-size:1.6em;font-weight:700;color:var(--star-gold);font-family:Georgia,serif}
.stat-label{font-size:.62em;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.gap-2{gap:8px}
#card-number{font-size:.7em;color:var(--text-dim);margin-top:4px;font-family:monospace}
@media(max-width:480px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(2,1fr)}}

.reveal-card-name{font-size:1.1em;font-weight:600;color:var(--star-gold)}
.reveal-card-rarity{font-size:.75em;text-transform:uppercase;letter-spacing:1px}
.reveal-card-prod{font-size:.7em;color:var(--text-dim)}


/* ========== ANNOUNCEMENT ========== */
.announce-overlay{position:fixed;inset:0;background:rgba(0,0,0,.85);z-index:10000;display:none;align-items:center;justify-content:center;padding:20px}
.announce-overlay.active{display:flex}
.announce-modal{background:var(--bg-card);border:1px solid var(--star-gold);border-radius:16px;padding:28px 24px;max-width:360px;width:100%;text-align:center;animation:popIn .3s ease-out}
@keyframes popIn{from{transform:scale(.8);opacity:0}to{transform:scale(1);opacity:1}}
.announce-title{color:var(--star-gold);font-size:1.1em;margin-bottom:12px}
.announce-content{color:var(--text-dim);font-size:.85em;line-height:1.6;white-space:pre-wrap}


/* Active/tap states for mobile */
.nav-item:active { opacity: 0.6; transform: scale(0.95); }
.card-item:active { transform: scale(0.97); background: var(--bg-deep); }
.shop-box-card:active { transform: scale(0.97); }
.menu-item:active { background: rgba(212,168,83,0.04); }
.open-item:active { transform: scale(0.95); background: var(--bg-deep); }
.dw-card:active { transform: scale(0.97); }
.invite-recent:active { background: rgba(255,255,255,0.02); }

/* Smooth scrolling for mobile */
html {
  scroll-behavior: smooth;
}

/* Better mobile text legibility */
body {
  text-rendering: optimizeSpeed;
}

/* Card Gallery Intro */
.card-intro-link{display:block;color:inherit}.card-intro-link:hover .card-intro{border-color:var(--star-gold);box-shadow:0 0 24px rgba(245,196,66,.12)}.card-intro{background:linear-gradient(135deg,var(--bg-card)0%,#141428 100%);border:1px solid rgba(245,196,66,.15);border-radius:14px;padding:16px;transition:all .3s;cursor:pointer}.card-intro-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}.card-intro-icon{font-size:1.2em}.card-intro-title{font-size:.85em;font-weight:700;color:var(--star-gold);text-transform:uppercase;letter-spacing:1px}.card-intro-row{display:flex;gap:6px;justify-content:center;margin-bottom:12px}.card-intro-thumb{width:48px;height:48px;border-radius:10px;object-fit:cover;border:2px solid rgba(255,255,255,.08);transition:transform .2s,border-color .2s}.card-intro:hover .card-intro-thumb{border-color:rgba(245,196,66,.3)}.card-intro-thumb:nth-child(1):hover{transform:scale(1.2)rotate(-3deg);z-index:5}.card-intro-thumb:nth-child(2):hover{transform:scale(1.2)rotate(-1deg);z-index:5}.card-intro-thumb:nth-child(3):hover{transform:scale(1.2);z-index:5}.card-intro-thumb:nth-child(4):hover{transform:scale(1.2)rotate(1deg);z-index:5}.card-intro-thumb:nth-child(5):hover{transform:scale(1.2)rotate(3deg);z-index:5}.card-intro-flow{display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;font-size:.65em;color:var(--text-dim);margin-bottom:10px}.flow-step{display:inline-flex;align-items:center;gap:3px}.flow-icon{font-size:1.1em}.flow-arrow{color:var(--star-gold);font-weight:700}.card-intro-cta{text-align:center;font-size:.7em;color:var(--star-gold);font-weight:600;letter-spacing:.5px}@media(max-width:480px){.card-intro-thumb{width:40px;height:40px}.card-intro-flow{gap:3px;font-size:.6em}}
.open-item-img{width:64px;height:64px;object-fit:contain;margin-bottom:8px}
.open-item-box{display:flex;flex-direction:column;align-items:center;padding:20px 16px;border-radius:14px;transition:all .3s}