@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@700&family=Lato:wght@300;400;700&display=swap');

:root {
  --green:   #5DBF60;
  --green2:  #2d6a30;
  --brown:   #8B5E3C;
  --gold:    #E8C547;
  --gold2:   #F5D76E;
  --sky:     #87CEEB;
  --ui-bg:   rgba(8,12,18,0.97);
  --border:  rgba(100,140,80,0.25);
  --panel:   rgba(10,16,24,0.98);
  --accent:  #FF8C00;
  --red:     #e74c3c;
  --blue:    #3498db;
  --purple:  #9b59b6;
  --font:    'Lato', sans-serif;
  --font2:   'Cinzel', serif;
  --font3:   'Cinzel Decorative', serif;
}

* { margin:0; padding:0; box-sizing:border-box; user-select:none; }

html, body {
  width:100vw; height:100vh; overflow:hidden;
  background:#1a0d05; font-family: var(--font);
}

/* ── SCREENS ── */
.screen { display:none; width:100%; height:100%; position:absolute; top:0; left:0; }
.screen.active { display:flex; }
#charSelectScreen.active { cursor: default !important; }
#charCreateScreen.active { cursor: default !important; }

/* ══════════════════════════════════════════
   LOGIN SCREEN — Epic RPG Style
   ══════════════════════════════════════════ */
#loginScreen {
  background: #050c0a;
  flex-direction: row;
  position: relative; overflow: hidden;
}

#loginStars {
  position: absolute; inset: 0;
  pointer-events: none; width: 100%; height: 100%; z-index: 0;
}

.login-bg-overlay {
  position: absolute; inset: 0; z-index: 1;
  background:
    radial-gradient(ellipse at 25% 50%, rgba(20,80,40,0.5) 0%, transparent 55%),
    radial-gradient(ellipse at 75% 50%, rgba(10,30,60,0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 50% 0%, rgba(40,120,60,0.25) 0%, transparent 40%);
}

.login-particles {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
}

/* ── LEFT: world art side ──────────────── */
.login-world-side {
  flex: 1; position: relative; z-index: 3;
  display: flex; align-items: flex-end;
  padding: 0 0 60px 60px;
  background:
    radial-gradient(ellipse at 40% 60%, rgba(30,100,50,0.35) 0%, transparent 60%);
}
.login-world-quote {
  font-family: var(--font2);
  font-size: 16px; font-weight: 400;
  color: rgba(180,220,160,0.5);
  letter-spacing: 1px;
  line-height: 1.8;
  font-style: italic;
  max-width: 380px;
  border-left: 2px solid rgba(100,180,80,0.3);
  padding-left: 20px;
}

/* ── RIGHT: panel ─────────────────────── */
.login-panel-side {
  width: 480px; flex-shrink: 0;
  position: relative; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  background: rgba(6,10,14,0.75);
  border-left: 1px solid rgba(100,160,80,0.12);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.login-panel-side::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(100,200,80,0.4) 30%,
    rgba(180,230,100,0.7) 50%,
    rgba(100,200,80,0.4) 70%, transparent 100%);
}

.login-panel {
  width: 360px;
  padding: 0 0 8px;
}

/* Logo */
.login-logo-area {
  text-align: center; margin-bottom: 36px;
}
.login-logo-icon {
  font-size: 52px; display: block; margin-bottom: 12px;
  animation: gv-float 3s ease-in-out infinite;
}
@keyframes gv-float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}
.login-logo-name {
  font-family: var(--font3);
  font-size: 32px; font-weight: 700;
  color: var(--gold);
  text-shadow:
    0 0 30px rgba(232,197,71,0.6),
    0 0 60px rgba(232,197,71,0.2);
  letter-spacing: 6px;
  margin-bottom: 6px;
}
.login-logo-tagline {
  font-family: var(--font2);
  font-size: 12px; font-weight: 400;
  color: rgba(150,200,100,0.5);
  letter-spacing: 3px;
}

/* Tabs */
.login-tabs {
  display: flex; gap: 0; margin-bottom: 28px;
  border: 1px solid rgba(100,160,80,0.2);
  border-radius: 4px; overflow: hidden;
}
.login-tab {
  flex: 1; padding: 12px;
  font-family: var(--font2);
  font-size: 13px; font-weight: 600;
  letter-spacing: 2px;
  color: rgba(130,180,100,0.5);
  background: rgba(255,255,255,0.02);
  border: none; cursor: pointer;
  transition: all 0.2s;
}
.login-tab:first-child { border-right: 1px solid rgba(100,160,80,0.2); }
.login-tab:hover { color: rgba(180,230,130,0.8); background: rgba(80,160,40,0.06); }
.login-tab.active {
  background: rgba(80,160,40,0.14);
  color: rgba(180,230,130,0.95);
  text-shadow: 0 0 12px rgba(120,200,60,0.3);
}

/* Form */
.login-form {}
.lf-group { margin-bottom: 18px; }
.lf-label {
  font-family: var(--font2);
  font-size: 10px; font-weight: 600;
  letter-spacing: 2px;
  color: rgba(120,180,90,0.55);
  display: block; margin-bottom: 8px;
}
.lf-input {
  width: 100%; padding: 14px 16px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(100,160,80,0.2);
  border-radius: 4px;
  color: rgba(220,240,200,0.9);
  font-family: var(--font);
  font-size: 16px; font-weight: 300;
  outline: none; transition: all 0.2s;
  letter-spacing: 0.5px;
}
.lf-input:focus {
  border-color: rgba(120,200,80,0.5);
  background: rgba(80,160,40,0.06);
  box-shadow: 0 0 0 3px rgba(100,180,60,0.08),
              0 0 20px rgba(80,160,40,0.06);
}
.lf-input::placeholder { color: rgba(100,140,80,0.3); }

/* Submit button */
.lf-submit {
  width: 100%; padding: 15px;
  margin-top: 8px;
  background: linear-gradient(135deg,
    rgba(60,140,40,0.4) 0%,
    rgba(40,110,25,0.5) 100%);
  border: 1px solid rgba(100,200,60,0.4);
  border-radius: 4px;
  color: rgba(200,240,160,0.95);
  font-family: var(--font2);
  font-size: 13px; font-weight: 600;
  letter-spacing: 3px;
  cursor: pointer;
  transition: all 0.25s;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.3), 0 0 20px rgba(60,160,40,0.1);
}
.lf-submit:hover {
  background: linear-gradient(135deg,
    rgba(80,170,50,0.5) 0%,
    rgba(60,140,35,0.6) 100%);
  border-color: rgba(130,220,80,0.6);
  color: #fff;
  box-shadow: 0 6px 30px rgba(0,0,0,0.4), 0 0 30px rgba(80,180,50,0.15);
  transform: translateY(-2px);
}
.lf-submit:active { transform: translateY(0); }
.lf-submit-icon { font-size: 18px; }
.lf-submit-register {
  background: linear-gradient(135deg,
    rgba(40,90,160,0.4) 0%,
    rgba(25,70,130,0.5) 100%);
  border-color: rgba(80,140,220,0.4);
  color: rgba(160,200,255,0.95);
}
.lf-submit-register:hover {
  background: linear-gradient(135deg,
    rgba(50,110,190,0.5) 0%,
    rgba(35,90,160,0.6) 100%);
  border-color: rgba(100,170,255,0.6);
  color: #fff;
  box-shadow: 0 6px 30px rgba(0,0,0,0.4), 0 0 30px rgba(60,120,220,0.12);
}

