/* ── JetClicker · Phase 3 CSS ─────────────────────────────── */
/* Luxury Aviation Art Déco — Custom icon badges, prestige, map */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;600;700;900&family=DM+Sans:wght@400;500;600;700&display=swap');

:root {
  --bg: #07070A; --bg2: #0D0D12; --surface: #14141A;
  --card: #1A1A22; --card-hover: #20202A;
  --cream: #E8E0D0; --cream-soft: #B8B2A6; --muted: #6B665E; --dim: #3A3835;
  --copper: #C4935A; --copper-light: #D4A96B; --copper-dark: #8A6340;
  --gold: #F4D03F; --gold-glow: rgba(244,208,63,0.2);
  --copper-glow: rgba(196,147,90,0.25);
  --green: #5ACA7A; --red: #E05555; --blue: #4A8FD4; --purple: #8A5AD4;
  --serif: 'Playfair Display','Bodoni Moda',serif;
  --sans: 'DM Sans','Outfit',sans-serif;
  --r: 8px; --r-lg: 14px;
  --ease: cubic-bezier(.22,1,.36,1);
}

*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%;background:var(--bg);color:var(--cream);font-family:var(--sans);overflow:hidden;-webkit-tap-highlight-color:transparent;user-select:none}

/* ═══ SVG ICON SYSTEM ══════════════════════════════════════ */
.jc-icon{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:7px;flex-shrink:0;border:1px solid rgba(196,147,90,0.2);background:linear-gradient(135deg,rgba(196,147,90,0.12),rgba(196,147,90,0.04));color:var(--copper-light);position:relative;overflow:hidden}
.jc-icon::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.06),transparent);pointer-events:none}
.jc-icon svg{width:20px;height:20px}
.jc-icon--b{border-radius:6px;width:36px;height:36px}
.jc-icon--b svg{width:22px;height:22px}
.jc-icon--u{background:linear-gradient(135deg,rgba(196,147,90,0.18),rgba(196,147,90,0.06));border-color:rgba(196,147,90,0.3)}
.jc-icon--r{width:30px;height:30px;border-radius:50%;border-color:var(--rc,var(--copper));color:var(--rc,var(--copper-light))}
.jc-icon--r svg{width:16px;height:16px}
.jc-icon--ach{width:28px;height:28px;border-radius:50%;background:linear-gradient(135deg,rgba(90,202,122,0.12),rgba(90,202,122,0.04));border-color:rgba(90,202,122,0.25);color:var(--green)}
.jc-icon--ach svg{width:16px;height:16px}
.jc-icon--locked{width:28px;height:28px;border-radius:50%;background:var(--surface);border-color:rgba(255,255,255,0.04);color:var(--dim)}
.jc-icon--locked svg{width:14px;height:14px}

/* ═══ TOPBAR ═══════════════════════════════════════════════ */
.jc-topbar{display:flex;align-items:center;justify-content:space-between;padding:12px 24px;background:var(--bg2);border-bottom:1px solid rgba(196,147,90,0.12);position:relative;z-index:10;gap:16px}
.jc-topbar::after{content:'';position:absolute;bottom:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--copper),transparent);opacity:.3}
.jc-logo{font-family:var(--serif);font-weight:700;font-size:1.15rem;letter-spacing:.15em;text-transform:uppercase;white-space:nowrap}
.jc-logo span{color:var(--copper)}
.jc-stats{display:flex;gap:20px;align-items:baseline;flex:1;justify-content:center}
.jc-coins{font-family:var(--serif);font-size:1.4rem;font-weight:700;color:var(--copper-light);text-shadow:0 0 20px rgba(196,147,90,0.3)}
.jc-cps{font-size:.8rem;color:var(--cream-soft);font-weight:500}
.jc-topbar-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Topbar icon buttons (prestige, leaderboard, settings) */
.jc-prestige-btn,.jc-lb-btn,.jc-settings-btn{
  width:36px;height:36px;border-radius:50%;border:1px solid var(--dim);
  background:var(--surface);color:var(--cream-soft);cursor:pointer;
  transition:all .3s var(--ease);flex-shrink:0;
  display:flex;align-items:center;justify-content:center;padding:0;
}
.jc-prestige-btn svg,.jc-lb-btn svg,.jc-settings-btn svg{width:18px;height:18px}
.jc-prestige-btn:hover,.jc-lb-btn:hover,.jc-settings-btn:hover{
  border-color:rgba(196,147,90,0.45);color:var(--copper-light);
  background:rgba(196,147,90,0.08);transform:translateY(-1px);
}
.jc-prestige-btn--ready{
  border-color:var(--gold);color:var(--gold);
  background:rgba(244,208,63,0.08);box-shadow:0 0 15px var(--gold-glow);
  animation:jc-pulse 2s ease infinite
}
@keyframes jc-pulse{0%,100%{box-shadow:0 0 15px var(--gold-glow)}50%{box-shadow:0 0 30px rgba(244,208,63,0.35)}}

/* ═══ EFFECTS BAR ══════════════════════════════════════════ */
.jc-effects-bar{display:none;gap:8px;padding:5px 24px;background:rgba(244,208,63,0.04);border-bottom:1px solid rgba(244,208,63,0.08);overflow-x:auto;white-space:nowrap}
.jc-effect{display:inline-flex;gap:6px;align-items:center;padding:3px 10px;border-radius:100px;background:rgba(244,208,63,0.08);border:1px solid rgba(244,208,63,0.15);font-size:.7rem;font-weight:600;color:var(--gold);flex-shrink:0}
.jc-effect b{color:var(--cream);font-weight:700;margin-left:-2px}
.jc-effect span{color:var(--cream-soft);font-weight:400}
.jc-effect--more{background:rgba(255,255,255,0.04);border-color:rgba(255,255,255,0.1);color:var(--cream-soft)}

/* ═══ LAYOUT ═══════════════════════════════════════════════ */
.jc-layout{display:grid;grid-template-columns:1fr 380px;height:calc(100vh - 52px);overflow:hidden}

/* ═══ JET CENTER ═══════════════════════════════════════════ */
.jc-center{display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative;overflow:hidden;background:radial-gradient(ellipse at 50% 40%,rgba(196,147,90,0.05) 0%,transparent 60%),radial-gradient(ellipse at center,var(--bg2) 0%,var(--bg) 80%)}
.jc-center::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(60deg,transparent,transparent 80px,rgba(196,147,90,0.015) 80px,rgba(196,147,90,0.015) 81px),repeating-linear-gradient(-60deg,transparent,transparent 80px,rgba(196,147,90,0.015) 80px,rgba(196,147,90,0.015) 81px)}

.jc-jet-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;cursor:pointer;transition:transform .12s ease;z-index:2}
.jc-jet-wrap:active{transform:scale(.95)}
.jc-jet--clicked .jc-jet-sprite{animation:jc-punch .22s cubic-bezier(.34,1.56,.64,1)}
@keyframes jc-punch{
  0%{transform:rotate(0) scale(1)}
  35%{transform:rotate(-5deg) scale(1.12)}
  65%{transform:rotate(3deg) scale(1.06)}
  100%{transform:rotate(0) scale(1)}
}
.jc-jet-sprite{width:clamp(180px,30vw,280px);filter:drop-shadow(0 0 50px var(--copper-glow)) drop-shadow(0 0 100px rgba(196,147,90,0.15));transition:filter .4s ease}

/* ═══ JET SKINS — applied via class on #jc-jet ══════════════ */
/* Each skin tweaks the SVG fill via CSS filters — works on the inline jet sprite. */
.jc-jet--skin-gold .jc-jet-sprite{
  filter:
    hue-rotate(12deg) saturate(1.5) brightness(1.25)
    drop-shadow(0 0 50px rgba(244,208,63,0.55))
    drop-shadow(0 0 100px rgba(244,208,63,0.3));
}
.jc-jet--skin-diamond .jc-jet-sprite{
  filter:
    hue-rotate(165deg) saturate(1.1) brightness(1.35)
    drop-shadow(0 0 50px rgba(137,212,232,0.5))
    drop-shadow(0 0 100px rgba(137,212,232,0.25));
}
.jc-jet--skin-holo .jc-jet-sprite{
  animation:jc-skin-holo 3.5s linear infinite;
  filter:
    saturate(1.8) brightness(1.15)
    drop-shadow(0 0 50px rgba(255,110,200,0.45))
    drop-shadow(0 0 100px rgba(110,220,220,0.3));
}
@keyframes jc-skin-holo{
  0%  {filter:hue-rotate(0deg)   saturate(1.8) brightness(1.15) drop-shadow(0 0 50px rgba(255,110,200,0.45)) drop-shadow(0 0 100px rgba(110,220,220,0.3))}
  33% {filter:hue-rotate(120deg) saturate(1.8) brightness(1.15) drop-shadow(0 0 50px rgba(110,220,220,0.45)) drop-shadow(0 0 100px rgba(255,220,110,0.3))}
  66% {filter:hue-rotate(240deg) saturate(1.8) brightness(1.15) drop-shadow(0 0 50px rgba(155,125,255,0.45)) drop-shadow(0 0 100px rgba(255,110,200,0.3))}
  100%{filter:hue-rotate(360deg) saturate(1.8) brightness(1.15) drop-shadow(0 0 50px rgba(255,110,200,0.45)) drop-shadow(0 0 100px rgba(110,220,220,0.3))}
}
.jc-jet--skin-stealth .jc-jet-sprite{
  filter:
    grayscale(1) brightness(0.35) contrast(1.2)
    drop-shadow(0 0 30px rgba(255,255,255,0.08))
    drop-shadow(0 0 80px rgba(0,0,0,0.6));
}
.jc-jet--skin-royal .jc-jet-sprite{
  filter:
    hue-rotate(-70deg) saturate(1.6) brightness(1.1)
    drop-shadow(0 0 50px rgba(155,125,255,0.55))
    drop-shadow(0 0 100px rgba(155,125,255,0.25));
}
.jc-jet--skin-neon .jc-jet-sprite{
  filter:
    hue-rotate(95deg) saturate(2.8) brightness(1.3) contrast(1.1)
    drop-shadow(0 0 50px rgba(0,229,255,0.55))
    drop-shadow(0 0 100px rgba(192,38,255,0.45));
}

/* Active skin card indicator */
.jc-df-card--active{border-color:rgba(90,202,122,0.55)!important;box-shadow:0 0 0 1px rgba(90,202,122,0.25) inset,0 10px 28px rgba(0,0,0,0.45)!important}
.jc-df-card--active .jc-df-price{color:var(--green)!important}
.jc-df-preview--default{background:linear-gradient(135deg,#D4A96B 0%,#C4935A 45%,#8A6340 100%)}
.jc-jet-svg{width:100%;height:auto}
.jc-jet-wrap:hover .jc-jet-sprite{filter:drop-shadow(0 0 80px rgba(196,147,90,0.5)) drop-shadow(0 0 120px rgba(196,147,90,0.2))}
.jc-jet-label{font-size:.72rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}

/* Synergies strip */
.jc-synergies{position:absolute;bottom:12px;display:flex;gap:6px;flex-wrap:wrap;justify-content:center;padding:0 20px;z-index:2}
.jc-synergy{padding:3px 10px;border-radius:100px;background:rgba(196,147,90,0.06);border:1px solid rgba(196,147,90,0.12);font-size:.65rem;color:var(--copper-light);font-weight:500}

/* ═══ GOLDEN TICKET ════════════════════════════════════════ */
.jc-golden-ticket{position:absolute;z-index:20;cursor:pointer;animation:jc-ticket-float 15s linear forwards}
.jc-golden-ticket:hover{transform:scale(1.3)}
.jc-gt-icon{display:flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,rgba(244,208,63,0.2),rgba(244,208,63,0.05));border:2px solid rgba(244,208,63,0.4);color:var(--gold);animation:jc-ticket-shimmer 1.2s ease infinite;box-shadow:0 0 30px var(--gold-glow)}
.jc-gt-icon svg{width:28px;height:28px}
@keyframes jc-ticket-float{0%{left:-70px;opacity:0}5%{opacity:1}90%{opacity:1}100%{left:calc(100% + 70px);opacity:0}}
@keyframes jc-ticket-shimmer{0%,100%{box-shadow:0 0 20px var(--gold-glow)}50%{box-shadow:0 0 40px rgba(244,208,63,0.45)}}

/* ═══ PANEL ════════════════════════════════════════════════ */
.jc-panel{background:var(--bg2);border-left:1px solid rgba(196,147,90,0.08);display:flex;flex-direction:column;overflow:hidden}

/* ═══ TABS ═════════════════════════════════════════════════ */
.jc-tabs{display:flex;border-bottom:1px solid rgba(196,147,90,0.1);background:var(--surface)}
.jc-tab{flex:1;padding:10px 0;background:none;border:none;color:var(--muted);font-family:var(--sans);font-size:.68rem;font-weight:600;letter-spacing:.03em;cursor:pointer;transition:color .25s ease,border-color .25s ease;border-bottom:2px solid transparent;text-transform:uppercase}
.jc-tab:hover{color:var(--cream-soft)}
.jc-tab--active{color:var(--copper-light);border-bottom-color:var(--copper)}

.jc-tab-content{flex:1;overflow-y:auto}
.jc-tab-content::-webkit-scrollbar{width:3px}
.jc-tab-content::-webkit-scrollbar-track{background:transparent}
.jc-tab-content::-webkit-scrollbar-thumb{background:var(--dim);border-radius:2px}

/* ═══ BUILDINGS ════════════════════════════════════════════ */
.jc-building{display:flex;align-items:center;gap:10px;width:100%;padding:11px 16px;background:transparent;border:none;color:var(--cream);font-family:var(--sans);cursor:pointer;transition:background .2s ease;border-bottom:1px solid rgba(255,255,255,0.02);text-align:left}
.jc-building:hover{background:var(--card)}
.jc-building:active{background:var(--card-hover)}
.jc-building--locked{opacity:.62;cursor:not-allowed}
.jc-building--locked .jc-building-cost{color:var(--red)}
.jc-building--locked:hover{background:transparent}
.jc-building-info{display:flex;flex-direction:column;gap:1px;flex:1;min-width:0}
.jc-building-name{font-weight:600;font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.jc-building-desc{font-size:.66rem;color:var(--muted)}
.jc-building-right{display:flex;flex-direction:column;align-items:flex-end;gap:2px;flex-shrink:0}
.jc-building-owned{font-family:var(--serif);font-size:1.3rem;font-weight:700;color:var(--copper-light);min-width:24px;text-align:right}
.jc-building-cost{font-size:.68rem;color:var(--cream-soft);white-space:nowrap}

/* ═══ UPGRADES — Category sub-tabs + card grid ═══════════ */
.jc-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;height:200px;color:var(--muted);font-size:.82rem;text-align:center;line-height:1.6}
.jc-empty-hint{font-size:.7rem;color:var(--dim)}

/* Sub-tab bar */
.jcu-tabs{display:flex;gap:3px;padding:6px 8px;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;border-bottom:1px solid rgba(255,255,255,0.04);background:var(--surface);flex-shrink:0}
.jcu-tabs::-webkit-scrollbar{display:none}
.jcu-tab{display:flex;align-items:center;gap:4px;padding:6px 10px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--muted);font-family:var(--sans);font-size:.62rem;font-weight:600;cursor:pointer;transition:all .25s var(--ease);white-space:nowrap;text-transform:uppercase;letter-spacing:.03em;position:relative;flex-shrink:0}
.jcu-tab:hover{color:var(--cream-soft);background:rgba(255,255,255,0.03)}
.jcu-tab--active{color:var(--cream);background:rgba(255,255,255,0.05);border-color:var(--cat-c);box-shadow:0 0 12px color-mix(in srgb,var(--cat-c) 20%,transparent)}
.jcu-tab--active .jcu-tab-icon{color:var(--cat-c)}
.jcu-tab-icon{width:14px;height:14px;display:flex;align-items:center;transition:color .25s ease}
.jcu-tab-icon svg{width:14px;height:14px}
.jcu-tab-label{line-height:1}
.jcu-tab-badge{min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--cat-c);color:var(--bg);font-size:.55rem;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}

