/* ═══════════ DESIGN TOKENS ═══════════ */
  :root{
    --bg-primary:#06060e; --bg-secondary:#0c0c1a;
    --bg-card:rgba(255,255,255,.025); --bg-card-hover:rgba(255,255,255,.055); --bg-input:rgba(255,255,255,.04);
    --attack:#00e676; --attack-dim:rgba(0,230,118,.08); --attack-glow:rgba(0,230,118,.25); --attack-deep:#00c853;
    --midfield:#ffab00; --midfield-dim:rgba(255,171,0,.08); --midfield-glow:rgba(255,171,0,.25); --midfield-deep:#ff8f00;
    --defensive:#ef5350; --defensive-dim:rgba(239,83,80,.08); --defensive-glow:rgba(239,83,80,.25); --defensive-deep:#d32f2f;
    --king:#7c4dff; --king-dim:rgba(124,77,255,.08); --king-glow:rgba(124,77,255,.3); --king-deep:#651fff;
    --lime:#bdff00; --lime-dim:rgba(189,255,0,.10); --lime-glow:rgba(189,255,0,.4); --lime-deep:#8fbf00;
    --text-primary:#eeeef5; --text-secondary:#8888a0; --text-dim:#555570;
    --border:rgba(255,255,255,.06); --border-hover:rgba(255,255,255,.12);
    --radius:12px; --radius-sm:8px; --radius-lg:20px;
    --shadow:0 4px 30px rgba(0,0,0,.4); --transition:.3s cubic-bezier(.4,0,.2,1);
  }
  *,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
  html{scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
  body{font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;background:var(--bg-primary);color:var(--text-primary);line-height:1.6;min-height:100vh;overflow-x:hidden}
  #app{position:relative;min-height:100vh}

  /* ═══════════ AMBIENT BG ═══════════ */
  .ambient-bg{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
  .orb{position:absolute;border-radius:50%;filter:blur(80px);opacity:.13;animation:orbFloat 20s ease-in-out infinite;will-change:transform}
  .orb-1{width:500px;height:500px;background:var(--king);top:-10%;left:-5%}
  .orb-2{width:400px;height:400px;background:var(--attack);top:40%;right:-10%;animation-delay:-7s;animation-duration:25s}
  .orb-3{width:350px;height:350px;background:var(--midfield);bottom:-5%;left:30%;animation-delay:-14s;animation-duration:22s}
  .orb-4{width:300px;height:300px;background:var(--defensive);top:60%;left:-8%;animation-delay:-5s;animation-duration:28s}
  @keyframes orbFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(60px,-40px) scale(1.1)}50%{transform:translate(-30px,50px) scale(.95)}75%{transform:translate(40px,20px) scale(1.05)}}

  /* ═══════════ TOPBAR ═══════════ */
  .topbar{position:sticky;top:0;z-index:100;background:rgba(6,6,14,.85);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--border)}
  .topbar-inner{max-width:1400px;margin:0 auto;padding:0 24px;display:flex;align-items:center;justify-content:space-between;min-height:72px;gap:24px;flex-wrap:wrap}
  .brand{display:flex;align-items:center;gap:12px;flex-shrink:0}
  .brand-crown{font-size:28px;animation:crownPulse 3s ease-in-out infinite}
  @keyframes crownPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 0 4px var(--king-glow))}50%{transform:scale(1.1);filter:drop-shadow(0 0 12px var(--king-glow))}}
  .brand-title{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;letter-spacing:2px;background:linear-gradient(135deg,var(--king),#b388ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .brand-sub{font-size:11px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}
  .v2-pill{display:inline-block;margin-left:8px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:var(--attack);border:1px solid var(--attack);border-radius:100px;padding:1px 8px;vertical-align:middle}
  .tabs{display:flex;gap:4px;background:rgba(255,255,255,.03);border-radius:var(--radius);padding:4px;overflow-x:auto}
  .tab{background:none;border:none;color:var(--text-secondary);font-family:'Inter',sans-serif;font-size:13px;font-weight:600;padding:10px 18px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);white-space:nowrap}
  .tab:hover{color:var(--text-primary);background:rgba(255,255,255,.05)}
  .tab.active{color:#fff;background:rgba(124,77,255,.2);box-shadow:0 0 20px rgba(124,77,255,.15)}
  .tab-icon{margin-right:6px}
  /* The Game — lime 3D pop button (stands out from the flat tabs) */
  .tab-game{color:var(--lime);font-weight:800;background:linear-gradient(180deg,rgba(189,255,0,.16),rgba(189,255,0,.05));border:1px solid rgba(189,255,0,.45);box-shadow:0 3px 0 var(--lime-deep),0 6px 14px rgba(189,255,0,.2);transition:transform .16s cubic-bezier(.34,1.56,.64,1),box-shadow .18s,background .18s}
  .tab-game .tab-icon{filter:drop-shadow(0 0 5px var(--lime-glow))}
  .tab-game{display:flex;align-items:center;padding:6px 16px}
  .tab-game-logo{height:22px;width:auto;display:block;object-fit:contain;filter:drop-shadow(0 0 5px var(--lime-glow));transition:filter .18s}
  .tab-game:hover .tab-game-logo{filter:drop-shadow(0 0 9px var(--lime-glow))}
  .tab-game:hover{color:#eaffb0;background:linear-gradient(180deg,rgba(189,255,0,.28),rgba(189,255,0,.08));transform:translateY(-3px);box-shadow:0 6px 0 var(--lime-deep),0 12px 24px rgba(189,255,0,.32)}
  .tab-game:active{transform:translateY(1px);box-shadow:0 2px 0 var(--lime-deep),0 4px 10px rgba(189,255,0,.2)}
  .tab-game.active{color:#0a0f00;background:linear-gradient(180deg,var(--lime),var(--lime-deep));border-color:var(--lime);box-shadow:0 3px 0 var(--lime-deep),0 0 26px var(--lime-glow)}
  .tab-game.active .tab-icon{filter:drop-shadow(0 0 3px rgba(0,0,0,.4))}

  /* ═══════════ CONTENT ═══════════ */
  .content{position:relative;z-index:1;max-width:1400px;margin:0 auto;padding:32px 24px 60px}
  .page{display:none;animation:fadeIn .4s ease}
  .page.active{display:block}
  @keyframes fadeIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}

  .hero{text-align:center;padding:50px 20px 36px}
  .hero-sm{padding:40px 20px 28px}
  .hero-badge{display:inline-block;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:3px;color:var(--king);border:1px solid rgba(124,77,255,.3);padding:6px 20px;border-radius:100px;margin-bottom:20px;animation:badgeGlow 4s ease-in-out infinite}
  @keyframes badgeGlow{0%,100%{box-shadow:0 0 10px rgba(124,77,255,.1)}50%{box-shadow:0 0 25px rgba(124,77,255,.25)}}
  .hero-title{font-family:'Orbitron',sans-serif;font-size:clamp(28px,5vw,48px);font-weight:900;line-height:1.2;margin-bottom:16px;background:linear-gradient(135deg,#fff 0%,#b0b0c0 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .hero-subtitle{font-size:16px;color:var(--text-secondary);max-width:680px;margin:0 auto;line-height:1.7}

  .stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:48px}
  .stat-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;text-align:center;transition:var(--transition)}
  .stat-card:hover{background:var(--bg-card-hover);border-color:var(--border-hover);transform:translateY(-2px)}
  .stat-value{display:block;font-family:'Orbitron',sans-serif;font-size:24px;font-weight:700;color:#fff;margin-bottom:4px}
  .stat-label{font-size:12px;color:var(--text-dim);text-transform:uppercase;letter-spacing:1px}
  .stat-card.accent-king{border-color:rgba(124,77,255,.3);background:var(--king-dim)}
  .stat-card.accent-king .stat-value{color:var(--king)}

  .section-header{margin-bottom:24px;display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:12px}
  .section-header h3{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:700;letter-spacing:1px;margin-bottom:4px}
  .section-header p{color:var(--text-dim);font-size:14px}

  /* ═══════════ FORMATION ═══════════ */
  .formation-section{margin-bottom:60px}
  .formation-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:40px}
  .formation-col{display:flex;flex-direction:column;gap:12px}
  .formation-banner{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:var(--transition);position:relative;overflow:hidden}
  .formation-banner:hover{transform:translateY(-4px);background:var(--bg-card-hover)}
  .formation-banner::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
  .formation-banner.attack-border::before{background:linear-gradient(90deg,transparent,var(--attack),transparent)}
  .formation-banner.midfield-border::before{background:linear-gradient(90deg,transparent,var(--midfield),transparent)}
  .formation-banner.defensive-border::before{background:linear-gradient(90deg,transparent,var(--defensive),transparent)}
  .formation-icon{width:80px;height:80px;object-fit:contain;margin-bottom:12px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.5));transition:var(--transition)}
  .formation-banner:hover .formation-icon{transform:scale(1.1)}
  .formation-banner h4{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;letter-spacing:2px;margin-bottom:8px}
  .position-tag{display:inline-block;font-size:11px;font-weight:700;padding:4px 14px;border-radius:100px;letter-spacing:1px}
  .formation-etfs{display:flex;flex-direction:column;gap:8px}
  .mini-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:12px 16px;display:flex;justify-content:space-between;align-items:center;transition:var(--transition)}
  .mini-card:hover{background:var(--bg-card-hover);transform:translateX(4px)}
  .mini-card.attack-border:hover{border-color:var(--attack)!important;box-shadow:0 0 15px var(--attack-dim)}
  .mini-card.midfield-border:hover{border-color:var(--midfield)!important;box-shadow:0 0 15px var(--midfield-dim)}
  .mini-card.defensive-border:hover{border-color:var(--defensive)!important;box-shadow:0 0 15px var(--defensive-dim)}
  .mc-symbol{font-family:'Orbitron',sans-serif;font-size:14px;font-weight:700;letter-spacing:1px}
  .mc-yield{font-weight:700;font-size:15px}
  .feed-badge{text-align:center;padding:10px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;letter-spacing:.5px;animation:feedPulse 3s ease-in-out infinite}
  @keyframes feedPulse{0%,100%{opacity:.8}50%{opacity:1}}

  /* color utils */
  .attack-text{color:var(--attack)} .midfield-text{color:var(--midfield)} .defensive-text{color:var(--defensive)} .king-text{color:var(--king)}
  .attack-bg{background:var(--attack-dim);color:var(--attack)} .midfield-bg{background:var(--midfield-dim);color:var(--midfield)} .defensive-bg{background:var(--defensive-dim);color:var(--defensive)} .king-bg{background:var(--king-dim);color:var(--king)}
  .attack-border{border-color:rgba(0,230,118,.2)!important} .midfield-border{border-color:rgba(255,171,0,.2)!important} .defensive-border{border-color:rgba(239,83,80,.2)!important}

  /* FAT KING */
  .king-destination{position:relative;margin-top:20px}
  .king-flow-arrows{display:flex;justify-content:center;gap:80px;margin-bottom:16px;height:40px;align-items:center}
  .flow-arrow{width:3px;height:40px;border-radius:3px;position:relative;animation:arrowPulse 2s ease-in-out infinite}
  .flow-arrow::after{content:'';position:absolute;bottom:-6px;left:50%;transform:translateX(-50%);width:0;height:0;border-left:6px solid transparent;border-right:6px solid transparent}
  .attack-flow{background:var(--attack)} .attack-flow::after{border-top:8px solid var(--attack)}
  .midfield-flow{background:var(--midfield);animation-delay:.3s} .midfield-flow::after{border-top:8px solid var(--midfield)}
  .defensive-flow{background:var(--defensive);animation-delay:.6s} .defensive-flow::after{border-top:8px solid var(--defensive)}
  @keyframes arrowPulse{0%,100%{opacity:.4}50%{opacity:1}}
  .king-card{background:var(--bg-card);border:2px solid rgba(124,77,255,.25);border-radius:var(--radius-lg);padding:32px;display:flex;align-items:center;gap:28px;transition:var(--transition);position:relative;overflow:hidden}
  .king-card:hover{transform:translateY(-4px);border-color:var(--king);box-shadow:0 8px 40px rgba(124,77,255,.15)}
  .king-img{width:100px;height:100px;object-fit:contain;flex-shrink:0;filter:drop-shadow(0 4px 20px var(--king-glow));animation:kingFloat 4s ease-in-out infinite}
  @keyframes kingFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
  .king-info h3{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;color:var(--king);margin-bottom:4px}
  .king-ticker{font-size:14px;color:var(--text-secondary);margin-bottom:8px}
  .king-desc{font-size:14px;color:var(--text-dim);line-height:1.6}

  /* TABLES */
  .table-wrap{overflow-x:auto;border-radius:var(--radius);border:1px solid var(--border)}
  .ref-table{width:100%;border-collapse:collapse;font-size:14px}
  .ref-table thead{background:rgba(255,255,255,.03)}
  .ref-table th{padding:14px 18px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);border-bottom:1px solid var(--border)}
  .ref-table td{padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.03);vertical-align:middle}
  .ref-table tbody tr{transition:var(--transition)}
  .ref-table tbody tr:last-child td{border-bottom:none}
  .pos-badge{display:inline-block;padding:4px 12px;border-radius:100px;font-size:12px;font-weight:700;white-space:nowrap}
  .symbol-cell{font-family:'Orbitron',sans-serif;font-weight:700;letter-spacing:1px;font-size:13px}
  .dist-note{color:var(--text-dim);font-size:12px}
  .risk-cell{color:var(--text-secondary);font-size:13px}
  .attack-row:hover{background:var(--attack-dim)!important} .midfield-row:hover{background:var(--midfield-dim)!important} .defensive-row:hover{background:var(--defensive-dim)!important}

  /* HOLDINGS */
  .position-section{margin-bottom:60px}
  .position-header{border-radius:var(--radius-lg);overflow:hidden;margin-bottom:20px}
  .position-banner-img{width:100%;max-width:600px;display:block;margin:0 auto;filter:drop-shadow(0 4px 20px rgba(0,0,0,.5));transition:var(--transition)}
  .position-header:hover .position-banner-img{transform:scale(1.02)}
  .position-description{padding:20px 24px;border-radius:var(--radius);margin-bottom:24px;border:1px solid var(--border);background:var(--bg-card)}
  .position-description h3{font-size:18px;font-weight:700;margin-bottom:8px}
  .position-description p{color:var(--text-secondary);font-size:14px;line-height:1.7}
  .attack-accent{border-left:4px solid var(--attack)} .midfield-accent{border-left:4px solid var(--midfield)} .defensive-accent{border-left:4px solid var(--defensive)}
  .holdings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px}
  .holding-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:var(--transition);position:relative}
  .holding-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px}
  .holding-card.attack-border::before{background:linear-gradient(90deg,var(--attack),transparent)}
  .holding-card.midfield-border::before{background:linear-gradient(90deg,var(--midfield),transparent)}
  .holding-card.defensive-border::before{background:linear-gradient(90deg,var(--defensive),transparent)}
  .holding-card:hover{transform:translateY(-6px);background:var(--bg-card-hover);box-shadow:var(--shadow)}
  .holding-card.attack-border:hover{border-color:rgba(0,230,118,.4);box-shadow:0 8px 40px rgba(0,230,118,.08)}
  .holding-card.midfield-border:hover{border-color:rgba(255,171,0,.4);box-shadow:0 8px 40px rgba(255,171,0,.08)}
  .holding-card.defensive-border:hover{border-color:rgba(239,83,80,.4);box-shadow:0 8px 40px rgba(239,83,80,.08)}
  .hc-header{display:flex;justify-content:space-between;align-items:center;padding:20px 20px 16px}
  .hc-symbol-wrap{padding:8px 18px;border-radius:var(--radius-sm)}
  .hc-symbol{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;letter-spacing:2px}
  .hc-yield-wrap{text-align:right}
  .hc-yield{display:block;font-family:'Orbitron',sans-serif;font-size:26px;font-weight:900}
  .hc-yield-label{font-size:10px;text-transform:uppercase;color:var(--text-dim);letter-spacing:1px}
  .hc-body{padding:0 20px 20px}
  .hc-name{font-size:15px;font-weight:600;margin-bottom:12px;color:var(--text-primary)}
  .hc-dist{display:flex;justify-content:space-between;align-items:baseline;padding:10px 14px;background:rgba(255,255,255,.02);border-radius:var(--radius-sm);margin-bottom:14px}
  .hc-dist-label{font-size:11px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
  .hc-dist-value{font-weight:700;font-size:14px}
  .hc-dist-value em{font-style:normal;color:var(--text-dim);font-weight:400;font-size:12px}
  .hc-desc{font-size:13px;color:var(--text-secondary);line-height:1.6;margin-bottom:14px}
  .hc-risk{padding:10px 14px;background:rgba(239,83,80,.05);border-radius:var(--radius-sm);font-size:12px;color:var(--text-secondary);margin-bottom:10px;display:flex;gap:8px;align-items:baseline}
  .risk-label{font-weight:700;color:var(--defensive);white-space:nowrap}
  .hc-feed{padding:10px 14px;background:var(--king-dim);border-radius:var(--radius-sm);font-size:12px;color:var(--king)}
  .hc-feed strong{font-size:14px}
  .hc-actions{display:flex;gap:8px;padding:0 20px 20px}
  .hc-btn{flex:1;font-size:12px;font-weight:600;padding:8px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
  .hc-btn:hover{background:rgba(255,255,255,.07);color:#fff;border-color:var(--border-hover)}
  .hc-btn.del:hover{color:var(--defensive);border-color:var(--defensive)}

  /* ADD BUTTON */
  .add-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:32px;flex-wrap:wrap}
  .yield-rules{font-size:12px;color:var(--text-dim);display:flex;gap:14px;flex-wrap:wrap}
  .yield-rules b{color:var(--text-secondary);font-weight:700}
  .btn{font-family:'Inter',sans-serif;font-size:14px;font-weight:600;padding:12px 24px;border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:none}
  .btn-primary{background:var(--king);color:#fff} .btn-primary:hover{background:var(--king-deep);transform:translateY(-2px);box-shadow:0 4px 20px var(--king-glow)}
  .btn-outline{background:transparent;color:var(--text-secondary);border:1px solid var(--border)} .btn-outline:hover{border-color:var(--defensive);color:var(--defensive);background:var(--defensive-dim)}
  .btn-danger{background:var(--defensive-dim);color:var(--defensive);border:1px solid var(--defensive)} .btn-danger:hover{background:var(--defensive);color:#fff}
  .btn-add{background:linear-gradient(135deg,var(--king),#9575ff);color:#fff;font-size:15px;padding:14px 28px;box-shadow:0 4px 20px var(--king-glow)}
  .btn-add:hover{transform:translateY(-2px) scale(1.02);box-shadow:0 6px 30px var(--king-glow)}
  .empty-note{padding:24px;text-align:center;color:var(--text-dim);font-size:14px;border:1px dashed var(--border);border-radius:var(--radius)}

  /* CALCULATOR */
  .calc-position-group{margin-bottom:32px}
  .calc-group-header{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:var(--radius) var(--radius) 0 0;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px}
  .calc-group-icon{width:36px;height:36px;object-fit:contain}
  .calc-feed-tag{margin-left:auto;font-family:'Inter',sans-serif;font-size:12px;font-weight:600;opacity:.8}
  .calc-cards{display:flex;flex-direction:column;gap:2px}
  .calc-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:20px;transition:var(--transition)}
  .calc-card:hover{background:var(--bg-card-hover)}
  .calc-card-top{display:flex;align-items:center;gap:16px;margin-bottom:16px;flex-wrap:wrap}
  .calc-symbol{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:900;letter-spacing:2px;min-width:70px}
  .calc-composition{font-size:12px;color:var(--text-dim);flex:1;min-width:200px}
  .calc-del-btn{margin-left:auto;font-size:12px;font-weight:600;padding:7px 14px;border-radius:6px;border:1px solid var(--border);background:rgba(239,83,80,.06);color:var(--defensive);cursor:pointer;transition:var(--transition);white-space:nowrap}
  .calc-del-btn:hover{background:var(--defensive);color:#fff;border-color:var(--defensive);box-shadow:0 0 14px var(--defensive-dim)}
  .calc-inputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .calc-field{display:flex;flex-direction:column;gap:4px}
  .calc-field label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);font-weight:600}
  .calc-field input,.calc-field select{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:10px 12px;color:var(--text-primary);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;transition:var(--transition);width:100%}
  .calc-field input:focus,.calc-field select:focus{outline:none;border-color:var(--king);box-shadow:0 0 0 3px rgba(124,77,255,.15)}
  .calc-field input::placeholder{color:var(--text-dim);font-weight:400}
  .calc-outputs{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
  .calc-output{display:flex;flex-direction:column;gap:2px}
  .calc-output-label{font-size:10px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-dim);font-weight:600}
  .calc-output-value{font-family:'Orbitron',sans-serif;font-size:16px;font-weight:700;color:var(--attack)}
  .calc-output-value.yield-val{color:var(--midfield)}
  .calc-output-value.king-val{color:var(--king)}

  /* KING SLIDER */
  .king-slider-card{background:var(--bg-card);border:1px solid rgba(124,77,255,.25);border-radius:var(--radius-lg);padding:28px 32px;margin:0 0 40px;box-shadow:0 0 40px rgba(124,77,255,.06)}
  .ksc-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px}
  .ksc-title{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900}
  .ksc-state{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:900;transition:var(--transition)}
  .ksc-sub{font-size:13px;color:var(--text-secondary);margin-bottom:20px}
  .ksc-ends{display:flex;justify-content:space-between;font-size:12px;font-weight:700;margin-bottom:8px}
  .starve-end{color:var(--defensive)} .feed-end{color:var(--king)}
  .king-range{-webkit-appearance:none;appearance:none;width:100%;height:14px;border-radius:100px;background:linear-gradient(90deg,var(--defensive) 0%,var(--midfield) 50%,var(--king) 100%);outline:none;cursor:pointer}
  .king-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:30px;height:30px;border-radius:50%;background:#fff;border:4px solid var(--king);cursor:pointer;box-shadow:0 2px 12px rgba(0,0,0,.5);transition:transform .15s}
  .king-range::-webkit-slider-thumb:hover{transform:scale(1.15)}
  .king-range::-moz-range-thumb{width:26px;height:26px;border-radius:50%;background:#fff;border:4px solid var(--king);cursor:pointer}
  .ksc-callout{margin-top:18px;padding:14px 18px;border-radius:var(--radius-sm);font-size:14px;text-align:center;background:var(--king-dim);color:var(--king);font-weight:600;transition:var(--transition)}

  .summary-section{margin:40px 0}
  .summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
  .summary-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px 20px;text-align:center;transition:var(--transition)}
  .summary-card:hover{background:var(--bg-card-hover);transform:translateY(-2px)}
  .summary-label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);margin-bottom:8px}
  .summary-value{display:block;font-family:'Orbitron',sans-serif;font-size:22px;font-weight:700;color:#fff}
  .summary-card.accent-green{border-color:rgba(0,230,118,.2);background:var(--attack-dim)} .summary-card.accent-green .summary-value{color:var(--attack)}
  .summary-card.accent-king{border-color:rgba(124,77,255,.2);background:var(--king-dim)} .summary-card.accent-king .summary-value{color:var(--king)}
  .summary-card.accent-gold{border-color:rgba(255,171,0,.2);background:var(--midfield-dim)} .summary-card.accent-gold .summary-value{color:var(--midfield)}

  .king-table tfoot td{font-weight:700;border-top:2px solid var(--border);padding-top:16px;color:var(--king)}
  .king-pct{font-weight:700;color:var(--king)}
  .calc-actions{display:flex;gap:12px;justify-content:center;margin-top:32px;flex-wrap:wrap}

  /* SYSTEM */
  .system-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);padding:32px;transition:var(--transition);margin-bottom:48px}
  .king-glow{border-color:rgba(124,77,255,.25);box-shadow:0 0 40px rgba(124,77,255,.06)}
  .system-card-header{display:flex;align-items:center;gap:20px;margin-bottom:16px}
  .system-icon{width:70px;height:70px;object-fit:contain;filter:drop-shadow(0 4px 15px var(--king-glow))}
  .system-card-header h3{font-family:'Orbitron',sans-serif;font-size:20px;font-weight:900;color:var(--king)}
  .system-card-sub{font-size:13px;color:var(--text-dim)}
  .system-card>p{font-size:15px;color:var(--text-secondary);line-height:1.7}
  .logic-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:20px;margin-bottom:48px}
  .logic-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:var(--transition)}
  .logic-card:hover{background:var(--bg-card-hover);transform:translateY(-4px)}
  .logic-card-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
  .logic-icon{width:50px;height:50px;object-fit:contain}
  .logic-card h4{font-size:15px;font-weight:700}
  .logic-card>p{font-size:13px;color:var(--text-secondary);line-height:1.7;margin-bottom:16px}
  .logic-bar{display:flex;height:32px;border-radius:6px;overflow:hidden;font-size:11px;font-weight:700}
  .logic-bar-fill{display:flex;align-items:center;justify-content:center;color:#fff;white-space:nowrap}
  .logic-bar-remainder{display:flex;align-items:center;justify-content:center;background:rgba(255,255,255,.06);color:var(--text-secondary);white-space:nowrap}
  .attack-bar{background:linear-gradient(90deg,var(--attack-deep),var(--attack))}
  .midfield-bar{background:linear-gradient(90deg,var(--midfield-deep),var(--midfield))}
  .defensive-bar{background:linear-gradient(90deg,var(--defensive-deep),var(--defensive))}
  .genius-card{padding:40px;margin-bottom:48px}
  .genius-card h3{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;text-align:center;margin-bottom:28px;background:linear-gradient(135deg,var(--king),#b388ff);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .genius-points{display:flex;flex-direction:column;gap:16px;max-width:700px;margin:0 auto}
  .genius-point{display:flex;align-items:center;gap:16px;padding:16px 20px;background:rgba(255,255,255,.02);border-radius:var(--radius-sm);transition:var(--transition)}
  .genius-point:hover{background:rgba(255,255,255,.05);transform:translateX(4px)}
  .genius-icon{font-size:24px;flex-shrink:0}
  .genius-point p{font-size:15px;color:var(--text-secondary);line-height:1.5}
  .genius-point strong{color:var(--text-primary)}
  .def-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px}
  .def-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;border-left-width:4px;transition:var(--transition)}
  .def-card:hover{background:var(--bg-card-hover);transform:translateY(-2px)}
  .def-card h4{font-size:16px;font-weight:700;margin-bottom:10px}
  .def-card p{font-size:13px;color:var(--text-secondary);line-height:1.7}

  /* MODAL */
  .modal-overlay{position:fixed;inset:0;z-index:1000;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:none;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto}
  .modal-overlay.open{display:flex;animation:fadeIn .3s ease}
  .modal{background:#0e0e1c;border:1px solid var(--border-hover);border-radius:var(--radius-lg);width:100%;max-width:640px;box-shadow:0 20px 80px rgba(0,0,0,.6);animation:modalIn .35s cubic-bezier(.4,0,.2,1)}
  @keyframes modalIn{from{opacity:0;transform:translateY(30px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
  .modal-head{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid var(--border)}
  .modal-head h3{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900}
  .modal-close{background:none;border:none;color:var(--text-secondary);font-size:22px;cursor:pointer;line-height:1;transition:var(--transition)}
  .modal-close:hover{color:#fff;transform:rotate(90deg)}
  .modal-body{padding:24px 28px;display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .modal-field{display:flex;flex-direction:column;gap:5px}
  .modal-field.full{grid-column:1 / -1}
  .modal-field label{font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--text-secondary);font-weight:600}
  .modal-field input,.modal-field textarea,.modal-field select{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:11px 13px;color:var(--text-primary);font-family:'Inter',sans-serif;font-size:14px;transition:var(--transition);width:100%;resize:vertical}
  .modal-field input:focus,.modal-field textarea:focus,.modal-field select:focus{outline:none;border-color:var(--king);box-shadow:0 0 0 3px rgba(124,77,255,.15)}
  .modal-field .hint{font-size:11px;color:var(--text-dim)}
  .pos-preview{grid-column:1 / -1;padding:14px 18px;border-radius:var(--radius-sm);text-align:center;font-weight:700;font-size:14px;border:1px solid var(--border);transition:var(--transition)}
  .modal-foot{display:flex;justify-content:space-between;gap:12px;padding:20px 28px;border-top:1px solid var(--border)}

  .footer{text-align:center;padding:40px 24px;border-top:1px solid var(--border);position:relative;z-index:1}
  .footer p{font-size:13px;color:var(--text-dim)}
  .footer-dim{margin-top:4px;font-size:12px!important;opacity:.5}

  .toast{position:fixed;bottom:30px;right:30px;background:var(--king);color:#fff;padding:14px 24px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;box-shadow:0 4px 20px var(--king-glow);z-index:2000;animation:toastIn .4s ease}
  @keyframes toastIn{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}

  ::selection{background:rgba(124,77,255,.3);color:#fff}
  ::-webkit-scrollbar{width:8px;height:8px}
  ::-webkit-scrollbar-track{background:var(--bg-primary)}
  ::-webkit-scrollbar-thumb{background:rgba(255,255,255,.1);border-radius:4px}
  ::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.2)}

  @media (max-width:1024px){.formation-grid{grid-template-columns:1fr;max-width:500px;margin:0 auto 40px}.king-flow-arrows{gap:40px}}
  @media (max-width:768px){
    .topbar-inner{flex-direction:column;padding:12px 16px;gap:12px}
    .tabs{width:100%}
    .content{padding:20px 16px 40px}
    .holdings-grid{grid-template-columns:1fr}
    .king-card{flex-direction:column;text-align:center;padding:24px}
    .stats-row,.summary-grid{grid-template-columns:repeat(2,1fr)}
    .calc-inputs,.calc-outputs{grid-template-columns:1fr 1fr}
    .logic-grid{grid-template-columns:1fr}
    .modal-body{grid-template-columns:1fr}
    .calc-card-top{flex-direction:column;align-items:flex-start;gap:8px}
  }
  @media (max-width:480px){.stats-row,.summary-grid,.calc-inputs,.calc-outputs,.def-grid{grid-template-columns:1fr}.brand-title{font-size:14px}}

  /* ═══════════ THE ARENA (RPG) ═══════════ */
  .arena-king-card{position:relative;display:flex;gap:24px;align-items:center;background:var(--bg-card);border:2px solid rgba(124,77,255,.3);border-radius:var(--radius-lg);padding:24px 28px;margin-bottom:32px;overflow:hidden;box-shadow:0 0 50px rgba(124,77,255,.08)}
  .ak-avatar{position:relative;flex-shrink:0;text-align:center}
  .ak-avatar img{width:96px;height:96px;object-fit:contain;filter:drop-shadow(0 4px 20px var(--king-glow));animation:kingFloat 4s ease-in-out infinite}
  .ak-lvl-ring{position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);background:var(--king);color:#fff;font-size:8px;font-weight:700;line-height:1.1;padding:4px 10px;border-radius:100px;text-align:center;box-shadow:0 2px 10px var(--king-glow)}
  .ak-lvl-ring b{font-family:'Orbitron',sans-serif;font-size:13px}
  .ak-main{flex:1;min-width:0}
  .ak-top{display:flex;align-items:baseline;gap:12px;margin-bottom:8px;flex-wrap:wrap}
  .ak-tier{font-family:'Orbitron',sans-serif;font-weight:900;font-size:16px}
  .ak-name{font-weight:700;font-size:15px}.ak-name small{color:var(--text-dim);font-weight:400;margin-left:6px}
  .ak-bar-row{display:flex;align-items:center;gap:12px;margin-bottom:6px}
  .ak-sub{font-size:12px;color:var(--text-secondary);margin-bottom:14px}
  .xp-bar{flex:1;height:12px;background:rgba(255,255,255,.07);border-radius:100px;overflow:hidden}
  .xp-fill{height:100%;border-radius:100px;background:var(--king);transition:width .6s cubic-bezier(.4,0,.2,1)}
  .king-xp .xp-fill{background:linear-gradient(90deg,var(--king-deep),#b388ff)}
  .attack-fill{background:linear-gradient(90deg,var(--attack-deep),var(--attack))}
  .midfield-fill{background:linear-gradient(90deg,var(--midfield-deep),var(--midfield))}
  .defensive-fill{background:linear-gradient(90deg,var(--defensive-deep),var(--defensive))}
  .xp-meta{font-size:11px;color:var(--text-dim);white-space:nowrap}
  .invest-row{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
  .invest-btn{font-family:'Inter',sans-serif;font-size:12px;font-weight:700;padding:7px 12px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.04);color:var(--text-primary);cursor:pointer;transition:var(--transition)}
  .invest-btn:hover{background:var(--king);color:#fff;border-color:var(--king);transform:translateY(-1px)}
  .invest-btn:active{transform:scale(.93)}
  .feed-king-btn{background:var(--king-dim);color:var(--king);border-color:rgba(124,77,255,.4)}
  .feed-king-btn:hover{background:var(--king);color:#fff}
  .arena-row{margin-bottom:30px}
  .arena-row-head{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:100px;font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;margin-bottom:14px}
  .arena-row-icon{width:28px;height:28px;object-fit:contain}
  .arena-lineup{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
  .char-card{position:relative;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;transition:var(--transition);overflow:hidden}
  .char-card:hover{background:var(--bg-card-hover);transform:translateY(-4px)}
  .char-card.attack-border:hover{box-shadow:0 8px 30px rgba(0,230,118,.1)}
  .char-card.midfield-border:hover{box-shadow:0 8px 30px rgba(255,171,0,.1)}
  .char-card.defensive-border:hover{box-shadow:0 8px 30px rgba(239,83,80,.1)}
  .cc-head{display:flex;align-items:center;gap:12px;margin-bottom:10px}
  .cc-avatar{position:relative;flex-shrink:0}
  .cc-avatar img{width:54px;height:54px;object-fit:contain;animation:bob 5s ease-in-out infinite}
  @keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .cc-lvl{position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;background:rgba(0,0,0,.7);padding:2px 7px;border-radius:100px;white-space:nowrap}
  .cc-id{display:flex;flex-direction:column;gap:5px;min-width:0}
  .cc-sym{font-family:'Orbitron',sans-serif;font-weight:900;font-size:18px;letter-spacing:1px}
  .cc-tier{font-size:10px;font-weight:700;padding:3px 9px;border-radius:100px;align-self:flex-start}
  .cc-stats{display:flex;flex-direction:column;gap:7px;margin:12px 0}
  .cc-stat{display:grid;grid-template-columns:1fr auto;gap:3px 8px;align-items:center}
  .cc-stat-l{font-size:11px;color:var(--text-secondary)}
  .cc-stat-v{font-size:11px;font-weight:700;text-align:right;font-family:'Orbitron',sans-serif}
  .cc-stat-bar{grid-column:1 / -1;height:5px;background:rgba(255,255,255,.06);border-radius:100px;overflow:hidden}
  .cc-stat-bar>div{height:100%;border-radius:100px;transition:width .5s}
  .cc-invested{font-size:12px;color:var(--text-dim);margin:8px 0 0}
  .cc-invested b{color:var(--text-primary)}
  .float-delta{position:absolute;top:10px;right:12px;background:var(--king);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-radius:6px;pointer-events:none;animation:floatUp 1.2s ease forwards;z-index:5;box-shadow:0 2px 12px var(--king-glow)}
  @keyframes floatUp{0%{opacity:0;transform:translateY(8px)}20%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-28px)}}
  .lvl-up{animation:lvlPulse .9s ease}
  @keyframes lvlPulse{0%,100%{box-shadow:none}40%{box-shadow:0 0 0 3px var(--king-glow),0 0 30px var(--king-glow)}}
  .tier-up{animation:tierPulse 1.5s ease}
  @keyframes tierPulse{0%,100%{box-shadow:none;transform:none}30%{box-shadow:0 0 0 4px var(--midfield),0 0 40px var(--midfield-glow);transform:scale(1.03)}}
  /* WALKING ARENA SCENE — detailed two-zone medieval courtyard (70 training / 30 lounge) */
  .arena-scene{position:relative;height:460px;margin:0 0 30px;border:1px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;background:#0d0d16}
  .ag-layer{position:absolute;inset:0;pointer-events:none}
  /* ── LEFT 70%: TRAINING YARD (faded wood planks) ── */
  .ag-yard{position:absolute;top:0;bottom:0;left:0;width:70%;
    background:
      /* soft top light + ambient */
      radial-gradient(80% 60% at 45% 25%,rgba(255,255,255,.05),transparent 70%),
      /* plank seams (horizontal dark lines) */
      repeating-linear-gradient(0deg,rgba(0,0,0,.32) 0 1px,transparent 1px 2px,transparent 0 38px),
      /* board-to-board tone variation */
      repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 19px,rgba(0,0,0,.05) 19px 38px),
      /* faint long grain */
      repeating-linear-gradient(90deg,rgba(255,255,255,.022) 0 2px,transparent 2px 6px),
      repeating-linear-gradient(90deg,rgba(0,0,0,.04) 0 1px,transparent 1px 11px),
      /* faded muted timber base */
      linear-gradient(165deg,#9a8d76 0%,#8a7d68 45%,#776a57 100%)}
  /* staggered plank-end seams (vertical breaks) */
  .ag-yard::before{content:'';position:absolute;inset:0;opacity:.5;
    background:
      repeating-linear-gradient(90deg,transparent 0 158px,rgba(0,0,0,.28) 158px 160px);
    background-position:0 0; }
  /* edge vignette + wear */
  .ag-yard::after{content:'';position:absolute;inset:0;background:radial-gradient(120% 100% at 50% 42%,transparent 55%,rgba(0,0,0,.34) 100%)}
  /* ── RIGHT 30%: LOUNGE YARD (grass) ── */
  .ag-garden{position:absolute;top:0;bottom:0;right:0;width:30%;
    background:
      radial-gradient(50% 40% at 60% 30%,rgba(255,255,255,.05),transparent 70%),
      repeating-linear-gradient(40deg,rgba(0,0,0,.06) 0 2px,transparent 2px 8px),
      repeating-linear-gradient(-32deg,rgba(255,255,255,.04) 0 1px,transparent 1px 9px),
      linear-gradient(160deg,#3f6b34 0%,#356029 50%,#284c20 100%)}
  /* grass tufts */
  .ag-garden::before{content:'';position:absolute;inset:0;background-image:radial-gradient(2px 5px at 20% 30%,rgba(120,200,90,.5),transparent),radial-gradient(2px 5px at 55% 55%,rgba(120,200,90,.45),transparent),radial-gradient(2px 5px at 75% 25%,rgba(120,200,90,.5),transparent),radial-gradient(2px 5px at 40% 78%,rgba(120,200,90,.4),transparent),radial-gradient(2px 5px at 85% 68%,rgba(120,200,90,.45),transparent);opacity:.7}
  /* cobblestone path winding from gate into garden */
  .ag-path{position:absolute;top:46%;right:0;width:32%;height:60px;transform:translateY(-50%);
    background:repeating-linear-gradient(74deg,#8a8378 0 9px,#6f685d 9px 11px),linear-gradient(#7d766b,#615b51);
    border-radius:40px 8px 8px 40px;box-shadow:inset 0 2px 4px rgba(255,255,255,.12),inset 0 -3px 6px rgba(0,0,0,.4),0 2px 6px rgba(0,0,0,.4);opacity:.9}
  /* ── FENCE + GATE at the 70% divide ── */
  .ag-fence{position:absolute;top:8px;bottom:8px;left:70%;width:8px;transform:translateX(-50%);
    background:repeating-linear-gradient(#6b4f2e 0 4px,#4d3920 4px 14px);border-radius:3px;box-shadow:2px 0 6px rgba(0,0,0,.5),-2px 0 6px rgba(0,0,0,.4);z-index:2}
  .ag-fence::before,.ag-fence::after{content:'';position:absolute;left:-7px;width:22px;height:5px;background:#5c4427;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.5)}
  .ag-fence::before{top:24%} .ag-fence::after{bottom:24%}
  /* open gate gap — two posts framing the cobble path */
  .ag-gate{position:absolute;top:38%;left:70%;width:18px;height:78px;transform:translate(-50%,-6px);z-index:2}
  .ag-gate::before,.ag-gate::after{content:'';position:absolute;top:0;width:6px;height:100%;background:linear-gradient(#7a5a32,#4d3920);border-radius:3px;box-shadow:0 2px 5px rgba(0,0,0,.5)}
  .ag-gate::before{left:0;transform:rotate(-16deg);transform-origin:bottom} .ag-gate::after{right:0;transform:rotate(16deg);transform-origin:bottom}
  /* battlement wall around training yard only */
  .ag-wall{position:absolute;top:7px;bottom:7px;left:7px;width:calc(70% - 10px);border-radius:14px 4px 4px 14px;border:3px solid rgba(20,14,8,.5);border-right:none;box-shadow:inset 0 0 0 4px rgba(0,0,0,.3),inset 0 0 55px rgba(0,0,0,.5);pointer-events:none}
  /* sparring ring (left-center) */
  .ag-ring{position:absolute;left:33%;top:55%;width:200px;height:104px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(ellipse at center,rgba(210,180,130,.28),rgba(190,160,110,.08) 58%,transparent 74%);border:2px dashed rgba(210,180,130,.45);box-shadow:inset 0 0 28px rgba(190,150,90,.18);pointer-events:none}
  .ag-ring::before{content:'';position:absolute;inset:-6px;border-radius:50%;border:2px solid rgba(120,90,55,.35)}
  /* training dummies (post + straw head + crossbar) */
  .ag-dummy{position:absolute;width:8px;height:30px;background:linear-gradient(#6b573a,#3c301f);border-radius:3px;pointer-events:none;z-index:1;filter:drop-shadow(0 3px 3px rgba(0,0,0,.5))}
  .ag-dummy::before{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:13px;height:13px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#e8cf9c,#b9975f);box-shadow:0 1px 3px rgba(0,0,0,.5)}
  .ag-dummy::after{content:'';position:absolute;top:3px;left:50%;transform:translateX(-50%);width:24px;height:4px;background:#5a4327;border-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.5)}
  .ag-dummy.dwobble{animation:dummyWobble .5s ease}
  @keyframes dummyWobble{0%,100%{transform:rotate(0)}25%{transform:rotate(7deg)}60%{transform:rotate(-5deg)}}
  .ag-dummy.d1{top:30%;left:22%}.ag-dummy.d2{bottom:20%;left:14%}.ag-dummy.d3{top:24%;left:48%}
  /* weapon rack (spears leaning) */
  .ag-rack{position:absolute;bottom:18%;left:40%;width:40px;height:8px;background:#5a4327;border-radius:2px;pointer-events:none;z-index:1;box-shadow:0 2px 4px rgba(0,0,0,.5)}
  .ag-rack::before{content:'';position:absolute;bottom:0;left:6px;width:2px;height:34px;background:#caa86a;transform:rotate(11deg);transform-origin:bottom;box-shadow:5px 0 0 #b08f54,10px 0 0 #caa86a,15px 0 0 #b08f54}
  .ag-rack::after{content:'';position:absolute;bottom:0;left:8px;width:5px;height:5px;background:#9a9aa5;border-radius:1px;transform:translateY(-34px) rotate(11deg)}
  /* hay bale */
  .ag-hay{position:absolute;width:26px;height:18px;border-radius:5px;background:linear-gradient(#cdab63,#a98b4e);box-shadow:inset 0 0 0 1px rgba(0,0,0,.15),0 2px 5px rgba(0,0,0,.5);pointer-events:none;z-index:1}
  .ag-hay::before{content:'';position:absolute;inset:3px 0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.12) 6px 7px)}
  .ag-hay.h1{top:18%;left:58%}.ag-hay.h2{bottom:30%;left:30%;transform:scale(.85)}
  /* archery target */
  .ag-target{position:absolute;top:62%;left:56%;width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#d94b3d 0 4px,#fff 4px 7px,#d94b3d 7px 10px,#fff 10px 12px);box-shadow:0 2px 6px rgba(0,0,0,.5);pointer-events:none;z-index:1;border:2px solid #5a4327}
  /* faction banners on the wall (left edge, vertical stack) */
  .ag-banner{position:absolute;width:14px;height:34px;border-radius:2px 2px 8px 8px;opacity:.9;box-shadow:0 2px 8px rgba(0,0,0,.5);pointer-events:none;z-index:1}
  .ag-banner::after{content:'';position:absolute;top:-5px;left:-2px;width:18px;height:5px;background:rgba(90,67,39,.95);border-radius:2px}
  .ag-banner.attack{background:linear-gradient(var(--attack),var(--attack-deep))}
  .ag-banner.midfield{background:linear-gradient(var(--midfield),var(--midfield-deep))}
  .ag-banner.defensive{background:linear-gradient(var(--defensive),var(--defensive-deep))}
  .b-1{top:16px;left:20px}.b-2{top:16px;left:44px}.b-3{top:16px;left:68px}
  /* wall torches */
  .ag-torch{position:absolute;width:5px;height:14px;background:#4a3a28;border-radius:2px;pointer-events:none;z-index:1}
  .ag-torch::after{content:'';position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:8px;height:11px;border-radius:50%;background:radial-gradient(circle at 50% 70%,#ffd36b,#ff7a18 60%,transparent 78%);animation:flick 1.2s ease-in-out infinite;box-shadow:0 0 10px #ff9d3c}
  @keyframes flick{0%,100%{opacity:.75;transform:translateX(-50%) scaleY(1)}50%{opacity:1;transform:translateX(-50%) scaleY(1.3)}}
  .ag-torch.tl{top:50px;left:16px}.ag-torch.bl{bottom:50px;left:16px}.ag-torch.tm{top:50px;left:50%}
  /* ── GARDEN PROPS (right 30%) ── */
  .ag-tree{position:absolute;width:30px;height:30px;border-radius:50%;background:radial-gradient(circle at 38% 32%,#5fa845,#2f6b28 70%,#234f1e);box-shadow:0 3px 8px rgba(0,0,0,.5),inset -3px -4px 6px rgba(0,0,0,.3);pointer-events:none;z-index:1}
  .ag-tree::after{content:'';position:absolute;bottom:-8px;left:50%;transform:translateX(-50%);width:5px;height:10px;background:#5a3f22;border-radius:2px}
  .ag-tree.t1{top:16%;right:8%}.ag-tree.t2{bottom:14%;right:20%;transform:scale(.8)}
  .ag-bush{position:absolute;width:18px;height:13px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#5aa03f,#2f6b28);box-shadow:0 2px 5px rgba(0,0,0,.45);pointer-events:none;z-index:1}
  .ag-bush.bu1{top:40%;right:24%}.ag-bush.bu2{bottom:30%;right:6%}
  /* bench */
  .ag-bench{position:absolute;top:30%;right:11%;width:30px;height:7px;background:linear-gradient(#8a6638,#5e451f);border-radius:2px;pointer-events:none;z-index:1;box-shadow:0 2px 5px rgba(0,0,0,.5)}
  .ag-bench::before{content:'';position:absolute;bottom:-6px;left:2px;width:3px;height:6px;background:#5e451f;box-shadow:22px 0 0 #5e451f}
  .ag-bench::after{content:'';position:absolute;top:-6px;left:0;width:100%;height:5px;background:linear-gradient(#9a743f,#6e521f);border-radius:2px}
  /* lounge table + stool */
  .ag-table{position:absolute;bottom:40%;right:20%;width:20px;height:20px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9a743f,#5e451f);box-shadow:0 3px 6px rgba(0,0,0,.5);pointer-events:none;z-index:1}
  .ag-table::after{content:'';position:absolute;bottom:-7px;left:50%;transform:translateX(-50%);width:4px;height:8px;background:#5e451f}
  /* lantern post */
  .ag-lantern{position:absolute;top:20%;right:32%;width:3px;height:26px;background:#3a2f22;border-radius:2px;pointer-events:none;z-index:1}
  .ag-lantern::before{content:'';position:absolute;top:-7px;left:50%;transform:translateX(-50%);width:9px;height:10px;border-radius:2px;background:radial-gradient(circle,#ffe08a,#ffae3b 70%);box-shadow:0 0 10px #ffc24d;animation:flick 1.6s ease-in-out infinite}
  /* flower patches */
  .ag-flowers{position:absolute;pointer-events:none;z-index:1;width:22px;height:10px;background-image:radial-gradient(3px 3px at 3px 5px,#ff5d8f,transparent),radial-gradient(3px 3px at 11px 3px,#ffd24a,transparent),radial-gradient(3px 3px at 18px 6px,#7c9bff,transparent)}
  .ag-flowers.f1{bottom:18%;right:26%}.ag-flowers.f2{top:54%;right:9%}
  /* well */
  .ag-well{position:absolute;bottom:50%;right:4%;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle,#2a2a33 0 5px,#6f685d 5px 8px,#8a8378 8px);box-shadow:0 2px 6px rgba(0,0,0,.5);pointer-events:none;z-index:1}
  .scene-tag{position:absolute;top:14px;left:35%;transform:translateX(-50%);font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;letter-spacing:2px;color:rgba(255,240,210,.85);z-index:3;pointer-events:none;text-shadow:0 1px 4px #000}
  .scene-tag-garden{position:absolute;top:14px;right:6%;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;letter-spacing:1px;color:rgba(200,255,180,.8);z-index:3;pointer-events:none;text-shadow:0 1px 4px #000}
  /* walkers */
  .walker{position:absolute;width:56px;height:66px;will-change:transform;pointer-events:auto;cursor:pointer}
  .w-sprite{position:absolute;bottom:12px;left:50%;width:54px;height:54px;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
  .w-shadow{position:absolute;bottom:6px;left:50%;width:34px;height:10px;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(0,0,0,.5),transparent 72%);border-radius:50%}
  .w-glow{position:absolute;bottom:7px;left:50%;width:40px;height:15px;transform:translateX(-50%);border-radius:50%;filter:blur(7px);opacity:.55}
  .w-lv{position:absolute;top:-4px;left:50%;transform:translateX(-50%);font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;letter-spacing:.5px;padding:2px 7px;border-radius:100px;white-space:nowrap;background:rgba(0,0,0,.75);z-index:1}
  .walker.attack .w-lv{color:var(--attack);box-shadow:0 0 10px var(--attack-glow)} .walker.attack .w-glow{background:var(--attack)}
  .walker.midfield .w-lv{color:var(--midfield);box-shadow:0 0 10px var(--midfield-glow)} .walker.midfield .w-glow{background:var(--midfield)}
  .walker.defensive .w-lv{color:var(--defensive);box-shadow:0 0 10px var(--defensive-glow)} .walker.defensive .w-glow{background:var(--defensive)}
  .walker.king .w-lv{color:var(--king);box-shadow:0 0 12px var(--king-glow)} .walker.king .w-glow{background:var(--king)} .walker.king .w-sprite{width:60px;height:60px}
  @keyframes spritePop{0%{filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)) brightness(2.2)}100%{filter:drop-shadow(0 3px 4px rgba(0,0,0,.6)) brightness(1)}}
  /* ── ambient life: tier aura, scale, behaviors ── */
  .walker .w-glow{transition:width .4s,height .4s,opacity .4s}
  .walker[data-tier="1"] .w-glow{opacity:.45} .walker[data-tier="2"] .w-glow{opacity:.6;width:46px} .walker[data-tier="3"] .w-glow{opacity:.72;width:52px;height:18px} .walker[data-tier="4"] .w-glow{opacity:.85;width:58px;height:20px} .walker[data-tier="5"] .w-glow{opacity:1;width:66px;height:22px}
  .walker.celebrate .w-sprite{animation:celebHop .6s ease}
  @keyframes celebHop{0%{transform:translateX(-50%) translateY(0) scale(1)}30%{transform:translateX(-50%) translateY(-14px) scale(1.12)}55%{transform:translateX(-50%) translateY(0) scale(.96)}75%{transform:translateX(-50%) translateY(-6px) scale(1.04)}100%{transform:translateX(-50%) translateY(0) scale(1)}}
  .walker.sparring .w-sprite{animation:sparJab .32s ease-in-out infinite}
  @keyframes sparJab{0%,100%{transform:translateX(-50%) translateX(0)}50%{transform:translateX(-50%) translateX(6px)}}
  .walker.pausing .w-sprite{animation:idleBreathe 2.4s ease-in-out infinite}
  @keyframes idleBreathe{0%,100%{transform:translateX(-50%) scale(1)}50%{transform:translateX(-50%) scale(1.05)}}
  /* click particles */
  .particle{position:absolute;width:6px;height:6px;border-radius:50%;pointer-events:none;z-index:500;transform:translate(-50%,-50%);animation:particleBurst .8s cubic-bezier(.2,.6,.3,1) forwards}
  @keyframes particleBurst{0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(1.1)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(.2)}}
  /* FIELD REPORT */
  .fr-overlay{position:fixed;inset:0;z-index:1500;background:rgba(0,0,0,.7);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;padding:20px;animation:fadeIn .3s ease}
  .fr-modal{background:#0e0e1c;border:1px solid var(--border-hover);border-radius:var(--radius-lg);max-width:540px;width:100%;max-height:82vh;display:flex;flex-direction:column;box-shadow:0 20px 80px rgba(0,0,0,.6);animation:modalIn .35s cubic-bezier(.4,0,.2,1)}
  .fr-head{font-family:'Orbitron',sans-serif;font-weight:900;font-size:18px;padding:22px 26px;border-bottom:1px solid var(--border);text-align:center;letter-spacing:1px}
  .fr-list{padding:16px 22px;overflow-y:auto;display:flex;flex-direction:column;gap:10px}
  .fr-row{display:flex;gap:14px;align-items:flex-start;padding:12px 14px;background:rgba(255,255,255,.02);border-radius:var(--radius-sm);border-left:3px solid var(--border)}
  .fr-row.attack-border{border-left-color:var(--attack)}.fr-row.midfield-border{border-left-color:var(--midfield)}.fr-row.defensive-border{border-left-color:var(--defensive)}.fr-row.king-border{border-left-color:var(--king)}
  .fr-sym{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;min-width:66px}
  .fr-body{flex:1;font-size:13px;color:var(--text-secondary)}
  .fr-line{color:var(--text-primary);font-weight:600}
  .fr-lv{font-weight:700;color:var(--text-primary);margin-left:6px}
  .fr-lv b{color:var(--attack)}
  .fr-tier{margin-top:6px;font-size:12px;font-weight:700;color:var(--midfield)}
  .fr-stats{display:grid;grid-template-columns:1fr 1fr;gap:2px 16px;margin-top:8px}
  .fr-st{display:flex;justify-content:space-between;gap:8px;font-size:12px;padding:4px 0;border-bottom:1px solid rgba(255,255,255,.04)}
  .fr-st span{color:var(--text-dim);white-space:nowrap}
  .fr-st b{color:var(--text-primary);font-weight:600;text-align:right}
  .fr-st b i{color:var(--text-dim);font-style:normal;font-weight:400}
  @media (max-width:520px){.fr-stats{grid-template-columns:1fr}}
  .fr-ack{margin:6px 22px 22px}
  @media (max-width:768px){.arena-king-card{flex-direction:column;text-align:center}.arena-lineup{grid-template-columns:1fr}}

  /* ═══════════ GAME MENU — single button + 3D tile submenu ═══════════ */
  .game-menu{display:flex;justify-content:center;margin:0 0 14px}
  .sync-stamp{text-align:center;font-size:12px;color:var(--text-dim);margin:0 0 18px;min-height:18px}
  .sync-stamp .sync-now{background:none;border:none;color:var(--lime);font-weight:700;cursor:pointer;font-size:12px;padding:0;text-decoration:underline}
  .sync-stamp .sync-now:hover{filter:brightness(1.2)}
  .gm-open{display:inline-flex;align-items:center;gap:12px;padding:14px 30px;border:1px solid rgba(124,77,255,.4);border-radius:14px;cursor:pointer;font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;letter-spacing:2px;color:#cbb8ff;background:linear-gradient(180deg,rgba(124,77,255,.16),rgba(124,77,255,.05));box-shadow:0 4px 0 rgba(101,31,255,.35),0 8px 22px rgba(124,77,255,.18);transition:transform .18s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,background .2s,color .2s}
  .gm-open .gm-open-ico{font-size:20px}
  .gm-open:hover{transform:translateY(-3px);background:linear-gradient(180deg,rgba(124,77,255,.26),rgba(124,77,255,.08));box-shadow:0 7px 0 rgba(101,31,255,.4),0 14px 30px rgba(124,77,255,.3);color:#fff}
  .gm-open:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(101,31,255,.35),0 4px 12px rgba(124,77,255,.2)}

  .gm-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:18px}
  .gm-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:26px 14px;border-radius:18px;cursor:pointer;border:1px solid var(--border);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));box-shadow:0 6px 0 rgba(0,0,0,.4),0 10px 22px rgba(0,0,0,.4);transition:transform .25s cubic-bezier(.34,1.56,.64,1),box-shadow .25s,border-color .25s;color:var(--text-primary);font-family:'Inter',sans-serif}
  .gm-tile::before{content:'';position:absolute;top:0;left:14%;right:14%;height:3px;border-radius:0 0 4px 4px;opacity:.8}
  .gm-tile .gm-tico{font-size:38px;line-height:1;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));transition:transform .25s cubic-bezier(.34,1.8,.6,1)}
  .gm-tile .gm-tlabel{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;letter-spacing:1px}
  .gm-tile .gm-tsub{font-size:10px;color:var(--text-dim);text-align:center;line-height:1.3}
  .gm-tile:hover{transform:translateY(-8px) scale(1.06);box-shadow:0 14px 0 rgba(0,0,0,.35),0 22px 40px rgba(0,0,0,.5)}
  .gm-tile:hover .gm-tico{transform:scale(1.25) translateY(-2px)}
  .gm-tile:active{transform:translateY(-2px) scale(1.02)}
  .gm-tile.t-king::before{background:var(--king)} .gm-tile.t-king:hover{border-color:var(--king);box-shadow:0 14px 0 rgba(101,31,255,.3),0 22px 44px rgba(124,77,255,.4)}
  .gm-tile.t-attack::before{background:var(--attack)} .gm-tile.t-attack:hover{border-color:var(--attack);box-shadow:0 14px 0 rgba(0,200,83,.25),0 22px 44px rgba(0,230,118,.35)}
  .gm-tile.t-midfield::before{background:var(--midfield)} .gm-tile.t-midfield:hover{border-color:var(--midfield);box-shadow:0 14px 0 rgba(255,143,0,.25),0 22px 44px rgba(255,171,0,.35)}
  .gm-tile.t-defensive::before{background:var(--defensive)} .gm-tile.t-defensive:hover{border-color:var(--defensive);box-shadow:0 14px 0 rgba(211,47,47,.25),0 22px 44px rgba(239,83,80,.35)}
  .gm-soon-tag{position:absolute;top:8px;right:8px;font-size:8px;font-weight:700;letter-spacing:.5px;color:var(--midfield);background:var(--midfield-dim);border:1px solid rgba(255,171,0,.3);padding:2px 6px;border-radius:100px;font-family:'Inter',sans-serif}

  /* ═══════════ GAME POPUP SHELL ═══════════ */
  .gp-overlay{position:fixed;inset:0;z-index:1600;background:rgba(0,0,0,.72);backdrop-filter:blur(7px);display:flex;align-items:flex-start;justify-content:center;padding:40px 16px;overflow-y:auto;opacity:0;transition:opacity .25s}
  .gp-overlay.open{opacity:1}
  .gp-modal{background:linear-gradient(180deg,#121222,#0b0b16);border:1px solid var(--border-hover);border-radius:var(--radius-lg);width:100%;max-width:520px;box-shadow:0 24px 90px rgba(0,0,0,.7),0 0 60px rgba(124,77,255,.12);transform:translateY(26px) scale(.96);opacity:0;transition:transform .3s cubic-bezier(.34,1.4,.5,1),opacity .3s}
  .gp-overlay.open .gp-modal{transform:translateY(0) scale(1);opacity:1}
  .gp-wide{max-width:840px}
  .gp-head{display:flex;align-items:center;justify-content:space-between;padding:20px 26px;border-bottom:1px solid var(--border)}
  .gp-head h3{font-family:'Orbitron',sans-serif;font-size:18px;font-weight:900;letter-spacing:1px}
  .gp-close{background:none;border:none;color:var(--text-secondary);font-size:20px;cursor:pointer;line-height:1;transition:var(--transition)}
  .gp-close:hover{color:#fff;transform:rotate(90deg)}
  .gp-body{padding:22px 26px}
  .gp-stub{text-align:center;padding:20px 10px}
  .gp-stub-icon{font-size:54px;margin-bottom:14px}
  .gp-stub p{color:var(--text-secondary);font-size:14px;max-width:360px;margin:0 auto 16px}
  .gp-soon{display:inline-block;font-family:'Orbitron',sans-serif;font-size:12px;font-weight:700;letter-spacing:1px;color:var(--midfield);border:1px solid rgba(255,171,0,.35);background:var(--midfield-dim);padding:6px 16px;border-radius:100px}

  /* ═══════════ EVOLUTIONS ═══════════ */
  .evo-intro{font-size:14px;color:var(--text-secondary);line-height:1.6;margin-bottom:16px;text-align:center}
  .evo-intro b{color:var(--text-primary)}
  .evo-chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:22px}
  .evo-chip{font-family:'Inter',sans-serif;font-size:13px;font-weight:700;padding:8px 16px;border-radius:100px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
  .evo-chip:hover{color:#fff;border-color:var(--border-hover)}
  .evo-chip.attack.active{background:var(--attack-dim);color:var(--attack);border-color:var(--attack)}
  .evo-chip.midfield.active{background:var(--midfield-dim);color:var(--midfield);border-color:var(--midfield)}
  .evo-chip.defensive.active{background:var(--defensive-dim);color:var(--defensive);border-color:var(--defensive)}
  .evo-chip.king.active{background:var(--king-dim);color:var(--king);border-color:var(--king)}
  .evo-chain{display:flex;align-items:stretch;gap:6px;overflow-x:auto;padding:6px 2px 16px}
  .evo-stage{position:relative;flex:0 0 138px;background:rgba(255,255,255,.025);border:1px solid var(--border);border-radius:var(--radius);padding:12px 10px;text-align:center;transition:var(--transition)}
  .evo-stage:hover{transform:translateY(-4px);background:rgba(255,255,255,.05)}
  .evo-stage.attack:hover{box-shadow:0 8px 24px rgba(0,230,118,.16);border-color:rgba(0,230,118,.4)}
  .evo-stage.midfield:hover{box-shadow:0 8px 24px rgba(255,171,0,.16);border-color:rgba(255,171,0,.4)}
  .evo-stage.defensive:hover{box-shadow:0 8px 24px rgba(239,83,80,.16);border-color:rgba(239,83,80,.4)}
  .evo-stage.king:hover{box-shadow:0 8px 24px rgba(124,77,255,.2);border-color:rgba(124,77,255,.4)}
  .evo-art-wrap{height:96px;display:flex;align-items:flex-end;justify-content:center;margin-bottom:8px}
  .evo-art{max-width:92px;max-height:96px;object-fit:contain;filter:drop-shadow(0 4px 10px rgba(0,0,0,.5));transition:transform .3s}
  .evo-stage:hover .evo-art{transform:scale(1.12)}
  .evo-stage-name{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;margin-bottom:5px;min-height:26px;display:flex;align-items:center;justify-content:center}
  .evo-stage-lv{font-size:10px;color:var(--text-dim);text-transform:uppercase;letter-spacing:.5px}
  .evo-stage-band{font-size:12px;font-weight:700;color:var(--text-primary);margin:3px 0}
  .evo-stage-evolve{font-size:10px;font-weight:700;color:var(--midfield);margin-top:4px}
  .evo-arrow{display:flex;align-items:center;color:var(--text-dim);font-size:14px;flex:0 0 auto}
  .evo-table{width:100%;border-collapse:collapse;font-size:13px;margin-top:8px}
  .evo-table th{text-align:left;padding:9px 12px;font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--text-dim);border-bottom:1px solid var(--border)}
  .evo-table td{padding:9px 12px;border-bottom:1px solid rgba(255,255,255,.03)}
  .evo-table tbody tr:last-child td{border-bottom:none}
  .evo-cost{font-weight:700;color:var(--midfield)}
  .evo-tagline{text-align:center;font-size:13px;color:var(--text-secondary);margin-top:16px;font-style:italic}
  @media (max-width:560px){.evo-chain{padding-bottom:12px}.gm-tile{padding:20px 10px}}

  /* ═══════════ FREE PERF HYGIENE ═══════════ */
  /* Instant taps — removes any double-tap delay quirk on all buttons */
  button{touch-action:manipulation}
  /* Paint isolation — each card recalcs independently, never triggers a global reflow */
  .holding-card,.calc-card,.char-card,.evo-stage,.gm-tile,.summary-card,.stat-card{contain:content}

  /* ═══════════ LIME HERO BADGE (The Game) ═══════════ */
  .hero-badge-lime{color:var(--lime);border-color:rgba(189,255,0,.4);animation:limeBadgeGlow 4s ease-in-out infinite}
  @keyframes limeBadgeGlow{0%,100%{box-shadow:0 0 10px rgba(189,255,0,.12)}50%{box-shadow:0 0 26px rgba(189,255,0,.32)}}

  /* ═══════════ EVOLUTION CUTSCENE (Pokémon-style) ═══════════ */
  .evo-cs{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;background:rgba(2,4,0,.86);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
  .evo-cs.show{opacity:1}
  .evo-cs-inner{position:relative;text-align:center;padding:20px;max-width:440px;width:100%}
  .evo-cs-title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:20px;letter-spacing:4px;margin-bottom:24px;color:#fff;text-shadow:0 0 16px var(--cs-color,#fff);animation:csTitleFlicker 1.6s ease-in-out infinite}
  @keyframes csTitleFlicker{0%,100%{opacity:.85}50%{opacity:1}}
  .evo-cs-stage{position:relative;width:240px;height:240px;margin:0 auto;display:flex;align-items:center;justify-content:center}
  .evo-cs-rays{position:absolute;inset:-40px;border-radius:50%;background:radial-gradient(circle,var(--cs-color,#fff) 0%,transparent 62%);opacity:.18;filter:blur(8px);animation:csRays 2.4s linear infinite}
  @keyframes csRays{from{transform:rotate(0) scale(1)}to{transform:rotate(360deg) scale(1.08)}}
  .evo-cs-img{position:absolute;max-width:200px;max-height:200px;object-fit:contain;filter:drop-shadow(0 6px 22px rgba(0,0,0,.6))}
  /* shake + flash build-up */
  .evo-cs-stage.shaking .evo-cs-img{animation:csShake .12s linear infinite}
  @keyframes csShake{0%{transform:translate(0,0) rotate(0)}25%{transform:translate(-4px,2px) rotate(-2deg)}50%{transform:translate(3px,-3px) rotate(2deg)}75%{transform:translate(-2px,-2px) rotate(-1deg)}100%{transform:translate(3px,2px) rotate(1deg)}}
  .evo-cs-flash{position:absolute;inset:-60px;border-radius:50%;background:radial-gradient(circle,#fff,transparent 60%);opacity:0;pointer-events:none}
  .evo-cs-flash.boom{animation:csBoom .55s ease-out}
  @keyframes csBoom{0%{opacity:0;transform:scale(.3)}40%{opacity:1;transform:scale(1.1)}100%{opacity:0;transform:scale(1.7)}}
  .evo-cs-result{margin-top:26px;font-size:16px;line-height:1.6;color:var(--text-primary);min-height:48px;opacity:0;transform:translateY(8px);transition:opacity .4s,transform .4s}
  .evo-cs-result.show{opacity:1;transform:translateY(0)}
  .evo-cs-result b{color:var(--cs-color,#fff)}
  .evo-cs-result .evo-cs-congrats{display:block;font-family:'Orbitron',sans-serif;font-weight:900;font-size:18px;letter-spacing:1px;margin-bottom:8px;color:var(--cs-color,#fff);text-shadow:0 0 14px var(--cs-color,#fff)}
  .evo-cs-btn{margin-top:22px;font-family:'Orbitron',sans-serif;font-weight:700;font-size:13px;letter-spacing:1px;padding:12px 30px;border-radius:12px;border:none;cursor:pointer;color:#0a0f00;background:var(--cs-color,#fff);box-shadow:0 4px 0 rgba(0,0,0,.4),0 8px 22px var(--cs-color,#fff);opacity:0;transform:translateY(8px);transition:opacity .4s .1s,transform .4s .1s,filter .15s}
  .evo-cs-btn.show{opacity:1;transform:translateY(0)}
  .evo-cs-btn:hover{filter:brightness(1.12)}
  .evo-cs-skip{position:absolute;top:16px;right:18px;font-size:12px;color:var(--text-dim);background:none;border:none;cursor:pointer;letter-spacing:1px}
  .evo-cs-skip:hover{color:#fff}
  .evo-cs-particle{position:absolute;width:8px;height:8px;border-radius:50%;pointer-events:none;left:50%;top:50%;transform:translate(-50%,-50%);animation:particleBurst .9s cubic-bezier(.2,.6,.3,1) forwards}

  /* ═══════════ V3.1 — PREMIUM 3D HOLDING CARD ═══════════ */
  .cc-cardbtn{position:absolute;top:10px;right:10px;z-index:4;width:30px;height:30px;border-radius:8px;border:1px solid var(--border);background:rgba(0,0,0,.35);cursor:pointer;font-size:15px;line-height:1;transition:var(--transition)}
  .cc-cardbtn:hover{transform:translateY(-2px) scale(1.08)}
  .attack-card-btn:hover{border-color:var(--attack);box-shadow:0 0 12px var(--attack-glow)}
  .midfield-card-btn:hover{border-color:var(--midfield);box-shadow:0 0 12px var(--midfield-glow)}
  .defensive-card-btn:hover{border-color:var(--defensive);box-shadow:0 0 12px var(--defensive-glow)}
  .cc-avatar{cursor:pointer}
  .card3d-overlay{position:fixed;inset:0;z-index:1800;display:none;align-items:center;justify-content:center;background:rgba(2,2,8,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transition:opacity .35s}
  .card3d-overlay.open{display:flex;opacity:1}
  .card3d-close{position:absolute;top:24px;right:28px;z-index:5;width:42px;height:42px;border-radius:12px;border:1px solid var(--border-hover);background:rgba(255,255,255,.05);color:#fff;font-size:18px;cursor:pointer;transition:var(--transition)}
  .card3d-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.12)}
  .card3d-hint{position:absolute;bottom:28px;left:50%;transform:translateX(-50%);font-size:12px;letter-spacing:1px;color:var(--text-dim);text-transform:uppercase;pointer-events:none}
  .card3d-stage{position:relative;width:340px;height:476px;perspective:1300px;perspective-origin:50% 50%}
  .card3d-glow{position:absolute;inset:-12% -8%;border-radius:50%;filter:blur(60px);opacity:.6;z-index:0;transition:background .4s;animation:cardGlowPulse 4s ease-in-out infinite}
  @keyframes cardGlowPulse{0%,100%{opacity:.45}50%{opacity:.7}}
  .card3d{position:relative;width:100%;height:100%;transform-style:preserve-3d;cursor:grab;transition:transform .12s ease-out;z-index:2}
  .card3d.dragging{cursor:grabbing;transition:none}
  .card3d.entering{animation:cardEnter .6s cubic-bezier(.34,1.4,.5,1)}
  @keyframes cardEnter{0%{opacity:0;transform:rotateY(180deg) scale(.7)}100%{opacity:1;transform:rotateY(0) scale(1)}}
  .card3d-inner{position:absolute;inset:0;border-radius:20px;overflow:hidden;transform:translateZ(0);
    box-shadow:0 30px 60px rgba(0,0,0,.7),0 0 0 2px rgba(255,255,255,.08),inset 0 0 0 1px rgba(255,255,255,.12),inset 0 2px 14px rgba(255,255,255,.1);
    backface-visibility:hidden}
  /* beveled outer frame edge */
  .card3d::before{content:'';position:absolute;inset:-3px;border-radius:23px;transform:translateZ(-6px);
    background:linear-gradient(145deg,var(--cc,#888),rgba(0,0,0,.6) 55%,var(--cc,#888));opacity:.9;z-index:-1}
  /* moving holographic sheen */
  .card3d-sheen{position:absolute;inset:0;border-radius:20px;pointer-events:none;z-index:3;mix-blend-mode:overlay;opacity:0;transform:translateZ(1px);
    background:linear-gradient(105deg,transparent 30%,rgba(255,255,255,.55) 45%,rgba(255,255,255,.05) 50%,transparent 60%)}
  /* ── card interior ── */
  .pc{position:absolute;inset:0;display:flex;flex-direction:column;font-family:'Inter',sans-serif;color:#fff;
    background:linear-gradient(160deg,#1a1a26,#101019 60%,#0a0a12)}
  .pc-hero{position:relative;height:55%;overflow:hidden;border-bottom:2px solid var(--cc,#888)}
  .pc-hero-bg{position:absolute;inset:0;background:radial-gradient(80% 70% at 50% 35%,var(--cc-dim,rgba(136,136,136,.25)),transparent 75%),repeating-linear-gradient(58deg,rgba(255,255,255,.04) 0 2px,transparent 2px 12px)}
  .pc-hero img{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);height:96%;object-fit:contain;filter:drop-shadow(0 8px 16px rgba(0,0,0,.6))}
  .pc-rarity{position:absolute;top:10px;right:12px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;letter-spacing:1px;padding:3px 9px;border-radius:100px;background:rgba(0,0,0,.55);color:var(--cc,#fff);border:1px solid var(--cc,#888)}
  .pc-lv{position:absolute;top:10px;left:12px;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:900;padding:4px 10px;border-radius:10px;background:rgba(0,0,0,.6);color:var(--cc,#fff);border:1px solid var(--cc,#888);box-shadow:0 0 12px var(--cc-glow,transparent)}
  .pc-emblem{position:absolute;bottom:8px;right:10px;font-size:22px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.7))}
  .pc-body{flex:1;padding:12px 16px 14px;display:flex;flex-direction:column;gap:8px}
  .pc-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:22px;letter-spacing:1px;line-height:1}
  .pc-tier{font-size:12px;font-weight:700;color:var(--cc,#bbb);text-transform:uppercase;letter-spacing:1px;margin-top:-2px}
  .pc-ribbon{display:flex;gap:8px;margin:2px 0}
  .pc-rib{flex:1;display:flex;flex-direction:column;align-items:center;gap:1px;padding:5px 4px;border-radius:8px;background:rgba(255,255,255,.05);border:1px solid var(--cc,#555)}
  .pc-rib-l{font-size:8px;font-weight:700;letter-spacing:1px;color:var(--text-dim)}
  .pc-rib-v{font-family:'Orbitron',sans-serif;font-size:12px;font-weight:900;color:var(--cc,#fff)}
  .pc-stats{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px;margin-top:4px}
  .pc-stat{display:flex;flex-direction:column;gap:3px}
  .pc-stat-top{display:flex;justify-content:space-between;font-size:10px;color:var(--text-secondary)}
  .pc-stat-top b{color:#fff;font-family:'Orbitron',sans-serif;font-size:10px}
  .pc-stat-bar{height:4px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden}
  .pc-stat-bar>div{height:100%;border-radius:100px;background:var(--cc,#888)}
  .pc-foot{margin-top:auto;font-size:10px;line-height:1.4;color:var(--text-dim);border-top:1px solid rgba(255,255,255,.08);padding-top:8px}
  /* corner ornaments (frame flourishes that appear from tier 3+) */
  .pc-corner{position:absolute;width:18px;height:18px;border:2px solid var(--cc,#888);z-index:4;opacity:0;transition:opacity .3s;pointer-events:none}
  .pc-corner.tl{top:6px;left:6px;border-right:none;border-bottom:none;border-radius:6px 0 0 0}
  .pc-corner.tr{top:6px;right:6px;border-left:none;border-bottom:none;border-radius:0 6px 0 0}
  .pc-corner.bl{bottom:6px;left:6px;border-right:none;border-top:none;border-radius:0 0 0 6px}
  .pc-corner.br{bottom:6px;right:6px;border-left:none;border-top:none;border-radius:0 0 6px 0}

  /* ── RARITY ESCALATION (visually distinct per tier) ── */
  /* T1 COMMON — flat, grey muted frame, plain backdrop */
  .card3d[data-rarity="1"] .pc{background:linear-gradient(160deg,#1c1c24,#141419 60%,#0e0e14)}
  .card3d[data-rarity="1"] .pc-hero-bg{filter:saturate(.6) brightness(.85)}
  .card3d[data-rarity="1"] .pc-rarity{color:#9aa0ab;border-color:#555a64}
  .card3d[data-rarity="1"] .card3d-inner{box-shadow:0 24px 48px rgba(0,0,0,.7),0 0 0 2px rgba(120,124,134,.5),inset 0 0 0 1px rgba(255,255,255,.06)}

  /* T2 UNCOMMON — thin metallic faction border, faint sheen */
  .card3d[data-rarity="2"] .card3d-sheen{opacity:.1}
  .card3d[data-rarity="2"] .pc{background:linear-gradient(160deg,#191a22,#121218 60%,#0c0c12)}
  .card3d[data-rarity="2"] .card3d-inner{box-shadow:0 26px 52px rgba(0,0,0,.7),0 0 0 2px var(--cc,#888),inset 0 0 0 1px rgba(255,255,255,.1)}
  .card3d[data-rarity="2"] .pc-hero{border-bottom-width:3px}

  /* T3 RARE — holo sheen, glowing frame, corner flourishes, brighter hero */
  .card3d[data-rarity="3"] .pc-corner{opacity:.9}
  .card3d[data-rarity="3"] .pc{background:linear-gradient(160deg,#1d1b2a,#141220 60%,#0c0a16)}
  .card3d[data-rarity="3"] .pc-hero-bg{background:radial-gradient(80% 70% at 50% 35%,var(--cc-dim),transparent 72%),repeating-linear-gradient(58deg,rgba(255,255,255,.09) 0 2px,transparent 2px 8px);filter:saturate(1.15)}
  .card3d[data-rarity="3"] .card3d-inner{box-shadow:0 28px 56px rgba(0,0,0,.72),0 0 0 2px var(--cc,#888),0 0 26px var(--cc-glow),inset 0 0 0 1px rgba(255,255,255,.16)}
  .card3d[data-rarity="3"] .pc-name{text-shadow:0 0 10px var(--cc-glow)}

  /* T4 EPIC — double frame, diagonal foil texture, animated edge shimmer, ornaments */
  .card3d[data-rarity="4"] .pc-corner{opacity:1;width:22px;height:22px;border-width:2.5px}
  .card3d[data-rarity="4"] .pc{background:linear-gradient(160deg,#211d33,#15111f 55%,#0b0814)}
  .card3d[data-rarity="4"] .pc-hero-bg{background:radial-gradient(85% 75% at 50% 35%,var(--cc-dim),transparent 70%),repeating-linear-gradient(58deg,rgba(255,255,255,.12) 0 2px,transparent 2px 7px);filter:saturate(1.3) brightness(1.05)}
  .card3d[data-rarity="4"] .pc::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,transparent 0 7px,rgba(255,255,255,.05) 7px 8px);mix-blend-mode:overlay}
  .card3d[data-rarity="4"] .card3d-inner{box-shadow:0 30px 62px rgba(0,0,0,.74),0 0 0 1px rgba(255,255,255,.2),0 0 0 4px var(--cc,#888),0 0 40px var(--cc-glow),inset 0 0 0 1px rgba(255,255,255,.2);animation:epicEdge 2.6s ease-in-out infinite}
  @keyframes epicEdge{0%,100%{filter:none}50%{filter:drop-shadow(0 0 10px var(--cc-glow))}}
  .card3d[data-rarity="4"] .pc-name{text-shadow:0 0 14px var(--cc-glow)}

  /* T5 LEGENDARY — full prismatic foil, ornate radiant frame, sparkles, animated rainbow sweep */
  .card3d[data-rarity="5"] .pc-corner{opacity:1;width:26px;height:26px;border-width:3px;box-shadow:0 0 10px var(--cc-glow)}
  .card3d[data-rarity="5"] .pc{background:linear-gradient(160deg,#26203a,#170f26 55%,#0c0716)}
  .card3d[data-rarity="5"] .pc-hero-bg{background:radial-gradient(90% 80% at 50% 35%,var(--cc-dim),transparent 68%),repeating-linear-gradient(58deg,rgba(255,255,255,.15) 0 2px,transparent 2px 6px);filter:saturate(1.45) brightness(1.1)}
  .card3d[data-rarity="5"] .pc::after{content:'';position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(115deg,transparent 0 6px,rgba(255,255,255,.06) 6px 7px);mix-blend-mode:overlay}
  .card3d[data-rarity="5"] .pc-hero::before{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(125deg,transparent 30%,rgba(255,120,220,.3) 42%,rgba(120,200,255,.3) 50%,rgba(255,240,120,.3) 58%,transparent 70%);background-size:250% 250%;animation:prismShift 3s linear infinite;mix-blend-mode:color-dodge}
  @keyframes prismShift{0%{background-position:0% 0%}100%{background-position:250% 250%}}
  .card3d[data-rarity="5"] .card3d-inner{box-shadow:0 34px 74px rgba(0,0,0,.78),0 0 0 1px rgba(255,255,255,.3),0 0 0 4px var(--cc,#fff),0 0 60px var(--cc-glow),inset 0 0 0 1px rgba(255,255,255,.28);animation:legendPulse 2.2s ease-in-out infinite}
  @keyframes legendPulse{0%,100%{filter:drop-shadow(0 0 6px var(--cc-glow))}50%{filter:drop-shadow(0 0 22px var(--cc-glow))}}
  .card3d[data-rarity="5"] .pc-name{text-shadow:0 0 18px var(--cc-glow),0 0 4px #fff}
  .card3d[data-rarity="5"] .pc-rarity{background:linear-gradient(90deg,var(--cc),#fff,var(--cc));background-size:200% auto;color:#0a0a12;border:none;animation:rarityShine 2s linear infinite;font-weight:900}
  @keyframes rarityShine{to{background-position:200% center}}
  /* evolution mini-cards (distinct per rarity) */
  .evo-minicard{width:64px;height:90px;margin:0 auto 8px;border-radius:7px;position:relative;overflow:hidden;background:linear-gradient(160deg,#1a1a26,#0a0a12);box-shadow:0 3px 8px rgba(0,0,0,.5);transition:transform .2s}
  .evo-minicard .emc-hero{height:60%;position:relative;border-bottom:1px solid var(--cc,#888);background:radial-gradient(70% 70% at 50% 40%,var(--cc-dim),transparent 75%)}
  .evo-minicard .emc-hero img{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:96%;object-fit:contain}
  .evo-minicard .emc-foot{height:40%;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:7px;font-weight:900;color:var(--cc,#fff);letter-spacing:.3px;text-align:center;padding:2px}
  /* T1 grey muted */
  .evo-minicard[data-rarity="1"]{border:1.5px solid #555a64;filter:saturate(.65)}
  .evo-minicard[data-rarity="1"] .emc-foot{color:#9aa0ab}
  /* T2 metallic faction border */
  .evo-minicard[data-rarity="2"]{border:1.5px solid var(--cc,#888)}
  /* T3 glowing frame + corners */
  .evo-minicard[data-rarity="3"]{border:2px solid var(--cc,#888);box-shadow:0 3px 8px rgba(0,0,0,.5),0 0 12px var(--cc-glow)}
  .evo-minicard[data-rarity="3"] .emc-hero{filter:saturate(1.2)}
  /* T4 double frame + foil shimmer */
  .evo-minicard[data-rarity="4"]{border:2.5px double var(--cc,#888);box-shadow:0 3px 8px rgba(0,0,0,.5),0 0 16px var(--cc-glow)}
  .evo-minicard[data-rarity="4"]::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 5px,rgba(255,255,255,.07) 5px 6px);mix-blend-mode:overlay;pointer-events:none}
  .evo-minicard[data-rarity="4"] .emc-hero{filter:saturate(1.35) brightness(1.05)}
  /* T5 prismatic legendary */
  .evo-minicard[data-rarity="5"]{border:2.5px solid #fff;box-shadow:0 3px 12px rgba(0,0,0,.5),0 0 22px var(--cc-glow);animation:legendPulse 2.2s ease-in-out infinite}
  .evo-minicard[data-rarity="5"]::after{content:'';position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,120,220,.35) 45%,rgba(120,200,255,.35) 55%,transparent 70%);background-size:250% 250%;mix-blend-mode:color-dodge;animation:prismShift 3s linear infinite;pointer-events:none}
  .evo-minicard[data-rarity="5"] .emc-hero{filter:saturate(1.5) brightness(1.1)}
  .evo-minicard:hover{transform:scale(1.08)}
  @media (max-width:480px){.card3d-stage{width:280px;height:392px}}

  /* ═══════════ CONNECT BROKERAGE ═══════════ */
  .cb-wrap{display:flex;flex-direction:column;gap:16px}
  .cb-lead{font-size:14px;color:var(--text-secondary);line-height:1.6;text-align:center}
  .cb-lead b{color:var(--text-primary)}
  .cb-brokers{display:grid;grid-template-columns:1fr 1fr;gap:12px}
  .cb-broker{display:flex;align-items:center;justify-content:center;height:64px;padding:12px 16px;border-radius:14px;cursor:pointer;background:#f4f4f6;border:1px solid var(--border);transition:var(--transition)}
  .cb-broker:hover{transform:translateY(-3px);box-shadow:0 8px 22px rgba(0,0,0,.4);border-color:var(--lime)}
  .cb-broker img{max-height:26px;max-width:100%;object-fit:contain}
  .cb-broker-text{background:rgba(255,255,255,.04)}
  .cb-broker-text span{font-family:'Orbitron',sans-serif;font-weight:700;font-size:14px;color:var(--text-primary);letter-spacing:.5px}
  .cb-broker-text:hover{background:rgba(255,255,255,.08)}
  .cb-brokers .cb-broker:first-child{grid-column:1 / -1;height:72px}
  .cb-status{min-height:22px;text-align:center;font-size:13px}
  .cb-ok{color:var(--attack);font-weight:700}
  .cb-err{color:var(--defensive);font-weight:600;line-height:1.5;display:inline-block}
  .cb-working{color:var(--midfield);font-weight:600}
  .cb-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .cb-note{font-size:11px;color:var(--text-dim);text-align:center;line-height:1.5;border-top:1px solid var(--border);padding-top:12px}

  /* ═══════════ RECRUIT PROMPT ═══════════ */
  .rc-wrap{display:flex;flex-direction:column;gap:14px}
  .rc-head{display:flex;align-items:center;gap:12px}
  .rc-badge{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;letter-spacing:1px;color:var(--lime);border:1px solid var(--lime);border-radius:100px;padding:3px 10px}
  .rc-head h4{font-family:'Orbitron',sans-serif;font-size:22px;font-weight:900;letter-spacing:1px}
  .rc-synced{font-size:13px;color:var(--text-secondary);background:rgba(0,230,118,.06);border:1px solid rgba(0,230,118,.2);border-radius:8px;padding:10px 14px}
  .rc-synced b{color:var(--text-primary)}
  .rc-lead{font-size:13px;color:var(--text-secondary);line-height:1.6}
  .rc-dim{color:var(--text-dim)}
  .rc-sugg{font-size:13px;color:var(--midfield);background:var(--midfield-dim);border:1px solid rgba(255,171,0,.3);border-radius:8px;padding:10px 14px}
  .rc-sugg b{color:#fff}
  .rc-use{margin-left:6px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:6px;border:1px solid var(--midfield);background:transparent;color:var(--midfield);cursor:pointer}
  .rc-use:hover{background:var(--midfield);color:#0a0a12}
  .rc-fields{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
  .rc-fields label{display:flex;flex-direction:column;gap:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;color:var(--text-dim)}
  .rc-fields input,.rc-fields select{background:var(--bg-input);border:1px solid var(--border);border-radius:6px;padding:10px;color:var(--text-primary);font-family:'Inter',sans-serif;font-size:14px;font-weight:600}
  .rc-fields input:focus,.rc-fields select:focus{outline:none;border-color:var(--king);box-shadow:0 0 0 3px rgba(124,77,255,.15)}
  .rc-preview{text-align:center;padding:10px;border-radius:8px;font-size:13px;font-weight:600;background:var(--bg-input);color:var(--text-dim)}
  .rc-preview.attack-accent{background:var(--attack-dim);color:var(--attack)} .rc-preview.midfield-accent{background:var(--midfield-dim);color:var(--midfield)} .rc-preview.defensive-accent{background:var(--defensive-dim);color:var(--defensive)}
  .rc-preview.rc-err{background:var(--defensive-dim);color:var(--defensive)}
  .rc-actions{display:flex;gap:10px;justify-content:flex-end}
  @media (max-width:480px){.rc-fields{grid-template-columns:1fr}}

  /* ═══════════ RESERVES ═══════════ */
  .reserves-row{opacity:.85}
  .reserves-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
  .reserve-chip{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;border:1px dashed var(--border-hover);background:rgba(255,255,255,.02);filter:grayscale(.6)}
  .reserve-sym{font-family:'Orbitron',sans-serif;font-weight:900;font-size:15px;color:var(--text-secondary)}
  .reserve-meta{font-size:11px;color:var(--text-dim)}
  .reserve-acts{display:flex;gap:6px;margin-top:4px}
  .reserve-btn{flex:1;font-size:11px;font-weight:700;padding:5px;border-radius:6px;border:1px solid var(--border);background:rgba(255,255,255,.03);color:var(--text-secondary);cursor:pointer;transition:var(--transition)}
  .reserve-btn:hover{background:rgba(255,255,255,.08);color:#fff}
  .reserve-btn.del:hover{background:var(--defensive);border-color:var(--defensive);color:#fff}

  /* ═══════════ 🏰 CASTELLAN'S CONQUEST (V3.5) ═══════════ */
  /* activation button — left side of the training grounds */
  .conquest-btn{position:absolute;left:26px;top:50%;transform:translateY(-50%);z-index:6;width:120px;padding:16px 10px;border-radius:12px;cursor:pointer;text-align:center;
    border:2px solid var(--lime);background:linear-gradient(180deg,rgba(10,15,0,.92),rgba(20,30,4,.92));
    box-shadow:0 0 22px rgba(189,255,0,.35),inset 0 0 14px rgba(189,255,0,.12);
    animation:cqShake 2.6s ease-in-out infinite;pointer-events:auto}
  .conquest-btn:hover{box-shadow:0 0 36px rgba(189,255,0,.6),inset 0 0 18px rgba(189,255,0,.2);animation-duration:.5s}
  .conquest-btn:active{transform:translateY(-50%) scale(.95)}
  .cq-title{display:block;font-family:'Press Start 2P',monospace;font-size:9px;line-height:1.7;color:var(--lime);text-shadow:0 0 8px rgba(189,255,0,.6);margin-bottom:8px}
  .cq-sub{display:block;font-family:'Press Start 2P',monospace;font-size:6px;line-height:1.6;color:#d9c77a;letter-spacing:.5px}
  @keyframes cqShake{0%,86%,100%{transform:translateY(-50%) rotate(0)}88%{transform:translateY(-50%) rotate(-2.5deg)}90%{transform:translateY(-50%) rotate(2.5deg)}92%{transform:translateY(-50%) rotate(-2deg)}94%{transform:translateY(-50%) rotate(1.5deg)}96%{transform:translateY(-50%) rotate(-1deg)}}
  /* gameboy cutscene overlay */
  .cast-ov{position:fixed;inset:0;z-index:2200;display:flex;align-items:center;justify-content:center;background:rgba(2,4,0,.9);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s;padding:18px}
  .cast-ov.show{opacity:1}
  .cast-frame{position:relative;width:min(880px,96vw);border:4px solid #3a4a18;border-radius:10px;background:#0c1404;box-shadow:0 0 0 4px #1a2408,0 24px 80px rgba(0,0,0,.8),0 0 50px rgba(189,255,0,.1);overflow:hidden;cursor:pointer}
  .cast-panel{display:block;width:100%;image-rendering:pixelated}
  .cast-skip{position:absolute;top:10px;right:12px;z-index:3;font-family:'Press Start 2P',monospace;font-size:8px;color:#d9c77a;background:rgba(0,0,0,.6);border:1px solid #5a6a28;border-radius:6px;padding:6px 10px;cursor:pointer}
  .cast-skip:hover{color:var(--lime);border-color:var(--lime)}
  .cast-dialog{position:relative;margin:10px;border:3px solid #e8e0c0;border-radius:6px;background:#10240a;padding:16px 18px;min-height:74px;box-shadow:inset 0 0 0 2px #0a1804}
  .cast-text{font-family:'Press Start 2P',monospace;font-size:11px;line-height:2;color:#e8ffd0;white-space:pre-line;text-shadow:1px 1px 0 #000}
  .cast-next{position:absolute;bottom:8px;right:12px;color:var(--lime);font-size:12px;animation:castBlink 1s steps(2) infinite}
  @keyframes castBlink{50%{opacity:0}}
  /* name entry + character select */
  .cast-form{cursor:default;display:flex;flex-direction:column;gap:14px;align-items:center;padding:24px 18px}
  .cast-q{font-family:'Press Start 2P',monospace;font-size:12px;color:#e8ffd0;text-align:center;line-height:1.9}
  .cast-input{font-family:'Press Start 2P',monospace;font-size:13px;text-align:center;letter-spacing:2px;color:var(--lime);background:#0a1804;border:3px solid #e8e0c0;border-radius:6px;padding:12px 14px;width:min(320px,80%);text-transform:uppercase}
  .cast-input:focus{outline:none;border-color:var(--lime);box-shadow:0 0 14px rgba(189,255,0,.3)}
  .cast-ok{font-family:'Press Start 2P',monospace;font-size:10px;color:#0a0f00;background:var(--lime);border:none;border-radius:8px;padding:13px 22px;cursor:pointer;box-shadow:0 4px 0 var(--lime-deep)}
  .cast-ok:hover{filter:brightness(1.1)}
  .cast-ok:active{transform:translateY(2px);box-shadow:0 2px 0 var(--lime-deep)}
  .cast-ok:disabled{opacity:.35;cursor:not-allowed}
  .cast-looks{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
  .cast-look{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 10px;border:3px solid #3a4a18;border-radius:8px;background:#0a1804;cursor:pointer;transition:transform .15s,border-color .15s;min-width:96px}
  .cast-look img{height:84px;image-rendering:pixelated}
  .cast-look span{font-family:'Press Start 2P',monospace;font-size:7px;color:#d9c77a;text-align:center;line-height:1.6}
  .cast-look:hover{transform:translateY(-4px);border-color:#d9c77a}
  .cast-look.sel{border-color:var(--lime);box-shadow:0 0 18px rgba(189,255,0,.4);transform:translateY(-4px)}
  .cast-look.sel span{color:var(--lime)}
  .cast-tint-row{display:flex;align-items:center;gap:12px;width:min(420px,90%)}
  .cast-tint-row>span{font-family:'Press Start 2P',monospace;font-size:8px;color:#d9c77a;white-space:nowrap}
  .cast-tint-row input{flex:1;accent-color:var(--lime)}
  .cast-tint-chip{width:22px;height:22px;border-radius:6px;border:2px solid #e8e0c0;background:#2a6df4}
  /* the player in the courtyard */
  .cast-player{position:absolute;width:48px;height:72px;z-index:50;pointer-events:none;will-change:transform}
  .cast-sprite{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);height:58px;image-rendering:pixelated;filter:drop-shadow(0 3px 4px rgba(0,0,0,.6))}
  .cast-name{position:absolute;top:-6px;left:50%;transform:translateX(-50%);font-family:'Press Start 2P',monospace;font-size:7px;color:var(--lime);background:rgba(0,0,0,.78);padding:3px 8px;border-radius:100px;white-space:nowrap;box-shadow:0 0 10px rgba(189,255,0,.35);z-index:1}
  @media (max-width:768px){.conquest-btn{width:92px;padding:10px 6px}.cq-title{font-size:7px}.cq-sub{font-size:5px}.cast-text{font-size:9px}}
  /* auto-sync note where invest buttons used to be */
  .auto-note{font-size:11px;color:var(--text-dim);font-style:italic;padding:6px 2px;display:inline-block}
  /* calculator fields managed by brokerage sync */
  .calc-field input.sync-managed{border-left:3px solid var(--midfield)}
  /* game settings */
  .gs-section{border:1px solid var(--border);border-radius:var(--radius);padding:16px;margin-bottom:14px;background:rgba(255,255,255,.02)}
  .gs-head{font-family:'Orbitron',sans-serif;font-size:13px;font-weight:700;letter-spacing:1px;margin-bottom:12px}
  .gs-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:10px 0;border-top:1px solid rgba(255,255,255,.04)}
  .gs-row:first-of-type{border-top:none}
  .gs-row>span{font-size:13px;color:var(--text-secondary);line-height:1.5;flex:1}
  .gs-btn{white-space:nowrap;flex-shrink:0}
  .gs-danger>span b{color:var(--defensive)}
  .gs-toggle{display:flex;align-items:center;gap:8px;cursor:pointer;flex-shrink:0}
  .gs-toggle input{width:20px;height:20px;accent-color:var(--lime);cursor:pointer}
  .gs-toggle span{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:var(--lime);min-width:30px}
  /* castellan editor extras */
  .cast-edit-actions{display:flex;gap:12px}
  .cast-cancel{background:#3a4a18;color:#d9c77a;box-shadow:0 4px 0 #222e0c}

  /* ═══════════ 🗺️ V3.6 — KINGDOM EXIT, MAP & QUARTERS ═══════════ */
  /* road signs + map board (top of path, right edge of lounge yard) */
  .kx-signs{position:absolute;right:14px;top:calc(46% - 92px);z-index:3;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:2px}
  .kx-board{width:42px;height:30px;border:2px solid #5a4327;border-radius:3px;background:
    radial-gradient(6px 5px at 30% 40%,#5fa845,transparent 70%),
    radial-gradient(5px 4px at 68% 60%,#4a90d9,transparent 70%),
    radial-gradient(4px 4px at 55% 30%,#caa860,transparent 70%),
    #e8dcb8;box-shadow:0 2px 5px rgba(0,0,0,.5)}
  .kx-sign{font-family:'Press Start 2P',monospace;font-size:5px;color:#3a2c16;background:linear-gradient(#d9c08a,#b89a5e);border:1px solid #5a4327;padding:3px 6px;border-radius:2px;box-shadow:0 1px 3px rgba(0,0,0,.5);letter-spacing:.5px}
  .kx-sign.s2{transform:rotate(-2deg)}
  .kx-post{width:4px;height:18px;background:linear-gradient(#6b4f2e,#4d3920);border-radius:2px}
  /* floating arrow + transport orb on the path */
  .kx-arrow{position:absolute;right:34px;top:calc(46% - 14px);z-index:3;font-size:26px;color:var(--lime);opacity:.55;pointer-events:none;animation:kxArrow 1.6s ease-in-out infinite;text-shadow:0 0 12px rgba(189,255,0,.8)}
  @keyframes kxArrow{0%,100%{transform:translateX(0)}50%{transform:translateX(8px)}}
  .kx-orb{position:absolute;right:70px;top:calc(46% + 6px);z-index:3;width:12px;height:12px;border-radius:50%;pointer-events:none;background:radial-gradient(circle at 35% 30%,#fff,var(--king) 55%,#3a1f86);box-shadow:0 0 14px var(--king-glow),0 0 26px var(--king-glow);animation:kxOrb 2.4s ease-in-out infinite}
  @keyframes kxOrb{0%,100%{transform:translateY(0);opacity:.85}50%{transform:translateY(-8px);opacity:1}}
  .kx-pop{position:absolute;right:18px;top:calc(46% - 52px);z-index:7;font-family:'Press Start 2P',monospace;font-size:8px;color:var(--lime);background:rgba(4,8,0,.92);border:2px solid var(--lime);border-radius:8px;padding:8px 12px;pointer-events:none;opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s;box-shadow:0 0 16px rgba(189,255,0,.3)}
  .kx-pop.show{opacity:1;transform:translateY(0)}
  /* the Kingdom Map page — pannable / zoomable world */
  .kx-map{position:fixed;inset:0;z-index:2100;background:#070d04;opacity:0;transition:opacity .35s;overflow:hidden}
  .kx-map.show{opacity:1}
  .kx-viewport{position:absolute;inset:0;overflow:hidden;touch-action:none;cursor:grab;-webkit-user-select:none;user-select:none}
  .kx-viewport:active{cursor:grabbing}
  .kx-world{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
  .kx-map-img{position:absolute;inset:0;background:url('../../RPG/Castellan/map-kingdom.jpg') center/100% 100% no-repeat;image-rendering:pixelated}
  .kx-map-title{position:absolute;top:18px;left:50%;transform:translateX(-50%);z-index:6;font-family:'Press Start 2P',monospace;font-size:14px;color:#f4e8c0;text-shadow:2px 2px 0 #000,0 0 18px rgba(0,0,0,.8);letter-spacing:2px;pointer-events:none}
  .kx-map-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:6;font-family:'Press Start 2P',monospace;font-size:7px;color:rgba(244,232,192,.55);pointer-events:none;text-align:center}
  .kx-zoombtns{position:absolute;top:16px;right:16px;z-index:7;display:flex;flex-direction:column;gap:8px}
  .kx-zbtn{width:42px;height:42px;border-radius:10px;border:2px solid rgba(189,255,0,.4);background:rgba(10,15,4,.7);color:var(--lime);font-size:22px;font-weight:900;cursor:pointer;backdrop-filter:blur(4px);box-shadow:0 3px 0 var(--lime-deep)}
  .kx-zbtn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--lime-deep)}
  /* drifting fog — only a thin haze at the far edges/corners; the realm itself is revealed */
  .kx-fog{position:absolute;inset:-12%;z-index:4;pointer-events:none;background:
    radial-gradient(26% 24% at 1% 2%,rgba(225,232,238,.72) 0 40%,transparent 72%),
    radial-gradient(28% 22% at 99% 1%,rgba(225,232,238,.66) 0 40%,transparent 72%),
    radial-gradient(26% 24% at 1% 99%,rgba(225,232,238,.66) 0 40%,transparent 72%),
    radial-gradient(28% 22% at 99% 98%,rgba(218,226,232,.62) 0 40%,transparent 72%);
    filter:blur(3px);animation:kxFog 26s ease-in-out infinite alternate}
  .kx-fog.f2{animation-duration:34s;animation-direction:alternate-reverse;opacity:.6;background:
    radial-gradient(22% 22% at 0% 50%,rgba(232,238,242,.55) 0 38%,transparent 70%),
    radial-gradient(24% 20% at 100% 52%,rgba(232,238,242,.5) 0 38%,transparent 70%)}
  @keyframes kxFog{from{transform:translate(-1.5%, -1%) scale(1)}to{transform:translate(1.5%, 1.2%) scale(1.04)}}
  /* clickable locations — positioned in WORLD %, counter-scaled so labels stay readable */
  .kx-loc{position:absolute;z-index:6;display:flex;flex-direction:column;align-items:center;gap:5px;background:none;border:none;cursor:pointer;padding:6px;transform:translate(-50%,-50%) scale(var(--inv,1));transform-origin:center}
  .kx-loc-pin{font-size:30px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.7));transition:transform .2s}
  .kx-loc:hover .kx-loc-pin{transform:scale(1.25) translateY(-3px)}
  .kx-loc-name{font-family:'Press Start 2P',monospace;font-size:9px;color:#fff;background:rgba(4,8,0,.85);border:2px solid #d9c77a;border-radius:8px;padding:7px 10px;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.6)}
  .kx-loc:hover .kx-loc-name{border-color:var(--lime);color:var(--lime)}
  .kx-here{font-family:'Press Start 2P',monospace;font-size:6px;color:#0a0f00;background:var(--lime);border-radius:100px;padding:3px 8px;animation:castBlink 1.4s steps(2) infinite;box-shadow:0 0 12px rgba(189,255,0,.5)}
  .kx-loc-yards{left:14%;top:37%}
  .kx-loc-yards .kx-loc-pin{color:var(--lime)}
  .kx-loc-home{left:55%;top:82%}
  /* the Quarters room */
  .kx-room{position:fixed;inset:0;z-index:2100;background:#0a0704;opacity:0;transition:opacity .35s;overflow:hidden}
  .kx-room.show{opacity:1}
  /* fixed world: authored at 1100×614, scaled as one unit (Club-Penguin-style igloo) */
  .kx-stage{position:absolute;top:0;left:0;width:1100px;height:614px;transform-origin:top left;will-change:transform}
  .kx-room-img{position:absolute;inset:0;background:url('../../RPG/Castellan/quarters-room.jpg') 0 0/100% 100% no-repeat;image-rendering:pixelated}
  .kx-room-title{position:absolute;top:20px;left:50%;transform:translateX(-50%);z-index:6;font-family:'Press Start 2P',monospace;font-size:11px;color:#f4e8c0;text-shadow:2px 2px 0 #000;letter-spacing:1px}
  .kx-billboard{position:absolute;top:44px;left:300px;transform:translateX(-50%);z-index:5;width:300px;background:linear-gradient(#3a2c16,#2a1f0e);border:3px solid #d9c08a;border-radius:7px;padding:11px 15px;box-shadow:0 6px 22px rgba(0,0,0,.65),inset 0 0 0 2px #1a1206}
  .kxb-head{font-family:'Press Start 2P',monospace;font-size:7px;color:#f4e8c0;text-align:center;margin-bottom:8px;letter-spacing:.3px;line-height:1.7}
  .kxb-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:4px 0;border-top:1px solid rgba(217,192,138,.25)}
  .kxb-row span{font-family:'Press Start 2P',monospace;font-size:5.5px;color:#c9b078;line-height:1.9}
  .kxb-row b{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;color:var(--lime);text-shadow:0 0 10px rgba(189,255,0,.4)}
  .kx-door-hint{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);z-index:5;font-family:'Press Start 2P',monospace;font-size:7px;color:rgba(244,232,192,.7);animation:castBlink 2s steps(2) infinite;pointer-events:none}
  .kx-mapbtn{position:absolute;top:18px;right:20px;z-index:7;font-family:'Press Start 2P',monospace;font-size:9px;color:#0a0f00;background:var(--lime);border:none;border-radius:8px;padding:11px 16px;cursor:pointer;box-shadow:0 4px 0 var(--lime-deep)}
  .kx-mapbtn:hover{filter:brightness(1.1)} .kx-mapbtn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--lime-deep)}
  .kx-empty-note{position:absolute;bottom:54px;left:50%;transform:translateX(-50%);z-index:5;font-size:12px;font-style:italic;color:rgba(244,232,192,.55);pointer-events:none}
  .kx-qplayer{z-index:6;width:64px;height:96px;transform-origin:50% 100%}
  .kx-qplayer .cast-sprite{height:82px;bottom:9px}
  .kx-qplayer .cast-name{font-size:7px;padding:3px 7px}
  .kx-qplayer .w-shadow{width:36px;height:10px}
  /* V3.8 — home buttons, furniture, tray */
  .kx-room-btns{position:absolute;top:18px;right:20px;z-index:9;display:flex;gap:8px}
  .kx-room-btns .kx-mapbtn{position:static}
  .kx-mapbtn.alt{background:#2a2f22;color:var(--lime);box-shadow:0 4px 0 #11140c}
  .kx-mapbtn.alt.on{background:var(--lime);color:#0a0f00;box-shadow:0 4px 0 var(--lime-deep)}
  .kx-furn{position:absolute;transform:translate(-50%,-100%)}
  .kx-furn img{width:100%;height:100%;display:block;image-rendering:pixelated;filter:drop-shadow(0 4px 5px rgba(0,0,0,.45))}
  .kx-furn.flat{transform:translate(-50%,-50%)}
  .kx-furn.editable{cursor:grab;outline:2px dashed rgba(189,255,0,.55);outline-offset:2px;border-radius:4px;touch-action:none}
  .kx-furn.editable:hover{outline-color:var(--lime)}
  .kx-furn.dragging{cursor:grabbing;outline-color:var(--lime);opacity:.88}
  .kx-furn-del{position:absolute;top:-12px;right:-12px;width:24px;height:24px;border-radius:50%;border:2px solid #fff;background:#e23b3b;color:#fff;font-size:11px;font-weight:900;cursor:pointer;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.5);line-height:1}
  .kx-furn-flip{position:absolute;top:-12px;left:-12px;width:24px;height:24px;border-radius:50%;border:2px solid #0a0f00;background:var(--lime);color:#0a0f00;font-size:13px;font-weight:900;cursor:pointer;z-index:2;box-shadow:0 2px 6px rgba(0,0,0,.5);line-height:1;touch-action:none}
  .kx-furn-flip:active{transform:scale(.9)}
  .kx-tray{position:absolute;left:0;right:0;bottom:0;z-index:10;background:linear-gradient(0deg,rgba(6,10,2,.97),rgba(6,10,2,.85));border-top:1px solid var(--border-hover);padding:10px 14px 14px;transform:translateY(112%);transition:transform .3s;max-height:32vh;overflow:auto}
  .kx-tray.show{transform:translateY(0)}
  .kx-tray-title{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:700;color:#cfd4c0;margin-bottom:8px;text-align:center;letter-spacing:.3px}
  .kx-tray-empty{font-family:'Orbitron',sans-serif;font-size:11px;color:#8b9379;text-align:center;padding:14px}
  .kx-tray-row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
  .kx-tray-item{position:relative;width:70px;height:70px;border:2px solid var(--border);border-radius:10px;background:#0d0f08;cursor:pointer;padding:6px;display:flex;align-items:center;justify-content:center}
  .kx-tray-item:hover{border-color:var(--lime)}
  .kx-tray-item.depleted{opacity:.4;cursor:default}
  .kx-tray-item img{max-width:100%;max-height:100%;image-rendering:pixelated;object-fit:contain}
  .kx-tray-q{position:absolute;bottom:1px;right:3px;font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;color:var(--lime);text-shadow:0 1px 3px #000}
  /* V3.8 — plaza NPCs */
  .pz-npc{position:absolute;transform:translate(-50%,-100%);z-index:5;pointer-events:none}
  .pz-npc img{height:100px;display:block;image-rendering:pixelated;filter:drop-shadow(0 5px 6px rgba(0,0,0,.5))}
  .pz-sign{position:absolute;top:-20px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Press Start 2P',monospace;font-size:7px;color:#f4e8c0;background:rgba(4,8,0,.82);border:1px solid #d9c08a;border-radius:6px;padding:4px 8px}
  .pz-prompt{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);white-space:nowrap;font-family:'Press Start 2P',monospace;font-size:7px;color:#0a0f00;background:var(--lime);border-radius:100px;padding:4px 9px;opacity:0;transition:opacity .2s}
  .pz-npc.near .pz-prompt{opacity:1}
  .pz-npc.near img{filter:drop-shadow(0 0 10px rgba(189,255,0,.65)) drop-shadow(0 5px 6px rgba(0,0,0,.5))}
  .kx-loc-plaza{left:82%;top:45%}
  .kx-loc-town{left:31%;top:63%}
  .kx-loc-town .kx-loc-pin{color:#ffd86b}

  /* ── Town Square scrolling world ── */
  .tsq-stage{position:absolute;top:0;left:0;width:1600px;height:893px;transform-origin:top left;will-change:transform}
  .tsq-img{position:absolute;inset:0;background:url('../../RPG/Castellan/town-square.jpg') 0 0/100% 100% no-repeat}
  .tsq-board{position:absolute;transform:translate(-50%,-100%);z-index:5;display:flex;flex-direction:column;align-items:center;cursor:default}
  .tsq-board .tsq-board-art{font-size:64px;filter:drop-shadow(0 6px 8px rgba(0,0,0,.6))}
  .tsq-board .pz-sign{position:static;margin-bottom:2px}
  .tsq-wanderer{position:absolute;width:58px;height:88px;transform:translate(-50%,-100%);transform-origin:50% 100%;z-index:4;pointer-events:none}
  .tsq-wanderer .cast-sprite{height:72px;bottom:8px;image-rendering:pixelated;filter:drop-shadow(0 5px 6px rgba(0,0,0,.45))}
  .tsq-hint{position:absolute;bottom:16px;left:50%;transform:translateX(-50%);z-index:7;font-family:'Press Start 2P',monospace;font-size:8px;color:#f4e8c0;background:rgba(4,8,0,.7);border:1px solid #6b5a2a;border-radius:8px;padding:8px 12px;pointer-events:none}

  /* ── Dialogue bubble ── */
  .tsq-talk{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:2400;width:min(560px,92vw);background:linear-gradient(180deg,#14142a,#0b0b16);border:2px solid var(--lime);border-radius:14px;padding:16px 18px;box-shadow:0 16px 50px rgba(0,0,0,.65);animation:tsqPop .22s cubic-bezier(.34,1.56,.64,1)}
  @keyframes tsqPop{from{opacity:0;transform:translateX(-50%) translateY(12px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
  .tsq-talk .who{font-family:'Press Start 2P',monospace;font-size:9px;color:var(--lime);margin-bottom:8px}
  .tsq-talk .line{font-size:14px;color:#efeede;line-height:1.5;min-height:42px}
  .tsq-talk .more{margin-top:10px;text-align:right;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;color:#9fb88a}

  /* ── Quest / News board ── */
  .qb-tabs{display:flex;gap:8px;padding:14px 22px 0}
  .qb-tab{flex:1;font-family:'Press Start 2P',monospace;font-size:9px;padding:11px 8px;border-radius:10px 10px 0 0;border:1px solid var(--border);border-bottom:none;background:rgba(255,255,255,.03);color:var(--text-secondary);cursor:pointer}
  .qb-tab.on{background:linear-gradient(180deg,rgba(189,255,0,.18),rgba(189,255,0,.04));color:var(--lime);border-color:rgba(189,255,0,.5)}
  .qb-body{padding:16px 22px 22px;overflow-y:auto}
  .qb-quest{display:flex;flex-direction:column;gap:8px;background:rgba(255,255,255,.03);border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin-bottom:12px;position:relative}
  .qb-quest.done{border-color:rgba(189,255,0,.5)}
  .qb-quest.secret{border-color:rgba(150,75,219,.55);background:linear-gradient(180deg,rgba(150,75,219,.12),rgba(255,255,255,.02))}
  .qb-qtop{display:flex;align-items:center;gap:10px}
  .qb-qname{font-family:'Orbitron',sans-serif;font-weight:900;font-size:15px;flex:1}
  .qb-qtag{font-family:'Press Start 2P',monospace;font-size:6px;padding:4px 7px;border-radius:100px;color:#0a0f00}
  .qb-qtag.daily{background:#7fd0ff} .qb-qtag.weekly{background:#ffd86b} .qb-qtag.secret{background:#c79bff}
  .qb-qdesc{font-size:12.5px;color:var(--text-secondary)}
  .qb-qbar{height:10px;border-radius:100px;background:rgba(255,255,255,.08);overflow:hidden}
  .qb-qfill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--lime-deep),var(--lime));transition:width .5s cubic-bezier(.2,.9,.3,1)}
  .qb-qfoot{display:flex;align-items:center;justify-content:space-between;gap:10px}
  .qb-qprog{font-family:'Press Start 2P',monospace;font-size:8px;color:#cfe0b8}
  .qb-qrew{font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;color:#ffe1a0}
  .qb-claim{font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;color:#0a0f00;background:var(--lime);border:none;border-radius:8px;padding:8px 14px;cursor:pointer;box-shadow:0 3px 0 var(--lime-deep)}
  .qb-claim:disabled{background:#2a2f22;color:#5e6b4a;box-shadow:none;cursor:default}
  .qb-claim.claimed{background:#2a2f22;color:#9fb88a;box-shadow:none;cursor:default}
  .qb-news{background:rgba(255,255,255,.03);border:1px solid var(--border);border-left:3px solid var(--lime);border-radius:10px;padding:13px 16px;margin-bottom:11px}
  .qb-news h4{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;margin-bottom:5px;display:flex;gap:8px;align-items:center}
  .qb-news .tagn{font-family:'Press Start 2P',monospace;font-size:6px;padding:3px 6px;border-radius:100px;color:#0a0f00;background:#9fb88a}
  .qb-news.lore{border-left-color:#c79bff} .qb-news.lore .tagn{background:#c79bff}
  .qb-news.patch{border-left-color:#7fd0ff} .qb-news.patch .tagn{background:#7fd0ff}
  .qb-news p{font-size:12.5px;color:var(--text-secondary);line-height:1.5}

  /* ── Mini-game shells ── */
  .mg-ov{position:fixed;inset:0;z-index:2500;background:radial-gradient(circle at 50% 30%,#0c1226,#05060d);display:flex;flex-direction:column;align-items:center;justify-content:center;opacity:0;transition:opacity .3s}
  .mg-ov.open{opacity:1}
  .mg-title{font-family:'Press Start 2P',monospace;font-size:13px;color:var(--lime);margin-bottom:12px;text-shadow:2px 2px 0 #000;text-align:center}
  .mg-canvas{background:#0a0f1e;border:2px solid #2a3550;border-radius:12px;box-shadow:0 18px 60px rgba(0,0,0,.6);image-rendering:pixelated;touch-action:none;max-width:94vw;max-height:62vh}
  .mg-hud{display:flex;gap:22px;margin-bottom:10px;font-family:'Press Start 2P',monospace;font-size:10px;color:#efeede}
  .mg-hud b{color:#ffd86b}
  .mg-btns{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap;justify-content:center}
  .mg-btn{font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;color:#0a0f00;background:var(--lime);border:none;border-radius:10px;padding:11px 20px;cursor:pointer;box-shadow:0 4px 0 var(--lime-deep)}
  .mg-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--lime-deep)}
  .mg-btn.ghost{background:#222838;color:var(--lime);box-shadow:0 4px 0 #11140c}
  .mg-cap{font-family:'Press Start 2P',monospace;font-size:7px;color:#9fb88a;margin-top:10px;text-align:center;line-height:1.6}
  .mg-over{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;background:rgba(3,5,12,.78);backdrop-filter:blur(3px);border-radius:12px}
  .mg-over .big{font-family:'Press Start 2P',monospace;font-size:18px;color:#fff;margin-bottom:8px}
  .mg-over .rew{font-family:'Orbitron',sans-serif;font-weight:900;font-size:16px;color:#ffd86b;margin-bottom:14px}
  /* V3.8 — shops (extend .bgg-*) */
  .shop-note{font-family:'Orbitron',sans-serif;font-size:11px;color:#9fb88a;text-align:center;padding:10px 22px 0}
  .shop-card{display:flex;flex-direction:column;align-items:center;padding:10px;gap:7px;cursor:default}
  .shop-thumb{width:100%;height:104px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 40%,#1c1c2a,#0a0a12);border-radius:8px}
  .shop-thumb img{max-width:76%;max-height:90%;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
  .home-thumb{width:100%;height:120px;background-size:cover;background-position:center;border-radius:8px;image-rendering:pixelated}
  .shop-rar{position:absolute;top:8px;left:8px;font-family:'Press Start 2P',monospace;font-size:6px;color:#0a0f00;border-radius:100px;padding:4px 7px;font-weight:900}
  .shop-own{position:absolute;top:8px;right:8px;font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;color:#fff;background:rgba(0,0,0,.6);border-radius:100px;padding:2px 8px}
  .shop-buy{font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;color:#0a0f00;background:var(--lime);border:none;border-radius:8px;padding:8px 14px;cursor:pointer;box-shadow:0 3px 0 var(--lime-deep)}
  .shop-buy:hover{filter:brightness(1.1)} .shop-buy:active{transform:translateY(2px);box-shadow:0 1px 0 var(--lime-deep)}
  .shop-buy.equip{background:#ffd86b;box-shadow:0 3px 0 #c79a2e}
  .shop-lock{font-family:'Orbitron',sans-serif;font-size:11px;font-weight:900;color:#ffe9a8}
  .shop-eqd{font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;color:var(--lime)}
  .shop-card.locked{opacity:.72}

  /* ═══════════ MOBILE MOVEMENT JOYSTICK (V3.6) ═══════════ */
  .joy{position:fixed;left:20px;bottom:24px;z-index:2300;display:none;touch-action:none;-webkit-user-select:none;user-select:none}
  .joy.on{display:block}
  .joy-base{position:relative;width:120px;height:120px;border-radius:50%;
    background:radial-gradient(circle at 50% 42%,rgba(189,255,0,.10),rgba(10,15,4,.42));
    border:2px solid rgba(189,255,0,.40);box-shadow:0 6px 24px rgba(0,0,0,.45),inset 0 0 22px rgba(189,255,0,.12);
    backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:.62;transition:opacity .2s;cursor:grab}
  .joy-base:active{opacity:.92;cursor:grabbing}
  /* faint directional ticks */
  .joy-base::before{content:'';position:absolute;inset:0;border-radius:50%;pointer-events:none;
    background:
      radial-gradient(2px 8px at 50% 10%,rgba(189,255,0,.5),transparent 70%),
      radial-gradient(2px 8px at 50% 90%,rgba(189,255,0,.5),transparent 70%),
      radial-gradient(8px 2px at 10% 50%,rgba(189,255,0,.5),transparent 70%),
      radial-gradient(8px 2px at 90% 50%,rgba(189,255,0,.5),transparent 70%)}
  .joy-stick{position:absolute;left:50%;top:50%;width:52px;height:52px;border-radius:50%;
    transform:translate(-50%,-50%);
    background:radial-gradient(circle at 40% 35%,#eaffb0,var(--lime) 60%,var(--lime-deep));
    border:2px solid rgba(255,255,255,.5);box-shadow:0 3px 10px rgba(0,0,0,.5),0 0 16px var(--lime-glow);
    transition:transform .05s linear}
  /* desktop: smaller + only show on coarse-pointer (touch) devices by default */
  @media (pointer:fine){ .joy{left:24px;bottom:28px} .joy-base{width:104px;height:104px;opacity:.5} .joy-stick{width:46px;height:46px} }
  @media (max-width:560px){ .joy-base{width:108px;height:108px} }

  /* ═══════════ 👑 CROWNS + 🦸 HERO CARD (V3.7) ═══════════ */
  .crown-badge{display:flex;align-items:center;gap:6px;margin:0 auto 16px;font-family:'Orbitron',sans-serif;font-weight:900;font-size:15px;color:#ffe9a8;background:linear-gradient(180deg,rgba(120,90,20,.45),rgba(60,45,10,.55));border:2px solid #d9b24a;border-radius:100px;padding:8px 18px;cursor:pointer;box-shadow:0 3px 0 #8a6a1e,0 0 18px rgba(217,178,74,.25);transition:transform .15s,box-shadow .2s}
  .crown-badge:hover{transform:translateY(-2px);box-shadow:0 5px 0 #8a6a1e,0 0 26px rgba(217,178,74,.45)}
  .crown-badge:active{transform:translateY(1px);box-shadow:0 2px 0 #8a6a1e}
  .crown-toast{position:fixed;bottom:88px;left:50%;transform:translateX(-50%);z-index:2400;font-family:'Orbitron',sans-serif;font-weight:900;font-size:15px;color:#0a0f00;background:linear-gradient(180deg,#ffe08a,#e8b53b);border:2px solid #fff3c4;border-radius:100px;padding:10px 22px;box-shadow:0 6px 24px rgba(217,178,74,.5),0 0 30px rgba(255,224,138,.6);animation:crownPop .4s cubic-bezier(.34,1.6,.5,1)}
  .crown-toast.out{opacity:0;transform:translateX(-50%) translateY(-16px);transition:opacity .4s,transform .4s}
  @keyframes crownPop{from{opacity:0;transform:translateX(-50%) translateY(18px) scale(.8)}to{opacity:1;transform:translateX(-50%) translateY(0) scale(1)}}
  /* Hero Card overlay */
  .hc-ov{position:fixed;inset:0;z-index:2350;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;background:rgba(2,4,10,.82);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s;padding:20px}
  .hc-ov.open{opacity:1}
  .hc-close{position:absolute;top:22px;right:24px;z-index:5;width:44px;height:44px;border-radius:12px;border:1px solid var(--border-hover);background:rgba(255,255,255,.06);color:#fff;font-size:18px;cursor:pointer}
  .hc-close:hover{transform:rotate(90deg);background:rgba(255,255,255,.12)}
  .hero-card{position:relative;width:min(360px,92vw);aspect-ratio:3/4.1;border-radius:20px;overflow:hidden;border:3px solid #d9b24a;box-shadow:0 24px 70px rgba(0,0,0,.7),0 0 50px rgba(217,178,74,.25),inset 0 0 0 2px rgba(255,255,255,.18);transform:translateY(20px) scale(.96);opacity:0;transition:transform .35s cubic-bezier(.34,1.4,.5,1),opacity .35s}
  .hc-ov.open .hero-card{transform:translateY(0) scale(1);opacity:1}
  .hc-bg{position:absolute;inset:0;background-size:cover;background-position:center;image-rendering:pixelated}
  .hc-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.15) 0%,transparent 30%,transparent 55%,rgba(0,0,0,.78) 100%)}
  .hc-sheen{position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 40%,rgba(255,255,255,.22) 48%,transparent 56%);background-size:250% 250%;animation:hcSheen 4s linear infinite;mix-blend-mode:overlay}
  @keyframes hcSheen{0%{background-position:160% 0}100%{background-position:-60% 0}}
  .hc-toprow{position:absolute;top:12px;left:12px;right:12px;z-index:3;display:flex;justify-content:space-between}
  .hc-chip{font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;padding:6px 12px;border-radius:100px;background:rgba(4,8,0,.7);border:1px solid rgba(255,255,255,.25);color:#fff;backdrop-filter:blur(3px)}
  .hc-lv{color:var(--lime);border-color:rgba(189,255,0,.5)}
  .hc-crowns{color:#ffe9a8;border-color:#d9b24a}
  .hc-hero{position:absolute;left:50%;bottom:238px;transform:translateX(-50%);height:38%;image-rendering:pixelated;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6));z-index:2;animation:hcBob 3.5s ease-in-out infinite}
  @keyframes hcBob{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(-7px)}}
  .hc-plate{position:absolute;left:0;right:0;bottom:0;z-index:3;padding:12px 14px 14px;text-align:center}
  .hc-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:21px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.8);letter-spacing:1px}
  .hc-title{font-size:9px;color:#d9c77a;font-family:'Press Start 2P',monospace;margin:3px 0 9px}
  /* stat chips */
  .hc-stats{display:flex;gap:8px;margin-bottom:9px}
  .hc-stat{flex:1;position:relative;background:rgba(4,8,0,.55);border:1px solid rgba(255,255,255,.16);border-radius:11px;padding:7px 4px 6px;backdrop-filter:blur(3px)}
  .hc-stat-ico{font-size:13px;display:block;line-height:1}
  .hc-stat-num{display:block;font-family:'Orbitron',sans-serif;font-weight:900;font-size:18px;color:#fff;line-height:1.15;text-shadow:0 1px 4px rgba(0,0,0,.7)}
  .hc-stat-sub{display:block;font-family:'Orbitron',sans-serif;font-size:9px;color:#9fb88a;margin-top:1px}
  .hc-stat-lbl{display:block;font-family:'Press Start 2P',monospace;font-size:6px;color:#cfd4c0;margin-top:4px;letter-spacing:.5px}
  .hc-xpbar{height:9px;border-radius:100px;background:rgba(0,0,0,.55);overflow:hidden;border:1px solid rgba(255,255,255,.2)}
  .hc-xpfill{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--lime-deep),var(--lime));box-shadow:0 0 12px var(--lime-glow);transition:width .6s cubic-bezier(.4,0,.2,1)}
  .hc-xptext{font-size:9px;color:#cfd4c0;margin:5px 0 9px;font-family:'Orbitron',sans-serif;font-weight:700}
  /* bottom slots */
  .hc-slots{display:flex;gap:8px;height:62px}
  .hc-slot{border-radius:11px;border:1px solid rgba(255,255,255,.16);background:rgba(4,8,0,.5);backdrop-filter:blur(3px)}
  .hc-slot-hold{flex:1.35;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:2px;position:relative;overflow:hidden}
  .hc-slot-hold.empty{justify-content:center}
  .hc-slot-hold .hcs-tag{position:absolute;top:5px;left:0;right:0;font-family:'Press Start 2P',monospace;font-size:5px;color:#8a937a;letter-spacing:.5px}
  .hc-slot-hold .hcs-sym{font-family:'Orbitron',sans-serif;font-weight:900;font-size:18px;margin-top:8px;animation:hcGlint 2.6s ease-in-out infinite}
  .hc-slot-hold .hcs-meta{font-family:'Orbitron',sans-serif;font-size:8px;color:#cdd3c0;font-weight:700}
  .hc-slot-hold .hcs-empty{font-family:'Orbitron',sans-serif;font-size:9px;color:#7f876f}
  .hc-slot-hold.attack{box-shadow:inset 0 0 22px rgba(0,230,118,.32);border-color:rgba(0,230,118,.5)}
  .hc-slot-hold.midfield{box-shadow:inset 0 0 22px rgba(255,171,0,.32);border-color:rgba(255,171,0,.5)}
  .hc-slot-hold.defensive{box-shadow:inset 0 0 22px rgba(239,83,80,.32);border-color:rgba(239,83,80,.5)}
  .hcs-sym{text-shadow:0 0 10px rgba(255,255,255,.4)}
  @keyframes hcGlint{0%,100%{filter:brightness(1)}50%{filter:brightness(1.45)}}
  .hc-slot-badges{flex:1;display:flex;gap:6px;padding:7px;background:transparent;border:none}
  .hc-badge{flex:1;border-radius:10px;border:1px dashed rgba(255,255,255,.22);background:rgba(4,8,0,.5);display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-weight:900;font-size:20px;color:#566048;backdrop-filter:blur(3px);cursor:pointer;transition:transform .12s,border-color .12s}
  .hc-badge:hover{transform:translateY(-2px);border-color:var(--lime)}
  .hc-badge.filled{border-style:solid;border-color:#d9b24a;background:radial-gradient(circle at 50% 38%,rgba(217,178,74,.32),rgba(4,8,0,.55))}
  .hc-badge .hcb-ico{font-size:26px;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
  .kxb-stars{letter-spacing:1px;color:#ffd86b!important;text-shadow:0 0 8px rgba(255,184,59,.5)}
  /* badge picker (extends .bgg-*) */
  .badge-card{position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 8px;border:2px solid var(--border);border-radius:12px;background:#0c0e14;cursor:pointer;text-align:center;transition:transform .12s,border-color .12s}
  .badge-card:hover:not([disabled]){transform:translateY(-3px);border-color:var(--lime)}
  .badge-card.locked{opacity:.55;cursor:default}
  .badge-card.equipped{border-color:#d9b24a;box-shadow:0 0 14px rgba(217,178,74,.3)}
  .badge-ico{font-size:34px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6))}
  .badge-card.locked .badge-ico{filter:grayscale(1) brightness(.8)}
  .badge-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;color:#fff}
  .badge-desc{font-family:'Orbitron',sans-serif;font-size:9px;color:#9fb88a;line-height:1.35;min-height:24px}
  .badge-rew{font-family:'Orbitron',sans-serif;font-weight:700;font-size:9px;color:#ffe9a8}
  .badge-card.equipped .badge-rew{color:var(--lime)}
  .badge-card.clearslot{border-style:dashed}
  /* ── achievements menu ── */
  .ach-meter{padding:12px 22px 0}
  .ach-meter-top{display:flex;justify-content:space-between;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:#9fb88a;letter-spacing:.5px;margin-bottom:6px}
  .ach-meter-bar{height:8px;border-radius:100px;background:rgba(0,0,0,.45);overflow:hidden;border:1px solid rgba(255,255,255,.1)}
  .ach-meter-bar>div{height:100%;border-radius:100px;background:linear-gradient(90deg,#ffd86b,#ffb43b);transition:width .5s cubic-bezier(.4,0,.2,1)}
  .ach-collectall{display:block;width:calc(100% - 44px);margin:14px 22px 0;font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;letter-spacing:1px;color:#0a0f00;background:linear-gradient(90deg,#ffd86b,#ffb43b);border:none;border-radius:12px;padding:13px 0;cursor:pointer;box-shadow:0 4px 0 #c79a2e,0 0 20px rgba(255,184,59,.4)}
  .ach-collectall:hover{filter:brightness(1.07)} .ach-collectall:active{transform:translateY(2px);box-shadow:0 2px 0 #c79a2e}
  .ach-tabs{display:flex;gap:8px;padding:12px 22px 4px}
  .ach-tab{flex:1;font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;letter-spacing:1px;color:#9fb88a;background:rgba(255,255,255,.04);border:1px solid var(--border);border-radius:10px;padding:11px 0;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px}
  .ach-tab.on{color:#0a0f00;background:var(--lime);border-color:var(--lime)}
  .ach-tabdot{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;border-radius:100px;background:#e23b3b;color:#fff;font-size:10px;font-weight:900;padding:0 5px}
  .ach-tab.on .ach-tabdot{background:#0a0f00;color:var(--lime)}
  .ach-empty{font-family:'Orbitron',sans-serif;font-size:12px;color:#8b9379;text-align:center;padding:40px 24px;line-height:1.6}
  .ach-list{display:flex;flex-direction:column;gap:10px;padding:14px 22px}
  .ach-card{position:relative;display:flex;align-items:center;gap:14px;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:rgba(255,255,255,.025)}
  .ach-card.ready{border-color:var(--lime);background:linear-gradient(90deg,rgba(189,255,0,.10),rgba(189,255,0,.02))}
  /* glow via a composited pseudo-element (animate opacity only — no repaint, no jank over the blur) */
  .ach-card.ready::after{content:'';position:absolute;inset:-1px;border-radius:12px;pointer-events:none;box-shadow:0 0 22px rgba(189,255,0,.5);opacity:.3;will-change:opacity;transform:translateZ(0);animation:achGlow 1.8s ease-in-out infinite}
  @keyframes achGlow{0%,100%{opacity:.22}50%{opacity:.75}}
  @media (prefers-reduced-motion:reduce){.ach-card.ready::after{animation:none;opacity:.5}}
  .ach-card.claimed{opacity:.62}
  .ach-ico{font-size:34px;line-height:1;filter:drop-shadow(0 2px 5px rgba(0,0,0,.6));flex-shrink:0;width:42px;text-align:center}
  .ach-card.claimed .ach-ico{filter:grayscale(.4)}
  .ach-mid{flex:1;min-width:0}
  .ach-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;color:#fff;display:flex;align-items:center;gap:8px}
  .ach-readytag{font-family:'Orbitron',sans-serif;font-size:8px;font-weight:900;letter-spacing:1px;color:#0a0f00;background:var(--lime);border-radius:100px;padding:3px 8px;animation:castBlink 1s steps(2) infinite}
  .ach-desc{font-family:'Inter',sans-serif;font-size:12px;color:var(--text-dim);margin-top:2px}
  .ach-barwrap{height:8px;border-radius:100px;background:rgba(0,0,0,.45);overflow:hidden;margin-top:8px;border:1px solid rgba(255,255,255,.1)}
  .ach-bar{height:100%;border-radius:100px;background:linear-gradient(90deg,var(--lime-deep),var(--lime));transition:width .5s cubic-bezier(.4,0,.2,1)}
  .ach-bar.full{background:linear-gradient(90deg,#ffd86b,#ffb43b)}
  .ach-prog{font-family:'Orbitron',sans-serif;font-size:10px;color:#9fb88a;margin-top:4px;font-weight:700}
  .ach-right{flex-shrink:0;text-align:right}
  .ach-reward{font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;color:#ffe9a8}
  .ach-collected{font-family:'Orbitron',sans-serif;font-weight:900;font-size:11px;color:var(--lime)}
  .ach-collect{font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;color:#0a0f00;background:var(--lime);border:none;border-radius:10px;padding:12px 16px;cursor:pointer;box-shadow:0 4px 0 var(--lime-deep),0 0 18px rgba(189,255,0,.4);white-space:nowrap}
  .ach-collect:hover{filter:brightness(1.1)} .ach-collect:active{transform:translateY(2px);box-shadow:0 2px 0 var(--lime-deep)}
  /* claim dopamine burst */
  .ach-pop{position:fixed;z-index:3000;transform:translate(-50%,-50%);font-family:'Orbitron',sans-serif;font-weight:900;font-size:30px;color:#ffd86b;text-shadow:0 0 16px rgba(255,184,59,.8),0 2px 6px #000;pointer-events:none;animation:achPop 1.2s cubic-bezier(.2,.7,.3,1) forwards}
  @keyframes achPop{0%{opacity:0;transform:translate(-50%,-50%) scale(.4)}25%{opacity:1;transform:translate(-50%,-90%) scale(1.15)}100%{opacity:0;transform:translate(-50%,-220%) scale(1)}}
  .ach-coin{position:fixed;z-index:2999;transform:translate(-50%,-50%);font-size:20px;pointer-events:none;animation:achCoin .9s ease-out forwards}
  @keyframes achCoin{0%{opacity:1;transform:translate(-50%,-50%) translate(0,0) scale(.6)}100%{opacity:0;transform:translate(-50%,-50%) translate(var(--dx),var(--dy)) scale(1.2)}}
  .crown-amt.crown-pump{animation:crownPump .5s ease-out}
  @keyframes crownPump{0%{transform:scale(1)}40%{transform:scale(1.45);color:#fff}100%{transform:scale(1)}}
  .gm-ach-dot{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;border-radius:100px;background:#e23b3b;color:#fff;font-size:11px;font-weight:900;margin-left:8px;box-shadow:0 0 10px rgba(226,59,59,.6)}
  .gm-ready-tag{position:absolute;top:8px;right:8px;font-family:'Orbitron',sans-serif;font-size:8px;font-weight:900;letter-spacing:.5px;color:#0a0f00;background:var(--lime);border-radius:100px;padding:3px 8px;box-shadow:0 0 10px rgba(189,255,0,.5)}
  /* ── PET SHOP ── */
  .pet-card{display:flex;flex-direction:column;align-items:center;gap:5px;padding:10px;cursor:default}
  .pet-thumb{width:100%;height:90px;display:flex;align-items:center;justify-content:center;border-radius:10px;position:relative;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--pc) 30%,#0a0a12),#0a0a12)}
  .pet-thumb::after{content:'';position:absolute;inset:0;border-radius:10px;box-shadow:inset 0 0 24px var(--pc);opacity:.5;pointer-events:none}
  .pet-thumb img{max-width:74%;max-height:84%;image-rendering:pixelated;object-fit:contain;filter:drop-shadow(0 0 8px var(--pc));animation:petBob 2.4s ease-in-out infinite;position:relative;z-index:1}
  .pet-thumb.mini{width:64px;height:64px}
  .pet-boon{font-family:'Orbitron',sans-serif;font-size:9px;color:var(--lime);text-align:center;line-height:1.3;min-height:24px}
  .pet-card.rar-rare{border-color:rgba(56,122,219,.5)} .pet-card.rar-epic{border-color:rgba(150,75,219,.5)} .pet-card.rar-legendary{border-color:rgba(255,184,59,.6);box-shadow:0 0 14px rgba(255,184,59,.22)}
  .pet-card.sel{border-color:var(--lime);box-shadow:0 0 16px var(--lime-glow)}
  .pet-mini{width:38px;height:38px;image-rendering:pixelated;object-fit:contain}
  .pet-lv{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:900;color:#ffe9a8;background:rgba(0,0,0,.4);border-radius:100px;padding:2px 8px;margin-left:6px}
  /* customize tab */
  .pet-custom{display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 22px}
  .pet-pickrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
  .pet-pick{width:54px;height:54px;border:2px solid var(--border);border-radius:10px;background:#0d0f08;cursor:pointer;padding:5px;display:flex;align-items:center;justify-content:center}
  .pet-pick.on{border-color:var(--lime);box-shadow:0 0 12px var(--lime-glow)}
  .pet-pick img{max-width:100%;max-height:100%;image-rendering:pixelated}
  .pet-preview{width:140px;height:140px;border-radius:16px;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle,color-mix(in srgb,var(--pc) 35%,#0a0a12),#0a0a12);box-shadow:inset 0 0 30px var(--pc)}
  .pet-preview img{max-width:70%;max-height:70%;image-rendering:pixelated;filter:drop-shadow(0 0 10px var(--pc));animation:petBob 2.4s ease-in-out infinite}
  .pet-field{display:flex;align-items:center;gap:12px;width:min(360px,92%);font-family:'Orbitron',sans-serif;font-size:11px;font-weight:700;color:#9fb88a}
  .pet-field>span{width:54px}
  .pet-field input[type=text],.pet-field #pet-name-input{flex:1;font-family:'Orbitron',sans-serif;font-size:13px;color:var(--lime);background:#0a1804;border:2px solid var(--border);border-radius:8px;padding:9px 12px;text-transform:uppercase}
  .pet-field input[type=range]{flex:1;accent-color:var(--lime)}
  .pet-pickcard{align-items:center}
  /* follower in home/plaza */
  .kx-pet{position:absolute;width:32px;transform:translate(-50%,-100%);pointer-events:none}
  .kx-pet img{width:100%;image-rendering:pixelated;position:relative;z-index:2;animation:petBob 2.2s ease-in-out infinite}
  .kx-pet .pet-aura{position:absolute;left:50%;top:45%;width:38px;height:38px;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,var(--pc),transparent 65%);opacity:.4;filter:blur(4px);animation:petAuraPulse 2.6s ease-in-out infinite;z-index:1}
  .kx-pet .pet-spark{position:absolute;left:50%;top:55%;width:4px;height:4px;border-radius:50%;background:var(--pc);box-shadow:0 0 5px var(--pc);opacity:0;z-index:3}
  .kx-pet .pet-spark.s1{animation:petSpark 2.2s ease-in-out infinite}
  .kx-pet .pet-spark.s2{animation:petSpark 2.2s ease-in-out .7s infinite}
  .kx-pet .pet-spark.s3{animation:petSpark 2.2s ease-in-out 1.4s infinite}
  @keyframes petBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
  @keyframes petAuraPulse{0%,100%{opacity:.28;transform:translate(-50%,-50%) scale(.92)}50%{opacity:.5;transform:translate(-50%,-50%) scale(1.08)}}
  @keyframes petSpark{0%{opacity:0;transform:translate(0,0) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translate(calc(var(--sx,12px)),-26px) scale(1)}}
  .kx-pet .pet-spark.s2{--sx:-14px} .kx-pet .pet-spark.s3{--sx:6px}
  /* hero card pet slot */
  .hc-petslot{position:absolute;top:52px;left:12px;z-index:4;width:46px;height:46px;border-radius:12px;border:1px dashed rgba(255,255,255,.3);background:rgba(4,8,0,.55);cursor:pointer;display:flex;align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:0}
  .hc-petslot:hover{border-color:var(--lime)}
  .hc-petslot.filled{border-style:solid;border-color:var(--pc,#d9b24a);background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--pc) 40%,rgba(4,8,0,.6)),rgba(4,8,0,.6))}
  .hc-petslot img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated;filter:drop-shadow(0 0 6px var(--pc));position:relative;z-index:2;animation:petBob 2.4s ease-in-out infinite}
  .hc-petslot .pet-aura{position:absolute;inset:0;border-radius:12px;background:radial-gradient(circle,var(--pc),transparent 70%);opacity:.4;animation:petAuraPulse 2.6s ease-in-out infinite}
  .hc-petadd{font-size:20px;opacity:.6}
  .hc-pettip{position:absolute;left:54px;top:0;width:170px;background:rgba(6,10,2,.96);border:1px solid var(--border-hover);border-radius:8px;padding:8px 10px;font-family:'Orbitron',sans-serif;font-size:9px;line-height:1.5;color:#cfd4c0;text-align:left;opacity:0;pointer-events:none;transition:opacity .15s;z-index:6}
  .hc-pettip b{color:var(--lime)}
  .hc-petslot:hover .hc-pettip{opacity:1}
  .hc-actions{display:flex;gap:10px;z-index:5}
  .hc-btn{font-family:'Orbitron',sans-serif;font-weight:700;font-size:12px;color:#0a0f00;background:var(--lime);border:none;border-radius:10px;padding:13px 22px;cursor:pointer;box-shadow:0 4px 0 var(--lime-deep)}
  .hc-btn:hover{filter:brightness(1.1)} .hc-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--lime-deep)}
  /* Background gallery */
  .bgg-ov{position:fixed;inset:0;z-index:2360;display:flex;align-items:center;justify-content:center;background:rgba(2,4,10,.85);backdrop-filter:blur(8px);opacity:0;transition:opacity .3s;padding:16px}
  .bgg-ov.open{opacity:1}
  .bgg-panel{width:min(820px,96vw);max-height:88vh;display:flex;flex-direction:column;background:linear-gradient(180deg,#121222,#0b0b16);border:1px solid var(--border-hover);border-radius:18px;overflow:hidden;box-shadow:0 24px 80px rgba(0,0,0,.7)}
  .bgg-head{display:flex;align-items:center;gap:14px;padding:18px 22px;border-bottom:1px solid var(--border)}
  .bgg-head h3{font-family:'Orbitron',sans-serif;font-size:17px;font-weight:900;flex:1}
  .bgg-bal{font-family:'Orbitron',sans-serif;font-weight:900;color:#ffe9a8;font-size:14px}
  .bgg-head .hc-close{position:static}
  .bgg-scroll{overflow-y:auto;padding:6px 0 14px;flex:1 1 auto;min-height:0;-webkit-overflow-scrolling:touch}
  .bgg-sec{padding:6px 22px 10px}
  .bgg-sec.crownshop{background:linear-gradient(180deg,rgba(217,178,74,.10),rgba(217,178,74,.02));border-top:1px solid rgba(217,178,74,.3);margin-top:8px}
  .bgg-sub{display:flex;align-items:baseline;gap:10px;font-family:'Orbitron',sans-serif;font-size:13px;font-weight:900;color:#fff;padding:10px 2px 12px;letter-spacing:.5px}
  .bgg-sec.crownshop .bgg-sub{color:#ffe1a0}
  .bgg-subnote{font-family:'Orbitron',sans-serif;font-size:9px;font-weight:600;color:#8b9379;letter-spacing:0}
  .bgg-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}
  .bgg-card{position:relative;border:2px solid var(--border);border-radius:12px;overflow:hidden;cursor:pointer;background:#0a0a12;padding:0;transition:transform .15s,border-color .15s}
  .bgg-card:hover{transform:translateY(-3px);border-color:var(--border-hover)}
  .bgg-card.sel{border-color:var(--lime);box-shadow:0 0 16px var(--lime-glow)}
  .bgg-card.locked{opacity:.82}
  .bgg-card.starter{opacity:.72}
  .bgg-card.blurred{cursor:default;opacity:.9}
  .bgg-card.blurred:hover{transform:none}
  .bgg-thumb{width:100%;aspect-ratio:16/9;background-size:cover;background-position:center;image-rendering:pixelated}
  .bgg-card.locked .bgg-thumb{filter:grayscale(.5) brightness(.62)}
  .bgg-thumb.mystery{display:flex;align-items:center;justify-content:center;background:repeating-linear-gradient(45deg,#15151f,#15151f 10px,#101019 10px,#101019 20px);filter:none}
  .bgg-q{font-family:'Orbitron',sans-serif;font-weight:900;font-size:34px;color:#3a3f33;filter:blur(1px)}
  .bgg-name{display:block;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:700;color:#fff;padding:7px 8px;text-align:center}
  .bgg-lock{position:absolute;top:6px;right:6px;font-family:'Orbitron',sans-serif;font-size:10px;font-weight:900;color:#ffe9a8;background:rgba(4,8,0,.8);border:1px solid #d9b24a;border-radius:100px;padding:3px 8px}
  .bgg-eq{position:absolute;top:6px;left:6px;font-family:'Orbitron',sans-serif;font-size:8px;font-weight:900;color:#0a0f00;background:var(--lime);border-radius:100px;padding:3px 7px;z-index:2}
  .bgg-rar{position:absolute;top:6px;left:6px;font-family:'Press Start 2P',monospace;font-size:6px;font-weight:900;border-radius:100px;padding:4px 7px;letter-spacing:.5px}
  .bgg-card.rar-common .bgg-rar{color:#dfe6d2;background:rgba(120,130,110,.85)}
  .bgg-card.rar-rare .bgg-rar{color:#fff;background:rgba(56,122,219,.9)}
  .bgg-card.rar-epic .bgg-rar{color:#fff;background:rgba(150,75,219,.9)}
  .bgg-card.rar-legendary .bgg-rar{color:#1a1200;background:linear-gradient(90deg,#ffd86b,#ffb43b)}
  .bgg-card.rar-rare{border-color:rgba(56,122,219,.55)}
  .bgg-card.rar-epic{border-color:rgba(150,75,219,.55)}
  .bgg-card.rar-legendary{border-color:rgba(255,184,59,.6);box-shadow:0 0 14px rgba(255,184,59,.25)}
  
  /* ══ ASCENSION — real-milestone badge trees ══ */
  .asc-wrap{display:flex;flex-direction:column;gap:14px;padding:14px 18px 22px}
  .asc-tree{display:flex;gap:16px;align-items:center;background:rgba(255,255,255,.035);border:1px solid var(--border);border-left:4px solid var(--c,#888);border-radius:14px;padding:14px 16px}
  .asc-badgewrap{position:relative;flex:0 0 auto;width:96px;height:96px;display:flex;align-items:center;justify-content:center}
  .asc-badge{width:96px;height:96px;object-fit:contain;filter:grayscale(.7) brightness(.55);transition:filter .3s}
  .asc-badge.earned{filter:drop-shadow(0 0 10px var(--c))}
  .asc-tierlabel{position:absolute;bottom:-2px;left:50%;transform:translateX(-50%);font-family:'Press Start 2P',monospace;font-size:8px;color:#fff;background:rgba(0,0,0,.72);border:1px solid var(--c,#888);border-radius:100px;padding:3px 8px;white-space:nowrap}
  .asc-tierlabel.glint{background:linear-gradient(100deg,rgba(0,0,0,.72) 30%,var(--c) 50%,rgba(0,0,0,.72) 70%);background-size:200% 100%;animation:ascGlint 2.6s linear infinite}
  @keyframes ascGlint{0%{background-position:200% 0}100%{background-position:-200% 0}}
  .asc-info{flex:1;min-width:0}
  .asc-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:15px;color:#fff}
  .asc-sub{font-size:11px;color:var(--text-dim);margin-bottom:2px}
  .asc-cur{font-family:'Press Start 2P',monospace;font-size:11px;color:var(--c,#fff);margin:4px 0 8px}
  .asc-track{display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px}
  .asc-dot{width:11px;height:11px;border-radius:3px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.15)}
  .asc-dot.ready{background:var(--c);opacity:.5;animation:ascPulse 1.3s ease-in-out infinite}
  .asc-dot.done{background:var(--c);box-shadow:0 0 6px var(--c);border-color:var(--c)}
  @keyframes ascPulse{50%{opacity:1}}
  .asc-barwrap{height:8px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden;margin-bottom:8px}
  .asc-bar{height:100%;border-radius:100px;background:var(--c,#888);transition:width .5s cubic-bezier(.2,.9,.3,1)}
  .asc-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
  .asc-claim{font-family:'Orbitron',sans-serif;font-weight:900;font-size:12px;color:#0a0f00;background:var(--c,#fff);border:none;border-radius:8px;padding:8px 14px;cursor:pointer;box-shadow:0 3px 0 rgba(0,0,0,.4);animation:ascPulse 1.4s ease-in-out infinite}
  .asc-claim:active{transform:translateY(2px);box-shadow:0 1px 0 rgba(0,0,0,.4)}
  .asc-maxed{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--c)}
  .asc-nextinfo{font-size:11px;color:var(--text-secondary)}
  .asc-boon{font-size:10px;color:var(--c);font-weight:700;margin-left:auto}
  .asc-locked{display:flex;flex-direction:column;align-items:center;text-align:center;padding:34px 24px;gap:12px}
  .asc-chains{font-size:32px;letter-spacing:2px;filter:drop-shadow(0 2px 6px rgba(0,0,0,.6))}
  .asc-locktitle{font-family:'Orbitron',sans-serif;font-weight:900;font-size:20px;color:#fff}
  .asc-lockmsg{font-size:13px;color:var(--text-secondary);max-width:450px;line-height:1.55}
  .asc-connectbtn{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;color:#0a0f00;background:var(--lime);border:none;border-radius:10px;padding:12px 22px;cursor:pointer;box-shadow:0 4px 0 var(--lime-deep);margin-top:4px}
  .asc-connectbtn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--lime-deep)}
  .asc-preview{display:flex;gap:16px;margin-top:14px}
  .asc-prev{position:relative;width:72px;height:72px;border-radius:12px;overflow:hidden;border:1px solid var(--c,#555)}
  .asc-prev img{width:100%;height:100%;object-fit:contain;filter:grayscale(1) brightness(.4) blur(1px)}
  .asc-prevlock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:22px}
  .badge-card.asc{border-color:var(--c)}
  .badge-card .badge-img{width:54px;height:54px;object-fit:contain;margin:0 auto 4px;display:block;filter:drop-shadow(0 0 8px var(--c))}
  .hc-badge{position:relative}
  .hcb-img{width:100%;height:100%;object-fit:contain}
  .hcb-tier{position:absolute;bottom:-3px;right:-3px;font-family:'Press Start 2P',monospace;font-size:6px;color:#0a0f00;background:var(--lime);border-radius:100px;padding:2px 4px}

  /* ══ ROYAL ADVISOR (v3.9 — chatbot-style objective widget; unused by v3.8) ══ */
  .adv-root{position:fixed;right:18px;bottom:20px;z-index:900;display:flex;flex-direction:column;align-items:flex-end;gap:10px;font-family:'Inter',sans-serif}
  .adv-fab{position:relative;width:60px;height:60px;border-radius:50%;border:2px solid var(--lime,#bdff00);background:radial-gradient(circle at 50% 35%,#1a1f2e,#06060e);box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 18px rgba(189,255,0,.25);cursor:pointer;display:flex;align-items:center;justify-content:center;animation:advBob 3.2s ease-in-out infinite;transition:transform .18s}
  .adv-fab:hover{transform:scale(1.08)}
  .adv-fab:active{transform:scale(.95)}
  .adv-ava{font-size:28px;line-height:1;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
  @keyframes advBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .adv-fab.adv-nudge{box-shadow:0 8px 24px rgba(0,0,0,.5),0 0 22px rgba(189,255,0,.55)}
  .adv-fab.adv-nudge::after{content:'';position:absolute;inset:-3px;border-radius:50%;border:2px solid var(--lime,#bdff00);opacity:.6;animation:advPulse 1.8s ease-out infinite}
  @keyframes advPulse{0%{transform:scale(1);opacity:.6}100%{transform:scale(1.5);opacity:0}}
  .adv-dot{position:absolute;top:-2px;right:-2px;width:15px;height:15px;border-radius:50%;background:var(--lime,#bdff00);border:2px solid #06060e;box-shadow:0 0 8px rgba(189,255,0,.8)}
  /* transient tip speech bubble */
  .adv-bubble{max-width:240px;background:linear-gradient(180deg,#14142a,#0b0b16);border:1.5px solid var(--lime,#bdff00);border-radius:14px 14px 4px 14px;padding:10px 13px;font-size:12.5px;line-height:1.5;color:var(--text,#eef0f5);box-shadow:0 10px 30px rgba(0,0,0,.5);opacity:0;transform:translateY(6px);transition:opacity .25s,transform .25s}
  .adv-bubble.adv-bubble-in{opacity:1;transform:translateY(0)}
  /* expandable panel */
  .adv-panel{width:300px;max-width:86vw;max-height:64vh;overflow-y:auto;background:linear-gradient(180deg,#10101f,#080810);border:1.5px solid var(--border,#2a2a3a);border-radius:16px;box-shadow:0 18px 50px rgba(0,0,0,.6);animation:advPanelIn .22s cubic-bezier(.34,1.4,.6,1)}
  @keyframes advPanelIn{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
  .adv-head{display:flex;align-items:center;justify-content:space-between;padding:13px 14px 10px;border-bottom:1px solid var(--border,#2a2a3a)}
  .adv-title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;color:#fff}
  .adv-x{background:none;border:none;color:var(--text-dim,#8a8fa0);font-size:16px;cursor:pointer;padding:2px 6px;border-radius:6px}
  .adv-x:hover{color:#fff;background:rgba(255,255,255,.08)}
  .adv-body{padding:13px 14px 14px;display:flex;flex-direction:column;gap:12px}
  .adv-main{background:rgba(189,255,0,.06);border:1px solid rgba(189,255,0,.22);border-radius:12px;padding:11px 12px}
  .adv-main-btn{display:block;width:100%;text-align:left;font-family:inherit;cursor:pointer;transition:background .15s,border-color .15s}
  .adv-main-btn:hover{background:rgba(189,255,0,.12);border-color:rgba(189,255,0,.5)}
  .adv-main-btn:active{transform:translateY(1px)}
  .adv-glabel{font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;color:var(--lime,#bdff00)}
  .adv-gsub{font-size:11.5px;color:var(--text-secondary,#b6bbc8);margin-top:2px}
  .adv-barwrap{height:7px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden;margin-top:9px}
  .adv-bar{height:100%;border-radius:100px;background:var(--lime,#bdff00);transition:width .5s cubic-bezier(.2,.9,.3,1)}
  .adv-gnum{font-family:'Press Start 2P',monospace;font-size:8px;color:var(--text-secondary,#b6bbc8);margin-top:6px;text-align:right}
  .adv-sidewrap{display:flex;flex-direction:column;gap:7px}
  .adv-side{display:flex;flex-wrap:wrap;align-items:center;gap:3px 8px;text-align:left;background:rgba(255,255,255,.04);border:1px solid var(--border,#2a2a3a);border-radius:10px;padding:9px 11px;cursor:pointer;transition:background .15s,border-color .15s}
  .adv-slabel{white-space:nowrap}
  .adv-side:hover{background:rgba(255,255,255,.08);border-color:var(--lime,#bdff00)}
  .adv-slabel{font-weight:700;font-size:12.5px;color:var(--text,#eef0f5);flex:1}
  .adv-ssub{font-size:10.5px;color:var(--text-dim,#8a8fa0);flex-basis:100%;order:3;width:100%}
  .adv-go{font-size:18px;color:var(--lime,#bdff00);font-weight:700}
  .adv-says{font-size:11.5px;font-style:italic;line-height:1.5;color:var(--text-secondary,#b6bbc8);border-top:1px dashed var(--border,#2a2a3a);padding-top:10px}

  /* Accessibility + test-stability: calm the Advisor's continuous motion when the user (or a
     test runner) prefers reduced motion. The fab stops bobbing/pulsing but stays fully usable. */
  @media (prefers-reduced-motion: reduce){
    .adv-fab{animation:none}
    .adv-fab.adv-nudge::after{animation:none;opacity:.5}
    .adv-bubble{transition:none}
    .adv-bar{transition:none}
  }

  /* ══ CHAPTER-UP celebration (v3.9 — fires when real portfolio crosses a chapter threshold) ══ */
  .cup-ov{position:fixed;inset:0;z-index:2600;display:flex;align-items:center;justify-content:center;padding:20px;background:radial-gradient(circle at 50% 40%,rgba(10,12,24,.82),rgba(2,3,8,.94));backdrop-filter:blur(8px);opacity:0;transition:opacity .3s}
  .cup-ov.cup-in{opacity:1}
  .cup-card{position:relative;max-width:440px;width:100%;text-align:center;padding:34px 28px 30px;border-radius:22px;background:linear-gradient(180deg,#12132a,#0a0a14);border:2px solid var(--cup,#bdff00);box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 60px color-mix(in srgb,var(--cup,#bdff00) 35%,transparent);transform:translateY(16px) scale(.94);opacity:0;transition:transform .45s cubic-bezier(.2,1.3,.4,1),opacity .35s}
  .cup-ov.cup-in .cup-card{transform:none;opacity:1}
  .cup-kicker{font-family:'Press Start 2P',monospace;font-size:11px;letter-spacing:1px;color:var(--cup,#bdff00);text-shadow:0 0 14px color-mix(in srgb,var(--cup,#bdff00) 60%,transparent)}
  .cup-name{font-family:'Orbitron',sans-serif;font-weight:900;font-size:34px;line-height:1.1;color:#fff;margin:14px 0 8px;text-shadow:0 2px 10px rgba(0,0,0,.5)}
  .cup-sub{font-size:13px;color:var(--text-secondary,#b6bbc8);margin-bottom:18px}
  .cup-reward{display:inline-block;font-family:'Orbitron',sans-serif;font-weight:900;font-size:20px;color:#0a0f00;background:linear-gradient(180deg,#ffe08a,#e8b53b);border:2px solid #fff3c4;border-radius:100px;padding:8px 20px;margin-bottom:22px;box-shadow:0 6px 24px rgba(217,178,74,.5)}
  .cup-btn{display:block;width:100%;font-family:'Orbitron',sans-serif;font-weight:900;font-size:14px;color:#0a0f00;background:var(--cup,#bdff00);border:none;border-radius:12px;padding:14px;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.4);transition:transform .12s}
  .cup-btn:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.4)}
  @media (prefers-reduced-motion: reduce){ .cup-card{transition:opacity .2s} .cup-ov.cup-in .cup-card{transform:none} }

  /* ══ FIRST-SESSION ONBOARDING (v3.9 — skippable welcome, bottom-anchored so the crown shows behind) ══ */
  .obd-ov{position:fixed;inset:0;z-index:2550;display:flex;align-items:flex-end;justify-content:center;padding:0 16px 100px;background:rgba(2,3,8,.55);backdrop-filter:blur(3px);opacity:0;transition:opacity .3s}
  .obd-ov.obd-in{opacity:1}
  .obd-card{max-width:380px;width:100%;background:linear-gradient(180deg,#12132a,#0a0a14);border:1.5px solid var(--lime,#bdff00);border-radius:18px;padding:20px 20px 16px;box-shadow:0 20px 60px rgba(0,0,0,.6),0 0 40px rgba(189,255,0,.18);transform:translateY(18px);transition:transform .35s cubic-bezier(.2,1.2,.4,1)}
  .obd-ov.obd-in .obd-card{transform:none}
  .obd-title{font-family:'Orbitron',sans-serif;font-weight:900;font-size:17px;color:#fff;margin-bottom:8px}
  .obd-body{font-size:13.5px;line-height:1.55;color:var(--text-secondary,#b6bbc8)}
  .obd-body b{color:var(--lime,#bdff00);font-weight:700}
  .obd-dots{display:flex;gap:6px;justify-content:center;margin:16px 0 14px}
  .obd-dot{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.2)}
  .obd-dot.on{background:var(--lime,#bdff00);box-shadow:0 0 8px rgba(189,255,0,.7)}
  .obd-foot{display:flex;align-items:center;justify-content:space-between;gap:12px}
  .obd-skip{background:none;border:none;color:var(--text-dim,#8a8fa0);font-size:12.5px;cursor:pointer;padding:8px 6px}
  .obd-skip:hover{color:#fff}
  .obd-next{font-family:'Orbitron',sans-serif;font-weight:900;font-size:13px;color:#0a0f00;background:var(--lime,#bdff00);border:none;border-radius:10px;padding:11px 20px;cursor:pointer;box-shadow:0 3px 0 var(--lime-deep,#7aa800)}
  .obd-next:active{transform:translateY(2px);box-shadow:0 1px 0 var(--lime-deep,#7aa800)}
  @media (prefers-reduced-motion: reduce){ .obd-card{transition:none} }