.lf-msg {
  font-family: var(--font);
  font-size: 14px; font-weight: 400;
  margin-top: 14px; min-height: 20px;
  color: rgba(220,80,70,0.9);
  text-align: center; letter-spacing: 0.5px;
}
.lf-msg.ok { color: rgba(120,220,80,0.9); }
.lf-demo {
  text-align: center; margin-top: 20px;
  font-family: var(--font); font-size: 13px;
  color: rgba(100,140,80,0.35);
}
.lf-demo b { color: rgba(150,200,100,0.5); }

/* Legacy compat */
.login-demo { text-align:center; margin-top:20px; font-size:13px; color:rgba(100,140,80,0.35); }
.login-demo b { color:rgba(150,200,100,0.5); }
.msg { font-size:14px; margin-top:12px; min-height:20px; color:var(--red); }
.msg.ok { color:var(--green); }
.tab-row { display:flex; gap:0; margin-bottom:22px; border:1px solid rgba(100,160,80,0.2); border-radius:4px; overflow:hidden; }
.tab-btn { flex:1; padding:11px; background:rgba(255,255,255,0.02); border:none; color:rgba(130,180,100,0.5); font-family:var(--font2); font-size:13px; letter-spacing:2px; cursor:pointer; transition:all 0.2s; }
.tab-btn:first-child { border-right:1px solid rgba(100,160,80,0.2); }
.tab-btn.active { background:rgba(80,160,40,0.14); color:rgba(180,230,130,0.95); }
.form-group { margin-bottom:16px; text-align:left; }
.form-group label { color:rgba(120,180,90,0.55); font-size:10px; font-family:var(--font2); letter-spacing:2px; display:block; margin-bottom:6px; }
.form-group input { width:100%; padding:13px 16px; background:rgba(255,255,255,0.04); border:1px solid rgba(100,160,80,0.2); color:rgba(220,240,200,0.9); font-family:var(--font); font-size:16px; border-radius:4px; outline:none; transition:all 0.2s; }
.form-group input:focus { border-color:rgba(120,200,80,0.5); box-shadow:0 0 0 3px rgba(100,180,60,0.08); }
.btn-primary { width:100%; padding:14px; background:linear-gradient(135deg,rgba(60,140,40,0.4),rgba(40,110,25,0.5)); border:1px solid rgba(100,200,60,0.4); color:rgba(200,240,160,0.95); font-family:var(--font2); font-size:13px; letter-spacing:3px; cursor:pointer; border-radius:4px; transition:all 0.2s; margin-top:6px; }
.btn-primary:hover { transform:translateY(-2px); box-shadow:0 6px 30px rgba(80,180,50,0.15); }

/* ── GAME SCREEN ── */
#gameScreen { flex-direction:column; }

/* TOP BAR */
#topBar {
  height:50px; background:var(--ui-bg); border-bottom:2px solid var(--border);
  display:flex; align-items:center; padding:0 12px; gap:14px; flex-shrink:0; z-index:100;
}
#playerAvatar { font-size:26px; }
#playerName { color:var(--gold); font-family:var(--font2); font-size:9px; }
.lv-txt { font-family:var(--font2); font-size:8px; color:var(--purple); }
.xp-bar-wrap { height:8px; background:rgba(255,255,255,0.1); border-radius:4px; width:110px; }
.xp-bar-fill { height:100%; background:linear-gradient(90deg,var(--purple),#e91e63);
  border-radius:4px; transition:width 0.5s; }
.stat-pill {
  display:flex; align-items:center; gap:5px;
  background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  border-radius:20px; padding:4px 10px; font-size:16px; color:#fff;
}
#timeDisplay { color:#aaa; font-size:14px; margin-left:auto; white-space:nowrap; }
.btn-sm {
  padding:5px 11px; border-radius:4px; border:1px solid;
  font-family:var(--font); font-size:14px; cursor:pointer; transition:all 0.2s;
  white-space:nowrap;
}
.gold-btn   { background:rgba(255,215,0,0.12);  border-color:var(--gold);   color:var(--gold); }
.orange-btn { background:rgba(255,140,0,0.12);  border-color:var(--accent); color:var(--accent); }
.green-btn  { background:rgba(76,175,80,0.12);  border-color:var(--green);  color:var(--green); }
.red-btn    { background:rgba(231,76,60,0.12);  border-color:var(--red);    color:var(--red); }
.gold-btn:hover   { background:var(--gold);   color:#000; }
.orange-btn:hover { background:var(--accent); color:#fff; }
.green-btn:hover  { background:var(--green);  color:#fff; }
.red-btn:hover    { background:var(--red);    color:#fff; }

/* MAIN AREA */
#gameMain { flex:1; display:flex; overflow:hidden; }

/* CANVAS WRAP */
#canvasWrap {
  flex:1; position:relative; overflow:hidden; background:#0a1a05;
  cursor:crosshair;
}
#gameCanvas { display:block; position:absolute; top:0; left:0; }

/* FLOAT MSG */
#floatMsg {
  position:absolute; top:60px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,0,0.85); border:1px solid var(--gold);
  color:var(--gold); padding:8px 20px; border-radius:20px;
  font-size:20px; pointer-events:none; opacity:0; transition:opacity 0.3s;
  white-space:nowrap; z-index:50;
}

/* SEASON BADGE */
#seasonBadge {
  position:absolute; top:10px; left:10px; z-index:50;
  background:rgba(0,0,0,0.7); border:1px solid var(--gold);
  padding:5px 12px; border-radius:20px; font-size:16px; color:#fff;
  pointer-events:none;
}

/* MINIMAP */
#minimapCanvas {
  position:absolute; bottom:12px; right:12px;
  width:130px; height:100px;
  background:rgba(0,0,0,0.75); border:2px solid var(--border);
  border-radius:4px; z-index:50;
}

/* COORDS */
#coordsDisplay {
  position:absolute; bottom:16px; left:12px; z-index:50;
  color:rgba(255,255,255,0.4); font-size:13px; pointer-events:none;
}

/* ZOOM CONTROLS */
#zoomControls {
  position:absolute; bottom:12px; right:12px; z-index:50;
  display:flex; align-items:center; gap:4px;
  background:rgba(0,0,0,0.45); border-radius:20px;
  padding:4px 10px; border:1px solid rgba(255,255,255,0.15);
}
#zoomControls button {
  background:none; border:none; color:rgba(255,255,255,0.75);
  font-size:16px; cursor:pointer; padding:0 4px; line-height:1;
  transition:color 0.15s;
}
#zoomControls button:hover { color:#FFD700; }
#zoomLabel {
  color:rgba(255,255,255,0.55); font-size:11px;
  font-family:'Press Start 2P',monospace; min-width:30px; text-align:center;
}

/* FISHING */
#fishingGame {
  position:absolute; bottom:90px; left:50%; transform:translateX(-50%);
  background:rgba(0,0,30,0.96); border:2px solid var(--blue);
  border-radius:10px; padding:18px 22px; display:none; z-index:60;
  min-width:320px; text-align:center;
}
.fish-title { color:var(--blue); font-family:var(--font2); font-size:10px; margin-bottom:12px; }
#fishingBar {
  width:100%; height:28px; background:rgba(255,255,255,0.1);
  border-radius:6px; overflow:hidden; position:relative; margin:8px 0;
}
#fishingZone { position:absolute; background:rgba(76,175,80,0.55); height:100%; transition:left 0.12s; }
#fishingIndicator {
  position:absolute; width:5px; height:100%; background:#fff;
  top:0; border-radius:3px; box-shadow:0 0 8px #fff; transition:left 0.05s;
}
.fish-hint { color:#aaa; font-size:14px; margin-bottom:10px; }
#catchBtn {
  padding:10px 28px; background:var(--blue); border:none; color:#fff;
  font-family:var(--font); font-size:20px; border-radius:6px;
  cursor:pointer; margin-right:8px; transition:all 0.2s;
}
#catchBtn:hover { background:#2980b9; }
#cancelFishBtn {
  padding:10px 16px; background:rgba(231,76,60,0.2); border:1px solid var(--red);
  color:var(--red); font-family:var(--font); font-size:18px;
  border-radius:6px; cursor:pointer; transition:all 0.2s;
}
#cancelFishBtn:hover { background:var(--red); color:#fff; }

