/* ===== CASINO PARADISE — PREMIUM 3D CASINO UI ===== */
:root {
  --bg1: #0a0015;
  --bg2: #1a0533;
  --bg3: #0a1628;
  --gold: #FFD700;
  --gold-light: #FFE55C;
  --gold-mid: #FFA500;
  --gold-dark: #B8860B;
  --gold-deep: #8B6914;
  --purple: #8b5cf6;
  --purple-dark: #6d28d9;
  --blue: #3b82f6;
  --cyan: #00FFFF;
  --pink: #FF1493;
  --red: #FF4444;
  --green: #10b981;
  --text: #f8fafc;
  --text-dim: #94a3b8;
  --glass: rgba(255,255,255,0.06);
  --glass-border: rgba(255,255,255,0.12);
  --radius: 16px;
  --radius-sm: 10px;
}

* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { height:100%; overflow:hidden; }
body {
  font-family: 'Prompt', sans-serif;
  background: linear-gradient(160deg, var(--bg2) 0%, var(--bg1) 30%, var(--bg3) 100%);
  color: var(--text);
  min-height: 100dvh;
}

/* ===== BG EFFECTS ===== */
#particlesBg {
  position:fixed; inset:0; z-index:0; pointer-events:none;
}
.light-rays {
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(ellipse at 20% 0%, rgba(139,92,246,0.15) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 0%, rgba(0,255,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 100%, rgba(255,215,0,0.1) 0%, transparent 40%);
}

#app {
  position:relative; z-index:1;
  display:flex; flex-direction:column;
  height:100dvh;
}

