/* Extended styling—keeps previous look and adds achievements/prestige/ascension UI + cosmetics */
:root{
  --bg: #0f1720;
  --panel: #0b1220;
  --muted: #98a0ad;
  --accent: #06b6d4;
  --accent-2: #7c3aed;
  --success: #10b981;
  --shadow: 0 8px 30px rgba(2,6,23,0.6);
  --glass: rgba(255,255,255,0.03);
  --circle-color: radial-gradient(circle at 30% 20%, #7bd0ff, #06b6d4 30%, #04718b 100%);
}

/* Theme variations */
body.theme-ocean { --accent: #06b6d4; --accent-2: #0891b2; }
body.theme-forest { --accent: #10b981; --accent-2: #059669; background: linear-gradient(180deg,#0a1f0f,#071f17); }
body.theme-sunset { --accent: #f97316; --accent-2: #dc2626; background: linear-gradient(180deg,#1f0a0a,#1f0717); }
body.theme-purple { --accent: #a855f7; --accent-2: #7c3aed; background: linear-gradient(180deg,#150a1f,#0f0720); }

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Arial;background:linear-gradient(180deg,#071017,#071226); color:#e6eef6;font-size:18px}

.container{max-width:1600px;margin:18px auto;padding:20px;display:flex;flex-direction:column;gap:16px}
header{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
header h1{margin:0;font-size:28px}
.header-controls{display:flex;gap:12px;align-items:center;flex-wrap:wrap}
button{background:var(--accent);color:#022029;border:none;padding:12px 18px;border-radius:10px;cursor:pointer;box-shadow:var(--shadow);font-weight:600;transition:transform .1s;font-size:16px}
button:hover{transform:translateY(-1px)}
button:active{transform:translateY(0)}
.autosave{color:var(--muted);display:flex;align-items:center;gap:8px;font-size:16px}

/* main layout */
.app{display:flex;gap:24px}
.side-panel{width:380px;background:var(--panel);padding:20px;border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 180px);overflow:hidden}
.side-panel h2{margin:0 0 12px 0;color:var(--muted);font-size:20px;text-align:center}
.play-area{flex:1;display:flex;flex-direction:column;align-items:center;gap:16px;padding:28px;background:var(--glass);border-radius:16px;box-shadow:var(--shadow);min-height:500px;position:relative;max-height:calc(100vh - 180px)}
.shop{width:600px;background:var(--panel);padding:20px;border-radius:16px;box-shadow:var(--shadow);display:flex;flex-direction:column;gap:16px;max-height:calc(100vh - 180px);overflow:hidden}
.shop h2{margin:0 0 12px 0;color:var(--muted);font-size:20px;text-align:center}
.shop h3{margin:0 0 16px 0;font-size:20px}
.shop-top{display:flex;flex-direction:column;gap:12px;align-items:center}

/* tabs */
.tabs{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.tab-btn{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.02);padding:14px 18px;border-radius:10px;cursor:pointer;font-size:17px;font-weight:600;transition:all 0.2s}
.tab-btn.active{background:var(--accent);color:#022029}
.tab-btn.locked{opacity:0.4;cursor:not-allowed;filter:grayscale(1)}
.tab-btn.locked:hover{transform:none}

.side-tabs{display:flex;flex-direction:column;gap:8px;width:100%}
.side-tab-btn{background:transparent;color:var(--muted);border:1px solid rgba(255,255,255,0.02);padding:14px 18px;border-radius:10px;cursor:pointer;font-size:17px;font-weight:600;text-align:center;transition:all 0.2s}
.side-tab-btn:hover{background:rgba(255,255,255,0.05);transform:translateY(-1px)}
.side-tab-btn.active{background:var(--accent);color:#022029}

/* shop subtabs - STICKY */
.shop-subtabs{
  position: sticky;
  top: 0;
  background: var(--panel);
  z-index: 12;
  padding: 8px 0;
  margin-bottom: 0;
  display: flex;
  justify-content: center;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.shop-subtabs-center{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.shop-subtab-btn{background:rgba(255,255,255,0.02);color:var(--muted);border:1px solid rgba(255,255,255,0.05);padding:12px 18px;border-radius:10px;cursor:pointer;font-size:15px;font-weight:600;flex-shrink:0}
.shop-subtab-btn.active{background:var(--accent-2);color:#fff;border-color:var(--accent-2)}
.shop-subtab-btn:hover{background:rgba(255,255,255,0.05)}

/* Bulk buy buttons - STICKY below subtabs */
.bulk-buy-controls{
  position: sticky;
  top: 60px;
  background: var(--panel);
  z-index: 11;
  padding: 8px 0;
  margin-bottom: 16px;
  display: flex;
  gap: 6px;
  justify-content: flex-end;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.bulk-btn{background:rgba(255,255,255,0.02);color:var(--muted);border:1px solid rgba(255,255,255,0.05);padding:8px 14px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:600;transition:all 0.2s}
.bulk-btn.active{background:var(--accent);color:#022029;border-color:var(--accent)}
.bulk-btn:hover{background:rgba(255,255,255,0.05)}

/* Remove the old shop-sticky-header class since we're applying sticky directly */

.shop-subtab-panels{position:relative}
.shop-subtab-panel{display:none}
.shop-subtab-panel.active{display:block}

/* tab panels */
.tab-panels{min-height:200px;max-height:calc(100vh - 380px);overflow-y:auto}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* circle - FIXED SIZE */
#circle{
  width:220px;
  height:220px;
  min-width:220px;
  min-height:220px;
  max-width:220px;
  max-height:220px;
  border-radius:50%;
  background: var(--circle-color);
  display:flex;align-items:center;justify-content:center;color:#022029;font-size:56px;font-weight:800;
  cursor:pointer;user-select:none;box-shadow: 0 12px 40px rgba(0,0,0,0.6), inset 0 -10px 30px rgba(0,0,0,0.12);
  transition: transform .08s ease, box-shadow .08s ease;
  position:relative;overflow:visible;
  flex-shrink:0;
}
#circle:active{ transform: scale(.98) }
#circle:focus{ outline: 4px solid rgba(6,182,212,0.12); outline-offset:6px; border-radius:50% }
#circle.golden{ background: radial-gradient(circle at 30% 20%, #ffd700, #ffb700 30%, #ff8c00 100%); animation: pulse 0.5s ease-in-out; }
#circle.combo-active{ box-shadow: 0 12px 40px rgba(255,215,0,0.6), inset 0 -10px 30px rgba(255,215,0,0.12); }

/* Circle color classes */
#circle.circle-galaxy{
  background-image: url('galaxy_style.jpg');
  background-size: cover;
  background-position: center;
}
#circle.circle-emerald{
  --circle-color: radial-gradient(circle at 30% 20%, #6ee7b7, #10b981 30%, #065f46 100%);
}
#circle.circle-violet{
  --circle-color: radial-gradient(circle at 30% 20%, #c4b5fd, #8b5cf6 30%, #5b21b6 100%);
}
#circle.circle-amber{
  --circle-color: radial-gradient(circle at 30% 20%, #fcd34d, #f59e0b 30%, #b45309 100%);
}
#circle.circle-secret{
  --circle-color: radial-gradient(circle at 30% 20%, #d1d5db, #6b7280 30%, #374151 100%);
}

/* pop animation class */
.pop {
  animation: pop .22s ease;
}
@keyframes pop{0%{transform:none}40%{transform:scale(1.14)}100%{transform:none}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}

/* combo meter - SMALLER */
.combo-meter{
  position:absolute;
  top:15px;
  right:15px;
  background:rgba(0,0,0,0.7);
  padding:8px 14px;
  border-radius:8px;
  color:#ffd700;
  font-weight:700;
  font-size:16px;
  display:none;
}
.combo-meter.active{display:block;animation:slideIn 0.3s ease}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:none;opacity:1}}

/* hud - PREVENT CIRCLE SHRINKING */
.hud{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%;max-width:400px;margin-top:20px;flex-shrink:0}
.hud-stat{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.05);border-radius:10px;padding:12px;text-align:center;transition:all 0.2s}
.hud-stat:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.1)}
.hud-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:0.5px;margin-bottom:6px;font-weight:600}
.hud-value{font-size:20px;font-weight:800;color:#fff}
.hud-stat.highlight .hud-value{color:var(--accent);text-shadow:0 0 10px rgba(6,182,212,0.3)}
.hud-stat.wide{grid-column:1 / -1}
.hud-stat.golden .hud-label{color:#ffd700}
.hud-stat.hidden{display:none}

/* shop grid */
.grid{display:grid;grid-template-columns:1fr;gap:14px}
.upgrade-card{
  background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));
  padding:16px;border-radius:12px;display:flex;flex-direction:column;gap:10px;align-items:flex-start;
  border:1px solid rgba(255,255,255,0.03);
  position:relative;
}
.upgrade-card.prestige-upgrade{
  border:1px solid rgba(168,85,247,0.3);
  background:linear-gradient(180deg, rgba(168,85,247,0.05), rgba(0,0,0,0.03));
}
.upgrade-card.ascension-upgrade{
  border:1px solid rgba(251,191,36,0.3);
  background:linear-gradient(180deg, rgba(251,191,36,0.05), rgba(0,0,0,0.03));
}
.upgrade-card.transcension-upgrade{
  border:1px solid rgba(139,92,246,0.3);
  background:linear-gradient(180deg, rgba(139,92,246,0.05), rgba(0,0,0,0.03));
}
.upgrade-card.cosmetic-upgrade{
  border:1px solid rgba(236,72,153,0.3);
  background:linear-gradient(180deg, rgba(236,72,153,0.05), rgba(0,0,0,0.03));
}
.upgrade-card .row{display:flex;width:100%;justify-content:space-between;align-items:center}
.upgrade-title{font-weight:700;font-size:17px}
.upgrade-desc{font-size:15px;color:var(--muted);line-height:1.4}
.upgrade-cost{font-size:15px;color:var(--muted)}
.buy-btn{background:var(--accent-2);color:white;border-radius:10px;padding:10px 16px;border:none;cursor:pointer;font-weight:700;font-size:15px}
.buy-btn[disabled]{opacity:0.45;cursor:not-allowed;transform:none}

.shop-footer{margin-top:10px;color:var(--muted);font-size:16px}
.large-stats{font-size:17px}

/* achievements grid */
.ach-grid{display:grid;grid-template-columns:1fr;gap:12px}
.ach-card{padding:14px;border-radius:10px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));display:flex;justify-content:space-between;align-items:center}
.ach-card.secret{filter:blur(3px)}
.ach-card.secret.unlocked{filter:none}
.ach-name{font-weight:700;font-size:16px}
.ach-locked{opacity:0.5;color:var(--muted)}
.ach-desc{font-size:14px;color:var(--muted);margin-top:4px}
.ach-icon{font-size:26px}

/* Achievement progress bar */
.ach-progress{margin-bottom:16px;padding:14px;background:rgba(255,255,255,0.02);border-radius:10px}
.ach-progress-label{font-size:14px;color:var(--muted);margin-bottom:8px;text-align:center}
.ach-progress-bar-bg{width:100%;height:24px;background:rgba(0,0,0,0.3);border-radius:12px;overflow:hidden;position:relative}
.ach-progress-bar-fill{height:100%;background:linear-gradient(90deg, var(--accent), var(--accent-2));transition:width 0.5s ease;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff}

/* prestige panel */
.prestige-panel{padding:14px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));border-radius:10px;display:flex;flex-direction:column;gap:10px;margin-bottom:16px;font-size:16px}
.prestige-actions{display:flex;gap:12px;flex-wrap:wrap}

/* ascension panel */
.ascension-panel{padding:18px;background:linear-gradient(180deg, rgba(251,191,36,0.1), rgba(0,0,0,0.03));border-radius:10px;display:flex;flex-direction:column;gap:12px;margin-bottom:16px;font-size:16px;border:1px solid rgba(251,191,36,0.3)}
.ascension-panel.locked{opacity:0.6;border:1px solid rgba(255,255,255,0.1)}
.ascension-actions{display:flex;gap:12px;flex-wrap:wrap}

/* transcension panel */
.transcension-panel{padding:18px;background:linear-gradient(180deg, rgba(139,92,246,0.1), rgba(0,0,0,0.03));border-radius:10px;display:flex;flex-direction:column;gap:12px;margin-bottom:16px;font-size:16px;border:1px solid rgba(139,92,246,0.3)}
.transcension-panel.locked{opacity:0.6;border:1px solid rgba(255,255,255,0.1)}
.transcension-actions{display:flex;gap:12px;flex-wrap:wrap}

/* cosmetics panel */
.cosmetics-grid{display:grid;grid-template-columns:1fr;gap:12px;padding-right:8px;max-height:60vh;overflow-y:auto}
.cosmetic-preview{width:80px;height:80px;border-radius:50%;margin:0 auto 8px auto;background:var(--circle-color)}
.cosmetic-preview.circle-galaxy{
  background-image: url('galaxy_style.jpg');
  background-size: cover;
  background-position: center;
}
.cosmetic-preview.circle-emerald{
  background: radial-gradient(circle at 30% 20%, #6ee7b7, #10b981 30%, #065f46 100%);
}
.cosmetic-preview.circle-violet{
  background: radial-gradient(circle at 30% 20%, #c4b5fd, #8b5cf6 30%, #5b21b6 100%);
}
.cosmetic-preview.circle-amber{
  background: radial-gradient(circle at 30% 20%, #fcd34d, #f59e0b 30%, #b45309 100%);
}
.cosmetic-preview.circle-secret{
  background: radial-gradient(circle at 30% 20%, #d1d5db, #6b7280 30%, #374151 100%);
}
.cosmetic-card-owned{border-color:rgba(16,185,129,0.5) !important;background:linear-gradient(180deg, rgba(16,185,129,0.08), rgba(0,0,0,0.03)) !important}
.cosmetic-card-secret{filter:blur(4px);opacity:0.6}
.cosmetic-card-secret.unlocked{filter:none;opacity:1}

/* stats panel */
.stats-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;font-size:15px}
.stat-item{padding:14px;background:rgba(255,255,255,0.02);border-radius:8px}
.stat-label{color:var(--muted);font-size:13px;text-transform:uppercase;margin-bottom:6px}
.stat-value{font-weight:700;font-size:20px;color:var(--accent)}

/* boost stats */
.boost-stats{padding:14px;background:rgba(255,255,255,0.02);border-radius:8px;margin-top:12px;font-size:14px}
.boost-stats-title{color:var(--muted);font-size:13px;text-transform:uppercase;margin-bottom:8px}
.boost-value{font-weight:700;font-size:18px;color:var(--success)}

/* settings panel */
.settings-grid{display:flex;flex-direction:column;gap:14px}
.setting-item{display:flex;justify-content:space-between;align-items:center;padding:14px;background:rgba(255,255,255,0.02);border-radius:8px;font-size:16px}
.theme-selector{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.theme-btn{padding:16px;border-radius:10px;border:2px solid transparent;cursor:pointer;font-size:14px;text-align:center;background:rgba(255,255,255,0.02);font-weight:600;color:#e6eef6}
.theme-btn.active{border-color:var(--accent)}
.theme-btn:hover{background:rgba(255,255,255,0.05)}

/* secret button */
#secret-cosmetic-btn{
  position:absolute;
  bottom:10px;
  left:10px;
  width:20px;
  height:20px;
  background:transparent;
  border:none;
  cursor:pointer;
  opacity:0;
  padding:0;
}

/* minigame panel */
.minigame-panel{padding:16px;background:linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.03));border-radius:10px;margin-bottom:16px}
.minigame-panel h4{margin:0 0 12px 0;font-size:18px}
.guess-game{display:flex;flex-direction:column;gap:12px}
.guess-game input{font-size:16px}
.guess-game button{width:100%}

/* daily reward */
.daily-reward{padding:18px;background:linear-gradient(135deg, rgba(16,185,129,0.1), rgba(6,182,212,0.1));border-radius:10px;border:1px solid rgba(16,185,129,0.3)}
.streak-display{font-size:32px;font-weight:800;color:var(--success);text-align:center}

/* FULLSCREEN BLACKJACK OVERLAY */
#blackjack-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

#blackjack-fullscreen.active {
  display: flex;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.blackjack-fullscreen-container {
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  background: linear-gradient(180deg, #0a2f1f, #041810);
  border-radius: 20px;
  border: 3px solid rgba(16, 112, 68, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.blackjack-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(16, 112, 68, 0.3);
  flex-shrink: 0;
}

.blackjack-header h2 {
  margin: 0;
  font-size: 28px;
  color: #ffd700;
  text-shadow: 0 2px 8px rgba(255, 215, 0, 0.5);
}

.blackjack-close-btn {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 2px solid #ef4444;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  transition: all 0.2s;
}

.blackjack-close-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  transform: scale(1.05);
}

.blackjack-game-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 20px;
  gap: 20px;
  overflow-y: auto;
  min-height: 0;
}

.blackjack-table {
  background: rgba(16, 112, 68, 0.3);
  border: 3px solid rgba(16, 112, 68, 0.5);
  border-radius: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 30px;
  flex-shrink: 0;
}

.dealer-section, .player-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.section-label {
  font-weight: 700;
  font-size: 20px;
  color: #e6eef6;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.card-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  min-height: 110px;
}

.playing-card {
  width: 70px;
  height: 100px;
  background: #fff;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
  animation: cardSlide 0.3s ease;
  flex-shrink: 0;
}

@keyframes cardSlide {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.playing-card.red { color: #dc2626; }
.playing-card.black { color: #000; }
.playing-card.back {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 100%);
  color: transparent;
}
.playing-card.back::after {
  content: '🂠';
  color: #fff;
  font-size: 50px;
}

.blackjack-result {
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  padding: 12px;
  border-radius: 12px;
  display: none;
  animation: resultPop 0.4s ease;
  flex-shrink: 0;
  margin-top: 10px;
}

@keyframes resultPop {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.blackjack-result.show { display: block; }
.blackjack-result.win {
  background: rgba(16, 185, 129, 0.3);
  color: var(--success);
  border: 2px solid var(--success);
}
.blackjack-result.lose {
  background: rgba(239, 68, 68, 0.3);
  color: #ef4444;
  border: 2px solid #ef4444;
}
.blackjack-result.push {
  background: rgba(251, 191, 36, 0.3);
  color: #fbbf24;
  border: 2px solid #fbbf24;
}

.blackjack-controls {
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(0, 0, 0, 0.3);
  padding: 16px;
  border-radius: 12px;
  flex-shrink: 0;
  margin-top: 10px;
}

.bet-input-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bet-input-group label {
  font-size: 15px;
  color: var(--muted);
  font-weight: 600;
}

.bet-input-group input {
  padding: 10px;
  border-radius: 8px;
  border: 2px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
}

.blackjack-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.blackjack-buttons button {
  width: 100%;
  padding: 12px;
  font-size: 16px;
  border-radius: 10px;
  transition: all 0.2s;
}

.blackjack-buttons #deal-btn {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #10b981, #059669);
}

.blackjack-buttons #hit-btn {
  background: linear-gradient(135deg, #06b6d4, #0891b2);
}

.blackjack-buttons #stand-btn {
  background: linear-gradient(135deg, #f97316, #ea580c);
}

.blackjack-buttons #double-btn {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #a855f7, #7c3aed);
}

.blackjack-info {
  display: flex;
  justify-content: space-around;
  padding: 12px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  font-size: 14px;
  flex-shrink: 0;
}

.blackjack-info div {
  text-align: center;
}

.blackjack-info .label {
  color: var(--muted);
  font-size: 12px;
  margin-bottom: 4px;
}

.blackjack-info .value {
  font-weight: 700;
  font-size: 18px;
  color: var(--accent);
}

/* SCRATCH-OFF FULLSCREEN */
#scratchoff-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

#scratchoff-fullscreen.active {
  display: flex;
}

.scratchoff-container {
  width: 90%;
  max-width: 700px;
  background: linear-gradient(180deg, #1f0a2f, #0f0720);
  border-radius: 20px;
  border: 3px solid rgba(168, 85, 247, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.scratchoff-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(168, 85, 247, 0.3);
}

.scratchoff-header h2 {
  margin: 0;
  font-size: 28px;
  color: #c084fc;
  text-shadow: 0 2px 8px rgba(192, 132, 252, 0.5);
}

.scratchoff-close-btn {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 2px solid #ef4444;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  transition: all 0.2s;
}

.scratchoff-close-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  transform: scale(1.05);
}

.scratchoff-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px;
  gap: 20px;
}

.scratchoff-instructions {
  font-size: 20px;
  font-weight: 700;
  color: var(--muted);
  text-align: center;
}

#scratchoff-canvas {
  border: 3px solid rgba(168, 85, 247, 0.5);
  border-radius: 12px;
  cursor: crosshair;
  background: #fff;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.6);
}

.scratchoff-result {
  display: none;
  text-align: center;
  padding: 20px;
  border-radius: 12px;
  animation: resultPop 0.4s ease;
}

.scratchoff-result.show {
  display: block;
}

.scratchoff-result.common {
  background: rgba(156, 163, 175, 0.3);
  border: 2px solid #9ca3af;
  color: #d1d5db;
}

.scratchoff-result.rare {
  background: rgba(59, 130, 246, 0.3);
  border: 2px solid #3b82f6;
  color: #60a5fa;
}

.scratchoff-result.legendary {
  background: rgba(168, 85, 247, 0.3);
  border: 2px solid #a855f7;
  color: #c084fc;
}

.scratchoff-result.mythic {
  background: rgba(251, 191, 36, 0.3);
  border: 2px solid #fbbf24;
  color: #fcd34d;
}

.scratchoff-result.eternal {
  background: linear-gradient(135deg, rgba(236, 72, 153, 0.3), rgba(168, 85, 247, 0.3));
  border: 2px solid #ec4899;
  color: #f9a8d4;
}

/* MUSEUM FULLSCREEN */
#museum-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.95);
  z-index: 20000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.3s ease;
}

#museum-fullscreen.active {
  display: flex;
}

.museum-container {
  width: 90%;
  max-width: 1200px;
  height: 90vh;
  background: linear-gradient(180deg, #0f1720, #0b1220);
  border-radius: 20px;
  border: 3px solid rgba(6, 182, 212, 0.5);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
}

.museum-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 2px solid rgba(6, 182, 212, 0.3);
  flex-shrink: 0;
}

.museum-header h2 {
  margin: 0;
  font-size: 28px;
  color: #06b6d4;
  text-shadow: 0 2px 8px rgba(6, 182, 212, 0.5);
}

.museum-close-btn {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 2px solid #ef4444;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  font-size: 18px;
  transition: all 0.2s;
}

.museum-close-btn:hover {
  background: rgba(239, 68, 68, 0.4);
  transform: scale(1.05);
}

.museum-content {
  flex: 1;
  padding: 30px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.museum-stats {
  text-align: center;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  display: flex;
  justify-content: space-around;
  font-size: 18px;
  font-weight: 700;
}

.museum-rarity-section {
  background: rgba(255, 255, 255, 0.02);
  padding: 20px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.museum-rarity-section h3 {
  margin: 0 0 16px 0;
  font-size: 20px;
  color: var(--accent);
}

.museum-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 16px;
}

.museum-item {
  background: rgba(255, 255, 255, 0.03);
  border: 2px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  transition: all 0.3s;
  cursor: pointer;
}

.museum-item:hover {
  background: rgba(255, 255, 255, 0.05);
  transform: translateY(-2px);
}

.museum-item.locked {
  filter: brightness(0.3);
  cursor: default;
}

.museum-item.locked:hover {
  transform: none;
}

.museum-item-icon {
  font-size: 48px;
  margin-bottom: 8px;
}

.museum-item.locked .museum-item-icon {
  filter: brightness(0);
  opacity: 0.5;
}

.museum-item-name {
  font-size: 14px;
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}

.museum-item.locked .museum-item-name {
  color: var(--muted);
}

.museum-item-rarity {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: 0.5px;
}

.rarity-common { color: #9ca3af; }
.rarity-rare { color: #3b82f6; }
.rarity-legendary { color: #a855f7; }
.rarity-mythic { color: #fbbf24; }
.rarity-eternal { 
  background: linear-gradient(135deg, #ec4899, #a855f7);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* CUSTOM CONFIRMATION MODAL */
.confirm-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  z-index: 25000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.confirm-modal.active {
  display: flex;
}

.confirm-modal-content {
  background: var(--panel);
  border: 2px solid var(--accent);
  border-radius: 16px;
  padding: 32px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.8);
  animation: scaleIn 0.3s ease;
}

@keyframes scaleIn {
  from {
    transform: scale(0.9);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.confirm-modal-title {
  font-size: 24px;
  font-weight: 800;
  margin-bottom: 16px;
  color: var(--accent);
  text-align: center;
}

.confirm-modal-message {
  font-size: 16px;
  line-height: 1.6;
  margin-bottom: 24px;
  color: #e6eef6;
  text-align: center;
}

.confirm-modal-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
}

.confirm-modal-buttons button {
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  min-width: 120px;
}

.confirm-modal-confirm {
  background: var(--accent);
  color: #022029;
}

.confirm-modal-confirm:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(6, 182, 212, 0.4);
}

.confirm-modal-cancel {
  background: rgba(239, 68, 68, 0.2);
  color: #ef4444;
  border: 2px solid #ef4444;
}

.confirm-modal-cancel:hover {
  background: rgba(239, 68, 68, 0.3);
  transform: translateY(-2px);
}

/* WELCOME MODAL */
.welcome-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  z-index: 30000;
  display: none;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.4s ease;
}

.welcome-modal.active {
  display: flex;
}

.welcome-modal-content {
  background: linear-gradient(180deg, var(--panel), #040812);
  border: 3px solid var(--accent);
  border-radius: 20px;
  padding: 40px;
  max-width: 600px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.9);
  animation: welcomeSlide 0.5s ease;
}

@keyframes welcomeSlide {
  from {
    transform: translateY(-50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.welcome-modal-header {
  text-align: center;
  margin-bottom: 24px;
}

.welcome-modal-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 8px;
  text-shadow: 0 2px 10px rgba(6, 182, 212, 0.5);
}

.welcome-modal-subtitle {
  font-size: 18px;
  color: var(--muted);
  font-style: italic;
}

.welcome-modal-body {
  margin-bottom: 28px;
}

.welcome-feature-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin: 20px 0;
}

.welcome-feature {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.welcome-feature-icon {
  font-size: 24px;
  flex-shrink: 0;
  margin-top: 2px;
}

.welcome-feature-text {
  flex: 1;
}

.welcome-feature-title {
  font-weight: 700;
  font-size: 16px;
  color: #fff;
  margin-bottom: 4px;
}

.welcome-feature-desc {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.4;
}

.welcome-modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  padding-top: 20px;
  text-align: center;
}

.welcome-support-text {
  font-size: 15px;
  color: var(--muted);
  margin-bottom: 12px;
  line-height: 1.5;
}

.welcome-buttons {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}

.welcome-kofi-btn {
  background: linear-gradient(135deg, #ff5e5b, #ff4081);
  color: #fff;
  padding: 12px 24px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.welcome-kofi-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 64, 129, 0.4);
}

.welcome-close-btn {
  background: var(--accent);
  color: #022029;
  padding: 12px 32px;
  font-size: 16px;
  font-weight: 700;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.welcome-close-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(6, 182, 212, 0.4);
}

/* particle layer */
#particle-layer{position:absolute;left:0;top:0;right:0;bottom:0;pointer-events:none;overflow:visible}
.particle { position:absolute;width:14px;height:14px;border-radius:5px; background:linear-gradient(180deg,#fff,rgba(255,255,255,0.8)); opacity:0.95; transform-origin:center; animation: particle-float 700ms cubic-bezier(.2,.8,.2,1) forwards; will-change: transform, opacity; }
.particle.golden{background:linear-gradient(180deg,#ffd700,#ffb700)}
.particle.rainbow{background:linear-gradient(135deg,#ff0080,#ff8c00,#40e0d0)}
.particle.cosmic{background:linear-gradient(135deg,#a855f7,#ec4899,#3b82f6);box-shadow:0 0 10px rgba(168,85,247,0.8)}
@keyframes particle-float { 0% { transform: translateY(0) scale(1); opacity:1 } 100% { transform: translateY(-120px) scale(.4) rotate(30deg); opacity:0 } }

/* toast layer */
#toast-layer{position:fixed;right:24px;bottom:24px;display:flex;flex-direction:column;gap:12px;z-index:9999}
.toast{background:rgba(0,0,0,0.85);color:#fff;padding:14px 18px;border-radius:10px;box-shadow:var(--shadow);font-weight:600;transform-origin:right bottom;opacity:0;animation:toast-in .22s forwards;font-size:16px}
.toast.golden{background:linear-gradient(135deg,#ffd700,#ff8c00);color:#000}
.toast.success{background:var(--success)}
.toast.warning{background:#f97316;color:#000}
.toast.cosmic{background:linear-gradient(135deg,#a855f7,#ec4899);color:#fff;box-shadow:0 0 20px rgba(168,85,247,0.6)}
@keyframes toast-in{0%{opacity:0;transform:translateY(12px) scale(.98)}100%{opacity:1;transform:none}}

/* modal */
.modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.8);z-index:10000;align-items:center;justify-content:center}
.modal.active{display:flex}
.modal-content{background:var(--panel);padding:28px;border-radius:16px;max-width:550px;width:90%;max-height:80vh;overflow-y:auto;position:relative}
.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}
.modal-header h3{margin:0;font-size:24px}
.modal-close{background:transparent;color:var(--muted);font-size:32px;padding:4px 12px;cursor:pointer}
.modal-close:hover{color:#fff}
.modal-content p{font-size:16px;line-height:1.6}

/* responsive */
@media (max-width:920px){
  .app{flex-direction:column}
  .shop{width:100%;max-height:none}
  .side-panel{width:100%;max-height:none}
  .play-area{max-height:none}
  #circle{width:180px;height:180px;min-width:180px;min-height:180px;max-width:180px;max-height:180px;font-size:44px}
  .stats-grid{grid-template-columns:1fr}
  .theme-selector{grid-template-columns:repeat(2,1fr)}
  .shop-subtabs{justify-content:center}
  .hud{grid-template-columns:1fr}
  
  .blackjack-fullscreen-container {
    width: 95%;
    height: 95vh;
  }
  
  .playing-card {
    width: 60px;
    height: 86px;
    font-size: 20px;
  }
  
  .blackjack-buttons {
    grid-template-columns: 1fr;
  }

  .museum-grid {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }

  #scratchoff-canvas {
    width: 90%;
    max-width: 400px;
    height: auto;
  }
}

/* Bug creature */
.bug-creature{
  position:fixed;
  width:40px;
  height:40px;
  font-size:32px;
  cursor:pointer;
  z-index:5000;
  animation:bugWiggle 0.3s infinite;
  user-select:none;
  transition:transform 0.1s;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}
.bug-creature:hover{transform:scale(1.1)}
@keyframes bugWiggle{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.bug-squished{animation:bugSquish 0.4s forwards !important}
@keyframes bugSquish{0%{transform:scale(1) rotate(0deg);opacity:1}100%{transform:scale(0.3) rotate(180deg);opacity:0}}