/* RIGHT PANEL */
#rightPanel {
  width:215px; background:var(--panel); border-left:2px solid var(--border);
  display:flex; flex-direction:column; overflow-y:auto; flex-shrink:0;
}
.rpanel-section { padding:10px 12px; border-bottom:1px solid rgba(255,255,255,0.06); }
.rpanel-title { color:var(--gold); font-family:var(--font2); font-size:8px; margin-bottom:8px; }
.mini-btn {
  width:100%; padding:7px 8px; margin-bottom:4px; border-radius:4px;
  background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  color:#ddd; font-family:var(--font); font-size:15px; cursor:pointer;
  text-align:left; display:flex; align-items:center; gap:7px; transition:all 0.2s;
}
.mini-btn:hover { background:rgba(255,255,255,0.1); border-color:var(--gold); color:var(--gold); }
.mini-btn.active { background:rgba(76,175,80,0.2); border-color:var(--green); color:var(--green); }
.cost { margin-left:auto; color:var(--gold); font-size:13px; }
.empty-msg { color:#666; font-size:13px; line-height:1.5; }

/* INVENTORY */
#invGrid { display:grid; grid-template-columns:repeat(5,1fr); gap:3px; }
.inv-slot {
  aspect-ratio:1; background:rgba(255,255,255,0.05); border:1px solid rgba(255,255,255,0.1);
  border-radius:3px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; font-size:18px; cursor:pointer; position:relative;
  transition:all 0.2s;
}
.inv-slot:hover { border-color:var(--gold); background:rgba(255,215,0,0.08); }
.inv-slot .qty {
  position:absolute; bottom:1px; right:3px; font-size:10px; color:var(--gold);
  font-family:var(--font2);
}

/* ANIMALS */
.animal-card {
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08);
  border-radius:4px; padding:6px 8px; margin-bottom:5px;
  display:flex; align-items:center; gap:8px; font-size:14px; color:#ccc;
}
.animal-hp { flex:1; height:4px; background:rgba(255,255,255,0.1); border-radius:2px; }
.animal-hp-fill { height:100%; background:var(--green); border-radius:2px; transition:width 0.5s; }

/* TOOLBAR */
#toolbar {
  height:68px; background:var(--ui-bg); border-top:2px solid var(--border);
  display:flex; align-items:center; justify-content:center; gap:5px;
  padding:0 14px; flex-shrink:0;
}
.tool-slot {
  width:52px; height:52px; background:rgba(255,255,255,0.06);
  border:2px solid rgba(255,255,255,0.11); border-radius:6px;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  cursor:pointer; font-size:20px; transition:all 0.2s; position:relative;
}
.tool-slot span { font-size:8px; color:#888; font-family:var(--font2); line-height:1; margin-top:2px; }
.tool-slot:hover { border-color:var(--gold); transform:translateY(-3px);
  box-shadow:0 4px 12px rgba(255,215,0,0.2); }
.tool-slot.active { border-color:var(--accent); background:rgba(255,140,0,0.18);
  box-shadow:0 0 14px rgba(255,140,0,0.25); }
.hotkey {
  position:absolute; top:2px; right:3px; font-size:8px;
  color:rgba(255,255,255,0.35); font-family:var(--font2);
}
.divider-v { width:2px; height:40px; background:rgba(255,255,255,0.08); margin:0 4px; }

/* NOTIFICATIONS */
#notifications {
  position:fixed; top:58px; right:12px; z-index:300;
  display:flex; flex-direction:column; gap:5px; pointer-events:none;
}
.notif {
  background:rgba(18,10,4,0.97); border:1px solid var(--gold);
  color:#fff; padding:8px 14px; border-radius:6px; font-size:16px;
  animation: slideIn 0.3s ease, fadeOut 0.4s ease 2.6s forwards;
  max-width:300px;
}
@keyframes slideIn { from{transform:translateX(70px);opacity:0} to{transform:translateX(0);opacity:1} }
@keyframes fadeOut { to{opacity:0;transform:translateX(70px)} }

/* SCROLLBAR */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:rgba(0,0,0,0.3); }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:2px; }

@media (max-width:768px) {
  #rightPanel { width:170px; }
  .tool-slot { width:42px; height:42px; font-size:17px; }
  .login-box { min-width:320px; padding:30px; }
}

/* ── WEATHER / ATMOSPHERE ── */
#weatherIndicator {
  position:absolute; top:10px; right:150px; z-index:50;
  background:rgba(0,0,0,0.7); border:1px solid #3498db;
  padding:4px 10px; border-radius:20px; font-size:14px; color:#aef;
  pointer-events:none; display:none;
}
#weatherIndicator.active { display:block; animation: rainPulse 1s infinite; }
@keyframes rainPulse { 0%,100%{opacity:1} 50%{opacity:0.6} }

/* elevation tint debug overlay hidden by default */

/* ── BUILD BUTTONS ──────────────────── */
.build-btn {
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
  height: auto !important;
  padding: 6px 8px !important;
}
.build-meta {
  font-size: 9px;
  color: #888;
  font-family: 'Press Start 2P', monospace;
  line-height: 1.4;
}
.build-btn:hover .build-meta { color: #aaa; }
.build-btn.active { border-color: #FFB300 !important; background: rgba(255,179,0,0.12) !important; }

/* ── SPRITE INFO OVERLAY ─────────────── */
#spriteInfo {
  position: absolute;
  top: 50px; right: 200px;
  background: rgba(10,5,2,0.85);
  border: 1px solid #FFB300;
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 10px;
  color: #FFD700;
  font-family: 'Press Start 2P', monospace;
  pointer-events: none;
  z-index: 60;
  display: none;
}

/* ── CURSOR HIDE ─────────────────────────────── */
#gameCanvas { /* cursor controlled dynamically by pointer lock */ }
#gameScreen { /* cursor controlled dynamically by pointer lock */ }

/* ── CUSTOM CROSSHAIR cursor drawn on canvas ─── */

/* ── SNOW SEASON badge glow ─────────────────── */
#seasonBadge.winter-season {
  background: rgba(180,220,255,0.15) !important;
  border-color: rgba(180,220,255,0.5) !important;
  color: #B3E5FC !important;
  text-shadow: 0 0 8px #B3E5FC;
}

/* ── MINING progress label ──────────────────── */
.mine-label {
  position:absolute; pointer-events:none;
  font-family:'Press Start 2P',monospace;
  font-size:9px; color:#FFD700;
}

/* ── NPC shop panel in sidebar ──────────────── */
.npc-shop-list { font-size:10px; color:#aaa; line-height:1.9; }
.npc-shop-list span { color:#FFD700; font-family:'Press Start 2P',monospace; }

/* ═══════════════════════════════════════════
   NEW CLEAN HUD — Overlay System
   ═══════════════════════════════════════════ */

/* Hide legacy panels */
#topBar   { display: none !important; }
#gameMain { display: block !important; }
#rightPanel { display: none !important; }
#toolbar  { display: none !important; }

/* Canvas fills entire screen — Three.js needs explicit pixel dimensions */
#gameScreen { position: relative; width: 100vw; height: 100vh; }
#canvasWrap {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  min-width: 320px; min-height: 240px;
}
#gameCanvas {
  display: block;
  width: 100% !important;
  height: 100% !important;
}