/* Building sub-filter */
.jcu-bfilter{display:flex;gap:3px;padding:5px 8px;overflow-x:auto;scrollbar-width:none;border-bottom:1px solid rgba(255,255,255,0.03);background:rgba(255,255,255,0.01)}
.jcu-bfilter::-webkit-scrollbar{display:none}
.jcu-bf{width:30px;height:30px;border-radius:6px;border:1px solid transparent;background:transparent;color:var(--muted);cursor:pointer;transition:all .2s ease;display:flex;align-items:center;justify-content:center;padding:4px;flex-shrink:0;font-family:var(--sans);font-size:.58rem;font-weight:600}
.jcu-bf:hover{color:var(--cream-soft);background:rgba(196,147,90,0.06)}
.jcu-bf--active{border-color:var(--copper);color:var(--copper-light);background:rgba(196,147,90,0.1)}
.jcu-bf svg{width:18px;height:18px}

/* Content area */
.jcu-content{padding:8px;overflow-y:auto;flex:1}

/* Card grid */
.jcu-grid{display:grid;grid-template-columns:1fr;gap:6px}
.jcu-grid--purchased{opacity:.6}

/* Upgrade card */
.jcu-card{position:relative;border-radius:var(--r);border:1px solid rgba(255,255,255,0.06);background:var(--surface);padding:10px 12px;cursor:pointer;transition:all .25s var(--ease);font-family:var(--sans);overflow:hidden;border-left:3px solid var(--card-accent,var(--copper))}
.jcu-card::before{content:'';position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(135deg,color-mix(in srgb,var(--card-accent) 4%,transparent),transparent 60%);pointer-events:none;transition:opacity .25s ease}
.jcu-card:hover{background:var(--card-hover);border-color:rgba(255,255,255,0.1);transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,0.3)}
.jcu-card--available{border-left-width:3px}
.jcu-card--available::after{content:'';position:absolute;top:0;left:0;width:3px;height:100%;background:var(--card-accent);box-shadow:0 0 8px var(--card-accent);animation:jcu-glow 2s ease-in-out infinite alternate}
@keyframes jcu-glow{from{box-shadow:0 0 4px var(--card-accent)}to{box-shadow:0 0 12px var(--card-accent)}}
.jcu-card--locked{opacity:.68;cursor:not-allowed}
.jcu-card--locked:hover{transform:none;box-shadow:none}
.jcu-card--locked .jcu-cost{color:var(--red)}
.jcu-card--bought{cursor:default;border-left-color:var(--green);opacity:.5}
.jcu-card--bought::before{background:linear-gradient(135deg,rgba(90,202,122,0.05),transparent 60%)}
.jcu-card--bought:hover{transform:none;box-shadow:none}

/* Card layout */
.jcu-card-top{display:flex;gap:10px;align-items:flex-start}
.jcu-card-icon{width:32px;height:32px;flex-shrink:0;display:flex;align-items:center;justify-content:center;border-radius:6px;background:rgba(255,255,255,0.04);color:var(--card-accent,var(--copper-light));padding:5px}
.jcu-card-icon svg{width:100%;height:100%}
.jcu-card-icon--b{background:color-mix(in srgb,var(--card-accent) 8%,transparent)}
.jcu-card-icon--syn{position:relative;overflow:hidden}
.jcu-syn-a,.jcu-syn-b{position:absolute;width:20px;height:20px}
.jcu-syn-a svg,.jcu-syn-b svg{width:100%;height:100%}
.jcu-syn-a{top:1px;left:1px;opacity:.8}
.jcu-syn-b{bottom:1px;right:1px;opacity:.8}
.jcu-card-info{flex:1;min-width:0}
.jcu-card-name{display:block;font-weight:600;font-size:.78rem;color:var(--cream);line-height:1.3}
.jcu-card-desc{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;font-size:.64rem;color:var(--cream-soft);font-style:italic;line-height:1.35;margin-top:3px;overflow:hidden;transition:-webkit-line-clamp .2s ease}
.jcu-card:hover .jcu-card-desc{-webkit-line-clamp:10;color:var(--cream)}
.jcu-card-bottom{display:flex;justify-content:space-between;align-items:center;margin-top:6px;padding-top:6px;border-top:1px solid rgba(255,255,255,0.03)}
.jcu-card-effect{font-size:.65rem;color:var(--card-accent,var(--copper-light));font-weight:600}
.jcu-card-cost{font-size:.68rem;color:var(--cream-soft);font-weight:600;white-space:nowrap}

/* NEW badge */
.jcu-badge-new{position:absolute;top:6px;right:8px;font-size:.5rem;font-weight:800;color:var(--bg);background:var(--gold);padding:1px 5px;border-radius:3px;text-transform:uppercase;letter-spacing:.06em;animation:jcu-pulse 1.5s ease-in-out infinite;z-index:2}
@keyframes jcu-pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.85;transform:scale(1.05)}}