/* ===== HEADER ===== */
header {
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 16px;
  background: linear-gradient(180deg, rgba(26,5,51,0.95), rgba(10,0,21,0.9));
  backdrop-filter:blur(20px);
  border-bottom:1px solid rgba(255,215,0,0.15);
  z-index:10; flex-shrink:0;
  box-shadow: 0 2px 20px rgba(0,0,0,0.5);
}
.logo-wrap {
  display:flex; align-items:center; gap:8px;
}
.logo-icon {
  width:32px; height:32px;
  display:flex; align-items:center; justify-content:center;
}
.logo-diamond {
  width:20px; height:20px;
  background: linear-gradient(135deg, #00d4ff, #0099ff, #00d4ff);
  transform: rotate(45deg);
  border-radius:3px;
  box-shadow: 0 0 12px rgba(0,212,255,0.6), inset 0 0 6px rgba(255,255,255,0.4);
  animation: diamondPulse 2s ease-in-out infinite;
}
@keyframes diamondPulse {
  0%,100% { box-shadow: 0 0 12px rgba(0,212,255,0.6), inset 0 0 6px rgba(255,255,255,0.4); }
  50% { box-shadow: 0 0 20px rgba(0,212,255,0.9), inset 0 0 10px rgba(255,255,255,0.6); }
}
.logo-text {
  font-family:'Orbitron',sans-serif;
  font-size:14px; font-weight:700;
  background: linear-gradient(135deg, var(--gold), var(--gold-light), #fff, var(--gold));
  background-size:200% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: shimmer 3s linear infinite;
  text-shadow: none;
}
.logo-text span { font-weight:900; }
@keyframes shimmer { 0%{background-position:0%} 100%{background-position:200%} }

.header-right { display:flex; align-items:center; gap:10px; }
.coin-display {
  display:flex; align-items:center; gap:6px;
  background: linear-gradient(135deg, rgba(255,215,0,0.15), rgba(184,134,11,0.1));
  border:1px solid rgba(255,215,0,0.3);
  border-radius:24px; padding:5px 14px 5px 8px;
  cursor:pointer; transition:all 0.3s; position:relative;
}
.coin-display:hover { border-color:var(--gold); box-shadow:0 0 15px rgba(255,215,0,0.3); }
.coin-3d {
  width:26px; height:26px; border-radius:50%;
  background: linear-gradient(145deg, #FFE55C, #FFD700, #B8860B);
  border:2px solid #DAA520;
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.4), inset 0 1px 2px rgba(255,255,255,0.5);
  animation: coinRotate 4s ease-in-out infinite;
}
.coin-face {
  font-family:'Orbitron',sans-serif; font-size:12px; font-weight:900;
  color:#8B6914; text-shadow:0 1px 0 rgba(255,255,255,0.3);
}
@keyframes coinRotate {
  0%,100% { transform:perspective(100px) rotateY(0); }
  50% { transform:perspective(100px) rotateY(180deg); }
}
.coin-display span {
  font-family:'Orbitron',sans-serif; font-weight:700; font-size:14px;
  color:var(--gold-light);
  text-shadow: 0 0 8px rgba(255,215,0,0.4);
}
.coin-plus {
  position:absolute; right:-6px; top:-4px;
  background: linear-gradient(135deg, #10b981, #059669);
  color:#fff; width:16px; height:16px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11px; font-weight:900;
  box-shadow: 0 2px 6px rgba(16,185,129,0.5);
}
.level-badge {
  font-family:'Orbitron',sans-serif; font-size:11px; font-weight:700;
  background: linear-gradient(135deg, var(--purple), var(--blue));
  padding:4px 10px; border-radius:12px;
  cursor:pointer; transition:all 0.2s;
  box-shadow: 0 0 10px rgba(139,92,246,0.3);
}

/* ===== JACKPOT BAR ===== */
.jackpot-bar {
  display:flex; align-items:center; justify-content:center; gap:10px;
  padding:6px 16px;
  background: linear-gradient(90deg, #1a0533, #2d0a4e, #1a0533);
  border-bottom:1px solid rgba(255,215,0,0.2);
  position:relative; overflow:hidden; flex-shrink:0;
}
.jackpot-glow {
  position:absolute; inset:0; pointer-events:none;
  background: radial-gradient(ellipse at center, rgba(255,215,0,0.1) 0%, transparent 70%);
  animation: jackpotGlow 2s ease-in-out infinite;
}
@keyframes jackpotGlow {
  0%,100% { opacity:0.5; } 50% { opacity:1; }
}
.jackpot-label {
  font-family:'Orbitron',sans-serif; font-size:10px; font-weight:900;
  background: linear-gradient(135deg, var(--red), var(--pink));
  padding:2px 8px; border-radius:4px; color:#fff;
  letter-spacing:1px;
  box-shadow: 0 0 10px rgba(255,68,68,0.4);
}
.jackpot-amount {
  font-family:'Orbitron',sans-serif; font-size:18px; font-weight:900;
  background: linear-gradient(135deg, var(--gold), var(--gold-light), #fff, var(--gold-light), var(--gold));
  background-size:300% auto;
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  animation: shimmer 2s linear infinite;
  text-shadow: none;
}

/* ===== MARQUEE ===== */
.marquee-bar {
  overflow:hidden; white-space:nowrap;
  background: rgba(0,0,0,0.3);
  padding:4px 0; font-size:11px; color:var(--gold-light);
  border-bottom:1px solid rgba(255,255,255,0.05);
  flex-shrink:0;
}
.marquee-track {
  display:inline-block;
  animation: marquee 25s linear infinite;
}
@keyframes marquee {
  0% { transform:translateX(100vw); }
  100% { transform:translateX(-100%); }
}

/* ===== MAIN ===== */
main {
  flex:1; overflow-y:auto; overflow-x:hidden;
  padding:16px; padding-bottom:90px;
  scroll-behavior:smooth; -webkit-overflow-scrolling:touch;
}

/* ===== BOTTOM NAV ===== */
#bottomNav {
  position:fixed; bottom:0; left:0; right:0;
  display:flex; justify-content:space-around; align-items:flex-end;
  background: linear-gradient(180deg, rgba(10,0,30,0.95), rgba(5,0,15,0.98));
  backdrop-filter:blur(20px);
  border-top:1px solid rgba(255,215,0,0.1);
  padding:6px 0 max(6px, env(safe-area-inset-bottom));
  z-index:100;
}
.nav-btn {
  display:flex; flex-direction:column; align-items:center;
  background:none; border:none; color:var(--text-dim);
  font-family:'Prompt',sans-serif; font-size:9px;
  cursor:pointer; padding:4px 12px; transition:all 0.3s;
  position:relative;
}
.nav-svg {
  width:22px; height:22px; fill:none; stroke:currentColor;
  stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round;
  margin-bottom:2px; transition:all 0.3s;
}
.nav-btn.active { color:var(--gold); }
.nav-btn.active .nav-svg { filter:drop-shadow(0 0 6px rgba(255,215,0,0.6)); stroke:var(--gold); }
.nav-btn.active::after {
  content:''; position:absolute; top:-1px; left:50%; transform:translateX(-50%);
  width:20px; height:2px; background:var(--gold); border-radius:0 0 4px 4px;
  box-shadow:0 0 8px rgba(255,215,0,0.5);
}
/* Center spin button */
.spin-nav {
  margin-top:-20px;
}
.spin-nav-icon {
  width:52px; height:52px; border-radius:50%;
  background: linear-gradient(145deg, var(--gold), var(--gold-dark));
  border:3px solid var(--gold-light);
  display:flex; align-items:center; justify-content:center;
  box-shadow: 0 0 20px rgba(255,215,0,0.4), 0 4px 12px rgba(0,0,0,0.4),
    inset 0 2px 4px rgba(255,255,255,0.3);
  transition:all 0.3s;
}
.spin-nav:hover .spin-nav-icon {
  box-shadow: 0 0 30px rgba(255,215,0,0.7), 0 4px 12px rgba(0,0,0,0.4);
  transform:scale(1.1);
}

/* ===== CSS GAME SYMBOLS ===== */
.sym-wrap {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
}

/* Diamond */
.css-diamond {
  width:36px; height:36px; position:relative;
}
.css-diamond::before {
  content:''; position:absolute; inset:4px;
  background: linear-gradient(135deg, #00d4ff, #0066cc, #00d4ff, #99eeff);
  transform:rotate(45deg); border-radius:3px;
  box-shadow: 0 0 15px rgba(0,212,255,0.7), inset 0 0 8px rgba(255,255,255,0.5);
  animation: gemGlow 2s ease-in-out infinite;
}
.css-diamond::after {
  content:''; position:absolute; top:6px; left:12px;
  width:12px; height:6px;
  background: linear-gradient(180deg, rgba(255,255,255,0.8), transparent);
  transform:rotate(45deg); border-radius:2px;
}
@keyframes gemGlow {
  0%,100% { box-shadow: 0 0 15px rgba(0,212,255,0.7), inset 0 0 8px rgba(255,255,255,0.5); }
  50% { box-shadow: 0 0 25px rgba(0,212,255,1), inset 0 0 12px rgba(255,255,255,0.8); }
}

/* Lucky 7 */
.css-seven {
  font-family:'Orbitron',sans-serif; font-size:32px; font-weight:900;
  background: linear-gradient(180deg, #FF4444, #CC0000, #FFD700);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 2px 4px rgba(255,0,0,0.5));
  text-shadow: none;
  line-height:1;
}

/* Bell */
.css-bell {
  width:32px; height:34px; position:relative;
}
.css-bell::before {
  content:''; position:absolute; top:2px; left:4px; right:4px; bottom:8px;
  background: linear-gradient(180deg, #FFE55C, #FFD700, #B8860B);
  border-radius:50% 50% 4px 4px;
  box-shadow: 0 0 10px rgba(255,215,0,0.5), inset 0 2px 4px rgba(255,255,255,0.4);
}
.css-bell::after {
  content:''; position:absolute; bottom:2px; left:50%; transform:translateX(-50%);
  width:8px; height:8px; border-radius:50%;
  background: linear-gradient(135deg, #FFD700, #8B6914);
  box-shadow: 0 0 6px rgba(255,215,0,0.4);
}

/* Crown */
.css-crown {
  width:36px; height:28px; position:relative;
}
.css-crown::before {
  content:''; position:absolute; bottom:0; left:2px; right:2px; height:10px;
  background: linear-gradient(180deg, #FFD700, #B8860B);
  border-radius:0 0 4px 4px;
  box-shadow: 0 2px 8px rgba(255,215,0,0.4);
}
.css-crown::after {
  content:''; position:absolute; top:0; left:0; right:0; height:22px;
  background: linear-gradient(180deg, #FFE55C, #FFD700);
  clip-path: polygon(0% 100%, 10% 30%, 25% 70%, 50% 0%, 75% 70%, 90% 30%, 100% 100%);
  filter: drop-shadow(0 0 6px rgba(255,215,0,0.6));
}

/* Cherry */
.css-cherry {
  width:36px; height:36px; position:relative;
}
.css-cherry-ball {
  width:14px; height:14px; border-radius:50%;
  background: linear-gradient(135deg, #ff6666, #cc0000, #990000);
  position:absolute; bottom:4px;
  box-shadow: 0 0 8px rgba(255,0,0,0.5), inset 2px 2px 4px rgba(255,255,255,0.3);
}
.css-cherry-ball:nth-child(1) { left:4px; }
.css-cherry-ball:nth-child(2) { right:4px; }
.css-cherry-stem {
  position:absolute; top:2px; left:50%; width:2px; height:16px;
  background: linear-gradient(180deg, #228B22, #006400);
  transform-origin:bottom center;
}
.css-cherry-stem:nth-child(3) { transform:rotate(-20deg); left:14px; }
.css-cherry-stem:nth-child(4) { transform:rotate(20deg); left:20px; }
.css-cherry-leaf {
  position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:12px; height:8px;
  background: linear-gradient(135deg, #32CD32, #228B22);
  border-radius:0 50% 50% 50%; transform:rotate(-30deg);
  box-shadow: 0 0 4px rgba(50,205,50,0.4);
}

/* Star */
.css-star {
  width:36px; height:36px; position:relative;
  animation: starSpin 6s linear infinite;
}
.css-star::before {
  content:'★'; position:absolute; inset:0;
  font-size:34px; line-height:36px; text-align:center;
  background: linear-gradient(135deg, #FFE55C, #FFD700, #FFA500);
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  filter: drop-shadow(0 0 8px rgba(255,215,0,0.7));
}
@keyframes starSpin { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }

/* WILD */
.css-wild {
  padding:4px 8px; border-radius:6px;
  background: linear-gradient(135deg, #FFD700, #FF8C00, #FF4500, #FFD700);
  background-size:200% 200%;
  animation: wildShift 2s ease-in-out infinite;
  font-family:'Orbitron',sans-serif; font-size:14px; font-weight:900;
  color:#000; letter-spacing:1px;
  box-shadow: 0 0 15px rgba(255,215,0,0.6), inset 0 1px 2px rgba(255,255,255,0.4);
  text-shadow: 0 1px 0 rgba(255,255,255,0.3);
}
@keyframes wildShift {
  0%,100% { background-position:0% 50%; }
  50% { background-position:100% 50%; }
}

/* ===== GOLD FRAME (ornate border for slot machine) ===== */
.gold-frame {
  position:relative; padding:4px;
  background: linear-gradient(145deg, #FFE55C, #FFD700, #B8860B, #8B6914, #B8860B, #FFD700);
  border-radius:20px;
  box-shadow:
    0 0 30px rgba(255,215,0,0.3),
    0 0 60px rgba(255,215,0,0.1),
    inset 0 0 20px rgba(255,215,0,0.2);
}
.gold-frame::before {
  content:''; position:absolute; inset:2px;
  border:2px solid rgba(255,215,0,0.4);
  border-radius:18px; pointer-events:none;
}
.gold-frame-inner {
  background: linear-gradient(180deg, #0d001a, #1a0030, #0d001a);
  border-radius:16px; overflow:hidden;
  box-shadow: inset 0 0 40px rgba(139,92,246,0.15);
}

/* ===== ORNAMENT CORNERS ===== */
.ornament-tl, .ornament-tr, .ornament-bl, .ornament-br {
  position:absolute; width:28px; height:28px; z-index:2;
}
.ornament-tl { top:-2px; left:-2px; }
.ornament-tr { top:-2px; right:-2px; transform:scaleX(-1); }
.ornament-bl { bottom:-2px; left:-2px; transform:scaleY(-1); }
.ornament-br { bottom:-2px; right:-2px; transform:scale(-1); }
.ornament-tl::before, .ornament-tr::before, .ornament-bl::before, .ornament-br::before {
  content:''; position:absolute; inset:4px;
  border-top:3px solid var(--gold);
  border-left:3px solid var(--gold);
  border-radius:6px 0 0 0;
  box-shadow: -2px -2px 8px rgba(255,215,0,0.3);
}

/* ===== SLOT MACHINE ===== */
.slot-machine { max-width:380px; margin:0 auto; }

/* Multiplier display */
.multiplier-bar {
  display:flex; justify-content:center; gap:8px; margin-bottom:12px;
}
.mult-chip {
  padding:4px 12px; border-radius:20px;
  font-family:'Orbitron',sans-serif; font-size:12px; font-weight:700;
  background: var(--glass); border:1px solid var(--glass-border);
  color:var(--text-dim); transition:all 0.3s;
}
.mult-chip.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color:var(--gold-light); color:#000;
  box-shadow: 0 0 15px rgba(255,215,0,0.5);
  animation: glow 1.5s ease-in-out infinite;
}
@keyframes glow {
  0%,100% { box-shadow: 0 0 15px rgba(255,215,0,0.5); }
  50% { box-shadow: 0 0 25px rgba(255,215,0,0.8); }
}

.reels-container {
  padding:16px 12px;
}
.reels-row {
  display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
}
.reel-col {
  height:180px; overflow:hidden; position:relative;
  background: linear-gradient(180deg, rgba(0,0,0,0.6), rgba(0,0,0,0.3), rgba(0,0,0,0.6));
  border-radius:12px;
  border:1px solid rgba(255,215,0,0.15);
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
}
.reel-strip { transition:transform 0.6s cubic-bezier(.2,.8,.3,1); }
.sym {
  height:60px; display:flex; align-items:center; justify-content:center;
}
.payline-indicator {
  position:absolute; left:0; right:0; top:50%; transform:translateY(-50%);
  height:62px; border:2px solid rgba(255,215,0,0.3);
  border-radius:8px; pointer-events:none; z-index:2;
  box-shadow: 0 0 20px rgba(255,215,0,0.15), inset 0 0 20px rgba(255,215,0,0.05);
}
/* Payline win animation */
.payline-win {
  animation: paylineFlash 0.5s ease-in-out 3;
}
@keyframes paylineFlash {
  0%,100% { border-color:rgba(255,215,0,0.3); box-shadow:0 0 20px rgba(255,215,0,0.15); }
  50% { border-color:rgba(255,215,0,1); box-shadow:0 0 40px rgba(255,215,0,0.6); }
}

/* Slot controls */
.slot-controls {
  display:flex; align-items:center; justify-content:center; gap:16px;
  margin-top:16px;
}
.bet-group { display:flex; gap:6px; }
.bet-chip {
  width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family:'Orbitron',sans-serif; font-size:10px; font-weight:700;
  background:var(--glass); border:2px solid var(--glass-border);
  color:var(--text-dim); cursor:pointer; transition:all 0.2s;
}
.bet-chip.active {
  background: linear-gradient(145deg, var(--gold), var(--gold-dark));
  border-color:var(--gold-light); color:#000;
  box-shadow: 0 0 12px rgba(255,215,0,0.4),
    inset 0 1px 2px rgba(255,255,255,0.3);
}
.bet-chip:active { transform:scale(0.9); }

/* SPIN button — big, 3D, glowing */
.btn-spin {
  width:84px; height:84px; border-radius:50%;
  background: linear-gradient(145deg, #FF4444, #CC0000, #FF6600);
  border:4px solid;
  border-color: #FF6666 #CC0000 #990000 #FF4444;
  color:#fff; font-size:13px; font-weight:900;
  font-family:'Orbitron',sans-serif;
  cursor:pointer; transition:all 0.2s;
  box-shadow:
    0 6px 0 #990000,
    0 8px 20px rgba(255,68,68,0.5),
    0 0 30px rgba(255,68,68,0.3),
    inset 0 2px 4px rgba(255,255,255,0.3);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column; line-height:1.1;
  text-shadow: 0 1px 2px rgba(0,0,0,0.5);
  position:relative;
}
.btn-spin::after {
  content:''; position:absolute; top:6px; left:15%; right:15%; height:30%;
  background: linear-gradient(180deg, rgba(255,255,255,0.3), transparent);
  border-radius:50%;
}
.btn-spin:hover {
  transform:translateY(-2px);
  box-shadow:
    0 8px 0 #990000,
    0 10px 30px rgba(255,68,68,0.6),
    0 0 40px rgba(255,68,68,0.5);
}
.btn-spin:active {
  transform:translateY(4px);
  box-shadow:
    0 2px 0 #990000,
    0 4px 10px rgba(255,68,68,0.4);
}
.btn-spin:disabled { opacity:0.5; cursor:not-allowed; transform:none !important; }
.btn-spin .spin-text { font-size:20px; }

/* Win display */
.win-display {
  text-align:center; margin-top:16px; padding:16px;
  background: linear-gradient(135deg, rgba(255,215,0,0.2), rgba(255,140,0,0.1));
  border:2px solid rgba(255,215,0,0.5);
  border-radius:var(--radius);
  font-family:'Orbitron',sans-serif; font-size:22px; font-weight:900;
  color:var(--gold-light);
  box-shadow: 0 0 30px rgba(255,215,0,0.2);
  animation: winBounce 0.5s ease;
  text-shadow: 0 0 10px rgba(255,215,0,0.5);
}
.win-display.big-win {
  background: linear-gradient(135deg, rgba(255,68,68,0.2), rgba(255,20,147,0.1));
  border-color:rgba(255,68,68,0.5);
  animation: bigWinFlash 0.3s ease 4;
}
@keyframes winBounce { 0%{transform:scale(0.5);opacity:0} 60%{transform:scale(1.1)} 100%{transform:scale(1);opacity:1} }
@keyframes bigWinFlash {
  0%,100% { background:linear-gradient(135deg,rgba(255,68,68,0.2),rgba(255,20,147,0.1)); }
  50% { background:linear-gradient(135deg,rgba(255,215,0,0.3),rgba(255,140,0,0.2)); }
}

/* ===== LOBBY ===== */
.lobby-section { margin-bottom:20px; }

/* Category tabs */
.category-tabs {
  display:flex; gap:8px; margin-bottom:16px;
  overflow-x:auto; padding:2px;
}
.cat-tab {
  padding:6px 16px; border-radius:20px; white-space:nowrap;
  font-family:'Prompt',sans-serif; font-size:12px; font-weight:600;
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text-dim); cursor:pointer; transition:all 0.3s;
}
.cat-tab.active {
  background: linear-gradient(135deg, var(--gold), var(--gold-dark));
  border-color:var(--gold); color:#000;
  box-shadow: 0 0 10px rgba(255,215,0,0.3);
}

/* Featured carousel */
.featured-scroll {
  display:flex; gap:12px; overflow-x:auto; padding:4px 0 12px;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
}
.featured-scroll::-webkit-scrollbar { display:none; }
.featured-card {
  min-width:280px; scroll-snap-align:start;
  border-radius:var(--radius); padding:24px 20px;
  cursor:pointer; transition:all 0.3s;
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,0.1);
  display:flex; align-items:center; gap:16px;
}
.featured-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(0,0,0,0.5); }
.featured-card:active { transform:scale(0.97); }
.featured-card .fc-icon { font-size:48px; flex-shrink:0; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3)); }
.featured-card .fc-info { flex:1; }
.featured-card .fc-name { font-weight:700; font-size:16px; margin-bottom:2px; }
.featured-card .fc-desc { font-size:11px; color:rgba(255,255,255,0.7); margin-bottom:8px; }
.featured-card .fc-badge {
  position:absolute; top:12px; right:12px;
  padding:2px 8px; border-radius:4px;
  font-size:10px; font-weight:800; letter-spacing:0.5px;
}
.badge-hot { background:linear-gradient(135deg,var(--red),#FF1493); color:#fff; box-shadow:0 0 10px rgba(255,68,68,0.5); }
.badge-new { background:linear-gradient(135deg,var(--cyan),#0099ff); color:#000; box-shadow:0 0 10px rgba(0,255,255,0.5); }
.fc-play {
  display:inline-block; padding:6px 20px; border-radius:20px;
  font-size:12px; font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#000; box-shadow:0 4px 12px rgba(255,215,0,0.3);
}

.fc-slots { background:linear-gradient(135deg,#4c1d95,#7c3aed); }
.fc-poker { background:linear-gradient(135deg,#064e3b,#059669); }
.fc-wheel { background:linear-gradient(135deg,#92400e,#d97706); }
.fc-hilo { background:linear-gradient(135deg,#7f1d1d,#dc2626); }
.fc-bj { background:linear-gradient(135deg,#1e3a5f,#1d4ed8); }

/* Shimmer overlay on cards */
.featured-card::after {
  content:''; position:absolute; top:0; left:-100%; width:50%; height:100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.1), transparent);
  transition:left 0.5s;
}
.featured-card:hover::after { left:100%; }

/* Game grid */
.game-grid {
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.game-card {
  border-radius:var(--radius); padding:20px 12px;
  text-align:center; cursor:pointer;
  transition:all 0.4s cubic-bezier(.25,.8,.25,1);
  position:relative; overflow:hidden;
  border:1px solid rgba(255,255,255,0.08);
  perspective:600px;
}
.game-card:hover {
  transform:translateY(-4px) rotateX(2deg) rotateY(-2deg);
  box-shadow:0 16px 40px rgba(0,0,0,0.5);
  border-color:rgba(255,215,0,0.2);
}
.game-card:active { transform:scale(0.95); }
.game-card .gc-icon { font-size:44px; display:block; margin-bottom:8px; filter:drop-shadow(0 4px 8px rgba(0,0,0,0.4)); }
.game-card .gc-name { font-weight:700; font-size:14px; margin-bottom:2px; }
.game-card .gc-desc { font-size:10px; color:var(--text-dim); line-height:1.3; }
.game-card .gc-play {
  display:inline-block; margin-top:8px;
  padding:5px 16px; border-radius:16px;
  font-size:11px; font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#000;
}
.game-card .gc-badge {
  position:absolute; top:8px; right:8px;
  padding:2px 6px; border-radius:4px;
  font-size:9px; font-weight:800;
}

.gc-slots { background:linear-gradient(135deg,#4c1d95,#7c3aed); }
.gc-poker { background:linear-gradient(135deg,#064e3b,#059669); }
.gc-wheel { background:linear-gradient(135deg,#92400e,#d97706); }
.gc-hilo { background:linear-gradient(135deg,#7f1d1d,#dc2626); }
.gc-bj { background:linear-gradient(135deg,#1e3a5f,#1d4ed8); }

/* Quick actions */
.quick-actions {
  display:flex; gap:10px; margin-bottom:16px;
}
.quick-action {
  flex:1; padding:14px 8px; border-radius:var(--radius-sm);
  text-align:center; cursor:pointer; transition:all 0.3s;
  border:1px solid var(--glass-border); position:relative; overflow:hidden;
}
.quick-action:hover { transform:translateY(-2px); border-color:rgba(255,215,0,0.3); }
.qa-daily { background:linear-gradient(135deg,rgba(255,215,0,0.12),rgba(255,215,0,0.03)); }
.qa-wheel { background:linear-gradient(135deg,rgba(139,92,246,0.12),rgba(139,92,246,0.03)); }
.qa-invite { background:linear-gradient(135deg,rgba(255,20,147,0.12),rgba(255,20,147,0.03)); }
.quick-action .qa-icon { font-size:28px; display:block; margin-bottom:4px; }
.quick-action .qa-text { font-size:10px; color:var(--text-dim); }

/* ===== GAME VIEWS ===== */
.game-header {
  display:flex; align-items:center; gap:12px; margin-bottom:16px;
}
.game-back {
  width:36px; height:36px; border-radius:50%;
  background:var(--glass); border:1px solid var(--glass-border);
  color:#fff; font-size:18px; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.2s;
}
.game-back:hover { background:rgba(255,255,255,0.15); }
.game-title {
  font-family:'Orbitron',sans-serif; font-size:16px; font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}

/* Bet display */
.bet-display {
  text-align:center; margin:8px 0;
  font-family:'Orbitron',sans-serif; font-size:12px; color:var(--text-dim);
}
.bet-display span { color:var(--gold); font-weight:700; }

/* ===== POKER ===== */
.poker-area { max-width:400px; margin:0 auto; text-align:center; }
.poker-cards {
  display:flex; gap:6px; justify-content:center; margin:16px 0;
  perspective:800px;
}
.poker-card {
  width:58px; height:84px; border-radius:8px;
  background:linear-gradient(135deg,#fff,#e8e8e8);
  color:#1e293b; display:flex; align-items:center; justify-content:center;
  flex-direction:column; font-size:18px; font-weight:700;
  cursor:pointer; transition:all 0.3s;
  box-shadow:0 4px 12px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.8);
  border:2px solid transparent;
}
.poker-card.held {
  border-color:var(--gold);
  box-shadow:0 0 15px rgba(255,215,0,0.5);
  transform:translateY(-8px);
}
.poker-card.held::after {
  content:'HOLD'; position:absolute; top:-10px;
  background:var(--gold); color:#000; font-size:8px; font-weight:800;
  padding:2px 6px; border-radius:4px;
}
.poker-card.facedown {
  background:linear-gradient(135deg,#2d0a4e,#1a0533);
  border:2px solid var(--gold-dark);
}
.poker-card.facedown::before {
  content:''; width:70%; height:70%;
  background:repeating-linear-gradient(45deg, var(--gold-dark), var(--gold-dark) 2px, transparent 2px, transparent 8px);
  border-radius:4px; opacity:0.3;
}
.poker-card.red { color:#dc2626; }
.poker-card .card-suit { font-size:12px; }
.poker-paytable {
  font-size:11px; line-height:1.8;
  display:grid; grid-template-columns:1fr auto; gap:0 12px; text-align:left;
}
.pt-hand { color:var(--text-dim); }
.pt-pay { color:var(--gold); font-family:'Orbitron',sans-serif; font-weight:700; }

/* ===== WHEEL ===== */
.wheel-area { max-width:360px; margin:0 auto; text-align:center; }
.wheel-container { position:relative; width:280px; height:280px; margin:20px auto; }
#wheelCanvas { width:280px; height:280px; filter:drop-shadow(0 0 20px rgba(255,215,0,0.3)); }
.wheel-pointer {
  position:absolute; top:-8px; left:50%; transform:translateX(-50%);
  width:0; height:0;
  border-left:12px solid transparent; border-right:12px solid transparent;
  border-top:20px solid var(--gold);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,0.5));
  z-index:2;
}
.wheel-info { margin:12px 0; color:var(--text-dim); font-size:13px; }

/* ===== HI-LO ===== */
.hilo-area { max-width:360px; margin:0 auto; text-align:center; }
.hilo-card-display {
  width:120px; height:170px; margin:20px auto;
  border-radius:12px;
  background:linear-gradient(135deg,#fff,#f0f0f0);
  display:flex; align-items:center; justify-content:center;
  flex-direction:column;
  box-shadow:0 8px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.8);
  border:3px solid rgba(255,215,0,0.3);
  font-size:36px; font-weight:900;
  color:#1e293b;
  animation:cardFlip 0.5s ease;
}
.hilo-card-display.red-card { color:#dc2626; }
@keyframes cardFlip { 0%{transform:rotateY(90deg)} 100%{transform:rotateY(0)} }
.hilo-buttons { display:flex; gap:10px; justify-content:center; margin-top:16px; }
.hilo-btn {
  flex:1; max-width:120px; padding:14px;
  border-radius:var(--radius-sm); border:none;
  font-family:'Prompt',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; transition:all 0.2s;
  display:flex; flex-direction:column; align-items:center; gap:4px;
  box-shadow: 0 4px 0 rgba(0,0,0,0.3);
}
.hilo-btn:hover { transform:translateY(-2px); }
.hilo-btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,0.3); }
.btn-hi { background:linear-gradient(135deg,#FF4444,#CC0000); color:#fff; }
.btn-lo { background:linear-gradient(135deg,#3b82f6,#1d4ed8); color:#fff; }
.btn-equal { background:linear-gradient(135deg,#10b981,#059669); color:#fff; }
.hilo-streak { margin-top:16px; font-family:'Orbitron',sans-serif; color:var(--gold); font-size:13px; }

/* ===== BLACKJACK ===== */
.bj-area { max-width:400px; margin:0 auto; text-align:center; }
.bj-hand {
  display:flex; gap:8px; justify-content:center; margin:8px 0; min-height:80px;
  flex-wrap:wrap;
}
.bj-card {
  width:52px; height:76px; border-radius:8px;
  background:linear-gradient(135deg,#fff,#f0f0f0);
  color:#1e293b; display:flex; align-items:center; justify-content:center;
  flex-direction:column; font-size:16px; font-weight:700;
  box-shadow:0 4px 12px rgba(0,0,0,0.4);
  animation:dealCard 0.3s ease;
  border:1px solid #ddd;
}
.bj-card.red { color:#dc2626; }
@keyframes dealCard { 0%{transform:translateY(-30px) scale(0.8);opacity:0} 100%{transform:translateY(0) scale(1);opacity:1} }
.bj-card.facedown {
  background:linear-gradient(135deg,#2d0a4e,#1a0533);
  border:2px solid var(--gold-dark); color:transparent;
}
.bj-card.facedown::before {
  content:''; width:65%; height:65%;
  background:repeating-linear-gradient(45deg,var(--gold-dark),var(--gold-dark) 2px,transparent 2px,transparent 8px);
  border-radius:4px; opacity:0.3;
}
.bj-label { font-size:11px; color:var(--text-dim); font-family:'Orbitron',sans-serif; margin-top:4px; }
.bj-score { font-family:'Orbitron',sans-serif; font-size:16px; color:var(--gold); margin:4px 0; }
.bj-actions { display:flex; gap:8px; justify-content:center; margin-top:12px; }
.bj-btn {
  padding:10px 22px; border-radius:20px; border:none;
  font-family:'Prompt',sans-serif; font-size:13px; font-weight:700;
  cursor:pointer; transition:all 0.2s;
  box-shadow: 0 3px 0 rgba(0,0,0,0.3);
}
.bj-btn:hover { transform:translateY(-2px); }
.bj-btn:active { transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,0.3); }
.bj-hit { background:linear-gradient(135deg,var(--green),#059669); color:#fff; }
.bj-stand { background:linear-gradient(135deg,var(--red),#CC0000); color:#fff; }
.bj-double { background:linear-gradient(135deg,var(--gold),var(--gold-dark)); color:#000; }

/* ===== BONUS ===== */
.bonus-section {
  margin-bottom:16px; padding:16px;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius);
}
.bonus-section h3 { font-size:15px; margin-bottom:12px; }
.daily-calendar { display:flex; gap:6px; overflow-x:auto; padding:4px; }
.day-box {
  min-width:55px; padding:10px 6px; border-radius:var(--radius-sm);
  text-align:center; font-size:10px;
  background:var(--glass); border:1px solid var(--glass-border); flex-shrink:0;
}
.day-box.claimed { background:linear-gradient(135deg,var(--green),#059669); border-color:var(--green); }
.day-box.today {
  border-color:var(--gold);
  box-shadow:0 0 15px rgba(255,215,0,0.3);
  animation:glow 2s ease-in-out infinite;
}
.day-box .day-num { font-weight:700; font-size:13px; display:block; margin-bottom:2px; }
.day-box .day-coins { color:var(--gold); font-family:'Orbitron',sans-serif; font-weight:700; font-size:11px; }

.achievement-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.ach-badge {
  padding:10px 6px; text-align:center; border-radius:var(--radius-sm);
  background:var(--glass); border:1px solid var(--glass-border); font-size:10px;
}
.ach-badge.unlocked {
  background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,215,0,0.05));
  border-color:rgba(255,215,0,0.3);
}
.ach-badge .ach-icon { font-size:26px; display:block; margin-bottom:4px; }
.ach-badge.locked { opacity:0.35; filter:grayscale(1); }

/* ===== LEADERBOARD ===== */
.lb-list { margin-top:8px; }
.lb-row {
  display:flex; align-items:center; gap:10px;
  padding:10px 14px; border-radius:var(--radius-sm);
  margin-bottom:6px;
  background:var(--glass); border:1px solid var(--glass-border);
}
.lb-row:nth-child(1) {
  background:linear-gradient(135deg,rgba(255,215,0,0.15),rgba(255,215,0,0.03));
  border-color:rgba(255,215,0,0.3);
}
.lb-row:nth-child(2) { background:linear-gradient(135deg,rgba(192,192,192,0.15),rgba(192,192,192,0.03)); }
.lb-row:nth-child(3) { background:linear-gradient(135deg,rgba(205,127,50,0.15),rgba(205,127,50,0.03)); }
.lb-rank { font-family:'Orbitron',sans-serif; font-weight:700; font-size:13px; width:28px; text-align:center; }
.lb-avatar { font-size:22px; }
.lb-info { flex:1; }
.lb-name { font-weight:600; font-size:13px; }
.lb-level { font-size:10px; color:var(--text-dim); }
.lb-coins { font-family:'Orbitron',sans-serif; font-weight:700; color:var(--gold); font-size:12px; }

/* ===== PROFILE ===== */
.profile-card {
  text-align:center; padding:20px;
  background:var(--glass); border:1px solid var(--glass-border);
  border-radius:var(--radius); margin-bottom:16px;
}
.profile-avatar {
  font-size:56px; margin:8px 0; cursor:pointer; transition:transform 0.3s;
  filter:drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}
.profile-avatar:hover { transform:scale(1.1) rotate(5deg); }
.avatar-selector { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:8px 0; }
.avatar-option {
  font-size:28px; cursor:pointer; padding:4px;
  border-radius:50%; border:2px solid transparent; transition:all 0.2s;
}
.avatar-option:hover,.avatar-option.selected { border-color:var(--gold); background:rgba(255,215,0,0.1); }
.profile-name { font-size:18px; font-weight:700; margin:4px 0; }
.profile-level {
  font-family:'Orbitron',sans-serif; font-size:11px;
  background:linear-gradient(135deg,var(--purple),var(--blue));
  display:inline-block; padding:3px 12px; border-radius:12px;
}
.xp-bar {
  width:80%; max-width:200px; height:6px; background:rgba(255,255,255,0.1);
  border-radius:3px; margin:8px auto; overflow:hidden;
}
.xp-fill { height:100%; border-radius:3px; background:linear-gradient(90deg,var(--purple),var(--blue)); transition:width 0.5s; }
.profile-stats { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:16px; }
.stat-box {
  padding:10px; text-align:center; border-radius:var(--radius-sm);
  background:var(--glass); border:1px solid var(--glass-border);
}
.stat-val { font-family:'Orbitron',sans-serif; font-size:16px; font-weight:700; color:var(--gold); }
.stat-label { font-size:10px; color:var(--text-dim); margin-top:2px; }
.profile-actions { display:flex; flex-direction:column; gap:8px; }
.btn-profile-action {
  padding:12px; border-radius:var(--radius-sm); border:none;
  font-family:'Prompt',sans-serif; font-size:13px; font-weight:600;
  cursor:pointer; transition:all 0.2s; text-align:left;
  display:flex; align-items:center; gap:10px;
  background:var(--glass); border:1px solid var(--glass-border); color:var(--text);
}
.btn-profile-action:hover { background:rgba(255,255,255,0.1); }

/* ===== MODAL ===== */
.modal-overlay {
  position:fixed; inset:0; background:rgba(0,0,0,0.8); z-index:200;
  backdrop-filter:blur(8px);
}
.modal {
  position:fixed; bottom:0; left:0; right:0; z-index:201;
  max-height:90vh; overflow-y:auto;
  animation:slideUp 0.3s ease;
}
@keyframes slideUp { 0%{transform:translateY(100%)} 100%{transform:translateY(0)} }
.modal-body {
  margin:0 auto; max-width:420px;
  border-radius:var(--radius) var(--radius) 0 0;
  padding:24px 20px 32px;
  background:linear-gradient(180deg,rgba(26,5,51,0.98),rgba(10,0,21,0.99));
  border:1px solid rgba(255,215,0,0.15);
  position:relative;
}
.modal-close {
  position:absolute; top:12px; right:16px;
  background:none; border:none; color:var(--text-dim);
  font-size:20px; cursor:pointer;
}
.modal-logo {
  width:60px; height:60px; margin:0 auto 12px;
  display:flex; align-items:center; justify-content:center;
}
.modal-diamond {
  width:30px; height:30px;
  background:linear-gradient(135deg,#00d4ff,#0099ff,#00d4ff);
  transform:rotate(45deg); border-radius:4px;
  box-shadow:0 0 20px rgba(0,212,255,0.6);
}
.modal-title {
  text-align:center; font-family:'Orbitron',sans-serif; font-size:18px; font-weight:700;
  background:linear-gradient(135deg,var(--gold),var(--gold-light));
  -webkit-background-clip:text; -webkit-text-fill-color:transparent;
}
.modal-subtitle { text-align:center; color:var(--text-dim); font-size:12px; margin:4px 0 16px; }
.auth-tabs { display:flex; gap:4px; margin-bottom:16px; }
.auth-tab {
  flex:1; padding:10px; border-radius:8px;
  background:var(--glass); border:1px solid transparent;
  color:var(--text-dim); font-family:'Prompt',sans-serif;
  font-size:13px; font-weight:600; cursor:pointer; transition:all 0.2s;
}
.auth-tab.active { background:rgba(255,215,0,0.1); border-color:rgba(255,215,0,0.3); color:var(--gold); }
.input-group { margin-bottom:10px; }
.input-group input, .input-group select {
  width:100%; padding:12px 14px; border-radius:10px;
  background:rgba(255,255,255,0.06); border:1px solid var(--glass-border);
  color:#fff; font-family:'Prompt',sans-serif; font-size:14px;
}
.input-group input::placeholder { color:var(--text-dim); }
.input-group input:focus,.input-group select:focus { outline:none; border-color:var(--gold-dark); }
.input-group select { appearance:none; }
.input-group select option { background:#1a0030; color:#fff; }
.btn-gold {
  width:100%; padding:14px; border-radius:12px; border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#000; font-family:'Prompt',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; transition:all 0.2s;
  box-shadow:0 4px 15px rgba(255,215,0,0.3);
}
.btn-gold:hover { box-shadow:0 6px 20px rgba(255,215,0,0.4); }
.btn-gold:active { transform:scale(0.98); }
.btn-primary { /* alias */
  width:100%; padding:14px; border-radius:12px; border:none;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  color:#000; font-family:'Prompt',sans-serif; font-size:14px; font-weight:700;
  cursor:pointer; box-shadow:0 4px 15px rgba(255,215,0,0.3);
}
.btn-secondary {
  width:100%; padding:14px; border-radius:12px;
  background:var(--glass); border:1px solid var(--glass-border);
  color:var(--text); font-family:'Prompt',sans-serif; font-size:14px; font-weight:600;
  cursor:pointer;
}
.error-msg { color:var(--red); font-size:12px; text-align:center; margin-top:8px; }
.auth-skip { text-align:center; color:var(--text-dim); font-size:12px; margin-top:14px; cursor:pointer; }
.auth-skip:hover { color:var(--gold); }

/* ===== TOAST ===== */
.toast {
  position:fixed; top:60px; left:50%; transform:translateX(-50%);
  padding:10px 20px; border-radius:12px;
  background:rgba(16,185,129,0.95); backdrop-filter:blur(8px);
  color:#fff; font-weight:600; font-size:13px;
  z-index:300; animation:toastIn 0.3s ease;
  box-shadow:0 8px 24px rgba(0,0,0,0.3);
  max-width:90vw; text-align:center;
}
@keyframes toastIn { 0%{transform:translateX(-50%) translateY(-20px);opacity:0} 100%{transform:translateX(-50%) translateY(0);opacity:1} }

/* ===== WIN OVERLAY ===== */
.win-overlay {
  position:fixed; inset:0; z-index:250; pointer-events:none;
  display:flex; align-items:center; justify-content:center;
}
.win-overlay canvas { position:absolute; inset:0; }

/* ===== GAME RESULT ===== */
.game-result {
  text-align:center; padding:16px;
  background:linear-gradient(135deg,rgba(255,215,0,0.12),rgba(255,215,0,0.03));
  border:1px solid rgba(255,215,0,0.3);
  border-radius:var(--radius); margin-top:12px;
  animation:winBounce 0.5s ease;
}
.game-result.loss {
  background:linear-gradient(135deg,rgba(239,68,68,0.12),rgba(239,68,68,0.03));
  border-color:rgba(239,68,68,0.3);
}
.game-result h3 { font-size:18px; margin-bottom:4px; }
.game-result p { color:var(--text-dim); font-size:12px; }
.btn-play-again {
  margin-top:10px; padding:8px 24px; border-radius:20px;
  background:linear-gradient(135deg,var(--gold),var(--gold-dark));
  border:none; color:#000; font-family:'Prompt',sans-serif;
  font-weight:700; font-size:13px; cursor:pointer;
}

/* ===== FOOTER ===== */
#mainFooter {
  text-align:center; padding:12px; font-size:10px; color:var(--text-dim);
  background:rgba(10,0,30,0.5);
}
#mainFooter a { color:var(--purple); text-decoration:none; }
#mainFooter p { margin:3px 0; }

/* ===== UTILITIES ===== */
.hidden { display:none !important; }
@keyframes fadeInUp { 0%{transform:translateY(20px);opacity:0} 100%{transform:translateY(0);opacity:1} }
@keyframes fadeIn { 0%{opacity:0} 100%{opacity:1} }

/* ===== COIN EXPLOSION ===== */
.flying-coin {
  position:fixed; pointer-events:none; z-index:260;
  width:20px; height:20px; border-radius:50%;
  background:linear-gradient(145deg,#FFE55C,#FFD700,#B8860B);
  border:1px solid #DAA520;
  box-shadow: inset 0 1px 2px rgba(255,255,255,0.5), 0 2px 4px rgba(0,0,0,0.3);
  font-size:8px; display:flex; align-items:center; justify-content:center;
  font-weight:900; color:#8B6914;
}

/* ===== RESPONSIVE ===== */
@media (min-width:480px) {
  main { max-width:480px; margin:0 auto; }
}
@media (min-width:768px) {
  main { max-width:560px; }
}