/* ── TOP-LEFT: MINIMAP ───────────────────── */
#hudTopLeft {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 50;
  pointer-events: none;
}
#minimapCanvas {
  position: static !important;
  border-radius: 6px;
  border: 2px solid rgba(255,215,0,0.4);
  box-shadow: 0 2px 12px rgba(0,0,0,0.7);
}
#coordsDisplay {
  position: static !important;
  margin-top: 3px;
  font-size: 9px;
  color: rgba(255,255,255,0.4);
  font-family: var(--font2);
  text-align: center;
}

/* ── TOP-RIGHT: SEASON + CLOCK ──────────── */
#hudTopRight {
  position: absolute;
  top: 12px; right: 12px;
  z-index: 50;
  background: rgba(14,8,3,0.82);
  border: 1px solid rgba(255,215,0,0.25);
  border-radius: 8px;
  padding: 8px 14px;
  text-align: right;
  backdrop-filter: blur(4px);
}
#hudSeason {
  font-family: var(--font2);
  font-size: 9px;
  color: var(--gold);
  margin-bottom: 2px;
}
#hudClock {
  font-family: var(--font2);
  font-size: 16px;
  color: #fff;
  letter-spacing: 2px;
}
.hud-btns-row {
  display: flex;
  gap: 5px;
  margin-top: 7px;
  justify-content: flex-end;
}
.hud-btn {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ccc;
  font-size: 14px;
  padding: 4px 8px;
  border-radius: 5px;
  cursor: pointer;
  transition: all 0.15s;
}
.hud-btn:hover { background: rgba(255,215,0,0.15); border-color: var(--gold); color: var(--gold); }
.hud-btn.red:hover { background: rgba(231,76,60,0.25); border-color: var(--red); color: var(--red); }

/* ── BOTTOM-LEFT: PLAYER STATS ──────────── */
#hudBottomLeft {
  position: absolute;
  bottom: 90px; left: 12px;
  z-index: 50;
  background: rgba(14,8,3,0.85);
  border: 1px solid rgba(255,215,0,0.2);
  border-radius: 8px;
  padding: 10px 14px;
  min-width: 180px;
  backdrop-filter: blur(4px);
}
#hudPlayerName {
  font-family: var(--font);
  font-size: 18px;
  color: #fff;
  margin-bottom: 2px;
}
#hudLevel {
  font-family: var(--font2);
  font-size: 8px;
  color: #8e44ad;
  margin-bottom: 8px;
}
.hud-bar-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 5px;
}
.hud-bar-icon { font-size: 13px; width: 16px; flex-shrink: 0; }
.hud-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.1);
  border-radius: 4px;
  overflow: hidden;
}
.hud-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}
.hud-bar-val {
  font-family: var(--font);
  font-size: 12px;
  color: #888;
  min-width: 48px;
  text-align: right;
}
.hud-gold {
  margin-top: 6px;
  font-family: var(--font);
  font-size: 18px;
  color: var(--gold);
}

/* ── BOTTOM-CENTER: HOTBAR ──────────────── */
#hudBottom {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: auto;
}
#activeToolLabel {
  font-family: var(--font);
  font-size: 15px;
  color: rgba(255,255,255,0.65);
  text-shadow: 0 1px 4px #000;
  height: 18px;
  text-align: center;
}
#hotbar9 {
  display: flex;
  gap: 4px;
  background: rgba(14,8,3,0.85);
  border: 1px solid rgba(255,215,0,0.3);
  border-radius: 10px;
  padding: 6px 8px;
  backdrop-filter: blur(6px);
}
.hb-slot {
  width: 54px; height: 54px;
  background: rgba(255,255,255,0.04);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 7px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: all 0.12s;
  position: relative;
  overflow: hidden;
}
.hb-slot:hover {
  border-color: rgba(255,215,0,0.5);
  background: rgba(255,215,0,0.08);
}
.hb-slot.active {
  border-color: var(--gold) !important;
  background: rgba(255,215,0,0.15) !important;
  box-shadow: 0 0 10px rgba(255,215,0,0.3);
}
.hb-slot.empty-qty { opacity: 0.5; }
.hb-icon { font-size: 24px; line-height: 1; }
.hb-num {
  position: absolute;
  top: 2px; right: 4px;
  font-family: var(--font2);
  font-size: 7px;
  color: rgba(255,255,255,0.45);
}
.hb-qty {
  position: absolute;
  bottom: 2px; right: 4px;
  font-family: var(--font2);
  font-size: 7px;
  color: var(--gold);
}
.hb-label {
  font-family: var(--font);
  font-size: 10px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 50px;
  text-align: center;
}
.hb-dur {
  position: absolute;
  bottom: 3px; left: 5px; right: 5px;
  height: 3px;
  background: #333;
  border-radius: 2px;
  overflow: hidden;
}
.hb-dur-fill {
  height: 100%;
  border-radius: 2px;
  transition: width 0.2s;
}
.hud-hints {
  font-family: var(--font);
  font-size: 12px;
  color: rgba(255,255,255,0.3);
  text-align: center;
}

/* ── BOTTOM-RIGHT: ZOOM ─────────────────── */
#zoomControls {
  position: absolute !important;
  bottom: 10px; right: 12px !important;
  left: auto !important;
  z-index: 50;
}

/* ── CONSTRUCTION QUEUE (floating) ─────── */
#constructionQueue {
  position: absolute;
  bottom: 90px; right: 12px;
  z-index: 50;
  max-width: 200px;
}

/* ── INVENTORY MODAL ────────────────────── */
.inv-section-title {
  font-family: var(--font2);
  font-size: 9px;
  color: var(--gold);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255,215,0,0.2);
}
.inv-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.inv-item {
  width: 74px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 7px;
  padding: 8px 4px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
  position: relative;
}
.inv-item:hover {
  border-color: var(--gold);
  background: rgba(255,215,0,0.1);
}
.inv-icon { font-size: 26px; }
.inv-name { font-family: var(--font); font-size: 12px; color: #ccc; margin-top: 2px; }
.inv-qty {
  position: absolute; top: 3px; right: 5px;
  font-family: var(--font2); font-size: 7px; color: var(--gold);
}

/* ── BUILDINGS MODAL ────────────────────── */
.build-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.build-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 8px;
  padding: 12px;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.build-card:hover {
  border-color: var(--gold);
  background: rgba(255,215,0,0.08);
  transform: translateY(-2px);
}
.bc-icon { font-size: 32px; margin-bottom: 4px; }
.bc-name { font-family: var(--font); font-size: 16px; color: #fff; }
.bc-cost { font-family: var(--font2); font-size: 8px; color: var(--gold); margin: 3px 0; }
.bc-meta { font-family: var(--font); font-size: 12px; color: #666; }

/* ── FLOAT + NOTIFICATIONS ──────────────── */
#floatMsg {
  position: absolute;
  top: 40%; left: 50%;
  transform: translateX(-50%);
  z-index: 80;
  pointer-events: none;
}
#notifications {
  position: fixed;
  bottom: 90px; left: 50%;
  transform: translateX(-50%);
  z-index: 300;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  pointer-events: none;
}


/* ═══════════════════════════════════════════
   CHARACTER SELECT SCREEN — AAA RPG
   ═══════════════════════════════════════════ */

/* Shared bg for both screens */
.cs-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 15% 85%, rgba(20,80,30,0.5) 0%, transparent 50%),
    radial-gradient(ellipse at 85% 15%, rgba(10,40,80,0.35) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(15,40,20,0.3) 0%, transparent 60%),
    linear-gradient(160deg, #060d06 0%, #08130a 40%, #060a10 100%);
  overflow: hidden;
}
.cs-bg::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 20% 20%, rgba(80,200,80,0.018) 1px, transparent 1px),
    radial-gradient(circle at 80% 80%, rgba(80,150,200,0.015) 1px, transparent 1px);
  background-size: 50px 50px, 70px 70px;
}