/* Twitch badge in corner */
.jcu-twitch-badge{position:absolute;bottom:8px;right:8px;width:14px;height:14px;color:#9146FF;opacity:.4}
.jcu-twitch-badge svg{width:100%;height:100%}

/* Tier border classes */
.jcu-card.jc-tier--bronze{border-left-color:#B87333}
.jcu-card.jc-tier--silver{border-left-color:#AAA9AD}
.jcu-card.jc-tier--gold{border-left-color:#F4D03F}
.jcu-card.jc-tier--diamond{border-left-color:#5BC0DE}
.jcu-card.jc-tier--prismatic{border-image:linear-gradient(180deg,#ff6b6b,#ffd93d,#6bff6b,#6bc5ff,#d56bff) 1;animation:jcu-prismatic 3s linear infinite}
@keyframes jcu-prismatic{0%{filter:hue-rotate(0deg)}100%{filter:hue-rotate(360deg)}}

/* Purchased section */
.jcu-purchased{margin-top:8px}
.jcu-purchased-title{font-size:.68rem;font-weight:600;color:var(--muted);cursor:pointer;padding:6px 4px;font-family:var(--sans);list-style:none}
.jcu-purchased-title::marker{content:''}
.jcu-purchased-title::before{content:'▸ ';transition:transform .2s ease}
.jcu-purchased[open] .jcu-purchased-title::before{content:'▾ '}

/* ═══ MAP ══════════════════════════════════════════════════ */
.jc-map{padding:10px}
.jc-region{margin-bottom:8px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.04);overflow:hidden;background:var(--surface)}
.jc-region--unlocked{border-color:color-mix(in srgb,var(--rc) 30%,transparent)}
.jc-region-header{display:flex;align-items:center;gap:10px;padding:12px 14px}
.jc-region-info{flex:1}
.jc-region-name{font-weight:600;font-size:.85rem;display:block}
.jc-region-bonus{font-size:.68rem;color:var(--muted)}
.jc-region-check{color:var(--green);font-weight:700;font-size:.9rem}
.jc-region-unlock{padding:5px 12px;border-radius:100px;border:1px solid var(--copper);background:rgba(196,147,90,0.1);color:var(--copper-light);font-size:.68rem;font-weight:600;cursor:pointer;transition:all .2s ease;font-family:var(--sans)}
.jc-region-unlock:hover{background:rgba(196,147,90,0.2)}
.jc-destinations{padding:4px 14px 12px;display:flex;flex-direction:column;gap:4px}
.jc-dest{display:flex;align-items:center;gap:8px;padding:6px 10px;border-radius:6px;background:rgba(255,255,255,0.02)}
.jc-dest--done{background:rgba(90,202,122,0.04)}
.jc-dest-name{flex:1;font-size:.78rem;font-weight:500}
.jc-dest-bonus{font-size:.68rem;color:var(--green);font-weight:600}
.jc-dest-btn{padding:3px 10px;border-radius:100px;border:1px solid var(--dim);background:transparent;color:var(--cream-soft);font-size:.62rem;cursor:pointer;font-family:var(--sans);transition:all .2s ease}
.jc-dest-btn:hover{border-color:var(--copper);color:var(--copper-light)}

/* ═══ PRESTIGE TAB — Skill Tree ═══════════════════════════ */
.jc-section-title{font-family:var(--serif);font-size:.8rem;padding:10px 14px 6px;color:var(--cream-soft);letter-spacing:.08em;text-transform:uppercase}

.jcp-header{padding:10px 12px;border-bottom:1px solid rgba(244,208,63,0.08)}
.jcp-stats{display:flex;gap:6px;justify-content:center}
.jcp-stat{display:flex;flex-direction:column;align-items:center;padding:8px 12px;border-radius:var(--r);background:var(--surface);border:1px solid rgba(255,255,255,0.04);flex:1}
.jcp-stat--main{border-color:rgba(244,208,63,0.15);background:rgba(244,208,63,0.03)}
.jcp-val{font-family:var(--serif);font-size:1.2rem;font-weight:700;color:var(--gold)}
.jcp-label{font-size:.58rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin-top:1px}
.jcp-gain{text-align:center;padding:6px 10px;font-size:.72rem;color:var(--cream-soft);margin-top:6px}
.jcp-gain b{color:var(--gold)}
.jcp-gain--wait{color:var(--muted);font-style:italic}

/* Skill tree */
.jcp-tree{padding:8px;display:flex;flex-direction:column;gap:8px;overflow-y:auto}

/* Branch = one category */
.jcp-branch{border-radius:var(--r-lg);border:1px solid rgba(255,255,255,0.04);background:var(--surface);overflow:hidden}
.jcp-branch-header{display:flex;align-items:center;gap:8px;padding:8px 12px;background:rgba(255,255,255,0.02);border-bottom:1px solid rgba(255,255,255,0.03)}
.jcp-branch-icon{font-size:.9rem;line-height:1}
.jcp-branch-label{font-weight:700;font-size:.72rem;color:var(--branch-c);text-transform:uppercase;letter-spacing:.06em;flex:1;font-family:var(--sans)}
.jcp-branch-count{font-size:.6rem;color:var(--muted);font-family:var(--sans);font-weight:600}

/* Nodes in a horizontal chain */
.jcp-branch-nodes{display:flex;align-items:center;padding:10px 12px;gap:0;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.jcp-branch-nodes::-webkit-scrollbar{display:none}

/* Connector line between nodes */
.jcp-connector{width:20px;height:2px;background:var(--dim);flex-shrink:0;position:relative}
.jcp-connector--active{background:var(--branch-c);box-shadow:0 0 6px color-mix(in srgb,var(--branch-c) 40%,transparent)}

/* Individual node */
.jcp-node{display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:64px;max-width:80px;padding:8px 6px;border-radius:var(--r);border:1.5px solid rgba(255,255,255,0.06);background:rgba(255,255,255,0.02);cursor:pointer;transition:all .25s var(--ease);font-family:var(--sans);text-align:center;flex-shrink:0;position:relative}
.jcp-node:hover{background:rgba(255,255,255,0.05);border-color:rgba(255,255,255,0.12);transform:translateY(-2px)}
.jcp-node--bought{border-color:var(--branch-c);background:color-mix(in srgb,var(--branch-c) 8%,transparent)}
.jcp-node--bought .jcp-node-cost{color:var(--green)}
.jcp-node--bought .jcp-node-name{color:var(--cream)}
.jcp-node--available{border-color:var(--branch-c);animation:jcp-avail 2s ease-in-out infinite alternate}
@keyframes jcp-avail{from{box-shadow:0 0 4px color-mix(in srgb,var(--branch-c) 20%,transparent)}to{box-shadow:0 0 14px color-mix(in srgb,var(--branch-c) 40%,transparent)}}
.jcp-node--locked{opacity:.55;cursor:not-allowed}
.jcp-node--locked:hover{transform:none;background:rgba(255,255,255,0.02)}
.jcp-node-cost{font-size:.65rem;font-weight:700;color:var(--branch-c);margin-bottom:2px}
.jcp-node-name{font-size:.56rem;font-weight:600;color:var(--cream-soft);line-height:1.2;word-break:break-word}
.jcp-node-desc{font-size:.5rem;color:var(--muted);margin-top:1px;line-height:1.15}

/* ═══ ACHIEVEMENTS ═════════════════════════════════════════ */
.jc-ach-header{display:flex;justify-content:space-between;padding:12px 16px;border-bottom:1px solid rgba(255,255,255,0.04);font-size:.78rem;color:var(--cream-soft)}
.jc-ach-count{font-weight:700;color:var(--copper-light)}
.jc-ach-milk{color:var(--muted)}
.jc-ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:5px;padding:10px}
.jc-ach{display:flex;flex-direction:column;align-items:center;gap:4px;padding:10px 6px;border-radius:var(--r);background:var(--surface);border:1px solid rgba(255,255,255,0.03);opacity:.5;transition:all .25s ease}
.jc-ach--done{opacity:1;background:rgba(196,147,90,0.05);border-color:rgba(196,147,90,0.12)}
.jc-ach-name{font-size:.6rem;color:var(--cream-soft);text-align:center;line-height:1.3}

/* ═══ MODALS ═══════════════════════════════════════════════ */
.jc-modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.75);backdrop-filter:blur(8px);z-index:100;display:flex;align-items:center;justify-content:center}
.jc-modal-box{background:var(--bg2);border:1px solid rgba(196,147,90,0.15);border-radius:var(--r-lg);padding:32px;max-width:380px;width:90%;text-align:center}
.jc-modal-box h2{font-family:var(--serif);font-size:1.3rem;color:var(--copper-light);margin-bottom:12px}
.jc-modal-box p{font-size:.85rem;color:var(--cream-soft);margin-bottom:8px}
.jc-modal-box p b{color:var(--gold)}
.jc-modal-sub{font-size:.72rem!important;color:var(--muted)!important;line-height:1.5}
.jc-modal-bonus{font-size:.78rem!important;color:var(--green)!important;padding:8px 0}
.jc-modal-earned{font-family:var(--serif);font-size:1.6rem!important;color:var(--copper-light)!important;padding:8px 0}
.jc-modal-btns{display:flex;gap:10px;margin-top:16px;justify-content:center}
.jc-modal-cancel{padding:8px 20px;border-radius:100px;border:1px solid var(--dim);background:transparent;color:var(--cream-soft);font-size:.78rem;cursor:pointer;font-family:var(--sans);transition:all .2s ease}
.jc-modal-cancel:hover{border-color:var(--cream-soft)}
.jc-modal-confirm{padding:8px 24px;border-radius:100px;border:none;background:linear-gradient(135deg,var(--copper),var(--copper-dark));color:#fff;font-size:.78rem;font-weight:600;cursor:pointer;font-family:var(--sans);transition:all .2s ease;box-shadow:0 4px 15px rgba(196,147,90,0.25)}
.jc-modal-confirm:hover{filter:brightness(1.15)}
.jc-modal--prestige .jc-modal-box{border-color:rgba(244,208,63,0.2)}

/* ═══ PRE-CRISIS — tints progressifs avant la phase 1 ═════ */
.jc-precrisis-rumors #jc-center::after,
.jc-precrisis-tension #jc-center::after{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:1;
  background:
    radial-gradient(ellipse at 50% 0%,rgba(224,85,85,0.15) 0%,transparent 55%),
    radial-gradient(ellipse at 50% 100%,rgba(224,85,85,0.1) 0%,transparent 55%);
  animation:jc-precrisis-pulse 5s ease-in-out infinite;
  mix-blend-mode:screen;
}
.jc-precrisis-tension #jc-center::after{
  background:
    radial-gradient(ellipse at 50% 0%,rgba(224,85,85,0.28) 0%,transparent 50%),
    radial-gradient(ellipse at 50% 100%,rgba(224,85,85,0.2) 0%,transparent 50%);
  animation-duration:2.5s;
}
@keyframes jc-precrisis-pulse{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* ═══ CRISIS ACTIVATION MODAL ═══════════════════════════════ */
.jc-crisis-modal{max-width:460px;border-color:rgba(224,85,85,0.4)!important;box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 44px rgba(224,85,85,0.2)!important}
.jc-crisis-badge{
  background:linear-gradient(135deg,rgba(224,85,85,0.28),rgba(180,40,40,0.12))!important;
  border-color:rgba(224,85,85,0.55)!important;
  color:#FF8A8A!important;
}
.jc-crisis-modal h2{color:#FF8A8A}
.jc-crisis-modal p{margin-bottom:10px;line-height:1.5}
.jc-crisis-modal p b{color:var(--cream)}

/* ═══ GOLDEN TICKET TUTORIAL (one-shot) ═══════════════════ */
.jc-gt-tuto{max-width:440px;border-color:rgba(244,208,63,0.35)!important;box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 44px rgba(244,208,63,0.18)!important}
.jc-gt-tuto-badge{
  display:inline-block;padding:4px 12px;border-radius:100px;
  background:linear-gradient(135deg,rgba(244,208,63,0.2),rgba(196,147,90,0.1));
  border:1px solid rgba(244,208,63,0.4);
  color:var(--gold);font-size:.64rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;margin-bottom:14px;
}
.jc-gt-tuto h2{font-size:1.35rem;margin-bottom:14px}
.jc-gt-tuto p{margin-bottom:10px;line-height:1.5}

/* ═══ ASCENSION GUIDE (one-shot) ═══════════════════════════ */
.jc-asc-guide{max-width:500px;text-align:left;border-color:rgba(196,147,90,0.35)!important;box-shadow:0 24px 60px rgba(0,0,0,0.7),0 0 44px rgba(196,147,90,0.2)!important}
.jc-asc-guide h2{text-align:center}
.jc-asc-badge{background:linear-gradient(135deg,rgba(196,147,90,0.22),rgba(196,147,90,0.1));border-color:rgba(196,147,90,0.5);color:var(--copper-light);display:block;text-align:center;margin:0 auto 14px}
.jc-asc-gain{text-align:center;font-family:var(--serif);font-size:1.9rem;color:var(--gold);margin:10px 0 14px}
.jc-asc-gain b{color:var(--gold)}
.jc-asc-previews{margin-top:16px;padding:14px 12px;border-radius:var(--r);background:rgba(20,20,26,0.6);border:1px solid rgba(196,147,90,0.12)}
.jc-asc-preview-title{font-family:var(--serif);font-size:.74rem;color:var(--copper-light);letter-spacing:.1em;text-transform:uppercase;margin-bottom:10px;text-align:center}
.jc-asc-previews ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.jc-asc-previews li{padding:8px 10px;border-radius:6px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.04);font-size:.78rem;color:var(--cream)}
.jc-asc-previews li b{color:var(--copper-light);font-weight:600}
.jc-asc-cost{float:right;font-family:var(--serif);color:var(--gold);font-weight:700;font-size:.82rem}
.jc-asc-desc{display:block;color:var(--cream-soft);font-size:.7rem;margin-top:3px;font-style:italic}
.jc-modal--offline h2::before{content:'✈ ';color:var(--copper)}

/* ═══ NOTIFICATIONS ════════════════════════════════════════ */
.jc-notifications{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:7px;z-index:60;pointer-events:none;max-width:320px}
.jc-notif{padding:9px 14px;border-radius:var(--r);font-size:.75rem;line-height:1.4;backdrop-filter:blur(12px);animation:jc-notif-in .35s var(--ease) forwards;border:1px solid rgba(255,255,255,0.06)}
.jc-notif b{font-weight:700}
.jc-n-tag{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;border-radius:4px;font-size:.6rem;margin-right:4px;vertical-align:middle;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1)}
.jc-notif--info{background:rgba(20,20,26,0.9);color:var(--cream)}
.jc-notif--upgrade{background:rgba(196,147,90,0.12);color:var(--copper-light);border-color:rgba(196,147,90,0.2)}
.jc-notif--achievement{background:rgba(90,202,122,0.08);color:var(--green);border-color:rgba(90,202,122,0.15)}
.jc-notif--golden{background:rgba(244,208,63,0.08);color:var(--gold);border-color:rgba(244,208,63,0.15)}
.jc-notif--prestige{background:rgba(244,208,63,0.1);color:var(--gold);border-color:rgba(244,208,63,0.2)}
.jc-notif--map{background:rgba(74,143,212,0.1);color:var(--blue);border-color:rgba(74,143,212,0.2)}
.jc-notif--out{animation:jc-notif-out .3s ease forwards}
@keyframes jc-notif-in{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
@keyframes jc-notif-out{from{opacity:1;transform:translateX(0)}to{opacity:0;transform:translateX(30px)}}

/* ═══ ONBOARDING — 3-step tutorial ═════════════════════════ */
.jc-onboard{position:fixed;inset:0;z-index:300;pointer-events:none;animation:jc-onboard-in .3s ease-out}
.jc-onboard--out{animation:jc-onboard-out .3s ease-in forwards}
@keyframes jc-onboard-in{from{opacity:0}to{opacity:1}}
@keyframes jc-onboard-out{to{opacity:0}}

.jc-onboard-card{
  position:fixed;left:50%;bottom:32px;transform:translateX(-50%);
  max-width:min(92vw,440px);padding:20px 22px;
  border-radius:var(--r-lg);
  background:linear-gradient(180deg,rgba(26,26,34,0.98),rgba(14,14,20,0.98));
  border:1px solid rgba(196,147,90,0.35);
  box-shadow:0 20px 60px rgba(0,0,0,0.7),0 0 40px rgba(196,147,90,0.15);
  color:var(--cream);pointer-events:auto;
  backdrop-filter:blur(12px);
}
.jc-onboard-step{
  display:inline-block;padding:3px 10px;border-radius:100px;
  background:rgba(196,147,90,0.12);border:1px solid rgba(196,147,90,0.3);
  font-size:.62rem;font-weight:700;color:var(--copper-light);letter-spacing:.1em;
  margin-bottom:10px;
}
.jc-onboard-title{font-family:var(--serif);font-size:1.15rem;color:var(--cream);margin-bottom:6px;letter-spacing:.02em}
.jc-onboard-body{font-size:.82rem;color:var(--cream-soft);line-height:1.5;margin-bottom:14px}
.jc-onboard-actions{display:flex;justify-content:space-between;gap:10px}
.jc-onboard-skip{
  background:transparent;border:1px solid rgba(255,255,255,0.1);
  color:var(--cream-soft);padding:8px 14px;border-radius:100px;
  font-family:var(--sans);font-size:.72rem;cursor:pointer;transition:all .2s;
}
.jc-onboard-skip:hover{color:var(--cream);border-color:rgba(255,255,255,0.2)}
.jc-onboard-next{
  background:linear-gradient(135deg,var(--copper),var(--copper-dark));
  color:var(--bg);padding:8px 18px;border-radius:100px;border:none;
  font-family:var(--sans);font-size:.78rem;font-weight:700;cursor:pointer;
  transition:all .2s;box-shadow:0 4px 14px rgba(196,147,90,0.35);
  letter-spacing:.02em;
}
.jc-onboard-next:hover{transform:translateY(-1px);box-shadow:0 6px 18px rgba(196,147,90,0.5)}

/* Pulsing arrow pointing at the target */
.jc-onboard-arrow{
  position:fixed;width:24px;height:24px;
  transform:translate(-50%,-50%);
  border-radius:50%;
  border:2px solid var(--gold);
  box-shadow:0 0 0 0 rgba(244,208,63,0.6);
  animation:jc-onboard-ping 1.6s ease-out infinite;
  pointer-events:none;
  z-index:301;
}
@keyframes jc-onboard-ping{
  0%{box-shadow:0 0 0 0 rgba(244,208,63,0.6);border-color:rgba(244,208,63,1)}
  70%{box-shadow:0 0 0 26px rgba(244,208,63,0);border-color:rgba(244,208,63,.6)}
  100%{box-shadow:0 0 0 0 rgba(244,208,63,0);border-color:rgba(244,208,63,1)}
}

/* Target highlight */
.jc-onboard-highlight{
  position:relative;
  z-index:250!important;
  box-shadow:0 0 0 3px rgba(244,208,63,0.6),0 0 30px rgba(244,208,63,0.4)!important;
  border-radius:8px;
  animation:jc-onboard-breathe 1.8s ease-in-out infinite;
}
@keyframes jc-onboard-breathe{
  0%,100%{box-shadow:0 0 0 3px rgba(244,208,63,0.55),0 0 24px rgba(244,208,63,0.3)}
  50%{box-shadow:0 0 0 3px rgba(244,208,63,0.85),0 0 40px rgba(244,208,63,0.55)}
}

@media(max-width:768px){
  .jc-onboard-card{bottom:16px;padding:16px 18px}
  .jc-onboard-title{font-size:1rem}
  .jc-onboard-body{font-size:.78rem}
}

/* ═══ FLOATER & SPARKS ═════════════════════════════════════ */
.jc-floater{position:fixed;pointer-events:none;font-family:var(--serif);font-size:1.15rem;font-weight:700;color:var(--copper-light);text-shadow:0 0 14px rgba(196,147,90,0.6),0 2px 6px rgba(0,0,0,0.6);z-index:50;animation:jc-float .9s cubic-bezier(.22,1,.36,1) forwards;letter-spacing:.02em}
@keyframes jc-float{
  0%{opacity:0;transform:translateY(0) scale(.85)}
  15%{opacity:1;transform:translateY(-8px) scale(1.08)}
  100%{opacity:0;transform:translateY(-68px) scale(.9)}
}
.jc-spark{position:fixed;pointer-events:none;width:6px;height:6px;border-radius:50%;background:radial-gradient(circle,#FFE8B8 0%,#C4935A 60%,transparent 100%);box-shadow:0 0 8px rgba(244,208,63,0.7);z-index:49;animation:jc-spark-fly .65s cubic-bezier(.16,1,.3,1) forwards;--sx:0px;--sy:0px}
@keyframes jc-spark-fly{
  0%{opacity:1;transform:translate(0,0) scale(1)}
  100%{opacity:0;transform:translate(var(--sx),var(--sy)) scale(.2)}
}
/* Golden-ticket burst: bigger, brighter, longer */
.jc-spark--gt{width:10px;height:10px;background:radial-gradient(circle,#FFF4C8 0%,#F4D03F 50%,#B87333 100%);box-shadow:0 0 16px rgba(244,208,63,0.9);animation-duration:.85s;z-index:220}

/* Full-screen gold flash on golden-ticket collect */
.jc-gt-flash{position:fixed;inset:0;pointer-events:none;z-index:210;background:radial-gradient(ellipse at center,rgba(244,208,63,0.32) 0%,rgba(244,208,63,0.08) 40%,transparent 70%);opacity:0;animation:jc-gt-flash .6s ease-out forwards}
@keyframes jc-gt-flash{
  0%{opacity:0}
  20%{opacity:1}
  100%{opacity:0}
}

/* Screen-shake: small, snappy, 3 bounces */
.jc-shake{animation:jc-shake .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes jc-shake{
  0%,100%{transform:translate(0,0)}
  10%{transform:translate(-6px,2px)}
  20%{transform:translate(5px,-3px)}
  35%{transform:translate(-4px,-2px)}
  50%{transform:translate(3px,3px)}
  65%{transform:translate(-3px,1px)}
  80%{transform:translate(2px,-1px)}
}

/* ═══ RESPONSIVE ═══════════════════════════════════════════ */
@media(max-width:768px){
  .jc-layout{grid-template-columns:1fr;grid-template-rows:40vh 1fr}
  .jc-panel{border-left:none;border-top:1px solid rgba(196,147,90,0.08)}
  .jc-jet-sprite{width:clamp(140px,50vw,200px)}
  /* Two-row topbar on mobile: logo + actions on row 1, stats centered on row 2 */
  .jc-topbar{
    display:grid;
    grid-template-columns:1fr auto;
    grid-template-areas:'logo actions' 'stats stats';
    row-gap:6px;column-gap:10px;
    padding:10px 14px;
  }
  .jc-logo{grid-area:logo;font-size:.95rem;letter-spacing:.12em}
  .jc-topbar-actions{grid-area:actions;gap:8px}
  .jc-stats{grid-area:stats;justify-content:center;gap:14px}
  .jc-coins{font-size:1.25rem;white-space:nowrap}
  .jc-cps{font-size:.78rem}
  .jc-username-tag{font-size:.68rem;max-width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .jc-prestige-btn,.jc-lb-btn,.jc-settings-btn{width:32px;height:32px}
  .jc-prestige-btn svg,.jc-lb-btn svg,.jc-settings-btn svg{width:16px;height:16px}
  .jc-notifications{right:10px;left:10px;max-width:none}
  .jc-ach-grid{grid-template-columns:repeat(auto-fill,minmax(80px,1fr))}
  .jcp-branch-nodes{padding:8px 8px}
  .jcp-node{min-width:56px;max-width:68px;padding:6px 4px}
  .jcu-tab{padding:5px 7px;font-size:.56rem}
  .jcu-tab-icon{width:12px;height:12px}
  .jcu-tab-icon svg{width:12px;height:12px}
}
@media(max-width:400px){
  .jc-building{padding:9px 10px;gap:8px}
  .jc-icon--b{width:28px;height:28px;font-size:.6rem}
  .jc-building-name{font-size:.76rem}
  .jc-building-owned{font-size:1.1rem}
  .jc-tab{font-size:.6rem;padding:8px 0}
  .jcu-tab-label{display:none}
  .jc-username-tag{display:none}
}

/* ═══════════════════════════════════════════════════════════ */
/* ═══ PHASE 4 — LOCATIONS ═══════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════ */

/* ── Location buttons bar ─────────────────────────────────── */
/* ═══ LOCATIONS BAR — compact horizontal pills ══════════════ */
.jc-locations-bar{
  position:absolute;bottom:50px;left:50%;transform:translateX(-50%);
  display:flex;gap:6px;z-index:5;flex-wrap:wrap;justify-content:center;
  padding:0 12px;max-width:calc(100% - 24px);
}
.jc-loc-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 14px;height:30px;line-height:1;
  border-radius:100px;border:1px solid rgba(196,147,90,0.2);
  background:rgba(196,147,90,0.06);color:var(--copper-light);
  font-family:var(--sans);font-size:.7rem;font-weight:600;
  cursor:pointer;transition:all .25s var(--ease);
  letter-spacing:.04em;text-transform:uppercase;
  backdrop-filter:blur(6px);position:relative;white-space:nowrap;
}
.jc-loc-btn:hover{background:rgba(196,147,90,0.15);border-color:rgba(196,147,90,0.35);transform:translateY(-2px)}
.jc-loc-label{line-height:1}

/* Locked state — overrides any per-location color via higher-specificity selector */
.jc-loc-btn.jc-loc-btn--locked,
.jc-locations-bar .jc-loc-btn--locked{
  opacity:.6;cursor:not-allowed;
  background:rgba(255,255,255,0.025);
  border-color:rgba(255,255,255,0.08);
  color:var(--cream-soft);
  box-shadow:none;transform:none;
}
.jc-loc-btn--locked:hover{
  background:rgba(255,255,255,0.045);
  border-color:rgba(255,255,255,0.14);
  transform:none;box-shadow:none;
  color:var(--cream);
}
.jc-loc-lock{
  display:inline-flex;align-items:center;justify-content:center;
  width:10px;height:10px;flex-shrink:0;opacity:.8;
}
.jc-loc-lock svg{
  width:10px !important;height:10px !important;
  display:block;flex-shrink:0;
}
.jc-loc-gate{
  font-size:.56rem;font-weight:500;
  color:var(--muted);letter-spacing:.02em;text-transform:none;
  padding-left:6px;margin-left:2px;
  border-left:1px solid rgba(255,255,255,0.08);
  line-height:1;
}
.jc-loc-btn--nope{animation:jc-loc-nope .45s cubic-bezier(.36,.07,.19,.97) both}
@keyframes jc-loc-nope{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(-4px,0)}
  40%{transform:translate(4px,0)}
  60%{transform:translate(-3px,0)}
  80%{transform:translate(3px,0)}
}
.jc-loc-btn--just-unlocked{
  animation:jc-loc-unlock 1.3s ease-out;
  box-shadow:0 0 0 0 rgba(244,208,63,0.5);
}
@keyframes jc-loc-unlock{
  0%{transform:scale(1);box-shadow:0 0 0 0 rgba(244,208,63,0.7),0 0 24px rgba(244,208,63,0.5)}
  40%{transform:scale(1.12);box-shadow:0 0 0 14px rgba(244,208,63,0),0 0 32px rgba(244,208,63,0.7)}
  100%{transform:scale(1);box-shadow:0 0 0 0 rgba(244,208,63,0),0 0 0 rgba(244,208,63,0)}
}
.jc-loc-btn:hover{background:rgba(196,147,90,0.15);border-color:rgba(196,147,90,0.35);transform:translateY(-2px)}
.jc-loc--casino{border-color:rgba(244,208,63,0.2);color:var(--gold)}
.jc-loc--casino:hover{background:rgba(244,208,63,0.1);border-color:rgba(244,208,63,0.4);box-shadow:0 0 20px rgba(244,208,63,0.15)}
.jc-loc--dutyfree{border-color:rgba(212,169,107,0.2)}
.jc-loc--lounge{border-color:rgba(139,69,69,0.3);color:#D4847A}
.jc-loc--lounge:hover{background:rgba(139,69,69,0.1)}
.jc-loc--trophies{border-color:rgba(90,202,122,0.2);color:var(--green)}

/* ── OVERLAY (shared) ─────────────────────────────────────── */
.jc-overlay{position:fixed;inset:0;z-index:200;overflow-y:auto;transform:translateY(100%);opacity:0;transition:transform .45s var(--ease),opacity .35s ease;pointer-events:none}
.jc-overlay--open{transform:translateY(0);opacity:1;pointer-events:auto}

.jc-ov-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;position:sticky;top:0;z-index:10;backdrop-filter:blur(16px);border-bottom:1px solid rgba(255,255,255,0.05)}
.jc-ov-back{background:none;border:1px solid rgba(255,255,255,0.1);color:var(--cream-soft);padding:6px 14px;border-radius:100px;font-family:var(--sans);font-size:.72rem;cursor:pointer;transition:all .2s ease}
.jc-ov-back:hover{border-color:var(--cream-soft);color:var(--cream)}
.jc-ov-title{font-family:var(--serif);font-size:1.1rem;font-weight:700;letter-spacing:.08em}
.jc-ov-coins{font-family:var(--serif);font-size:.9rem;color:var(--copper-light)}
.jc-ov-subtitle{text-align:center;font-size:.75rem;color:var(--cream-soft);padding:6px 0;opacity:.7}

/* ═══ CASINO VOLANT — Refonte visuelle complète ═══════════ */
.jc-overlay--casino{background:linear-gradient(180deg,#04040A 0%,#08081A 40%,#0A0620 100%);color:#E8E0D0}
.jc-overlay--casino .jc-ov-header{background:rgba(4,4,10,0.9);border-color:rgba(244,208,63,0.1)}
.jc-overlay--casino .jc-ov-title{color:var(--gold);text-shadow:0 0 25px rgba(244,208,63,0.4)}

/* Particles */
.cx-particles{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
.cx-p{position:absolute;bottom:-10px;width:3px;height:3px;border-radius:50%;background:var(--gold);animation:cx-float-up linear infinite}
@keyframes cx-float-up{0%{transform:translateY(0);opacity:0}10%{opacity:1}90%{opacity:.6}100%{transform:translateY(-100vh);opacity:0}}

/* Menu */
.cx-menu{position:relative;z-index:1;padding:16px;max-width:520px;margin:0 auto}
.cx-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.cx-card{padding:24px 14px;border-radius:var(--r-lg);border:1px solid rgba(244,208,63,0.08);background:rgba(244,208,63,0.02);backdrop-filter:blur(8px);cursor:pointer;transition:all .35s var(--ease);text-align:center;font-family:var(--sans);color:var(--cream);display:flex;flex-direction:column;align-items:center;gap:8px}
.cx-card:hover{border-color:rgba(244,208,63,0.3);background:rgba(244,208,63,0.06);transform:translateY(-4px);box-shadow:0 12px 40px rgba(244,208,63,0.12)}
.cx-icon{width:48px;height:48px;color:var(--gold);filter:drop-shadow(0 0 8px var(--gold-glow))}
.cx-card-name{font-family:var(--serif);font-size:.9rem;font-weight:700;color:var(--gold)}
.cx-card-desc{font-size:.65rem;color:var(--muted)}
.cx-stats{text-align:center;padding:14px;font-size:.7rem;color:var(--muted);letter-spacing:.03em}
.cx-daily{display:block;margin:8px auto;padding:10px 28px;border-radius:100px;border:2px solid var(--gold);background:rgba(244,208,63,0.08);color:var(--gold);font-family:var(--serif);font-size:.82rem;font-weight:700;cursor:pointer;animation:jc-pulse 2s ease infinite;letter-spacing:.06em;backdrop-filter:blur(6px)}
.cx-daily-done{text-align:center;padding:12px;font-size:.7rem;color:var(--dim)}

/* Shared game area */
.jc-game-area{padding:16px;max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:14px;position:relative;z-index:1}
.jc-game-back{background:none;border:none;color:var(--muted);font-size:.7rem;cursor:pointer;font-family:var(--sans);padding:8px;transition:color .2s ease}
.jc-game-back:hover{color:var(--cream-soft)}
.jc-bet-amount{display:flex;align-items:center;gap:10px;font-size:.75rem;color:var(--cream-soft);width:100%}
.jc-bet-label{font-size:.68rem;color:var(--muted);text-transform:uppercase;letter-spacing:.06em;min-width:36px}
.jc-bet-val{font-family:var(--serif);font-weight:700;color:var(--copper-light);min-width:60px;text-align:right}
.jc-bet-amount input[type=range]{flex:1;accent-color:var(--gold);height:4px}

/* ── Roulette ──────────────────────────────────────────── */
.cx-roulette-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:center}
.cx-wheel{width:120px;height:120px;border-radius:50%;border:3px solid rgba(244,208,63,0.2);background:conic-gradient(from 0deg,#1a0a0a,#0a1a0a,#0a0a1a,#1a1a0a,#1a0a0a,#0a1a0a,#0a0a1a,#1a1a0a);position:relative;display:flex;align-items:center;justify-content:center;box-shadow:0 0 30px rgba(244,208,63,0.08),inset 0 0 20px rgba(0,0,0,0.5)}
.cx-wheel-inner{width:40px;height:40px;border-radius:50%;border:2px solid rgba(244,208,63,0.3);background:var(--surface)}
.cx-ball{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);top:8px;left:50%;margin-left:-4px;box-shadow:0 0 8px var(--gold)}
.cx-wheel--spin{animation:cx-wheel-rotate 1.8s cubic-bezier(.2,.8,.3,1)}
.cx-ball--spin{animation:cx-ball-orbit 1.8s cubic-bezier(.2,.8,.3,1)}
@keyframes cx-wheel-rotate{0%{transform:rotate(0)}100%{transform:rotate(1080deg)}}
@keyframes cx-ball-orbit{0%{transform:rotate(0) translateY(-50px)}100%{transform:rotate(-1440deg) translateY(-50px)}}

.cx-rr{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100px;height:100px;border-radius:50%;border:3px solid var(--dim);background:var(--surface);transition:all .5s var(--ease)}
.cx-rr--red{border-color:#C44;background:radial-gradient(circle,rgba(200,50,50,0.15),transparent)}
.cx-rr--black{border-color:#666;background:radial-gradient(circle,rgba(80,80,80,0.15),transparent)}
.cx-rr--gold{border-color:var(--gold);background:radial-gradient(circle,rgba(244,208,63,0.15),transparent)}
.cx-rr--win{animation:cx-flash .6s ease;box-shadow:0 0 30px var(--gold-glow)}
.cx-rr--lose{animation:cx-shake .4s ease}
.cx-rr-num{font-family:var(--serif);font-size:2.2rem;font-weight:900}
.cx-rr-msg{font-size:.7rem;color:var(--cream-soft)}
@keyframes cx-flash{0%,100%{box-shadow:0 0 30px var(--gold-glow)}50%{box-shadow:0 0 60px rgba(244,208,63,0.5)}}
@keyframes cx-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}

.cx-bets{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px;width:100%}
.cx-bet{padding:9px 4px;border-radius:6px;border:1px solid rgba(255,255,255,0.05);background:rgba(255,255,255,0.02);color:var(--cream);font-family:var(--sans);font-size:.68rem;cursor:pointer;transition:all .2s ease;font-weight:500;backdrop-filter:blur(4px)}
.cx-bet:hover{background:rgba(244,208,63,0.06);border-color:rgba(244,208,63,0.2)}
.cx-bet--red{border-color:rgba(200,50,50,0.2);color:#E88}
.cx-bet--red:hover{background:rgba(200,50,50,0.08)}
.cx-bet--blk{border-color:rgba(100,100,100,0.2)}

/* ── Slots ─────────────────────────────────────────────── */
.cx-slots-frame{display:flex;gap:8px;padding:16px 20px;border-radius:var(--r-lg);border:2px solid rgba(244,208,63,0.12);background:linear-gradient(180deg,rgba(10,10,20,0.9),rgba(15,15,30,0.9));backdrop-filter:blur(10px);box-shadow:inset 0 0 30px rgba(0,0,0,0.5),0 0 20px rgba(244,208,63,0.05);transition:all .3s ease}
.cx-slots-frame--win{border-color:var(--gold);box-shadow:inset 0 0 30px rgba(244,208,63,0.1),0 0 40px rgba(244,208,63,0.2);animation:cx-flash .8s ease 3}
.cx-reel{width:80px;height:90px;overflow:hidden;border-radius:var(--r);border:1px solid rgba(244,208,63,0.08);background:linear-gradient(180deg,rgba(244,208,63,0.03),transparent)}
.cx-reel-inner{display:flex;align-items:center;justify-content:center;height:100%;transition:all .3s ease}
.cx-reel--spin{animation:cx-reel-scroll .5s linear infinite}
.cx-reel--stop{animation:cx-reel-bounce .35s var(--ease)}
.cx-sym{width:50px;height:50px;color:var(--gold);display:flex;align-items:center;justify-content:center}
.cx-sym svg{width:100%;height:100%}
@keyframes cx-reel-scroll{0%{transform:translateY(-100%)}100%{transform:translateY(100%)}}
@keyframes cx-reel-bounce{0%{transform:translateY(-15px)}60%{transform:translateY(5px)}100%{transform:translateY(0)}}
.cx-slots-msg{min-height:28px;text-align:center}
.cx-win-text{font-family:var(--serif);font-size:1.2rem;font-weight:900;color:var(--gold);text-shadow:0 0 20px var(--gold-glow);animation:jc-win-pulse .5s ease}
.cx-lose-text{font-size:.8rem;color:var(--muted)}
.cx-spin-btn{padding:12px 36px;border-radius:100px;border:none;background:linear-gradient(135deg,var(--gold),#C4935A);color:#07070A;font-family:var(--serif);font-size:.9rem;font-weight:900;cursor:pointer;letter-spacing:.12em;transition:all .2s ease;box-shadow:0 4px 25px rgba(244,208,63,0.25);text-transform:uppercase}
.cx-spin-btn:hover{filter:brightness(1.1);transform:translateY(-2px)}
.cx-spin-btn:disabled{opacity:.4;cursor:not-allowed;transform:none}
@keyframes jc-win-pulse{0%{transform:scale(1)}50%{transform:scale(1.15)}100%{transform:scale(1)}}

/* ── Cards (shared BJ + Poker) ─────────────────────────── */
.cc{width:52px;height:72px;border-radius:6px;display:inline-flex;flex-direction:column;align-items:center;justify-content:space-between;padding:5px 4px;border:1px solid rgba(255,255,255,0.1);background:linear-gradient(135deg,#1a1a24,#14141e);position:relative;font-family:var(--serif);animation:cx-card-deal .4s var(--ease)}
.cc--red{color:#D44}
.cc--black{color:#ccc}
.cc-rank{font-size:.85rem;font-weight:700;line-height:1}
.cc-rank--bot{transform:rotate(180deg)}
.cs{width:14px;height:14px}
.cs--red{color:#D44}
.cc--back{background:linear-gradient(135deg,#1a1520,#0d0a15);border-color:rgba(244,208,63,0.15)}
.cc-pattern{width:100%;height:100%;border-radius:4px;background:repeating-linear-gradient(45deg,rgba(244,208,63,0.06),rgba(244,208,63,0.06) 4px,transparent 4px,transparent 8px);border:1px solid rgba(244,208,63,0.1)}
@keyframes cx-card-deal{0%{opacity:0;transform:translateY(-30px) rotate(-5deg)}100%{opacity:1;transform:translateY(0) rotate(0)}}

/* ── Blackjack ─────────────────────────────────────────── */
.cx-bj-felt{width:100%;padding:20px 16px;border-radius:var(--r-lg);background:linear-gradient(135deg,#081208,#0a180c);border:1px solid rgba(90,202,122,0.08);box-shadow:inset 0 0 40px rgba(0,0,0,0.4)}
.cx-bj-empty{padding:40px;color:var(--muted);font-size:.82rem;text-align:center}
.cx-bj-hands{display:flex;flex-direction:column;gap:12px}
.cx-bj-side{text-align:center}
.cx-bj-label{font-size:.68rem;color:var(--cream-soft);margin-bottom:8px;text-transform:uppercase;letter-spacing:.06em}
.cx-bj-row{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}
.cx-bj-divider{height:1px;background:linear-gradient(90deg,transparent,rgba(90,202,122,0.15),transparent);margin:4px 0}
.cx-bj-result{font-family:var(--serif);font-size:1rem;padding:10px;margin-top:10px;border-radius:var(--r);color:var(--cream-soft);text-align:center}
.cx-bj-result--win{color:var(--gold);background:rgba(244,208,63,0.04);border:1px solid rgba(244,208,63,0.1)}
.cx-bj-result--bj{animation:cx-flash 1s ease 2;text-shadow:0 0 15px var(--gold-glow)}
.cx-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.cx-act{padding:10px 22px;border-radius:100px;border:1px solid rgba(244,208,63,0.15);background:rgba(244,208,63,0.04);color:var(--gold);font-family:var(--sans);font-size:.78rem;font-weight:600;cursor:pointer;transition:all .2s ease;backdrop-filter:blur(4px)}
.cx-act:hover{background:rgba(244,208,63,0.1);border-color:rgba(244,208,63,0.3)}
.cx-act--primary{background:linear-gradient(135deg,var(--gold),#C4935A);color:#07070A;border:none;font-weight:700}

/* ── Video Poker ───────────────────────────────────────── */
.cx-vp-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.cx-vp-card{position:relative;cursor:pointer;transition:all .25s var(--ease);border-radius:8px;overflow:visible}
.cx-vp-card:hover{transform:translateY(-4px)}
.cx-vp-card--held{transform:translateY(-8px)}
.cx-vp-card--held .cc{border-color:var(--gold);box-shadow:0 0 15px var(--gold-glow)}
.cx-vp-card--held::after{content:'';position:absolute;inset:-3px;border-radius:9px;border:2px solid var(--gold);animation:cx-hold-pulse 1.5s ease infinite;pointer-events:none}
.cx-vp-hold{position:absolute;top:-10px;left:50%;transform:translateX(-50%);font-size:.55rem;color:var(--gold);font-family:var(--sans);font-weight:700;letter-spacing:.08em;background:rgba(4,4,10,0.9);padding:2px 8px;border-radius:100px;border:1px solid rgba(244,208,63,0.3)}
.cx-vp-card--revealed .cc{animation:cx-card-flip .5s var(--ease)}
@keyframes cx-hold-pulse{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes cx-card-flip{0%{transform:rotateY(90deg);opacity:.5}100%{transform:rotateY(0);opacity:1}}

/* ── Casino responsive ─────────────────────────────────── */
@media(max-width:768px){
  .cx-grid{gap:8px;padding:0}
  .cx-card{padding:16px 10px}
  .cx-icon{width:36px;height:36px}
  .cx-card-name{font-size:.8rem}
  .cx-reel{width:65px;height:75px}
  .cx-sym{width:40px;height:40px}
  .cc{width:44px;height:62px;padding:3px}
  .cc-rank{font-size:.7rem}
  .cs{width:11px;height:11px}
  .cx-wheel{width:90px;height:90px}
  .cx-rr{width:80px;height:80px}
  .cx-rr-num{font-size:1.6rem}
}

/* ═══ DUTY FREE — warm-dark boutique ═══════════════════════════ */
.jc-overlay--dutyfree{
  background:
    radial-gradient(ellipse at 20% 0%,rgba(196,147,90,0.12) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 100%,rgba(244,208,63,0.06) 0%,transparent 50%),
    linear-gradient(180deg,#1B1611 0%,#0E0C09 100%);
  color:var(--cream);
}
.jc-overlay--dutyfree::before{
  content:'';position:absolute;inset:0;pointer-events:none;z-index:0;
  background:repeating-linear-gradient(45deg,transparent,transparent 120px,rgba(196,147,90,0.02) 120px,rgba(196,147,90,0.02) 121px);
}
.jc-overlay--dutyfree .jc-ov-header{background:rgba(14,12,9,0.82);border-color:rgba(196,147,90,0.18)}
.jc-overlay--dutyfree .jc-ov-title{color:var(--copper-light);font-family:var(--serif);letter-spacing:.12em}
.jc-overlay--dutyfree .jc-ov-back{color:var(--cream-soft);border-color:rgba(255,255,255,0.12)}
.jc-overlay--dutyfree .jc-ov-coins{color:var(--copper-light)}
.jc-overlay--dutyfree .jc-ov-subtitle{color:var(--cream-soft)}

.jc-df-section{padding:18px 24px;position:relative;z-index:1}
.jc-df-title{font-family:var(--serif);font-size:.92rem;color:var(--copper-light);letter-spacing:.16em;text-transform:uppercase;margin-bottom:14px;display:flex;align-items:center;gap:10px}
.jc-df-title::before,.jc-df-title::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(196,147,90,0.3),transparent)}
.jc-df-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(156px,1fr));gap:12px}
.jc-df-card{position:relative;padding:14px 12px 12px;border-radius:var(--r-lg);border:1px solid rgba(196,147,90,0.15);background:linear-gradient(180deg,rgba(26,26,34,0.85),rgba(14,14,20,0.85));backdrop-filter:blur(4px);cursor:pointer;transition:all .3s var(--ease);text-align:center;font-family:var(--sans);color:var(--cream);overflow:hidden}
.jc-df-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent 50%);pointer-events:none}
.jc-df-card:hover{border-color:rgba(196,147,90,0.45);transform:translateY(-3px);box-shadow:0 12px 32px rgba(0,0,0,0.5),0 0 24px var(--copper-glow)}
.jc-df-card--owned{opacity:.55;border-color:rgba(90,202,122,0.4)}
.jc-df-card--owned::after{content:'✓ Possédé';position:absolute;top:6px;right:8px;font-size:.58rem;color:var(--green);letter-spacing:.05em}
.jc-df-card--locked{opacity:.4;cursor:not-allowed}
.jc-df-card--locked:hover{transform:none;box-shadow:none}
.jc-df-preview{width:100%;height:66px;border-radius:var(--r);margin-bottom:10px;box-shadow:inset 0 1px 0 rgba(255,255,255,0.1),0 4px 12px rgba(0,0,0,0.3)}
.jc-df-preview--gold{background:linear-gradient(135deg,#FFE48A 0%,#F4D03F 45%,#B87333 100%)}
.jc-df-preview--diamond{background:linear-gradient(135deg,#E0FAFF 0%,#89D4E8 50%,#5BA8C8 100%)}
.jc-df-preview--holo{background:linear-gradient(135deg,#FF6B9B,#6EDEE0,#FFD56B,#9B7DFF);background-size:200% 200%;animation:jc-df-holo 4s ease infinite}
@keyframes jc-df-holo{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.jc-df-preview--stealth{background:linear-gradient(135deg,#2a2a35 0%,#111118 60%,#000 100%)}
.jc-df-preview--royal{background:linear-gradient(135deg,#8B7BDB 0%,#5D4BC4 100%)}
.jc-df-preview--neon{background:linear-gradient(135deg,#00E5FF 0%,#C026FF 100%);box-shadow:inset 0 1px 0 rgba(255,255,255,0.15),0 0 22px rgba(192,38,255,0.35)}
.jc-df-name{font-weight:600;font-size:.84rem;margin-bottom:2px;color:var(--cream)}
.jc-df-desc{font-size:.66rem;color:var(--cream-soft);margin-bottom:6px;min-height:14px}
.jc-df-price{font-family:var(--serif);font-size:.88rem;color:var(--copper-light);font-weight:700;letter-spacing:.02em}
.jc-df-boost-icon{font-size:1.6rem;margin-bottom:8px;color:var(--gold);filter:drop-shadow(0 0 8px var(--gold-glow))}

/* ═══ LOUNGE VIP AMBIANCE ══════════════════════════════════ */
.jc-overlay--lounge{background:linear-gradient(180deg,#1A0A0A 0%,#140D0D 40%,#0D0808 100%);color:#E8D8D0}
.jc-overlay--lounge .jc-ov-header{background:rgba(26,10,10,0.85);border-color:rgba(180,100,80,0.1)}
.jc-overlay--lounge .jc-ov-title{color:#D4847A}
.jc-overlay--lounge .jc-ov-coins{color:#C4935A}

.jc-lounge-bar{padding:16px 20px}
.jc-lounge-cooldown{text-align:center;padding:8px;font-size:.72rem;color:#D4847A;background:rgba(180,100,80,0.06);border-radius:var(--r);margin-bottom:12px}
.jc-cocktail-grid{display:flex;flex-direction:column;gap:8px}
.jc-cocktail{display:flex;align-items:center;gap:12px;padding:12px 16px;border-radius:var(--r);border:1px solid rgba(180,100,80,0.08);background:rgba(255,255,255,0.02);cursor:pointer;transition:all .2s ease;font-family:var(--sans);color:#E8D8D0;text-align:left;width:100%}
.jc-cocktail:hover{background:rgba(180,100,80,0.06);border-color:rgba(180,100,80,0.15)}
.jc-cocktail--locked{opacity:.35;cursor:not-allowed}
.jc-ck-glass{width:28px;height:28px;border-radius:50%;flex-shrink:0;opacity:.7}
.jc-ck-info{flex:1}
.jc-ck-name{font-weight:600;font-size:.82rem;display:block}
.jc-ck-desc{font-size:.66rem;color:#B8A8A0;display:block}
.jc-ck-price{font-size:.72rem;color:#C4935A;font-weight:600;white-space:nowrap}

/* ═══ TROPHIES AMBIANCE ════════════════════════════════════ */
.jc-overlay--trophies{background:linear-gradient(180deg,#050508 0%,#08080D 100%);color:#E8E0D0}
.jc-overlay--trophies .jc-ov-header{background:rgba(5,5,8,0.9);border-color:rgba(90,202,122,0.06)}
.jc-overlay--trophies .jc-ov-title{color:var(--green)}
.jc-overlay--trophies .jc-ov-coins{color:var(--copper-light)}

.jc-trophy-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px;padding:16px 20px}
.jc-trophy{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.03);background:var(--surface);text-align:center;transition:all .3s ease;opacity:.25}
.jc-trophy--lit{opacity:1;border-color:rgba(196,147,90,0.12);background:rgba(196,147,90,0.03)}
.jc-trophy--lit:hover{border-color:rgba(196,147,90,0.25);transform:translateY(-2px);box-shadow:0 8px 30px rgba(196,147,90,0.08)}
.jc-trophy-pedestal{position:relative}
.jc-trophy--lit .jc-trophy-pedestal::after{content:'';position:absolute;inset:-6px;border-radius:50%;background:radial-gradient(circle,rgba(196,147,90,0.15),transparent 70%);pointer-events:none}
.jc-trophy-name{font-size:.65rem;color:var(--cream-soft);line-height:1.3;font-weight:500}
.jc-trophy-desc{font-size:.58rem;color:var(--muted)}

/* ═══ RESPONSIVE OVERLAY ═══════════════════════════════════ */
@media(max-width:768px){
  .jc-locations-bar{bottom:8px;gap:5px}
  .jc-loc-btn{padding:5px 12px;font-size:.62rem}
  .jc-casino-grid{grid-template-columns:1fr 1fr;gap:8px;padding:12px}
  .jc-casino-card{padding:16px 10px}
  .jc-casino-card-icon{font-size:2rem}
  .jc-slot-reel{width:55px;height:65px;font-size:2rem}
  .jc-vp-card{width:50px;height:70px;font-size:.9rem}
  .jc-df-grid{grid-template-columns:1fr 1fr}
  .jc-trophy-grid{grid-template-columns:repeat(auto-fill,minmax(90px,1fr));gap:6px;padding:10px}
  .jc-ov-title{font-size:.9rem}
}

/* ═══════════════════════════════════════════════════════════ */
/* ═══ PHASE 5 — TWITCH ═════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════ */

/* ── MODE SELECTION SCREEN ─────────────────────────────────── */
.jc-mode-screen{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(ellipse at 50% 30%,rgba(196,147,90,0.06),transparent 60%),var(--bg);padding:40px 20px}
.jc-mode-header{text-align:center;margin-bottom:40px;animation:jc-fade-in .8s var(--ease)}
.jc-mode-logo{font-family:var(--serif);font-size:2.5rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase}
.jc-mode-logo span{color:var(--copper)}
.jc-mode-tagline{font-size:.85rem;color:var(--muted);margin-top:8px;letter-spacing:.1em}
.jc-mode-cards{display:flex;align-items:stretch;gap:20px;animation:jc-fade-in .8s var(--ease) .2s both}
.jc-mode-card{padding:40px 30px;border-radius:var(--r-lg);border:1px solid rgba(255,255,255,0.06);background:var(--surface);text-align:center;transition:all .3s var(--ease);cursor:pointer;min-width:220px;display:flex;flex-direction:column;align-items:center;gap:12px;font-family:var(--sans);color:var(--cream)}
.jc-mode-card:hover{border-color:rgba(196,147,90,0.3);transform:translateY(-4px);box-shadow:0 12px 40px rgba(0,0,0,0.3)}
.jc-mode--solo:hover{border-color:var(--copper);box-shadow:0 12px 40px rgba(196,147,90,0.15)}
.jc-mode--twitch{cursor:default}
.jc-mode--twitch:hover{border-color:rgba(145,70,255,0.3);box-shadow:0 12px 40px rgba(145,70,255,0.1)}
.jc-mode-icon{font-size:3rem;line-height:1}
.jc-mode-name{font-family:var(--serif);font-size:1.2rem;font-weight:700}
.jc-mode-desc{font-size:.72rem;color:var(--muted);max-width:180px}
.jc-mode-divider{display:flex;align-items:center;color:var(--dim);font-size:.75rem}
.jc-mode-input{width:100%;padding:10px 14px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.08);background:var(--card);color:var(--cream);font-family:var(--sans);font-size:.85rem;text-align:center;outline:none;transition:border-color .2s ease}
.jc-mode-input:focus{border-color:rgba(145,70,255,0.4)}
.jc-mode-go{padding:10px 24px;border-radius:100px;border:none;background:linear-gradient(135deg,#9146FF,#6B2FBF);color:#fff;font-family:var(--sans);font-size:.82rem;font-weight:600;cursor:pointer;transition:all .2s ease;letter-spacing:.03em}
.jc-mode-go:hover{filter:brightness(1.15);transform:translateY(-1px)}
@keyframes jc-fade-in{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

/* ── TWITCH STATUS INDICATOR ───────────────────────────────── */
.jc-twitch-status{display:flex;align-items:center;gap:6px;padding:4px 10px;border-radius:100px;background:rgba(255,255,255,0.03);font-size:.68rem}
.jc-tw-dot{width:8px;height:8px;border-radius:50%;background:#666;flex-shrink:0}
.jc-tw-dot--live{background:#5ACA7A;box-shadow:0 0 8px rgba(90,202,122,0.5);animation:jc-live-pulse 2s ease infinite}
.jc-tw-label{color:var(--cream-soft);font-weight:600;letter-spacing:.04em}
@keyframes jc-live-pulse{0%,100%{box-shadow:0 0 8px rgba(90,202,122,0.5)}50%{box-shadow:0 0 16px rgba(90,202,122,0.8)}}

/* ── SETTINGS BUTTON ───────────────────────────────────────── */
.jc-settings-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--dim);background:var(--surface);color:var(--muted);font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}
.jc-settings-btn:hover{color:var(--cream-soft);border-color:var(--cream-soft)}
.jc-settings-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(255,255,255,0.04);font-size:.82rem}
.jc-settings-val{color:var(--copper-light);font-weight:600}
.jc-settings-actions{display:flex;gap:10px;margin-top:12px;justify-content:center;flex-wrap:wrap}
.jc-settings-input{margin-top:10px;width:100%}
.jc-settings-divider{margin-top:18px;font-family:var(--serif);font-size:.72rem;letter-spacing:.14em;color:var(--copper-light);text-transform:uppercase;display:flex;align-items:center;gap:10px}
.jc-settings-divider::before,.jc-settings-divider::after{content:'';flex:1;height:1px;background:linear-gradient(90deg,transparent,rgba(196,147,90,0.25),transparent)}
.jc-settings-save-io{width:100%;margin-top:10px;padding:10px;border-radius:var(--r);border:1px solid rgba(196,147,90,0.18);background:var(--surface);color:var(--cream);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:.68rem;resize:vertical;min-height:60px;word-break:break-all}
.jc-settings-save-io:focus{outline:none;border-color:rgba(196,147,90,0.45);box-shadow:0 0 0 2px rgba(196,147,90,0.12)}

/* ── ANIMATED NPC AREA ─────────────────────────────────────── */
.jc-npc-area{position:absolute;inset:0;pointer-events:none;z-index:3;overflow:hidden}
.jc-npc{position:absolute;display:flex;flex-direction:column;align-items:center;pointer-events:auto;cursor:pointer;transition:left 1s linear}
.jc-npc-name{font-size:.5rem;color:var(--copper-light);font-weight:600;white-space:nowrap;letter-spacing:.02em;text-shadow:0 1px 4px rgba(0,0,0,0.8);margin-bottom:2px}
.jc-npc-body{width:16px;height:24px;color:var(--copper);filter:drop-shadow(0 0 3px var(--copper-glow));animation:jc-npc-pop .4s var(--ease),jc-npc-sway .8s ease-in-out .4s infinite;transition:transform .3s ease}
.jc-npc-action-slot{position:absolute;top:-18px;pointer-events:none}

/* VIP glow */
.jc-npc--vip .jc-npc-name{color:var(--gold)}
.jc-npc--vip .jc-npc-body{color:var(--gold);filter:drop-shadow(0 0 8px var(--gold-glow));animation:jc-npc-sway .5s ease-in-out infinite}

/* Ejection */
.jc-npc--eject{animation:jc-npc-eject 1.5s var(--ease) forwards!important}
.jc-npc--eject .jc-npc-body{color:var(--red);animation:jc-npc-shake .15s ease infinite}

/* Action bubble */
.jc-npc-action{position:absolute;top:-18px;font-size:.7rem;background:rgba(7,7,10,0.85);border:1px solid rgba(196,147,90,0.2);border-radius:100px;padding:1px 6px;animation:jc-action-pop .3s var(--ease);white-space:nowrap;pointer-events:none}

/* Tooltip */
.jc-npc-tooltip{position:absolute;transform:translateX(-50%);background:rgba(7,7,10,0.95);border:1px solid rgba(196,147,90,0.2);border-radius:6px;padding:6px 10px;font-size:.6rem;color:var(--cream-soft);white-space:nowrap;z-index:10;pointer-events:none;animation:jc-fade-in .2s ease;backdrop-filter:blur(8px)}
.jc-npc-tooltip b{color:var(--copper-light);font-weight:700}

@keyframes jc-npc-pop{0%{opacity:0;transform:scale(0)}60%{opacity:1;transform:scale(1.2)}100%{opacity:1;transform:scale(1)}}
@keyframes jc-npc-sway{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes jc-npc-eject{0%{opacity:1;transform:translateY(0)}30%{transform:translateY(5px) rotate(10deg)}100%{opacity:0;transform:translateY(-200px) rotate(45deg)}}
@keyframes jc-npc-shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
@keyframes jc-action-pop{0%{opacity:0;transform:scale(.5) translateY(5px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* ── USERNAME TAG ──────────────────────────────────────────── */
.jc-username-tag{font-size:.65rem;color:var(--copper-light);font-weight:600;letter-spacing:.03em;padding:3px 8px;border-radius:100px;background:rgba(196,147,90,0.06);border:1px solid rgba(196,147,90,0.12);white-space:nowrap;max-width:100px;overflow:hidden;text-overflow:ellipsis}

/* ── USERNAME SCREEN ───────────────────────────────────────── */
.jc-username-box{display:flex;flex-direction:column;align-items:center;gap:14px;animation:jc-fade-in .8s var(--ease) .3s both;max-width:320px}
.jc-username-label{font-family:var(--serif);font-size:1.1rem;color:var(--cream-soft);letter-spacing:.05em}
.jc-username-input{width:100%;padding:12px 16px;border-radius:var(--r);border:2px solid rgba(196,147,90,0.15);background:var(--surface);color:var(--cream);font-family:var(--sans);font-size:1rem;text-align:center;outline:none;transition:border-color .3s ease;letter-spacing:.05em}
.jc-username-input:focus{border-color:var(--copper)}
.jc-username-error{font-size:.72rem;color:var(--red);min-height:18px}
.jc-username-go{padding:12px 32px;border-radius:100px;border:none;background:linear-gradient(135deg,var(--copper),var(--copper-dark));color:#fff;font-family:var(--serif);font-size:.9rem;font-weight:700;cursor:pointer;letter-spacing:.08em;transition:all .2s ease;box-shadow:0 4px 20px rgba(196,147,90,0.25)}
.jc-username-go:hover{filter:brightness(1.15);transform:translateY(-2px)}

/* ── LEADERBOARD BUTTON ────────────────────────────────────── */
.jc-lb-btn{width:32px;height:32px;border-radius:50%;border:1px solid rgba(244,208,63,0.15);background:rgba(244,208,63,0.04);color:var(--gold);font-size:.8rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .2s ease;flex-shrink:0}
.jc-lb-btn:hover{border-color:rgba(244,208,63,0.3);background:rgba(244,208,63,0.08)}

/* ── LEADERBOARD MODAL ─────────────────────────────────────── */
.jc-lb-box{max-width:440px!important;max-height:80vh;overflow-y:auto}
.jc-lb-box h2{font-family:var(--serif);color:var(--gold)}
.jc-lb-list{display:flex;flex-direction:column;gap:4px;margin:12px 0}
.jc-lb-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:var(--r);background:var(--surface);border:1px solid rgba(255,255,255,0.03);font-size:.78rem}
.jc-lb-row--me{border-color:var(--copper);background:rgba(196,147,90,0.06)}
.jc-lb-row--top{border-color:rgba(244,208,63,0.15)}
.jc-lb-medal{font-size:1.1rem;width:24px;text-align:center}
.jc-lb-rank{width:24px;text-align:center;font-weight:700;color:var(--muted)}
.jc-lb-name{flex:1;font-weight:600;color:var(--cream)}
.jc-lb-score{color:var(--copper-light);font-weight:700;font-family:var(--serif);font-size:.82rem}
.jc-lb-detail{color:var(--muted);font-size:.65rem;min-width:40px;text-align:right}
.jc-lb-me-note{text-align:center;font-size:.72rem;color:var(--muted);padding:8px 0}
.jc-lb-loading{text-align:center;padding:30px;color:var(--muted)}

/* ── TWITCH EVENTS (big alert banners) ─────────────────────── */
.jc-twitch-event{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) scale(0.8);z-index:30;pointer-events:none;opacity:0;transition:all .4s var(--ease)}
.jc-tw-event--show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.jc-tw-event-content{padding:20px 30px;border-radius:var(--r-lg);text-align:center;backdrop-filter:blur(12px);min-width:280px;max-width:90vw}
.jc-tw-event--negative .jc-tw-event-content{background:rgba(180,40,40,0.15);border:1px solid rgba(224,85,85,0.3);color:#FF8888}
.jc-tw-event--positive .jc-tw-event-content{background:rgba(244,208,63,0.1);border:1px solid rgba(244,208,63,0.3);color:var(--gold)}
.jc-tw-event-icon{font-size:2rem;margin-bottom:8px}
.jc-tw-event--negative .jc-tw-event-icon{color:#E05555}
.jc-tw-event--positive .jc-tw-event-icon{color:var(--gold);text-shadow:0 0 20px var(--gold-glow)}
.jc-tw-event-msg{font-family:var(--serif);font-size:1rem;font-weight:700}
.jc-tw-wanted{margin-top:10px;padding:6px 16px;border:2px solid rgba(224,85,85,0.5);border-radius:var(--r);font-family:var(--serif);font-size:1.1rem;font-weight:900;color:#E05555;text-transform:uppercase;letter-spacing:.1em;animation:jc-wanted-flash .5s ease 3}
@keyframes jc-wanted-flash{0%,100%{opacity:1}50%{opacity:.4}}

/* ── FEED (activity ticker) ────────────────────────────────── */
.jc-feed{position:fixed;bottom:0;left:0;right:0;z-index:40;padding:6px 16px;background:linear-gradient(transparent,rgba(7,7,10,0.95));pointer-events:none;display:flex;flex-direction:column;gap:2px;max-height:100px}
.jc-feed-line{font-size:.68rem;color:var(--cream-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:2px 0;animation:jc-feed-in .3s var(--ease)}
.jc-feed-line--neg{color:#FF8888}
.jc-feed-line--pos{color:var(--gold)}
@keyframes jc-feed-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}

/* ── RESPONSIVE PHASE 5 ───────────────────────────────────── */
@media(max-width:768px){
  .jc-mode-cards{flex-direction:column;align-items:center}
  .jc-mode-divider{padding:8px 0}
  .jc-mode-card{min-width:auto;width:100%;max-width:300px;padding:28px 24px}
  .jc-mode-logo{font-size:1.8rem}
  .jc-tw-event-content{min-width:auto;padding:14px 20px}
  .jc-tw-event-msg{font-size:.85rem}
  .jc-twitch-status{padding:3px 8px;font-size:.6rem}
  .jc-settings-btn{width:28px;height:28px;font-size:.75rem}
}

/* ═══════════════════════════════════════════════════════════ */
/* ═══ PHASE 6 — POLISH ═════════════════════════════════════ */
/* ═══════════════════════════════════════════════════════════ */

/* ── Board of Directors ────────────────────────────────────── */
.jc-overlay--board{background:linear-gradient(180deg,#0A0A10 0%,#0D0D18 100%);color:var(--cream)}
.jc-overlay--board .jc-ov-title{color:var(--copper-light)}
.jc-board-seats,.jc-board-avail{padding:10px 20px}
.jc-director{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.04);background:var(--surface);margin-bottom:6px}
.jc-director--seated{border-color:rgba(196,147,90,0.2);background:rgba(196,147,90,0.04)}
.jc-dir-info{display:flex;flex-direction:column;gap:2px}
.jc-dir-name{font-weight:600;font-size:.85rem}
.jc-dir-bonus{font-size:.68rem;color:var(--green)}
.jc-dir-malus{font-size:.68rem;color:var(--red)}
.jc-dir-btn{padding:6px 14px;border-radius:100px;border:1px solid var(--copper);background:rgba(196,147,90,0.08);color:var(--copper-light);font-family:var(--sans);font-size:.7rem;cursor:pointer;transition:all .2s ease}
.jc-dir-btn:hover{background:rgba(196,147,90,0.18)}
.jc-dir-btn--remove{border-color:var(--red);color:var(--red);background:rgba(224,85,85,0.05)}

/* ── Control Tower ─────────────────────────────────────────── */
/* ═══ TOUR DE CONTRÔLE — Card grid ═════════════════════════ */
.jc-overlay--tower{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(110,168,255,0.08) 0%,transparent 55%),
    radial-gradient(ellipse at 90% 100%,rgba(138,90,212,0.06) 0%,transparent 50%),
    linear-gradient(180deg,#080A0F 0%,#0A0E18 100%);
  color:var(--cream);
}
.jc-overlay--tower .jc-ov-title{color:#6EA8FF;font-family:var(--serif);letter-spacing:.12em}
.jc-tower-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;padding:18px 22px}
.jc-spell{
  position:relative;display:grid;grid-template-columns:44px 1fr auto;align-items:center;gap:12px;
  padding:14px 16px;border-radius:var(--r-lg);
  border:1px solid rgba(110,168,255,0.16);
  background:linear-gradient(180deg,rgba(16,22,36,0.85),rgba(10,14,24,0.85));
  cursor:pointer;transition:all .25s var(--ease);
  font-family:var(--sans);color:var(--cream);text-align:left;width:100%;
  backdrop-filter:blur(4px);
}
.jc-spell:hover:not([disabled]){border-color:rgba(110,168,255,0.4);transform:translateY(-2px);box-shadow:0 10px 28px rgba(0,0,0,0.4),0 0 22px rgba(110,168,255,0.18)}
.jc-spell--ready{border-left:3px solid #6EA8FF}
.jc-spell--cd{opacity:.72;cursor:wait}
.jc-spell--cd::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(-45deg,transparent,transparent 8px,rgba(244,208,63,0.04) 8px,rgba(244,208,63,0.04) 16px);border-radius:inherit;pointer-events:none}
.jc-spell--locked{opacity:.45;cursor:not-allowed}
.jc-spell-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(110,168,255,0.18),rgba(110,168,255,0.04));color:#8EC0FF;border:1px solid rgba(110,168,255,0.25)}
.jc-spell-icon svg{width:22px;height:22px}
.jc-spell-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.jc-spell-name{font-weight:600;font-size:.88rem;color:#B4D4FF;font-family:var(--serif);letter-spacing:.02em}
.jc-spell-desc{font-size:.72rem;color:var(--cream-soft);line-height:1.35}
.jc-spell-meta{display:flex;gap:10px;font-size:.68rem;color:var(--muted);align-items:center;margin-top:3px;flex-wrap:wrap}
.jc-spell-cost{color:var(--copper-light);font-weight:600}
.jc-spell-cd{color:var(--gold);font-weight:600}
.jc-spell-risk{padding:1px 7px;border-radius:100px;font-weight:600;font-size:.62rem}
.jc-spell-risk--low{background:rgba(90,202,122,0.12);color:var(--green);border:1px solid rgba(90,202,122,0.25)}
.jc-spell-risk--med{background:rgba(244,208,63,0.1);color:var(--gold);border:1px solid rgba(244,208,63,0.25)}
.jc-spell-risk--high{background:rgba(224,85,85,0.12);color:var(--red);border:1px solid rgba(224,85,85,0.3)}
.jc-spell-state{display:flex;align-items:center;justify-content:flex-end}
.jc-spell-badge{padding:3px 9px;border-radius:100px;font-size:.6rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;white-space:nowrap}
.jc-spell-badge--ready{background:rgba(110,168,255,0.15);color:#8EC0FF;border:1px solid rgba(110,168,255,0.35)}
.jc-spell-badge--cd{background:rgba(244,208,63,0.1);color:var(--gold);border:1px solid rgba(244,208,63,0.25)}
.jc-spell-badge--locked{background:rgba(255,255,255,0.04);color:var(--muted);border:1px solid rgba(255,255,255,0.08)}

/* ── Fuel Market ───────────────────────────────────────────── */
/* ═══ MARCHÉ DU CARBURANT — trading view ═══════════════════ */
.jc-overlay--fuel{
  background:
    radial-gradient(ellipse at 10% 0%,rgba(196,147,90,0.1) 0%,transparent 55%),
    radial-gradient(ellipse at 90% 100%,rgba(90,202,122,0.04) 0%,transparent 50%),
    linear-gradient(180deg,#0A0806 0%,#100C08 100%);
  color:var(--cream);
}
.jc-overlay--fuel .jc-ov-title{color:var(--copper-light);font-family:var(--serif);letter-spacing:.12em}

.jc-fuel-wrap{padding:20px 22px;max-width:920px;margin:0 auto}
.jc-fuel-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap;margin-bottom:14px}
.jc-fuel-price{display:flex;align-items:baseline;gap:8px}
.jc-fuel-price-val{font-family:var(--serif);font-size:2.4rem;font-weight:700;color:var(--copper-light);text-shadow:0 0 24px rgba(196,147,90,0.3);line-height:1}
.jc-fuel-price-unit{font-size:.78rem;color:var(--cream-soft)}
.jc-fuel-trend{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;border-radius:100px;font-size:.72rem;font-weight:700;letter-spacing:.03em;margin-left:6px}
.jc-fuel-trend--up{background:rgba(90,202,122,0.12);color:var(--green);border:1px solid rgba(90,202,122,0.3)}
.jc-fuel-trend--down{background:rgba(224,85,85,0.12);color:var(--red);border:1px solid rgba(224,85,85,0.3)}
.jc-fuel-trend--flat{background:rgba(255,255,255,0.04);color:var(--cream-soft);border:1px solid rgba(255,255,255,0.08)}

.jc-fuel-spread{display:flex;gap:12px;align-items:stretch;border:1px solid rgba(196,147,90,0.15);border-radius:var(--r);padding:6px 4px;background:rgba(20,20,26,0.6)}
.jc-fuel-col{display:flex;flex-direction:column;align-items:center;padding:4px 14px;min-width:70px}
.jc-fuel-col--spread{border-left:1px solid rgba(255,255,255,0.06);border-right:1px solid rgba(255,255,255,0.06)}
.jc-fuel-col-lbl{font-size:.58rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase;margin-bottom:2px}
.jc-fuel-col-val{font-family:var(--serif);font-size:1.1rem;font-weight:700;color:var(--cream)}
.jc-fuel-col--buy{color:var(--green)}
.jc-fuel-col--sell{color:var(--red)}

.jc-fuel-chart{position:relative;margin:14px 0 16px;padding:12px;background:linear-gradient(180deg,rgba(20,20,26,0.7),rgba(12,12,18,0.7));border:1px solid rgba(196,147,90,0.15);border-radius:var(--r-lg);overflow:hidden}
.jc-fuel-chart::before{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 35px,rgba(196,147,90,0.04) 35px,rgba(196,147,90,0.04) 36px);pointer-events:none}
.jc-fuel-svg{display:block;width:100%;height:180px}

.jc-fuel-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:16px}
.jc-fuel-stat{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.05);background:rgba(20,20,26,0.6)}
.jc-fuel-stat-lbl{font-size:.62rem;color:var(--muted);letter-spacing:.08em;text-transform:uppercase}
.jc-fuel-stat-val{font-family:var(--serif);font-size:1.25rem;font-weight:700;color:var(--copper-light);line-height:1.1}
.jc-fuel-stat-unit{font-size:.64rem;color:var(--cream-soft)}

.jc-fuel-actions{display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap}
.jc-fuel-action-group{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:var(--r);border:1px solid rgba(255,255,255,0.05);background:rgba(20,20,26,0.6);flex:1;min-width:260px}
.jc-fuel-action-label{font-size:.68rem;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;font-weight:600;margin-right:4px}
.jc-fuel-btn{flex:1;padding:9px 12px;border-radius:var(--r);border:1px solid transparent;font-family:var(--sans);font-size:.82rem;font-weight:700;cursor:pointer;transition:all .2s var(--ease);letter-spacing:.03em}
.jc-fuel-btn:disabled{opacity:.35;cursor:not-allowed}
.jc-fuel-btn--buy{background:rgba(90,202,122,0.1);color:var(--green);border-color:rgba(90,202,122,0.3)}
.jc-fuel-btn--buy:hover:not(:disabled){background:rgba(90,202,122,0.2);border-color:rgba(90,202,122,0.5);transform:translateY(-1px)}
.jc-fuel-btn--sell{background:rgba(224,85,85,0.1);color:var(--red);border-color:rgba(224,85,85,0.3)}
.jc-fuel-btn--sell:hover:not(:disabled){background:rgba(224,85,85,0.2);border-color:rgba(224,85,85,0.5);transform:translateY(-1px)}

/* ── Seasons ───────────────────────────────────────────────── */
/* ═══ SAISONS — grid + locked preview ══════════════════════ */
.jc-overlay--seasons{
  background:
    radial-gradient(ellipse at 20% 0%,rgba(138,90,212,0.1) 0%,transparent 55%),
    radial-gradient(ellipse at 80% 100%,rgba(244,208,63,0.04) 0%,transparent 50%),
    linear-gradient(180deg,#0A080D 0%,#0D0A12 100%);
  color:var(--cream);
}
.jc-overlay--seasons .jc-ov-title{color:var(--purple);font-family:var(--serif);letter-spacing:.12em}

.jc-season-teaser{padding:20px 22px 32px;position:relative;z-index:1}
.jc-season-teaser-head{display:flex;align-items:center;gap:12px;margin-bottom:18px;padding:14px 18px;border-radius:var(--r-lg);background:linear-gradient(90deg,rgba(138,90,212,0.12),rgba(138,90,212,0.04));border:1px solid rgba(138,90,212,0.2)}
.jc-season-teaser-badge{padding:4px 12px;border-radius:100px;background:var(--purple);color:#fff;font-size:.62rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;flex-shrink:0}
.jc-season-teaser-text{font-size:.84rem;color:var(--cream);line-height:1.45}
.jc-season-teaser-text b{color:var(--gold)}

.jc-season-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px;padding:18px 22px}
.jc-season-card{
  position:relative;display:flex;flex-direction:column;gap:6px;padding:16px 18px;
  border-radius:var(--r-lg);border:1px solid rgba(138,90,212,0.15);
  background:linear-gradient(180deg,rgba(26,20,36,0.85),rgba(14,10,22,0.85));
  cursor:pointer;transition:all .25s var(--ease);
  font-family:var(--sans);color:var(--cream);text-align:left;width:100%;
  backdrop-filter:blur(4px);overflow:hidden;
}
.jc-season-card::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,0.03),transparent 60%);pointer-events:none}
.jc-season-card:hover:not(.jc-season-card--locked){transform:translateY(-3px);border-color:rgba(138,90,212,0.45);box-shadow:0 12px 30px rgba(0,0,0,0.5),0 0 24px rgba(138,90,212,0.2)}
.jc-season-card--active{border-color:rgba(138,90,212,0.6);background:linear-gradient(180deg,rgba(40,28,60,0.9),rgba(18,12,30,0.9));box-shadow:0 0 20px rgba(138,90,212,0.3)}
.jc-season-card--locked{opacity:.6;cursor:default}
.jc-season-card--locked:hover{transform:none;box-shadow:none}
.jc-season-lock{position:absolute;top:10px;right:12px;font-size:.9rem;opacity:.7}
.jc-season-name{font-weight:700;font-size:.95rem;color:var(--purple);font-family:var(--serif);letter-spacing:.03em}
.jc-season-card--airshow .jc-season-name{color:#6EA8FF}
.jc-season-card--romance .jc-season-name{color:#E84393}
.jc-season-card--nightflight .jc-season-name{color:#9B7DFF}
.jc-season-card--christmas .jc-season-name{color:#F06A5A}
.jc-season-card--blackfriday .jc-season-name{color:#E8B04B}
.jc-season-desc{font-size:.72rem;color:var(--cream-soft);line-height:1.4}
.jc-season-bonus{font-size:.78rem;color:var(--gold);font-weight:700;margin-top:auto;padding-top:4px}
.jc-season-active{position:absolute;top:10px;right:14px;padding:3px 8px;border-radius:100px;background:rgba(90,202,122,0.15);border:1px solid rgba(90,202,122,0.35);font-size:.56rem;font-weight:700;color:var(--green);text-transform:uppercase;letter-spacing:.08em}
.jc-season-actions{display:flex;justify-content:center;padding:0 22px 22px}
#jc-deactivate-season{display:block}

/* ── Crisis Visual ─────────────────────────────────────────── */
/* ═══ CRISIS — progressive dread ═══════════════════════════ */
.jc-crisis--1{background:radial-gradient(ellipse at 50% 40%,rgba(200,110,40,0.12),transparent 60%),radial-gradient(ellipse at center,var(--bg2),var(--bg))}
.jc-crisis--1::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(224,85,85,0.08) 0%,transparent 45%);animation:jc-crisis-breathe 4s ease-in-out infinite}

.jc-crisis--2{background:radial-gradient(ellipse at 50% 40%,rgba(220,60,30,0.18),transparent 55%),radial-gradient(ellipse at center,#180A0A,#08040A)!important}
.jc-crisis--2::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 0%,rgba(224,50,50,0.12) 0%,transparent 45%),radial-gradient(ellipse at 50% 100%,rgba(224,50,50,0.1) 0%,transparent 45%);animation:jc-crisis-breathe 3s ease-in-out infinite}

.jc-crisis--3{background:radial-gradient(ellipse at 50% 40%,rgba(255,40,30,0.3) 0%,rgba(120,0,0,0.15) 30%,transparent 60%),radial-gradient(ellipse at center,#280606,#0A0202)!important;animation:jc-crisis-pulse 2.2s ease-in-out infinite}
.jc-crisis--3::before{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(255,40,30,0.03) 3px,rgba(255,40,30,0.03) 4px);mix-blend-mode:screen;animation:jc-crisis-scan 4s linear infinite}
.jc-crisis--3::after{content:'';position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 50%,transparent 55%,rgba(200,0,0,0.35) 100%);animation:jc-crisis-vignette 1.6s ease-in-out infinite}

@keyframes jc-crisis-breathe{0%,100%{opacity:.6}50%{opacity:1}}
@keyframes jc-crisis-pulse{
  0%,100%{filter:brightness(1) saturate(1)}
  50%{filter:brightness(1.15) saturate(1.3)}
}
@keyframes jc-crisis-scan{
  0%{transform:translateY(0)}
  100%{transform:translateY(4px)}
}
@keyframes jc-crisis-vignette{
  0%,100%{opacity:.55}
  50%{opacity:1}
}

/* ── Wrinklers ─────────────────────────────────────────────── */
.jc-wrinkler-area{position:absolute;inset:0;pointer-events:none;z-index:4}
.jc-wrinkler{position:absolute;display:flex;flex-direction:column;align-items:center;cursor:pointer;pointer-events:auto;animation:jc-wrinkler-float 3s ease-in-out infinite;transition:all .3s ease}
.jc-wrinkler:hover{transform:scale(1.3)}
.jc-wrinkler-body{font-size:1.5rem;filter:drop-shadow(0 0 8px rgba(100,40,40,0.5));color:#888;opacity:.7}
.jc-wrinkler-absorbed{font-size:.55rem;color:var(--copper-light);font-weight:600}
@keyframes jc-wrinkler-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

/* ── Season visual themes (body classes) ───────────────────── */
.jc-season--airshow .jc-center{background:radial-gradient(ellipse at 50% 40%,rgba(70,130,200,0.06),transparent 60%),var(--bg)}
.jc-season--romance .jc-center{background:radial-gradient(ellipse at 50% 40%,rgba(200,80,100,0.06),transparent 60%),var(--bg)}
.jc-season--night .jc-center{background:radial-gradient(ellipse at 50% 40%,rgba(40,40,80,0.08),transparent 60%),#030308}
.jc-season--xmas .jc-center{background:radial-gradient(ellipse at 50% 40%,rgba(200,40,40,0.05),transparent 60%),var(--bg)}
.jc-season--bf .jc-center{background:radial-gradient(ellipse at 50% 40%,rgba(200,160,60,0.06),transparent 60%),#080806}

/* ── New location button styles ────────────────────────────── */
.jc-loc--board{border-color:rgba(196,147,90,0.15)}
.jc-loc--tower{border-color:rgba(110,168,255,0.2);color:#6EA8FF}
.jc-loc--tower:hover{background:rgba(110,168,255,0.08)}
.jc-loc--fuel{border-color:rgba(196,147,90,0.15)}
.jc-loc--seasons{border-color:rgba(138,90,212,0.2);color:var(--purple)}
.jc-loc--seasons:hover{background:rgba(138,90,212,0.08)}

/* ── Responsive Phase 6 ───────────────────────────────────── */
@media(max-width:768px){
  .jc-tower-grid,.jc-season-grid{padding:10px 14px}
  .jc-fuel-svg{height:130px}
  .jc-fuel-stats{grid-template-columns:1fr;gap:6px}
  .jc-fuel-action-group{min-width:unset}
  .jc-director{padding:10px 12px}
}