#charSelectScreen {
  flex-direction: column; align-items: stretch;
  cursor: default !important;
}
#charSelectScreen * { cursor: default; }

/* Header */
.cs-container {
  position: relative; z-index: 10;
  display: flex; flex-direction: column;
  height: 100vh; padding: 0;
}
.cs-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 48px 16px;
  border-bottom: 1px solid rgba(100,180,60,0.1);
  background: linear-gradient(180deg, rgba(0,0,0,0.7) 0%, transparent 100%);
  backdrop-filter: blur(16px);
  flex-shrink: 0;
}
.cs-title {
  font-family: var(--font3);
  font-size: 22px; font-weight: 700;
  color: var(--gold);
  text-shadow: 0 0 30px rgba(232,197,71,0.5), 0 0 60px rgba(232,197,71,0.2);
  letter-spacing: 4px;
}
.cs-welcome {
  font-family: var(--font);
  font-size: 16px; font-weight: 300;
  color: rgba(160,220,120,0.7);
  margin-top: 3px; letter-spacing: 1px;
}
.cs-header-right { display: flex; align-items: center; gap: 14px; }
.cs-status {
  font-family: var(--font2); font-size: 9px; font-weight: 600;
  padding: 6px 16px; letter-spacing: 2px;
  background: rgba(80,180,60,0.08);
  border: 1px solid rgba(100,200,70,0.22);
  border-radius: 20px; color: rgba(120,220,80,0.9);
  text-shadow: 0 0 10px rgba(100,200,60,0.3);
}
.cs-logout-btn {
  padding: 9px 22px;
  background: rgba(180,50,40,0.1);
  border: 1px solid rgba(180,50,40,0.3);
  color: rgba(220,90,80,0.8);
  border-radius: 4px;
  font-family: var(--font2); font-size: 10px; font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer !important;
  transition: all 0.2s;
}
.cs-logout-btn:hover {
  background: rgba(180,50,40,0.22);
  border-color: rgba(220,80,70,0.55);
  color: #fff;
}

/* Subtitle under header */
.cs-subheader {
  text-align: center;
  padding: 16px 0 0;
  font-family: var(--font2);
  font-size: 10px; font-weight: 400;
  letter-spacing: 4px;
  color: rgba(100,160,70,0.35);
}

/* Slots grid */
.cs-slots-grid {
  display: flex; gap: 24px;
  flex: 1; align-items: center;
  justify-content: center;
  padding: 24px 48px;
  overflow-x: auto;
}
.cs-loading {
  font-family: var(--font2); font-size: 13px; letter-spacing: 4px;
  color: rgba(100,180,60,0.4);
  animation: cs-pulse 1.5s ease-in-out infinite;
}
@keyframes cs-pulse { 0%,100%{opacity:0.4} 50%{opacity:1} }

/* Slot card */
.cs-slot {
  width: 200px; min-height: 320px;
  background: linear-gradient(160deg,
    rgba(8,18,8,0.96) 0%,
    rgba(5,12,5,0.98) 100%);
  border: 1px solid rgba(100,180,60,0.14);
  border-radius: 2px;
  display: flex; flex-direction: column;
  align-items: center; padding: 0;
  transition: all 0.35s cubic-bezier(0.23,1,0.32,1);
  position: relative; overflow: hidden;
  flex-shrink: 0;
  box-shadow: 0 8px 40px rgba(0,0,0,0.7), inset 0 1px 0 rgba(100,180,60,0.06);
}
.cs-slot::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(100,200,60,0.35) 30%,
    rgba(232,197,71,0.3) 50%,
    rgba(100,200,60,0.35) 70%, transparent 100%);
}
.cs-slot:hover {
  border-color: rgba(120,210,70,0.38);
  transform: translateY(-8px) scale(1.02);
  box-shadow: 0 24px 70px rgba(0,0,0,0.75),
    0 0 40px rgba(100,200,60,0.07),
    inset 0 1px 0 rgba(120,210,70,0.12);
}
.cs-slot:hover::after {
  background: linear-gradient(90deg,
    transparent 0%, rgba(120,220,70,0.6) 30%,
    rgba(232,197,71,0.55) 50%,
    rgba(120,220,70,0.6) 70%, transparent 100%);
}

/* Slot top bar */
.cs-slot-topbar {
  width: 100%; padding: 9px 14px;
  background: rgba(100,180,60,0.06);
  border-bottom: 1px solid rgba(100,180,60,0.08);
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.cs-slot-num {
  font-family: var(--font2); font-size: 7px; font-weight: 600;
  color: rgba(100,180,60,0.35); letter-spacing: 2px;
}
.cs-slot-level {
  font-family: var(--font2); font-size: 7px; font-weight: 600;
  color: var(--gold); letter-spacing: 1px;
}

/* Canvas preview */
.cs-slot-canvas-wrap {
  width: 100%; height: 176px;
  background: linear-gradient(180deg,
    rgba(10,22,10,0.7) 0%, rgba(5,12,5,0.9) 100%);
  overflow: hidden; position: relative;
  border-bottom: 1px solid rgba(100,180,60,0.06);
}
.cs-slot-canvas-wrap::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0; height: 48px;
  background: linear-gradient(0deg, rgba(5,12,5,0.95) 0%, transparent 100%);
  z-index: 1; pointer-events: none;
}
.cs-mini-canvas { width: 100%; height: 176px; display: block; }

/* Slot info */
.cs-slot-info {
  width: 100%; padding: 12px 14px 10px;
  flex: 1;
}
.cs-char-name {
  font-family: var(--font2); font-size: 11px; font-weight: 600;
  color: rgba(220,250,200,0.95); letter-spacing: 2px;
  text-shadow: 0 0 12px rgba(120,220,80,0.2);
  margin-bottom: 8px;
}
.cs-divider {
  width: 100%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(100,180,60,0.18), transparent);
  margin: 8px 0;
}
.cs-char-meta {
  font-family: var(--font); font-size: 13px; font-weight: 300;
  color: rgba(140,190,100,0.55);
  margin-bottom: 3px; line-height: 1.5; letter-spacing: 0.3px;
}

/* Slot buttons */
.cs-slot-btns {
  display: flex; gap: 0; width: 100%;
  border-top: 1px solid rgba(100,180,60,0.08); flex-shrink: 0;
}
.cs-btn {
  flex: 1; padding: 12px 4px;
  font-family: var(--font2); font-size: 8px; font-weight: 600;
  letter-spacing: 1px;
  cursor: pointer !important; transition: all 0.15s;
  border: none; border-right: 1px solid rgba(100,180,60,0.08);
}
.cs-btn:last-child { border-right: none; }
.cs-btn-play {
  background: rgba(80,160,50,0.1);
  color: rgba(140,220,90,0.8); flex: 2;
}
.cs-btn-play:hover { background: rgba(80,180,50,0.2); color: rgba(200,255,150,0.95); }
.cs-btn-del {
  background: rgba(160,40,30,0.06);
  color: rgba(200,70,60,0.6); flex: 0.7;
}
.cs-btn-del:hover { background: rgba(180,40,30,0.18); color: rgba(230,90,80,0.9); }

/* Empty slot */
.cs-slot.cs-empty {
  border-color: rgba(100,180,60,0.06);
  background: rgba(5,10,5,0.5);
  justify-content: center; min-height: 290px;
  cursor: pointer !important;
}
.cs-slot.cs-empty:hover {
  border-color: rgba(120,200,70,0.25);
  background: rgba(10,22,10,0.6);
}
.cs-empty-icon {
  font-size: 36px; color: rgba(100,180,60,0.1);
  margin-bottom: 14px; transition: all 0.3s; line-height: 1;
}
.cs-slot.cs-empty:hover .cs-empty-icon {
  color: rgba(120,210,70,0.28); transform: scale(1.12);
}
.cs-empty-label {
  font-family: var(--font2); font-size: 8px; font-weight: 600;
  color: rgba(100,180,60,0.2); text-align: center;
  margin-bottom: 20px; letter-spacing: 2px;
}
.cs-btn-new {
  width: calc(100% - 32px); padding: 12px;
  background: rgba(80,160,50,0.07);
  border: 1px solid rgba(100,180,60,0.18);
  color: rgba(120,200,70,0.65);
  border-radius: 3px;
  font-family: var(--font2); font-size: 8px; font-weight: 600;
  letter-spacing: 2px;
  cursor: pointer !important; transition: all 0.2s;
}
.cs-btn-new:hover {
  background: rgba(90,180,55,0.16);
  border-color: rgba(130,220,80,0.4);
  color: rgba(180,240,120,0.9);
}

/* Footer */
.cs-footer {
  text-align: center; padding: 14px;
  font-family: var(--font); font-size: 12px; font-weight: 300;
  color: rgba(255,255,255,0.12);
  border-top: 1px solid rgba(100,180,60,0.05);
  letter-spacing: 3px;
}

/* Delete dialog */
.cs-dialog-overlay {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.85);
  backdrop-filter: blur(10px);
  z-index: 1000; align-items: center; justify-content: center;
}
.cs-dialog-overlay.active { display: flex; }
.cs-dialog {
  background: linear-gradient(135deg, #080e08 0%, #050a05 100%);
  border: 1px solid rgba(200,70,60,0.28);
  border-radius: 3px; padding: 36px;
  max-width: 400px; width: 90%;
  box-shadow: 0 0 80px rgba(180,40,30,0.12);
}
.cs-dialog-title {
  font-family: var(--font2); font-size: 11px; font-weight: 600;
  color: rgba(220,80,70,0.9); letter-spacing: 2px; margin-bottom: 16px;
}
.cs-dialog-msg {
  font-family: var(--font); font-size: 16px; font-weight: 300;
  color: rgba(180,180,180,0.8); line-height: 1.7; margin-bottom: 24px;
}
.cs-dialog-btns { display: flex; gap: 10px; }
.cs-btn-cancel {
  background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1);
  color: rgba(160,160,160,0.7); border-radius: 3px;
  font-family: var(--font2); font-size: 8px; font-weight: 600;
  letter-spacing: 2px; padding: 10px 20px; cursor: pointer !important;
  transition: all 0.15s;
}
.cs-btn-cancel:hover { background: rgba(255,255,255,0.1); color: #fff; }

/* ══════════════════════════════════════════
   CHARACTER CREATE SCREEN — SKYSAGA STYLE
   ══════════════════════════════════════════ */

#charCreateScreen {
  flex-direction: row !important;
  cursor: default !important;
  align-items: stretch;
}
#charCreateScreen * { cursor: default; }
#charCreateScreen input,
#charCreateScreen button { cursor: pointer !important; }

/* Background — blurred fantasy world */
.cc-bg {
  position: absolute; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 60%, rgba(20,100,180,0.4) 0%, transparent 55%),
    radial-gradient(ellipse at 70% 30%, rgba(40,120,60,0.3) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(80,40,120,0.2) 0%, transparent 40%),
    linear-gradient(160deg, #0e1a2e 0%, #0a1f12 45%, #0c1428 100%);
  overflow: hidden;
}
.cc-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(circle at 25% 75%, rgba(255,255,255,0.015) 1px, transparent 1px),
    radial-gradient(circle at 75% 25%, rgba(255,255,255,0.01) 1px, transparent 1px);
  background-size: 40px 40px, 60px 60px;
}

/* ── LEFT STAGE — big character ──────────────── */
.cc-stage {
  flex: 1;
  display: flex; align-items: center; justify-content: center;
  position: relative; z-index: 10;
  min-width: 0;
}
.cc-stage-inner {
  position: relative;
  display: flex; align-items: flex-end; justify-content: center;
}
#charPreviewCanvas {
  width: 340px; height: 500px;
  display: block;
  filter: drop-shadow(0 30px 80px rgba(0,0,0,0.9)) drop-shadow(0 0 40px rgba(80,180,255,0.08));
}
.cc-stage-shadow {
  position: absolute; bottom: -10px; left: 50%;
  transform: translateX(-50%);
  width: 200px; height: 28px;
  background: radial-gradient(ellipse, rgba(0,0,0,0.6) 0%, transparent 70%);
  border-radius: 50%;
}

/* ── RIGHT PANEL — SkySaga parchment style ───── */
.cc-panel {
  width: 440px; flex-shrink: 0;
  display: flex; flex-direction: column;
  position: relative; z-index: 10;
  background: linear-gradient(170deg,
    rgba(12,20,35,0.97) 0%,
    rgba(10,22,32,0.98) 50%,
    rgba(8,16,28,0.99) 100%);
  border-left: 2px solid rgba(100,160,220,0.2);
  box-shadow: -20px 0 60px rgba(0,0,0,0.5);
  overflow: hidden;
}

/* Panel top border glow */
.cc-panel::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg,
    transparent 0%, rgba(80,160,240,0.5) 30%,
    rgba(160,220,255,0.8) 50%,
    rgba(80,160,240,0.5) 70%, transparent 100%);
}

/* Panel header */
.cc-panel-head {
  display: flex; align-items: center;
  padding: 20px 24px 16px;
  border-bottom: 1px solid rgba(80,140,200,0.2);
  background: linear-gradient(180deg, rgba(20,40,70,0.6) 0%, transparent 100%);
  gap: 12px;
  flex-shrink: 0;
}
.cc-panel-ornament {
  font-size: 22px;
  color: rgba(120,180,240,0.5);
  line-height: 1; flex-shrink: 0;
}
.cc-panel-ornament.right { transform: scaleX(-1); }
.cc-panel-title-wrap { flex: 1; text-align: center; }
.cc-panel-subtitle {
  font-family: var(--font2); font-size: 7px;
  letter-spacing: 4px;
  color: rgba(100,160,220,0.5);
  margin-bottom: 3px;
}
.cc-panel-title {
  font-family: var(--font2); font-size: 13px;
  letter-spacing: 3px;
  color: rgba(200,230,255,0.9);
  text-shadow: 0 0 20px rgba(80,160,255,0.4), 0 2px 4px rgba(0,0,0,0.8);
}

/* Panel body */
.cc-panel-body {
  flex: 1; overflow-y: auto;
  padding: 8px 0;
}
.cc-panel-body::-webkit-scrollbar { width: 4px; }
.cc-panel-body::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); }
.cc-panel-body::-webkit-scrollbar-thumb {
  background: rgba(80,140,200,0.3); border-radius: 2px;
}

/* ── FIELD ROWS — SkySaga style ───────────────
   Each row: LABEL: | ◀ | item item item | ▶ | counter
   ─────────────────────────────────────────── */
.cc-field-row {
  display: flex; align-items: center;
  padding: 0 20px;
  min-height: 54px;
  border-bottom: 1px solid rgba(80,120,180,0.1);
  gap: 10px;
  transition: background 0.15s;
}
.cc-field-row:hover { background: rgba(80,140,220,0.04); }
.cc-field-row:last-child { border-bottom: none; }

.cc-field-label {
  font-family: var(--font2); font-size: 8px;
  letter-spacing: 2px;
  color: rgba(140,190,240,0.75);
  white-space: nowrap;
  min-width: 100px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}
.cc-field-label.full { min-width: unset; flex: 1; }

/* Arrow navigation buttons */
.cc-arr {
  width: 22px; height: 22px;
  background: rgba(80,130,200,0.1);
  border: 1px solid rgba(80,130,200,0.25);
  border-radius: 3px;
  color: rgba(140,190,240,0.6);
  font-size: 11px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer !important;
  transition: all 0.15s;
  flex-shrink: 0;
}
.cc-arr:hover {
  background: rgba(80,150,220,0.2);
  border-color: rgba(100,170,240,0.5);
  color: rgba(200,230,255,0.9);
}

/* Swatches strip inside a row */
.cc-row-swatches {
  display: flex; gap: 5px; align-items: center;
  flex: 1; flex-wrap: wrap;
}
.cc-dot {
  width: 24px; height: 24px; border-radius: 50%;
  cursor: pointer !important;
  border: 2px solid rgba(0,0,0,0.4);
  transition: all 0.15s;
  flex-shrink: 0;
  box-shadow: 0 2px 4px rgba(0,0,0,0.5);
}
.cc-dot:hover { transform: scale(1.18); box-shadow: 0 3px 8px rgba(0,0,0,0.6); }
.cc-dot.active {
  border-color: rgba(255,255,255,0.85);
  transform: scale(1.28);
  box-shadow: 0 0 10px rgba(255,255,255,0.3), 0 3px 8px rgba(0,0,0,0.6);
}

/* Text option pills in row */
.cc-row-opts {
  display: flex; gap: 5px; align-items: center;
  flex: 1; flex-wrap: wrap;
}
.cc-row-pill {
  padding: 5px 12px;
  background: rgba(80,120,180,0.08);
  border: 1px solid rgba(80,130,200,0.18);
  border-radius: 3px;
  font-family: var(--font); font-size: 13px;
  color: rgba(130,180,230,0.6);
  cursor: pointer !important;
  transition: all 0.15s; letter-spacing: 1px;
  white-space: nowrap;
}
.cc-row-pill:hover {
  border-color: rgba(100,160,240,0.4);
  color: rgba(180,220,255,0.85);
  background: rgba(60,110,200,0.12);
}
.cc-row-pill.active {
  border-color: rgba(100,170,255,0.6);
  background: rgba(60,120,220,0.18);
  color: rgba(190,225,255,0.95);
  box-shadow: 0 0 10px rgba(60,130,240,0.1);
}

/* Counter badge (1/3 etc) */
.cc-counter {
  font-family: var(--font2); font-size: 7px;
  color: rgba(100,150,200,0.5);
  letter-spacing: 1px;
  min-width: 24px; text-align: right;
  flex-shrink: 0;
}

/* Separator between sections */
.cc-separator {
  display: flex; align-items: center;
  padding: 10px 20px 6px;
  gap: 8px;
}
.cc-separator-line {
  flex: 1; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(80,140,200,0.2), transparent);
}
.cc-separator-label {
  font-family: var(--font2); font-size: 7px;
  letter-spacing: 3px;
  color: rgba(80,140,200,0.4);
  white-space: nowrap;
}

/* ── PANEL FOOTER ─────────────────────────────── */
.cc-panel-footer {
  padding: 14px 20px 16px;
  border-top: 1px solid rgba(80,140,200,0.15);
  background: linear-gradient(0deg, rgba(8,14,26,0.95) 0%, transparent 100%);
  flex-shrink: 0;
}
.cc-name-row {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 10px;
}
.cc-name-field {
  flex: 1; padding: 9px 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(80,130,200,0.25);
  border-radius: 3px;
  color: rgba(190,220,255,0.9);
  font-family: var(--font); font-size: 15px;
  letter-spacing: 1px;
  transition: all 0.2s;
}
.cc-name-field:focus {
  outline: none;
  border-color: rgba(80,160,240,0.55);
  background: rgba(50,100,200,0.06);
  box-shadow: 0 0 0 3px rgba(60,120,220,0.07);
}
.cc-name-field::placeholder { color: rgba(80,130,200,0.3); }
.cc-error-msg {
  font-family: var(--font); font-size: 13px;
  color: rgba(220,80,70,0.9);
  margin-bottom: 8px; letter-spacing: 1px;
}
.cc-footer-btns {
  display: flex; gap: 8px;
}
.cc-btn {
  flex: 1; padding: 11px 8px;
  font-family: var(--font2); font-size: 8px;
  letter-spacing: 2px;
  border-radius: 3px;
  cursor: pointer !important;
  transition: all 0.2s;
  border: 1px solid;
}
.cc-btn-cancel {
  background: rgba(150,50,40,0.1);
  border-color: rgba(160,60,50,0.35);
  color: rgba(210,100,90,0.8);
  flex: 0.7;
}
.cc-btn-cancel:hover {
  background: rgba(160,50,40,0.22);
  border-color: rgba(200,80,70,0.55);
  color: rgba(240,130,120,0.95);
}
.cc-btn-random {
  background: rgba(120,80,160,0.1);
  border-color: rgba(140,90,180,0.3);
  color: rgba(180,140,220,0.75);
  flex: 0.9;
}
.cc-btn-random:hover {
  background: rgba(130,90,170,0.2);
  border-color: rgba(160,110,210,0.5);
  color: rgba(210,180,255,0.95);
}
.cc-btn-confirm {
  background: linear-gradient(135deg, rgba(40,120,200,0.28) 0%, rgba(30,90,160,0.35) 100%);
  border-color: rgba(70,150,240,0.5);
  color: rgba(160,210,255,0.95);
  box-shadow: 0 0 16px rgba(50,120,220,0.12);
  flex: 1.1;
}
.cc-btn-confirm:hover {
  background: linear-gradient(135deg, rgba(50,140,220,0.38) 0%, rgba(40,110,190,0.45) 100%);
  border-color: rgba(90,170,255,0.7);
  color: #fff;
  box-shadow: 0 0 24px rgba(60,140,240,0.2);
  transform: translateY(-1px);
}

/* Legacy classes kept for compatibility */
.cc-section { margin-bottom: 4px; }
.cc-label, .cc-section-title {
  font-family: var(--font2); font-size: 8px;
  letter-spacing: 2px; color: rgba(100,150,200,0.5);
  display: block; padding: 8px 20px 4px;
}
.cc-options { display: flex; flex-wrap: wrap; gap: 5px; padding: 4px 20px 8px; }
.cc-opt {
  padding: 6px 13px;
  background: rgba(80,120,180,0.08);
  border: 1px solid rgba(80,130,200,0.18);
  border-radius: 3px; font-family: var(--font); font-size: 13px;
  color: rgba(130,180,230,0.55); cursor: pointer !important; transition: all 0.15s;
}
.cc-opt:hover { border-color: rgba(100,160,240,0.4); color: rgba(180,220,255,0.85); background: rgba(60,110,200,0.1); }
.cc-opt.active, .cc-opt.selected { border-color: rgba(100,170,255,0.6); background: rgba(60,120,220,0.18); color: rgba(190,225,255,0.95); }
.cc-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 20px 8px; }
.cc-swatch { width: 24px; height: 24px; border-radius: 50%; cursor: pointer !important; border: 2px solid rgba(0,0,0,0.4); transition: all 0.15s; box-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.cc-swatch:hover { transform: scale(1.18); }
.cc-swatch.active { border-color: rgba(255,255,255,0.85); transform: scale(1.25); box-shadow: 0 0 8px rgba(255,255,255,0.25); }
.cc-pill { padding: 6px 14px; background: rgba(80,120,180,0.08); border: 1px solid rgba(80,130,200,0.18); border-radius: 3px; font-family: var(--font); font-size: 13px; color: rgba(130,180,230,0.55); cursor: pointer !important; transition: all 0.15s; }
.cc-pill:hover { border-color: rgba(100,160,240,0.4); color: rgba(180,220,255,0.85); }
.cc-pill.active { border-color: rgba(100,170,255,0.6); background: rgba(60,120,220,0.18); color: rgba(190,225,255,0.95); }
.cc-row { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 20px 8px; }
.cc-input { width: 100%; padding: 9px 14px; background: rgba(255,255,255,0.04); border: 1px solid rgba(80,130,200,0.22); border-radius: 3px; color: rgba(190,220,255,0.9); font-family: var(--font); font-size: 15px; transition: all 0.2s; box-sizing: border-box; }
.cc-input:focus { outline: none; border-color: rgba(80,160,240,0.5); }
.cc-input::placeholder { color: rgba(80,130,200,0.3); }
.cc-card-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; padding: 4px 20px 8px; }
.cc-card { padding: 10px; background: rgba(80,120,180,0.06); border: 1px solid rgba(80,130,200,0.15); border-radius: 4px; cursor: pointer !important; transition: all 0.15s; }
.cc-card:hover { border-color: rgba(100,160,240,0.35); background: rgba(60,110,200,0.1); }
.cc-card.active { border-color: rgba(100,170,255,0.6); background: rgba(60,120,220,0.16); }
.cc-card.locked { opacity: 0.35; cursor: not-allowed !important; }
.cc-card-title { font-family: var(--font2); font-size: 8px; color: rgba(150,200,240,0.7); letter-spacing: 1px; }
.cc-card-desc { font-family: var(--font); font-size: 11px; color: rgba(100,150,200,0.45); margin-top: 3px; }
.cc-lock { font-size: 10px; opacity: 0.5; }
.cc-world-title { font-family: var(--font2); font-size: 8px; letter-spacing: 2px; color: rgba(100,150,200,0.5); }
.cc-world-desc { font-family: var(--font); font-size: 13px; color: rgba(110,160,210,0.5); margin-top: 5px; line-height: 1.6; }
.cc-error { font-family: var(--font); font-size: 13px; color: rgba(220,80,70,0.85); }
.cc-color-opt { width: 24px; height: 24px; border-radius: 50%; cursor: pointer !important; border: 2px solid rgba(0,0,0,0.4); transition: all 0.15s; }
.cc-color-opt:hover { transform: scale(1.18); }
.cc-color-opt.selected { border-color: rgba(255,255,255,0.85); transform: scale(1.25); }
.cc-confirm-btn { width: 100%; padding: 12px; background: linear-gradient(135deg,rgba(40,120,200,0.28) 0%,rgba(30,90,160,0.35) 100%); border: 1px solid rgba(70,150,240,0.5); color: rgba(160,210,255,0.95); border-radius: 3px; font-family: var(--font2); font-size: 9px; letter-spacing: 3px; cursor: pointer !important; transition: all 0.25s; }
.cc-confirm-btn:hover { background: linear-gradient(135deg,rgba(50,140,220,0.38) 0%,rgba(40,110,190,0.45) 100%); border-color: rgba(90,170,255,0.7); color: #fff; }
.cc-name-wrap { width: 100%; padding: 0 20px; }
.cc-name-label { font-family: var(--font2); font-size: 8px; letter-spacing: 2px; color: rgba(100,150,200,0.5); display: block; margin-bottom: 6px; }

/* ── FPS Counter ──────────────────────────────── */
/* FPS Counter */
#fpsCounter {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%);
  color: #0f0; font-family: monospace; font-size: 11px;
  z-index: 999; pointer-events: none; display: none;
  text-shadow: 1px 1px 2px #000;
}

/* ── Character Creator — classes extras ──────────────────── */
.cc-label {
  font-family: var(--font2); font-size: 8px;
  color: rgba(76,175,80,0.45);
  letter-spacing: 2px;
  margin-bottom: 10px;
  display: block;
}
.cc-row {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 4px;
}
.cc-pill {
  padding: 7px 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(76,175,80,0.15);
  border-radius: 20px;
  font-family: var(--font); font-size: 14px;
  color: rgba(150,200,150,0.6);
  cursor: pointer !important;
  transition: all 0.15s; letter-spacing: 1px;
}
.cc-pill:hover {
  border-color: rgba(76,175,80,0.35);
  color: rgba(180,240,180,0.8);
  background: rgba(76,175,80,0.07);
}
.cc-pill.active {
  border-color: rgba(76,175,80,0.6);
  background: rgba(76,175,80,0.14);
  color: rgba(180,240,180,0.95);
}
.cc-opt.active {
  border-color: rgba(76,175,80,0.6);
  background: rgba(76,175,80,0.12);
  color: rgba(180,240,180,0.95);
  box-shadow: 0 0 12px rgba(76,175,80,0.1);
}
.cc-swatches {
  display: flex; flex-wrap: wrap; gap: 8px;
  align-items: center;
}
.cc-swatch {
  width: 28px; height: 28px;
  border-radius: 50%;
  cursor: pointer !important;
  border: 2px solid rgba(0,0,0,0.4);
  transition: all 0.15s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.cc-swatch:hover { transform: scale(1.18); box-shadow: 0 4px 10px rgba(0,0,0,0.6); }
.cc-swatch.active {
  border-color: rgba(255,255,255,0.8);
  transform: scale(1.22);
  box-shadow: 0 0 10px rgba(255,255,255,0.25);
}

/* Outfit / item cards */
.cc-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 8px;
}
.cc-card {
  padding: 10px 10px 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(76,175,80,0.12);
  border-radius: 4px;
  cursor: pointer !important;
  transition: all 0.15s;
  position: relative;
}
.cc-card:hover {
  border-color: rgba(76,175,80,0.3);
  background: rgba(76,175,80,0.06);
}
.cc-card.active {
  border-color: rgba(76,175,80,0.55);
  background: rgba(76,175,80,0.1);
  box-shadow: 0 0 14px rgba(76,175,80,0.08);
}
.cc-card.locked {
  opacity: 0.45; cursor: not-allowed !important;
}
.cc-card-title {
  font-family: var(--font2); font-size: 8px;
  color: rgba(180,230,180,0.8);
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.cc-card-desc {
  font-family: var(--font); font-size: 12px;
  color: rgba(120,170,120,0.5);
  line-height: 1.4;
}
.cc-lock {
  position: absolute; top: 6px; right: 6px;
  font-size: 12px; opacity: 0.6;
}

/* World name input on creator */
.cc-world-title {
  font-family: var(--font2); font-size: 8px;
  color: rgba(76,175,80,0.45);
  letter-spacing: 2px; margin-bottom: 8px;
}
.cc-world-desc {
  font-family: var(--font); font-size: 13px;
  color: rgba(120,170,120,0.5);
  margin-top: 6px; line-height: 1.5;
}