:root{
      --bg0:#05060a;
      --bg1:#0a0f19;
      --card:rgba(255,255,255,0.06);
      --card2:rgba(255,255,255,0.08);
      --border:rgba(255,255,255,0.10);
      --text:#e8ecf5;
      --muted:#aab3c5;
      --green:#19c37d;
      --green2:#0fa968;
      --danger:#ff3b3b;
      --shadow:0 18px 70px rgba(0,0,0,0.55);
      --page-pad: 26px;
      --wrap-pad: 18px;
      --wrap-max: 1540px;
      --left-col: 420px;
      --skin-min: 96px;
      --tab-min: 88px;
      --avatar-size: 168px;
      --safe-top: env(safe-area-inset-top, 0px);
      --safe-right: env(safe-area-inset-right, 0px);
      --safe-bottom: env(safe-area-inset-bottom, 0px);
      --safe-left: env(safe-area-inset-left, 0px);
      --font-display: 'Orbitron', system-ui, sans-serif;
      --font-body: 'Rajdhani', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    }

    *{ box-sizing:border-box; }
    html{
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    body{
      margin:0;
      min-height:100vh;
      min-height:100dvh;
      font-family: var(--font-body);
      font-weight: 500;
      line-height: 1.45;
      color:var(--text);
      background:
        radial-gradient(800px 500px at 20% 20%, rgba(25,195,125,0.20), transparent 60%),
        radial-gradient(900px 600px at 80% 20%, rgba(66,133,244,0.18), transparent 55%),
        linear-gradient(180deg, var(--bg0), var(--bg1));
      font-size: 20px;
      padding: max(var(--page-pad), var(--safe-top)) max(var(--page-pad), var(--safe-right)) max(var(--page-pad), var(--safe-bottom)) max(var(--page-pad), var(--safe-left));
      overflow-x: clip;
    }
    body.admin-embed{
      padding: 14px;
    }
    .adminEmbedBanner{
      display:none;
      position:sticky;
      top:0;
      z-index:10050;
      padding:8px 14px;
      background:#1a3a4a;
      color:#d8f0ff;
      font-size:13px;
      font-weight:600;
      text-align:center;
    }
    body.admin-embed .adminEmbedBanner{
      display:block;
    }
    .supportAccessBanner{
      display:none;
      position:sticky;
      top:0;
      z-index:10040;
      padding:8px 14px;
      background:#3a2a12;
      color:#ffe6b0;
      font-size:13px;
      font-weight:600;
      text-align:center;
      border-bottom:1px solid rgba(255,200,100,0.25);
    }
    body.has-support-access .supportAccessBanner{
      display:block;
    }
    body.admin-embed .supportAccessBanner{
      display:none;
    }
    .showroomDemoBanner{
      display:none;
      position:sticky;
      top:0;
      z-index:10041;
      padding:10px 14px;
      background:linear-gradient(90deg,#2a1a0c,#3d2610 40%,#2a1a0c);
      color:#ffe6b0;
      font-size:13px;
      font-weight:700;
      text-align:center;
      border-bottom:1px solid rgba(230,160,69,0.45);
      letter-spacing:0.02em;
    }
    body.has-showroom-demo .showroomDemoBanner{
      display:block;
    }
    body.has-showroom-demo.has-support-access .supportAccessBanner{
      display:none;
    }
    body.admin-embed .showroomDemoBanner{
      display:none;
    }
    .showroomDemoBanner a{
      color:#fff4d6;
      text-decoration:underline;
      text-underline-offset:3px;
      font-weight:800;
      margin:0 0.35em;
    }
    .showroomDemoBanner a:hover{
      color:#ffffff;
    }

    .wrap{
      max-width: var(--wrap-max);
      margin: 0 auto;
      padding: var(--wrap-pad);
      border:1px solid var(--border);
      border-radius: 18px;
      background: rgba(0,0,0,0.25);
      box-shadow: var(--shadow);
      backdrop-filter: blur(10px);
      position: relative;
      z-index: 1;
      width: 100%;
    }

    .title{
      font-family: var(--font-display);
      font-weight:700;
      letter-spacing:0.5px;
      font-size: 24px;
      text-align:center;
      margin: 4px 0 8px;
    }
    .title .accent{ color: var(--green); }
    .playerTitleBadge{
      display:none;
      text-align:center;
      margin: 0 0 16px;
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 750;
      letter-spacing: 0.4px;
      color: #ffd27a;
      text-shadow: 0 0 10px rgba(255,180,60,0.35);
    }
    .playerTitleBadge.on{
      display:block;
    }
    .playerTitleBadge span{
      display:inline-block;
      padding: 4px 12px;
      border-radius: 999px;
      border: 1px solid rgba(255,180,60,0.55);
      background: linear-gradient(180deg, rgba(90,40,20,0.55), rgba(40,18,10,0.7));
      box-shadow: 0 0 12px rgba(255,140,40,0.18);
    }
    .playerTitleBadge.volcimot span{
      border-color: rgba(255,120,40,0.75);
      background: linear-gradient(180deg, rgba(140,40,10,0.75), rgba(60,18,8,0.85));
      box-shadow: 0 0 16px rgba(255,90,20,0.35);
      color: #ffe6b0;
    }
    .pokedexWalkStrip{
      position: relative;
      height: 56px;
      margin: 0 0 12px;
      overflow: hidden;
      pointer-events: none;
      background: transparent;
    }
    .pokedexWalkStrip[hidden]{ display: none !important; }
    .pokedexWalker{
      position: absolute;
      bottom: 2px;
      width: 52px;
      height: 52px;
      object-fit: contain;
      image-rendering: pixelated;
      filter: drop-shadow(0 4px 6px rgba(0,0,0,0.45));
      will-change: left;
    }
    @media (prefers-reduced-motion: reduce){
      .pokedexWalkStrip{ display: none !important; }
      .fxAlbumProgressFill,
      .pokedexAlbumShell .fxAlbumProgressFill,
      .pokedexRarityHead .line { animation: none !important; }
    }
    .volcimotBadge{
      display:inline-block;
      margin-left:8px;
      padding:2px 8px;
      border-radius:999px;
      font-size:11px;
      font-weight:700;
      background: linear-gradient(90deg, rgba(180,40,10,0.45), rgba(255,120,30,0.35));
      border:1px solid rgba(255,160,60,0.65);
      color:#ffe0a8;
      vertical-align:middle;
      box-shadow: 0 0 10px rgba(255,100,20,0.35);
    }

    .grid{
      display:grid;
      grid-template-columns: minmax(0, var(--left-col)) minmax(0, 1fr);
      gap: 18px;
    }
    .grid > *{ min-width: 0; max-width: 100%; }

    .profileStage{
      display:grid;
      grid-template-columns: minmax(0, 1fr) 400px;
      gap: 14px;
      align-items: start;
    }
    .profileStageMain{ min-width: 0; }
    .gameChatDock{
      position: sticky;
      top: 12px;
      height: min(72vh, 640px);
      display: flex;
      flex-direction: column;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    }
    .gameChatHead{
      padding: 12px 14px 10px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(25,195,125,0.10), transparent);
    }
    .gameChatHead h3{
      margin: 0 0 4px;
      font-family: var(--font-display);
      font-size: 14px;
      font-weight: 700;
      letter-spacing: 0.3px;
    }
    .gameChatHead .hint{
      margin: 0;
      font-size: 13px;
      line-height: 1.4;
      color: var(--muted);
    }
    .gameChatNextRaid{
      display: none;
      align-items: center;
      gap: 8px;
      padding: 7px 12px;
      border-bottom: 1px solid var(--border);
      background: rgba(12, 18, 28, 0.55);
      flex-shrink: 0;
      font-size: 12px;
      line-height: 1.2;
    }
    .gameChatNextRaid.on{ display: flex; }
    .gameChatNextRaidMark{
      flex: 0 0 auto;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .gameChatNextRaidDiff{
      font-weight: 800;
      letter-spacing: 0.02em;
    }
    .gameChatNextRaidDiff.is-normal{ color: #7dcea0; }
    .gameChatNextRaidDiff.is-heroic{ color: #ffb060; }
    .gameChatNextRaidDiff.is-mythic{ color: #9fd4ff; }
    .gameChatNextRaidWhen{
      margin-left: auto;
      font-variant-numeric: tabular-nums;
      color: #f4ecd8;
      font-weight: 700;
    }
    .gameChatPinBar{
      display: none;
      position: relative;
      align-items: flex-start;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid rgba(232,196,110,0.35);
      border-bottom: 1px solid rgba(232,196,110,0.35);
      background: linear-gradient(180deg, rgba(80,55,20,0.45), rgba(28,22,12,0.55));
      flex-shrink: 0;
      isolation: isolate;
      overflow: hidden;
    }
    .gameChatPinBar.on{ display: flex; }
    .gameChatPinBar.on::before{
      content: "";
      position: absolute;
      inset: 0;
      padding: 1.5px;
      border-radius: inherit;
      background: conic-gradient(
        from var(--pin-spin, 0deg),
        #8a5a10 0%,
        #ffe9a8 18%,
        #e8c46e 36%,
        #fff6d0 50%,
        #c9a24a 68%,
        #8b5cff 82%,
        #8a5a10 100%
      );
      -webkit-mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask:
        linear-gradient(#000 0 0) content-box,
        linear-gradient(#000 0 0);
      mask-composite: exclude;
      animation: pinBorderSpin 2.4s linear infinite;
      pointer-events: none;
      z-index: 0;
    }
    .gameChatPinBar.on::after{
      content: "";
      position: absolute;
      inset: 0;
      box-shadow:
        inset 0 0 0 1px rgba(232,196,110,0.25),
        0 0 14px rgba(232,196,110,0.28);
      animation: pinBorderGlow 1.8s ease-in-out infinite;
      pointer-events: none;
      z-index: 0;
    }
    .gameChatPinBar > *{ position: relative; z-index: 1; }
    @property --pin-spin {
      syntax: "<angle>";
      inherits: false;
      initial-value: 0deg;
    }
    @keyframes pinBorderSpin {
      to { --pin-spin: 360deg; }
    }
    @keyframes pinBorderGlow {
      0%, 100% { opacity: 0.55; }
      50% { opacity: 1; }
    }
    .gameChatPinMark{
      flex: 0 0 auto;
      margin-top: 2px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #e8c46e;
    }
    .gameChatPinBody{
      flex: 1;
      min-width: 0;
      font-size: 12px;
      line-height: 1.35;
      color: #f4ecd8;
    }
    .gameChatPinBody .gameChatNick{ font-size: 12px; }
    .gameChatPinMeta{
      display: block;
      margin-bottom: 2px;
      font-size: 10px;
      font-weight: 700;
      color: rgba(232,196,110,0.85);
    }
    .gameChatPinUnpin{
      appearance: none;
      flex: 0 0 auto;
      border: 1px solid rgba(232,196,110,0.35);
      background: rgba(0,0,0,0.35);
      color: #e8c46e;
      border-radius: 8px;
      padding: 4px 8px;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .gameChatPinUnpin:hover{ border-color: rgba(232,196,110,0.7); }
    .gameChatPinTools{
      display: none;
      gap: 6px;
      padding: 6px 10px 0;
      align-items: center;
    }
    .gameChatPinTools.on{ display: flex; }
    .gameChatPinTools input{
      flex: 1;
      min-width: 0;
      font: inherit;
      font-size: 12px;
      font-weight: 650;
      color: var(--text);
      background: rgba(0,0,0,0.35);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 7px 10px;
    }
    .gameChatPinMsgBtn{
      appearance: none;
      margin-left: 6px;
      border: 1px solid rgba(232,196,110,0.3);
      background: rgba(0,0,0,0.25);
      color: #e8c46e;
      border-radius: 6px;
      padding: 1px 6px;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
      vertical-align: middle;
    }
    .gameChatPinMsgBtn:hover{ border-color: rgba(232,196,110,0.65); }
    .gameChatMsgs{
      flex: 1;
      min-height: 0;
      overflow: auto;
      background: rgba(0,0,0,0.35);
      padding: 10px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      font-size: 13px;
      line-height: 1.4;
      scrollbar-width: thin;
      scrollbar-color: rgba(25,195,125,0.45) rgba(0,0,0,0.25);
    }
    .gameChatMsgs::-webkit-scrollbar{ width: 8px; }
    .gameChatMsgs::-webkit-scrollbar-thumb{
      background: rgba(25,195,125,0.4);
      border-radius: 999px;
    }
    .gameChatMsg{
      padding: 6px 8px;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      word-break: break-word;
    }
    .gameChatMsg strong{ color: #b8ffd6; }
    .gameChatMsg.is-bot{
      color: #ffe08a;
      background: rgba(40,24,8,0.45);
    }
    .gameChatMsg.is-system{
      color: #ffb4b4;
      background: rgba(48,12,16,0.4);
    }
    .gameChatMsg.is-elite{
      background:
        linear-gradient(180deg, rgba(180,120,255,0.10), rgba(255,255,255,0.03));
      box-shadow: 0 1px 0 rgba(232,196,110,0.28) inset, 0 8px 16px rgba(0,0,0,0.18);
    }
    .gameChatMsg .gameChatNickRow{
      display: inline;
    }
    .gameChatSeal{
      display: inline-block;
      width: 9px;
      height: 9px;
      margin-right: 6px;
      vertical-align: 1px;
      transform: rotate(45deg);
      box-shadow: 1px 2px 5px rgba(0,0,0,0.4);
    }
    .gameChatSeal.seal-filamento{ background: linear-gradient(135deg, #e8c46e, #8b5cff); }
    .gameChatSeal.seal-brasa{ background: linear-gradient(135deg, #ff8a3d, #c03a18); border-radius: 1px; }
    .gameChatSeal.seal-hielo{ background: linear-gradient(135deg, #d8f4ff, #5aa8d8); border-radius: 50%; transform: none; }
    .gameChatSeal.seal-forja{ background: linear-gradient(135deg, #d8b48a, #6a4a2a); }
    .gameChatSeal.seal-nexo{ background: linear-gradient(135deg, #7dffc4, #3a8f6a); }
    .gameChatSeal.seal-patrono{ background: linear-gradient(135deg, #f3e0ff, #7a40c8); }
    .gameChatNick{
      font-weight: 800;
      color: #b8ffd6;
    }
    .gameChatNick.ink-amatista{ color: #d9c2ff; text-shadow: 0 0 10px rgba(160,100,255,0.35); }
    .gameChatNick.ink-oro{ color: #ffd27a; text-shadow: 0 0 10px rgba(232,180,70,0.35); }
    .gameChatNick.ink-cobre{ color: #e8a070; text-shadow: 0 0 10px rgba(200,110,50,0.3); }
    .gameChatNick.ink-hielo{ color: #b8e4ff; text-shadow: 0 0 10px rgba(120,190,255,0.35); }
    .gameChatNick.ink-brasa{ color: #ff9a6a; text-shadow: 0 0 10px rgba(255,110,50,0.32); }
    .gameChatEpithet{
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      color: #e8d4ff;
      opacity: 0.88;
    }
    .gameChatMsg.is-elite .gameChatEpithet{ color: #f3e0ff; }
    .gameChatCompanion{
      display: inline-block;
      width: 18px;
      height: 18px;
      margin-right: 5px;
      vertical-align: -3px;
      object-fit: contain;
      image-rendering: pixelated;
    }
    .gameChatTenure{
      display: inline-block;
      width: 16px;
      height: 16px;
      margin-right: 5px;
      vertical-align: -2px;
      position: relative;
    }
    .gameChatTenure::before{
      content: "";
      position: absolute;
      inset: 2px;
      transform: rotate(45deg);
      background: linear-gradient(135deg, #e8c46e, #8b5cff);
      box-shadow: 0 0 6px rgba(160,100,255,0.35);
    }
    .gameChatTenure.m1::before{ inset: 4px; opacity: 0.7; animation: tenurePulse 2.4s ease-in-out infinite; }
    .gameChatTenure.m2::before{ inset: 3px; }
    .gameChatTenure.m3::before{ border-radius: 50%; transform: none; inset: 2px; }
    .gameChatTenure.m4::before{ box-shadow: 0 0 8px rgba(232,196,110,0.55); }
    .gameChatTenure.m5::before{ background: linear-gradient(135deg, #ff8a3d, #8b5cff); }
    .gameChatTenure.m6::before{ background: linear-gradient(135deg, #e8c46e, #c03a18); animation: tenurePulse 1.8s ease-in-out infinite; }
    .gameChatTenure.m7::before{ box-shadow: 0 -2px 0 #e8c46e, 0 0 10px rgba(232,196,110,0.5); }
    .gameChatTenure.m8::before{ animation: tenureFlash 1.4s ease-in-out infinite; }
    .gameChatTenure.m9::before{ box-shadow: 0 0 0 2px rgba(125,255,196,0.35), 0 0 10px rgba(160,100,255,0.45); }
    .gameChatTenure.m10::before{ background: linear-gradient(135deg, #f3e0ff, #e8c46e); }
    .gameChatTenure.m11::before{ background: linear-gradient(135deg, #ff8a3d, #e8c46e, #8b5cff); animation: tenurePulse 1.2s ease-in-out infinite; }
    .gameChatTenure.m12::before{
      inset: 1px;
      background: linear-gradient(135deg, #fff4e0, #e8c46e, #8b5cff);
      box-shadow: 0 0 12px rgba(232,196,110,0.75), 0 0 18px rgba(160,100,255,0.4);
      animation: tenureYear 1.6s ease-in-out infinite;
    }
    .gameChatTenure.life::after{
      content: "∞";
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 8px;
      font-weight: 800;
      color: #fff4e0;
      z-index: 1;
      text-shadow: 0 0 4px rgba(0,0,0,0.8);
    }
    @keyframes tenurePulse {
      0%, 100% { filter: brightness(1); }
      50% { filter: brightness(1.25); }
    }
    @keyframes tenureFlash {
      0%, 100% { filter: brightness(1); }
      40% { filter: brightness(1.5); }
      55% { filter: brightness(0.95); }
    }
    @keyframes tenureYear {
      0%, 100% { filter: brightness(1) saturate(1); transform: rotate(45deg) scale(1); }
      50% { filter: brightness(1.35) saturate(1.2); transform: rotate(45deg) scale(1.08); }
    }
    .gameChatCatchBar{
      display: none;
      gap: 8px;
      padding: 8px 10px;
      border-top: 1px solid rgba(180,140,255,0.22);
      background: linear-gradient(180deg, rgba(60,30,100,0.28), rgba(20,12,32,0.35));
    }
    .gameChatCatchBar.on{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .gameChatCatchBtn{
      appearance: none;
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      min-height: 64px;
      padding: 8px 6px;
      border-radius: 12px;
      border: 1px solid rgba(180,140,255,0.28);
      background: rgba(16,10,28,0.65);
      color: #f3e0ff;
      cursor: pointer;
      font-family: var(--font-display);
      transition: border-color 0.15s ease, transform 0.12s ease, background 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
    }
    .gameChatCatchBtn:hover:not(:disabled):not(.is-locked){
      border-color: rgba(232,196,110,0.55);
      background: rgba(50,28,90,0.7);
      transform: translateY(-1px);
    }
    .gameChatCatchBtn:active:not(:disabled):not(.is-locked){ transform: scale(0.98); }
    .gameChatCatchBtn:disabled{
      opacity: 0.45;
      cursor: not-allowed;
      transform: none;
    }
    .gameChatCatchBtn.is-locked{
      opacity: 0.62;
      filter: grayscale(0.4);
      cursor: pointer;
    }
    .gameChatCatchBtn.is-locked:hover{
      border-color: rgba(232,196,110,0.55);
      filter: grayscale(0.15);
      transform: translateY(-1px);
    }
    .gameChatCatchBtn.is-locked::after{
      content: "Élite";
      position: absolute;
      top: 6px;
      right: 6px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #e8c46e;
      background: rgba(0,0,0,0.55);
      border: 1px solid rgba(232,196,110,0.4);
      border-radius: 999px;
      padding: 1px 5px;
      line-height: 1.2;
    }
    .gameChatCatchBtn img{
      width: 24px;
      height: 24px;
      object-fit: contain;
    }
    .gameChatCatchBtn .catchName{
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.02em;
      line-height: 1.1;
    }
    .gameChatCatchBtn .catchStock{
      font-size: 10px;
      font-weight: 700;
      color: #e8c46e;
    }
    .gameChatCatchBtn.is-ball{ border-color: rgba(140,180,220,0.35); }
    .gameChatCatchBtn.is-mega{ border-color: rgba(232,140,80,0.4); }
    .gameChatCatchBtn.is-ultra{ border-color: rgba(232,196,110,0.45); }
    .patronCompanionGrid{
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(52px, 1fr));
      gap: 6px;
      max-height: 160px;
      overflow: auto;
      padding: 4px 0;
    }
    .patronCompanionPick{
      appearance: none;
      width: 100%;
      aspect-ratio: 1;
      border-radius: 10px;
      border: 1px solid rgba(180,140,255,0.25);
      background: rgba(0,0,0,0.35);
      padding: 4px;
      cursor: pointer;
    }
    .patronCompanionPick img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: pixelated;
    }
    .patronCompanionPick[aria-pressed="true"]{
      border-color: rgba(232,196,110,0.8);
      box-shadow: 0 0 0 1px rgba(232,196,110,0.35);
    }
    .patronCompanionPick:disabled{ opacity: 0.4; cursor: not-allowed; }
    .patronTenureHint{
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 0 0 10px;
      font-size: 12px;
      color: #e8d4ff;
    }
    .gameChatComposer{
      padding: 10px;
      border-top: 1px solid var(--border);
      display: flex;
      gap: 8px;
    }
    .gameChatComposer input{
      flex: 1;
      min-width: 0;
      font-family: inherit;
      font-weight: 650;
      color: var(--text);
      background: rgba(0,0,0,0.35);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
    }
    .gameChatComposer input::placeholder{ color: #8b93a6; }
    .gameChatComposer input:focus{
      outline: 2px solid rgba(25,195,125,0.55);
      outline-offset: 1px;
    }
    .gameChatComposer button{
      flex: 0 0 auto;
    }
    .gameChatComposer button:disabled{ opacity: 0.55; cursor: not-allowed; }
    .gameChatChips{
      display:none;
      flex-wrap:wrap;
      gap:6px;
      padding:8px 10px 0;
      border-top:1px solid var(--border);
    }
    .gameChatChips.on{ display:flex; }
    .gameChatChip{
      font-family: var(--font-display);
      font-size:11px;
      font-weight:700;
      letter-spacing:0.2px;
      padding:7px 10px;
      border-radius:9px;
      border:1px solid rgba(120,200,255,0.35);
      background: rgba(40,80,120,0.35);
      color:#d8ecff;
      cursor:pointer;
    }
    .gameChatChip:hover{ border-color: rgba(160,220,255,0.55); background: rgba(50,100,150,0.45); }
    .gameChatChip:disabled{ opacity:0.55; cursor:not-allowed; }

    .raidLiveDock{
      display:none;
      flex-direction:column;
      min-width:0;
      height: min(85vh, 720px);
      position: sticky;
      top: 12px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 12px 28px rgba(0,0,0,0.35);
    }
    .raidLiveCollapsedBar{
      display:none;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      grid-column: 1 / -1;
      padding:10px 12px;
      border-radius:12px;
      border:1px solid rgba(145,70,255,0.35);
      background: linear-gradient(90deg, rgba(145,70,255,0.16), rgba(25,195,125,0.08));
    }
    .raidLiveCollapsedBar strong{
      font-family: var(--font-display);
      font-size:13px;
      font-weight:700;
    }
    .raidLiveCollapsedBar span{
      font-size:12px;
      color: var(--muted);
    }
    .raidLiveToggle{
      font-family: var(--font-display);
      font-size:12px;
      font-weight:700;
      letter-spacing:0.2px;
      padding:7px 12px;
      border-radius:9px;
      border:1px solid rgba(255,255,255,0.18);
      background: rgba(0,0,0,0.35);
      color:#e8ecf5;
      cursor:pointer;
    }
    .raidLiveToggle:hover{
      border-color: rgba(160,220,255,0.45);
      background: rgba(40,80,120,0.4);
    }
    .profileStage.raid-live-mode:not(.raid-live-collapsed){
      grid-template-columns: minmax(0, 1fr) minmax(320px, 400px);
    }
    .profileStage.raid-live-mode:not(.raid-live-collapsed) .profileStageMain{ display:none; }
    .profileStage.raid-live-mode:not(.raid-live-collapsed) .raidLiveDock{ display:flex; }
    .profileStage.raid-live-mode:not(.raid-live-collapsed) .gameChatDock{
      height: min(85vh, 720px);
    }
    .profileStage.raid-live-mode.raid-live-collapsed .raidLiveCollapsedBar{ display:flex; }
    .profileStage.raid-live-mode.raid-live-collapsed .raidLiveDock{ display:none; }
    .raidLiveHead{
      padding: 12px 14px 10px;
      border-bottom: 1px solid var(--border);
      background: linear-gradient(180deg, rgba(145,70,255,0.14), transparent);
      flex: 0 0 auto;
    }
    .raidLiveTitleRow{
      display:flex; align-items:center; justify-content:space-between; gap:10px;
      flex-wrap:wrap;
    }
    .raidLiveTitleRow h3{
      margin:0;
      font-family: var(--font-display);
      font-size:14px;
      font-weight:700;
      letter-spacing:0.3px;
    }
    .raidLiveHint{
      margin:6px 0 0;
      font-size:11px;
      line-height:1.35;
      color:var(--muted);
    }
    .raidLiveFrameWrap{
      flex:1;
      min-height:0;
      position:relative;
      overflow:hidden;
      background: #070b14;
    }
    .raidLiveFrameWrap iframe{
      position:absolute;
      top:0;
      left:0;
      width:1920px;
      height:1080px;
      border:0;
      transform-origin: 0 0;
      background: transparent;
    }
    ::selection{ background: rgba(25,195,125,0.35); color: #fff; }

    .card{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
    }

    .leftTop{
      display:flex;
      flex-direction: column;
      align-items: stretch;
      gap: 12px;
    }

    .arenaLaunchBanner{
      display:none;
      position: relative;
      overflow: hidden;
      padding: 12px 14px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,215,106,0.38);
      background:
        radial-gradient(120px 80px at 12% 0%, rgba(255,106,61,0.35), transparent 70%),
        linear-gradient(135deg, rgba(20,12,8,0.95), rgba(40,22,10,0.88));
      box-shadow: 0 0 24px rgba(255,106,61,0.22);
    }
    .arenaLaunchBanner.on{ display:block; }
    .arenaLaunchBanner .albTitle{
      font-weight: 800;
      letter-spacing: 0.04em;
      color: #ffd76a;
      font-size: 13px;
      text-transform: uppercase;
    }
    .arenaLaunchBanner .albClock{
      margin-top: 6px;
      font-variant-numeric: tabular-nums;
      font-size: 22px;
      font-weight: 800;
      color: #fff7e6;
      letter-spacing: 0.06em;
    }
    .arenaLaunchBanner .albHint{
      margin-top: 4px;
      font-size: 11px;
      color: #c9b8a0;
    }
    /* Bingo BlizzCon 2026 flyer — evento cerrado (Chow y Jandrey) */
    .bingoFlyer,
    #btnBingoBlizzFlyer,
    #bingoBlizzOverlay {
      display: none !important;
    }
    .bingoFlyer{
      position: relative;
      display: block;
      width: 100%;
      margin: 0 0 12px;
      border: 0;
      padding: 0;
      cursor: pointer;
      border-radius: 14px;
      overflow: hidden;
      text-align: left;
      background:
        linear-gradient(135deg, rgba(40,20,80,0.55), rgba(10,14,24,0.82) 55%, rgba(80,40,10,0.45)),
        url("/panel/assets/events/blizzcon-2026-bg.webp") center/cover no-repeat,
        url("/panel/assets/events/blizzcon-2026-bg.jpg") center/cover no-repeat,
        #0b0f18;
      min-height: 118px;
      box-shadow:
        0 0 0 1px rgba(180,140,255,0.35),
        0 0 24px rgba(120,80,255,0.22),
        inset 0 1px 0 rgba(255,255,255,0.12);
      transition: transform .18s ease, box-shadow .18s ease, filter .18s ease;
    }
    .bingoFlyer::before{
      content: "";
      position: absolute;
      inset: -40% -20%;
      background: linear-gradient(110deg, transparent 30%, rgba(255,220,140,0.18) 48%, transparent 62%);
      transform: translateX(-30%);
      animation: bingoFlyerShine 4.8s ease-in-out infinite;
      pointer-events: none;
    }
    @keyframes bingoFlyerShine{
      0%, 55%{ transform: translateX(-40%); opacity: 0; }
      60%{ opacity: 1; }
      100%{ transform: translateX(40%); opacity: 0; }
    }
    .bingoFlyer:hover,
    .bingoFlyer:focus-visible{
      transform: translateY(-2px) scale(1.01);
      filter: brightness(1.06);
      box-shadow:
        0 0 0 1px rgba(255,200,120,0.55),
        0 0 32px rgba(160,100,255,0.35),
        inset 0 1px 0 rgba(255,255,255,0.18);
      outline: none;
    }
    .bingoFlyerInner{
      position: relative;
      z-index: 1;
      padding: 14px 14px 12px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      min-height: 118px;
      justify-content: flex-end;
    }
    .bingoFlyerKicker{
      font-size: 10px;
      letter-spacing: 0.18em;
      text-transform: uppercase;
      color: #c9b6ff;
      font-weight: 700;
    }
    .bingoFlyerTitle{
      font-family: var(--font-display);
      font-size: 22px;
      font-weight: 800;
      line-height: 1.05;
      color: #fff8e8;
      text-shadow: 0 2px 12px rgba(0,0,0,0.65);
    }
    .bingoFlyerSub{
      font-size: 12px;
      color: rgba(255,245,230,0.88);
      max-width: 28ch;
    }
    .bingoFlyerCta{
      margin-top: 6px;
      align-self: flex-start;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #1a1020;
      background: linear-gradient(90deg, #b388ff, #ffd27a);
      border-radius: 999px;
      padding: 5px 12px;
    }
    /* Bingo BlizzCon modal — layout rules; width override lives after .modal */
    .bingoModalLead{
      text-align: left;
      margin: 0 0 12px;
      font-size: clamp(12px, 2.4vw, 14px);
      color: #b7c3d6;
      line-height: 1.5;
    }
    .bingoLayout{
      display: flex;
      flex-direction: column;
      gap: 12px;
      min-width: 0;
      width: 100%;
    }
    .bingoBoardShell{
      position: relative;
      width: 100%;
      max-width: 100%;
      min-width: 0;
      border-radius: 16px;
      overflow: hidden;
      aspect-ratio: 1 / 1;
      max-height: min(62vh, 560px);
      margin: 0 auto;
      perspective: 700px;
      border: 1px solid rgba(200,160,255,0.35);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.06),
        0 0 28px rgba(120,80,255,0.2);
      background:
        linear-gradient(180deg, rgba(8,10,20,0.28), rgba(8,10,20,0.55)),
        url("/panel/assets/events/blizzcon-2026-bg.webp") center/cover no-repeat,
        url("/panel/assets/events/blizzcon-2026-bg.jpg") center/cover no-repeat,
        #0b0f18;
    }
    .bingoBoardShell::after{
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(255,255,255,0.05), transparent 28%, transparent 70%, rgba(0,0,0,0.35));
    }
    .bingoGrid{
      position: absolute;
      inset: clamp(8px, 1.8vw, 14px);
      z-index: 1;
      display: grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      grid-template-rows: repeat(5, minmax(0, 1fr));
      gap: clamp(3px, 0.9vw, 7px);
      margin: 0;
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      overflow: hidden;
      box-sizing: border-box;
    }
    .bingoWarn{
      display: flex;
      align-items: flex-start;
      gap: 10px;
      margin: 0 0 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 2px solid rgba(255, 70, 70, 0.85);
      background:
        linear-gradient(135deg, rgba(90, 8, 12, 0.92), rgba(40, 6, 10, 0.95)),
        repeating-linear-gradient(
          -45deg,
          rgba(255, 210, 60, 0.07) 0 10px,
          transparent 10px 20px
        );
      box-shadow:
        0 0 0 1px rgba(255, 200, 80, 0.35),
        0 0 28px rgba(255, 40, 40, 0.35),
        inset 0 1px 0 rgba(255,255,255,0.12);
      color: #ffe9a8;
      font-size: clamp(13px, 2.6vw, 15px);
      line-height: 1.35;
      font-weight: 800;
      letter-spacing: 0.01em;
      text-shadow: 0 1px 2px rgba(0,0,0,0.75);
      animation: bingoWarnPulse 2.4s ease-in-out infinite;
    }
    .bingoWarnIcon{
      flex: 0 0 auto;
      font-size: 1.35em;
      line-height: 1;
      filter: drop-shadow(0 0 8px rgba(255,200,60,0.7));
    }
    .bingoWarn strong{
      color: #fff;
      text-decoration: underline;
      text-underline-offset: 2px;
      text-decoration-color: rgba(255, 210, 80, 0.85);
    }
    @keyframes bingoWarnPulse{
      0%, 100%{ box-shadow: 0 0 0 1px rgba(255,200,80,0.35), 0 0 22px rgba(255,40,40,0.28), inset 0 1px 0 rgba(255,255,255,0.12); }
      50%{ box-shadow: 0 0 0 2px rgba(255,220,100,0.55), 0 0 34px rgba(255,60,60,0.5), inset 0 1px 0 rgba(255,255,255,0.16); }
    }
    .bingoResultBanner{
      margin: 0 0 12px;
      padding: 12px 14px;
      border-radius: 12px;
      border: 1px solid rgba(120, 220, 160, 0.55);
      background: linear-gradient(135deg, rgba(20, 60, 40, 0.9), rgba(12, 28, 22, 0.95));
      color: #d8ffe8;
      font-size: clamp(13px, 2.5vw, 15px);
      font-weight: 750;
      line-height: 1.4;
      box-shadow: 0 0 20px rgba(60, 200, 120, 0.22);
    }
    .bingoResultBanner.miss{
      border-color: rgba(255, 160, 80, 0.55);
      background: linear-gradient(135deg, rgba(70, 40, 12, 0.92), rgba(30, 18, 10, 0.95));
      color: #ffe6c8;
      box-shadow: 0 0 18px rgba(255, 140, 60, 0.2);
    }
    .bingoCell{
      appearance: none;
      -webkit-appearance: none;
      position: relative;
      border: 1px solid rgba(255,255,255,0.28);
      background: rgba(6, 10, 20, 0.18);
      backdrop-filter: blur(2px);
      -webkit-backdrop-filter: blur(2px);
      color: #fff8ec;
      border-radius: clamp(6px, 1.2vw, 10px);
      min-width: 0;
      min-height: 0;
      width: 100%;
      height: 100%;
      max-width: 100%;
      padding: clamp(2px, 0.7vw, 6px);
      font-size: clamp(7px, 1.35vw, 11px);
      line-height: 1.15;
      font-weight: 800;
      letter-spacing: 0.01em;
      cursor: pointer;
      text-align: center;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      overflow: hidden;
      overflow-wrap: anywhere;
      word-break: break-word;
      hyphens: auto;
      text-shadow: 0 1px 3px rgba(0,0,0,0.85), 0 0 8px rgba(0,0,0,0.45);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.12);
      transition: background .14s ease, border-color .14s ease, transform .14s ease, box-shadow .14s ease;
      user-select: none;
      -webkit-user-select: none;
    }
    .bingoCellLabel{
      position: relative;
      z-index: 2;
      pointer-events: none;
      display: block;
      width: 100%;
    }
    .bingoCell.yes,
    .bingoCell.no{
      justify-content: flex-start;
      padding-top: clamp(3px, 0.9vw, 7px);
      padding-bottom: clamp(2px, 0.5vw, 4px);
    }
    .bingoCell.yes .bingoCellLabel,
    .bingoCell.no .bingoCellLabel{
      flex: 0 0 auto;
      opacity: 1;
      color: #fffdf5;
      font-size: clamp(6.5px, 1.2vw, 10px);
      line-height: 1.12;
      max-height: 44%;
      overflow: hidden;
      text-shadow:
        0 1px 2px rgba(0,0,0,0.95),
        0 0 6px rgba(0,0,0,0.65);
    }
    .bingoCoinSlot{
      flex: 1 1 auto;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 0;
      width: 100%;
      perspective: 520px;
      transform-style: preserve-3d;
      z-index: 1;
    }
    .bingoCoinSettled{
      position: relative;
      width: min(78%, 64px);
      height: auto;
      max-height: 92%;
      object-fit: contain;
      pointer-events: none;
      filter: drop-shadow(0 3px 7px rgba(0,0,0,0.7));
      transform-style: preserve-3d;
      transform-origin: 50% 70%;
      animation:
        bingoCoinLandIn .38s cubic-bezier(.2,.9,.25,1.15) both,
        bingoCoinIdleHop 2.9s ease-in-out infinite;
      animation-delay: 0s, calc(0.42s + var(--coin-delay, 0s));
    }
    @keyframes bingoCoinLandIn{
      0%{ transform: translateY(-10px) scale(1.22); opacity: 0.55; }
      100%{ transform: translateY(0) scale(1); opacity: 1; }
    }
    @keyframes bingoCoinIdleHop{
      0%, 62%, 100%{
        transform: translateY(0) rotateY(0deg) rotateX(0deg) scale(1);
        filter: drop-shadow(0 3px 7px rgba(0,0,0,0.7));
      }
      8%{
        transform: translateY(-3px) rotateY(35deg) rotateX(8deg) scale(1.03);
      }
      18%{
        transform: translateY(-14px) rotateY(140deg) rotateX(-6deg) scale(1.1);
        filter: drop-shadow(0 10px 12px rgba(0,0,0,0.45));
      }
      28%{
        transform: translateY(-18px) rotateY(220deg) rotateX(10deg) scale(1.12);
        filter: drop-shadow(0 14px 14px rgba(0,0,0,0.35));
      }
      38%{
        transform: translateY(-8px) rotateY(310deg) rotateX(-4deg) scale(1.04);
      }
      48%{
        transform: translateY(2px) rotateY(360deg) rotateX(0deg) scale(0.94);
        filter: drop-shadow(0 1px 3px rgba(0,0,0,0.8));
      }
      54%{
        transform: translateY(0) rotateY(360deg) scale(1.02);
      }
      58%{
        transform: translateY(0) rotateY(360deg) scale(1);
      }
    }
    .bingoCell:hover:not(:disabled):not(.locked){
      border-color: rgba(255,220,140,0.75);
      background: rgba(255,255,255,0.1);
    }
    .bingoCell.yes{
      background: rgba(255, 190, 70, 0.28);
      border-color: rgba(255,210,120,0.95);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.16),
        0 0 14px rgba(255,180,60,0.28);
    }
    .bingoCell.no{
      background: rgba(180, 40, 50, 0.32);
      border-color: rgba(255,110,110,0.9);
      box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.12),
        0 0 14px rgba(220,60,70,0.28);
    }
    .bingoCell.free{
      background: rgba(180,100,255,0.28);
      border-color: rgba(220,180,255,0.7);
      cursor: default;
    }
    .bingoCell.locked{
      cursor: default;
    }
    .bingoCell.bingoHitOk{
      outline: 2px solid rgba(90, 230, 150, 0.85);
      outline-offset: -2px;
    }
    .bingoCell.bingoHitMiss{
      outline: 2px solid rgba(255, 110, 90, 0.75);
      outline-offset: -2px;
      filter: saturate(0.85);
    }
    .bingoCell.busy{ pointer-events: none; }
    .bingoCoinFly{
      position: absolute;
      z-index: 8;
      width: 64px;
      height: 64px;
      margin: 0;
      pointer-events: none;
      transform-style: preserve-3d;
      will-change: transform, left, top, opacity, filter;
      filter: drop-shadow(0 10px 14px rgba(0,0,0,0.55));
    }
    .bingoCoinFly img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      display: block;
      transform-style: preserve-3d;
      backface-visibility: visible;
      animation: bingoCoinSpinFlip 0.42s linear infinite;
    }
    @keyframes bingoCoinSpinFlip{
      0%{ transform: rotateY(0deg) rotateX(18deg) scaleX(1); }
      25%{ transform: rotateY(90deg) rotateX(-6deg) scaleX(0.35); }
      50%{ transform: rotateY(180deg) rotateX(14deg) scaleX(1); }
      75%{ transform: rotateY(270deg) rotateX(-8deg) scaleX(0.35); }
      100%{ transform: rotateY(360deg) rotateX(18deg) scaleX(1); }
    }
    .bingoSide{
      display: flex;
      flex-direction: column;
      gap: 10px;
      min-width: 0;
      width: 100%;
    }
    .bingoScoreRow{
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
      margin: 0;
      font-size: clamp(12px, 2.4vw, 14px);
      color: #d7e0ee;
    }
    .bingoScorePill{
      font-weight: 800;
      color: #1a1020;
      background: linear-gradient(90deg, #b388ff, #ffd27a);
      border-radius: 999px;
      padding: 6px 12px;
      font-size: clamp(12px, 2.4vw, 13px);
    }
    .bingoPrizeHead{
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #c9b6ff;
      font-weight: 800;
      margin: 2px 0 0;
    }
    .bingoPrizeList{
      list-style: none;
      margin: 0;
      padding: 0;
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 8px;
      overflow: visible;
      max-height: none;
    }
    .bingoPrizeList li{
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      padding: 10px 12px;
      background: linear-gradient(135deg, rgba(255,255,255,0.05), rgba(0,0,0,0.22));
      font-size: clamp(11px, 2.2vw, 13px);
      line-height: 1.4;
      color: #d7e0ee;
      min-width: 0;
    }
    .bingoPrizeList li strong{ color: #fff; font-weight: 700; }
    .bingoPrizeList li.active{
      border-color: rgba(255,210,120,0.7);
      box-shadow: 0 0 0 1px rgba(179,136,255,0.28), 0 0 22px rgba(120,80,255,0.22);
      background: linear-gradient(90deg, rgba(120,70,220,0.28), rgba(255,180,60,0.14));
    }
    .bingoPrizeList li .tier{
      display: block;
      font-size: 10px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #c9b6ff;
      font-weight: 800;
      margin-bottom: 3px;
    }
    .bingoModalActions{
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      justify-content: flex-end;
    }
    @media (max-width: 640px){
      .bingoPrizeList{ grid-template-columns: 1fr; }
      .bingoBoardShell{
        max-height: min(58vh, 420px);
      }
      .bingoModalActions{
        justify-content: stretch;
      }
      .bingoModalActions .miniBtn{ flex: 1; }
    }
    .arenaSeasonCard{
      margin-top: 12px;
      padding: 12px 14px 14px;
      border-radius: 16px;
      border: 1px solid rgba(255,215,106,0.28);
      background:
        radial-gradient(140px 70px at 8% 0%, rgba(255,106,61,0.22), transparent 70%),
        linear-gradient(180deg, rgba(18,14,12,0.92), rgba(8,8,12,0.9));
    }
    .arenaSeasonCard .ascTitle{
      font-weight: 800;
      letter-spacing: 0.04em;
      color: #ffd76a;
      font-size: 12px;
      text-transform: uppercase;
    }
    .arenaSeasonCard .ascClock{
      margin-top: 8px;
      font-variant-numeric: tabular-nums;
      font-size: 20px;
      font-weight: 800;
      color: #fff7e6;
    }
    .arenaSeasonCard .ascBody{
      margin-top: 8px;
      font-size: 13px;
      line-height: 1.45;
      color: #d5cfc6;
    }
    .arenaSeasonCard .ascGrid{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }
    .arenaSeasonCard .ascCell{
      padding: 8px;
      border-radius: 10px;
      background: rgba(255,255,255,0.05);
    }
    .arenaSeasonCard .ascCell b{
      display: block;
      color: #ffd76a;
      font-size: 16px;
    }
    .arenaSeasonCard .ascLink{
      display: inline-block;
      margin-top: 10px;
      color: #ffd76a;
      font-size: 13px;
      font-weight: 700;
      text-decoration: none;
    }

    .profileShowcase{
      width: 100%;
    }

    .gearDollStage{
      position: relative;
      display:grid;
      grid-template-columns: 68px minmax(132px, 1fr) 68px;
      gap: 8px;
      align-items: start;
      justify-items: center;
      padding: 10px 6px 56px;
      border-radius: 16px;
      border: 1px solid var(--border);
      background:
        radial-gradient(ellipse 55% 45% at 50% 70%, rgba(25,195,125,0.08), transparent 65%),
        linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.18));
      margin-bottom: 4px;
    }
    .gearDollCol{
      display:grid;
      grid-template-rows: repeat(4, 64px);
      gap: 8px;
      width: 100%;
      align-content: start;
      justify-items: stretch;
    }
    .gearDollCol .gearDollSlot{
      width: 100%;
      height: 64px;
      min-height: 64px;
      max-height: 64px;
      aspect-ratio: auto;
    }
    .gearDollCol .gearDollSlot.tall{
      min-height: 64px;
      max-height: 64px;
    }
    .gearDollExtras{
      display:flex;
      flex-direction: row;
      justify-content: center;
      align-items: stretch;
      gap: 8px;
      width: auto;
      margin: 2px 0 0;
      padding: 0;
      border: 0;
      background: transparent;
    }
    .gearDollExtras .gearDollSlot{
      width: 64px;
      min-width: 64px;
      max-width: 64px;
      min-height: 64px;
      flex: 0 0 64px;
    }
    .gearDollCenter{
      display:flex;
      flex-direction: column;
      align-items: center;
      gap: 6px;
      min-width: 0;
    }
    .gearDollClassTag{
      display:flex;
      flex-direction: column;
      align-items: center;
      gap: 2px;
      font-size: 13px;
      font-weight: 700;
      letter-spacing: 0.04em;
      color: #e0b83a;
      text-transform: uppercase;
      text-align: center;
      line-height: 1.2;
    }
    .gearDollClassTag .gearDollClassName{
      font-size: 13px;
    }
    .gearDollClassTag .gearDollTemple{
      font-size: 15px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: #8fe6b5;
      text-transform: none;
    }
    .gearDollSetBonus{
      grid-column: 1 / -1;
      box-sizing: border-box;
      width: 100%;
      max-width: 100%;
      min-height: 0;
      margin-top: 4px;
      padding: 6px 4px 2px;
      border: 0;
      border-radius: 0;
      background: none;
      font-size: 16px;
      font-weight: 700;
      line-height: 1.35;
      color: #d8ffe8;
      text-align: center;
      display: block;
    }
    .gearDollSetBonus.off{
      display: none;
    }
    .gearDollSetBonus .setBonusTitle{
      font-size: 16px;
      font-weight: 800;
      letter-spacing: 0.02em;
      text-transform: none;
      color: #e0b83a;
      margin: 0;
    }
    .gearDollSetBonus .setBonusLine{
      display: inline;
      font-size: 15px;
      font-weight: 650;
    }
    .gearDollSlot{
      position: relative;
      width: 100%;
      aspect-ratio: 1;
      min-height: 64px;
      border-radius: 12px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.04);
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 2px;
      padding: 4px 4px 6px;
      cursor: pointer;
      overflow: hidden;
      transition: border-color .15s ease, background .15s ease, transform .12s ease;
    }
    .gearDollSlot.tall{
      aspect-ratio: auto;
      min-height: 84px;
    }
    .gearDollSlot{
      cursor: pointer;
    }
    .gearDollSlot.filled:hover,
    .gearDollSlot.tipOn{
      transform: translateY(-1px);
      filter: brightness(1.08);
    }
    .gearDollSlot.empty .gearDollIcon{
      opacity: 0.35;
    }
    .gearDollSlot .gearDollSlotLabel{
      order: 0;
      flex-shrink: 0;
      font-size: 10px;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.03em;
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      line-height: 1.1;
      margin-top: 1px;
    }
    .gearDollSlot .gearDollIcon{
      order: 1;
      flex: 1 1 auto;
      width: 100%;
      min-height: 36px;
      display:grid;
      place-items:center;
      font-size: 18px;
      line-height: 1;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,.45));
      overflow: hidden;
    }
    .gearDollSlot .gearDollIcon .lpcGearIconCanvas,
    .gearCardIcon .lpcGearIconCanvas{
      width: auto;
      height: auto;
      max-width: 100%;
      max-height: 100%;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      display:block;
      margin: 0 auto;
    }
    .gearCardIcon.lpcGearIcon{
      padding: 0;
      overflow: hidden;
      display:grid;
      place-items:center;
    }
    .gearDollSlot .gearDollPower{
      position: absolute;
      top: 16px;
      right: 4px;
      z-index: 2;
      font-size: 9px;
      font-weight: 800;
      color: #8fe6b5;
      text-shadow: 0 1px 2px rgba(0,0,0,.7);
    }
    .gearDollSlot.r-Iniciado,
    .gearDollSlot.r-Default{ border-color: rgba(170,179,197,.35); }
    .gearDollSlot.r-Low{ border-color: rgba(170,179,197,.55); background: rgba(170,179,197,.06); }
    .gearDollSlot.r-Medium{ border-color: rgba(107,163,212,.55); background: rgba(107,163,212,.08); }
    .gearDollSlot.r-Epic{ border-color: rgba(224,184,58,.55); background: rgba(224,184,58,.08); }
    .gearDollSlot.r-Legendary{
      border-color: rgba(255,107,107,.6);
      background: rgba(255,107,107,.1);
      box-shadow: 0 0 12px rgba(255,107,107,.18);
    }
    .gearGemBtn{
      position:absolute;
      right:2px;
      bottom:2px;
      z-index:3;
      width:14px;
      height:14px;
      border-radius:4px;
      border:1px solid rgba(232,197,71,.55);
      background:rgba(20,16,12,.85);
      color:#e8c547;
      font-size:8px;
      line-height:12px;
      padding:0;
      cursor:pointer;
    }
    .gearGemBag{
      display:flex;
      flex-wrap:wrap;
      gap:6px;
      justify-content:center;
      margin:8px 8px 0;
    }
    .gearGemBagBtn{
      display:flex;
      align-items:center;
      gap:4px;
      border-radius:8px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:inherit;
      padding:4px 8px;
      cursor:pointer;
      font-size:12px;
    }
    .gearGemBagBtn img{ width:18px; height:18px; }
    #gemSocketModal{
      position:fixed;
      inset:0;
      z-index:80;
      background:rgba(0,0,0,.55);
      display:flex;
      align-items:center;
      justify-content:center;
      padding:16px;
    }
    #gemSocketModal[hidden]{ display:none; }
    .gemSocketCard{
      width:min(420px,100%);
      max-height:86vh;
      overflow:auto;
      border-radius:14px;
      border:1px solid var(--border);
      background:#16120e;
      padding:14px;
    }
    .gemSocketHole{
      display:flex;
      align-items:center;
      gap:8px;
      width:100%;
      text-align:left;
      margin:6px 0;
      padding:8px;
      border-radius:10px;
      border:1px solid var(--border);
      background:rgba(255,255,255,.04);
      color:inherit;
      cursor:pointer;
    }
    .gemSocketHole.on{ border-color:#e8c547; }

    /* Cosméticos de perfil (bits micro) */
    .cosmoFrame{
      position:absolute;
      inset:0;
      z-index:1;
      display:grid;
      place-items:center;
      pointer-events:none;
    }
    /* Bordes · mismos temas que los fondos */
    .avatarBox.cosmo-border-noche,
    .avatarBox.cosmo-border-neon,
    .cosmoHoverStage.cosmo-border-noche,
    .cosmoHoverStage.cosmo-border-neon{
      border-color: transparent;
      animation: cosmoBorderNoche 2.6s ease-in-out infinite;
    }
    .avatarBox.cosmo-border-forja,
    .avatarBox.cosmo-border-ember,
    .cosmoHoverStage.cosmo-border-forja,
    .cosmoHoverStage.cosmo-border-ember{
      border-color: transparent;
      animation: cosmoBorderForja 1.4s ease-in-out infinite;
    }
    .avatarBox.cosmo-border-aurora,
    .avatarBox.cosmo-border-oro,
    .cosmoHoverStage.cosmo-border-aurora,
    .cosmoHoverStage.cosmo-border-oro{
      border-color: transparent;
      animation: cosmoBorderAurora 3.2s linear infinite;
    }
    .avatarBox.cosmo-border-diluvio,
    .avatarBox.cosmo-border-royal,
    .cosmoHoverStage.cosmo-border-diluvio,
    .cosmoHoverStage.cosmo-border-royal{
      border-color: transparent;
      animation: cosmoBorderDiluvio 1.8s ease-in-out infinite;
    }
    .avatarBox.cosmo-border-escarcha,
    .avatarBox.cosmo-border-hielo,
    .cosmoHoverStage.cosmo-border-escarcha,
    .cosmoHoverStage.cosmo-border-hielo{
      border-color: transparent;
      animation: cosmoBorderEscarcha 2.5s ease-in-out infinite;
    }
    .avatarBox.cosmo-border-vendaval,
    .cosmoHoverStage.cosmo-border-vendaval{
      border-color: transparent;
      animation: cosmoBorderVendaval 2s ease-in-out infinite;
    }
    /* Borde Volcán: haz de lava que recorre el marco (técnica conic + rotate) */
    .avatarBox.cosmo-border-volcan,
    .cosmoHoverStage.cosmo-border-volcan{
      border-color: transparent;
      animation: none;
      box-shadow: none;
    }
    .avatarBox.cosmo-border-album-domador,
    .cosmoHoverStage.cosmo-border-album-domador{
      border-color: #7ec8a3;
      box-shadow: 0 0 0 1px rgba(126,200,163,0.35), 0 0 18px rgba(80,180,120,0.35);
      animation: cosmoBorderAlbumDomador 2.8s ease-in-out infinite;
    }
    .avatarBox.cosmo-border-album-maestro,
    .cosmoHoverStage.cosmo-border-album-maestro{
      border-color: #e8c56a;
      box-shadow: 0 0 0 1px rgba(232,197,106,0.4), 0 0 22px rgba(255,200,80,0.35);
      animation: cosmoBorderAlbumMaestro 2.4s ease-in-out infinite;
    }
    .avatarBox.cosmo-border-puchadex-supremo,
    .cosmoHoverStage.cosmo-border-puchadex-supremo{
      border-color: transparent;
      animation: none;
      box-shadow: 0 0 0 2px rgba(80,230,255,0.45), 0 0 28px rgba(255,70,90,0.35), 0 0 18px rgba(255,220,80,0.25);
      background:
        linear-gradient(#0a1628, #0a1628) padding-box,
        conic-gradient(from 0deg, #ff3b4a, #ffe08a, #5ad0ff, #7dffc8, #ff3b4a) border-box;
    }
    .avatarBox.cosmo-border-patron,
    .cosmoHoverStage.cosmo-border-patron,
    .patronMiniCard.cosmo-border-patron,
    .patronChip.cosmo-border-patron{
      border-color: transparent;
      animation: none;
      box-shadow: none;
    }
    @keyframes cosmoBorderAlbumDomador {
      0%, 100% { box-shadow: 0 0 0 1px rgba(126,200,163,0.35), 0 0 14px rgba(80,180,120,0.25); }
      50% { box-shadow: 0 0 0 1px rgba(160,230,190,0.55), 0 0 24px rgba(100,210,150,0.45); }
    }
    @keyframes cosmoBorderAlbumMaestro {
      0%, 100% { box-shadow: 0 0 0 1px rgba(232,197,106,0.4), 0 0 16px rgba(255,200,80,0.3); }
      50% { box-shadow: 0 0 0 1px rgba(255,230,140,0.65), 0 0 28px rgba(255,210,100,0.5); }
    }
    .cosmoBorderTrack{
      display: none;
      position: absolute;
      inset: 0;
      border-radius: inherit;
      overflow: hidden;
      padding: 3px;
      z-index: 0;
      pointer-events: none;
    }
    .avatarBox.cosmo-border-volcan .cosmoBorderTrack,
    .cosmoHoverStage.cosmo-border-volcan .cosmoBorderTrack,
    .avatarBox.cosmo-border-patron .cosmoBorderTrack,
    .cosmoHoverStage.cosmo-border-patron .cosmoBorderTrack,
    .patronMiniCard.cosmo-border-patron .cosmoBorderTrack,
    .patronChip.cosmo-border-patron .cosmoBorderTrack{
      display: block;
    }
    .cosmoBorderSpin{
      position: absolute;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 220deg,
        #5a1808 250deg,
        #ff4010 280deg,
        #ffb040 300deg,
        #ffe9a0 315deg,
        #ff8020 335deg,
        transparent 355deg,
        transparent 360deg
      );
      animation: volcanBorderSpin 2.4s linear infinite;
      z-index: 0;
    }
    .cosmoBorderTrack::after{
      content: "";
      position: relative;
      display: block;
      width: 100%;
      height: 100%;
      border-radius: 11px;
      background:
        radial-gradient(ellipse 70% 45% at 50% 108%, rgba(255,80,10,0.28), transparent 60%),
        linear-gradient(180deg, #1a0c0a 0%, #120808 45%, #0a0606 100%);
      z-index: 1;
    }
    @keyframes volcanBorderSpin{
      100% { transform: rotate(360deg); }
    }
    .avatarBox.cosmo-border-patron .cosmoBorderSpin,
    .cosmoHoverStage.cosmo-border-patron .cosmoBorderSpin,
    .patronMiniCard.cosmo-border-patron .cosmoBorderSpin,
    .patronChip.cosmo-border-patron .cosmoBorderSpin{
      background: conic-gradient(
        from 0deg,
        transparent 0deg,
        transparent 200deg,
        #3a1860 230deg,
        #a060ff 265deg,
        #ffd080 300deg,
        #c9a0ff 328deg,
        #6a30c0 348deg,
        transparent 360deg
      );
    }
    .avatarBox.cosmo-border-patron .cosmoBorderTrack::after,
    .cosmoHoverStage.cosmo-border-patron .cosmoBorderTrack::after,
    .patronMiniCard.cosmo-border-patron .cosmoBorderTrack::after,
    .patronChip.cosmo-border-patron .cosmoBorderTrack::after{
      background:
        radial-gradient(ellipse 60% 40% at 80% 0%, rgba(160,90,255,0.22), transparent 55%),
        linear-gradient(165deg, #140c1c 0%, #0e0a14 45%, #08060c 100%);
    }
    @keyframes cosmoBorderNoche {
      0%, 100% {
        box-shadow:
          0 0 0 2px #2a9aaa,
          0 0 12px rgba(80, 220, 200, 0.25),
          0 0 28px rgba(40, 160, 180, 0.12);
      }
      50% {
        box-shadow:
          0 0 0 2px #7dffc8,
          0 0 22px rgba(125, 255, 200, 0.55),
          0 0 40px rgba(60, 200, 190, 0.3);
      }
    }
    @keyframes cosmoBorderForja {
      0%, 100% {
        box-shadow: 0 0 0 2px #e07a3a, 0 0 10px rgba(224,122,58,0.3), 0 -4px 16px rgba(255,80,20,0.15);
      }
      35% {
        box-shadow: 0 0 0 2px #ff9a4a, 0 0 22px rgba(255,100,30,0.6), 0 -6px 20px rgba(255,120,40,0.35);
      }
      70% {
        box-shadow: 0 0 0 2px #ff5020, 0 0 14px rgba(255,60,10,0.45), 0 -3px 12px rgba(255,80,20,0.2);
      }
    }
    @keyframes cosmoBorderAurora {
      0% {
        box-shadow: 0 0 0 2px #7dffc8, 0 0 16px rgba(80,220,170,0.35), 0 0 28px rgba(100,140,255,0.15);
      }
      33% {
        box-shadow: 0 0 0 2px #a0b8ff, 0 0 18px rgba(100,140,255,0.4), 0 0 30px rgba(180,100,255,0.18);
      }
      66% {
        box-shadow: 0 0 0 2px #d4a8ff, 0 0 18px rgba(180,100,255,0.35), 0 0 28px rgba(80,220,170,0.15);
      }
      100% {
        box-shadow: 0 0 0 2px #7dffc8, 0 0 16px rgba(80,220,170,0.35), 0 0 28px rgba(100,140,255,0.15);
      }
    }
    @keyframes cosmoBorderDiluvio {
      0%, 100% {
        box-shadow:
          0 0 0 2px #6a9cc8,
          0 6px 14px rgba(100, 160, 220, 0.2),
          inset 0 -3px 8px rgba(140, 190, 255, 0.12);
      }
      50% {
        box-shadow:
          0 0 0 2px #a8d0f0,
          0 10px 20px rgba(120, 180, 240, 0.4),
          inset 0 -6px 12px rgba(160, 210, 255, 0.22);
      }
    }
    @keyframes cosmoBorderEscarcha {
      0%, 100% {
        box-shadow:
          0 0 0 2px #8ec8e8,
          0 0 12px rgba(160,220,255,0.25),
          inset 0 0 10px rgba(200,240,255,0.12);
      }
      50% {
        box-shadow:
          0 0 0 2px #e8f8ff,
          0 0 24px rgba(180,230,255,0.55),
          inset 0 0 16px rgba(220,250,255,0.28);
      }
    }
    @keyframes cosmoBorderVendaval {
      0%, 100% {
        box-shadow:
          -4px 0 12px rgba(180,200,220,0.15),
          0 0 0 2px #8a9aac,
          4px 0 12px rgba(180,200,220,0.15);
      }
      50% {
        box-shadow:
          -10px 0 18px rgba(200,220,240,0.35),
          0 0 0 2px #d0dce8,
          10px 0 18px rgba(200,220,240,0.35);
      }
    }
    @keyframes cosmoBorderVolcan {
      0%, 100% {
        box-shadow:
          0 0 0 2px #5a2810,
          0 0 0 4px #e07020,
          0 0 14px rgba(255,90,20,0.35),
          0 -6px 18px rgba(255,60,10,0.2),
          inset 0 0 10px rgba(255,120,40,0.15);
      }
      40% {
        box-shadow:
          0 0 0 2px #3a1808,
          0 0 0 4px #ff9a3a,
          0 0 26px rgba(255,120,30,0.7),
          0 -10px 24px rgba(255,80,10,0.45),
          inset 0 0 16px rgba(255,180,60,0.28);
      }
      70% {
        box-shadow:
          0 0 0 2px #4a200c,
          0 0 0 4px #ff5020,
          0 0 18px rgba(255,50,10,0.5),
          0 -4px 14px rgba(255,40,0,0.3),
          inset 0 0 12px rgba(255,100,20,0.2);
      }
    }

    /* Marcos · mismos temas que los fondos */
    .cosmo-frame-noche::before,
    .cosmo-frame-noche::after,
    .cosmo-frame-chispas::before,
    .cosmo-frame-chispas::after{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius:18px;
      border:2px dotted rgba(125,255,200,0.55);
      animation: cosmoSpin 9s linear infinite;
      pointer-events:none;
      box-shadow: 0 0 12px rgba(80,220,200,0.25);
    }
    .cosmo-frame-noche::after,
    .cosmo-frame-chispas::after{
      inset:-2px;
      border-style: dashed;
      animation-direction: reverse;
      animation-duration: 13s;
      border-color: rgba(40,160,180,0.5);
    }

    .cosmo-frame-forja::before,
    .cosmo-frame-llama::before{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:22px;
      background: radial-gradient(circle, transparent 52%, rgba(255,120,40,0.18) 68%, rgba(255,60,10,0.5) 100%);
      animation: cosmoFlicker 1.35s ease-in-out infinite;
      pointer-events:none;
    }
    .cosmo-frame-forja::after,
    .cosmo-frame-llama::after{
      content:"";
      position:absolute;
      inset:-4px;
      border-radius:16px;
      border:2px solid #ff9a4a;
      box-shadow: 0 0 16px rgba(255,100,30,0.55), 0 -8px 18px rgba(255,80,20,0.25);
      animation: cosmoFlicker 1.1s ease-in-out infinite reverse;
      pointer-events:none;
    }

    .cosmo-frame-aurora::before,
    .cosmo-frame-runas::before{
      content:"";
      position:absolute;
      inset:-8px;
      border-radius:20px;
      background: conic-gradient(from 0deg, #7dffc8, transparent 18%, #a0b8ff, transparent 40%, #d4a8ff, transparent 62%, #7dffc8, transparent 82%, #a0b8ff);
      animation: cosmoSpin 11s linear infinite;
      opacity:0.9;
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
      mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
      pointer-events:none;
    }
    .cosmo-frame-aurora::after,
    .cosmo-frame-runas::after{
      content:"";
      position:absolute;
      inset:-3px;
      border-radius:16px;
      border:1px solid rgba(160,220,255,0.35);
      box-shadow: 0 0 14px rgba(100,180,255,0.25);
      pointer-events:none;
      animation: cosmoShimmer 3s ease-in-out infinite;
    }

    .cosmo-frame-diluvio::before{
      content:"";
      position:absolute;
      inset:-8px;
      border-radius:18px;
      border:2px solid rgba(120,170,220,0.55);
      box-shadow:
        inset 0 -10px 16px rgba(100,160,220,0.2),
        0 8px 16px rgba(80,140,200,0.25);
      animation: cosmoFrameDiluvio 1.6s ease-in-out infinite;
      pointer-events:none;
    }
    .cosmo-frame-diluvio::after{
      content:"";
      position:absolute;
      inset:-2px 18% auto;
      height: 10px;
      border-radius: 0 0 8px 8px;
      background: linear-gradient(180deg, rgba(160,200,255,0.5), transparent);
      animation: cosmoFrameRainBead 1.1s linear infinite;
      pointer-events:none;
    }
    @keyframes cosmoFrameDiluvio {
      0%, 100% { box-shadow: inset 0 -8px 14px rgba(100,160,220,0.15), 0 6px 12px rgba(80,140,200,0.2); }
      50% { box-shadow: inset 0 -14px 20px rgba(120,180,240,0.3), 0 12px 18px rgba(100,160,220,0.35); }
    }
    @keyframes cosmoFrameRainBead {
      0% { opacity: 0; transform: translateY(0); }
      30% { opacity: 0.8; }
      100% { opacity: 0; transform: translateY(18px); }
    }

    .cosmo-frame-escarcha::before,
    .cosmo-frame-cristal::before{
      content:"";
      position:absolute;
      inset:-8px;
      border-radius:16px;
      background:
        linear-gradient(135deg, rgba(200,240,255,0.85), rgba(100,170,220,0.2) 40%, rgba(220,250,255,0.7));
      animation: cosmoShimmer 2.4s ease-in-out infinite;
      opacity:0.88;
      pointer-events:none;
      clip-path: polygon(6% 0, 94% 0, 100% 8%, 100% 92%, 94% 100%, 6% 100%, 0 92%, 0 8%);
    }
    .cosmo-frame-escarcha::after,
    .cosmo-frame-cristal::after{
      content:"";
      position:absolute;
      inset:-2px;
      border-radius:14px;
      border:1px solid rgba(200,240,255,0.55);
      box-shadow: 0 0 16px rgba(160,220,255,0.4);
      pointer-events:none;
      animation: cosmoBorderEscarcha 2.8s ease-in-out infinite;
    }

    .cosmo-frame-vendaval::before{
      content:"";
      position:absolute;
      inset:-8px;
      border-radius:18px;
      border:2px solid rgba(180,200,220,0.45);
      box-shadow: -8px 0 16px rgba(180,200,220,0.2), 8px 0 16px rgba(180,200,220,0.2);
      animation: cosmoFrameVendaval 2.1s ease-in-out infinite;
      pointer-events:none;
    }
    .cosmo-frame-vendaval::after{
      content:"";
      position:absolute;
      inset: 20% -12px;
      border-radius: 50%;
      background: linear-gradient(90deg, transparent, rgba(200,220,240,0.35), transparent);
      animation: cosmoFrameWindSweep 1.8s linear infinite;
      pointer-events:none;
    }
    .cosmo-frame-album-forjador::before,
    .cosmo-frame-album-maestro::before{
      content:"";
      position:absolute;
      inset:-6px;
      border-radius:16px;
      border:2px solid rgba(255,160,60,0.55);
      box-shadow: 0 0 18px rgba(255,120,40,0.35);
      animation: cosmoShimmer 2.6s ease-in-out infinite;
      pointer-events:none;
    }
    .cosmo-frame-album-maestro::before{
      border-color: rgba(255,210,100,0.65);
      box-shadow: 0 0 22px rgba(255,200,80,0.4);
    }
    .cosmo-frame-album-forjador::after,
    .cosmo-frame-album-maestro::after{
      content:"";
      position:absolute;
      inset:12% -10px;
      background: linear-gradient(90deg, transparent, rgba(255,180,80,0.28), transparent);
      animation: cosmoFrameWindSweep 2.2s linear infinite;
      pointer-events:none;
    }
    .cosmo-frame-puchadex-atlas::before{
      content:"";
      position:absolute;
      inset:-8px;
      border-radius:18px;
      border:2px dashed rgba(90,210,255,0.7);
      box-shadow: 0 0 20px rgba(90,200,255,0.35);
      animation: cosmoShimmer 2.4s ease-in-out infinite;
      pointer-events:none;
    }
    .cosmo-frame-puchadex-supremo::before{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:20px;
      background:
        conic-gradient(from 40deg, #ff4a5a, #ffe08a, #5ad0ff, #b388ff, #ff4a5a);
      opacity:0.95;
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
      mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
      animation: cosmoSpin 9s linear infinite;
      pointer-events:none;
    }
    .cosmo-frame-puchadex-supremo::after{
      content:"◆";
      position:absolute;
      top:-6px; left:50%;
      transform:translateX(-50%);
      color:#ffe08a;
      font-size:11px;
      text-shadow:0 0 8px rgba(255,220,100,.8);
      pointer-events:none;
    }
    @keyframes cosmoFrameVendaval {
      0%, 100% { transform: translateX(0); box-shadow: -6px 0 12px rgba(180,200,220,0.15), 6px 0 12px rgba(180,200,220,0.15); }
      50% { transform: translateX(2px); box-shadow: -12px 0 18px rgba(200,220,240,0.35), 12px 0 18px rgba(200,220,240,0.35); }
    }
    @keyframes cosmoFrameWindSweep {
      0% { transform: translateX(-30%) skewX(-12deg); opacity: 0; }
      40% { opacity: 0.7; }
      100% { transform: translateX(30%) skewX(-12deg); opacity: 0; }
    }

    .cosmo-frame-volcan::before{
      content:"";
      position:absolute;
      inset:-10px;
      border-radius:18px;
      background:
        conic-gradient(from 200deg,
          #3a1a0a 0%, #c05018 12%, #3a1a0a 24%, #ff8020 36%,
          #2a1008 48%, #e06020 60%, #3a1a0a 72%, #ff9a40 84%, #3a1a0a 100%);
      opacity:0.92;
      -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
      mask: radial-gradient(farthest-side, transparent calc(100% - 5px), #000 calc(100% - 4px));
      animation: cosmoSpin 14s linear infinite, cosmoFlicker 1.5s ease-in-out infinite;
      pointer-events:none;
      filter: none;
    }
    .cosmo-frame-volcan::after{
      content:"";
      position:absolute;
      inset:-4px;
      border-radius:16px;
      border:1px solid rgba(255,140,50,0.45);
      box-shadow: none;
      animation: none;
      pointer-events:none;
    }

    body.cosmo-bg-noche{
      background:
        radial-gradient(ellipse at 30% 10%, rgba(40,140,160,0.28), transparent 50%),
        linear-gradient(160deg, #0a1218, #0e1a22 40%, #0a1016) !important;
    }
    body.cosmo-bg-forja{
      background: linear-gradient(180deg, #1a100c 0%, #120c0a 45%, #0a0808 100%) !important;
    }
    body.cosmo-bg-aurora{
      background:
        linear-gradient(100deg, transparent 20%, rgba(80,200,160,0.12), rgba(100,140,255,0.1), transparent 80%),
        linear-gradient(120deg, #0b1220, #122018 40%, #101828) !important;
      background-size: 200% 100%, auto;
      animation: cosmoAurora 8s linear infinite;
    }
    body.cosmo-bg-diluvio{
      background: linear-gradient(180deg, #0a121c 0%, #0c1520 50%, #081018 100%) !important;
    }
    body.cosmo-bg-escarcha{
      background:
        radial-gradient(ellipse at 70% 0%, rgba(160,220,255,0.18), transparent 55%),
        linear-gradient(180deg, #0c1520 0%, #0a1218 50%, #081018 100%) !important;
    }
    body.cosmo-bg-vendaval{
      background: linear-gradient(115deg, #0c1218 0%, #101820 45%, #0a1016 100%) !important;
    }
    body.cosmo-bg-volcan{
      background:
        radial-gradient(ellipse 70% 45% at 50% 108%, rgba(255,80,10,0.32), transparent 60%),
        radial-gradient(ellipse 40% 30% at 50% 0%, rgba(80,20,10,0.35), transparent 70%),
        linear-gradient(180deg, #1a0c0a 0%, #120808 40%, #0a0606 100%) !important;
    }
    body.cosmo-bg-album-ascendente{
      background:
        radial-gradient(ellipse 60% 40% at 50% 0%, rgba(140,120,255,0.22), transparent 55%),
        radial-gradient(ellipse 50% 35% at 80% 100%, rgba(80,200,180,0.15), transparent 50%),
        linear-gradient(165deg, #0c1020 0%, #12182a 45%, #0a1018 100%) !important;
    }
    body.cosmo-bg-album-maestro{
      background:
        radial-gradient(ellipse 55% 40% at 50% 10%, rgba(255,210,100,0.18), transparent 55%),
        radial-gradient(ellipse 45% 30% at 20% 90%, rgba(80,180,140,0.12), transparent 50%),
        linear-gradient(160deg, #14120c 0%, #1a1610 40%, #0c0a08 100%) !important;
    }
    body.cosmo-bg-puchadex-supremo{
      background:
        radial-gradient(ellipse 50% 38% at 18% 12%, rgba(255,70,90,0.2), transparent 55%),
        radial-gradient(ellipse 48% 34% at 82% 88%, rgba(90,210,255,0.2), transparent 52%),
        radial-gradient(ellipse 40% 28% at 50% 50%, rgba(255,224,120,0.1), transparent 50%),
        linear-gradient(160deg, #061018 0%, #0a1428 42%, #04080e 100%) !important;
    }
    body.cosmo-bg-patron{
      background:
        radial-gradient(ellipse 60% 42% at 78% 8%, rgba(150,90,255,0.22), transparent 52%),
        radial-gradient(ellipse 50% 32% at 18% 95%, rgba(220,160,70,0.14), transparent 50%),
        linear-gradient(165deg, #120c1c 0%, #0e0a14 42%, #08060c 100%) !important;
    }

    #cosmoBgFx{
      display: none;
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }
    body.cosmo-bg-noche #cosmoBgFx,
    body.cosmo-bg-forja #cosmoBgFx,
    body.cosmo-bg-aurora #cosmoBgFx,
    body.cosmo-bg-diluvio #cosmoBgFx,
    body.cosmo-bg-escarcha #cosmoBgFx,
    body.cosmo-bg-vendaval #cosmoBgFx,
    body.cosmo-bg-volcan #cosmoBgFx{
      display: block;
    }
    .cosmoBgLayer{
      display: none;
      position: absolute;
      inset: 0;
      overflow: hidden;
    }
    body.cosmo-bg-noche .cosmoBgLayer[data-bg="noche"],
    body.cosmo-bg-forja .cosmoBgLayer[data-bg="forja"],
    body.cosmo-bg-aurora .cosmoBgLayer[data-bg="aurora"],
    body.cosmo-bg-diluvio .cosmoBgLayer[data-bg="diluvio"],
    body.cosmo-bg-escarcha .cosmoBgLayer[data-bg="escarcha"],
    body.cosmo-bg-vendaval .cosmoBgLayer[data-bg="vendaval"],
    body.cosmo-bg-volcan .cosmoBgLayer[data-bg="volcan"]{
      display: block;
    }

    /* —— Forja: fuego —— */
    .cosmoForjaGlow{
      position: absolute; left:0; right:0; bottom:0; height: min(42vh, 320px);
      background:
        radial-gradient(ellipse 90% 70% at 50% 100%, rgba(255, 90, 20, 0.28), transparent 70%),
        radial-gradient(ellipse 50% 45% at 20% 100%, rgba(255, 140, 40, 0.22), transparent 65%),
        radial-gradient(ellipse 45% 40% at 80% 100%, rgba(255, 60, 10, 0.2), transparent 65%);
      animation: cosmoForjaGlowPulse 3.2s ease-in-out infinite alternate;
    }
    .cosmoForjaFlame{
      position: absolute; bottom: -8%;
      width: var(--fw, 28px); height: var(--fh, 70px);
      border-radius: 50% 50% 40% 40%;
      background: radial-gradient(ellipse at 50% 80%, rgba(255, 230, 140, 0.85) 0%, rgba(255, 140, 40, 0.55) 35%, rgba(220, 40, 10, 0.25) 65%, transparent 78%);
      opacity: 0;
      animation: cosmoForjaRise var(--dur, 3.4s) ease-out infinite;
      animation-delay: var(--delay, 0s);
      transform-origin: 50% 100%;
    }
    .cosmoForjaSpark{
      position: absolute; bottom: 0; width: 4px; height: 4px; border-radius: 50%;
      background: #ffc070; box-shadow: 0 0 8px 2px rgba(255, 120, 40, 0.7);
      opacity: 0;
      animation: cosmoForjaSparkRise var(--dur, 2.8s) linear infinite;
      animation-delay: var(--delay, 0s);
    }
    @keyframes cosmoForjaGlowPulse { from { opacity: 0.75; } to { opacity: 1; } }
    @keyframes cosmoForjaRise {
      0% { opacity: 0; transform: translateY(12px) scaleX(0.85) scaleY(0.7); }
      18% { opacity: 0.55; }
      45% { opacity: 0.4; transform: translateY(-45%) scaleX(1) scaleY(1.15); }
      100% { opacity: 0; transform: translateY(-110%) scaleX(0.7) scaleY(1.35); }
    }
    @keyframes cosmoForjaSparkRise {
      0% { opacity: 0; transform: translateY(0) scale(0.6); }
      15% { opacity: 0.9; }
      100% { opacity: 0; transform: translateY(-160px) translateX(var(--drift, 8px)) scale(0.3); }
    }

    /* —— Noche teal: orbes bioluminiscentes —— */
    .cosmoNocheOrb{
      position: absolute;
      width: var(--sz, 10px); height: var(--sz, 10px);
      border-radius: 50%;
      background: radial-gradient(circle, rgba(125,255,220,0.9), rgba(40,160,180,0.2) 55%, transparent 70%);
      box-shadow: 0 0 12px rgba(80, 220, 200, 0.45);
      opacity: 0;
      animation: cosmoNocheFloat var(--dur, 7s) ease-in-out infinite;
      animation-delay: var(--delay, 0s);
      left: var(--x, 50%);
      bottom: -5%;
    }
    @keyframes cosmoNocheFloat {
      0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.6); }
      20% { opacity: 0.7; }
      100% { opacity: 0; transform: translateY(-85vh) translateX(var(--drift, 20px)) scale(1.1); }
    }

    /* —— Aurora: cortinas —— */
    .cosmoAuroraCurtain{
      position: absolute;
      inset: -10% -20%;
      background:
        linear-gradient(105deg,
          transparent 20%,
          rgba(80, 220, 170, 0.14) 35%,
          rgba(100, 140, 255, 0.12) 50%,
          rgba(180, 100, 255, 0.08) 62%,
          transparent 78%);
      background-size: 220% 100%;
      animation: cosmoAuroraCurtainMove var(--dur, 9s) linear infinite;
      animation-delay: var(--delay, 0s);
      opacity: 0.85;
      mix-blend-mode: screen;
    }
    .cosmoAuroraSpeck{
      position: absolute;
      width: 3px; height: 3px; border-radius: 50%;
      background: rgba(180, 255, 230, 0.8);
      box-shadow: 0 0 6px rgba(120, 220, 255, 0.6);
      left: var(--x, 40%); top: var(--y, 20%);
      animation: cosmoAuroraTwinkle var(--dur, 3s) ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }
    @keyframes cosmoAuroraCurtainMove {
      from { background-position: 0% 0; transform: translateX(-4%); }
      to { background-position: 100% 0; transform: translateX(4%); }
    }
    @keyframes cosmoAuroraTwinkle {
      0%, 100% { opacity: 0.15; transform: scale(0.8); }
      50% { opacity: 0.9; transform: scale(1.3); }
    }

    /* —— Diluvio: lluvia —— */
    .cosmoRainDrop{
      position: absolute;
      top: -10%;
      left: var(--x, 50%);
      width: 2px;
      height: var(--len, 14px);
      border-radius: 2px;
      background: linear-gradient(180deg, transparent, rgba(160, 200, 255, 0.55));
      opacity: 0;
      animation: cosmoRainFall var(--dur, 1.1s) linear infinite;
      animation-delay: var(--delay, 0s);
    }
    .cosmoRainMist{
      position: absolute; left:0; right:0; bottom:0; height: 18%;
      background: linear-gradient(180deg, transparent, rgba(100, 140, 180, 0.12));
    }
    @keyframes cosmoRainFall {
      0% { opacity: 0; transform: translateY(0) translateX(0); }
      10% { opacity: 0.7; }
      100% { opacity: 0; transform: translateY(110vh) translateX(12px); }
    }

    /* —— Escarcha eterna: cristales / nieve —— */
    .cosmoIceCrystal{
      position: absolute;
      left: var(--x, 40%);
      top: -8%;
      width: var(--sz, 8px); height: var(--sz, 8px);
      background: rgba(200, 240, 255, 0.85);
      clip-path: polygon(50% 0%, 65% 35%, 100% 50%, 65% 65%, 50% 100%, 35% 65%, 0% 50%, 35% 35%);
      box-shadow: 0 0 8px rgba(160, 220, 255, 0.5);
      opacity: 0;
      animation: cosmoIceDrift var(--dur, 6s) linear infinite;
      animation-delay: var(--delay, 0s);
    }
    .cosmoIceFrost{
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 40% 30% at 10% 0%, rgba(180, 230, 255, 0.12), transparent 70%),
        radial-gradient(ellipse 35% 25% at 90% 5%, rgba(200, 240, 255, 0.1), transparent 70%);
      animation: cosmoForjaGlowPulse 4s ease-in-out infinite alternate;
    }
    @keyframes cosmoIceDrift {
      0% { opacity: 0; transform: translateY(0) rotate(0deg); }
      15% { opacity: 0.75; }
      100% { opacity: 0; transform: translateY(105vh) rotate(180deg) translateX(var(--drift, 30px)); }
    }

    /* —— Vendaval: ráfagas —— */
    .cosmoWindStreak{
      position: absolute;
      top: var(--y, 40%);
      left: -20%;
      width: var(--len, 120px);
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, transparent, rgba(200, 220, 240, 0.45), transparent);
      opacity: 0;
      animation: cosmoWindGust var(--dur, 2.2s) ease-in-out infinite;
      animation-delay: var(--delay, 0s);
    }
    .cosmoWindLeaf{
      position: absolute;
      top: var(--y, 50%);
      left: -5%;
      width: 7px; height: 4px;
      border-radius: 50%;
      background: rgba(180, 200, 160, 0.55);
      opacity: 0;
      animation: cosmoWindLeafFly var(--dur, 3.5s) linear infinite;
      animation-delay: var(--delay, 0s);
    }
    @keyframes cosmoWindGust {
      0% { opacity: 0; transform: translateX(0) scaleX(0.6); }
      25% { opacity: 0.7; }
      100% { opacity: 0; transform: translateX(120vw) scaleX(1.2); }
    }
    @keyframes cosmoWindLeafFly {
      0% { opacity: 0; transform: translateX(0) translateY(0) rotate(0deg); }
      15% { opacity: 0.8; }
      100% { opacity: 0; transform: translateX(110vw) translateY(var(--bob, 40px)) rotate(420deg); }
    }

    /* —— Volcán: magma, ceniza, brasas —— */
    .cosmoVolcanSky{
      position: absolute; inset: 0;
      background:
        radial-gradient(ellipse 55% 35% at 50% 0%, rgba(120,30,15,0.28), transparent 70%),
        radial-gradient(ellipse 80% 50% at 50% 100%, rgba(255,70,10,0.22), transparent 55%);
      animation: cosmoForjaGlowPulse 2.8s ease-in-out infinite alternate;
    }
    .cosmoVolcanCone{
      position: absolute;
      left: 50%;
      bottom: -2%;
      width: min(70vw, 720px);
      height: min(28vh, 220px);
      transform: translateX(-50%);
      background:
        linear-gradient(180deg, transparent 0%, rgba(40,14,8,0.55) 35%, rgba(20,8,4,0.75) 100%);
      clip-path: polygon(8% 100%, 42% 18%, 50% 8%, 58% 18%, 92% 100%);
      opacity: 0.9;
      filter: drop-shadow(0 0 24px rgba(255,80,20,0.25));
    }
    .cosmoVolcanCrater{
      position: absolute;
      left: 50%;
      bottom: min(22vh, 170px);
      width: 56px; height: 22px;
      transform: translateX(-50%);
      border-radius: 50%;
      background: radial-gradient(ellipse at 50% 40%, rgba(255,220,120,0.95), rgba(255,80,20,0.7) 45%, rgba(180,30,0,0.4) 70%, transparent);
      box-shadow: 0 0 28px rgba(255,90,20,0.65), 0 -8px 30px rgba(255,60,10,0.4);
      animation: cosmoVolcanCraterPulse 1.8s ease-in-out infinite;
    }
    .cosmoVolcanAsh{
      position: absolute;
      left: var(--x, 50%);
      bottom: 18%;
      width: var(--sz, 5px); height: var(--sz, 5px);
      border-radius: 50%;
      background: rgba(90, 70, 60, 0.75);
      opacity: 0;
      animation: cosmoVolcanAshRise var(--dur, 5.5s) linear infinite;
      animation-delay: var(--delay, 0s);
    }
    .cosmoVolcanEmber{
      position: absolute;
      left: var(--x, 50%);
      bottom: 20%;
      width: 5px; height: 5px;
      border-radius: 50%;
      background: #ffb050;
      box-shadow: 0 0 10px 3px rgba(255,100,20,0.75);
      opacity: 0;
      animation: cosmoVolcanEmberRise var(--dur, 3.2s) ease-out infinite;
      animation-delay: var(--delay, 0s);
    }
    .cosmoVolcanLavaBlob{
      position: absolute;
      left: var(--x, 48%);
      bottom: 22%;
      width: var(--sz, 10px); height: var(--sz, 10px);
      border-radius: 40% 40% 45% 45%;
      background: radial-gradient(circle at 40% 30%, #ffe08a, #ff6020 55%, #a02000 100%);
      opacity: 0;
      animation: cosmoVolcanLavaPop var(--dur, 2.6s) ease-out infinite;
      animation-delay: var(--delay, 0s);
    }
    @keyframes cosmoVolcanCraterPulse {
      0%, 100% { transform: translateX(-50%) scale(1); opacity: 0.85; }
      50% { transform: translateX(-50%) scale(1.15); opacity: 1; }
    }
    @keyframes cosmoVolcanAshRise {
      0% { opacity: 0; transform: translateY(0) translateX(0) scale(0.7); }
      12% { opacity: 0.55; }
      100% { opacity: 0; transform: translateY(-90vh) translateX(var(--drift, 40px)) scale(1.2); }
    }
    @keyframes cosmoVolcanEmberRise {
      0% { opacity: 0; transform: translateY(0) scale(0.5); }
      15% { opacity: 1; }
      100% { opacity: 0; transform: translateY(-55vh) translateX(var(--drift, 20px)) scale(0.2); }
    }
    @keyframes cosmoVolcanLavaPop {
      0% { opacity: 0; transform: translateY(0) scale(0.4); }
      20% { opacity: 0.95; transform: translateY(-18px) scale(1); }
      100% { opacity: 0; transform: translateY(-120px) translateX(var(--drift, 12px)) scale(0.5); }
    }

    @keyframes cosmoSpin { to { transform: rotate(360deg); } }
    @keyframes cosmoFlicker {
      0%, 100% { opacity: 0.55; transform: scale(1); }
      50% { opacity: 1; transform: scale(1.03); }
    }
    @keyframes cosmoShimmer {
      0%, 100% { filter: brightness(0.9); }
      50% { filter: brightness(1.25); }
    }
    @keyframes cosmoAurora {
      from { background-position: 0% 0, 0 0; }
      to { background-position: 200% 0, 0 0; }
    }
    .cosmoSectionTitle{
      font-size:13px;
      font-weight:750;
      color:#ffe08a;
      margin: 12px 0 6px;
    }
    /* Modal Personaliza tu perfil — responsive */
    .cosmoCustomizeModal{
      max-width: min(900px, 96vw) !important;
      width: 100%;
      max-height: min(90vh, 860px) !important;
      overflow: auto;
      box-sizing: border-box;
    }
    .cosmoGrid{
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)) !important;
      gap: 10px !important;
    }
    @media (max-width: 520px){
      .cosmoCustomizeModal{ max-width: 96vw !important; }
      .cosmoGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
    }
    .cosmoCard.locked{ opacity: 0.42; filter: grayscale(0.35); }
    .cosmoCard.equipped{
      border-color: rgba(125,255,200,0.55) !important;
      box-shadow: 0 0 0 1px rgba(125,255,200,0.25);
    }
    .cosmoCard.vipExclusive{
      opacity: 1;
      filter: none;
      border-color: rgba(255,196,90,0.55) !important;
      background: rgba(255,180,60,0.1);
      position: relative;
      cursor: default;
    }
    .cosmoCard.vipExclusive.locked{
      opacity: 1;
      filter: none;
    }
    .cosmoCard.patronExclusive{
      border-color: rgba(180,120,255,0.4);
    }
    /* Badge en flujo (no absolute) para que no se corte ni se salga */
    .cosmoVipBadge{
      display: block;
      width: 100%;
      box-sizing: border-box;
      text-align: center;
      padding: 3px 4px;
      border-radius: 999px;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.03em;
      text-transform: uppercase;
      color: #fff8e7;
      background: linear-gradient(135deg, rgba(180,120,20,0.95), rgba(120,70,10,0.92));
      border: 1px solid rgba(255,210,120,0.55);
      box-shadow: 0 1px 4px rgba(0,0,0,0.3);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      flex-shrink: 0;
    }
    .cosmoCardName{
      font-size: 12px;
      font-weight: 750;
      text-align: center;
      line-height: 1.2;
      word-break: break-word;
      overflow-wrap: anywhere;
    }
    .cosmoCardMeta{
      font-size: 10px;
      color: #7dffc8;
      text-align: center;
      line-height: 1.25;
      word-break: break-word;
    }
    .cosmoCardActions{
      display: flex;
      flex-direction: column;
      gap: 4px;
      width: 100%;
      margin-top: auto;
      flex-shrink: 0;
    }
    .cosmoBtn{
      width: 100%;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.35);
      color: #e8eef5;
      font-size: 10px;
      font-weight: 700;
      border-radius: 6px;
      padding: 6px 4px;
      cursor: pointer;
      line-height: 1.15;
      box-sizing: border-box;
    }
    .cosmoBtn:hover{ background: rgba(255,255,255,0.1); }
    .cosmoBtn.equip{ border-color: rgba(125,255,200,0.35); color: #9dffc8; }
    .cosmoBtn.unequip{ border-color: rgba(255,140,80,0.4); color: #ffb080; }
    .cosmoBtn:disabled{
      opacity: 0.4;
      cursor: default;
    }
    .cosmoHoverPreview{
      position: fixed;
      z-index: 9999;
      width: 148px;
      padding: 10px;
      border-radius: 10px;
      background: rgba(10, 12, 18, 0.96);
      border: 1px solid rgba(255,180,80,0.35);
      box-shadow: 0 12px 28px rgba(0,0,0,0.55);
      pointer-events: none;
      display: none;
    }
    .cosmoHoverPreview.on{ display: block; }
    .cosmoHoverPreview .phTitle{
      font-size: 11px;
      font-weight: 750;
      color: #ffd080;
      margin-bottom: 4px;
    }
    .cosmoHoverPreview .phBlurb{
      font-size: 10px;
      color: #a8b4c4;
      margin-bottom: 8px;
      line-height: 1.3;
    }
    .cosmoHoverStage{
      position: relative;
      width: 120px;
      height: 120px;
      margin: 0 auto;
      border-radius: 12px;
      overflow: hidden;
      background: #121820;
      border: 1px solid rgba(255,255,255,0.08);
    }
    .cosmoHoverStage.frameMode{ overflow: visible; }
    .cosmoHoverInner{
      position: absolute;
      inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(ellipse 60% 40% at 50% 100%, rgba(255,80,10,0.2), transparent 70%),
        #161b24;
      z-index: 2;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      overflow: hidden;
      pointer-events: none;
    }
    .cosmoHoverSkinSlot{
      position: absolute;
      inset: 0;
      display: flex;
      align-items: flex-end;
      justify-content: center;
      z-index: 2;
      pointer-events: none;
      overflow: hidden;
    }
    .cosmoHoverSkinSlot .avatarSprite{
      image-rendering: pixelated;
      background-repeat: no-repeat;
      background-color: transparent;
    }
    .cosmoHoverLpcCanvas{
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      pointer-events: none;
    }
    .cosmoHoverSkinImg{
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center 92%;
      image-rendering: pixelated;
      transform: scale(1.25);
      transform-origin: center bottom;
    }
    .cosmoHoverFx{
      position: absolute;
      inset: 0;
      z-index: 4;
      pointer-events: none;
      overflow: hidden;
      border-radius: inherit;
    }
    .cosmoHoverFx .cosmoRainMist{ height: 22%; }
    .cosmoHoverFx .cosmoRainDrop{
      animation-name: cosmoHoverRainFall;
      height: var(--len, 12px);
    }
    .cosmoHoverFx .cosmoWindStreak{
      animation-name: cosmoHoverWindGust;
      width: var(--len, 72px);
    }
    .cosmoHoverFx .cosmoWindLeaf{ animation-name: cosmoHoverWindLeaf; }
    .cosmoHoverFx .cosmoIceCrystal{ animation-name: cosmoHoverIceDrift; }
    .cosmoHoverFx .cosmoForjaGlow{ height: 55%; }
    .cosmoHoverFx .cosmoIceFrost{ opacity: 0.9; }
    .cosmoHoverFx .cosmoForjaFlame{
      --fw: 14px;
      --fh: 36px;
      bottom: 0;
      animation-name: cosmoHoverForjaRise;
    }
    .cosmoHoverFx .cosmoForjaSpark{ animation-name: cosmoHoverForjaSpark; }
    .cosmoHoverFx .cosmoNocheOrb{ animation-name: cosmoHoverNocheFloat; }
    .cosmoHoverFx .cosmoAuroraCurtain{
      inset: -20% -30%;
      animation-name: cosmoHoverAuroraMove;
    }
    .cosmoHoverFx .cosmoVolcanCone{
      width: 90%;
      height: 42%;
      bottom: -4%;
    }
    .cosmoHoverFx .cosmoVolcanCrater{
      bottom: 34%;
      width: 28px;
      height: 12px;
    }
    .cosmoHoverFx .cosmoVolcanAsh,
    .cosmoHoverFx .cosmoVolcanEmber,
    .cosmoHoverFx .cosmoVolcanLavaBlob{
      animation-name: cosmoHoverVolcanRise;
    }
    @keyframes cosmoHoverRainFall {
      0% { opacity: 0; transform: translateY(0) translateX(0); }
      12% { opacity: 0.85; }
      100% { opacity: 0; transform: translateY(130px) translateX(10px); }
    }
    @keyframes cosmoHoverWindGust {
      0% { opacity: 0; transform: translateX(0) scaleX(0.55); }
      22% { opacity: 0.8; }
      100% { opacity: 0; transform: translateX(140px) scaleX(1.15); }
    }
    @keyframes cosmoHoverWindLeaf {
      0% { opacity: 0; transform: translateX(0) translateY(0) rotate(0deg); }
      15% { opacity: 0.85; }
      100% { opacity: 0; transform: translateX(130px) translateY(var(--bob, 18px)) rotate(360deg); }
    }
    @keyframes cosmoHoverIceDrift {
      0% { opacity: 0; transform: translateY(0) rotate(0deg); }
      15% { opacity: 0.8; }
      100% { opacity: 0; transform: translateY(130px) rotate(160deg) translateX(var(--drift, 16px)); }
    }
    @keyframes cosmoHoverForjaRise {
      0% { opacity: 0; transform: translateY(8px) scaleY(0.55); }
      25% { opacity: 0.9; }
      100% { opacity: 0; transform: translateY(-70px) scaleY(1.05); }
    }
    @keyframes cosmoHoverForjaSpark {
      0% { opacity: 0; transform: translateY(0) translateX(0); }
      20% { opacity: 1; }
      100% { opacity: 0; transform: translateY(-90px) translateX(var(--drift, 10px)); }
    }
    @keyframes cosmoHoverNocheFloat {
      0%, 100% { opacity: 0.25; transform: translateY(0) translateX(0); }
      50% { opacity: 0.9; transform: translateY(-18px) translateX(var(--drift, 8px)); }
    }
    @keyframes cosmoHoverAuroraMove {
      from { background-position: 0% 0; transform: translateX(-6%); }
      to { background-position: 100% 0; transform: translateX(6%); }
    }
    @keyframes cosmoHoverVolcanRise {
      0% { opacity: 0; transform: translateY(0) scale(0.7); }
      18% { opacity: 0.9; }
      100% { opacity: 0; transform: translateY(-95px) translateX(var(--drift, 12px)) scale(1.05); }
    }
    .cosmoHoverStage .cosmoBorderTrack{
      display: none;
      border-radius: 12px;
      z-index: 0;
    }
    .cosmoHoverStage.cosmo-border-volcan .cosmoBorderTrack{
      display: block;
    }
    .cosmoHoverStage.cosmo-border-patron .cosmoBorderTrack{
      display: block;
    }
    .cosmoHoverStage.cosmo-border-patron .cosmoBorderTrack{
      display: block;
    }
    .cosmoHoverStage .cosmoBorderTrack::after{
      border-radius: 9px;
      background: #161b24;
    }
    /* El interior no debe tapar el anillo de lava del preview Volcán */
    .cosmoHoverStage.cosmo-border-volcan .cosmoHoverInner{
      inset: 3px;
      border-radius: 9px;
      background: #161b24;
    }
    .cosmoHoverStage.cosmo-preview-bg-noche{
      background:
        radial-gradient(ellipse at 30% 10%, rgba(40,140,160,0.35), transparent 55%),
        linear-gradient(160deg, #0a1218, #0e1a22 40%, #0a1016);
    }
    .cosmoHoverStage.cosmo-preview-bg-forja{
      background: linear-gradient(180deg, #1a100c 0%, #120c0a 45%, #0a0808 100%);
    }
    .cosmoHoverStage.cosmo-preview-bg-aurora{
      background:
        linear-gradient(100deg, transparent 20%, rgba(80,200,160,0.2), rgba(100,140,255,0.15), transparent 80%),
        linear-gradient(120deg, #0b1220, #122018 40%, #101828);
    }
    .cosmoHoverStage.cosmo-preview-bg-diluvio{
      background: linear-gradient(180deg, #0c1420, #0a1018 50%, #080c12);
    }
    .cosmoHoverStage.cosmo-preview-bg-escarcha{
      background: linear-gradient(160deg, #101820, #0c141c 50%, #0a1016);
    }
    .cosmoHoverStage.cosmo-preview-bg-vendaval{
      background: linear-gradient(110deg, #10141a, #121820 50%, #0c1016);
    }
    .cosmoHoverStage.cosmo-preview-bg-volcan{
      background:
        radial-gradient(ellipse 70% 45% at 50% 108%, rgba(255,80,10,0.4), transparent 60%),
        radial-gradient(ellipse 40% 30% at 50% 0%, rgba(80,20,10,0.35), transparent 70%),
        linear-gradient(180deg, #1a0c0a 0%, #120808 40%, #0a0606 100%);
    }
    .cosmoHoverStage.cosmo-preview-bg-patron,
    .patronMiniCard.cosmo-preview-bg-patron{
      background:
        radial-gradient(ellipse 60% 42% at 80% 0%, rgba(160,90,255,0.32), transparent 55%),
        radial-gradient(ellipse 50% 35% at 15% 100%, rgba(220,160,70,0.18), transparent 50%),
        linear-gradient(165deg, #120c1c, #0e0a14 40%, #08060c);
    }

    /* Perfil: avatar + 2 mascotas — valores finales en panel/profile-avatar-layout.json */
    .avatarBox{
      position:relative;
      width: var(--avatar-size);
      height: var(--avatar-size);
      max-width: 100%;
      border-radius: 14px;
      background: rgba(255,255,255,0.05);
      border: 1px solid var(--border);
      overflow:hidden;
    }
    .gearLpcCanvas{
      position:absolute;
      inset: 0;
      width:100%;
      height:100%;
      z-index:6;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      pointer-events:auto;
      cursor: pointer;
      touch-action: manipulation;
      object-fit: contain;
    }
    .gearLpcSpinHint{
      display:none;
      position:absolute;
      left: 6px;
      right: 6px;
      bottom: 6px;
      z-index: 7;
      pointer-events: none;
      text-align: center;
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #fff;
      text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 0 8px rgba(0,0,0,0.6);
      line-height: 1.2;
      padding: 0;
      background: none;
    }
    .avatarBox.lpc-mode .gearLpcSpinHint{
      display:block;
    }
    .avatarBox.lpc-mode:hover .gearLpcSpinHint{
      opacity: 0.55;
    }
    .avatarBox.lpc-mode{
      overflow: visible;
    }
    .avatarBox.lpc-mode .mage-crystal-orbit-layer{
      z-index: 8;
    }
    .avatarBox.lpc-mode img,
    .avatarBox.lpc-mode .avatarSpriteSlot{
      display:none !important;
    }
    .avatarBox.lpc-mode .petCompanion{
      z-index: 5;
    }
    /* Marcos salen del box; no recortarlos */
    .avatarBox[class*="cosmo-frame-"]{
      overflow:visible;
    }
    .avatarBox[class*="cosmo-frame-"]::before,
    .avatarBox[class*="cosmo-frame-"]::after{
      z-index: 1;
    }
    .avatarBox img{
      position:absolute;
      left:0;
      top:0;
      width:100%;
      height:100%;
      z-index:3;
      pointer-events:none;
      image-rendering: pixelated;
      object-fit: contain;
      object-position: center 92%;
      filter: drop-shadow(0 8px 14px rgba(0,0,0,0.42));
      transform: scale(1.38);
      transform-origin: center 94%;
    }
    .avatarBox.has-pet img{
      object-position: 50% 92%;
      transform: scale(1.38) translateX(10px);
    }
    .avatarBox.no-pet img{
      object-position: center 92%;
      transform: scale(1.38);
    }
    .avatarSpriteSlot{
      position:absolute;
      inset:0;
      z-index:3;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      pointer-events:none;
      overflow:visible;
    }
    .avatarSpriteSlot:empty{
      display:none;
    }
    .avatarSprite{
      image-rendering:pixelated;
      background-repeat:no-repeat;
      background-color:transparent;
      overflow:hidden;
    }
    @keyframes avatarSheet{
      from { background-position: calc(-1px * var(--skin-crop-x, 0) * var(--skin-scale)) calc(-1px * var(--skin-crop-y, 0) * var(--skin-scale)); }
      to { background-position: calc(-1px * (var(--skin-crop-x, 0) + var(--skin-fw) * var(--skin-frames)) * var(--skin-scale)) calc(-1px * var(--skin-crop-y, 0) * var(--skin-scale)); }
    }
    .petCompanion{
      position:absolute;
      z-index:2;
      display:flex;
      align-items:flex-end;
      justify-content:center;
      pointer-events:none;
      opacity:0.92;
      filter: drop-shadow(0 2px 4px rgba(0,0,0,0.4));
      overflow:visible;
    }
    .petCompanion.petVipSlot{
      left: 14%;
      bottom: 0;
      z-index: 2;
      opacity: 0.95;
      transform: translateX(2px) translateY(-6px) scale(1.05);
      transform-origin: bottom left;
      overflow: visible;
    }
    /* Openmon VIP (Glacimot/Volcimot): detrás de la skin, delante de la mascota de inventario */
    .petCompanion.petVipSlot.petVipFullFrame{
      left: 36%;
      bottom: 4px;
      z-index: 2;
      transform: translateX(10px) translateY(-20px);
      transform-origin: bottom center;
    }
    .petCompanion.petVipSlot.volcimot-aura::before{
      content:"";
      position:absolute;
      inset:-14px;
      border-radius:50%;
      background:radial-gradient(circle, rgba(255,120,30,0.5) 0%, rgba(255,60,10,0.22) 42%, transparent 70%);
      animation: panelVolcimotPulse 1.5s ease-in-out infinite;
      pointer-events:none;
      z-index:0;
    }
    .petCompanion.petVipSlot.volcimot-aura .petSprite{
      position:relative;
      z-index:1;
      filter: drop-shadow(0 0 8px rgba(255,120,30,0.65));
    }
    @keyframes panelVolcimotPulse {
      0%, 100% { opacity:0.55; transform:scale(0.92); }
      50% { opacity:1; transform:scale(1.08); }
    }
    .petCompanion.petOwnedSlot{
      left: 4%;
      bottom: 0;
      z-index: 1;
      transform: translateY(-16px);
      overflow: visible;
    }
    .petCompanion.petOwnedSlot.petOwnedSmall{
      transform: translateX(-8px) translateY(-12px);
    }
    /* Openmon base (Shibu): plantilla fija — sync pet-profile-defaults.json ownedSlotFullFrame */
    .petCompanion.petOwnedSlot.petOwnedFullFrame{
      transform: translateX(-16px) translateY(-20px);
    }
    .petSprite.profileFlip{
      transform: scaleX(-1);
    }
    /* Idle bob/respiración para Openmon (1 frame) — usa `translate` para no pelear con transform */
    @keyframes petIdleBob{
      0%, 100% { translate: 0 0; }
      50% { translate: 0 -3px; }
    }
    .petSprite.petIdleBob{
      animation: petIdleBob 2.4s ease-in-out infinite;
      will-change: translate;
    }
    @media (prefers-reduced-motion: reduce){
      .petSprite.petIdleBob{ animation: none; }
    }
    .petCompanion:empty{
      display:none;
    }

    .btn{
      width:100%;
      padding: 12px 14px;
      border-radius: 10px;
      border:1px solid rgba(0,0,0,0.0);
      cursor:pointer;
      font-weight:700;
      font-family: var(--font-display);
      background: linear-gradient(180deg, var(--green), var(--green2));
      color: #06110b;
      transition: transform .08s ease, filter .15s ease;
    }
    .btn:active{ transform: scale(0.99); }
    .btn.secondary{
      background: rgba(255,255,255,0.07);
      color: var(--text);
      border:1px solid var(--border);
    }

    .meta{
      flex:1;
      min-width:0;
    }
    .levelRow{
      display:flex;
      justify-content:space-between;
      align-items:baseline;
      gap: 10px;
      margin-top: 2px;
    }
    .levelRow .lvl{
      font-size: 18px;
      font-weight:700;
    }
    .levelRow .xp{
      font-size: 14px;
      color: var(--muted);
    }
    .goldRow{
      margin-top: 10px;
      display:flex;
      align-items:center;
      gap: 8px;
      font-size: 16px;
      font-weight: 700;
      color: #f0c040;
    }
    .goldRow .goldIcon{
      font-size: 16px;
      line-height: 1;
    }
    .bitsRow{
      margin-top: 6px;
      display:flex;
      align-items:center;
      gap: 8px;
      font-size: 15px;
      font-weight: 700;
      color: #b48cff;
    }
    .bitsRow .bitsIcon{
      font-size: 15px;
      line-height: 1;
    }

    .xpBar{
      margin-top: 10px;
      height: 10px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,255,255,0.10);
      border-radius: 999px;
      overflow:hidden;
      position: relative;
    }
    .xpBar > div{
      height:100%;
      width:0%;
      border-radius: 999px;
      transition: width .45s cubic-bezier(0.22, 0.9, 0.3, 1), box-shadow .4s ease, filter .4s ease;
      background-image: linear-gradient(
        90deg,
        var(--xp-tier-a, #94a3b8) 0%,
        var(--xp-tier-b, #cbd5e1) 28%,
        var(--xp-tier-c, #f1f5f9) 50%,
        var(--xp-tier-b, #cbd5e1) 72%,
        var(--xp-tier-a, #94a3b8) 100%
      );
      background-size: 220% 100%;
      box-shadow: 0 0 8px var(--xp-tier-glow, rgba(148, 163, 184, 0.45));
      animation: profileBarFlow 2.6s linear infinite;
      will-change: background-position, width;
    }
    .xpBar[data-talent-tier="1"]{
      --xp-tier-a:#64748b; --xp-tier-b:#94a3b8; --xp-tier-c:#e2e8f0;
      --xp-tier-glow:rgba(148,163,184,.5);
    }
    .xpBar[data-talent-tier="2"]{
      --xp-tier-a:#0284c7; --xp-tier-b:#38bdf8; --xp-tier-c:#bae6fd;
      --xp-tier-glow:rgba(56,189,248,.55);
    }
    .xpBar[data-talent-tier="3"]{
      --xp-tier-a:#7c3aed; --xp-tier-b:#a78bfa; --xp-tier-c:#ddd6fe;
      --xp-tier-glow:rgba(167,139,250,.55);
    }
    .xpBar[data-talent-tier="4"]{
      --xp-tier-a:#059669; --xp-tier-b:#34d399; --xp-tier-c:#a7f3d0;
      --xp-tier-glow:rgba(52,211,153,.55);
    }
    .xpBar[data-talent-tier="5"]{
      --xp-tier-a:#d97706; --xp-tier-b:#fbbf24; --xp-tier-c:#fde68a;
      --xp-tier-glow:rgba(251,191,36,.65);
    }

    .skillBar{
      margin-top: 8px;
      height: 10px;
      background: rgba(255,255,255,0.12);
      border: 1px solid rgba(196,167,255,0.35);
      border-radius: 999px;
      overflow:hidden;
      position: relative;
    }
    .skillBar > div{
      height:100%;
      width:0%;
      border-radius: 999px;
      transition: width .45s cubic-bezier(0.22, 0.9, 0.3, 1);
      background-image: linear-gradient(
        90deg,
        #5e35b1 0%,
        #7c4dff 28%,
        #e8deff 50%,
        #7c4dff 72%,
        #5e35b1 100%
      );
      background-size: 220% 100%;
      box-shadow: 0 0 8px rgba(124, 77, 255, 0.5);
      animation: profileBarFlow 2.6s linear infinite;
      will-change: background-position, width;
    }
    @keyframes profileBarFlow{
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    @media (prefers-reduced-motion: reduce){
      .xpBar > div,
      .skillBar > div{
        animation: none;
        background-size: 100% 100%;
      }
    }

    .statPlus{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-width: 26px;
      height: 26px;
      margin-right: 6px;
      padding: 0 6px;
      border-radius: 8px;
      border: 1px solid rgba(124,77,255,0.55);
      background: rgba(124,77,255,0.22);
      color: #e8deff;
      font-weight:800;
      font-size: 16px;
      font-family: var(--font-display);
      cursor:pointer;
      vertical-align: middle;
    }
    .statPlus:hover{ filter: brightness(1.08); }
    .statPlus:active{ transform: scale(0.98); }
    .statPlus.welcome{
      border-color: rgba(255,224,138,0.8);
      background: linear-gradient(180deg, #ffe08a, #f0c050);
      color: #06110b;
      box-shadow: 0 0 18px rgba(255,224,138,0.45);
      animation: welcomePlusPop 0.55s ease;
    }
    .stat.awaitingWelcome{
      border-color: rgba(255,224,138,0.45);
      box-shadow: 0 0 16px rgba(255,224,138,0.12);
      background: rgba(255,224,138,0.05);
    }
    @keyframes welcomePlusPop {
      0% { transform: scale(0.2); }
      55% { transform: scale(1.15); }
      100% { transform: scale(1); }
    }

    #statVoucherFxLayer{
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 9999;
    }

    .statVoucherPick{
      display:flex;
      align-items:center;
      gap:10px;
      padding:12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.03);
      cursor:pointer;
      user-select:none;
      margin-bottom:8px;
    }
    .statVoucherPick:hover{ border-color: rgba(201,168,255,0.4); }
    .statVoucherPick.on{
      border-color: rgba(125,255,154,0.65);
      background: rgba(125,255,154,0.1);
    }
    .statVoucherPick .check{
      width:22px;
      height:22px;
      border-radius:6px;
      border:1px solid rgba(255,255,255,0.18);
      display:grid;
      place-items:center;
      font-size:12px;
      color: transparent;
      flex-shrink:0;
    }
    .statVoucherPick.on .check{
      background: #7dff9a;
      border-color: #7dff9a;
      color: #06110b;
      font-weight:800;
    }
    #statVoucherPickCount{
      font-size:12px;
      color: #c9a8ff;
      margin: 0 0 10px;
    }

    /* ── Botón pill Talentos (en gearDollClassTag) ─────── */
    .talentPillBtn{
      display:inline-flex;
      align-items:center;
      gap:5px;
      margin-top:6px;
      padding:4px 12px;
      border-radius:20px;
      border:1.5px solid rgba(160,120,255,.45);
      background:linear-gradient(135deg,rgba(100,60,200,.25),rgba(60,30,120,.35));
      color:#cbb8f5;
      font-size:12px;
      font-weight:700;
      letter-spacing:.4px;
      cursor:pointer;
      transition:all .2s;
      text-decoration:none;
      backdrop-filter:blur(4px);
    }
    .talentPillBtn:hover{
      border-color:#a78bfa;
      background:linear-gradient(135deg,rgba(120,80,230,.4),rgba(80,40,160,.5));
      color:#e4d4ff;
      box-shadow:0 2px 12px rgba(139,92,246,.35);
      transform:translateY(-1px);
    }
    .talentPillBtn .talentPillPt{
      background:rgba(139,92,246,.4);
      border-radius:10px;
      padding:1px 7px;
      font-size:11px;
      color:#c4b5fd;
    }
    /* ── Modal de Talentos ──────────────────────────────── */
    #talentModalBackdrop{
      display:none;
      position:fixed;
      inset:0;
      background:rgba(0,0,0,.72);
      z-index:100050;
      align-items:center;
      justify-content:center;
      padding:16px;
    }
    #talentModalBackdrop.open{
      display:flex;
    }
    #talentModal{
      background:linear-gradient(160deg,#1a1330 0%,#0f0a1e 100%);
      border:1.5px solid rgba(139,92,246,.35);
      border-radius:18px;
      width:100%;
      max-width:540px;
      max-height:88vh;
      overflow-y:auto;
      padding:20px 18px 18px;
      box-shadow:0 8px 48px rgba(0,0,0,.7),0 0 0 1px rgba(139,92,246,.12);
      position:relative;
      animation:talentModalIn .22s cubic-bezier(.22,1,.36,1);
    }
    @keyframes talentModalIn{
      from{ opacity:0; transform:scale(.95) translateY(12px); }
      to{ opacity:1; transform:scale(1) translateY(0); }
    }
    #talentModalClose{
      position:absolute;
      top:12px; right:14px;
      background:rgba(255,255,255,.07);
      border:1px solid rgba(255,255,255,.12);
      color:#c4b5fd;
      border-radius:50%;
      width:30px; height:30px;
      font-size:16px;
      cursor:pointer;
      display:flex;align-items:center;justify-content:center;
      transition:background .15s;
    }
    #talentModalClose:hover{ background:rgba(255,255,255,.14); }
    .talentModalHeader{
      display:flex;
      align-items:center;
      gap:10px;
      margin-bottom:6px;
      padding-right:36px;
    }
    .talentModalTitle{
      font-size:16px;
      font-weight:800;
      color:#e8d8ff;
      letter-spacing:.3px;
    }
    .talentModalPts{
      font-size:12px;
      color:#7dd3fc;
      background:rgba(125,211,252,.12);
      border:1px solid rgba(125,211,252,.25);
      border-radius:10px;
      padding:2px 9px;
      white-space:nowrap;
    }
    .talentModalHint{
      margin-top:6px;
      margin-bottom:10px;
      padding:8px 10px;
      border-radius:10px;
      font-size:12px;
      line-height:1.45;
      color:#c9b8ec;
      background:rgba(255,255,255,.05);
      border:1px solid rgba(255,255,255,.08);
    }
    .talentModalError{
      margin-bottom:10px;
      padding:8px 10px;
      border-radius:10px;
      font-size:12px;
      line-height:1.4;
      color:#fecaca;
      background:rgba(239,68,68,.16);
      border:1px solid rgba(239,68,68,.35);
    }
    .talentTiers{
      display:flex;
      flex-direction:column;
      gap:12px;
      margin-top:10px;
      max-height:min(58vh, 560px);
      overflow:auto;
      padding-right:4px;
    }
    .talentTier{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:10px 10px 12px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,.08);
      border-left:3px solid var(--tier-color, #94a3b8);
      background:rgba(255,255,255,.03);
    }
    .talentTier[data-tier="1"]{ --tier-color:#94a3b8; }
    .talentTier[data-tier="2"]{ --tier-color:#38bdf8; }
    .talentTier[data-tier="3"]{ --tier-color:#a78bfa; }
    .talentTier[data-tier="4"]{ --tier-color:#34d399; }
    .talentTier[data-tier="5"]{
      --tier-color:#fbbf24;
      background:linear-gradient(135deg, rgba(217,119,6,.12), rgba(255,255,255,.02));
      border-color:rgba(251,191,36,.25);
    }
    .talentTierLabel{
      font-size:10px;
      color:var(--tier-color, #6b5fa0);
      text-transform:uppercase;
      letter-spacing:.9px;
      font-weight:700;
    }
    .talentNodes{
      display:grid;
      grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
      gap:8px;
    }
    .talentNode{
      border-radius:11px;
      padding:9px 11px;
      border:1.5px solid rgba(255,255,255,0.09);
      background:rgba(255,255,255,0.04);
      cursor:default;
      transition:all .16s;
    }
    .talentNode.taken{
      border-color:var(--tier-color, #7c3aed);
      background:rgba(255,255,255,.06);
      box-shadow:inset 0 0 0 1px rgba(255,255,255,.04), 0 0 12px rgba(0,0,0,.15);
    }
    .talentNode.unlockable{
      border-color:var(--tier-color, #38bdf8);
      background:rgba(255,255,255,.05);
      cursor:pointer;
    }
    .talentNode.unlockable:hover{
      transform:translateY(-2px);
      box-shadow:0 4px 14px rgba(0,0,0,.25);
      filter:brightness(1.08);
    }
    .talentNode.locked{ opacity:.38; cursor:not-allowed; }
    .talentNode.keystone{
      border-color:#fbbf24;
      background:linear-gradient(135deg, rgba(217,119,6,.22), rgba(251,191,36,.08) 55%, rgba(15,10,5,.15));
      grid-column:1/-1;
      box-shadow:0 0 0 1px rgba(251,191,36,.18), inset 0 1px 0 rgba(253,230,138,.12);
    }
    .talentNode.keystone.unlockable{
      animation:keystonePulse 2.2s ease-in-out infinite;
    }
    .talentNode.keystone.taken{
      background:linear-gradient(135deg, rgba(217,119,6,.35), rgba(251,191,36,.18));
      box-shadow:0 0 22px rgba(251,191,36,.4), inset 0 1px 0 rgba(253,230,138,.2);
    }
    @keyframes keystonePulse{
      0%,100%{ box-shadow:0 0 10px rgba(251,191,36,.25), inset 0 1px 0 rgba(253,230,138,.1); }
      50%{ box-shadow:0 0 22px rgba(251,191,36,.55), inset 0 1px 0 rgba(253,230,138,.18); }
    }
    .talentNodeName{
      font-size:13px;
      font-weight:700;
      color:#e8d8ff;
      margin-bottom:3px;
      line-height:1.2;
    }
    .talentNode.keystone .talentNodeName{
      color:#fde68a;
      letter-spacing:.02em;
      font-size:14px;
    }
    .talentNodeDesc{
      font-size:11px;
      color:#9d8ec0;
      line-height:1.4;
    }
    .talentNode.keystone .talentNodeDesc{ color:#d6c4a0; }
    .talentNodeFooter{
      font-size:11px;
      margin-top:5px;
      font-weight:600;
    }
    .talentNodeFooter.taken-lbl{ color:var(--tier-color, #a78bfa); }
    .talentNodeFooter.cost-lbl{ color:var(--tier-color, #38bdf8); }
    .talentNodeFooter.lock-lbl{ color:#f87171; }
    .talentModalFooter{
      display:flex;
      justify-content:flex-end;
      margin-top:14px;
      padding-top:10px;
      border-top:1px solid rgba(255,255,255,.07);
    }
    .talentResetBtn{
      background:rgba(239,68,68,.12);
      border:1px solid rgba(239,68,68,.3);
      color:#f87171;
      font-size:12px;
      border-radius:8px;
      padding:5px 14px;
      cursor:pointer;
      transition:all .16s;
    }
    .talentResetBtn:hover{ background:rgba(239,68,68,.25); }
    /* ─────────────────────────────────────────────────── */

    .stats{
      margin-top: 14px;
      border-top: 1px solid rgba(255,255,255,0.10);
      padding-top: 12px;
      display:grid;
      gap: 8px;
      font-size: 16px;
      overflow: visible;
    }
    .statResetBox{
      display: flex;
      flex-direction: column;
      gap: 6px;
      margin-bottom: 2px;
    }
    .statResetBtn{
      width: 100%;
      background: rgba(255,196,64,.12);
      border: 1px solid rgba(255,196,64,.45);
      color: #ffd56a;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 13px;
      border-radius: 10px;
      padding: 8px 12px;
      cursor: pointer;
    }
    .statResetBtn:hover{ background: rgba(255,196,64,.22); }
    .statResetHint{
      margin: 0;
      font-size: 12px;
      line-height: 1.4;
      color: #cbbf8a;
    }
    .statResetModal{
      position: fixed;
      inset: 0;
      z-index: 80;
      background: rgba(0,0,0,.55);
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
    }
    .statResetModal[hidden]{ display: none !important; }
    .statResetCard{
      width: min(440px, 100%);
      background: #16121c;
      border: 1px solid rgba(255,196,64,.35);
      border-radius: 14px;
      padding: 16px;
      color: #f3efe6;
    }
    .statResetCard h3{ margin: 0 0 8px; font-size: 16px; }
    .statResetCard p{ margin: 0 0 10px; font-size: 13px; line-height: 1.45; }
    .statResetActions{ display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
    .stat{
      position: relative;
      display:flex;
      align-items:center;
      justify-content:flex-start;
      gap: 6px;
      padding: 8px 10px;
      border-radius: 10px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.08);
      cursor: help;
    }
    .stat .statHoverTip{
      display: none;
      position: absolute;
      left: 8px;
      right: 8px;
      top: calc(100% + 4px);
      z-index: 30;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(224,184,58,0.4);
      background: rgba(10,12,18,0.96);
      box-shadow: 0 10px 24px rgba(0,0,0,0.5);
      font-size: 13px;
      font-weight: 550;
      line-height: 1.4;
      color: #e8ecf5;
      pointer-events: none;
    }
    .stat:hover .statHoverTip,
    .stat:focus-within .statHoverTip{
      display: block;
    }
    .stat:nth-last-child(-n+2) .statHoverTip{
      top: auto;
      bottom: calc(100% + 4px);
    }
    .stat.goldRec{
      border-color: rgba(255,200,60,0.75);
      box-shadow: inset 0 0 0 1px rgba(255,200,60,0.25);
    }
    .stat .k{
      color: var(--muted);
      flex: 1;
      min-width: 0;
      font-size: 16px;
    }
    .stat input{
      width: 52px;
      flex-shrink: 0;
      text-align:right;
      padding: 5px 6px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(0,0,0,0.30);
      color: var(--text);
      font-family: var(--font-display);
      font-size: 13px;
      outline:none;
    }
    .statValueWrap{
      display:flex;
      align-items:center;
      gap: 6px;
      flex-shrink: 0;
    }
    .petStatBonus{
      font-size: 11px;
      font-weight: 700;
      color: #8fe6b5;
      white-space: nowrap;
    }
    .potionStatBonus{
      font-size: 11px;
      font-weight: 700;
      color: #9ecbff;
      white-space: nowrap;
    }
    .gearStatBonus{
      font-size: 11px;
      font-weight: 700;
      color: #e0b83a;
      white-space: nowrap;
    }
    .petStatPenalty,
    .potionStatPenalty{
      color: #f5a6a6;
    }
    .gearPill{
      display:inline-block;
      font-size: 10px;
      font-weight: 700;
      padding: 2px 7px;
      border-radius: 999px;
      border: 1px solid var(--border);
    }
    .gearPill.Iniciado,
    .gearPill.Default{ color: var(--muted); }
    .gearPill.Low{ color: #aab3c5; }
    .gearPill.Medium{ color: #6ba3d4; border-color: rgba(107,163,212,.4); }
    .gearPill.Epic{ color: #e0b83a; border-color: rgba(224,184,58,.4); }
    .gearPill.Legendary{ color: #ff6b6b; border-color: rgba(255,107,107,.4); }
    .gearClassPick{ display:flex; flex-wrap:wrap; gap:8px; margin: 8px 0 12px; }
    .gearClassBtn{
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      color: var(--text);
      border-radius: 999px;
      padding: 7px 12px;
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .gearClassBtn.on{
      border-color: rgba(25,195,125,.55);
      color: var(--green);
      background: rgba(25,195,125,.1);
    }
    .gearClassBtn:disabled{ opacity:.45; cursor:not-allowed; }

    .classPickModal{
      width: min(980px, 96vw);
      max-height: min(92vh, 900px);
      overflow: auto;
    }
    .classPickBadge{
      display: block;
      width: fit-content;
      margin: 0 auto 10px;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .04em;
      text-transform: uppercase;
      color: #ffe08a;
      border: 1px solid rgba(255,224,138,.35);
      background: rgba(255,224,138,.08);
      border-radius: 999px;
      padding: 4px 10px;
    }
    .classPickSub{ text-align: center; max-width: 640px; margin: 0 auto 14px; }
    .classPickSub strong{ color: #ffe08a; font-weight: 700; }
    .classPickCards{
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 12px;
      align-items: stretch;
    }
    @media (max-width: 820px){
      .classPickCards{ grid-template-columns: 1fr; }
    }
    .classPickCard{
      position: relative;
      display: flex;
      flex-direction: column;
      height: 100%;
      min-height: 0;
      border: 1px solid var(--border);
      border-radius: 16px;
      background:
        radial-gradient(ellipse 70% 50% at 50% 20%, rgba(255,255,255,.04), transparent 60%),
        rgba(255,255,255,.03);
      padding: 12px 10px;
      cursor: pointer;
      text-align: left;
      color: inherit;
      font-family: inherit;
      transition: border-color .15s ease, transform .12s ease, background .15s ease;
    }
    .classPickCard:hover{ transform: translateY(-2px); border-color: rgba(255,255,255,.22); }
    .classPickCard.on{
      border-color: rgba(25,195,125,.65);
      background:
        radial-gradient(ellipse 70% 50% at 50% 15%, rgba(25,195,125,.12), transparent 55%),
        rgba(25,195,125,.06);
      box-shadow: 0 0 0 1px rgba(25,195,125,.2);
    }
    .classPickCard.locked{
      opacity: .55;
      cursor: not-allowed;
      filter: grayscale(.35);
    }
    .classPickCard.locked:hover{ transform: none; border-color: rgba(255,255,255,.12); }
    .gearClassBtn.locked{ opacity: .55; cursor: not-allowed; }
    .gearClassLock{
      display: block;
      margin-top: 4px;
      font-size: 11px;
      color: #ffb4b4;
    }
    .gearClassMain{
      display: block;
      margin-top: 4px;
      font-size: 10px;
      letter-spacing: .04em;
      color: var(--gold, #ffd76a);
    }
    .classPickCardName{
      font-size: 14px;
      font-weight: 700;
      text-align: center;
      color: #ffe08a;
      margin: 0 0 2px;
    }
    .classPickCardTag{
      text-align: center;
      font-size: 11px;
      color: var(--muted);
      margin: 0 0 8px;
      min-height: 2.6em;
      line-height: 1.3;
    }
    .classPickStage{
      width: 100%;
      aspect-ratio: 1;
      max-width: 200px;
      margin: 0 auto 6px;
      border-radius: 14px;
      border: 1px solid rgba(255,107,107,.35);
      background:
        radial-gradient(ellipse 70% 55% at 50% 20%, rgba(255,107,107,.14), transparent 60%),
        linear-gradient(180deg, #1a2436, #0c1018 58%, #12100c);
      display: grid;
      place-items: center;
      overflow: hidden;
      box-shadow: inset 0 0 0 1px rgba(255,224,138,.08);
      flex: 0 0 auto;
    }
    .classPickStage canvas{
      width: 100%;
      height: 100%;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      pointer-events: none;
    }
    .classPickSetLabel{
      text-align: center;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #ff8e8e;
      margin: 0 0 10px;
      flex: 0 0 auto;
    }
    /* Misma distribución que Guerrero: 2 arriba + 1 centrada abajo */
    .classPickFocus{
      display: grid;
      grid-template-columns: repeat(2, max-content);
      justify-content: center;
      justify-items: center;
      align-content: start;
      gap: 4px;
      margin-bottom: 8px;
      min-height: 48px;
      flex: 0 0 auto;
    }
    .classPickFocus span{
      font-size: 10px;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 999px;
      border: 1px solid var(--border);
      color: #8fe6b5;
      background: rgba(25,195,125,.08);
      white-space: nowrap;
    }
    .classPickFocus span:nth-child(3){
      grid-column: 1 / -1;
    }
    .classPickFocus span.classPickDps{
      color: #fff0c2;
      border-color: rgba(255,224,138,.45);
      background: rgba(255,224,138,.12);
    }
    .classPickDpsLine{
      text-align: center;
      font-size: 11px;
      color: var(--muted);
      margin: 0 0 8px;
      flex: 0 0 auto;
    }
    .classPickDpsLine b{ color: #ffe08a; }
    .classPickBlurb{
      font-size: 12px;
      color: var(--muted);
      text-align: center;
      line-height: 1.4;
      min-height: 3.6em;
      margin: 0;
      flex: 1 1 auto;
    }
    .classPickCheck{
      position: absolute;
      top: 10px;
      right: 10px;
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 1px solid var(--border);
      display: grid;
      place-items: center;
      font-size: 12px;
      color: transparent;
      background: rgba(0,0,0,.25);
    }
    .classPickCard.on .classPickCheck{
      border-color: rgba(25,195,125,.7);
      background: rgba(25,195,125,.25);
      color: #8fe6b5;
    }
    .classPickActions{ justify-content: center; margin-top: 14px; }
    .classPickHint{
      text-align: center;
      font-size: 12px;
      color: var(--muted);
      min-height: 18px;
      margin-top: 8px;
    }

    .gearPityBox{
      margin: 14px 0 8px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,224,138,0.18);
      background: rgba(0,0,0,0.22);
    }
    .gearPityTitle{
      font-size: 13px;
      font-weight: 700;
      color: #ffe08a;
      margin: 0 0 8px;
    }
    .gearPityRow{
      display: grid;
      grid-template-columns: 1fr;
      gap: 4px;
      margin: 8px 0 0;
    }
    .gearPityMeta{
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 6px;
      font-size: 12px;
      color: #d7e3f7;
    }
    .gearPityMeta .gearPityDiff{ font-weight: 700; color: #fff; }
    .gearPityMeta .gearPityCount{ font-variant-numeric: tabular-nums; font-weight: 700; color: #ffe08a; }
    .gearPityMeta .gearPityReady{ color: #9dffb0; font-weight: 700; }
    .gearPityBar{
      height: 8px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(255,224,138,0.16);
      border-radius: 999px;
      overflow: hidden;
    }
    .gearPityBar > span{
      display: block;
      height: 100%;
      width: 0;
      border-radius: 999px;
      background: linear-gradient(90deg, #c9a227, #ffe08a);
    }
    .gearPityBar.is-ready > span{ background: linear-gradient(90deg, #3d9a5a, #9dffb0); }

    .gearRarityBlock{ margin: 12px 0 16px; }
    .gearRarityTitle{
      display:flex;
      align-items:center;
      gap:8px;
      width: 100%;
      margin: 10px 0 0;
      padding: 0;
      border: none;
      background: transparent;
      color: #ffe08a;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      text-align: left;
    }
    .gearRarityTitle:hover{ filter: brightness(1.08); }
    .gearRarityTitle .historyChevron{
      display: inline-block;
      width: 12px;
      font-size: 11px;
      color: var(--muted);
      transition: transform 0.15s ease;
    }
    .gearRarityTitle[aria-expanded="true"] .historyChevron{
      transform: rotate(90deg);
    }
    .gearRarityTitle .historyCount{
      color: var(--muted);
      font-weight: 600;
      font-size: 12px;
    }
    .gearRarityBody{
      margin-top: 8px;
    }
    .gearRarityBody[hidden]{ display: none; }
    .gearInvGrid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
      gap: 10px;
    }
    .gearCard{
      border:1px solid var(--border);
      background: rgba(255,255,255,.04);
      border-radius: 14px;
      padding: 10px 36px 10px 10px;
      font-size: 11px;
      min-height: 128px;
      display:flex;
      flex-direction: column;
      gap: 6px;
      cursor: default;
      transition: outline-color .12s ease, background .12s ease;
      position: relative;
    }
    .gearCard.clickable{ cursor: pointer; }
    .gearCard.clickable:hover{ filter: brightness(1.06); }
    .gearCard.equipped{
      outline: 1px solid rgba(25,195,125,.55);
      background: rgba(25,195,125,.08);
    }
    .gearCard.r-Iniciado,
    .gearCard.r-Default,
    .gearCard.r-Low{ border-color: rgba(170,179,197,.35); }
    .gearCard.r-Medium{ border-color: rgba(107,163,212,.4); }
    .gearCard.r-Epic{ border-color: rgba(224,184,58,.4); }
    .gearCard.r-Legendary{ border-color: rgba(255,107,107,.45); }
    .gearCard .gearCardTop{
      display:flex;
      align-items:center;
      gap: 8px;
    }
    .gearCard .gearCardIcon{
      width: 40px;
      height: 40px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: rgba(0,0,0,.25);
      display:grid;
      place-items:center;
      font-size: 20px;
      flex-shrink: 0;
    }
    .gearCard .gearCardQty{
      position: absolute;
      top: 8px;
      right: 8px;
      min-width: 22px;
      height: 18px;
      padding: 0 5px;
      border-radius: 7px;
      background: #121820;
      border: 1px solid rgba(255,255,255,.28);
      color: #fff;
      font-size: 11px;
      font-weight: 800;
      line-height: 16px;
      text-align: center;
      z-index: 1;
    }
    .gearCard .label{ font-weight: 700; font-size: 12px; line-height: 1.25; }
    .gearCard .gearStats{ color:#8fe6b5; font-size:11px; margin-top:2px; }
    .gearCard .gearCardMeta{ color: var(--muted); font-size: 10px; }
    .gearEquipBtn{
      margin-top: auto;
      width: 100%;
      border:0;
      border-radius: 10px;
      padding: 8px 10px;
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      background: linear-gradient(180deg, var(--green), var(--green2));
      color: #06110b;
    }
    .gearEquipBtn.ghost{
      background: transparent;
      color: var(--muted);
      border: 1px solid var(--border);
    }
    .tutorialHelpBtn{
      position: fixed;
      top: calc(14px + var(--safe-top));
      right: calc(14px + var(--safe-right));
      z-index: 9000;
      width: 42px;
      height: 42px;
      border-radius: 50%;
      border: 1px solid rgba(255,255,255,0.18);
      background: rgba(20,28,44,0.92);
      color: #f0f4ff;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 18px;
      cursor: pointer;
      box-shadow: 0 10px 30px rgba(0,0,0,0.45);
      touch-action: manipulation;
    }
    .tutorialHelpBtn:hover{ filter: brightness(1.12); }
    .tutorialHelpBtn[hidden]{ display: none !important; }
    .chatCommandsBtn{
      right: calc(64px + var(--safe-right));
      font-size: 15px;
    }
    .chatCmdList{
      text-align: left;
      max-height: min(58vh, 420px);
      overflow: auto;
      margin: 4px 0 10px;
      padding-right: 4px;
    }
    .chatCmdGroup{
      margin-bottom: 12px;
    }
    .chatCmdGroupTitle{
      font-size: 12px;
      font-weight: 700;
      color: #9ecbff;
      margin: 0 0 6px;
      letter-spacing: 0.4px;
    }
    .chatCmdRow{
      display: grid;
      grid-template-columns: minmax(120px, 42%) 1fr;
      gap: 8px;
      padding: 7px 8px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      margin-bottom: 6px;
      font-size: 12px;
      line-height: 1.35;
    }
    .chatCmdRow code{
      color: #8fe6b5;
      font-size: 11px;
      word-break: break-word;
    }
    .chatCmdRow span{
      color: #c9d4ea;
    }
    .tourSpotlight{
      position: fixed;
      z-index: 10040;
      pointer-events: none;
      border-radius: 12px;
      box-shadow: 0 0 0 9999px rgba(0,0,0,0.62), 0 0 0 2px rgba(126,214,255,0.85);
      transition: top .2s ease, left .2s ease, width .2s ease, height .2s ease;
    }
    .tourCard{
      position: fixed;
      z-index: 10045;
      width: min(360px, calc(100vw - 28px));
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(15,20,30,0.96);
      box-shadow: 0 24px 80px rgba(0,0,0,0.65);
      padding: 14px;
      color: var(--text);
    }
    .tourCard .tourStepMeta{
      font-size: 11px;
      color: var(--muted);
      margin-bottom: 6px;
    }
    .tourCard .tourTitle{
      font-weight: 700;
      font-size: 15px;
      margin-bottom: 8px;
    }
    .tourCard .tourBody{
      font-size: 12px;
      line-height: 1.45;
      color: #c9d4ea;
      margin-bottom: 12px;
    }
    .tourCard .tourActions{
      display:flex;
      gap: 8px;
      flex-wrap: wrap;
      justify-content: flex-end;
    }
    .tourCard .tourActions .miniBtn[disabled]{
      opacity: 0.45;
      cursor: default;
    }
    .petStatHint{
      font-size: 10px;
      color: #b8c8e8;
      text-align: center;
      line-height: 1.35;
      margin-top: 2px;
    }

    .tabs{
      display:grid;
      grid-template-columns: repeat(5, minmax(0, 1fr));
      gap: 8px;
      align-items: stretch;
      margin-bottom: 14px;
      overflow: visible;
      padding: 0;
    }
    .tab{
      min-width: 0;
      max-width: none;
      text-align:center;
      padding: 10px 8px;
      border-radius: 12px;
      border:1px solid rgba(0,0,0,0.0);
      cursor:pointer;
      font-family: var(--font-display);
      font-weight:700;
      font-size: 14px;
      background: rgba(255,255,255,0.07);
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      touch-action: manipulation;
    }
    .tab.tabCompact{
      font-size: 14px;
      padding: 12px 8px;
      letter-spacing: 0.2px;
    }
    .tab.active{
      background: linear-gradient(180deg, var(--green), var(--green2));
      color: #06110b;
    }

    .content{
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 16px;
      padding: 16px;
      min-height: min(420px, 55vh);
      display:flex;
      flex-direction:column;
      gap: 14px;
      width: 100%;
      min-width: 0;
    }

    .skinsGrid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(var(--skin-min), 1fr));
      gap: 12px;
      margin-top: 6px;
    }
    .skin{
      height: 88px;
      border-radius: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      display:flex;
      align-items:center;
      justify-content:center;
      cursor:pointer;
      position:relative;
      transition: transform .08s ease, border-color .15s ease, background .15s ease;
    }
    /* Cosméticos: la tarjeta debe crecer (badge + Equipar/Quitar); no usar alto fijo de skins */
    .skin.cosmoCard{
      height: auto !important;
      min-height: 112px;
      overflow: hidden;
      flex-direction: column;
      align-items: stretch;
      justify-content: flex-start;
      gap: 6px;
      padding: 8px;
      box-sizing: border-box;
    }
    .skin.cosmoCard .cosmoCardActions{
      margin-top: auto;
      width: 100%;
      flex-shrink: 0;
    }
    .skin.cosmoCard .cosmoBtn{
      width: 100%;
      flex: none;
      min-width: 0;
      white-space: nowrap;
    }
    .skin:hover{ transform: scale(1.02); }
    .skin.selected{
      border-color: rgba(25,195,125,0.9);
      background: rgba(25,195,125,0.12);
    }
    .skin img{
      width: 54px;
      height: 54px;
      object-fit: contain;
      image-rendering: pixelated;
    }
    .skinPreviewSlot{
      position:absolute;
      left:6px;
      right:6px;
      top:4px;
      bottom:22px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      pointer-events:none;
    }
    .skinPreviewSlot .avatarSprite{
      filter:none;
    }
    .tab.vip{
      color: #f0c040;
    }
    .tab.vip.active{
      border-color: rgba(240,192,64,0.55);
      background: rgba(240,192,64,0.12);
      color: #ffe08a;
    }
    .vipBadge{
      display:inline-block;
      margin-left:8px;
      padding:2px 8px;
      border-radius:999px;
      font-size:11px;
      background: rgba(240,192,64,0.18);
      border:1px solid rgba(240,192,64,0.45);
      color:#ffe08a;
      vertical-align:middle;
    }
    .patronBadge{
      display:inline-block;
      margin-left:8px;
      padding:2px 8px;
      border-radius:999px;
      font-size:11px;
      background: rgba(150,90,255,0.2);
      border:1px solid rgba(220,180,120,0.45);
      color:#f3e0ff;
      vertical-align:middle;
    }
    .patronChipRow{
      display:block;
      margin: 8px 0 10px;
    }
    .patronExpiredNotice{
      display:flex;
      align-items:flex-start;
      gap:8px;
      margin:-2px 0 10px;
      padding:8px 10px;
      border-radius:8px;
      border:1px solid rgba(224,120,80,0.32);
      background:rgba(56,28,18,0.42);
      color:#e8b89a;
      font-size:11px;
      line-height:1.35;
    }
    .patronExpiredNotice[hidden]{ display:none !important; }
    .patronExpiredNoticeIcon{
      flex-shrink:0;
      font-size:12px;
      line-height:1.35;
      opacity:0.9;
    }
    .patronExpiredNoticeText strong{
      color:#ffd4b0;
      font-weight:700;
    }
    .patronChip{
      position: relative;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:10px;
      width: 100%;
      padding: 12px 14px;
      border-radius: 10px;
      border: 1px solid rgba(180,120,255,0.45);
      background: linear-gradient(165deg, rgba(80,40,140,0.45), rgba(40,20,70,0.55));
      color: #f3e0ff;
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
      line-height: 1.2;
      overflow: hidden;
    }
    .patronChip:hover{
      filter: brightness(1.08);
    }
    .patronChip.on{
      background: linear-gradient(90deg, rgba(90,40,160,0.72), rgba(180,120,50,0.42));
      color: #fff4e0;
    }
    .patronChipCta{
      position: relative;
      z-index: 2;
      text-shadow: 0 0 12px rgba(200,140,255,0.65), 0 0 18px rgba(255,208,128,0.35);
      animation: patronCtaPulse 1.6s ease-in-out infinite;
    }
    @keyframes patronCtaPulse {
      0%, 100% { filter: brightness(1); transform: scale(1); }
      50% { filter: brightness(1.18); transform: scale(1.03); }
    }
    .patronChipDot{
      position: relative;
      z-index: 2;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #e05050;
      box-shadow: 0 0 8px rgba(224,80,80,0.85);
      flex-shrink: 0;
    }
    .patronChip.on .patronChipDot{
      background: #3dff8a;
      box-shadow: 0 0 10px rgba(61,255,138,0.9);
    }
    .patronChipSparks{
      position: absolute;
      inset: 0;
      overflow: hidden;
      pointer-events: none;
      z-index: 1;
      border-radius: inherit;
    }
    .patronChip .cosmoBorderTrack{
      z-index: 0;
    }
    .patronLiveBtn{
      width: 100%;
      margin-top: 8px;
    }
    .dossierOverlay{
      z-index: 10050;
      align-items: stretch;
      padding: 0;
    }
    .dossierSheet{
      width: 100%;
      min-height: 100%;
      margin: 0;
      border-radius: 0;
      background: radial-gradient(900px 500px at 10% 0%, rgba(120,60,200,0.28), transparent 55%),
        linear-gradient(180deg, #0a0814, #120c1c 40%, #08060e);
      padding: 16px 16px 32px;
      overflow: auto;
      display: flex;
      flex-direction: column;
    }
    .dossierHead{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      align-items:flex-start;
      justify-content:space-between;
      margin-bottom: 10px;
    }
    .dossierHead h2{
      margin: 0;
      font-family: var(--font-display);
      letter-spacing: 0.06em;
      font-size: clamp(18px, 3vw, 26px);
      color: #f3e0ff;
    }
    .dossierHead .muted{ margin-top: 4px; max-width: 42rem; line-height: 1.4; }
    .dossierYouBar{
      font-size: 12px;
      color: #c9bdd8;
      margin-bottom: 12px;
      padding: 8px 12px;
      border: 1px solid rgba(180,120,255,0.22);
      border-radius: 10px;
      background: rgba(20,12,32,0.45);
    }
    .dossierModeBar{
      display:flex;
      gap: 0;
      margin-bottom: 10px;
      border: 1px solid rgba(180,120,255,0.28);
      border-radius: 10px;
      overflow: hidden;
      width: fit-content;
    }
    .dossierModeBar button{
      border: 0;
      background: rgba(0,0,0,0.25);
      color: #c9bdd8;
      padding: 8px 18px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      font-size: 12px;
      cursor: pointer;
    }
    .dossierModeBar button.on{
      background: rgba(255,215,106,0.16);
      color: #ffd76a;
    }
    .dossierLayout{
      display:grid;
      grid-template-columns: minmax(200px, 260px) 1fr;
      gap: 14px;
      align-items: start;
      flex: 1;
    }
    @media (max-width: 820px){
      .dossierLayout{ grid-template-columns: 1fr; }
      .dossierRail{ max-height: 220px; }
    }
    .dossierRail{
      border: 1px solid rgba(180,120,255,0.28);
      background: rgba(20,12,32,0.55);
      border-radius: 14px;
      padding: 10px;
      overflow: auto;
      max-height: calc(100vh - 140px);
    }
    .dossierRailTitle{
      font-size: 11px;
      letter-spacing: 0.12em;
      text-transform: uppercase;
      color: #ffd76a;
      margin-bottom: 8px;
    }
    .dossierScoutBtn{
      width:100%;
      text-align:left;
      margin: 4px 0;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(0,0,0,0.25);
      color: inherit;
      cursor: pointer;
      display:flex;
      flex-direction:column;
      gap: 2px;
    }
    .dossierScoutBtn strong{ font-size: 13px; }
    .dossierScoutBtn em{ font-style: normal; font-size: 11px; color: #a99bb8; }
    .dossierScoutBtn.on{ border-color: #ffd76a; background: rgba(255,215,106,0.08); }
    .dossierDot{
      display:inline-block;
      width:7px; height:7px;
      border-radius:50%;
      margin-right:6px;
      vertical-align: middle;
    }
    .dossierDot.win{ background: #6ee7a8; }
    .dossierDot.loss{ background: #ff8a7a; }
    .dossierMain{
      border: 1px solid rgba(180,120,255,0.28);
      background: rgba(20,12,32,0.4);
      border-radius: 14px;
      min-height: 420px;
      overflow: hidden;
      display:flex;
      flex-direction:column;
    }
    .dossierTabs{
      display:flex;
      gap: 0;
      border-bottom: 1px solid rgba(180,120,255,0.22);
      background: rgba(0,0,0,0.2);
    }
    .dossierTabs[hidden]{ display: none !important; }
    .dossierTabs button{
      flex:1;
      border:0;
      background: transparent;
      color: #c9bdd8;
      padding: 12px 8px;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      cursor: pointer;
      font-weight: 700;
    }
    .dossierTabs button.on{
      color: #ffd76a;
      box-shadow: inset 0 -2px 0 #ffd76a;
      background: rgba(255,215,106,0.06);
    }
    .dossierPane{ padding: 16px; flex:1; }
    .dossierBadge{
      display:inline-block;
      font-size: 13px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: 6px;
      margin-bottom: 8px;
    }
    .dossierBadge.win{ background: rgba(110,231,168,0.15); color: #6ee7a8; }
    .dossierBadge.loss{ background: rgba(255,138,122,0.15); color: #ff8a7a; }
    .dossierStory{
      font-size: 15px;
      line-height: 1.45;
      color: #f3e0ff;
      margin: 8px 0 14px;
    }
    .dossierChips{ display:flex; flex-wrap:wrap; gap:6px; margin-top: 12px; }
    .dossierChip{
      font-size: 11px;
      padding: 4px 8px;
      border-radius: 999px;
      border: 1px solid rgba(180,120,255,0.3);
      color: #dcd2f0;
      background: rgba(0,0,0,0.25);
      cursor: pointer;
    }
    .dossierStatRow{
      display:grid;
      grid-template-columns: 88px 1fr 72px 40px;
      gap: 8px;
      align-items:center;
      margin: 8px 0;
      font-size: 12px;
    }
    .dossierStatRow .bars .track{
      height: 7px;
      border-radius: 4px;
      background: rgba(255,255,255,0.08);
      overflow:hidden;
      margin: 2px 0;
    }
    .dossierStatRow .bars i{ display:block; height:100%; border-radius: 4px; }
    .dossierStatRow .bars i.me{ background: linear-gradient(90deg, #b07cff, #5a2a9a); }
    .dossierStatRow .bars i.rv{ background: linear-gradient(90deg, #ffb060, #8a4020); }
    .dossierStatRow .nums{ color: #c9bdd8; text-align:right; font-variant-numeric: tabular-nums; }
    .dossierStatRow .delta{ text-align:right; font-weight: 800; }
    .dossierStatRow .delta.up{ color: #6ee7a8; }
    .dossierStatRow .delta.down{ color: #ff8a7a; }
    .dossierLegend{ font-size: 11px; color: #a99bb8; margin-bottom: 8px; }
    .dossierLegend b.me{ color: #c9a0ff; }
    .dossierLegend b.rv{ color: #ffb060; }
    .dossierSimGrid{
      display:grid;
      grid-template-columns: 1fr minmax(160px, 220px);
      gap: 18px;
      align-items: start;
    }
    @media (max-width: 700px){
      .dossierSimGrid{ grid-template-columns: 1fr; }
      .dossierStatRow{ grid-template-columns: 72px 1fr 56px 36px; }
    }
    .dossierSimRow{
      display:flex;
      gap:8px;
      align-items:center;
      margin: 6px 0;
      font-size: 13px;
    }
    .dossierSimRow span.lab{ width: 92px; }
    .dossierPm{
      width: 28px; height: 28px;
      border-radius: 8px;
      border: 1px solid rgba(255,255,255,0.16);
      background: rgba(0,0,0,0.3);
      color: #fff;
      cursor: pointer;
      font-weight: 800;
    }
    .dossierPm:hover{ border-color: #ffd76a; }
    .dossierSimRow .val{
      min-width: 36px;
      text-align:center;
      font-weight: 800;
      color: #ffd76a;
    }
    .dossierGauge{
      position: relative;
      width: 168px;
      height: 168px;
      margin: 8px auto;
      border-radius: 50%;
      display:grid;
      place-items:center;
    }
    .dossierGaugeRing{
      position:absolute;
      inset:0;
      border-radius:50%;
    }
    .dossierGaugeHole{
      position:relative;
      width: 118px;
      height: 118px;
      border-radius:50%;
      background: #120c1c;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      text-align:center;
      z-index:1;
    }
    .dossierGaugeHole strong{ font-size: 28px; color: #ffd76a; }
    .dossierGaugeHole span{ font-size: 11px; color: #c9bdd8; padding: 0 8px; line-height: 1.3; }
    .dossierHint{ font-size: 12px; color: #a99bb8; line-height: 1.4; margin-top: 10px; }
    .dossierLog{
      width:100%;
      border-collapse: collapse;
      font-size: 13px;
    }
    .dossierLog th{
      text-align:left;
      font-size: 11px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #ffd76a;
      padding: 6px 8px;
      border-bottom: 1px solid rgba(180,120,255,0.22);
    }
    .dossierLog td{
      padding: 8px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
      cursor: pointer;
    }
    .dossierLog tr:hover td{ background: rgba(255,215,106,0.06); }
    .dossierEmpty{ color: #a99bb8; font-size: 14px; line-height: 1.5; padding: 12px 0; }
    .dossierCard{
      border: 1px solid rgba(180,120,255,0.28);
      background: rgba(20,12,32,0.55);
      border-radius: 14px;
      padding: 12px;
    }
    .patronPref{
      display:flex;
      align-items:center;
      gap:8px;
      margin: 8px 0;
      font-size: 13px;
      color: var(--text, #e8eef8);
    }
    .patronModal{
      width: min(640px, 100%);
      max-height: min(92vh, 92dvh);
    }
    .patronModalLead{
      text-align:left;
      font-size: 15px;
      line-height: 1.5;
      color: var(--muted);
      margin: 0 0 12px;
    }
    .patronModalList{
      margin: 0 0 14px;
      padding-left: 18px;
      text-align:left;
      font-size: 15px;
      line-height: 1.5;
      color: #e8eef8;
    }
    .patronModalList li{ margin: 0 0 6px; }
    .patronIncludeBlock{
      text-align:left;
      margin: 0 0 14px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(180,140,255,0.18);
      background: rgba(40,24,70,0.22);
    }
    .patronIncludeBlock h4{
      margin: 0 0 8px;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #e8d4ff;
      font-family: var(--font-display);
    }
    .patronIncludeBlock ul{
      margin: 0;
      padding-left: 18px;
      font-size: 15px;
      line-height: 1.5;
    }
    .patronIncludeBlock li{ margin: 0 0 6px; }
    .patronPerkGrid{
      display: grid;
      grid-template-columns: 1fr;
      gap: 10px;
      margin: 0 0 14px;
    }
    @media (min-width: 640px){
      .patronPerkGrid{ grid-template-columns: 1fr 1fr 1fr; }
    }
    .patronPerkGrid .patronIncludeBlock{
      margin: 0;
      height: 100%;
    }
    .patronChatCompare{
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 0 0 14px;
    }
    .patronChatPreview{
      padding: 10px 12px;
      border-radius: 10px;
      background: rgba(0,0,0,0.42);
      border: 1px solid rgba(255,255,255,0.08);
      font-size: 13px;
      line-height: 1.45;
      text-align: left;
    }
    .patronChatPreview.is-elite{
      background: linear-gradient(180deg, rgba(180,120,255,0.12), rgba(0,0,0,0.42));
      box-shadow: 0 1px 0 rgba(232,196,110,0.28) inset;
    }
    .patronChatPreview .patronMiniLabel{
      margin-bottom: 6px;
    }
    .patronSealEditor{
      display: grid;
      gap: 12px;
      margin: 0 0 12px;
    }
    .patronSealGroup{
      text-align: left;
    }
    .patronSealGroup > span{
      display: block;
      margin: 0 0 8px;
      font-size: 12px;
      font-weight: 700;
      color: #e8d4ff;
      font-family: var(--font-display);
    }
    .patronSealSwatches{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .patronSealSwatch{
      appearance: none;
      font-family: var(--font-display);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.02em;
      padding: 7px 10px;
      border-radius: 999px;
      border: 1px solid rgba(180,140,255,0.28);
      background: rgba(20,12,32,0.55);
      color: #f3e0ff;
      cursor: pointer;
    }
    .patronSealSwatch:hover{
      border-color: rgba(232,196,110,0.45);
    }
    .patronSealSwatch[aria-pressed="true"]{
      border-color: rgba(232,196,110,0.75);
      background: rgba(90,40,160,0.45);
      color: #fff4e0;
    }
    .patronSealSwatch.ink-amatista{ color: #d9c2ff; }
    .patronSealSwatch.ink-oro{ color: #ffd27a; }
    .patronSealSwatch.ink-cobre{ color: #e8a070; }
    .patronSealSwatch.ink-hielo{ color: #b8e4ff; }
    .patronSealSwatch.ink-brasa{ color: #ff9a6a; }
    .patronSealSwatch:disabled{
      opacity: 0.45;
      cursor: not-allowed;
    }
    .patronSealSwatch .gameChatSeal{
      margin-right: 5px;
    }
    .patronPreviewRow{
      display:flex;
      flex-wrap: wrap;
      gap: 10px;
      align-items: stretch;
      margin: 0 0 14px;
    }
    .patronMiniCard{
      position: relative;
      flex: 1 1 160px;
      min-height: 92px;
      border-radius: 12px;
      overflow: hidden;
      padding: 12px 10px 10px;
      border: 1px solid var(--border);
      background: rgba(255,255,255,0.04);
    }
    .patronMiniCard .cosmoBorderTrack{ z-index: 0; }
    .patronMiniCardInner{ position: relative; z-index: 1; }
    .patronMiniLabel{
      font-size: 9px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #9aa8bc;
      margin-bottom: 4px;
    }
    .patronMiniName{
      font-size: 13px;
      font-weight: 800;
      color: #fff;
    }
    .patronMiniTitle{
      display:inline-block;
      margin-top: 6px;
      padding: 2px 8px;
      border-radius: 4px;
      font-size: 10px;
      font-weight: 700;
      color: #ffd27a;
      border: 1px solid rgba(255,180,60,0.55);
      background: linear-gradient(180deg, rgba(90,40,20,0.55), rgba(40,18,10,0.7));
    }
    .patronPayBox{
      text-align:left;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(180,120,255,0.28);
      background: rgba(60,30,100,0.16);
      margin: 0 0 12px;
    }
    .patronPayBox h4{
      margin: 0 0 8px;
      font-family: var(--font-display);
      font-size: 13px;
      color: #e8d4ff;
    }
    .patronPayBox ol{
      margin: 0;
      padding-left: 18px;
      font-size: 15px;
      line-height: 1.5;
    }
    .patronPayBox li{ margin: 0 0 10px; }
    .patronPayNote{
      display:block;
      margin-top: 4px;
      font-size: 12px;
      color: #ffd27a;
    }
    .patronPayKey{
      font-weight: 800;
      color: #ffe08a;
      letter-spacing: 0.02em;
    }
    .vipSectionTitle{
      font-size:13px;
      color:#ffe08a;
      margin: 10px 0 4px;
      font-weight:700;
    }
    .weekPassCard{
      padding: 14px 14px 12px;
      border-radius: 12px;
      border: 1px solid rgba(126, 214, 255, 0.28);
      background: linear-gradient(160deg, rgba(48, 98, 140, 0.22), rgba(20,24,34,0.55));
    }
    .duelGoalCard{
      padding: 14px 14px 12px;
      border-radius: 12px;
      border: 1px solid rgba(240, 192, 64, 0.35);
      background: linear-gradient(160deg, rgba(90, 70, 28, 0.28), rgba(20,24,34,0.55));
      margin-bottom: 14px;
    }
    .duelGoalCard.complete{
      border-color: rgba(80, 220, 180, 0.45);
      background: linear-gradient(160deg, rgba(28, 90, 70, 0.28), rgba(20,24,34,0.55));
    }
    .duelGoalStatus{
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 750;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid rgba(240,192,64,0.4);
      background: rgba(240,192,64,0.12);
      color: #ffe08a;
      max-width: 200px;
      text-align: right;
      line-height: 1.25;
    }
    .duelGoalStatus.ok{
      border-color: rgba(80, 220, 180, 0.45);
      background: rgba(80, 220, 180, 0.12);
      color: #9dffd0;
    }
    .duelGoalStatus.miss{
      border-color: rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.05);
      color: var(--muted);
    }
    .duelGoalYou{
      margin-top: 10px;
      font-size: 13px;
      color: var(--muted);
      line-height: 1.45;
    }
    .duelGoalYou strong{ color: #ffe08a; }
    .weekPassHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      flex-wrap: wrap;
      gap: 12px;
      margin-bottom: 10px;
      flex-wrap: wrap;
    }
    .weekPassTitle{
      font-size: 15px;
      font-weight: 780;
      letter-spacing: 0.2px;
    }
    .weekPassMeta{
      margin-top: 4px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }
    .weekVipBadge{
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 750;
      padding: 5px 9px;
      border-radius: 999px;
      border: 1px solid rgba(240,192,64,0.4);
      background: rgba(240,192,64,0.12);
      color: #ffe08a;
    }
    .weekVipBadge.off{
      border-color: rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.05);
      color: var(--muted);
    }
    .weekPassHeadActions{
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .weekPassHead.cornerPad{
      padding-right: 56px;
    }
    .weekTracksBtn{
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(126, 214, 255, 0.45);
      background:
        radial-gradient(circle at 30% 25%, rgba(160,220,255,0.28), transparent 55%),
        linear-gradient(160deg, rgba(36, 78, 120, 0.95), rgba(18, 28, 42, 0.98));
      box-shadow: 0 6px 18px rgba(0,0,0,0.3);
      cursor: pointer;
      display: grid;
      place-items: center;
      padding: 0;
      transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
    }
    .weekTracksBtn:hover{
      transform: translateY(-1px) scale(1.04);
      filter: brightness(1.1);
      border-color: rgba(160, 230, 255, 0.7);
    }
    .weekTracksBtn:active{ transform: scale(0.97); }
    .weekTracksBtn:focus-visible{
      outline: 2px solid rgba(126, 214, 255, 0.65);
      outline-offset: 2px;
    }
    .weekTracksGlyph{
      width: 20px;
      height: 22px;
      position: relative;
      display: block;
    }
    .weekTracksGlyph::before,
    .weekTracksGlyph::after{
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      border-radius: 3px;
      border: 1.5px solid rgba(190, 230, 255, 0.85);
      background: rgba(80, 140, 190, 0.35);
    }
    .weekTracksGlyph::before{
      top: 0;
      height: 8px;
      transform: skewX(-8deg);
    }
    .weekTracksGlyph::after{
      bottom: 0;
      height: 12px;
      box-shadow: inset 0 4px 0 rgba(255,255,255,0.08);
    }
    .weekTracksGlyph span{
      position: absolute;
      left: 4px;
      right: 4px;
      top: 12px;
      height: 1.5px;
      background: rgba(190, 230, 255, 0.7);
      box-shadow: 0 3px 0 rgba(190, 230, 255, 0.45), 0 6px 0 rgba(190, 230, 255, 0.35);
      z-index: 1;
    }
    .raidTracksBtn{
      width: 40px;
      height: 40px;
      border-radius: 12px;
      border: 1px solid rgba(255, 140, 100, 0.5);
      background:
        radial-gradient(circle at 30% 25%, rgba(255,180,120,0.3), transparent 55%),
        linear-gradient(160deg, rgba(120, 48, 36, 0.95), rgba(32, 18, 16, 0.98));
      box-shadow: 0 6px 18px rgba(0,0,0,0.3);
      cursor: pointer;
      display: grid;
      place-items: center;
      padding: 0;
      transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
    }
    .raidTracksBtn:hover{
      transform: translateY(-1px) scale(1.04);
      filter: brightness(1.1);
      border-color: rgba(255, 170, 120, 0.75);
    }
    .raidTracksBtn:active{ transform: scale(0.97); }
    .raidTracksBtn:focus-visible{
      outline: 2px solid rgba(255, 150, 110, 0.7);
      outline-offset: 2px;
    }
    .raidTracksGlyph{
      width: 18px;
      height: 18px;
      border-radius: 50% 50% 45% 45%;
      border: 1.5px solid rgba(255, 200, 150, 0.9);
      background:
        radial-gradient(circle at 35% 35%, rgba(255,220,180,0.55), transparent 50%),
        linear-gradient(160deg, #e07840, #8a3018);
      position: relative;
      box-shadow: 0 0 8px rgba(255, 120, 60, 0.35);
    }
    .raidTracksGlyph::after{
      content: "";
      position: absolute;
      left: 50%;
      bottom: -3px;
      width: 10px;
      height: 5px;
      margin-left: -5px;
      border-radius: 0 0 4px 4px;
      background: linear-gradient(180deg, #c06030, #6a2810);
      border: 1px solid rgba(255, 200, 150, 0.5);
      border-top: none;
    }
    .rivalryTrackBlock{
      text-align: left;
      padding: 11px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.22);
      margin-bottom: 8px;
    }
    .rivalryTrackBlock.current{
      border-color: rgba(126, 214, 255, 0.45);
      background: rgba(53, 181, 255, 0.1);
    }
    .rivalryTrackName{
      font-weight: 780;
      font-size: 13px;
      margin-bottom: 6px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
    }
    .rivalryTrackNow{
      font-size: 10px;
      font-weight: 700;
      color: #9ecbff;
      border: 1px solid rgba(126,214,255,0.35);
      background: rgba(126,214,255,0.12);
      border-radius: 999px;
      padding: 2px 7px;
    }
    .rivalryTrackLine{
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
      margin-top: 2px;
    }
    .rivalryTrackLine strong{
      color: #d7e3f7;
      font-weight: 650;
    }
    .weekBar{
      height: 12px;
      background: rgba(255,255,255,0.08);
      border: 1px solid rgba(126, 214, 255, 0.2);
      border-radius: 999px;
      overflow:hidden;
      position: relative;
    }
    .weekBar > div{
      height:100%;
      width:0%;
      border-radius: 999px;
      transition: width .55s cubic-bezier(0.22, 0.9, 0.3, 1);
      background-size: 220% 100%;
      animation: weekBarFlow 2.6s linear infinite;
      will-change: background-position, width;
    }
    /* Pase Rivalidad · cian (color actual) */
    .weekPassCard .weekBar > div,
    #weekBarFill{
      background-image: linear-gradient(
        90deg,
        #1e8fd4 0%,
        #35b5ff 28%,
        #b8f0ff 50%,
        #35b5ff 72%,
        #1e8fd4 100%
      );
      box-shadow: 0 0 10px rgba(53, 181, 255, 0.45);
    }
    /* Meta de duelos · dorado (acento de la card) */
    .duelGoalCard .weekBar{
      border-color: rgba(240, 192, 64, 0.28);
    }
    .duelGoalCard .weekBar > div,
    #duelGoalBarFill{
      background-image: linear-gradient(
        90deg,
        #c48912 0%,
        #f0c040 28%,
        #fff0b8 50%,
        #f0c040 72%,
        #c48912 100%
      );
      box-shadow: 0 0 10px rgba(240, 192, 64, 0.45);
    }
    .duelGoalCard.complete .weekBar > div,
    .duelGoalCard.complete #duelGoalBarFill{
      background-image: linear-gradient(
        90deg,
        #1a9a72 0%,
        #3ecf9a 28%,
        #b8ffe0 50%,
        #3ecf9a 72%,
        #1a9a72 100%
      );
      box-shadow: 0 0 10px rgba(62, 207, 154, 0.45);
    }
    /* Pase Raid · coral/lava (distinto del pase de rivalidad) */
    #raidPassCard{
      border-color: rgba(255, 120, 72, 0.32);
      background: linear-gradient(160deg, rgba(120, 48, 32, 0.24), rgba(20,24,34,0.55));
    }
    #raidPassCard .weekBar{
      border-color: rgba(255, 120, 72, 0.28);
    }
    #raidPassCard .weekBar > div,
    #raidBarFill{
      background-image: linear-gradient(
        90deg,
        #c94a28 0%,
        #ff7a45 28%,
        #ffd0a8 50%,
        #ff7a45 72%,
        #c94a28 100%
      );
      box-shadow: 0 0 10px rgba(255, 122, 69, 0.45);
    }
    @keyframes weekBarFlow{
      0% { background-position: 0% 50%; }
      100% { background-position: 200% 50%; }
    }
    @media (prefers-reduced-motion: reduce){
      .weekBar > div{
        animation: none;
        background-size: 100% 100%;
      }
    }
    .weekProgressLabel{
      margin-top: 8px;
      display:flex;
      justify-content:space-between;
      gap: 10px;
      font-size: 12px;
      color: var(--muted);
    }
    .weekMilestones{
      margin-top: 14px;
      display:grid;
      gap: 8px;
    }
    .weekMilestone{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.18);
    }
    .weekMilestone.reached{
      border-color: rgba(111,255,177,0.35);
      background: rgba(0,200,83,0.08);
    }
    .weekMilestone.pending{
      opacity: 0.82;
    }
    .weekMilestoneLeft{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 0;
    }
    .weekMilestoneAt{
      width: 38px;
      height: 34px;
      border-radius: 10px;
      display:grid;
      place-items:center;
      font-weight: 780;
      font-size: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      flex-shrink: 0;
    }
    .weekMilestone.metric-wins .weekMilestoneAt{
      background: rgba(126,214,255,0.12);
      border-color: rgba(126,214,255,0.35);
      color: #9ecbff;
    }
    .weekMilestone.metric-wins.reached .weekMilestoneAt{
      background: rgba(0,200,83,0.18);
      border-color: rgba(111,255,177,0.4);
      color: #9dffc3;
    }
    .weekMilestoneKind{
      display:block;
      font-size: 10px;
      font-weight: 600;
      color: var(--muted);
      letter-spacing: 0.2px;
      margin-bottom: 1px;
    }
    .weekMilestone.reached .weekMilestoneAt{
      background: rgba(0,200,83,0.18);
      border-color: rgba(111,255,177,0.4);
      color: #9dffc3;
    }
    .weekMilestoneLabel{
      font-size: 13px;
      font-weight: 650;
      line-height: 1.3;
    }
    .weekMilestoneState{
      font-size: 11px;
      color: var(--muted);
      white-space: nowrap;
    }
    .weekMilestone.reached .weekMilestoneState{
      color: #9dffc3;
    }
    .weekHow{
      margin-top: 14px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
    }
    .bitsTopCard{
      position: relative;
      margin-top: 14px;
      padding: 14px 14px 12px;
      border-radius: 12px;
      border: 1px solid rgba(180, 140, 255, 0.28);
      background: linear-gradient(160deg, rgba(90, 60, 140, 0.22), rgba(20,24,34,0.55));
    }
    .bitsTopChestBtn{
      position: absolute;
      top: 10px;
      right: 10px;
      width: 48px;
      height: 48px;
      border-radius: 14px;
      border: 1px solid rgba(255, 205, 110, 0.45);
      background:
        radial-gradient(circle at 35% 30%, rgba(255,230,160,0.35), transparent 55%),
        linear-gradient(160deg, rgba(90, 62, 28, 0.95), rgba(36, 26, 16, 0.98));
      box-shadow:
        0 0 0 1px rgba(255, 200, 90, 0.12),
        0 8px 22px rgba(0,0,0,0.35);
      cursor: pointer;
      display: grid;
      place-items: center;
      padding: 0;
      transition: transform 0.15s ease, filter 0.15s ease, border-color 0.15s ease;
      z-index: 2;
    }
    .bitsTopChestBtn:hover{
      transform: translateY(-1px) scale(1.04);
      filter: brightness(1.12);
      border-color: rgba(255, 220, 130, 0.7);
    }
    .bitsTopChestBtn:active{ transform: scale(0.97); }
    .bitsTopChestBtn:focus-visible{
      outline: 2px solid rgba(255, 210, 120, 0.7);
      outline-offset: 2px;
    }
    .bitsTopChestGlyph{
      width: 28px;
      height: 26px;
      position: relative;
      display: block;
    }
    .bitsTopChestGlyph::before,
    .bitsTopChestGlyph::after{
      content: "";
      position: absolute;
      left: 0;
      right: 0;
    }
    .bitsTopChestGlyph::before{
      top: 0;
      height: 10px;
      border-radius: 4px 4px 2px 2px;
      background: linear-gradient(180deg, #f0c14a, #c48a22);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.35);
    }
    .bitsTopChestGlyph::after{
      bottom: 0;
      height: 15px;
      border-radius: 2px 2px 5px 5px;
      background: linear-gradient(180deg, #d4a038, #8a5a18);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.2);
    }
    .bitsTopChestGlyph span{
      position: absolute;
      left: 50%;
      top: 8px;
      width: 8px;
      height: 8px;
      margin-left: -4px;
      border-radius: 50%;
      background: radial-gradient(circle at 30% 30%, #ffe9a8, #e8b43a 55%, #9a6a14);
      box-shadow: 0 0 6px rgba(255, 210, 100, 0.55);
      z-index: 1;
    }
    .bitsTopChestHint{
      position: absolute;
      top: 58px;
      right: 10px;
      font-size: 10px;
      font-weight: 650;
      color: rgba(255, 220, 150, 0.75);
      letter-spacing: 0.2px;
      pointer-events: none;
      opacity: 0;
      transform: translateY(-2px);
      transition: opacity 0.15s ease;
    }
    .bitsTopChestBtn:hover + .bitsTopChestHint,
    .bitsTopChestBtn:focus-visible + .bitsTopChestHint{
      opacity: 1;
    }
    .podiumRewardsList{
      text-align: left;
      display: grid;
      gap: 8px;
      margin: 6px 0 12px;
      max-height: min(58vh, 420px);
      overflow: auto;
      padding-right: 2px;
    }
    .podiumRewardRow{
      display: grid;
      grid-template-columns: 44px 1fr;
      gap: 10px;
      align-items: start;
      padding: 10px 11px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.22);
    }
    .podiumRewardRow.r1{
      border-color: rgba(240,192,64,0.45);
      background: rgba(240,192,64,0.08);
    }
    .podiumRewardRow.r2{
      border-color: rgba(200,200,200,0.35);
      background: rgba(200,200,200,0.06);
    }
    .podiumRewardRow.r3{
      border-color: rgba(205,127,50,0.4);
      background: rgba(205,127,50,0.07);
    }
    .podiumRewardRank{
      width: 44px;
      height: 44px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      font-weight: 800;
      font-size: 13px;
      line-height: 1.1;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.12);
      color: #e8eefc;
    }
    .podiumRewardRow.r1 .podiumRewardRank{ color:#ffe08a; border-color: rgba(240,192,64,0.5); background: rgba(240,192,64,0.14); }
    .podiumRewardRow.r2 .podiumRewardRank{ color:#e8e8e8; }
    .podiumRewardRow.r3 .podiumRewardRank{ color:#e0b080; border-color: rgba(205,127,50,0.45); }
    .podiumRewardTitle{
      font-weight: 750;
      font-size: 13px;
      margin-bottom: 3px;
    }
    .podiumRewardDetail{
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }
    .podiumRewardVip{
      display: inline-block;
      margin-top: 5px;
      font-size: 11px;
      font-weight: 700;
      color: #9ecbff;
    }
    .bitsTopList{
      margin-top: 12px;
      display:grid;
      gap: 8px;
    }
    .bitsTopRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      padding: 9px 11px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.18);
      font-size: 13px;
    }
    .bitsTopRow.me{
      border-color: rgba(126, 214, 255, 0.4);
      background: rgba(53, 181, 255, 0.1);
    }
    .bitsTopRank{
      width: 28px;
      height: 28px;
      border-radius: 8px;
      display:grid;
      place-items:center;
      font-weight: 780;
      font-size: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.1);
      flex-shrink: 0;
    }
    .bitsTopRow.rank1 .bitsTopRank{ color:#ffe08a; border-color: rgba(240,192,64,0.45); background: rgba(240,192,64,0.12); }
    .bitsTopRow.rank2 .bitsTopRank{ color:#e8e8e8; border-color: rgba(200,200,200,0.4); }
    .bitsTopRow.rank3 .bitsTopRank{ color:#e0b080; border-color: rgba(205,127,50,0.45); }
    .bitsTopLeft{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 0;
    }
    .bitsTopName{
      font-weight: 650;
      overflow:hidden;
      text-overflow:ellipsis;
      white-space:nowrap;
    }
    .bitsTopMeta{
      font-size: 11px;
      color: var(--muted);
    }
    .bitsTopBits{
      font-weight: 750;
      color: #b48cff;
      white-space: nowrap;
    }
    .bitsTopYou{
      margin-top: 10px;
      font-size: 12px;
      color: var(--muted);
      line-height: 1.4;
    }
    .weekHistory{
      margin-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.08);
      padding-top: 8px;
    }
    .weekHistory summary{
      cursor: pointer;
      font-size: 12px;
      font-weight: 750;
      color: #c8bddc;
      list-style: none;
    }
    .weekHistory summary::-webkit-details-marker{ display: none; }
    .weekHistoryList{
      margin-top: 8px;
      display: grid;
      gap: 8px;
    }
    .weekHistoryRow{
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(0,0,0,0.16);
      font-size: 12px;
      line-height: 1.4;
    }
    .weekHistoryRow.me{
      border-color: rgba(126, 214, 255, 0.35);
    }
    .weekHistoryWeek{
      font-weight: 750;
      color: #efe8ff;
      margin-bottom: 3px;
    }
    .championBadge{
      margin-top: 8px;
      display:inline-flex;
      align-items:center;
      gap: 6px;
      font-size: 11px;
      font-weight: 750;
      padding: 4px 9px;
      border-radius: 999px;
      border: 1px solid rgba(240,192,64,0.45);
      background: rgba(240,192,64,0.12);
      color: #ffe08a;
    }
    .chestCard.tier_podium_1{ border-color: rgba(255,215,0,0.65); box-shadow: 0 0 0 1px rgba(255,215,0,0.12); }
    .chestCard.tier_podium_2{ border-color: rgba(192,192,192,0.55); }
    .chestCard.tier_podium_3{ border-color: rgba(205,127,50,0.55); }
    .chestCard.tier_podium_4,
    .chestCard.tier_podium_5{ border-color: rgba(180,140,255,0.45); }
    .vipLock{
      padding: 18px;
      border-radius: 12px;
      border: 1px dashed rgba(240,192,64,0.35);
      background: rgba(240,192,64,0.06);
      color: var(--muted);
      line-height: 1.5;
    }

    .shopTiers{
      margin-top: 8px;
    }
    .shopTierRow{
      display:grid;
      grid-template-columns: 76px minmax(0, 1fr) auto;
      align-items:center;
      gap: 12px;
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.04);
      font-size: 12px;
      margin-bottom: 10px;
    }
    .shopTierRow .shopTierMeta{ min-width: 0; }
    .shopTierRow .shopTierName{
      font-weight: 750;
      font-size: 14px;
      color: #f2f2f8;
      margin-bottom: 6px;
    }
    .shopTierChips{
      display:flex;
      flex-wrap:wrap;
      gap: 5px;
    }
    .shopTierChip{
      font-size: 10px;
      font-weight: 700;
      padding: 3px 7px;
      border-radius: 6px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.1);
      color: #c8c8d8;
    }
    .shopTierChip.oro{ color:#ffe08a; border-color:rgba(255,224,138,0.25); }
    .shopTierChip.pet{ color:#8fe6b5; border-color:rgba(143,230,181,0.25); }
    .shopTierChip.pot{ color:#a5b4fc; border-color:rgba(165,180,252,0.25); }
    .shopTierChip.frag{ color:#f9a8d4; border-color:rgba(249,168,212,0.25); }
    .shopTierChip.vip{ color:#fbbf24; border-color:rgba(251,191,36,0.3); }
    .shopTierChip.fx{ color:#7dd3fc; border-color:rgba(125,211,252,0.3); }
    .shopTierPrice{
      text-align:right;
      font-size:12px;
      font-weight:750;
      color:#ffd6a8;
      white-space:nowrap;
    }
    .shopTierPrice small{
      display:block;
      margin-top:3px;
      color:var(--muted);
      font-weight:600;
    }
    .shopTierRow.comingSoon{
      opacity: 0.82;
      border-style: dashed;
      border-color: rgba(255,204,102,0.35);
    }
    .shopTierComingSoon{
      display: inline-block;
      margin-top: 6px;
      padding: 3px 8px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #1a1408;
      background: linear-gradient(180deg, #ffe08a, #ffcc66);
      box-shadow: 0 0 12px rgba(255,204,102,0.2);
    }
    .shopTierComingSoonSide{
      margin-top: 0;
      font-size: 11px;
      padding: 5px 10px;
      white-space: nowrap;
    }
    .shopTierSkin{
      width: 68px;
      height: 60px;
      display:grid;
      place-items:center;
    }
    .shopTierSkin .chestSkin{ width: 68px; height: 60px; margin: 0; }
    .shopTierRow.skin-bronze{ border-color: rgba(205,127,50,0.55); }
    .shopTierRow.skin-silver{ border-color: rgba(180,190,210,0.5); }
    .shopTierRow.skin-cobalt{ border-color: rgba(80,160,255,0.55); }
    .shopTierRow.skin-gold{ border-color: rgba(255,215,0,0.5); }
    .shopTierRow.skin-amethyst{ border-color: rgba(170,120,255,0.55); }
    .shopTierRow.skin-dragon{ border-color: rgba(255,120,200,0.55); }
    .shopTierRow.skin-patron{ border-color: rgba(255,200,120,0.6); }
    .chestCard{
      min-height: 168px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      padding: 12px 10px 10px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 8px;
      text-align:center;
      position: relative;
      overflow: hidden;
    }
    .chestSkin{
      width: 72px;
      height: 64px;
      position: relative;
      margin: 2px 0 4px;
      filter: drop-shadow(0 8px 14px rgba(0,0,0,0.45));
    }
    .chestSkinBody{
      position: absolute;
      left: 10px; right: 10px; bottom: 4px; height: 34px;
      border-radius: 6px 6px 8px 8px;
      border: 1px solid rgba(255,255,255,0.25);
      box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
    }
    .chestSkinLid{
      position: absolute;
      left: 8px; right: 8px; top: 10px; height: 22px;
      border-radius: 8px 8px 3px 3px;
      border: 1px solid rgba(255,255,255,0.28);
      transform-origin: 50% 100%;
    }
    .chestSkinLock{
      position: absolute;
      left: 50%; bottom: 16px;
      width: 12px; height: 12px;
      margin-left: -6px;
      border-radius: 50%;
      border: 2px solid rgba(255,255,255,0.55);
      background: rgba(0,0,0,0.25);
      z-index: 2;
    }
    .chestSkinGlow{
      position: absolute;
      inset: -8px;
      border-radius: 16px;
      pointer-events: none;
      opacity: 0.55;
    }
    .skin-bronze .chestSkinBody,
    .skin-bronze .chestSkinLid{
      background: linear-gradient(180deg, #d4a574, #8a5528 55%, #5c3516);
    }
    .chestCard.skin-bronze{ border-color: rgba(205,127,50,0.65); }
    .skin-silver .chestSkinBody,
    .skin-silver .chestSkinLid{
      background: linear-gradient(180deg, #f2f4f7, #9aa3b2 50%, #6a7383);
    }
    .chestCard.skin-silver{ border-color: rgba(200,210,230,0.7); }
    .skin-cobalt .chestSkinBody,
    .skin-cobalt .chestSkinLid{
      background: linear-gradient(180deg, #7eb6ff, #2a6fd6 45%, #163a7a);
    }
    .chestCard.skin-cobalt{
      border-color: rgba(80,160,255,0.75);
      box-shadow: 0 0 18px rgba(60,140,255,0.18);
    }
    .skin-gold .chestSkinBody,
    .skin-gold .chestSkinLid{
      background: linear-gradient(180deg, #ffe9a0, #f0b429 48%, #a66a08);
    }
    .chestCard.skin-gold{
      border-color: rgba(255,210,80,0.8);
      background: linear-gradient(180deg, rgba(255,210,80,0.12), rgba(255,255,255,0.04));
      box-shadow: 0 0 20px rgba(255,200,60,0.16);
    }
    .skin-amethyst .chestSkinBody,
    .skin-amethyst .chestSkinLid{
      background: linear-gradient(180deg, #e2c0ff, #9b5de5 45%, #4c1d95);
    }
    .chestCard.skin-amethyst{
      border-color: rgba(180,120,255,0.85);
      background: linear-gradient(180deg, rgba(150,90,255,0.16), rgba(255,255,255,0.04));
      box-shadow: 0 0 22px rgba(150,90,255,0.22);
    }
    .skin-amethyst .chestSkinGlow{
      background: radial-gradient(circle, rgba(200,140,255,0.45), transparent 70%);
      animation: chestPulse 2.4s ease-in-out infinite;
    }
    .skin-dragon .chestSkinBody,
    .skin-dragon .chestSkinLid{
      background: linear-gradient(180deg, #ff9a6b, #ff3d6e 40%, #7a1028 85%, #ffd28a);
    }
    .chestCard.skin-dragon{
      border-color: rgba(255,90,120,0.9);
      background: linear-gradient(160deg, rgba(80,10,30,0.55), rgba(20,8,16,0.9));
      box-shadow: 0 0 0 1px rgba(255,120,80,0.25), 0 0 28px rgba(255,60,100,0.28);
    }
    .skin-dragon .chestSkinGlow{
      background: radial-gradient(circle, rgba(255,100,80,0.5), transparent 68%);
      animation: chestPulse 1.8s ease-in-out infinite;
    }
    .skin-patron .chestSkinBody,
    .skin-patron .chestSkinLid{
      background: linear-gradient(180deg, #fff4c2, #ffd166 30%, #c9a227 55%, #5b3b09 90%, #ffe8a0);
    }
    .chestCard.skin-patron{
      border-color: rgba(255,220,120,0.95);
      background: linear-gradient(160deg, rgba(60,40,10,0.7), rgba(18,12,6,0.95));
      box-shadow: 0 0 0 1px rgba(255,210,100,0.35), 0 0 34px rgba(255,190,60,0.35);
    }
    .skin-patron .chestSkinGlow{
      background: radial-gradient(circle, rgba(255,220,120,0.55), transparent 70%);
      animation: chestPulse 1.5s ease-in-out infinite;
    }
    .chestCard.skin-patron::before,
    .chestCard.skin-dragon::before{
      content: "";
      position: absolute;
      inset: -40% -20%;
      background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.14) 50%, transparent 60%);
      animation: chestSheen 3.2s linear infinite;
      pointer-events: none;
    }
    @keyframes chestPulse {
      0%, 100% { opacity: 0.35; transform: scale(0.92); }
      50% { opacity: 0.8; transform: scale(1.05); }
    }
    @keyframes chestSheen {
      0% { transform: translateX(-30%) rotate(12deg); }
      100% { transform: translateX(30%) rotate(12deg); }
    }
    .chestCard.tier_bits_100{ border-color: rgba(205,127,50,0.55); }
    .chestCard.tier_bits_200{ border-color: rgba(192,192,192,0.55); }
    .chestCard.tier_bits_300{ border-color: rgba(80,160,255,0.65); }
    .chestCard.tier_bits_500{ border-color: rgba(255,215,0,0.55); }
    .chestCard.tier_bits_1000{ border-color: rgba(170,120,255,0.55); }
    .chestCard.tier_bits_5000{ border-color: rgba(255,120,200,0.55); }
    .chestCard.tier_bits_10000{
      border-color: rgba(255,210,80,0.85);
    }
    .shopTierSkin{
      width: 48px;
      height: 42px;
      position: relative;
      transform: scale(0.72);
      transform-origin: center;
    }
    .shopTierSkin .chestSkin{ width: 72px; height: 64px; margin: 0; }
    #legendaryChestOverlay{
      display: none;
      position: fixed;
      inset: 0;
      z-index: 12000;
      align-items: center;
      justify-content: center;
      background: radial-gradient(circle at 50% 40%, rgba(40,20,8,0.55), rgba(0,0,0,0.88));
      backdrop-filter: blur(6px);
    }
    #legendaryChestOverlay.on{ display: flex; }
    .legendaryStage{
      position: relative;
      width: min(420px, 92vw);
      height: 360px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 14px;
    }
    .legendaryChest{
      width: 140px;
      height: 120px;
      position: relative;
      transform: scale(1.15);
      animation: legendaryIdle 1.1s ease-in-out infinite;
    }
    .legendaryChest .chestSkin{ width: 140px; height: 120px; margin: 0; }
    .legendaryChest .chestSkinBody{ left: 18px; right: 18px; bottom: 10px; height: 58px; }
    .legendaryChest .chestSkinLid{ left: 14px; right: 14px; top: 18px; height: 40px; }
    .legendaryChest .chestSkinLock{ bottom: 30px; width: 18px; height: 18px; margin-left: -9px; }
    .legendaryChest.opening .chestSkinLid{
      animation: legendaryLid 0.85s cubic-bezier(.2,.8,.2,1) forwards;
    }
    .legendaryChest.opening{
      animation: legendaryBurst 0.95s ease-out forwards;
    }
    .legendaryRays{
      position: absolute;
      inset: 10% 5%;
      border-radius: 50%;
      background: conic-gradient(from 0deg, transparent, rgba(255,210,100,0.35), transparent 18%, rgba(255,100,160,0.28), transparent 40%, rgba(180,120,255,0.3), transparent 65%, rgba(255,210,100,0.35), transparent);
      opacity: 0;
      transform: scale(0.4);
      pointer-events: none;
    }
    .legendaryChest.opening ~ .legendaryRays,
    .legendaryStage.burst .legendaryRays{
      opacity: 1;
      animation: legendaryRays 1.1s ease-out forwards;
    }
    .legendaryTitle{
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #ffe7a8;
      text-shadow: 0 0 18px rgba(255,200,80,0.55);
    }
    .legendarySub{
      font-size: 12px;
      color: rgba(255,255,255,0.72);
      text-align: center;
      max-width: 320px;
      line-height: 1.4;
    }
    .legendaryLoot{
      margin-top: 6px;
      max-width: 360px;
      font-size: 12px;
      color: #fff;
      text-align: center;
      line-height: 1.45;
      opacity: 0;
    }
    .legendaryStage.reveal .legendaryLoot{ opacity: 1; transition: opacity 0.4s ease; }
    .legendaryParticles span{
      position: absolute;
      width: 6px; height: 6px;
      border-radius: 50%;
      background: #ffd166;
      opacity: 0;
      pointer-events: none;
    }
    .legendaryStage.burst .legendaryParticles span{
      animation: legendarySpark 1s ease-out forwards;
    }
    @keyframes legendaryIdle {
      0%, 100% { transform: scale(1.12) translateY(0); }
      50% { transform: scale(1.16) translateY(-4px); }
    }
    @keyframes legendaryLid {
      0% { transform: rotateX(0deg) translateY(0); }
      100% { transform: rotateX(-70deg) translateY(-18px); filter: brightness(1.3); }
    }
    @keyframes legendaryBurst {
      0% { transform: scale(1.15); filter: brightness(1); }
      40% { transform: scale(1.28); filter: brightness(1.45); }
      100% { transform: scale(1.05); filter: brightness(1.15); }
    }
    @keyframes legendaryRays {
      0% { opacity: 0; transform: scale(0.3) rotate(0deg); }
      40% { opacity: 1; }
      100% { opacity: 0.35; transform: scale(1.35) rotate(40deg); }
    }
    @keyframes legendarySpark {
      0% { opacity: 1; transform: translate(0,0) scale(1); }
      100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); }
    }
    .chestCard.tier_raid_exclusive{
      border-color: rgba(80, 200, 140, 0.65);
      box-shadow: 0 0 0 1px rgba(80, 200, 140, 0.14), 0 8px 24px rgba(0, 0, 0, 0.25);
      background: linear-gradient(160deg, rgba(20, 40, 32, 0.95), rgba(12, 18, 24, 0.98));
    }
    .chestCard.tier_raid_exclusive.raid-diff-normal{
      border-color: rgba(80, 200, 140, 0.7);
      box-shadow: 0 0 0 1px rgba(80, 200, 140, 0.16), 0 8px 22px rgba(0, 0, 0, 0.28);
      background: linear-gradient(160deg, rgba(18, 42, 30, 0.96), rgba(10, 16, 22, 0.98));
    }
    .chestCard.tier_raid_exclusive.raid-diff-heroic{
      border-color: rgba(255, 150, 60, 0.85);
      box-shadow: 0 0 0 1px rgba(255, 140, 40, 0.22), 0 0 28px rgba(255, 120, 40, 0.18);
      background: linear-gradient(160deg, rgba(52, 28, 12, 0.97), rgba(18, 12, 10, 0.99));
    }
    .chestCard.tier_raid_exclusive.raid-diff-heroic .chestTitle{ color: #ffc078; }
    .chestCard.tier_raid_exclusive.raid-diff-heroic .chestBits{ color: #ffb060; }
    .chestCard.tier_raid_exclusive.raid-diff-mythic{
      border-color: rgba(180, 110, 255, 0.9);
      box-shadow: 0 0 0 1px rgba(160, 80, 255, 0.28), 0 0 32px rgba(140, 60, 255, 0.28);
      background: linear-gradient(160deg, rgba(36, 14, 48, 0.98), rgba(12, 8, 22, 0.99));
    }
    .chestCard.tier_raid_exclusive.raid-diff-mythic .chestTitle{ color: #e0b8ff; }
    .chestCard.tier_raid_exclusive.raid-diff-mythic .chestBits{ color: #d4a0ff; }
    .chestCard.tier_raid_exclusive.raid-diff-mythic .chestIcon{
      filter: drop-shadow(0 0 10px rgba(180, 100, 255, 0.65));
    }
    .chestCard.tier_raid_exclusive.raid-diff-heroic .chestIcon{
      filter: drop-shadow(0 0 8px rgba(255, 140, 40, 0.55));
    }
    .chestCard.tier_welcome_adventurer{
      border-color: rgba(125, 255, 154, 0.55);
      box-shadow: 0 0 0 1px rgba(125, 255, 154, 0.14), 0 0 20px rgba(61, 207, 106, 0.12);
      background: linear-gradient(160deg, rgba(18, 40, 28, 0.95), rgba(12, 18, 24, 0.98));
    }
    .chestIcon{
      font-size: 34px;
      line-height: 1;
      filter: drop-shadow(0 4px 8px rgba(0,0,0,0.35));
    }
    .chestTitle{
      font-size: 12px;
      font-weight: 700;
      line-height: 1.25;
    }
    .chestSub{
      font-size: 10px;
      color: var(--muted);
      line-height: 1.3;
    }
    .chestBits{
      font-size: 11px;
      color: #f0c040;
      font-weight: 700;
    }
    .chestOpenBtn{
      width: 100%;
      margin-top: auto;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(25,195,125,0.45);
      background: rgba(25,195,125,0.18);
      color: var(--text);
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .chestOpenBtn:hover{ filter: brightness(1.08); }
    .chestOpenBtn:disabled{
      opacity: 0.55;
      cursor: default;
    }
    .potionCard{
      min-height: 132px;
      border-radius: 12px;
      border: 1px solid rgba(120,200,255,0.35);
      background: rgba(80,160,255,0.08);
      padding: 12px 10px 10px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 6px;
      text-align:center;
    }
    .potionCard .potionIcon{ font-size: 28px; line-height: 1; }
    .potionCard .potionTitle{ font-size: 12px; font-weight: 700; color: #d8ecff; }
    .potionCard .potionDesc{ font-size: 10px; color: var(--muted); line-height: 1.35; min-height: 2.7em; }
    .potionCard .potionPrice{ font-size: 12px; color: #f0c040; font-weight: 700; }
    .potionBuyBtn{
      width: 100%;
      margin-top: auto;
      padding: 6px 8px;
      border-radius: 8px;
      border: 1px solid rgba(120,200,255,0.45);
      background: rgba(120,200,255,0.16);
      color: #d8ecff;
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
    }
    .potionBuyBtn:disabled{ opacity: 0.45; cursor: not-allowed; }
    .potionActiveBox{
      margin: 10px 0;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(120,200,255,0.25);
      background: rgba(120,200,255,0.06);
      font-size: 12px;
      line-height: 1.45;
    }
    .potionActiveRow{ color: #b9dcff; margin-bottom: 4px; }
    .rivalCdRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:8px;
      flex-wrap:wrap;
      margin-top:8px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.08);
      background:rgba(255,255,255,0.04);
    }
    .rivalCdMeta{ font-size: 11px; color: var(--muted); }
    .rivalModalList{
      max-height: min(52vh, 360px);
      overflow:auto;
      margin: 4px 0 12px;
      text-align:left;
    }
    .rivalModalRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
      padding:10px 12px;
      margin-bottom:8px;
      border-radius:12px;
      border:1px solid rgba(255,255,255,0.10);
      background:rgba(255,255,255,0.04);
    }
    .rivalModalRow strong{ font-size: 13px; }
    .rivalModalApply{
      padding: 8px 12px;
      border-radius: 10px;
      border: 0;
      cursor: pointer;
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 11px;
      color: #06110b;
      background: linear-gradient(180deg, var(--green), var(--green2));
    }
    .rivalModalApply:disabled{
      opacity: 0.45;
      cursor: not-allowed;
      background: rgba(255,255,255,0.12);
      color: var(--muted);
    }
    .potionCooldown{
      margin: 8px 0 10px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px dashed rgba(255,160,80,0.45);
      background: rgba(255,160,80,0.08);
      color: #ffc98a;
      font-size: 12px;
    }
    .potionCooldownTime{
      font-weight: 700;
      font-variant-numeric: tabular-nums;
      color: #ffe4b8;
    }
    .openedChestRow{
      padding: 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(255,255,255,0.035);
      margin-bottom: 10px;
      font-size: 12px;
      line-height: 1.45;
    }
    .openedChestRow .histTop{
      display:flex;
      justify-content:space-between;
      gap:10px;
      align-items:flex-start;
      margin-bottom:10px;
    }
    .openedChestRow .histTitle{
      font-weight:750;
      font-size:13px;
      color:#f2f2f8;
    }
    .openedChestRow .histSrc{
      font-size:11px;
      color:var(--muted);
      margin-top:2px;
    }
    .openedChestRewardGrid{
      display:flex;
      flex-wrap:wrap;
      gap:7px;
    }
    .histRewardChip{
      min-width:72px;
      max-width:170px;
      padding:7px 9px;
      border-radius:9px;
      border:1px solid rgba(255,255,255,0.1);
      background:#121218;
      font-size:11px;
      line-height:1.25;
    }
    .histRewardChip .k{
      display:block;
      font-size:9px;
      text-transform:uppercase;
      letter-spacing:0.06em;
      color:var(--muted);
      margin-bottom:3px;
      font-weight:700;
    }
    .histRewardChip .v{ font-weight:750; color:#e8e8ef; }
    .histRewardChip.oro{ border-color:rgba(255,224,138,0.35); }
    .histRewardChip.oro .v{ color:#ffe08a; }
    .histRewardChip.pts{ border-color:rgba(143,230,181,0.3); }
    .histRewardChip.pts .v{ color:#8fe6b5; }
    .histRewardChip.gear{ border-color:rgba(224,184,58,0.4); }
    .histRewardChip.gear .v{ color:#e0b83a; }
    .histRewardChip.pet{ border-color:rgba(120,200,255,0.35); }
    .histRewardChip.pet .v{ color:#7dd3fc; }
    .histRewardChip.pot{ border-color:rgba(167,139,250,0.4); }
    .histRewardChip.pot .v{ color:#c4b5fd; }
    .histRewardChip.frag{ border-color:rgba(249,168,212,0.35); }
    .histRewardChip.frag .v{ color:#f9a8d4; }
    .histRewardChip.vip{ border-color:rgba(251,191,36,0.35); }
    .histRewardChip.vip .v{ color:#fbbf24; }
    .histRewardChip.other{ border-color:rgba(255,255,255,0.12); }

    /* —— Taller de Reciclaje (Propuesta 2) —— */
    .recycleWorkshop{ margin-top: 4px; }

    /* —— Forja de Restauración (FAB en doll) —— */
    .gearMythicSkillsFab{
      position: absolute;
      left: 8px;
      bottom: 8px;
      z-index: 4;
      width: 52px;
      height: 52px;
      padding: 0;
      margin: 0;
      display: grid;
      place-items: center;
      border-radius: 12px;
      border: 2px solid rgba(120, 170, 230, 0.45);
      background:
        radial-gradient(circle at 40% 30%, rgba(140, 200, 255, 0.16), transparent 55%),
        linear-gradient(165deg, rgba(22, 32, 48, 0.95), rgba(12, 16, 28, 0.98));
      box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
      color: #c8e4ff;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, filter 0.2s ease;
    }
    .gearMythicSkillsFab:hover{ transform: translateY(-1px); filter: brightness(1.08); }
    .gearMythicSkillsFab.on{
      border-color: rgba(140, 210, 255, 0.95);
      box-shadow: 0 4px 14px rgba(0,0,0,0.4), 0 0 18px rgba(80,160,255,0.28);
    }
    .gearMythicSkillsFabIcon{ font-size: 22px; line-height: 1; pointer-events: none; }
    .gearMythicSkillsFabBadge{
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      font-size: 9px;
      font-weight: 800;
      line-height: 18px;
      text-align: center;
      background: #3a6a9a;
      color: #fff;
      border: 1px solid rgba(20,10,8,0.7);
      pointer-events: none;
    }
    .gearMythicSkillsFabBadge[hidden]{ display: none !important; }
    .gearMythicSkillsFab.on .gearMythicSkillsFabBadge{ background: #2a9a6a; }

    .mythicSkillsModal{ max-width: 520px; }
    .mythicSkillCard{
      display:flex; gap:10px; align-items:flex-start;
      padding:10px 12px; border-radius:10px;
      border:1px solid rgba(120,170,230,0.28);
      background: rgba(20,28,40,0.55);
      margin-bottom:8px; cursor:pointer;
    }
    .mythicSkillCard.selected{ border-color: rgba(140,210,255,0.85); background: rgba(40,70,110,0.45); }
    .mythicSkillCard.off{ opacity: 0.55; }
    .mythicSkillCard .cmd{ font-family: ui-monospace, monospace; color:#9fd0ff; font-weight:700; }
    .mythicSkillsStatus{
      display:inline-block; padding:3px 10px; border-radius:999px;
      font-size:12px; font-weight:800; margin-bottom:10px;
    }
    .mythicSkillsStatus.on{ background:rgba(40,140,90,0.35); color:#b6ffd0; }
    .mythicSkillsStatus.off{ background:rgba(80,80,90,0.45); color:#c8c8d0; }

    .gearRepairFab{
      position: absolute;
      right: 8px;
      bottom: 8px;
      z-index: 4;
      width: 52px;
      height: 52px;
      padding: 0;
      margin: 0;
      display: grid;
      place-items: center;
      border-radius: 12px;
      border: 2px solid rgba(170, 150, 120, 0.45);
      background:
        radial-gradient(circle at 40% 30%, rgba(255, 200, 120, 0.14), transparent 55%),
        linear-gradient(165deg, rgba(42, 32, 22, 0.95), rgba(18, 14, 12, 0.98));
      box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
      color: #e8d0a8;
      cursor: pointer;
      transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease, filter 0.2s ease;
    }
    .gearRepairFab:hover{
      transform: translateY(-1px);
      filter: brightness(1.08);
    }
    .gearRepairFab:focus-visible{
      outline: 2px solid rgba(255, 200, 120, 0.65);
      outline-offset: 2px;
    }
    .gearRepairFabIcon{
      font-size: 22px;
      line-height: 1;
      filter: drop-shadow(0 1px 2px rgba(0,0,0,0.55));
      pointer-events: none;
    }
    .gearRepairFabBadge{
      position: absolute;
      top: -6px;
      right: -6px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 999px;
      font-size: 10px;
      font-weight: 800;
      line-height: 18px;
      text-align: center;
      background: #c45a52;
      color: #fff;
      border: 1px solid rgba(20,10,8,0.7);
      box-shadow: 0 2px 6px rgba(0,0,0,0.4);
      pointer-events: none;
    }
    .gearRepairFabBadge[hidden]{ display: none !important; }
    .gearRepairFab.dur-ok{
      border-color: rgba(170, 150, 120, 0.45);
      box-shadow: 0 4px 14px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
    }
    .gearRepairFab.dur-warn{
      border-color: rgba(220, 170, 70, 0.85);
      box-shadow:
        0 4px 14px rgba(0,0,0,0.35),
        0 0 0 1px rgba(220, 160, 60, 0.25),
        0 0 16px rgba(255, 170, 40, 0.18);
      color: #ffe0a8;
    }
    .gearRepairFab.dur-bad{
      border-color: rgba(220, 120, 70, 0.9);
      box-shadow:
        0 4px 14px rgba(0,0,0,0.35),
        0 0 0 1px rgba(220, 100, 50, 0.3),
        0 0 18px rgba(255, 100, 40, 0.22);
      color: #ffd0a0;
    }
    .gearRepairFab.dur-broken{
      border-color: rgba(220, 70, 60, 0.95);
      box-shadow:
        0 4px 14px rgba(0,0,0,0.4),
        0 0 0 1px rgba(200, 50, 40, 0.45),
        0 0 22px rgba(255, 60, 40, 0.28);
      color: #ffc0b0;
      animation: gearRepairPulse 1.8s ease-in-out infinite;
    }
    @keyframes gearRepairPulse{
      0%, 100%{ filter: brightness(1); }
      50%{ filter: brightness(1.12); }
    }
    /* Durabilidad: sin anillo mint; barra inferior cobre/ámbar solo si dañado */
    .gearDollSlot .gearDurBar{
      position: absolute;
      left: 5px;
      right: 5px;
      bottom: 3px;
      height: 2px;
      border-radius: 2px;
      pointer-events: none;
      z-index: 2;
      background: rgba(0,0,0,0.45);
      overflow: hidden;
    }
    .gearDollSlot .gearDurBar > i{
      display: block;
      height: 100%;
      width: var(--dur-pct, 100%);
      border-radius: 2px;
      background: var(--dur-color, #c9a06a);
    }
    .gearDollSlot.dur-warn{ box-shadow: 0 0 0 1px rgba(200,140,70,0.28); }
    .gearDollSlot.dur-bad{ box-shadow: 0 0 0 1px rgba(200,90,70,0.32); }
    .gearDollSlot.dur-broken{
      box-shadow: 0 0 0 1px rgba(180,60,50,0.5), inset 0 0 12px rgba(80,0,0,0.18);
      filter: saturate(0.55);
    }
    .gearDollSlot .gearDurBadge{
      position: absolute;
      right: 4px;
      bottom: 6px;
      z-index: 3;
      font-size: 8px;
      font-weight: 750;
      padding: 1px 3px;
      border-radius: 4px;
      background: rgba(20,12,8,0.72);
      color: #e8c49a;
      pointer-events: none;
      letter-spacing: 0.02em;
    }
    .gearDollSlot.dur-broken .gearDurBadge{ color: #ffb0a8; }
    .gearRepairModal{
      width: min(560px, 96vw);
      max-height: 88vh;
      overflow: auto;
      background: linear-gradient(180deg, #1a1410 0%, #0e0c0b 100%);
      border: 1px solid rgba(255,170,80,0.35);
      box-shadow: 0 20px 60px rgba(0,0,0,0.55), 0 0 40px rgba(255,120,40,0.08);
    }
    .gearRepairHead{
      display:flex;
      justify-content:space-between;
      gap:12px;
      align-items:flex-start;
      margin-bottom: 10px;
    }
    .gearRepairPenalty{
      margin: 0 0 12px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,120,100,0.35);
      background: rgba(255,60,40,0.1);
      color: #ffc4b8;
      font-size: 13px;
      font-weight: 700;
    }
    .gearRepairList{ display:flex; flex-direction:column; gap:8px; }
    .gearRepairCard{
      display:flex;
      align-items:center;
      gap:10px;
      padding: 10px 12px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.1);
      background: rgba(255,255,255,0.03);
    }
    .gearRepairCard .meta{ flex:1; min-width:0; }
    .gearRepairCard .name{ font-weight:750; font-size:13px; }
    .gearRepairCard .sub{ font-size:11px; color:#b9a898; margin-top:2px; }
    .gearRepairCard .bar{
      height:6px; border-radius:99px; background:rgba(0,0,0,0.35); margin-top:6px; overflow:hidden;
    }
    .gearRepairCard .bar > span{ display:block; height:100%; background:linear-gradient(90deg,#ff9a4a,#ffe08a); }
    .gearRepairCard .cost{ font-weight:800; color:#ffd27a; white-space:nowrap; }
    .gearRepairFoot{
      margin-top: 14px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      flex-wrap:wrap;
    }
    .gearRepairTotal{ font-size:13px; font-weight:750; color:#ffe0b0; }
    .gearTipDur{ margin-top:6px; color:#ffd7a0; font-size:11px; font-weight:700; }
    .gearTipDurLost{ color:#ffb0a0; font-size:11px; margin-top:2px; }
    .recycleModalHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      padding:4px 2px 10px;
      flex-shrink:0;
    }
    .recycleTitleBlock{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:10px;
      min-width:0;
    }
    .recycleHelpBtn{
      appearance:none;
      border:1px solid rgba(251,191,36,0.55);
      background:linear-gradient(135deg, rgba(251,191,36,0.22), rgba(167,139,250,0.18));
      color:#fde68a;
      font-weight:750;
      font-size:13px;
      letter-spacing:0.02em;
      padding:10px 16px;
      border-radius:999px;
      cursor:pointer;
      box-shadow:0 0 0 1px rgba(251,191,36,0.12), 0 8px 24px rgba(0,0,0,0.25);
      transition:filter .15s ease, transform .15s ease;
    }
    .recycleHelpBtn:hover{
      filter:brightness(1.08);
      transform:translateY(-1px);
    }
    .recycleAscendBox{
      margin-top:8px;
      padding:10px;
      border-radius:10px;
      border:1px solid rgba(167,139,250,0.28);
      background:rgba(88,28,135,0.12);
    }
    .recycleAscendBox.leg{
      border-color:rgba(251,191,36,0.35);
      background:rgba(120,80,0,0.14);
    }
    .recycleAscendTitle{
      font-size:12px;
      font-weight:700;
      color:#e9d5ff;
      margin:0 0 4px;
    }
    .recycleAscendBox.leg .recycleAscendTitle{ color:#fde68a; }
    .recycleAscendMeta{
      font-size:11px;
      color:#b4b4c4;
      line-height:1.4;
      margin:0 0 8px;
    }
    .recycleAscendBar{
      height:8px;
      border-radius:999px;
      background:rgba(255,255,255,0.08);
      overflow:hidden;
      margin:0 0 8px;
    }
    .recycleAscendBar > i{
      display:block;
      height:100%;
      background:linear-gradient(90deg,#a78bfa,#fbbf24);
      border-radius:999px;
    }
    .recycleCatalystRow{
      display:flex;
      align-items:center;
      gap:8px;
      font-size:12px;
      color:#fde68a;
      margin:0 0 8px;
    }
    .recycleCatalystRow input{ accent-color:#fbbf24; }
    .recycleBtn.ascend{
      border-color:rgba(167,139,250,0.45);
      background:linear-gradient(135deg, rgba(124,58,237,0.35), rgba(251,191,36,0.18));
    }
    .recycleWorkshopHead{
      display:flex; flex-wrap:wrap; justify-content:space-between; gap:10px;
      align-items:flex-start; margin-bottom:12px;
    }
    .recycleWorkshopLead{
      margin:0; font-size:12px; color:#9a9aad; max-width:460px; line-height:1.45;
    }
    .recycleLegend{ display:flex; flex-wrap:wrap; gap:6px; justify-content:flex-end; }
    .recycleChip{
      font-size:11px; font-weight:700; letter-spacing:0.02em;
      padding:4px 10px; border-radius:999px;
      border:1px solid rgba(255,255,255,0.1);
      background:rgba(255,255,255,0.04); color:#9a9aad;
    }
    .recycleChip.med{ color:#60a5fa; border-color:rgba(96,165,250,0.35); }
    .recycleChip.epic{ color:#a78bfa; border-color:rgba(167,139,250,0.35); }
    .recycleChip.leg{ color:#fbbf24; border-color:rgba(251,191,36,0.35); }
    .recycleTabs{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:14px; }
    .recycleTab{
      border:1px solid rgba(255,255,255,0.1);
      background:rgba(0,0,0,0.25);
      color:#9a9aad;
      padding:7px 12px;
      border-radius:999px;
      font-size:12px;
      font-family:inherit;
      cursor:pointer;
      transition:0.15s ease;
    }
    .recycleTab:hover{ color:#e8e8ef; border-color:rgba(255,255,255,0.22); }
    .recycleTab.active{
      background:linear-gradient(180deg,#1e3a24,#15261a);
      border-color:#166534;
      color:#4ade80;
      box-shadow:0 0 14px rgba(34,197,94,0.12);
    }
    .recycleGrid{
      display:grid;
      grid-template-columns:repeat(2,minmax(0,1fr));
      gap:12px;
      margin-bottom:12px;
    }
    @media (max-width:760px){
      .recycleGrid{ grid-template-columns:1fr; }
    }
    .recycleCard{
      background:linear-gradient(165deg,#1c1c26,#16161d);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:14px;
      padding:14px;
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .recycleCard.med{ border-color:rgba(96,165,250,0.28); box-shadow:0 0 0 1px rgba(96,165,250,0.06); }
    .recycleCard.epic{ border-color:rgba(167,139,250,0.28); box-shadow:0 0 0 1px rgba(167,139,250,0.06); }
    .recycleCard.leg{ border-color:rgba(251,191,36,0.32); box-shadow:0 0 0 1px rgba(251,191,36,0.08); }
    .recycleCard.complete{ opacity:0.92; }
    .recycleCardTop{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
    .recycleSetName{ font-weight:750; font-size:15px; color:#f0f0f5; }
    .recycleSetTier{ font-size:11px; color:#9a9aad; margin-top:2px; }
    .recycleSetTier.med{ color:#60a5fa; }
    .recycleSetTier.epic{ color:#a78bfa; }
    .recycleSetTier.leg{ color:#fbbf24; }
    .recycleTokenOrb{
      width:52px; height:52px; border-radius:50%;
      display:grid; place-items:center; text-align:center;
      background:radial-gradient(circle at 35% 30%,#3a3a28,#1a1a14);
      border:2px solid #fbbf24;
      box-shadow:0 0 16px rgba(251,191,36,0.22);
      flex-shrink:0;
      line-height:1.05;
    }
    .recycleTokenOrb.zero{
      border-color:#555; box-shadow:none; opacity:0.72;
    }
    .recycleTokenOrb b{ font-size:16px; color:#fff; display:block; }
    .recycleTokenOrb span{ font-size:9px; color:#9a9aad; }
    .recycleCompleteBadge{
      display:inline-flex; align-items:center; gap:6px;
      width:fit-content;
      background:linear-gradient(90deg,#3a2a0a,#2a2208);
      border:1px solid #6a5a1a;
      color:#fbbf24;
      font-size:10px; font-weight:800; letter-spacing:0.04em;
      padding:3px 9px; border-radius:999px;
    }
    .recycleBody{
      display:grid;
      grid-template-columns:1fr auto;
      gap:12px;
      align-items:start;
    }
    .recycleExtras h4{
      margin:0 0 6px;
      font-size:10px;
      text-transform:uppercase;
      letter-spacing:0.08em;
      color:#9a9aad;
    }
    .recycleExtraRow{
      display:flex; align-items:center; justify-content:space-between; gap:8px;
      padding:5px 8px; border-radius:8px;
      background:rgba(0,0,0,0.28);
      border:1px solid rgba(255,255,255,0.06);
      margin-bottom:5px;
      font-size:12px;
    }
    .recycleExtraPlus{
      background:#14532d; color:#86efac;
      font-weight:800; font-size:11px;
      padding:1px 6px; border-radius:6px;
      flex-shrink:0;
    }
    .recycleExtraEmpty{
      font-size:12px; color:#9a9aad;
      padding:8px;
      border:1px dashed rgba(255,255,255,0.1);
      border-radius:8px;
      line-height:1.4;
    }
    .recycleRingWrap{ display:flex; align-items:center; gap:10px; margin-top:10px; }
    .recycleRing{
      --p:0;
      width:40px; height:40px; border-radius:50%;
      background:conic-gradient(#22c55e calc(var(--p) * 1%), #2a2a38 0);
      display:grid; place-items:center; flex-shrink:0;
    }
    .recycleRing::after{
      content:attr(data-pct);
      width:30px; height:30px; border-radius:50%;
      background:#16161d;
      display:grid; place-items:center;
      font-size:9px; font-weight:800; color:#e8e8ef;
    }
    .recycleRingMeta{ font-size:11px; color:#9a9aad; line-height:1.35; }
    .recycleRingMeta b{ color:#e8e8ef; }
    .recycleSlots{
      display:grid; grid-template-columns:1fr 1fr; gap:6px; width:132px;
    }
    .recycleSlot{
      aspect-ratio:1; border-radius:9px;
      border:1px solid rgba(255,255,255,0.1);
      background:#121218;
      display:flex; flex-direction:column;
      align-items:center; justify-content:center;
      gap:2px; font-size:9px; color:#9a9aad;
      position:relative; text-align:center; padding:4px;
      line-height:1.15;
    }
    .recycleSlot .glyph{ font-size:16px; line-height:1; }
    .recycleSlot.ok{
      border-color:#166534;
      background:linear-gradient(160deg,#142218,#101810);
      color:#86efac;
    }
    .recycleSlot.miss{
      border:1px dashed #ef4444;
      background:#1a1010;
      color:#fca5a5;
    }
    .recycleSlot .badge{
      position:absolute; top:2px; right:2px;
      background:#22c55e; color:#052e14;
      font-size:8px; font-weight:800;
      padding:1px 4px; border-radius:4px;
    }
    .recycleSlot .x{
      position:absolute; inset:0;
      display:grid; place-items:center;
      background:rgba(80,10,10,0.32);
      font-size:18px; color:#f87171; font-weight:700;
      pointer-events:none;
    }
    .recycleActions{ display:flex; flex-direction:column; gap:7px; margin-top:auto; }
    .recycleBtn{
      border:none; border-radius:10px;
      padding:9px 12px;
      font-weight:750; font-size:12px;
      font-family:inherit;
      cursor:pointer;
      background:linear-gradient(180deg,#2dd66a,#16a34a);
      color:#052e14;
      box-shadow:0 3px 12px rgba(34,197,94,0.22);
    }
    .recycleBtn:hover:not(:disabled){ filter:brightness(1.06); }
    .recycleBtn:disabled{
      cursor:not-allowed; opacity:0.5; filter:grayscale(0.25);
      box-shadow:none;
    }
    .recycleRedeemRow{
      display:flex; align-items:center; gap:7px;
      background:rgba(0,0,0,0.22);
      border:1px solid rgba(255,255,255,0.08);
      border-radius:10px;
      padding:6px;
    }
    .recycleRedeemRow select{
      flex:1; min-width:0;
      background:#0e0e14;
      border:1px solid #333;
      color:#e8e8ef;
      border-radius:8px;
      padding:7px 8px;
      font-size:12px;
      font-family:inherit;
    }
    .recycleRedeemGo{
      background:#1a1a24;
      border:1px solid #166534;
      color:#4ade80;
      border-radius:8px;
      padding:7px 11px;
      font-weight:750;
      font-size:12px;
      font-family:inherit;
      cursor:pointer;
      white-space:nowrap;
    }
    .recycleRedeemGo:disabled{ opacity:0.4; cursor:not-allowed; }
    .recycleLowBank{
      border-radius:14px;
      border:1px solid rgba(34,197,94,0.22);
      background:linear-gradient(120deg,#141c16,#12151a 60%);
      padding:14px 16px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:14px;
      align-items:center;
    }
    .recycleLooseStack{ display:flex; flex-direction:column; gap:10px; margin-top:12px; min-width:0; }
    .recycleLooseBank{
      border-radius:14px;
      border:1px solid rgba(96,165,250,0.22);
      background:linear-gradient(120deg,#141820,#12151a 60%);
      padding:14px 16px;
      display:grid;
      grid-template-columns:1fr auto;
      gap:12px;
      align-items:center;
      min-width:0;
    }
    .recycleLooseBank.epic{ border-color:rgba(167,139,250,0.28); }
    .recycleLooseBank.leg{ border-color:rgba(251,191,36,0.32); }
    .recycleLooseBank h3{ margin:0 0 4px; font-size:14px; }
    .recycleLooseBank .sub{ margin:0; font-size:11px; color:#9a9aad; line-height:1.4; word-break:break-word; }
    html.is-jandrey #arenaSeasonCard,
    html.is-jandrey #arenaLaunchBanner,
    html.is-jandrey #chowioLfgBox{
      display:none !important;
    }
    html.is-sku-arena .tab[data-tab="vip"],
    html.is-sku-arena .tab[data-tab="oficios"],
    html.is-sku-arena .tab[data-tab="hermandad"],
    html.is-sku-arena .tab[data-tab="semana"],
    html.is-sku-arena .tab[data-tab="pets"],
    html.is-sku-arena .tab[data-tab="pokedex"],
    html.is-sku-arena #btnOpenRaidRules,
    html.is-sku-arena #btnOpenFrostGuide,
    html.is-sku-arena #btnOpenMythicSkills,
    html.is-sku-arena #btnOpenRecycle,
    html.is-sku-arena #btnOpenCamara,
    html.is-sku-arena #btnOpenFxAlbum,
    html.is-sku-arena #btnOpenPetAlbum,
    html.is-sku-arena #btnOpenPuchamonShop,
    html.is-sku-arena #btnOpenNexo,
    html.is-sku-arena #btnOpenPuchamonIncubate,
    html.is-sku-arena #raidLiveDock,
    html.is-sku-arena #gameChatCatchBar,
    html.is-sku-arena #shopEmpty,
    html.is-sku-arena #shopOpenedSection,
    html.is-sku-arena #tab_shop > .shopTiers,
    html.is-sku-arena .patronChipRow,
    html.is-sku-arena #btnPatronChip,
    html.is-sku-arena #btnOpenGearRepair,
    html.is-sku-arena #gearPityHint,
    html.is-sku-arena #bagRaidChestSection,
    html.is-sku-arena #bagRaidCdSection,
    html.is-sku-arena #bagRaidFragmentSection,
    html.is-sku-arena #bagChowsitoSection,
    html.is-sku-arena #arenaSeasonCard,
    html.is-sku-arena #arenaLaunchBanner,
    html.is-sku-arena #chowioLfgBox{
      display:none !important;
    }
    }
    #foundryOverlay{
      padding:0;
      align-items:stretch;
      justify-content:stretch;
      overflow:hidden;
    }
    .modal.foundryModal{
      display:flex;
      flex-direction:column;
      margin:0;
      padding:0;
      border:0;
      border-radius:0;
      box-shadow:none;
      background:
        radial-gradient(1200px 520px at 8% -10%, rgba(255,106,61,0.14), transparent 52%),
        radial-gradient(900px 480px at 100% 0%, rgba(25,195,125,0.08), transparent 48%),
        linear-gradient(180deg, #0c1118 0%, #07090d 100%);
      color:var(--text);
      font-family:var(--font-body);
      container-type:inline-size;
      container-name:foundry;
    }
    .foundryModal ::selection{ background:#ff6a3d; color:#140804; }
    .foundryModal{ caret-color:#ffb089; }
    .foundryModal :focus-visible{
      outline:2px solid #ffb089;
      outline-offset:3px;
    }
    .foundryBody::-webkit-scrollbar{ width:10px; }
    .foundryBody::-webkit-scrollbar-thumb{
      background:#3a4552;
      border-radius:999px;
    }
    .foundryHead{
      display:flex;
      align-items:flex-start;
      justify-content:space-between;
      gap:12px;
      flex-shrink:0;
      padding: max(12px, var(--safe-top)) max(16px, var(--safe-right)) 12px max(16px, var(--safe-left));
      border-bottom:1px solid var(--border);
      background:#0c1118;
    }
    .foundryHeadText{ min-width:0; flex:1; }
    .foundryTitle{
      margin:0;
      font-family:var(--font-display);
      font-size:18px;
      letter-spacing:0.02em;
      font-weight:700;
      color:var(--text);
      text-align:left;
    }
    .foundryLead{
      margin:6px 0 0;
      max-width:62ch;
      font-size:15px;
      line-height:1.45;
      color:var(--muted);
    }
    .foundryHead .miniBtn{
      flex-shrink:0;
      min-height:44px;
      min-width:44px;
      padding:10px 14px;
    }
    .foundryTabs{
      display:flex;
      gap:6px;
      flex-wrap:wrap;
      padding:0;
      margin-top:12px;
    }
    .foundryTabs button{
      flex:1 1 0;
      min-width:0;
      min-height:44px;
      padding:8px 4px;
      border:1px solid var(--border);
      background:transparent;
      color:var(--text);
      font-family:var(--font-body);
      font-weight:700;
      font-size:13px;
      cursor:pointer;
    }
    .foundryTabs button.on{
      border-color:#ff6a3d;
      background:rgba(255,106,61,0.16);
    }
    .foundryBody{
      flex:1;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      padding: 12px max(16px, var(--safe-right)) max(24px, var(--safe-bottom)) max(16px, var(--safe-left));
      font-variant-numeric:tabular-nums;
    }
    .foundryShell{
      width:min(1440px, 100%);
      margin:0 auto;
    }
    .foundryStage{
      display:none;
      position:relative;
      margin:0 0 16px;
      height:8px;
      border:0;
      background:#171d26;
      overflow:hidden;
    }
    .foundryStage svg{ display:block; width:100%; height:8px; }
    .foundryStage.is-forge{
      box-shadow:0 8px 22px rgba(255,106,61,0.28);
    }
    .foundryStage.is-forge .foundryEmber{
      animation:foundryEmber 900ms cubic-bezier(0.16,1,0.3,1);
    }
    @keyframes foundryEmber{
      0%{ filter:blur(8px); opacity:0.2; transform:translateY(8px); }
      40%{ filter:blur(0); opacity:1; transform:translateY(0); }
      100%{ filter:blur(2px); opacity:0.45; transform:translateY(-4px); }
    }
    .foundryGrid{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      align-items:start;
    }
    .foundryHops{
      display:grid;
      grid-template-columns:1fr;
      gap:14px;
      min-width:0;
    }
    .foundryHop{
      min-width:0;
      padding:14px 0 16px;
      border:0;
      border-bottom:1px solid var(--border);
      background:transparent;
    }
    .foundryHop:last-child{ border-bottom:0; padding-bottom:0; }
    .foundrySpark{
      min-width:0;
      padding:0;
      border:0;
      background:transparent;
    }
    .foundryHop{ display:none; }
    .foundryHop.is-on{ display:block; }
    .foundrySpark{ display:none; }
    .foundrySpark.is-on{ display:block; }
    .foundryHop h3,
    .foundrySpark h3{
      margin:0 0 8px;
      font-family:var(--font-display);
      font-size:15px;
      letter-spacing:0.03em;
      font-weight:700;
    }
    .foundryHop p,
    .foundrySpark p,
    .foundryNeed{
      margin:0 0 10px;
      font-size:15px;
      line-height:1.45;
      color:var(--muted);
    }
    .foundryMeta{
      display:flex;
      flex-wrap:wrap;
      gap:8px 14px;
      margin:0 0 10px;
      font-size:15px;
      color:var(--text);
    }
    .foundryMeta b{ font-weight:700; }
    .foundryBar{
      height:8px;
      background:#1a222c;
      overflow:hidden;
      margin:0 0 12px;
    }
    .foundryBar > span{
      display:block;
      height:100%;
      background:linear-gradient(90deg, #7a8fa3, #ff6a3d);
    }
    .foundryPieces{
      display:grid;
      grid-template-columns:1fr;
      gap:8px;
      margin:0 0 12px;
    }
    .foundryPiece{
      display:flex;
      flex-direction:column;
      align-items:flex-start;
      gap:2px;
      width:100%;
      min-width:0;
      min-height:44px;
      text-align:left;
      padding:10px 12px;
      border:1px solid var(--border);
      background:#121820;
      color:inherit;
      font-family:var(--font-body);
      cursor:pointer;
    }
    .foundryPiece.on{
      border-color:#ff6a3d;
      box-shadow:0 8px 18px rgba(0,0,0,0.35);
    }
    .foundryPiece .slot{
      display:block;
      font-size:12px;
      color:var(--muted);
    }
    .foundryPiece b{
      display:block;
      font-size:16px;
      font-weight:700;
      overflow-wrap:anywhere;
    }
    .foundryPiece.miss b{ color:#ffd2c2; }
    .foundryActions{
      display:flex;
      flex-wrap:wrap;
      gap:8px;
    }
    .foundryBtn{
      flex:1 1 140px;
      min-height:44px;
      border:1px solid rgba(255,106,61,0.45);
      background:linear-gradient(180deg, #ff814f, #c4471e);
      color:#140804;
      font-family:var(--font-body);
      font-size:16px;
      font-weight:700;
      padding:10px 14px;
      cursor:pointer;
    }
    .foundryBtn[disabled]{
      opacity:0.45;
      cursor:not-allowed;
      filter:grayscale(0.35);
    }
    .foundryBtn.ghost{
      background:transparent;
      color:var(--text);
      border-color:rgba(255,255,255,0.22);
    }
    .foundrySparks{
      display:flex;
      flex-direction:column;
      gap:10px;
    }
    .foundrySparkRow{
      display:flex;
      flex-direction:column;
      gap:8px;
      min-width:0;
      padding:12px 0;
      border:0;
      border-top:1px solid var(--border);
      background:transparent;
    }
    .foundrySparkRow:first-child{ border-top:0; padding-top:0; }
    .foundrySparkRow header{
      display:flex;
      justify-content:space-between;
      gap:8px;
      align-items:center;
    }
    .foundrySparkRow header b{
      min-width:0;
      overflow-wrap:anywhere;
      display:flex;
      align-items:center;
      gap:8px;
    }
    .foundrySparkRow header .gemIcon{
      width:36px;
      height:36px;
    }
    .foundryEmpty{
      padding:18px;
      border:1px dashed var(--border);
      color:var(--muted);
    }
    @media (hover:hover) and (pointer:fine){
      .foundryPiece:hover{ border-color:rgba(255,106,61,0.55); }
      .foundryBtn:hover:not([disabled]){ filter:brightness(1.06); }
    }
    @container foundry (min-width: 720px){
      .foundryTabs{ display:none; }
      .foundryLead{ display:block; }
      .foundryHop,
      .foundrySpark{ display:block; }
      .foundryPieces{ grid-template-columns:repeat(2, minmax(0,1fr)); }
      .foundryStage{ display:block; }
    }
    @container foundry (min-width: 1080px){
      .foundryGrid{
        grid-template-columns:minmax(0,1fr) 300px;
        gap:24px;
        align-items:start;
      }
      .foundrySpark{
        position:sticky;
        top:0;
        padding-left:20px;
        border-left:1px solid var(--border);
      }
      .foundryTitle{ font-size:20px; }
    }
    @container foundry (min-width: 1320px){
      .foundryHops{
        grid-template-columns:repeat(3, minmax(0,1fr));
        gap:0;
      }
      .foundryHop{
        padding:0 16px;
        border-bottom:0;
        border-right:1px solid var(--border);
      }
      .foundryHop:first-child{ padding-left:0; }
      .foundryHop:last-child{ border-right:0; padding-right:0; }
      .foundryPieces{ grid-template-columns:1fr; }
    }
    @media (min-width: 1920px){
      .foundryShell{ width:min(1680px, 100%); }
      .foundryHead,
      .foundryBody{ padding-left:28px; padding-right:28px; }
    }
    @media (min-width: 2560px){
      .foundryShell{ width:min(1840px, 100%); }
      .foundryTitle{ font-size:22px; }
    }
    @media (max-width: 520px){
      .modal.foundryModal{
        width:100%;
        max-width:none;
        height:100%;
        max-height:100%;
      }
      .foundryLead{ display:none; }
    }
    #recycleOverlay{
      padding:0;
      align-items:stretch;
      width:100%;
      height:100%;
      min-height:100vh;
      min-height:100dvh;
    }
    .recycleModal{
      width:100%;
      max-width:none;
      height:100%;
      max-height:100%;
      margin:0;
      border-radius:0;
      overflow:hidden;
      display:flex;
      flex-direction:column;
      box-sizing:border-box;
    }
    .recycleModalBody{
      position:relative;
      flex:1;
      min-height:0;
      display:flex;
      flex-direction:column;
    }
    .recycleHelpPanel{
      position:absolute;
      inset:0;
      z-index:3;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      padding:8px 6px 28px;
      background:rgba(12,16,24,0.97);
    }
    .recycleHelpPanel h3{
      margin:16px 0 8px;
      font-size:15px;
      color:#bbf7d0;
    }
    .recycleHelpPanel h3:first-child{ margin-top:0; }
    .recycleHelpPanel p, .recycleHelpPanel li{
      font-size:14px;
      line-height:1.55;
      color:#d8d8e4;
    }
    .recycleHelpPanel ol, .recycleHelpPanel ul{ margin:0 0 12px; padding-left:1.2em; }
    .recycleHelpPanel li{ margin:0 0 8px; }
    .recycleModal .recycleWorkshop{
      flex:1;
      min-height:0;
      overflow:auto;
      -webkit-overflow-scrolling:touch;
      padding-bottom:24px;
    }
    @media (max-width:760px){
      .recycleLowBank, .recycleLooseBank{ grid-template-columns:1fr; }
      .recycleGrid{ grid-template-columns:1fr; }
      .recycleWorkshopHead{ flex-direction:column; align-items:stretch; }
      .recycleLegend{ justify-content:flex-start; }
      .recycleCardTop{ flex-wrap:wrap; }
      .petAlbumEntry{ flex-wrap:wrap; }
    }
    @media (max-width:760px){
      .recycleLowBank{ grid-template-columns:1fr; }
    }
    .recycleLowBank h3{
      margin:0 0 3px;
      font-size:14px;
      display:flex; align-items:center; gap:7px;
    }
    .recycleLowBank .sub{ margin:0 0 10px; font-size:11px; color:#9a9aad; line-height:1.4; }
    .recycleFunnel{ display:flex; align-items:center; gap:5px; flex-wrap:wrap; }
    .recycleFunnel .dot{
      width:20px; height:20px; border-radius:5px;
      border:1px solid #3a4a3a;
      background:#1a221a;
      display:grid; place-items:center;
      font-size:9px; color:#6a7a6a;
    }
    .recycleFunnel .dot.filled{
      background:linear-gradient(145deg,#225533,#143322);
      border-color:#166534;
      color:#86efac;
      box-shadow:0 0 6px rgba(34,197,94,0.2);
    }
    .recycleFunnel .arrow{ color:#9a9aad; font-size:13px; margin:0 2px; }
    .recycleFunnel .tok{
      width:32px; height:32px; border-radius:50%;
      border:2px solid #60a5fa;
      background:#121820;
      display:grid; place-items:center;
      font-size:13px; color:#60a5fa;
    }
    .recycleLowActions{ display:flex; flex-direction:column; gap:7px; min-width:200px; }
    .recycleLowActions label{ font-size:11px; color:#9a9aad; }
    .recycleLowActions select{
      width:100%;
      background:#0e0e14;
      border:1px solid #333;
      color:#e8e8ef;
      border-radius:8px;
      padding:8px 10px;
      font-size:12px;
      font-family:inherit;
    }

    .historyToggle{
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      margin: 10px 0 0;
      padding: 0;
      border: none;
      background: transparent;
      color: #ffe08a;
      font-family: inherit;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
      text-align: left;
    }
    .historyToggle:hover{ filter: brightness(1.08); }
    .historyChevron{
      display: inline-block;
      width: 12px;
      font-size: 11px;
      color: var(--muted);
      transition: transform 0.15s ease;
    }
    .historyToggle[aria-expanded="true"] .historyChevron{
      transform: rotate(90deg);
    }
    .historyCount{
      color: var(--muted);
      font-weight: 600;
      font-size: 12px;
    }
    .historyBody{
      margin-top: 6px;
    }
    .historyBody[hidden]{ display: none; }

    .petSprite{
      background-repeat:no-repeat;
      image-rendering: pixelated;
      animation-name: petSheet;
      animation-iteration-count: infinite;
    }
    .petSprite.petIdleBob{
      animation-name: petIdleBob;
      animation-duration: 2.4s;
      animation-timing-function: ease-in-out;
      animation-iteration-count: infinite;
    }
    @keyframes petSheet{
      from { background-position: 0 var(--pet-bg-y, 0); }
      to { background-position: calc(-1px * var(--pet-fw) * var(--pet-frames) * var(--pet-scale)) var(--pet-bg-y, 0); }
    }

    .petCard{
      position: relative;
      min-height: 168px;
      height: 100%;
      border-radius: 12px;
      background: rgba(255,255,255,0.06);
      border: 1px solid rgba(255,255,255,0.10);
      padding: 10px 8px 8px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 6px;
      cursor:pointer;
      overflow:hidden;
      transition: transform .08s ease, border-color .15s ease, background .15s ease;
    }
    .petCard .petNewBadge{
      position: absolute;
      top: 6px;
      right: 6px;
      z-index: 2;
      padding: 2px 7px;
      border-radius: 999px;
      background: linear-gradient(135deg, #ff6b6b, #f0a030);
      color: #fff;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      box-shadow: 0 2px 8px rgba(0,0,0,0.35);
      pointer-events: none;
    }
    .petCard:hover{ transform: translateY(-1px); }
    .petCard.selected{
      border-color: rgba(46,204,113,0.65);
      background: rgba(46,204,113,0.10);
    }
    .petCard.locked{ opacity: 0.72; cursor: default; }
    .petCard .petPreview{
      width:100%;
      height: 72px;
      min-height: 72px;
      display:flex;
      align-items:center;
      justify-content:center;
      overflow:hidden;
      flex-shrink:0;
      padding: 4px 0;
      box-sizing: border-box;
    }
    .petCard .petPreview > *{
      max-width: 100%;
      max-height: 64px;
    }
    .petCard .label{
      font-size: 11px;
      color: #ddd;
      text-align:center;
      line-height:1.2;
      min-height: 2.4em;
      display:flex;
      align-items:center;
      justify-content:center;
      width:100%;
    }
    .petCard .petStatHint{
      min-height: 2.6em;
      display:flex;
      align-items:center;
      justify-content:center;
      text-align:center;
      width:100%;
    }
    .petCardFooter{
      margin-top: auto;
      width: 100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 6px;
    }
    .petCard .price{
      font-size: 11px;
      color: #f0c040;
      font-weight:700;
    }
    .petCard .tagOwned{
      font-size: 10px;
      color: #8fe6b5;
      font-weight:700;
      width: 100%;
      text-align: center;
      line-height: 1.3;
      min-height: 2.6em;
      margin-top: auto;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .petCard.locked .tagOwned{
      color: #ffb4b4;
    }
    .petBuyBtn{
      margin-top: 2px;
      padding: 4px 8px;
      border-radius: 8px;
      border: 1px solid rgba(240,192,64,0.45);
      background: rgba(240,192,64,0.12);
      color: #ffe08a;
      font-size: 10px;
      font-weight:700;
      cursor:pointer;
      font-family: inherit;
    }
    .petBuyBtn:disabled{
      opacity:0.45;
      cursor:not-allowed;
    }
    .petEquipBtn{
      width: 100%;
      padding: 5px 8px;
      border-radius: 8px;
      border: 1px solid rgba(143,230,181,0.5);
      background: rgba(143,230,181,0.14);
      color: #b8f0d0;
      font-family: inherit;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
    }
    .petEquipBtn:hover{ filter: brightness(1.08); }
    .petEquipBtn:disabled{
      opacity: 0.55;
      cursor: default;
      filter: none;
      border-color: rgba(143,230,181,0.28);
      background: rgba(143,230,181,0.08);
      color: #8fe6b5;
    }
    .petFuseBtn{
      width: 100%;
      padding: 5px 8px;
      border-radius: 8px;
      border: 1px solid rgba(180,140,255,0.45);
      background: rgba(180,140,255,0.12);
      color: #d6c4ff;
      font-family: inherit;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
    }
    .petFuseBtn:hover{ filter: brightness(1.08); }
    .petFuseBtn:disabled{
      opacity: 0.45;
      cursor: not-allowed;
      filter: none;
    }
    .petAlbumBtn{
      width: 100%;
      padding: 5px 8px;
      border-radius: 8px;
      border: 1px solid rgba(126,214,255,0.45);
      background: rgba(126,214,255,0.12);
      color: #b8e7ff;
      font-family: inherit;
      font-size: 10px;
      font-weight: 700;
      cursor: pointer;
    }
    .petAlbumBtn:hover{ filter: brightness(1.08); }
    .petAlbumBtn:disabled{
      opacity: 0.45;
      cursor: not-allowed;
      filter: none;
    }
    .fusePickCard{
      position: relative;
      transition: opacity .85s ease, transform .85s ease, filter .85s ease;
    }
    .fusePickCard.selected{
      border-color: rgba(180,140,255,0.75);
      background: rgba(180,140,255,0.14);
      box-shadow: 0 0 0 1px rgba(180,140,255,0.25);
    }
    .fusePickCard.fusing{
      opacity: 0;
      transform: scale(0.72) translateY(8px);
      filter: blur(2px);
      pointer-events: none;
    }
    .fuseSuccessBanner{
      display:none;
      text-align:center;
      padding: 18px 12px;
      border-radius: 12px;
      border: 1px solid rgba(0,200,83,0.35);
      background: rgba(0,200,83,0.10);
      margin-top: 10px;
      animation: fusePop .45s ease;
    }
    .fuseSuccessBanner.show{ display:block; }
    @keyframes fusePop{
      from { opacity: 0; transform: scale(0.92); }
      to { opacity: 1; transform: scale(1); }
    }
    .candyRow{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.10);
      background: rgba(255,255,255,0.04);
      margin-bottom: 8px;
    }
    .candyRow .candyPreview{
      width: 48px;
      height: 48px;
      display:flex;
      align-items:center;
      justify-content:center;
      flex-shrink:0;
    }
    .candyRow.locked .candyPreview,
    .candyRow.locked .candyPreview .petSprite{
      filter: brightness(0) saturate(1) !important;
      opacity: 0.55;
    }
    .candyRow.locked .candyMeta strong{ color: var(--muted); }
    .candyRow .candyMeta{ flex:1; min-width:0; }
    .candyRow .candyCount{
      font-weight:700;
      color: #f0c040;
      white-space: nowrap;
    }
    .petCatalogSection{
      margin-top:14px;
      width:100%;
    }
    .petAlbumEntry{
      display:flex;
      align-items:center;
      gap:14px;
      width:100%;
      text-align:left;
      cursor:pointer;
      padding:14px 16px;
      margin-bottom:12px;
      border-radius:14px;
      border:1px solid rgba(126,214,255,0.32);
      background:
        linear-gradient(125deg, rgba(36,92,120,0.38), rgba(18,28,40,0.72) 55%, rgba(25,195,125,0.12)),
        radial-gradient(420px 120px at 90% 0%, rgba(126,214,255,0.16), transparent 70%);
      box-shadow: 0 10px 28px rgba(0,0,0,0.28);
      color: var(--text);
      font: inherit;
      transition: transform .18s ease, border-color .18s ease, filter .18s ease;
    }
    .petAlbumEntry:hover{
      transform: translateY(-1px);
      border-color: rgba(126,214,255,0.55);
      filter: brightness(1.04);
    }
    .petAlbumEntry.evoReady{
      border-color: rgba(240,192,64,0.48);
      background:
        linear-gradient(125deg, rgba(48,92,120,0.38), rgba(18,28,40,0.72) 45%, rgba(240,192,64,0.14)),
        radial-gradient(420px 120px at 90% 0%, rgba(126,214,255,0.16), transparent 70%);
    }
    .petAlbumEntry.evoReady:hover{
      border-color: rgba(240,192,64,0.65);
    }
    .petAlbumEntryIcon{
      width:48px;
      height:48px;
      border-radius:12px;
      flex-shrink:0;
      display:grid;
      place-items:center;
      border:1px solid rgba(126,214,255,0.35);
      background: rgba(8,16,28,0.55);
      font-size:22px;
      line-height:1;
    }
    .petAlbumEntryBody{ flex:1; min-width:0; }
    .petAlbumEntryTitle{
      font-size:15px;
      font-weight:780;
      letter-spacing:0.3px;
    }
    .petAlbumEntryMeta{
      margin-top:4px;
      font-size:12px;
      color: var(--muted);
      line-height:1.35;
    }
    .petAlbumEntryMeta strong.evoReadyText{
      color: #ffe08a;
      font-weight: 750;
    }
    .petAlbumEntryEvoBadge{
      flex-shrink:0;
      padding:7px 11px;
      border-radius:999px;
      border:1px solid rgba(240,192,64,0.52);
      background: rgba(240,192,64,0.16);
      color:#ffe08a;
      font-size:11px;
      font-weight:780;
      letter-spacing:0.2px;
      white-space:nowrap;
      animation: petAlbumEvoPulse 2.2s ease-in-out infinite;
    }
    .petAlbumEntryEvoBadge[hidden]{ display:none; }
    @keyframes petAlbumEvoPulse{
      0%, 100% { box-shadow: 0 0 0 0 rgba(240,192,64,0.25); }
      50% { box-shadow: 0 0 14px 2px rgba(240,192,64,0.22); }
    }
    .petAlbumEntryProgress{
      flex-shrink:0;
      min-width:64px;
      text-align:center;
      padding:8px 10px;
      border-radius:12px;
      border:1px solid rgba(25,195,125,0.35);
      background: rgba(25,195,125,0.12);
    }
    .petAlbumEntryProgress strong{
      display:block;
      font-size:16px;
      font-weight:800;
      color:#9dffc8;
    }
    .petAlbumEntryProgress span{
      font-size:10px;
      color: var(--muted);
      letter-spacing:0.4px;
      text-transform:uppercase;
    }
    .petAlbumEntryChevron{
      flex-shrink:0;
      color: rgba(126,214,255,0.85);
      font-size:18px;
      opacity:0.85;
    }
    .petAlbumEntry.raidRulesEntry{
      border-color: rgba(255,160,70,0.48);
      background:
        linear-gradient(125deg, rgba(120,52,18,0.42), rgba(18,28,40,0.72) 55%, rgba(255,120,40,0.14)),
        radial-gradient(420px 120px at 90% 0%, rgba(255,180,80,0.18), transparent 70%);
      box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 0 18px rgba(255,120,40,0.08);
    }
    .petAlbumEntry.raidRulesEntry:hover{
      border-color: rgba(255,180,90,0.62);
    }
    .petAlbumEntry.raidRulesEntry .petAlbumEntryIcon{
      border-color: rgba(255,160,70,0.45);
      background: rgba(40,18,8,0.55);
    }
    .petAlbumEntry.raidRulesEntry .petAlbumEntryTitle{
      color:#ffe08a;
      letter-spacing:0.4px;
    }
    .petAlbumEntry.raidRulesEntry .petAlbumEntryProgress{
      border-color: rgba(255,120,60,0.45);
      background: rgba(255,120,40,0.16);
    }
    .petAlbumEntry.raidRulesEntry .petAlbumEntryProgress strong{
      color:#ffd080;
      font-size:18px;
    }
    .petAlbumEntry.raidRulesEntry .petAlbumEntryChevron{
      color: rgba(255,180,90,0.9);
    }
    .petAlbumEntry.puchamonShopEntry{
      margin: 8px 2px 10px;
      border-color: rgba(90,220,160,0.48);
      background:
        linear-gradient(125deg, rgba(18,70,48,0.42), rgba(18,28,40,0.72) 55%, rgba(80,220,150,0.14)),
        radial-gradient(420px 120px at 90% 0%, rgba(120,255,180,0.16), transparent 70%);
      box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 0 18px rgba(80,220,140,0.08);
    }
    .petAlbumEntry.puchamonShopEntry:hover{
      border-color: rgba(120,255,180,0.62);
    }
    .petAlbumEntry.puchamonShopEntry .petAlbumEntryIcon{
      border-color: rgba(90,220,160,0.45);
      background: rgba(8,40,28,0.55);
    }
    .petAlbumEntry.puchamonShopEntry .petAlbumEntryTitle{
      color:#9dffc8;
      letter-spacing:0.4px;
    }
    .petAlbumEntry.puchamonShopEntry .petAlbumEntryProgress{
      border-color: rgba(90,220,160,0.45);
      background: rgba(80,220,140,0.16);
    }
    .nexoEntryTag{
      display: inline-block;
      margin-left: 6px;
      font-size: 9px;
      font-weight: 800;
      letter-spacing: 0.08em;
      padding: 2px 7px;
      border-radius: 999px;
      vertical-align: middle;
      background: #ffe08a;
      color: #1a1204;
    }
    .nexoEntryTag.is-call{
      background: #5cffc8;
      color: #041018;
    }
    .puchamonShopList{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
      gap:10px;
      margin: 12px 0 0;
    }
    .puchamonShopList .shopSectionLabel{
      grid-column: 1 / -1;
      margin: 4px 0 0;
      font-size: 11px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: rgba(180,210,220,0.75);
    }
    .puchamonShopCard{
      display:flex;
      flex-direction:column;
      gap:6px;
      padding:10px;
      border-radius:12px;
      border:1px solid rgba(120,160,180,0.22);
      background: linear-gradient(165deg, rgba(20,32,42,0.95), rgba(12,18,26,0.92));
      min-height: 168px;
    }
    .puchamonShopCard .potionIcon{
      width:56px; height:56px; object-fit:contain; align-self:center;
      filter: drop-shadow(0 4px 10px rgba(0,0,0,0.35));
    }
    .puchamonShopCard.is-inc.is-super .potionIcon{ filter: hue-rotate(85deg) saturate(1.2) brightness(1.05); }
    .puchamonShopCard.is-inc.is-mega .potionIcon{ filter: hue-rotate(160deg) saturate(1.25) brightness(1.05); }
    .puchamonShopCard.is-inc.is-hiper .potionIcon{ filter: hue-rotate(210deg) saturate(1.35) brightness(1.08); }
    .puchamonShopCard.is-inc.is-ultra .potionIcon{ filter: hue-rotate(25deg) saturate(1.45) brightness(1.08); }
    .puchamonShopCard.is-inc.is-legendary .potionIcon{ filter: hue-rotate(-15deg) saturate(1.7) brightness(1.12) drop-shadow(0 0 8px rgba(255,200,80,0.45)); }
    .puchamonShopCard.is-super{ border-color: rgba(120,255,180,0.28); }
    .puchamonShopCard.is-mega{ border-color: rgba(120,220,255,0.32); }
    .puchamonShopCard.is-hiper{ border-color: rgba(160,140,255,0.35); }
    .puchamonShopCard.is-ultra{ border-color: rgba(255,224,138,0.38); }
    .puchamonShopCard.is-legendary{ border-color: rgba(255,180,60,0.5); box-shadow:0 0 16px rgba(255,160,40,0.12); }
    .puchamonShopCard .potionTitle{ font-size:12px; font-weight:700; color:#d8ecff; text-align:center; }
    .puchamonShopCard .potionDesc{ font-size:10px; color:var(--muted); line-height:1.35; min-height:2.6em; text-align:center; }
    .puchamonShopCard .potionPrice{ font-size:12px; color:#f0c040; font-weight:700; text-align:center; }
    .puchamonShopCard .miniBtn{ width:100%; margin-top:auto; }
    .puchamonShopName{ font-weight: 800; }
    .puchamonShopPrice{ color:#ffe08a; font-weight: 800; font-variant-numeric: tabular-nums; }
    .pokedexIncubateBtn{
      border:1px solid rgba(125,255,200,0.4);
      background: linear-gradient(135deg, rgba(20,60,48,0.9), rgba(12,28,40,0.95));
      color:#c8ffe8;
      font-weight:800;
      font-size:12px;
      letter-spacing:0.04em;
      text-transform:uppercase;
      padding:8px 12px;
      border-radius:10px;
      cursor:pointer;
    }
    .pokedexIncubateBtn:hover{ filter:brightness(1.08); border-color:rgba(125,255,200,0.7); }
    .pokedexIncubateBtn[hidden]{ display:none !important; }
    .incLabHead{
      display:flex; align-items:flex-start; justify-content:space-between; gap:12px; flex-wrap:wrap;
      margin-bottom:4px;
    }
    .incLabHead .modalTitle{ margin:0; flex:1; min-width:140px; }
    .incGuideBtn{
      border: 1px solid rgba(255,224,138,0.65);
      background:
        linear-gradient(135deg, rgba(255,200,80,0.35), rgba(40,90,70,0.75) 55%, rgba(80,40,120,0.45));
      color: #fff6d0;
      font-weight: 900;
      font-size: 11px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      border-radius: 12px;
      padding: 10px 14px;
      cursor: pointer;
      box-shadow: 0 0 16px rgba(255,200,80,0.28), 0 6px 16px rgba(0,0,0,0.35);
      animation: incGuidePulse 1.8s ease-in-out infinite;
      flex-shrink: 0;
    }
    .incGuideBtn:hover{ filter: brightness(1.12); }
    .incGuideBtn.on{
      animation: none;
      border-color: rgba(125,255,200,0.7);
      color: #d8ffe8;
    }
    @keyframes incGuidePulse{
      0%,100%{ box-shadow: 0 0 12px rgba(255,200,80,0.22), 0 6px 16px rgba(0,0,0,0.35); }
      50%{ box-shadow: 0 0 22px rgba(255,220,120,0.45), 0 6px 18px rgba(0,0,0,0.4); }
    }
    .incGuidePane{
      display:none;
      margin: 0 0 14px;
      padding: 12px 14px;
      border-radius: 14px;
      border: 1px solid rgba(255,224,138,0.28);
      background: rgba(12,24,20,0.72);
      max-height: min(42vh, 360px);
      overflow: auto;
    }
    .incGuidePane.on{ display:block; }
    .incGuidePane h4{
      margin: 12px 0 6px;
      font-size: 13px;
      color: #ffe08a;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .incGuidePane h4:first-child{ margin-top:0; }
    .incGuidePane ul{ margin: 0; padding-left: 18px; }
    .incGuidePane li{ margin: 0 0 6px; line-height: 1.35; }
    .incGuidePane p{ margin: 0 0 8px; color: rgba(220,235,240,0.9); }
    .incLabSectionTitle{
      font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase;
      color:rgba(200,255,230,0.75); margin:4px 0 10px;
    }
    .incCapRow{
      display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;
    }
    .incCap{
      position:relative;
      border:1px solid rgba(255,255,255,0.12);
      border-radius:14px;
      padding:12px 8px 10px;
      background:rgba(0,0,0,0.28);
      text-align:center;
      cursor:pointer;
      min-height:150px;
      transition: border-color .2s, filter .2s, transform .15s, box-shadow .2s;
      touch-action:manipulation;
    }
    .incCap img.incCapArt{
      width:88px; height:88px; object-fit:contain; display:block; margin:0 auto 6px;
      image-rendering:auto;
    }
    .incCap.is-off{
      filter: grayscale(1) brightness(0.72);
      opacity:0.55;
    }
    .incCap.is-on{
      filter:none; opacity:1;
      border-color:rgba(125,255,200,0.45);
      box-shadow:0 0 18px rgba(80,220,160,0.18);
    }
    .incCap.is-super.is-on{ border-color:rgba(120,255,180,0.45); box-shadow:0 0 16px rgba(80,220,140,0.18); }
    .incCap.is-mega.is-on{ border-color:rgba(120,220,255,0.5); box-shadow:0 0 18px rgba(80,180,255,0.2); }
    .incCap.is-hiper.is-on{ border-color:rgba(170,140,255,0.5); box-shadow:0 0 18px rgba(140,100,255,0.22); }
    .incCap.is-ultra.is-on{ border-color:rgba(255,220,120,0.55); box-shadow:0 0 18px rgba(255,200,80,0.22); }
    .incCap.is-legendary.is-on{ border-color:rgba(255,170,50,0.65); box-shadow:0 0 22px rgba(255,160,40,0.28); }
    .incCap.is-drop{ outline:2px dashed rgba(125,255,200,0.85); transform:scale(1.02); }
    .incCap.is-shake{ animation:incCapShake .35s ease; }
    @keyframes incCapShake{
      0%,100%{ transform:translateX(0); }
      25%{ transform:translateX(-4px); }
      75%{ transform:translateX(4px); }
    }
    .incCap .incCapName{ font-weight:800; font-size:13px; }
    .incCap .incCapHint{ font-size:11px; color:rgba(200,220,230,0.7); margin-top:2px; min-height:28px; }
    .incCap img.incCapEgg{
      position:absolute; left:50%; top:42px; transform:translateX(-50%);
      width:36px; height:36px; object-fit:contain; pointer-events:none;
      filter:drop-shadow(0 2px 4px rgba(0,0,0,0.45));
    }
    .incCap .incCapBar{
      height:7px; border-radius:99px; background:rgba(255,255,255,0.12); overflow:hidden; margin-top:8px;
    }
    .incCap .incCapBar > i{
      display:block; height:100%; width:0%;
      background:linear-gradient(90deg,#7dffc8,#ffe08a);
    }
    .incCapArt.tint-super{ filter: hue-rotate(85deg) saturate(1.2) brightness(1.05); }
    .incCapArt.tint-mega{ filter: hue-rotate(160deg) saturate(1.25) brightness(1.05); }
    .incCapArt.tint-hiper{ filter: hue-rotate(210deg) saturate(1.35) brightness(1.08); }
    .incCapArt.tint-ultra{ filter: hue-rotate(25deg) saturate(1.45) brightness(1.08); }
    .incCapArt.tint-legendary{ filter: hue-rotate(-15deg) saturate(1.7) brightness(1.12); }
    .incCap.is-off .incCapArt.tint-super,
    .incCap.is-off .incCapArt.tint-mega,
    .incCap.is-off .incCapArt.tint-hiper,
    .incCap.is-off .incCapArt.tint-ultra,
    .incCap.is-off .incCapArt.tint-legendary{ filter: grayscale(1) brightness(0.72); }
    .incCap.is-on .incCapArt.tint-super{ filter: hue-rotate(85deg) saturate(1.2) brightness(1.05); }
    .incCap.is-on .incCapArt.tint-mega{ filter: hue-rotate(160deg) saturate(1.25) brightness(1.05); }
    .incCap.is-on .incCapArt.tint-hiper{ filter: hue-rotate(210deg) saturate(1.35) brightness(1.08); }
    .incCap.is-on .incCapArt.tint-ultra{ filter: hue-rotate(25deg) saturate(1.45) brightness(1.08); }
    .incCap.is-on .incCapArt.tint-legendary{ filter: hue-rotate(-15deg) saturate(1.7) brightness(1.12) drop-shadow(0 0 10px rgba(255,180,60,0.55)); }
    .puchamonHatchStage{
      position:relative;
      min-height:180px;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      overflow:hidden;
    }
    .puchamonHatchStage.is-common{ --hx:#9ad0ff; }
    .puchamonHatchStage.is-uncommon{ --hx:#7dffc4; }
    .puchamonHatchStage.is-rare{ --hx:#c9a0ff; }
    .puchamonHatchStage.is-legendary,
    .puchamonHatchStage.is-ultra{ --hx:#ffd56a; }
    .puchamonHatchStage::before{
      content:"";
      position:absolute; inset:-20%;
      background: radial-gradient(circle at 50% 45%, color-mix(in srgb, var(--hx, #9ad0ff) 45%, transparent), transparent 62%);
      opacity:0;
      animation: hatchAura 1.8s ease forwards;
      pointer-events:none;
    }
    .puchamonHatchStage.is-rare::before,
    .puchamonHatchStage.is-legendary::before{ animation-duration: 2.4s; }
    .puchamonHatchStage img{
      max-width:120px; max-height:120px;
      animation: hatchPop .9s cubic-bezier(.2,1.2,.3,1) both;
      filter: drop-shadow(0 0 12px color-mix(in srgb, var(--hx, #9ad0ff) 55%, transparent));
      z-index:1;
    }
    .puchamonHatchStage.is-legendary img,
    .puchamonHatchStage.is-ultra-inc img{
      animation: hatchPopEpic 1.35s cubic-bezier(.15,1.3,.25,1) both;
      filter: drop-shadow(0 0 22px rgba(255,200,80,0.75));
    }
    .puchamonHatchBurst{
      position:absolute; inset:0; pointer-events:none; z-index:0;
    }
    .puchamonHatchBurst i{
      position:absolute; left:50%; top:48%; width:6px; height:6px; border-radius:50%;
      background: var(--hx, #9ad0ff);
      animation: hatchSpark 1.1s ease-out forwards;
      opacity:0;
    }
    @keyframes hatchAura{
      0%{ opacity:0; transform:scale(.6); }
      40%{ opacity:.9; }
      100%{ opacity:.35; transform:scale(1.1); }
    }
    @keyframes hatchPop{
      0%{ transform:scale(.4) rotate(-8deg); opacity:0; }
      60%{ transform:scale(1.12) rotate(2deg); opacity:1; }
      100%{ transform:scale(1); }
    }
    @keyframes hatchPopEpic{
      0%{ transform:scale(.2) rotate(-18deg); opacity:0; filter:brightness(2); }
      45%{ transform:scale(1.22) rotate(4deg); opacity:1; }
      70%{ transform:scale(.96) rotate(-2deg); }
      100%{ transform:scale(1); }
    }
    @keyframes hatchSpark{
      0%{ opacity:0; transform: translate(-50%,-50%) scale(.4); }
      25%{ opacity:1; }
      100%{ opacity:0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0); }
    }
    .incEggRow{
      display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; min-height:72px;
    }
    .incEggChip{
      width:72px; border:1px solid rgba(255,255,255,0.14); border-radius:12px;
      padding:8px 6px; text-align:center; background:rgba(0,0,0,0.22);
      cursor:grab; user-select:none; touch-action:manipulation;
    }
    .incEggChip:active{ cursor:grabbing; }
    .incEggChip img{ width:44px; height:44px; object-fit:contain; display:block; margin:0 auto 4px; pointer-events:none; }
    .incEggChip strong{ display:block; font-size:11px; }
    .incEggChip.is-dragging{ opacity:0.45; }
    .incLabActions{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
    .incEggPickOverlay{
      position:absolute; inset:0; background:rgba(0,0,0,0.55);
      display:flex; align-items:flex-end; justify-content:center;
      border-radius:inherit; z-index:5;
    }
    .incEggPickSheet{
      width:100%; max-width:420px; background:#14202c; border-radius:16px 16px 0 0;
      padding:14px 14px 18px; border:1px solid rgba(255,255,255,0.12);
    }
    .incEggPickSheet button{
      display:block; width:100%; margin:6px 0 0; text-align:left;
      padding:10px 12px; border-radius:10px; border:1px solid rgba(255,255,255,0.14);
      background:rgba(255,255,255,0.06); color:inherit; font-weight:700; cursor:pointer;
    }
    .incEggPickSheet button:hover{ background:rgba(125,255,200,0.12); }
    .puchamonHatchStage{ text-align:center; padding:18px 8px; min-height:180px; }
    .puchamonHatchStage img{ width:140px; height:140px; object-fit:contain; }
    @media (max-width: 620px){
      .incCapRow{ grid-template-columns:1fr; }
      .incCap{ min-height:130px; }
    }
    .petAlbumEntry.gearGuideEntry{
      border-color: rgba(196,140,255,0.55);
      background:
        linear-gradient(125deg, rgba(72,28,110,0.5), rgba(28,16,40,0.78) 52%, rgba(255,186,80,0.16)),
        radial-gradient(420px 120px at 90% 0%, rgba(255,200,110,0.2), transparent 70%);
      box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 0 18px rgba(180,100,255,0.14);
      margin-bottom: 10px;
    }
    .petAlbumEntry.gearGuideEntry:hover{
      border-color: rgba(255,210,140,0.7);
    }
    .petAlbumEntry.gearGuideEntry .petAlbumEntryIcon{
      border-color: rgba(210,160,255,0.5);
      background: rgba(40,16,60,0.55);
    }
    .petAlbumEntry.gearGuideEntry .petAlbumEntryTitle{
      color: #f3d6ff;
      letter-spacing: 0.4px;
    }
    .petAlbumEntry.gearGuideEntry .petAlbumEntryProgress{
      border-color: rgba(255,186,80,0.5);
      background: rgba(180,80,255,0.18);
    }
    .petAlbumEntry.gearGuideEntry .petAlbumEntryProgress strong{
      color: #ffd27a;
      font-size: 16px;
    }
    .petAlbumEntry.gearGuideEntry .petAlbumEntryChevron{
      color: rgba(255,210,140,0.92);
    }
    .petAlbumEntry.recycleEntry{
      border-color: rgba(34,197,94,0.45);
      background:
        linear-gradient(125deg, rgba(20,80,48,0.48), rgba(16,24,20,0.78) 52%, rgba(250,204,21,0.12)),
        radial-gradient(420px 120px at 90% 0%, rgba(74,222,128,0.18), transparent 70%);
      margin-bottom: 10px;
    }
    .petAlbumEntry.recycleEntry:hover{ border-color: rgba(74,222,128,0.7); }
    .petAlbumEntry.recycleEntry .petAlbumEntryIcon{
      border-color: rgba(74,222,128,0.45);
      background: rgba(8,32,18,0.55);
    }
    .petAlbumEntry.recycleEntry .petAlbumEntryTitle{ color: #bbf7d0; }
    .petAlbumEntry.recycleEntry .petAlbumEntryProgress{
      border-color: rgba(250,204,21,0.45);
      background: rgba(34,197,94,0.16);
    }
    .petAlbumEntry.recycleEntry .petAlbumEntryProgress strong{ color: #fde047; }
    #patronAnimBg{
      display:none;
      position:fixed;
      inset:0;
      z-index:0;
      overflow:hidden;
      pointer-events:none;
    }
    #patronAnimBg.on{ display:block; z-index:0; }
    body.patron-anim-bg #cosmoBgFx{ display:none !important; }
    #patronAnimBg video, #patronAnimBg img{
      width:100%;
      height:100%;
      object-fit:cover;
      object-position:center;
    }
    .wrap{ position:relative; z-index:1; }
    .gearGuideModal{
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: 100%;
      margin: 0;
      border-radius: 0;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      border: 1px solid rgba(196,140,255,0.4);
      box-shadow: none;
      box-sizing: border-box;
    }
    #gearGuideOverlay{
      padding: 0;
      align-items: stretch;
      width: 100%;
      height: 100%;
      min-height: 100vh;
      min-height: 100dvh;
    }
    .gearGuideHead{
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      margin-bottom: 8px;
    }
    .gearGuideHead .modalTitle{ margin: 0; flex: 1; }
    .gearGuideSplit{
      display: grid;
      grid-template-columns: minmax(220px, 32%) 1fr;
      gap: 12px;
      flex: 1;
      min-height: 0;
    }
    .gearGuideCol{
      min-height: 0;
      overflow: auto;
      border: 1px solid rgba(196,140,255,0.22);
      border-radius: 12px;
      padding: 10px;
      background: rgba(20,8,32,0.45);
    }
    .gearGuideEqRow, .gearGuideCard{
      display: grid;
      grid-template-columns: 52px 1fr;
      gap: 8px;
      align-items: center;
      padding: 8px;
      border-radius: 10px;
      border: 1px solid rgba(196,140,255,0.16);
      margin-bottom: 8px;
      cursor: pointer;
      background: rgba(0,0,0,0.2);
    }
    .gearGuideCard.on, .gearGuideEqRow.hl{
      border-color: rgba(255,210,120,0.7);
      box-shadow: 0 0 12px rgba(180,90,255,0.25);
    }
    .gearGuideIcon{
      width: 48px;
      height: 48px;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(0,0,0,0.35);
      overflow: hidden;
    }
    .gearGuidePreview{
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,186,80,0.35);
      background: rgba(60,20,90,0.35);
      color: #f3e6ff;
      font-size: 14px;
      line-height: 1.4;
    }
    .gearGuidePreview .up{ color: #b6f5c8; font-weight: 800; }
    .gearGuidePreview .dn{ color: #ffb3a8; font-weight: 800; }
    .gearGuideSuggested{
      margin-bottom: 10px;
      padding: 10px;
      border-radius: 10px;
      border: 1px solid rgba(255,186,80,0.4);
      background: rgba(40,16,50,0.5);
    }
    #maintenanceOverlay{
      display: none;
      position: fixed;
      inset: 0;
      z-index: 100000;
      background: #0a0608;
    }
    #maintenanceOverlay.on{ display: block; }
    #maintenanceOverlay img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      background: #0a0608;
    }
    @media (max-width: 820px){
      .gearGuideSplit{ grid-template-columns: 1fr; }
    }
    .gearGuideLead{
      color: #d8c6ee;
      font-size: 14px;
      line-height: 1.45;
      margin: 0 0 12px;
    }
    .gearGuideFilters{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin: 0 0 12px;
    }
    .gearGuideChip{
      border: 1px solid rgba(196,140,255,0.4);
      background: rgba(50,20,80,0.45);
      color: #f3e6ff;
      border-radius: 999px;
      padding: 5px 10px;
      font-size: 13px;
      font-weight: 700;
      cursor: pointer;
    }
    .gearGuideChip.on{
      border-color: rgba(255,210,120,0.75);
      background: rgba(180,90,255,0.35);
      color: #ffe9b8;
    }
    .gearGuideClassHead{
      margin: 16px 0 8px;
      font-size: 15px;
      font-weight: 800;
      color: #ffd27a;
      letter-spacing: 0.04em;
      text-transform: uppercase;
    }
    .gearGuideRow{
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 8px 12px;
      padding: 8px 0;
      border-bottom: 1px solid rgba(196,140,255,0.16);
    }
    .gearGuideName{
      font-weight: 750;
      color: #f4eaff;
    }
    .gearGuideMeta{
      font-size: 13px;
      color: #cbb6e6;
      margin-top: 2px;
    }
    .gearGuideCmp{
      text-align: right;
      font-size: 13px;
      color: #e8d4ff;
      white-space: nowrap;
    }
    .gearGuideCmp .up{ color: #b6f5c8; }
    .gearGuideCmp .dn{ color: #ffb3a8; }
    .gearGuideCta{
      margin-top: 14px;
      padding: 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,186,80,0.45);
      background: rgba(90,40,130,0.35);
      color: #ffe9c4;
      font-size: 14px;
      line-height: 1.4;
    }
    .petAlbumEntry.duelRivalsEntry{
      border-color: rgba(80,190,255,0.48);
      background:
        linear-gradient(125deg, rgba(18,60,90,0.5), rgba(18,28,40,0.72) 55%, rgba(80,190,255,0.12)),
        radial-gradient(420px 120px at 90% 0%, rgba(80,190,255,0.16), transparent 70%);
      box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 0 18px rgba(80,190,255,0.08);
      margin-bottom: 12px;
    }
    .petAlbumEntry.duelRivalsEntry:hover{
      border-color: rgba(120,210,255,0.7);
    }
    .petAlbumEntry.duelRivalsEntry .petAlbumEntryIcon{
      border-color: rgba(80,190,255,0.45);
      background: rgba(8,28,44,0.55);
    }
    .petAlbumEntry.duelRivalsEntry .petAlbumEntryTitle{
      color:#9ee7ff;
      letter-spacing:0.4px;
    }
    .petAlbumEntry.duelRivalsEntry .petAlbumEntryProgress{
      border-color: rgba(80,190,255,0.45);
      background: rgba(80,190,255,0.14);
    }
    .petAlbumEntry.duelRivalsEntry .petAlbumEntryProgress strong{
      color:#9ee7ff;
      font-size:18px;
    }
    .petAlbumEntry.duelRivalsEntry .petAlbumEntryChevron{
      color: rgba(120,210,255,0.9);
    }
    .duelRivalsModal{
      max-width: min(920px, 96vw);
      width: 100%;
      max-height: min(88vh, 900px);
      overflow: auto;
    }
    .duelRivalsLead{
      color: var(--muted, #9aa8bc);
      font-size: 13px;
      line-height: 1.45;
      margin: 0 0 14px;
    }
    .duelRivalsCols{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      margin-bottom: 14px;
    }
    @media (max-width: 720px){
      .duelRivalsCols{ grid-template-columns: 1fr; }
    }
    .duelRivalsCol{
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      background: rgba(0,0,0,0.22);
      padding: 10px 12px 12px;
      min-height: 160px;
    }
    .duelRivalsCol h3{
      margin: 0 0 8px;
      font-size: 13px;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #9ee7ff;
    }
    .duelRivalsCol.cd h3{ color: #ffb4a8; }
    .duelRivalsList{
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 240px;
      overflow: auto;
    }
    .duelRivalRow{
      display: flex;
      justify-content: space-between;
      gap: 8px;
      align-items: baseline;
      padding: 7px 8px;
      border-radius: 8px;
      background: rgba(255,255,255,0.04);
      border: 1px solid rgba(255,255,255,0.06);
      font-size: 13px;
    }
    .duelRivalRow strong{ color: #e8eef8; }
    .duelRivalRow .meta{ color: #9aa8bc; font-size: 15px; text-align: right; }
    .duelRivalRow.canChallenge{
      align-items: center;
      cursor: pointer;
    }
    .duelRivalRow.canChallenge:hover{
      border-color: rgba(180,120,255,0.4);
      background: rgba(120,70,200,0.12);
    }
    .duelRivalRetar{
      flex: 0 0 auto;
      font-size: 14px;
      font-weight: 700;
      padding: 6px 10px;
      border-radius: 6px;
      border: 1px solid rgba(180,120,255,0.45);
      background: rgba(120,70,200,0.25);
      color: #f0e4ff;
      cursor: pointer;
    }
    .duelRivalsEmpty{
      color: #9aa8bc;
      font-size: 15px;
      padding: 10px 4px;
    }
    .duelRivalsPotionsBlock{
      border: 1px solid rgba(255,255,255,0.1);
      border-radius: 12px;
      background: rgba(0,0,0,0.18);
      padding: 10px 12px 12px;
      margin-bottom: 10px;
    }
    .duelRivalsPotionsBlock .label{
      font-size: 12px;
      text-transform: uppercase;
      letter-spacing: 0.05em;
      color: #ffe08a;
      margin-bottom: 6px;
    }
    .petAlbumEntry.camaraEntry{
      border-color: rgba(145,70,255,0.5);
      background:
        linear-gradient(125deg, rgba(70,32,120,0.42), rgba(18,28,40,0.72) 55%, rgba(25,195,125,0.12));
      box-shadow: 0 10px 28px rgba(0,0,0,0.28), 0 0 18px rgba(145,70,255,0.08);
    }
    .petAlbumEntry.camaraEntry:hover{
      border-color: rgba(180,140,255,0.7);
    }
    .petAlbumEntry.camaraEntry .petAlbumEntryIcon{
      border-color: rgba(145,70,255,0.45);
      background: rgba(28,12,48,0.55);
    }
    .petAlbumEntry.camaraEntry .petAlbumEntryTitle{
      color:#c9b6ff;
      letter-spacing:0.4px;
    }
    .petAlbumEntry.camaraEntry .petAlbumEntryProgress{
      border-color: rgba(145,70,255,0.45);
      background: rgba(145,70,255,0.16);
    }
    .petAlbumEntry.camaraEntry .petAlbumEntryProgress strong{
      color:#d4c2ff;
      font-size:16px;
    }
    .petAlbumEntry.camaraEntry .petAlbumEntryChevron{
      color: rgba(180,140,255,0.9);
    }
    .modal.camaraModal{
      width: min(840px, 94vw);
      max-height: min(90vh, 920px);
      overflow: auto;
      text-align: left;
      position: relative;
    }
    .camaraModal .camaraWeek{
      font-size: 12px;
      color: var(--muted, #aab3c5);
      margin: 0 0 10px;
    }
    .camaraModal .camaraWeek b{ color:#ffd76a; }
    .camaraModal .camaraHint{
      font-size: 11px;
      color:#c9b6ff;
      margin: 0 0 8px;
    }
    .camaraModal .camaraRowTitle{
      display:flex;
      justify-content:space-between;
      gap:8px;
      margin:14px 0 8px;
      font-size:13px;
    }
    .camaraModal .camaraRowTitle span{ font-size:11px; color:var(--muted, #aab3c5); }
    .camaraModal .camaraSlots{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:12px;
    }
    .camaraModal .camaraSlot{
      min-height:168px;
      border-radius:14px;
      border:1px solid rgba(255,255,255,0.10);
      background:rgba(255,255,255,.04);
      padding:12px;
      position:relative;
      overflow:hidden;
      transition:border-color .2s, box-shadow .2s;
    }
    .camaraModal .camaraSlot.locked{ cursor:default; opacity:.78; background:rgba(255,255,255,.03); }
    .camaraModal .camaraSlot.sealed{
      cursor:pointer;
      background:
        radial-gradient(120px 80px at 50% 30%, rgba(145,70,255,.28), transparent 70%),
        linear-gradient(160deg, rgba(40,20,70,.7), rgba(8,12,20,.95));
      border-color: rgba(145,70,255,.35);
    }
    .camaraModal.mode-week .camaraSlot.sealed{ cursor:default; }
    .camaraModal.mode-open .camaraSlot.sealed:hover{
      border-color:rgba(255,215,106,.5);
      box-shadow:0 0 22px rgba(145,70,255,.25);
    }
    .camaraModal .camaraSlot.selected{
      border-color:#19c37d;
      box-shadow:0 0 0 1px #19c37d inset, 0 0 18px rgba(25,195,125,.25);
    }
    .camaraModal .camaraSlot.best{ border-color: rgba(255,215,106,.45); }
    .camaraModal .camaraSlot.legendary.revealed{
      border-color:#ffd76a;
      box-shadow:0 0 28px rgba(255,215,106,.45), inset 0 0 40px rgba(255,180,40,.12);
    }
    .camaraModal .camaraCover{
      position:absolute; inset:0; display:flex; flex-direction:column;
      align-items:center; justify-content:center; gap:8px; padding:12px; z-index:2;
    }
    .camaraModal .camaraSlot.revealed .camaraCover{ opacity:0; visibility:hidden; pointer-events:none; }
    .camaraModal .camaraSlot.opening .camaraSealMark{
      animation: camaraSealSpin .7s cubic-bezier(.2,.8,.2,1) forwards;
    }
    .camaraModal .camaraSlot.opening .camaraSealHint{
      animation: camaraFadeOut .45s ease forwards;
    }
    @keyframes camaraSealSpin{
      0%{ transform:scale(1) rotate(0deg); opacity:1; }
      70%{ transform:scale(1.12) rotate(320deg); opacity:1; }
      100%{ transform:scale(.2) rotate(360deg); opacity:0; }
    }
    @keyframes camaraFadeOut{ to{ opacity:0; } }
    .camaraModal .camaraLoot{
      opacity:0; visibility:hidden; transform:translateY(8px);
    }
    .camaraModal .camaraSlot.revealed .camaraLoot{
      visibility:visible;
      opacity:1;
      transform:none;
      animation: camaraLootIn .55s ease forwards;
    }
    .camaraModal .camaraPickHint{
      margin-top:10px;
      font-size:10px;
      color:var(--muted, #aab3c5);
      text-align:center;
    }
    .camaraModal .camaraPickHint.on{
      color:#19c37d;
      font-weight:700;
    }
    @keyframes camaraLootIn{
      from{ opacity:0; transform:translateY(10px) scale(.96); }
      to{ opacity:1; transform:none; }
    }
    .camaraModal .camaraSealN{
      font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#c9b6ff;
    }
    .camaraModal .camaraSealMark{
      width:54px; height:54px; border-radius:50%;
      border:2px solid rgba(255,215,106,.55);
      display:grid; place-items:center; font-size:20px; color:#ffd76a;
      box-shadow:0 0 18px rgba(145,70,255,.35);
      animation: camaraPulseSeal 2.4s ease-in-out infinite;
    }
    .camaraModal .camaraSlot.locked .camaraSealMark{
      border-color:rgba(255,255,255,.18); color:#889; box-shadow:none; animation:none;
    }
    .camaraModal .camaraSealHint{ font-size:10px; color:var(--muted, #aab3c5); text-align:center; }
    .camaraModal .camaraMiniBar{
      width:78%; height:7px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden;
    }
    .camaraModal .camaraMiniBar > i{
      display:block; height:100%; background:linear-gradient(90deg,#9146ff,#19c37d);
    }
    @keyframes camaraPulseSeal{
      0%,100%{ box-shadow:0 0 10px rgba(145,70,255,.25); }
      50%{ box-shadow:0 0 22px rgba(255,215,106,.35); }
    }
    .camaraModal .camaraLoot .n{ font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted, #aab3c5); }
    .camaraModal .camaraLoot .tier{ position:absolute; top:10px; right:10px; font-size:10px; color:#ffd76a; }
    .camaraModal .camaraLoot .item{ margin-top:22px; font-size:13px; font-weight:700; }
    .camaraModal .camaraLoot .meta{ margin-top:6px; font-size:11px; color:var(--muted, #aab3c5); }
    .camaraModal .camaraActions{ display:flex; gap:10px; flex-wrap:wrap; margin-top:16px; }
    .camaraModal .camaraBtn{
      font-family:inherit; font-weight:700; border:0; border-radius:10px; padding:11px 16px; cursor:pointer;
    }
    .camaraModal .camaraBtnG{ background:linear-gradient(135deg,#19c37d,#0fa968); color:#04140c; }
    .camaraModal .camaraBtnG:disabled{ opacity:.4; cursor:not-allowed; }
    .camaraModal .camaraBtnS{
      background:rgba(255,255,255,.08); color:inherit; border:1px solid rgba(255,255,255,0.10);
    }
    .camaraModal .camaraClaim{
      display:none; margin-top:12px; padding:12px; border-radius:12px;
      border:1px dashed rgba(255,215,106,.4); background:rgba(255,215,106,.06); font-size:12px;
    }
    .camaraModal .camaraClaim.on{ display:block; }
    .camaraModal .camaraClaim b{ color:#ffd76a; }
    .camaraModal .camaraLegFx{
      display:none; pointer-events:none; position:absolute; inset:0; z-index:8; overflow:hidden; border-radius:18px;
    }
    .camaraModal .camaraLegFx.on{ display:block; animation: camaraLegHold 2.4s ease forwards; }
    .camaraModal .camaraLegFx .flash{
      position:absolute; inset:0;
      background:radial-gradient(circle at 50% 55%, rgba(255,215,106,.55), rgba(145,70,255,.2) 42%, transparent 70%);
      animation: camaraLegFlash 2.2s ease forwards;
    }
    .camaraModal .camaraLegFx .rays{
      position:absolute; left:50%; top:55%; width:180%; height:180%; transform:translate(-50%,-50%);
      background:repeating-conic-gradient(from 0deg, rgba(255,215,106,.18) 0 8deg, transparent 8deg 22deg);
      animation: camaraLegSpin 2.4s linear forwards;
    }
    .camaraModal .camaraLegFx .word{
      position:absolute; left:50%; top:46%; transform:translate(-50%,-50%);
      font-size:28px; letter-spacing:.18em; color:#fff4c4; text-shadow:0 0 22px #ffd76a;
      animation: camaraLegWord 2.2s ease forwards;
    }
    @keyframes camaraLegHold{ 0%,80%{ opacity:1; } 100%{ opacity:0; } }
    @keyframes camaraLegFlash{ 0%{ opacity:0; } 15%{ opacity:1; } 100%{ opacity:0; } }
    @keyframes camaraLegSpin{ to{ transform:translate(-50%,-50%) rotate(220deg) scale(1.15); } }
    @keyframes camaraLegWord{
      0%{ opacity:0; transform:translate(-50%,-50%) scale(.6); }
      18%{ opacity:1; transform:translate(-50%,-50%) scale(1.08); }
      70%{ opacity:1; }
      100%{ opacity:0; transform:translate(-50%,-50%) scale(1.2); }
    }
    .camaraModal.mode-week .camaraClaimBtns{ display:none; }
    @media (max-width:720px){
      .camaraModal .camaraSlots{ grid-template-columns:1fr; }
    }
    .modal.raidRulesModal{
      width: min(680px, 92vw);
      max-height: min(86vh, 760px);
      overflow: auto;
      text-align: left;
    }
    .raidRulesModal .raidRulesLead{
      margin: 0 0 14px;
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,160,70,0.42);
      background: rgba(255,120,40,0.12);
      color: #ffe08a;
      font-size: 13px;
      line-height: 1.45;
      font-weight: 700;
    }
    .raidRulesModal .raidRulesBlock{
      margin-bottom: 14px;
    }
    .raidRulesModal .raidRulesBlock:last-child{ margin-bottom: 0; }
    .raidRulesModal .raidRulesLabel{
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: #ffd080;
      margin-bottom: 6px;
    }
    .raidRulesModal .raidRulesCmd{
      display: inline-block;
      margin-bottom: 6px;
      padding: 4px 10px;
      border-radius: 6px;
      background: rgba(255,180,60,0.18);
      border: 1px solid rgba(255,180,60,0.42);
      color: #ffe08a;
      font-weight: 800;
      font-size: 13px;
    }
    .raidRulesModal .raidRulesText{
      font-size: 13px;
      line-height: 1.45;
      color: var(--text);
    }
    .raidRulesModal .raidRulesWarn{
      color: #ffb0a0;
      font-weight: 700;
    }
    .raidRulesModal .raidRulesBits{ color: #ffd56a; font-weight: 700; }
    .raidRulesModal .raidRulesRevive{ color: #7ec8ff; font-weight: 700; }
    .raidRulesModal ul{
      margin: 6px 0 0;
      padding-left: 18px;
      font-size: 13px;
      line-height: 1.45;
    }
    .raidRulesModal li{ margin-bottom: 4px; }
    .raidRulesModal .raidRulesMods{
      margin-top: 8px;
      padding-top: 8px;
      border-top: 1px dashed rgba(255,255,255,0.12);
    }
    .raidRulesModal .raidRulesMods .raidRulesLabel{ color: #ff9090; }
    .raidRulesModal .raidRulesMods .raidRulesCmd{
      background: rgba(255,80,80,0.14);
      border-color: rgba(255,120,120,0.4);
      color: #ffb0b0;
    }
    .albumPetCard{
      position:relative;
      cursor:default;
      min-height: 0;
      height: auto;
      overflow: visible;
      padding: 12px 10px 10px;
      gap: 8px;
    }
    .albumPetCard.discovered{
      border-color: rgba(126,214,255,0.35);
      background: rgba(126,214,255,0.08);
    }
    .albumPetCard.locked{
      opacity:0.78;
      border-style:dashed;
    }
    .albumPetCard.locked .petPreview{
      filter: brightness(0) saturate(1);
      opacity:0.55;
    }
    .albumVipBadge{
      position:absolute;
      top:6px;
      left:50%;
      transform:translateX(-50%);
      z-index:2;
      padding:3px 8px;
      border-radius:999px;
      font-size:9px;
      font-weight:800;
      letter-spacing:0.04em;
      text-transform:uppercase;
      white-space:nowrap;
      color:#fff8e7;
      background:linear-gradient(135deg, rgba(180,120,20,0.95), rgba(120,70,10,0.92));
      border:1px solid rgba(255,210,120,0.55);
      box-shadow:0 2px 8px rgba(0,0,0,0.35);
      pointer-events:none;
    }
    .albumPetCard.vipExclusive{
      border-color: rgba(255,196,90,0.42);
      background: rgba(255,180,60,0.07);
    }
    .albumPetCard .petPreview{
      height: 80px;
      min-height: 80px;
    }
    .albumPetCard .label{
      font-size: 12px;
      min-height: 1.4em;
      word-break: break-word;
    }
    .albumPetCard .albumMeta{
      margin-top:2px;
      font-size:11px;
      color: var(--muted);
      line-height:1.4;
      text-align:center;
      width:100%;
      word-break: break-word;
    }
    .albumPetCard .albumMeta strong{
      color:#9dffc8;
      font-weight:750;
    }
    .albumPetCard .albumCandy{
      color:#ffe08a;
    }
    .albumPetCard .albumActions{
      margin-top: auto;
      width: 100%;
      display:flex;
      flex-direction:column;
      gap: 6px;
      padding-top: 4px;
    }
    .albumEvolveBtn,
    .albumEvoLineBtn{
      margin-top: 0;
      width: 100%;
      min-height: 32px;
      padding: 7px 8px;
      border-radius: 8px;
      font-family: inherit;
      font-size: 11px;
      font-weight: 700;
      cursor: pointer;
      line-height: 1.25;
      white-space: normal;
      word-break: break-word;
      text-align: center;
      box-sizing: border-box;
    }
    .albumEvolveBtn{
      border: 1px solid rgba(240,192,64,0.5);
      background: rgba(240,192,64,0.14);
      color: #ffe08a;
    }
    .albumEvolveBtn:hover{ filter: brightness(1.08); }
    .albumEvoLineBtn{
      border: 1px solid rgba(126,214,255,0.4);
      background: rgba(126,214,255,0.10);
      color: #b8e7ff;
    }
    .albumEvoLineBtn:hover{ filter: brightness(1.08); }
    .albumEvoLineBtn:disabled{
      opacity: 0.45;
      cursor: not-allowed;
      filter: none;
    }
    .albumGrid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(min(100%, 148px), 1fr));
      gap: 14px;
      margin-top: 6px;
      max-height: min(58vh, 520px);
      overflow: auto;
      padding: 2px 4px 8px 2px;
      align-items: stretch;
    }
    #tabBtnPokedex[hidden]{ display:none !important; }
    .pokedexAlbumShell{
      display:flex;
      flex-direction:column;
      min-height:0;
      gap: 10px;
      padding: 12px;
      border-radius: 20px;
      background:
        radial-gradient(80% 60% at 20% 0%, rgba(60,180,255,0.22), transparent 55%),
        linear-gradient(180deg, #0a1a33 0%, #06101f 100%);
      border: 1px solid rgba(90,200,255,0.28);
      box-shadow: inset 0 0 40px rgba(20,80,140,0.25), 0 12px 28px rgba(0,0,0,0.35);
    }
    .pokedexTopBar{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      color: #d7f4ff;
    }
    .pokedexBrand{
      display:flex;
      align-items:center;
      gap: 10px;
      min-width: 0;
    }
    .pokedexLed{
      width: 12px;
      height: 12px;
      border-radius: 50%;
      flex-shrink: 0;
      background: radial-gradient(circle at 35% 30%, #d7ffea, #22c55e 45%, #166534);
      box-shadow: 0 0 10px rgba(74,222,128,0.85);
      border: 2px solid rgba(255,255,255,0.35);
    }
    .pokedexBrand h3{
      margin: 0;
      font-size: 18px;
      letter-spacing: 0.16em;
      text-transform: uppercase;
      font-weight: 800;
      text-shadow: 0 0 12px rgba(80,200,255,0.45);
    }
    .pokedexBrand small{
      display:block;
      font-size: 10px;
      letter-spacing: 0.16em;
      opacity: 0.72;
      font-weight: 700;
    }
    .pokedexCount{
      font-variant-numeric: tabular-nums;
      font-weight: 800;
      font-size: 13px;
      white-space: nowrap;
      background: rgba(0,20,40,0.45);
      border: 1px solid rgba(90,200,255,0.28);
      padding: 6px 10px;
      border-radius: 999px;
    }
    .pokedexAlbumShell .fxAlbumProgress{ margin: 0; }
    .pokedexAlbumShell .fxAlbumProgressTop{ color: #c8e8ff; }
    .pokedexAlbumShell #pokedexProgressHint{ color: #c8e8ff; }
    .pokedexAlbumShell #pokedexProgressPct{ color: #9dffc8; }
    .pokedexAlbumShell .fxAlbumProgressFill{
      background: linear-gradient(90deg, #2a9aaa, #5ad0ff 40%, #7dffc8 70%, #2a9aaa);
      background-size: 220% 100%;
      box-shadow: 0 0 10px rgba(90,200,255,0.35);
      animation: pokedexBarShine 2.6s linear infinite;
    }
    @keyframes pokedexBarShine {
      0% { background-position: 0% 0; }
      100% { background-position: 220% 0; }
    }
    .pokedexTopTools{
      display:flex;
      align-items:center;
      justify-content:flex-end;
      gap: 8px;
      flex-wrap: wrap;
    }
    .pokedexFilterWrap{ position: relative; }
    .pokedexFilterBtn{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      border-radius: 999px;
      border: 1px solid rgba(90,200,255,0.35);
      background: rgba(8,24,44,0.75);
      color: #d7f4ff;
      font: inherit;
      font-weight: 800;
      font-size: 12px;
      padding: 6px 12px;
      cursor: pointer;
    }
    .pokedexFilterMenu{
      display:none;
      position:absolute;
      right: 0;
      top: calc(100% + 6px);
      z-index: 8;
      min-width: 180px;
      padding: 6px;
      border-radius: 12px;
      border: 1px solid rgba(90,200,255,0.28);
      background: #0a1628;
      box-shadow: 0 12px 28px rgba(0,0,0,0.4);
    }
    .pokedexFilterMenu.open{ display:flex; flex-direction:column; gap: 4px; }
    .pokedexFilterMenu button{
      text-align:left;
      border: 0;
      background: transparent;
      color: #e8f4ff;
      font: inherit;
      font-weight: 700;
      font-size: 12px;
      padding: 7px 10px;
      border-radius: 8px;
      cursor: pointer;
    }
    .pokedexFilterMenu button:hover,
    .pokedexFilterMenu button.on{ background: rgba(90,200,255,0.16); }
    .pokedexRarityHead{
      grid-column: 1 / -1;
      display:flex;
      align-items:center;
      gap: 8px;
      margin: 6px 2px 0;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #c8e8ff;
    }
    .pokedexRarityHead .n{ font-variant-numeric: tabular-nums; opacity: .8; letter-spacing: 0; }
    .pokedexRarityHead .line{
      flex:1;
      height: 2px;
      border-radius: 999px;
      background: linear-gradient(90deg, transparent, currentColor, transparent);
      background-size: 42% 100%;
      background-repeat: no-repeat;
      opacity: 0.55;
      animation: pokedexLineShine 2.8s ease-in-out infinite;
    }
    @keyframes pokedexLineShine {
      0% { background-position: -40% 0; }
      100% { background-position: 140% 0; }
    }
    .pokedexRarityHead.is-common{ color:#9dffc8; }
    .pokedexRarityHead.is-uncommon{ color:#7ec8ff; }
    .pokedexRarityHead.is-rare{ color:#d4b0ff; }
    .pokedexRarityHead.is-legendary{ color:#ffe08a; }
    .pokedexFlavor{
      margin: 8px 0 0;
      font-size: 12px;
      line-height: 1.4;
      color: #c8e8ff;
      max-width: 240px;
      opacity: 0.92;
    }
    .pokedexCaughtAt{
      margin-top: 6px;
      font-size: 11px;
      color: #9dffc8;
    }
    .pokedexFooter{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      margin-top: 8px;
    }
    .pokedexFooterHint{
      margin: 0;
      font-size: 12px;
      color: #c8e8ff;
      opacity: 0.9;
    }
    .pokedexRewardsBtn{
      flex-shrink: 0;
      border-radius: 999px;
      border: 1px solid rgba(255,210,100,0.45);
      background: rgba(255,180,60,0.16);
      color: #ffe08a;
      font: inherit;
      font-weight: 800;
      font-size: 12px;
      padding: 8px 14px;
      cursor: pointer;
    }
    .pokedexRewardsList{ display:flex; flex-direction:column; gap: 8px; text-align:left; }
    .pokedexRewardRow{
      display:flex;
      justify-content:space-between;
      gap: 10px;
      padding: 8px 10px;
      border-radius: 10px;
      border: 1px solid rgba(90,200,255,0.18);
      background: rgba(8,16,28,0.6);
      font-size: 13px;
    }
    .pokedexRewardRow.done{ border-color: rgba(125,255,180,0.35); }
    .pokedexHud{
      display:grid;
      grid-template-columns: minmax(180px, 0.42fr) minmax(0, 1fr);
      gap: 10px;
      min-height: 0;
    }
    .pokedexStage{
      position: relative;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:flex-end;
      min-height: 320px;
      padding: 16px 12px 14px;
      border-radius: 16px;
      overflow: hidden;
      background:
        radial-gradient(ellipse 70% 50% at 50% 78%, rgba(40,160,255,0.28), transparent 70%),
        linear-gradient(180deg, rgba(12,40,70,0.35), rgba(6,14,28,0.9));
      border: 2px solid rgba(90,200,255,0.22);
    }
    .pokedexStage.is-common{
      border-color: rgba(125,255,180,0.72);
      box-shadow: 0 0 0 1px rgba(125,255,180,0.18), 0 0 22px rgba(80,220,140,0.22);
      background:
        radial-gradient(ellipse 70% 50% at 50% 78%, rgba(40,200,120,0.28), transparent 70%),
        linear-gradient(180deg, rgba(8,40,24,0.4), rgba(6,14,28,0.92));
    }
    .pokedexStage.is-uncommon{
      border-color: rgba(90,210,255,0.78);
      box-shadow: 0 0 0 1px rgba(90,210,255,0.2), 0 0 22px rgba(60,180,255,0.28);
      background:
        radial-gradient(ellipse 70% 50% at 50% 78%, rgba(40,160,255,0.32), transparent 70%),
        linear-gradient(180deg, rgba(12,40,70,0.4), rgba(6,14,28,0.92));
    }
    .pokedexStage.is-rare{
      border-color: rgba(190,130,255,0.78);
      box-shadow: 0 0 0 1px rgba(190,130,255,0.22), 0 0 22px rgba(160,90,255,0.28);
      background:
        radial-gradient(ellipse 70% 50% at 50% 78%, rgba(140,80,255,0.32), transparent 70%),
        linear-gradient(180deg, rgba(32,16,56,0.45), rgba(6,14,28,0.92));
    }
    .pokedexStage.is-legendary{
      border-color: rgba(255,214,90,0.85);
      box-shadow: 0 0 0 1px rgba(255,214,90,0.25), 0 0 24px rgba(255,200,80,0.32);
      background:
        radial-gradient(ellipse 70% 50% at 50% 78%, rgba(255,180,50,0.28), transparent 70%),
        linear-gradient(180deg, rgba(48,36,8,0.45), rgba(6,14,28,0.92));
    }
    .pokedexStageArt{
      position: relative;
      z-index: 1;
      width: 184px;
      height: 184px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .pokedexStageArt.is-tiny{
      width: 220px;
      height: 220px;
    }
    .pokedexStageArt img{
      width: 100%;
      height: 100%;
      object-fit: contain;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
      filter: drop-shadow(0 8px 16px rgba(0,0,0,0.45));
    }
    .pokedexStageUnknown{
      font-size: 88px;
      font-weight: 800;
      color: rgba(180,210,240,0.35);
      line-height: 1;
    }
    .pokedexPad{
      width: 188px;
      height: 28px;
      margin-top: -6px;
      border-radius: 50%;
      background:
        radial-gradient(circle at 50% 40%, rgba(255,80,80,0.55), transparent 42%),
        radial-gradient(circle, rgba(80,180,255,0.45), transparent 70%);
      box-shadow: 0 0 24px rgba(60,180,255,0.35);
      z-index: 0;
    }
    .pokedexStageMeta{
      z-index: 1;
      text-align:center;
      margin-top: 8px;
    }
    .pokedexStageId{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      padding: 4px 10px;
      border-radius: 999px;
      background: rgba(0,0,0,0.45);
      border: 1px solid rgba(255,255,255,0.12);
      font-family: ui-monospace, Consolas, monospace;
      font-weight: 800;
      font-size: 12px;
      color: #e8f7ff;
    }
    .pokedexStageName{
      margin-top: 6px;
      font-size: 18px;
      font-weight: 800;
      color: #fff;
      letter-spacing: 0.04em;
    }
    .pokedexStageStats{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 4px 8px;
      margin-top: 8px;
      font-size: 11px;
      color: #c8e8ff;
      width: 100%;
      max-width: 220px;
    }
    .pokedexStageStats span{ display:flex; justify-content:space-between; gap: 6px; }
    .pokedexMoves{ margin: 8px 0 0; font-size: 11px; color:#9dffc8; line-height:1.35; text-align:center; max-width: 240px; }
    .pokedexRarity{
      margin-top: 6px;
      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #ffe08a;
    }
    .pokedexRarity.is-common{ color:#9dffc8; }
    .pokedexRarity.is-uncommon{ color:#7ec8ff; }
    .pokedexRarity.is-rare{ color:#d4b0ff; }
    .pokedexRarity.is-legendary{ color:#ffe08a; }
    .pokedexDust{
      margin-top: 8px;
      font-size: 11px;
      color: #c8e8ff;
    }
    .pokedexEvoRow{
      display:flex;
      flex-wrap:wrap;
      justify-content:center;
      gap: 6px;
      margin-top: 8px;
      max-width: 260px;
    }
    .pokedexEvoBtn{
      padding: 5px 10px;
      border-radius: 999px;
      border: 1px solid rgba(255,224,138,0.4);
      background: rgba(80,50,10,0.45);
      color: #ffe9b0;
      font-size: 11px;
      font-weight: 800;
      cursor: pointer;
    }
    .pokedexEvoBtn:disabled{
      opacity: 0.45;
      cursor: not-allowed;
    }
    .pokedexBag{
      padding: 0 2px;
    }
    .pokedexCraftGrid{
      display:grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 8px;
    }
    .pokedexCraftCard{
      display:flex;
      flex-direction:column;
      gap: 6px;
      padding: 10px 10px 9px;
      border-radius: 14px;
      border: 1px solid rgba(90,200,255,0.22);
      background:
        linear-gradient(180deg, rgba(16,48,78,0.55), rgba(6,14,28,0.78));
    }
    .pokedexCraftCard.is-mega{
      border-color: rgba(125,255,200,0.28);
    }
    .pokedexCraftCard.is-ultra{
      border-color: rgba(255,224,138,0.32);
    }
    .pokedexCraftHead{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 6px;
    }
    .pokedexCraftIcon{
      width:36px;
      height:36px;
      object-fit:contain;
      flex-shrink:0;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,0.4));
    }
    .pokedexCraftName{
      font-size: 12px;
      font-weight: 800;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #d7f4ff;
    }
    .pokedexCraftCard.is-mega .pokedexCraftName{ color: #c8ffe8; }
    .pokedexCraftCard.is-ultra .pokedexCraftName{ color: #ffe9b0; }
    .pokedexCraftStock{
      font-size: 13px;
      font-weight: 800;
      font-variant-numeric: tabular-nums;
      color: #fff;
    }
    .pokedexCraftFrag{
      font-size: 11px;
      color: #9ec8e8;
    }
    .pokedexCraftTrack{
      height: 7px;
      border-radius: 999px;
      background: rgba(0,0,0,0.4);
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
    }
    .pokedexCraftTrack > span{
      display:block;
      height: 100%;
      width: 0;
      border-radius: inherit;
      background: linear-gradient(90deg, #2a9aaa, #5ad0ff);
      box-shadow: 0 0 8px rgba(90,200,255,0.4);
    }
    .pokedexCraftCard.is-mega .pokedexCraftTrack > span{
      background: linear-gradient(90deg, #1f8a62, #7dffc8);
      box-shadow: 0 0 8px rgba(125,255,200,0.35);
    }
    .pokedexCraftCard.is-ultra .pokedexCraftTrack > span{
      background: linear-gradient(90deg, #c9a227, #ffe08a);
      box-shadow: 0 0 8px rgba(255,224,138,0.35);
    }
    .pokedexCraftBtn{
      margin-top: 2px;
      width: 100%;
      padding: 5px 8px;
      border-radius: 999px;
      border: 1px solid rgba(90,200,255,0.35);
      background: rgba(40,140,200,0.18);
      color: #e8f7ff;
      font: inherit;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      cursor: pointer;
    }
    .pokedexCraftBtn:hover:not(:disabled){ filter: brightness(1.12); }
    .pokedexCraftBtn:disabled{
      opacity: 0.4;
      cursor: default;
    }
    .pokedexCraftCard.is-mega .pokedexCraftBtn{
      border-color: rgba(125,255,200,0.35);
      background: rgba(40,160,110,0.18);
    }
    .pokedexCraftCard.is-ultra .pokedexCraftBtn{
      border-color: rgba(255,224,138,0.4);
      background: rgba(180,140,40,0.18);
    }
    @media (max-width: 720px){
      .pokedexCraftGrid{ grid-template-columns: 1fr; }
    }
    .pokedexStage .kantoTypes{ margin-top: 6px; }
    .pokedexScreen{
      background:
        linear-gradient(180deg, rgba(10,28,48,0.75), rgba(6,12,22,0.92));
      border: 1px solid rgba(90,200,255,0.18);
      border-radius: 16px;
      overflow: hidden;
      min-width: 0;
    }
    .pokedexSlotGrid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      gap: 8px;
      max-height: min(58vh, 520px);
      overflow: auto;
      padding: 10px;
    }
    .pokedexSlot{
      position: relative;
      aspect-ratio: 1;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      gap: 2px;
      padding: 4px;
      border-radius: 12px;
      border: 1px solid rgba(255,255,255,0.08);
      background: rgba(8,16,28,0.72);
      cursor: pointer;
      color: inherit;
      font: inherit;
    }
    .pokedexSlot:hover{ border-color: rgba(90,200,255,0.4); }
    .pokedexSlot.discovered.is-common:hover{ border-color: rgba(157,255,200,0.9); }
    .pokedexSlot.discovered.is-uncommon:hover{ border-color: rgba(126,200,255,0.95); }
    .pokedexSlot.discovered.is-rare:hover{ border-color: rgba(212,176,255,0.95); }
    .pokedexSlot.discovered.is-legendary:hover{ border-color: rgba(255,224,138,0.95); }
    .pokedexSlot.selected{
      box-shadow: 0 0 0 2px rgba(255,255,255,0.45), 0 0 14px rgba(90,200,255,0.28);
    }
    .pokedexSlot.locked .pokedexSlotArt{
      filter: brightness(0) saturate(1);
      opacity: 0.4;
    }
    .pokedexSlot.locked .pokedexSlotArt::after{
      content: "?";
      position:absolute;
      inset: 0;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size: 28px;
      font-weight: 800;
      color: rgba(200,220,240,0.45);
      filter: none;
    }
    .pokedexSlot.discovered{
      border-width: 2px;
    }
    .pokedexSlot.discovered.is-common{
      border-color: rgba(125,255,180,0.7);
      background: rgba(12,36,24,0.78);
    }
    .pokedexSlot.discovered.is-uncommon{
      border-color: rgba(90,210,255,0.72);
      background: rgba(10,28,48,0.8);
    }
    .pokedexSlot.discovered.is-rare{
      border-color: rgba(190,130,255,0.72);
      background: rgba(28,16,48,0.8);
    }
    .pokedexSlot.discovered.is-legendary{
      border-color: rgba(255,214,90,0.8);
      background: rgba(40,32,8,0.8);
      box-shadow: 0 0 10px rgba(255,200,80,0.22);
    }
    .pokedexSlot.locked.is-common{ border-color: rgba(125,255,180,0.2); }
    .pokedexSlot.locked.is-uncommon{ border-color: rgba(90,210,255,0.22); }
    .pokedexSlot.locked.is-rare{ border-color: rgba(190,130,255,0.22); }
    .pokedexSlot.locked.is-legendary{ border-color: rgba(255,214,90,0.22); }
    .pokedexSlotExtra{
      position:absolute;
      top: 4px;
      right: 4px;
      min-width: 18px;
      height: 16px;
      padding: 0 4px;
      border-radius: 8px;
      font-size: 9px;
      font-weight: 800;
      line-height: 16px;
      background: rgba(90,200,255,0.9);
      color: #041018;
    }
    .nexoModal{
      width: min(760px, 100%);
      padding: 0;
      overflow: hidden;
      border: 1px solid rgba(90,200,255,0.28);
      background:
        radial-gradient(ellipse at 50% -10%, rgba(90,180,255,0.18), transparent 42%),
        radial-gradient(ellipse at 80% 120%, rgba(160,80,255,0.12), transparent 40%),
        linear-gradient(180deg, #0a1628 0%, #070d16 100%);
      color: #e8f4ff;
    }
    .nexoModal .hint, .nexoModal input, .nexoModal button{ font-family: inherit; }
    .nexoHead{
      display:flex;
      align-items:center;
      gap: 10px;
      padding: 14px 16px 10px;
      border-bottom: 1px solid rgba(90,200,255,0.16);
    }
    .nexoHeadBrand{ display:flex; align-items:center; gap: 10px; flex:1; min-width:0; }
    .nexoHeadBrand h3{
      margin: 0;
      font-size: 18px;
      letter-spacing: 0.12em;
    }
    .nexoHeadBrand small{ display:block; color:#8eb4d4; font-size:11px; letter-spacing:0.04em; }
    .nexoLed{
      width: 12px; height: 12px; border-radius: 50%;
      background: #5cffc8;
      box-shadow: 0 0 10px #5cffc8;
      flex-shrink: 0;
    }
    #nexoOverlay.is-filament .nexoLed{
      background: #d4a6ff;
      box-shadow: 0 0 12px #c080ff;
    }
    .nexoGuideBtn{
      border: 1px solid rgba(255,224,138,0.45);
      background: rgba(80,50,10,0.5);
      color: #ffe9b0;
      font-weight: 800;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-radius: 999px;
      padding: 7px 14px;
      cursor: pointer;
    }
    .nexoGuideBtn:hover{ filter: brightness(1.1); }
    .nexoBody{ padding: 12px 16px 16px; max-height: min(78vh, 720px); overflow: auto; }
    .nexoLead{
      margin: 0 0 12px;
      color: #9ec4e4;
      font-size: 13px;
    }
    .nexoField{
      display:flex;
      gap: 8px;
      margin: 0 0 12px;
      align-items: stretch;
    }
    .nexoSearch{
      flex: 1;
      min-width: 0;
      position: relative;
    }
    .nexoModal input[type="text"]{
      width: 100%;
      box-sizing: border-box;
      border-radius: 12px;
      border: 1px solid rgba(90,200,255,0.28);
      background: rgba(6,14,26,0.92);
      color: #e8f7ff;
      padding: 10px 12px;
      font-size: 14px;
      outline: none;
    }
    .nexoModal input[type="text"]::placeholder{ color: #6a88a4; }
    .nexoModal input[type="text"]:focus{
      border-color: rgba(125,220,255,0.7);
      box-shadow: 0 0 0 3px rgba(90,200,255,0.15);
    }
    .nexoSearchMenu{
      display:none;
      position:absolute;
      left:0; right:0; top: 100%;
      z-index: 5;
      max-height: 220px;
      overflow: auto;
      margin-top: 4px;
      border-radius: 12px;
      border: 1px solid rgba(90,200,255,0.3);
      background: #0b1828;
      box-shadow: 0 12px 32px rgba(0,0,0,0.45);
    }
    .nexoSearchMenu.on{ display:block; }
    .nexoSearchHit{
      display:flex;
      align-items:center;
      gap: 8px;
      width: 100%;
      text-align: left;
      border: 0;
      background: transparent;
      color: inherit;
      padding: 8px 10px;
      cursor: pointer;
      font: inherit;
    }
    .nexoSearchHit:hover, .nexoSearchHit.is-on{ background: rgba(90,200,255,0.12); }
    .nexoSearchHit img{ width: 32px; height: 32px; object-fit: contain; }
    .nexoCta{
      border-radius: 12px;
      border: 1px solid rgba(90,255,200,0.4);
      background: linear-gradient(180deg, rgba(40,140,110,0.45), rgba(16,60,50,0.8));
      color: #d8fff0;
      font-weight: 800;
      padding: 0 16px;
      cursor: pointer;
      white-space: nowrap;
      min-height: 42px;
    }
    .nexoCta:disabled{ opacity: 0.55; cursor: default; }
    .nexoStage{
      display:grid;
      grid-template-columns: 1fr auto 1fr;
      gap: 10px;
      align-items: stretch;
      margin: 10px 0;
    }
    .nexoCapsule{
      position: relative;
      border-radius: 18px;
      padding: 14px 10px;
      min-height: 168px;
      border: 1px solid rgba(90,200,255,0.28);
      background:
        radial-gradient(ellipse at 50% 20%, rgba(90,200,255,0.16), transparent 55%),
        linear-gradient(180deg, rgba(12,28,48,0.95), rgba(6,12,22,0.98));
      text-align:center;
    }
    #nexoOverlay.is-filament .nexoCapsule{
      border-color: rgba(210,160,255,0.55);
      box-shadow: 0 0 22px rgba(160,80,255,0.28);
    }
    .nexoCapsule img{ width: 80px; height: 80px; object-fit: contain; image-rendering: pixelated; }
    .nexoCapsule .nexoNick{ font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: #8eb4d4; }
    .nexoCapsule .nexoMon{ font-weight: 800; margin-top: 6px; font-size: 15px; }
    .nexoBeam{
      align-self:center;
      width: 28px;
      height: 88px;
      border-radius: 999px;
      background: linear-gradient(180deg, transparent, #7ec8ff, transparent);
      box-shadow: 0 0 16px rgba(90,200,255,0.55);
      animation: nexoPulse 1.4s ease-in-out infinite;
    }
    #nexoOverlay.is-filament .nexoBeam{
      background: linear-gradient(180deg, transparent, #e0b0ff, #ffe08a, transparent);
      box-shadow: 0 0 18px rgba(200,140,255,0.7);
    }
    @keyframes nexoPulse{ 50%{ opacity: 0.4; transform: scaleY(1.12); } }
    .nexoRitual{
      position: relative;
      height: 220px;
      margin: 8px 0 12px;
      border-radius: 18px;
      overflow: hidden;
      border: 1px solid rgba(90,200,255,0.25);
      background: radial-gradient(ellipse at 50% 50%, rgba(90,180,255,0.2), #050a12 70%);
    }
    .nexoRitual.is-filament{
      border-color: rgba(210,160,255,0.5);
      background: radial-gradient(ellipse at 50% 50%, rgba(180,80,255,0.28), #0a0614 70%);
    }
    .nexoRitualCap{
      position:absolute;
      top: 50%;
      width: 96px;
      height: 96px;
      margin-top: -48px;
      border-radius: 50%;
      border: 2px solid rgba(125,220,255,0.5);
      display:flex;
      align-items:center;
      justify-content:center;
      background: rgba(8,20,36,0.85);
      animation: nexoCapSpin 2.4s ease-in-out;
    }
    .nexoRitual.is-filament .nexoRitualCap{ border-color: #e0b0ff; box-shadow: 0 0 20px rgba(180,100,255,0.45); }
    .nexoRitualCap.left{ left: 12%; }
    .nexoRitualCap.right{ right: 12%; }
    .nexoRitualCap img{ width: 72px; height: 72px; object-fit: contain; }
    .nexoRitualRay{
      position:absolute;
      left: 22%;
      right: 22%;
      top: 50%;
      height: 6px;
      margin-top: -3px;
      border-radius: 999px;
      background: linear-gradient(90deg, #5cffc8, #7ec8ff, #ffe08a);
      transform: scaleX(0);
      animation: nexoRay 2.4s ease forwards;
      box-shadow: 0 0 18px #7ec8ff;
    }
    .nexoRitualFly{
      position:absolute;
      top: 50%;
      width: 56px;
      height: 56px;
      margin-top: -28px;
      pointer-events: none;
    }
    .nexoRitualFly.a{ left: 18%; animation: nexoFlyA 2.4s ease forwards; }
    .nexoRitualFly.b{ right: 18%; animation: nexoFlyB 2.4s ease forwards; }
    .nexoRitualFly img{ width: 56px; height: 56px; object-fit: contain; filter: drop-shadow(0 0 8px #fff); }
    .nexoRitualFlash{
      position:absolute; inset:0;
      background: radial-gradient(circle, rgba(255,255,255,0.55), transparent 55%);
      opacity: 0;
      animation: nexoFlash 2.4s ease forwards;
    }
    @keyframes nexoCapSpin{ 40%{ transform: rotate(-12deg) scale(1.05);} 100%{ transform: rotate(0) scale(1);} }
    @keyframes nexoRay{ 20%{ transform: scaleX(0);} 55%{ transform: scaleX(1);} 100%{ transform: scaleX(1); opacity: 0.3;} }
    @keyframes nexoFlyA{ 0%{ transform: translateX(0) scale(1);} 100%{ transform: translateX(220%) scale(0.7); opacity: 0.2;} }
    @keyframes nexoFlyB{ 0%{ transform: translateX(0) scale(1);} 100%{ transform: translateX(-220%) scale(0.7); opacity: 0.2;} }
    @keyframes nexoFlash{ 0%,55%{ opacity:0;} 70%{ opacity:1;} 100%{ opacity:0;} }
    .nexoWarn{ color: #ffd27a; font-size: 13px; margin: 0 0 8px; text-align:center; }
    .nexoPickGrid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
      gap: 8px;
      max-height: 190px;
      overflow: auto;
      margin: 8px 0 4px;
    }
    .nexoPick{
      border-radius: 12px;
      border: 1px solid rgba(90,200,255,0.18);
      background: rgba(8,16,28,0.88);
      cursor: pointer;
      padding: 6px 4px;
      color: inherit;
      font: inherit;
      min-height: 92px;
    }
    .nexoPick.is-on{
      border-color: #f4fbff;
      box-shadow: 0 0 0 2px rgba(255,255,255,0.28), 0 0 14px rgba(90,200,255,0.35);
    }
    .nexoPick img{ width: 100%; aspect-ratio: 1; object-fit: contain; pointer-events: none; }
    .nexoPick span, .nexoPick small{ pointer-events: none; display:block; font-size: 11px; }
    .nexoPick small{ color:#8eb4d4; }
    .nexoBoardCard{
      display:flex;
      justify-content: space-between;
      gap: 10px;
      align-items: center;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(200,160,255,0.28);
      background: linear-gradient(90deg, rgba(40,20,70,0.4), rgba(12,24,40,0.7));
      margin: 0 0 8px;
    }
    .nexoBoardCard .miniBtn{ flex-shrink: 0; }
    .nexoBoardCard.is-take{ cursor: pointer; }
    .nexoBoardPair{ display:flex; align-items:center; gap: 8px; min-width:0; }
    .nexoBoardPair img{ width: 40px; height: 40px; object-fit: contain; }
    .nexoBoardMeta{ font-size: 13px; }
    .nexoBoardMeta strong{ display:block; }
    .nexoBoardMeta small{ display:block; margin-top: 4px; color: #9ec4e4; font-size: 11px; }
    .nexoSectionTitle{
      margin: 14px 0 8px;
      font-size: 11px;
      letter-spacing: 0.14em;
      text-transform: uppercase;
      color: #ffe08a;
    }
    .nexoElitePerks{
      margin: 0 0 12px;
      padding: 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(200,160,255,0.28);
      background: linear-gradient(180deg, rgba(40,20,70,0.4), rgba(12,24,40,0.75));
      font-size: 13px;
      color: #d5e8f8;
    }
    .nexoElitePerks.is-on{
      border-color: rgba(255,224,138,0.4);
      background: linear-gradient(180deg, rgba(60,45,10,0.35), rgba(12,24,40,0.75));
    }
    .nexoElitePerks h4{
      margin: 0 0 6px;
      font-size: 11px;
      letter-spacing: 0.1em;
      text-transform: uppercase;
      color: #ffe08a;
    }
    .nexoElitePerks ul{ margin: 0; padding-left: 18px; }
    .nexoElitePerks li{ margin: 0 0 4px; }
    .nexoToggle{
      display:inline-flex;
      align-items:center;
      gap: 6px;
      font-size: 12px;
      color: #c8e8ff;
      margin: 0 0 8px;
      cursor: pointer;
    }
    .nexoFoot{
      display:flex;
      gap: 8px;
      justify-content: flex-end;
      padding: 10px 16px 14px;
      border-top: 1px solid rgba(90,200,255,0.14);
    }
    .nexoGuidePane{
      display:none;
      padding: 4px 2px 8px;
      color: #d5e8f8;
      font-size: 14px;
      line-height: 1.5;
    }
    .nexoGuidePane.on{ display:block; }
    .nexoGuidePane h4{
      margin: 12px 0 6px;
      font-size: 12px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: #ffe08a;
    }
    .nexoGuidePane ul{ margin: 0; padding-left: 18px; }
    .nexoGuidePane li{ margin: 0 0 6px; }
    .nexoMain.on-guide{ display:none; }
    @media (max-width: 640px){
      .nexoStage{ grid-template-columns: 1fr; }
      .nexoBeam{ width: 88px; height: 10px; justify-self:center; }
    }
    .pokedexSlotName{
      max-width: 100%;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 8px;
      font-weight: 800;
      letter-spacing: 0.02em;
      color: #c8ffe0;
      line-height: 1.1;
    }
    .pokedexSlotArt{
      position: relative;
      width: 52px;
      height: 48px;
      display:flex;
      align-items:center;
      justify-content:center;
    }
    .pokedexSlotArt img{
      max-width: 52px;
      max-height: 48px;
      image-rendering: pixelated;
      image-rendering: crisp-edges;
    }
    .pokedexSlotNo{
      font-family: ui-monospace, Consolas, monospace;
      font-size: 10px;
      font-weight: 800;
      color: rgba(220,240,255,0.7);
    }
    @media (max-width: 720px){
      .pokedexHud{ grid-template-columns: 1fr; }
      .pokedexStage{ min-height: 260px; }
    }
    .kantoTypes{ display:flex; flex-wrap:wrap; gap: 4px; justify-content:center; }
    .kantoType{
      font-size: 9px;
      font-weight: 800;
      text-transform: uppercase;
      padding: 2px 7px;
      border-radius: 999px;
      color: #fff;
      border: 1px solid rgba(255,255,255,0.18);
      letter-spacing: 0.03em;
    }
    .kantoType[data-type="normal"]{ background:#9aa07a; }
    .kantoType[data-type="fire"]{ background:#e06020; }
    .kantoType[data-type="water"]{ background:#3a7ad4; }
    .kantoType[data-type="grass"]{ background:#4a9c3a; }
    .kantoType[data-type="electric"]{ background:#d4b020; color:#1a1400; }
    .kantoType[data-type="ice"]{ background:#6ec8d4; color:#0a2430; }
    .kantoType[data-type="fighting"]{ background:#b03028; }
    .kantoType[data-type="poison"]{ background:#8a3c8a; }
    .kantoType[data-type="ground"]{ background:#c8a050; color:#2a1c00; }
    .kantoType[data-type="flying"]{ background:#7a9ae8; }
    .kantoType[data-type="psychic"]{ background:#e05088; }
    .kantoType[data-type="bug"]{ background:#88a030; }
    .kantoType[data-type="rock"]{ background:#a89040; color:#1c1400; }
    .kantoType[data-type="ghost"]{ background:#5c4898; }
    .kantoType[data-type="dragon"]{ background:#5c38d4; }
    .kantoType[data-type="dark"]{ background:#4c3c30; }
    .kantoType[data-type="steel"]{ background:#8898a8; color:#101820; }
    .kantoType[data-type="fairy"]{ background:#e090c8; color:#3a1028; }
    .kantoIdle{
      --hue: 140;
      width: 72px;
      height: 72px;
      position: relative;
      image-rendering: pixelated;
      animation: kantoBob 1.15s ease-in-out infinite;
    }
    .kantoIdle--sm{ width: 56px; height: 56px; }
    .kantoIdleBlob{
      position:absolute; inset: 18% 22% 14% 22%;
      background:
        linear-gradient(180deg, hsl(var(--hue) 45% 62%), hsl(var(--hue) 50% 38%));
      border: 3px solid hsl(var(--hue) 30% 18%);
      border-radius: 42% 42% 38% 38% / 48% 48% 36% 36%;
      box-shadow: inset 0 -6px 0 rgba(0,0,0,0.18);
    }
    .kantoIdle--back .kantoIdleBlob{
      border-radius: 36% 36% 44% 44% / 30% 30% 52% 52%;
      filter: brightness(0.82);
    }
    .kantoIdle--shiny .kantoIdleBlob{
      filter: hue-rotate(48deg) saturate(1.35);
    }
    .kantoIdle--back.kantoIdle--shiny .kantoIdleBlob{
      filter: brightness(0.82) hue-rotate(48deg) saturate(1.35);
    }
    .kantoIdleSpot{
      position:absolute; width: 10px; height: 8px; border-radius: 50%;
      background: hsl(var(--hue) 40% 22%);
      top: 38%; left: 32%;
    }
    .kantoIdle--back .kantoIdleSpot{ left: auto; right: 30%; top: 34%; }
    @keyframes kantoBob{
      0%,100%{ transform: translateY(0); }
      50%{ transform: translateY(-3px); }
    }
    .kantoSheetGrid{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin: 10px 0 8px;
    }
    .kantoSheetCell{
      border: 1px solid rgba(255,255,255,0.12);
      border-radius: 10px;
      padding: 10px 8px;
      display:flex;
      flex-direction:column;
      align-items:center;
      gap: 6px;
      background: rgba(0,0,0,0.18);
    }
    .kantoSheetCell span{ font-size: 11px; color: var(--muted); font-weight: 700; }
    .kantoEvoLine{ font-size: 12px; color: var(--muted); line-height: 1.45; margin: 0 0 6px; }
    .modal.albumModal{
      width: min(1180px, 98vw);
      max-width: none;
      max-height: min(94vh, 960px);
      display:flex;
      flex-direction:column;
      overflow:hidden;
    }
    .modal.albumModal .modalText{
      flex-shrink:0;
    }
    .modal.albumModal .albumGrid{
      flex: 1 1 auto;
    }
    .modal.albumModal .albumDexList{
      flex: 1 1 auto;
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-top: 6px;
      max-height: min(72vh, 720px);
      overflow-x: hidden;
      overflow-y: auto;
      padding: 2px 6px 8px 2px;
      scrollbar-width: thin;
      scrollbar-color: rgba(126,214,255,0.35) transparent;
    }
    .modal.albumModal .albumDexList::-webkit-scrollbar{
      width: 8px;
    }
    .modal.albumModal .albumDexList::-webkit-scrollbar-thumb{
      background: rgba(126,214,255,0.35);
      border-radius: 999px;
    }
    .albumDexRow{
      display: flex;
      align-items: flex-start;
      border: 1px solid rgba(126,214,255,0.22);
      border-radius: 14px;
      background: rgba(12, 18, 28, 0.88);
      overflow: hidden;
      min-height: 128px;
      min-width: 0;
    }
    .albumDexRow.vipExclusive,
    .albumDexRow.raidExclusive{
      border-color: rgba(255,196,90,0.38);
      background: linear-gradient(90deg, rgba(255,180,60,0.07), rgba(12,18,28,0.88) 30%);
    }
    .albumDexBase{
      flex: 0 0 156px;
      align-self: stretch;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 12px 10px 10px;
      background: rgba(126,214,255,0.08);
      border-right: 1px solid rgba(126,214,255,0.16);
      position: relative;
      min-height: min-content;
      box-sizing: border-box;
    }
    .albumDexBase.hasExclusiveBadge{
      justify-content: center;
      padding-top: 24px;
      padding-bottom: 10px;
    }
    .albumDexBaseHead{
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      z-index: 2;
      display: flex;
      align-items: center;
      gap: 5px;
      padding: 6px 8px 0;
      pointer-events: none;
      box-sizing: border-box;
    }
    .albumDexBaseHead .albumDexNum{
      position: static;
      flex: 0 0 auto;
    }
    .albumDexBaseHead .albumVipBadge{
      position: static;
      transform: none;
      flex: 1 1 auto;
      min-width: 0;
      margin: 0;
      padding: 1px 5px;
      font-size: 7px;
      line-height: 1.35;
      letter-spacing: 0.02em;
      box-shadow: 0 1px 4px rgba(0,0,0,0.28);
    }
    .albumDexBase.hasExclusiveBadge .albumDexStage.base{
      padding: 0 6px 4px;
      margin-top: -8px;
    }
    .albumDexBase.hasExclusiveBadge .albumDexStage.base .label{
      line-height: 1.1;
      margin-top: -8px;
    }
    .albumDexBase.hasExclusiveBadge .albumDexStage.base .petPreview{
      width: 68px;
      height: 68px;
      min-height: 68px;
      margin-bottom: 0;
    }
    .albumDexBase.hasExclusiveBadge .albumDexStage.base .dexTier{
      margin-top: 1px;
      font-size: 8px;
    }
    .albumDexBase.hasExclusiveBadge .albumDexStage.base .albumMeta{
      margin-top: 1px;
      font-size: 9px;
      line-height: 1.2;
    }
    .albumDexBase .albumDexStage.base{
      flex-shrink: 0;
    }
    .albumDexNum{
      position: absolute;
      top: 7px;
      left: 9px;
      font-size: 10px;
      font-weight: 800;
      color: var(--muted);
      letter-spacing: 0.06em;
      z-index: 1;
    }
    .albumDexTrack{
      flex: 1 1 auto;
      align-self: center;
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      align-content: center;
      padding: 8px 10px 8px 6px;
      gap: 2px 0;
      min-width: 0;
      overflow: visible;
    }
    .albumDexTrack.single{
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 12px;
      font-style: italic;
    }
    .albumDexStage{
      flex: 0 0 auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      text-align: center;
      padding: 6px 8px 8px;
      min-width: 92px;
    }
    .albumDexStage.base{
      padding: 2px 8px 8px;
    }
    .albumDexStage.base .petPreview{
      width: 72px;
      height: 72px;
      min-height: 72px;
      margin-bottom: 0;
    }
    .albumDexStage.evo .petPreview{
      width: 58px;
      height: 58px;
      min-height: 58px;
    }
    .albumDexStage .petPreview{
      margin-bottom: 2px;
    }
    .albumDexStage .label{
      font-size: 11px;
      max-width: 84px;
    }
    .albumDexStage.base .label{
      font-size: 12px;
      line-height: 1.1;
      margin-top: -8px;
    }
    .albumDexStage.base .dexTier{
      margin-top: 0;
    }
    .albumDexStage .albumMeta{
      margin-top: 2px;
      font-size: 10px;
      line-height: 1.3;
    }
    .albumDexStage .dexTier{
      margin-top: 2px;
      font-size: 9px;
      font-weight: 700;
      letter-spacing: 0.05em;
      text-transform: uppercase;
      color: var(--muted);
    }
    .albumDexStage.base .dexTier{ color: #9ecbff; }
    .albumDexStage.evo .dexTier{ color: #c4b0ff; }
    .albumDexStage.locked .label{ color: var(--muted); }
    .albumDexStage.locked .petPreview{
      filter: brightness(0) saturate(1);
      opacity: 0.55;
    }
    .albumDexArrow{
      flex: 0 0 24px;
      display: grid;
      place-items: center;
      color: rgba(126,214,255,0.6);
      font-size: 18px;
      user-select: none;
      padding-bottom: 16px;
    }
    .albumDexArrow::after{ content: "→"; }
    .albumDexActions{
      flex: 0 0 auto;
      align-self: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      gap: 6px;
      padding: 8px 12px 8px 8px;
      min-width: 112px;
      max-width: 132px;
      border-left: 1px solid rgba(255,255,255,0.06);
      align-self: stretch;
    }
    .albumDexActions .albumEvolveBtn,
    .albumDexActions .albumEvoLineBtn{
      width: 100%;
      min-height: 32px;
      padding: 7px 8px;
      font-size: 11px;
    }
    @media (max-width: 980px){
      .modal.albumModal .albumDexList{
        max-height: min(65vh, 580px);
      }
      .albumDexBase{ flex: 0 0 136px; }
      .albumDexStage.evo .petPreview{
        width: 52px;
        height: 52px;
        min-height: 52px;
      }
      .albumDexStage{ min-width: 84px; padding: 5px 6px 7px; }
    }
    @media (max-width: 720px){
      .albumDexRow{
        flex-direction: column;
        align-items: stretch;
      }
      .albumDexBase{
        flex: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(126,214,255,0.16);
      }
      .albumDexTrack{
        justify-content: center;
        padding: 10px 12px;
      }
      .albumDexActions{
        flex-direction: row;
        flex-wrap: wrap;
        max-width: none;
        border-left: none;
        border-top: 1px solid rgba(255,255,255,0.06);
        min-width: 0;
        padding: 10px 12px;
      }
      .albumDexActions .albumEvolveBtn,
      .albumDexActions .albumEvoLineBtn{
        flex: 1 1 140px;
      }
    }
    @media (max-width: 480px){
      .modal.albumModal{
        width: 100%;
        max-height: 96vh;
        border-radius: 14px;
      }
      .modal.albumModal .albumDexList{
        max-height: min(62vh, 520px);
        gap: 10px;
      }
      .albumDexArrow{
        flex: 0 0 18px;
        font-size: 15px;
        padding-bottom: 12px;
      }
      .albumDexStage{
        min-width: 72px;
      }
      .albumDexStage.base .petPreview{
        width: 64px;
        height: 64px;
        min-height: 64px;
      }
    }
    .modal.albumModal .modalRow{
      flex-shrink:0;
      margin-top: 12px;
    }
    /* —— Álbum efectos de victorias (rediseño limpio + responsive) —— */
    .modal.fxAlbumModal{
      width: min(920px, 96vw);
      max-height: min(90vh, 820px);
      padding: 0;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      border: 1px solid rgba(126,214,255,0.22);
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(126,214,255,0.12), transparent 55%),
        linear-gradient(180deg, rgba(16,22,34,0.98), rgba(10,14,22,0.98));
      box-shadow: 0 24px 60px rgba(0,0,0,0.45);
    }
    .fxAlbumHeader{
      flex-shrink: 0;
      padding: clamp(14px, 2.5vw, 20px) clamp(14px, 2.5vw, 22px) 12px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }
    .modal.fxAlbumModal .modalTitle{
      margin: 0 0 6px;
      font-size: clamp(17px, 2.6vw, 22px);
      line-height: 1.25;
      letter-spacing: 0.02em;
    }
    .modal.fxAlbumModal .modalText{
      margin: 0 0 12px;
      font-size: clamp(12px, 1.7vw, 13.5px);
      line-height: 1.45;
      opacity: 0.78;
      text-align: left;
      max-width: 62ch;
    }
    .fxAlbumProgressTop{
      display: flex;
      align-items: baseline;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 7px;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }
    #fxAlbumProgressHint{ color: #c8e8ff; }
    #fxAlbumProgressPct{ color: #9dffc8; opacity: 0.95; }
    .fxAlbumProgressTrack{
      height: 8px;
      border-radius: 999px;
      background: rgba(0,0,0,0.35);
      border: 1px solid rgba(255,255,255,0.08);
      overflow: hidden;
    }
    .fxAlbumProgressFill{
      height: 100%;
      width: 0%;
      border-radius: inherit;
      background: linear-gradient(90deg, #2a9aaa, #7dffc8 40%, #ffe08a 70%, #2a9aaa);
      background-size: 220% 100%;
      box-shadow: 0 0 12px rgba(125,255,200,0.35);
      transition: width .35s ease;
      animation: pokedexBarShine 2.6s linear infinite;
    }
    .modal.fxAlbumModal .albumGrid.fxAlbumGrid{
      flex: 1 1 auto;
      min-height: 0;
      max-height: none;
      overflow: auto;
      -webkit-overflow-scrolling: touch;
      overscroll-behavior: contain;
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
      gap: 12px;
      padding: 14px clamp(12px, 2vw, 18px);
      align-content: start;
      scrollbar-gutter: stable;
    }
    .fxAlbumGrid .fxAlbumCard,
    .fxAlbumGrid .albumPetCard.fxAlbumCard{
      position: relative;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      gap: 6px;
      min-width: 0;
      min-height: 118px;
      padding: 14px 10px 12px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.10);
      background: linear-gradient(160deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
      box-shadow: 0 8px 18px rgba(0,0,0,0.18);
      opacity: 1;
      border-style: solid;
      transition: transform .15s ease, border-color .15s ease, background .15s ease;
    }
    .fxAlbumGrid .fxAlbumCard.discovered{
      border-color: rgba(126,214,255,0.42);
      background:
        radial-gradient(ellipse 80% 60% at 50% 0%, rgba(126,214,255,0.16), transparent 65%),
        linear-gradient(160deg, rgba(36,70,90,0.45), rgba(18,28,40,0.55));
    }
    .fxAlbumGrid .fxAlbumCard.discovered:hover{
      transform: translateY(-2px);
      border-color: rgba(125,255,200,0.5);
    }
    .fxAlbumGrid .fxAlbumCard.locked{
      border-color: rgba(255,255,255,0.06);
      background: rgba(8,12,18,0.55);
      opacity: 1;
      border-style: solid;
    }
    .fxAlbumGrid .fxAlbumCard.locked .fxAlbumPreview,
    .fxAlbumGrid .fxAlbumCard.locked .petPreview{
      filter: none;
      opacity: 0.55;
      color: rgba(180,200,220,0.55);
    }
    .fxAlbumGrid .fxAlbumPreview,
    .fxAlbumGrid .fxAlbumCard .petPreview{
      display: flex;
      align-items: center;
      justify-content: center;
      width: 56px;
      height: 56px;
      min-height: 56px;
      margin: 0 auto;
      border-radius: 14px;
      font-size: 28px;
      line-height: 1;
      background: rgba(0,0,0,0.28);
      border: 1px solid rgba(255,255,255,0.08);
    }
    .fxAlbumGrid .fxAlbumCard.discovered .fxAlbumPreview{
      background: rgba(126,214,255,0.12);
      border-color: rgba(126,214,255,0.28);
      box-shadow: 0 0 16px rgba(80,180,220,0.18);
    }
    .fxAlbumGrid .fxAlbumCard .label{
      margin: 0;
      width: 100%;
      font-size: 12px;
      font-weight: 700;
      line-height: 1.3;
      text-align: center;
      color: #eef4ff;
      word-break: break-word;
      min-height: 0;
    }
    .fxAlbumGrid .fxAlbumCard.locked .label{
      color: rgba(160,180,200,0.55);
      font-weight: 600;
      letter-spacing: 0.08em;
    }
    .fxAlbumGrid .fxAlbumCard .albumMeta{
      display: none;
    }
    .fxAlbumGrid .fxAlbumCard.discovered .albumMeta{
      display: block;
      margin: 0;
      font-size: 10px;
      font-weight: 700;
      letter-spacing: 0.04em;
      text-transform: uppercase;
      color: #9dffc8;
      opacity: 0.9;
    }
    .fxAlbumFooter{
      flex-shrink: 0;
      margin: 0;
      padding: 12px 16px 14px;
      border-top: 1px solid rgba(255,255,255,0.08);
      justify-content: center;
    }
    .fxAlbumEntry{
      flex-wrap: wrap;
      row-gap: 8px;
    }
    .fxAlbumEntry .petAlbumEntryProgress{
      margin-left: auto;
    }
    @media (max-width: 980px){
      .modal.fxAlbumModal{
        width: min(96vw, 720px);
        max-height: min(92vh, 780px);
      }
      .modal.fxAlbumModal .albumGrid.fxAlbumGrid{
        grid-template-columns: repeat(auto-fill, minmax(118px, 1fr));
        gap: 10px;
      }
    }
    @media (max-width: 640px){
      .modal.fxAlbumModal{
        width: 100%;
        max-height: min(94vh, 100%);
        border-radius: 16px;
      }
      .fxAlbumHeader{ padding: 14px 14px 10px; }
      .modal.fxAlbumModal .albumGrid.fxAlbumGrid{
        grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
        gap: 9px;
        padding: 12px;
      }
      .fxAlbumGrid .fxAlbumCard,
      .fxAlbumGrid .albumPetCard.fxAlbumCard{
        min-height: 108px;
        padding: 12px 8px 10px;
        border-radius: 12px;
      }
      .fxAlbumGrid .fxAlbumPreview,
      .fxAlbumGrid .fxAlbumCard .petPreview{
        width: 48px;
        height: 48px;
        min-height: 48px;
        font-size: 24px;
        border-radius: 12px;
      }
      .fxAlbumGrid .fxAlbumCard .label{ font-size: 11px; }
      .fxAlbumEntry{
        gap: 10px;
        padding: 12px;
      }
      .fxAlbumEntry .petAlbumEntryProgress{
        order: 3;
        width: 100%;
        flex-direction: row;
        justify-content: flex-start;
        gap: 8px;
        margin-left: 0;
        text-align: left;
      }
      .fxAlbumEntry .petAlbumEntryChevron{ margin-left: auto; }
    }
    @media (min-width: 1200px){
      .modal.fxAlbumModal{
        width: min(980px, 90vw);
      }
      .modal.fxAlbumModal .albumGrid.fxAlbumGrid{
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
        gap: 14px;
      }
    }
    .modal.evoLineModal{
      width: min(720px, 94vw);
      max-width: none;
    }
    .evoLineGrid{
      display:grid;
      grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
      gap: 14px;
      max-height: min(50vh, 360px);
      overflow:auto;
      padding: 2px 4px 8px 2px;
    }
    .evoLineCard.locked .petPreview{
      filter: brightness(0) saturate(1);
      opacity: 0.55;
    }
    .evoLineCard .albumMeta{
      margin-top:6px;
      font-size:11px;
      color: var(--muted);
      line-height:1.35;
      text-align:center;
    }
    .evoLineReq{
      margin-top:4px;
      font-size:10px;
      color:#ffe08a;
      text-align:center;
      line-height:1.35;
      word-break: break-word;
      width:100%;
    }
    .evolveStage{
      position:relative;
      margin: 10px 0 6px;
      min-height: 168px;
      border-radius: 16px;
      border: 1px solid rgba(240,192,64,0.28);
      background:
        radial-gradient(ellipse 70% 55% at 50% 70%, rgba(240,192,64,0.14), transparent 70%),
        radial-gradient(ellipse 50% 40% at 50% 30%, rgba(126,214,255,0.10), transparent 65%),
        linear-gradient(180deg, rgba(12,18,28,0.9), rgba(8,12,20,0.95));
      overflow:hidden;
    }
    .evolveStage.ritual{
      animation: evolveStagePulse 1.1s ease-in-out infinite;
    }
    .evolveStage.burst{
      animation: evolveStageFlash .55s ease-out;
    }
    @keyframes evolveStagePulse{
      0%, 100% { box-shadow: inset 0 0 28px rgba(240,192,64,0.08); }
      50% { box-shadow: inset 0 0 48px rgba(240,192,64,0.22); }
    }
    @keyframes evolveStageFlash{
      0% { box-shadow: inset 0 0 0 rgba(255,240,180,0); filter: brightness(1); }
      35% { box-shadow: inset 0 0 80px rgba(255,240,180,0.55); filter: brightness(1.45); }
      100% { box-shadow: inset 0 0 24px rgba(240,192,64,0.18); filter: brightness(1); }
    }
    .evolveRing{
      position:absolute;
      left:50%;
      top:52%;
      width: 120px;
      height: 120px;
      margin: -60px 0 0 -60px;
      border-radius:50%;
      border: 2px solid rgba(240,192,64,0.35);
      pointer-events:none;
      opacity:0;
      transform: scale(0.55);
    }
    .evolveStage.ritual .evolveRing{
      opacity:1;
      animation: evolveRingSpin 2.2s linear infinite, evolveRingGrow 1.4s ease-out infinite;
    }
    .evolveRing.r2{
      width: 150px;
      height: 150px;
      margin: -75px 0 0 -75px;
      border-color: rgba(126,214,255,0.28);
      animation-duration: 3.2s, 1.8s;
      animation-direction: reverse, alternate;
    }
    @keyframes evolveRingSpin{
      to { transform: scale(1) rotate(360deg); }
    }
    @keyframes evolveRingGrow{
      0% { opacity: 0.25; }
      50% { opacity: 0.9; }
      100% { opacity: 0.35; }
    }
    .evolveRays{
      position:absolute;
      inset:0;
      pointer-events:none;
      opacity:0;
      background:
        conic-gradient(from 0deg at 50% 55%,
          transparent 0deg,
          rgba(255,224,120,0.18) 12deg,
          transparent 24deg,
          rgba(126,214,255,0.12) 40deg,
          transparent 55deg,
          rgba(255,224,120,0.16) 70deg,
          transparent 90deg,
          rgba(255,200,80,0.14) 110deg,
          transparent 130deg,
          rgba(126,214,255,0.12) 150deg,
          transparent 180deg,
          rgba(255,224,120,0.16) 200deg,
          transparent 230deg,
          rgba(255,200,80,0.12) 255deg,
          transparent 280deg,
          rgba(126,214,255,0.14) 310deg,
          transparent 340deg,
          transparent 360deg);
      mix-blend-mode: screen;
    }
    .evolveStage.ritual .evolveRays,
    .evolveStage.burst .evolveRays{
      opacity:1;
      animation: evolveRaysSpin 4s linear infinite;
    }
    .evolveStage.burst .evolveRays{
      animation: evolveRaysSpin .8s linear infinite, evolveRaysBurst .55s ease-out;
    }
    @keyframes evolveRaysSpin{ to { transform: rotate(360deg); } }
    @keyframes evolveRaysBurst{
      0% { opacity: 0.2; filter: brightness(1); }
      40% { opacity: 1; filter: brightness(1.8); }
      100% { opacity: 0.55; filter: brightness(1.1); }
    }
    .evolveParticles{
      position:absolute;
      inset:0;
      pointer-events:none;
      overflow:hidden;
    }
    .evolveParticle{
      position:absolute;
      width:5px;
      height:5px;
      border-radius:50%;
      background: #ffe08a;
      box-shadow: 0 0 8px rgba(255,224,120,0.85);
      opacity:0;
      left:50%;
      top:55%;
    }
    .evolveStage.ritual .evolveParticle{
      animation: evolveParticleFloat var(--p-dur, 1.4s) ease-in-out infinite;
      animation-delay: var(--p-delay, 0s);
    }
    .evolveStage.burst .evolveParticle{
      animation: evolveParticleBurst .7s ease-out forwards;
      animation-delay: var(--p-delay, 0s);
    }
    @keyframes evolveParticleFloat{
      0% { opacity:0; transform: translate(-50%, -50%) translate(var(--px,0), 10px) scale(0.4); }
      30% { opacity:1; }
      100% { opacity:0; transform: translate(-50%, -50%) translate(var(--px,0), -70px) scale(1); }
    }
    @keyframes evolveParticleBurst{
      0% { opacity:1; transform: translate(-50%, -50%) scale(1); }
      100% { opacity:0; transform: translate(-50%, -50%) translate(var(--bx,0), var(--by,-80px)) scale(0.2); }
    }
    .evolveFlash{
      position:absolute;
      inset:0;
      background: radial-gradient(circle at 50% 55%, rgba(255,250,220,0.85), rgba(255,220,120,0.35) 35%, transparent 70%);
      opacity:0;
      pointer-events:none;
      mix-blend-mode: screen;
    }
    .evolveStage.burst .evolveFlash{
      animation: evolveFlashPop .55s ease-out forwards;
    }
    @keyframes evolveFlashPop{
      0% { opacity:0; }
      30% { opacity:1; }
      100% { opacity:0; }
    }
    .evolvePreviewRow{
      position:relative;
      z-index:2;
      display:flex;
      align-items:center;
      justify-content:center;
      gap: 16px;
      margin: 0;
      min-height: 168px;
      padding: 18px 12px;
    }
    .evolvePreviewSlot{
      position:relative;
      width: 100px;
      height: 100px;
      display:flex;
      align-items:center;
      justify-content:center;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(255,255,255,0.05);
      transition: opacity .55s ease, transform .55s ease, filter .55s ease, box-shadow .55s ease;
    }
    .evolvePreviewSlot.fromSlot{
      box-shadow: 0 0 0 1px rgba(126,214,255,0.15);
    }
    .evolvePreviewSlot.toSlot{
      opacity: 0.28;
      filter: brightness(0.7) saturate(0.6);
    }
    .evolvePreviewSlot.charging{
      animation: evolveChargeShake 0.35s ease-in-out infinite;
      box-shadow:
        0 0 18px rgba(240,192,64,0.45),
        0 0 40px rgba(126,214,255,0.18);
      border-color: rgba(240,192,64,0.65);
    }
    @keyframes evolveChargeShake{
      0%, 100% { transform: translate(0,0) scale(1); }
      25% { transform: translate(-1px,1px) scale(1.03); }
      50% { transform: translate(1px,-1px) scale(0.98); }
      75% { transform: translate(-1px,-1px) scale(1.04); }
    }
    .evolvePreviewSlot.fading{
      opacity: 0;
      transform: scale(0.35) rotate(-8deg);
      filter: blur(6px) brightness(2.2);
      pointer-events:none;
    }
    .evolvePreviewSlot.reveal{
      opacity: 1 !important;
      filter: none !important;
      animation: evolveReveal 0.85s cubic-bezier(0.18, 0.9, 0.28, 1.15) forwards;
      box-shadow:
        0 0 22px rgba(240,192,64,0.55),
        0 0 48px rgba(126,214,255,0.25);
      border-color: rgba(240,192,64,0.7);
    }
    @keyframes evolveReveal{
      0% { opacity:0; transform: scale(0.2) rotate(12deg); filter: brightness(3) blur(4px); }
      55% { opacity:1; transform: scale(1.18) rotate(-2deg); filter: brightness(1.4) blur(0); }
      100% { opacity:1; transform: scale(1) rotate(0); filter: brightness(1); }
    }
    .evolveArrow{
      position:relative;
      z-index:2;
      color: #ffe08a;
      font-size: 22px;
      font-weight: 800;
      text-shadow: 0 0 12px rgba(240,192,64,0.55);
      transition: opacity .4s ease, transform .4s ease;
    }
    .evolveStage.ritual .evolveArrow{
      animation: evolveArrowPulse 0.9s ease-in-out infinite;
    }
    @keyframes evolveArrowPulse{
      0%, 100% { transform: scale(1); opacity: 0.7; }
      50% { transform: scale(1.25); opacity: 1; }
    }
    .evolveStatusLine{
      text-align:center;
      font-size:12px;
      color:#ffe08a;
      min-height:18px;
      margin-top:4px;
      letter-spacing:0.3px;
      opacity:0;
      transition: opacity .25s ease;
    }
    .evolveStatusLine.show{ opacity:1; }
    .evolveSuccessBanner{
      display:none;
      text-align:center;
      padding: 16px 12px;
      border-radius: 14px;
      border: 1px solid rgba(240,192,64,0.45);
      background:
        radial-gradient(ellipse 80% 80% at 50% 0%, rgba(240,192,64,0.18), transparent 60%),
        rgba(0,200,83,0.08);
      margin-top: 10px;
      animation: evolveSuccessIn .55s ease;
    }
    .evolveSuccessBanner.show{ display:block; }
    @keyframes evolveSuccessIn{
      from { opacity:0; transform: translateY(10px) scale(0.94); }
      to { opacity:1; transform: translateY(0) scale(1); }
    }
    .evolveSuccessBanner .evoTitle{
      font-size:16px;
      font-weight:800;
      color:#ffe08a;
      margin-bottom:6px;
      text-shadow: 0 0 16px rgba(240,192,64,0.4);
    }
    @media (prefers-reduced-motion: reduce){
      .evolveStage.ritual,
      .evolveStage.burst,
      .evolvePreviewSlot.charging,
      .evolvePreviewSlot.reveal,
      .evolveRing,
      .evolveRays,
      .evolveParticle,
      .evolveFlash,
      .evolveArrow,
      .evolveSuccessBanner{ animation: none !important; }
    }
    #variantPetsGrid,
    #soloPetsGrid{
      align-items: stretch;
    }
    .petCatalogSection:first-of-type{
      margin-top:0;
    }
    .petCatalogTitle{
      font-size:12px;
      font-weight:700;
      color:var(--muted);
      text-transform:uppercase;
      letter-spacing:0.06em;
      margin-bottom:10px;
      text-align:center;
    }
    .petColorRow{
      display:flex;
      gap:5px;
      flex-wrap:wrap;
      justify-content:center;
      margin-top:2px;
    }
    .petColorBtn{
      width:20px;
      height:20px;
      border-radius:999px;
      border:1.5px solid rgba(255,255,255,0.18);
      cursor:pointer;
      padding:0;
      transition:border-color .15s ease, transform .08s ease;
    }
    .petColorBtn:hover{ transform:translateY(-1px); }
    .petColorBtn.active{
      border-color:rgba(46,204,113,0.85);
      box-shadow:0 0 0 1px rgba(46,204,113,0.25);
    }

    .skin .label{
      position:absolute;
      bottom:6px;
      left:8px;
      right:8px;
      font-size: 10px;
      color: rgba(255,255,255,0.75);
      white-space: nowrap;
      overflow:hidden;
      text-overflow: ellipsis;
      text-align:center;
    }

    .footerRow{
      margin-top:auto;
      display:flex;
      gap: 12px;
      align-items:center;
      justify-content: flex-end;
    }
    .status{
      flex:1;
      font-size: 12px;
      color: var(--muted);
      display: none !important;
    }
    .status.error{ color: #ffb3b3; }
    .status.ok{ color: #b7ffd8; }

    .hint{
      font-size: 15px;
      color: var(--muted);
      margin-top: 6px;
      line-height: 1.5;
    }

    .modalOverlay{
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      display:none;
      align-items:center;
      justify-content:center;
      z-index: 9999;
      padding: max(18px, var(--safe-top)) max(18px, var(--safe-right)) max(18px, var(--safe-bottom)) max(18px, var(--safe-left));
      overflow: auto;
      -webkit-overflow-scrolling: touch;
    }
    .fragmentCraftModal{
      width: min(440px, 100%);
      text-align:center;
    }
    .fragmentCraftStage{
      position:relative;
      min-height: 220px;
      margin: 8px 0 4px;
      border-radius: 14px;
      border: 1px solid rgba(255,255,255,0.12);
      background:
        radial-gradient(ellipse at 50% 40%, rgba(90,180,255,0.14), transparent 62%),
        rgba(8,12,20,0.65);
      overflow:hidden;
    }
    .fragmentPuzzleBoard{
      position:absolute;
      inset:0;
      pointer-events:none;
    }
    .fragmentPiece{
      --tx: 0px;
      --ty: 0px;
      --rot: 0deg;
      position:absolute;
      left:50%;
      top:50%;
      width:42px;
      height:42px;
      margin:-21px 0 0 -21px;
      border-radius:10px;
      display:flex;
      align-items:center;
      justify-content:center;
      font-size:18px;
      color:#e8f6ff;
      background:linear-gradient(145deg, rgba(120,190,255,0.35), rgba(40,90,160,0.55));
      border:1px solid rgba(170,220,255,0.45);
      box-shadow:0 6px 16px rgba(0,0,0,0.35);
      transform: translate(var(--tx), var(--ty)) rotate(var(--rot)) scale(0.92);
      opacity:0;
      transition:
        transform 1.35s cubic-bezier(0.2, 0.85, 0.2, 1),
        opacity 0.5s ease,
        filter 0.55s ease;
    }
    .fragmentPiece.visible{
      opacity:1;
    }
    .fragmentPiece.assembling{
      --tx: 0px !important;
      --ty: 0px !important;
      --rot: 0deg !important;
      transform: translate(0, 0) rotate(0deg) scale(1);
      filter: drop-shadow(0 0 10px rgba(140,210,255,0.65));
    }
    .fragmentPiece.merged{
      opacity:0;
      transform: translate(0,0) scale(1.35);
      filter: blur(2px);
    }
    .fragmentCraftStage.flash::after{
      content:"";
      position:absolute;
      inset:0;
      background:radial-gradient(circle at 50% 45%, rgba(255,255,255,0.55), transparent 55%);
      animation: fragmentFlash 0.85s ease-out forwards;
      pointer-events:none;
    }
    @keyframes fragmentFlash{
      from{ opacity:0.9; }
      to{ opacity:0; }
    }
    .fragmentCraftReveal{
      position:relative;
      z-index:2;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content:center;
      min-height:220px;
      padding:16px 12px;
      animation: fragmentRevealIn 0.85s ease-out both;
    }
    .fragmentCraftReveal[hidden]{ display:none !important; }
    @keyframes fragmentRevealIn{
      from{ opacity:0; transform: scale(0.86) translateY(10px); }
      to{ opacity:1; transform: scale(1) translateY(0); }
    }
    .fragmentCraftPreview{
      width:110px;
      height:110px;
      display:flex;
      align-items:center;
      justify-content:center;
      margin-bottom:8px;
      filter: drop-shadow(0 8px 18px rgba(0,0,0,0.45));
    }
    .fragmentCraftPreview > div{
      width:96px !important;
      height:96px !important;
      transform:scale(1.35);
      transform-origin:center;
    }
    .fragmentCraftName{
      font-weight:800;
      font-size:18px;
      letter-spacing:0.02em;
      margin-top:2px;
    }
    .fragmentCraftStats{
      margin-top:6px;
      font-size:13px;
      color:#9dffc8;
      line-height:1.4;
      max-width:90%;
    }
    .modal{
      width: min(520px, 100%);
      max-height: min(92vh, 92dvh);
      overflow: auto;
      border-radius: 16px;
      border: 1px solid rgba(255,255,255,0.14);
      background: rgba(15,20,30,0.92);
      box-shadow: 0 30px 120px rgba(0,0,0,0.7);
      padding: 16px;
    }
    .modal.bingoModal{
      width: min(720px, 96vw);
      max-width: min(720px, 96vw);
      max-height: min(96vh, 96dvh);
      overflow-x: hidden;
      overflow-y: auto;
      padding: clamp(14px, 2.5vw, 22px);
      border: 1px solid rgba(180,140,255,0.28);
      box-shadow:
        0 0 0 1px rgba(255,210,120,0.12),
        0 24px 80px rgba(0,0,0,0.55),
        0 0 40px rgba(120,80,255,0.18);
      background:
        radial-gradient(600px 280px at 10% -10%, rgba(120,70,220,0.22), transparent 60%),
        radial-gradient(500px 240px at 100% 0%, rgba(255,180,60,0.12), transparent 55%),
        linear-gradient(180deg, #121826, #0a0e16);
    }
    .modal.bingoModal .modalTitle{
      font-size: clamp(20px, 3.5vw, 28px);
      margin-bottom: 8px;
      background: linear-gradient(90deg, #e8d6ff, #ffe4a8);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }
    .modal.gearGuideModal,
    .modal.recycleModal,
    .modal.foundryModal{
      width: 100%;
      max-width: none;
      height: 100%;
      max-height: 100%;
      border-radius: 0;
      overflow: hidden;
    }
    .modal.foundryModal{
      padding: 0;
    }
    .modalTitle{
      font-family: var(--font-display);
      font-weight: 700;
      font-size: 16px;
      margin: 2px 0 10px;
      text-align:center;
    }
    .codeBox{
      margin: 10px auto 12px;
      display:flex;
      gap: 10px;
      align-items:center;
      justify-content:center;
      padding: 12px 12px;
      border-radius: 14px;
      border: 1px dashed rgba(255,255,255,0.18);
      background: rgba(255,255,255,0.06);
      font-size: 26px;
      letter-spacing: 2px;
      font-weight: 700;
    }
    .modalText{
      font-size: 12px;
      color: var(--muted);
      line-height: 1.45;
      text-align:center;
      margin-bottom: 12px;
    }
    .panelNewsList{
      margin: 0 0 14px;
      padding-left: 1.2em;
      text-align: left;
      font-size: 13px;
      line-height: 1.45;
      color: #e8eef8;
    }
    .panelNewsList li{ margin: 6px 0; }
    .modalRow{
      display:flex;
      gap: 10px;
      justify-content:center;
      align-items:center;
      flex-wrap: wrap;
    }
    .chowsitoStatList{
      display:flex;
      flex-direction:column;
      gap:8px;
      margin-top:4px;
    }
    .chowsitoStatRow{
      display:grid;
      grid-template-columns: 1fr auto auto;
      gap:8px;
      align-items:center;
      padding:10px 12px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.10);
      background:rgba(255,255,255,0.04);
    }
    .chowsitoStatRow.plus{
      border-color:rgba(0,200,83,0.35);
      background:rgba(0,200,83,0.08);
    }
    .chowsitoStatRow.minus{
      border-color:rgba(255,90,90,0.35);
      background:rgba(255,70,70,0.08);
    }
    .chowsitoStatMeta strong{ display:block; font-size:13px; }
    .chowsitoStatMeta span{ color:var(--muted); font-size:11px; }
    .chowsitoDelta{
      min-width:54px;
      text-align:center;
      font-weight:700;
      font-size:14px;
    }
    .chowsitoDelta.pos{ color:#6dff9a; }
    .chowsitoDelta.neg{ color:#ff8a8a; }
    .chowsitoControls{
      display:flex;
      gap:4px;
      flex-wrap:wrap;
      justify-content:flex-end;
    }
    .chowsitoControls .miniBtn{
      padding:6px 8px;
      font-size:11px;
    }

    /* Vale dorado Compañeros Élite MOD/VIP */
    .vipGoldSection .historyToggle{
      border-color:rgba(255, 196, 64, 0.55) !important;
      background:linear-gradient(135deg, rgba(90, 55, 8, 0.55), rgba(160, 110, 20, 0.35)) !important;
      box-shadow:0 0 0 1px rgba(255, 215, 100, 0.25), 0 0 18px rgba(255, 180, 40, 0.18);
      color:#ffe7a0 !important;
      font-weight:700;
      letter-spacing:0.02em;
    }
    .vipGoldSection .historyToggle .historyCount{ color:#ffd76a; }
    .vipGoldCard{
      border:1px solid rgba(255, 205, 80, 0.55);
      background:linear-gradient(145deg, rgba(70, 45, 5, 0.75), rgba(140, 95, 15, 0.4));
      box-shadow:inset 0 0 0 1px rgba(255, 230, 140, 0.15), 0 0 16px rgba(255, 185, 50, 0.2);
      border-radius:12px;
      padding:12px 14px;
      margin-top:8px;
    }
    .vipGoldCard .vipGoldTitle{
      color:#ffe7a0;
      font-weight:800;
      font-size:14px;
      text-shadow:0 0 10px rgba(255, 200, 60, 0.35);
    }
    .vipGoldCard .vipGoldHint{ color:rgba(255, 230, 170, 0.85); font-size:12px; margin-top:4px; }
    .vipGoldCard .chestOpenBtn{
      border-color:rgba(255, 210, 90, 0.65) !important;
      background:linear-gradient(135deg, rgba(255, 190, 40, 0.35), rgba(180, 120, 10, 0.45)) !important;
      color:#fff4c8 !important;
      font-weight:700;
    }
    .volcimotPickRow{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:10px;
      padding:8px 10px;
      border-radius:10px;
      border:1px solid rgba(255,255,255,0.08);
      background:rgba(0,0,0,0.22);
      margin-top:6px;
      cursor:pointer;
    }
    .volcimotPickRow.selected{
      border-color:rgba(255, 196, 64, 0.7);
      background:rgba(255, 180, 40, 0.16);
      box-shadow:0 0 12px rgba(255, 185, 50, 0.2);
    }
    .volcimotPickRow strong{ font-size:13px; }
    .volcimotPickRow span{ color:var(--muted); font-size:11px; }

    .miniBtn{
      padding: 10px 12px;
      border-radius: 10px;
      border: 1px solid rgba(255,255,255,0.12);
      background: rgba(255,255,255,0.06);
      color: var(--text);
      cursor:pointer;
      font-family: var(--font-display);
      font-weight: 700;
    }
    .miniBtn.primary{
      background: linear-gradient(180deg, var(--green), var(--green2));
      border-color: rgba(0,0,0,0);
      color: #06110b;
    }

    img, video, canvas{ max-width: 100%; }

    @media (min-width: 1400px){
      :root{
        --wrap-max: 1580px;
        --left-col: 440px;
        --skin-min: 100px;
      }
      .grid{ gap: 22px; }
      .albumGrid{
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
        gap: 16px;
        max-height: min(62vh, 620px);
      }
      .modal.albumModal{ width: min(1280px, 92vw); }
      .modal.albumModal .albumDexList{
        max-height: min(76vh, 820px);
      }
    }
    @media (min-width: 1800px){
      :root{
        --wrap-max: 1680px;
        --left-col: 460px;
        --skin-min: 108px;
        --avatar-size: 180px;
      }
      .title{ font-size: 26px; }
    }
    @media (min-width: 2400px){
      :root{
        --wrap-max: 1960px;
        --left-col: 500px;
        --page-pad: 32px;
        --wrap-pad: 24px;
        --avatar-size: 196px;
      }
      .title{ font-size: 28px; }
    }

    /* Tablets / laptops estrechos: apilar antes de que la col. fija ahogue el contenido */
    @media (max-width: 1100px){
      :root{
        --left-col: 360px;
        --skin-min: 90px;
      }
    }

    @media (max-width: 1200px){
      .profileStage{ grid-template-columns: 1fr; }
      .gameChatDock{
        position: relative;
        top: auto;
        height: 320px;
        order: -1;
      }
      .profileStage.raid-live-mode:not(.raid-live-collapsed) .raidLiveDock{
        position: relative;
        top: auto;
        height: min(48vh, 420px);
        order: -2;
      }
      .profileStage.raid-live-mode:not(.raid-live-collapsed) .gameChatDock{
        height: 280px;
        order: -1;
      }
      .profileStage.raid-live-mode.raid-live-collapsed .raidLiveCollapsedBar{
        order: -2;
      }
    }

    @media (max-width: 980px){
      :root{
        --page-pad: 16px;
        --wrap-pad: 14px;
        --left-col: 100%;
        --skin-min: 88px;
        --tab-min: 104px;
      }
      .grid{ grid-template-columns: 1fr; }
      .profileStage{ grid-template-columns: 1fr; }
      .gameChatDock{
        position: relative;
        top: auto;
        height: 300px;
        order: -1;
      }
      .title{
        padding-right: 96px;
        font-size: 20px;
        text-align: left;
      }
      .playerTitleBadge{ text-align: left; }
      .albumGrid{
        grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr));
        gap: 12px;
        max-height: min(55vh, 460px);
      }
      .modal.albumModal{ width: min(96vw, 860px); }
      .modal.albumModal .albumDexList{
        max-height: min(60vh, 540px);
      }
      .gearDollStage{
        grid-template-columns: 64px minmax(120px, 1fr) 64px;
      }
      .tabs{
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 6px;
      }
      .tab{
        min-width: 0;
        max-width: none;
        padding: 10px 6px;
        font-size: 12px;
      }
      .content{ min-height: 0; }
    }

    @media (max-width: 820px){
      .classPickCards{ grid-template-columns: 1fr; }
      .gearInvGrid{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 132px), 1fr)); }
    }

    @media (max-width: 720px){
      :root{ --skin-min: 96px; }
      .cosmoGrid{ grid-template-columns: repeat(auto-fill, minmax(min(100%, 96px), 1fr)) !important; }
    }

    @media (max-width: 640px){
      :root{
        --page-pad: 10px;
        --wrap-pad: 12px;
        --skin-min: 88px;
        --tab-min: 92px;
        --avatar-size: 148px;
      }
      .wrap{ border-radius: 14px; }
      .title{
        font-size: 22px;
        padding-right: 92px;
        margin-bottom: 6px;
      }
      .card{ padding: 12px; }
      .content{ padding: 12px; border-radius: 14px; }
      .gearDollStage{
        grid-template-columns: 1fr;
        justify-items: center;
        gap: 10px;
        padding-bottom: 60px;
      }
      .gearRepairFab{
        width: 48px;
        height: 48px;
        right: 10px;
        bottom: 10px;
      }
      .gearRepairFabIcon{ font-size: 20px; }
      .gearDollCenter{ order: -1; width: 100%; }
      .gearDollCol.left{ order: 1; }
      .gearDollCol.right{ order: 2; }
      .gearDollCol{
        display: flex !important;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        grid-template-rows: none;
        width: 100%;
        gap: 8px;
      }
      .gearDollCol .gearDollSlot{
        width: 56px;
        height: 56px;
        min-width: 56px;
        max-width: 56px;
        min-height: 56px;
        max-height: 56px;
        flex: 0 0 56px;
      }
      .gearDollExtras{
        margin-top: 4px;
        justify-content: center;
        flex-wrap: wrap;
      }
      .gearDollExtras .gearDollSlot{
        width: 56px;
        min-width: 56px;
        max-width: 56px;
        min-height: 56px;
        flex: 0 0 56px;
      }
      .tab{
        min-width: 0;
        padding: 9px 6px;
        font-size: 11px;
      }
      .tab.tabCompact{ font-size: 10px; padding: 9px 8px; }
      .stat{
        flex-wrap: wrap;
        gap: 6px;
      }
      .weekPassHead{ gap: 8px; }
      .weekPassHead > div:first-child{ min-width: 0; flex: 1 1 180px; }
      .weekPassHead.cornerPad{ padding-right: 52px; }
      .weekPassTitle{ font-size: 14px; }
      .weekPassMeta{ font-size: 11px; line-height: 1.35; }
      .bitsTopName{
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .bitsTopRow{ padding: 8px 9px; font-size: 12px; gap: 8px; }
      .albumGrid,
      .evoLineGrid{
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
      }
      .albumPetCard{ padding: 10px 8px 8px; }
      .albumEvolveBtn,
      .albumEvoLineBtn{
        font-size: 10px;
        min-height: 30px;
        padding: 6px 6px;
      }
      .modalOverlay{
        padding: max(10px, var(--safe-top)) max(10px, var(--safe-right)) max(10px, var(--safe-bottom)) max(10px, var(--safe-left));
        align-items: flex-start;
        overflow: auto;
      }
      .modal.albumModal,
      .modal.evoLineModal{ width: 100%; max-width: 100%; }
      .chatCmdRow{
        grid-template-columns: 1fr;
        gap: 4px;
      }
      .footerRow{
        flex-wrap: wrap;
        gap: 10px;
      }
      .tutorialHelpBtn,
      .chatCommandsBtn{
        width: 40px;
        height: 40px;
      }
      .meta, .goldRow, .bitsRow, .levelRow{
        min-width: 0;
        max-width: 100%;
      }
    }

    @media (max-width: 520px){
      :root{
        --page-pad: 8px;
        --wrap-pad: 10px;
        --skin-min: 120px;
        --avatar-size: 132px;
        --tab-min: 86px;
      }
      .cosmoCustomizeModal{ max-width: 96vw !important; }
      .cosmoGrid{ grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; }
      .title{ font-size: 15px; letter-spacing: 0.2px; }
      .levelRow .lvl{ font-size: 16px; }
      .gearDollCol .gearDollSlot,
      .gearDollExtras .gearDollSlot{
        width: 48px;
        height: 48px;
        min-width: 48px;
        max-width: 48px;
        min-height: 48px;
        max-height: 48px;
        flex-basis: 48px;
      }
      .tourCard{
        width: calc(100vw - 16px) !important;
        left: 8px !important;
        right: 8px !important;
        bottom: calc(10px + var(--safe-bottom));
        top: auto !important;
        max-height: min(46vh, 320px);
        overflow: auto;
      }
      .modal{
        width: min(100%, calc(100vw - 16px));
        max-height: min(90dvh, 100%);
      }
    }

    @media (max-width: 400px){
      :root{
        --tab-min: 80px;
        --skin-min: 110px;
        --avatar-size: 120px;
      }
      .tab{ min-width: 0; padding: 8px 4px; font-size: 11px; }
      .skinsGrid{ gap: 8px; }
      .goldRow, .bitsRow{ font-size: 12px; }
      .title{ padding-right: 88px; font-size: 14px; }
    }

    /* Monitor / tablet vertical (portrait ancho tipo 800–1080) */
    @media (orientation: portrait) and (min-width: 700px) and (max-width: 980px){
      :root{
        --page-pad: 18px;
        --wrap-pad: 16px;
        --skin-min: 100px;
      }
      .grid{ grid-template-columns: 1fr; }
      .profileStage{ grid-template-columns: 1fr; }
      .gameChatDock{ position: relative; top: auto; height: 300px; order: -1; }
      .content{ min-height: 0; }
    }

    /* Teléfono apaisado / pantallas bajas */
    @media (max-height: 520px) and (orientation: landscape){
      :root{
        --page-pad: 8px;
        --wrap-pad: 10px;
        --avatar-size: 112px;
      }
      .content{ min-height: 0; }
      .grid{ gap: 10px; }
      .tourCard{
        top: auto !important;
        bottom: calc(8px + var(--safe-bottom));
        left: 8px !important;
        width: calc(100vw - 16px) !important;
        max-height: 42vh;
        overflow: auto;
      }
      .modalOverlay{ align-items: flex-start; padding-top: 8px; }
      .modal{ max-height: min(88dvh, 100%); }
    }

    @media (hover: none) and (pointer: coarse){
      .cosmoHoverPreview{ display: none !important; }
      .user:hover{ transform: none; }
      .tab, .miniBtn, .btn{ min-height: 40px; }
    }

    /* —— Taller rúnico (oficios) —— */
    .tallerRoot{
      --taller-copper: #c9a227;
      --taller-copper-hi: #e8c547;
      --taller-steel: #8a93a8;
      --taller-panel: rgba(10, 12, 18, 0.92);
      --taller-edge: rgba(201, 162, 39, 0.35);
      margin-top: 8px;
      border: 1px solid var(--taller-edge);
      border-radius: 14px;
      background:
        radial-gradient(ellipse 80% 50% at 50% -10%, rgba(201,162,39,0.12), transparent 55%),
        linear-gradient(165deg, #10141c 0%, #080a10 55%, #0c1018 100%);
      box-shadow: inset 0 1px 0 rgba(232,197,71,0.08), 0 12px 40px rgba(0,0,0,0.35);
      overflow: hidden;
      display: flex;
      flex-direction: column;
    }
    .tallerHead{
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: space-between;
      gap: 12px;
      padding: 14px 16px 10px;
      border-bottom: 1px solid rgba(201,162,39,0.18);
    }
    .tallerBrand{
      font-size: 18px;
      font-weight: 800;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--taller-copper-hi);
      text-shadow: 0 0 24px rgba(201,162,39,0.25);
    }
    .tallerBrandSub{
      margin-top: 4px;
      font-size: 12px;
      color: var(--taller-steel);
    }
    .tallerBadge{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      margin-top: 8px;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1px solid rgba(201,162,39,0.4);
      background: rgba(201,162,39,0.12);
      color: #ffe08a;
      font-size: 12px;
      font-weight: 700;
    }
    .tallerSkillWrap{ min-width: min(100%, 260px); flex: 1; max-width: 340px; }
    .tallerUnlock{
      padding: 4px 16px 14px;
      border-bottom: 1px solid rgba(201,162,39,0.12);
    }
    .tallerUnlock h4{
      margin: 0 0 6px;
      font-size: 12px;
      letter-spacing: 0.06em;
      text-transform: uppercase;
      color: var(--taller-copper);
    }
    .tallerUnlockGrid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
      gap: 10px;
    }
    .tallerUnlock .tallerChooseCard{ padding: 14px 12px; }
    .tallerUnlock .tallerChooseCard .miniBtn{ margin-top: 10px; width: 100%; }
    .tallerSkillMeta{
      display: flex;
      justify-content: space-between;
      font-size: 12px;
      color: var(--taller-steel);
      margin-bottom: 4px;
    }
    .tallerSkillMeta strong{ color: var(--taller-copper-hi); font-variant-numeric: tabular-nums; }
    .tallerSkillBar{
      height: 12px;
      border-radius: 6px;
      border: 1px solid rgba(201,162,39,0.35);
      background: rgba(0,0,0,0.45);
      overflow: hidden;
      box-shadow: inset 0 1px 2px rgba(0,0,0,0.5);
    }
    .tallerSkillFill{
      height: 100%;
      width: 0%;
      border-radius: 5px;
      background: linear-gradient(90deg, #8a6a12, var(--taller-copper) 45%, var(--taller-copper-hi));
      box-shadow: 0 0 10px rgba(232,197,71,0.35);
      transition: width 0.45s ease;
    }
    .tallerSkillFill.pulse{
      animation: tallerSkillPulse 0.7s ease;
    }
    @keyframes tallerSkillPulse{
      0%,100%{ filter: brightness(1); }
      40%{ filter: brightness(1.45); }
    }
    .tallerBonus{
      padding: 0 16px 10px;
      font-size: 12px;
      color: var(--taller-steel);
    }
    .tallerBonus strong{ color: #d8e0f0; }
    .tallerMats{
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0 16px 12px;
    }
    .tallerChip{
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 9px;
      border-radius: 8px;
      border: 1px solid rgba(201,162,39,0.28);
      background: rgba(18, 22, 32, 0.85);
      font-size: 11px;
      color: #c8d0e0;
      font-variant-numeric: tabular-nums;
    }
    .tallerChip .gemIcon, .tallerRow .gemIcon, .gemIcon, .tallerDetailTitle .gemIcon{
      width: 28px; height: 28px; object-fit: contain; flex-shrink: 0;
      image-rendering: auto;
    }
    .gemIcon.gemIconSm, .tallerSlotBody .gemIcon{
      width: 16px; height: 16px; vertical-align: -3px;
    }
    .gearTipLayer{
      position: fixed;
      z-index: 80;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      gap: 8px;
      pointer-events: none;
      max-width: min(92vw, 640px);
    }
    .gearTip{
      width: min(276px, 90vw);
      padding: 10px 12px 11px;
      border-radius: 10px;
      border: 1px solid rgba(201,162,39,0.35);
      background: linear-gradient(180deg, rgba(12,16,28,0.97), rgba(8,10,18,0.97));
      box-shadow: 0 16px 40px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.06);
      font-family: var(--font-body);
      color: var(--text);
      line-height: 1.25;
    }
    .gearTip.r-Low, .gearTip.r-Iniciado{ border-color: rgba(170,179,197,.45); }
    .gearTip.r-Medium{ border-color: rgba(107,163,212,.65); }
    .gearTip.r-Epic{ border-color: rgba(224,184,58,.7); }
    .gearTip.r-Legendary{
      border-color: rgba(255,140,90,.75);
      box-shadow: 0 16px 40px rgba(0,0,0,.55), 0 0 18px rgba(255,107,80,.18);
    }
    .gearTipHead{
      display: flex;
      gap: 8px;
      align-items: flex-start;
      margin-bottom: 6px;
    }
    .gearTipIcon{
      width: 40px; height: 40px;
      flex-shrink: 0;
      display: grid;
      place-items: center;
      border-radius: 8px;
      background: rgba(255,255,255,.04);
      overflow: hidden;
      font-size: 18px;
    }
    .gearTipIcon .lpcGearIconCanvas{ max-width: 40px; max-height: 40px; }
    .gearTipName{
      font-family: var(--font-display);
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .02em;
    }
    .gearTip.r-Low .gearTipName, .gearTip.r-Iniciado .gearTipName{ color: #c5cddb; }
    .gearTip.r-Medium .gearTipName{ color: #8ec4f0; }
    .gearTip.r-Epic .gearTipName{ color: #f0d36a; }
    .gearTip.r-Legendary .gearTipName{ color: #ff9a6a; }
    .gearTipMeta, .gearTipFoot, .gearTipEmpty{
      font-size: 12px;
      color: var(--muted);
    }
    .gearTipStat{ font-size: 13px; color: #e8ecf5; }
    .gearTipEnchant{ font-size: 12px; color: #6ee7a8; margin-top: 4px; }
    .gearTipGem{
      font-size: 12px;
      color: #d4b46a;
      display: flex;
      align-items: center;
      gap: 5px;
      margin-top: 2px;
    }
    .gearTipGem.empty{ color: #7a8499; }
    .gearTipGem.meta{ color: #ffb080; }
    .gearTipSet{ font-size: 12px; color: #c9a227; margin-top: 6px; }
    .gearTipSetLine{ color: #6b7384; }
    .gearTipSetLine.on{ color: #e8c547; }
    .gearTipFlavor{
      margin-top: 8px;
      font-size: 12px;
      font-style: italic;
      color: #9aa6bb;
    }
    .gearTipTemple{ font-size: 12px; color: #9fd4ff; margin-top: 6px; }
    .gearTipCmp{ font-size: 13px; font-weight: 650; }
    .gearTipCmp.up{ color: #6ee7a8; }
    .gearTipCmp.dn{ color: #ff8a8a; }
    .gearTipKicker{
      font-size: 10px;
      font-weight: 700;
      letter-spacing: .08em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 4px;
    }
    .gemPreview{ width: 48px; height: 48px; object-fit: contain; }
    .tallerChip .dot{
      width: 7px; height: 7px; border-radius: 50%;
      background: var(--taller-copper);
      box-shadow: 0 0 6px rgba(201,162,39,0.5);
    }
    .tallerChip.muted{ opacity: 0.55; border-color: rgba(255,255,255,0.1); }
    .tallerTabs{
      display: flex;
      flex-wrap: wrap;
      gap: 4px;
      padding: 0 12px;
      border-bottom: 1px solid rgba(255,255,255,0.06);
    }
    .tallerTab{
      appearance: none;
      border: none;
      background: transparent;
      color: var(--taller-steel);
      font: inherit;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: 0.03em;
      padding: 10px 12px 9px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
    }
    .tallerTab:hover{ color: #d0d8e8; }
    .tallerTab.on{
      color: var(--taller-copper-hi);
      border-bottom-color: var(--taller-copper);
    }
    .tallerBody{
      display: grid;
      grid-template-columns: minmax(180px, 1fr) minmax(200px, 1.15fr);
      grid-template-rows: minmax(0, 1fr);
      flex: 1 1 auto;
      min-height: 0;
      height: min(58vh, 560px);
      overflow: hidden;
    }
    @media (max-width: 720px){
      .tallerBody{
        grid-template-columns: 1fr;
        grid-template-rows: minmax(220px, 45vh) minmax(180px, 1fr);
        height: auto;
      }
      .tallerList{ max-height: none; }
    }
    .tallerList,
    .tallerDetail{
      min-height: 0;
      overflow: auto;
    }
    .tallerList{
      overflow-y: scroll;
      padding-bottom: 28px;
      border-right: 1px solid rgba(255,255,255,0.06);
      background: rgba(0,0,0,0.22);
    }
    .tallerRarityHead{
      position: sticky;
      top: 0;
      z-index: 1;
      padding: 7px 12px 5px;
      font-size: 10px;
      font-weight: 800;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      color: var(--taller-copper-hi);
      background: #141820;
      border-bottom: 1px solid rgba(201,162,39,0.22);
    }
    .tallerRow{
      display: flex;
      align-items: center;
      gap: 8px;
      width: 100%;
      text-align: left;
      padding: 9px 12px;
      border: none;
      border-bottom: 1px solid rgba(255,255,255,0.04);
      background: transparent;
      color: inherit;
      font: inherit;
      font-size: 13px;
      cursor: pointer;
    }
    .tallerRow:hover{ background: rgba(201,162,39,0.06); }
    .tallerRow.on{ background: rgba(201,162,39,0.14); box-shadow: inset 3px 0 0 var(--taller-copper); }
    .tallerRow.locked{ opacity: 0.45; }
    .tallerDiff{
      width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
      box-shadow: 0 0 6px currentColor;
    }
    .tallerDiff.diff-orange{ background: #ff8c22; color: #ff8c22; }
    .tallerDiff.diff-yellow{ background: #f0d030; color: #f0d030; }
    .tallerDiff.diff-green{ background: #3ecf6a; color: #3ecf6a; }
    .tallerDiff.diff-gray{ background: #6a7280; color: #6a7280; box-shadow: none; }
    .tallerDiff.diff-locked{ background: #a04040; color: #a04040; }
    .tallerRowName{ flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .tallerRowName.diff-orange{ color: #ff9a3c; }
    .tallerRowName.diff-yellow{ color: #f5d84a; }
    .tallerRowName.diff-green{ color: #6adf8a; }
    .tallerRowName.diff-gray{ color: #8a93a8; }
    .tallerRowName.diff-locked{ color: #b07070; }
    .tallerRowMeta{ font-size: 11px; color: var(--taller-steel); flex-shrink: 0; }
    .tallerDetail{
      padding: 14px 16px;
      overflow: auto;
      background: var(--taller-panel);
    }
    .tallerDetailEmpty{
      color: var(--taller-steel);
      font-size: 13px;
      padding: 24px 8px;
      text-align: center;
    }
    .tallerDetailTitle{
      font-size: 16px;
      font-weight: 780;
      color: #f0f4fc;
      margin: 0 0 4px;
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .tallerDetailSub{
      font-size: 12px;
      color: var(--taller-steel);
      margin-bottom: 12px;
      line-height: 1.4;
    }
    .tallerDetailBlock{
      margin: 10px 0;
      font-size: 12px;
      color: #b8c0d0;
    }
    .tallerDetailBlock label{
      display: block;
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      color: var(--taller-copper);
      margin-bottom: 4px;
      font-weight: 700;
    }
    .tallerCta{
      margin-top: 14px;
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      align-items: center;
    }
    .tallerCta .miniBtn.primary{
      border-color: rgba(201,162,39,0.55);
      background: rgba(201,162,39,0.2);
      color: #ffe08a;
      font-weight: 750;
    }
    .tallerCta .miniBtn.primary:disabled{
      opacity: 0.4;
      cursor: not-allowed;
    }
    .tallerDoll{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
      margin-top: 8px;
    }
    .tallerSlot{
      appearance: none;
      border: 1px solid rgba(201,162,39,0.28);
      background: rgba(0,0,0,0.35);
      border-radius: 10px;
      padding: 10px;
      text-align: left;
      color: inherit;
      font: inherit;
      cursor: default;
      min-height: 72px;
    }
    .tallerSlot.clickable{ cursor: pointer; }
    .tallerSlot.clickable:hover{
      border-color: rgba(232,197,71,0.55);
      background: rgba(201,162,39,0.1);
    }
    .tallerSlot.clickable.on{
      border-color: var(--taller-copper-hi);
      box-shadow: 0 0 0 1px rgba(232,197,71,0.35);
    }
    .tallerSlotLabel{
      font-size: 10px;
      text-transform: uppercase;
      letter-spacing: 0.06em;
      color: var(--taller-copper);
      font-weight: 700;
      margin-bottom: 4px;
    }
    .tallerSlotBody{ font-size: 11px; color: #c0c8d8; line-height: 1.35; }
    .tallerSlotBody .empty{ color: var(--taller-steel); opacity: 0.7; }
    .tallerChoose{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
      padding: 16px;
    }
    @media (max-width: 560px){
      .tallerChoose{ grid-template-columns: 1fr; }
    }
    .tallerChooseCard{
      appearance: none;
      border: 1px solid rgba(201,162,39,0.32);
      background: linear-gradient(160deg, rgba(30,28,18,0.9), rgba(12,14,20,0.95));
      border-radius: 12px;
      padding: 18px 16px;
      text-align: left;
      color: inherit;
      font: inherit;
      cursor: pointer;
      transition: border-color 0.15s, transform 0.15s;
    }
    .tallerChooseCard:hover:not(:disabled){
      border-color: var(--taller-copper-hi);
      transform: translateY(-1px);
    }
    .tallerChooseCard:disabled{ opacity: 0.5; cursor: not-allowed; }
    .tallerChoose.oficios4{ grid-template-columns: 1fr 1fr; }
    .oficiosSurf{
      display:flex; gap:8px; padding:10px 16px 0; align-items:center; flex-wrap:wrap;
    }
    .oficiosSurf a{ color:#e07a3a; font-size:12px; }
    .yunqueRoot{
      --ember:#e07a3a; --ember-hi:#f0a060;
      border: 1px solid rgba(224,122,58,0.35);
      border-radius: 14px;
      background: radial-gradient(1200px 400px at 10% -10%, rgba(224,122,58,0.12), transparent 50%), #101218;
      overflow: hidden;
    }
    .yunqueRoot .tallerBrand{ color: var(--ember-hi); }
    .yunqueForm{ display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px; align-items:end; }
    .yunqueForm label{ display:flex; flex-direction:column; gap:4px; font-size:11px; color:#9aa3b5; }
    .yunqueForm input, .yunqueForm select{
      background:#0c0e14; color:#e8ecf4; border:1px solid rgba(224,122,58,0.35); border-radius:8px; padding:6px 8px;
    }
    .ahBoard{
      padding: 0 10px 12px;
    }
    .ahHead, .ahRow{
      display: grid;
      grid-template-columns: 52px minmax(0,1.5fr) 88px 64px 72px 52px minmax(150px,1fr);
      gap: 8px;
      align-items: center;
      padding: 6px 8px;
      font-size: 12px;
    }
    .ahHead{
      color: #d4a574;
      font-size: 10px;
      letter-spacing: 0.08em;
      text-transform: uppercase;
      border-bottom: 1px solid rgba(212,165,116,0.35);
    }
    .ahRow{
      margin-top: 4px;
      border-radius: 4px;
      border: 1px solid rgba(90,60,28,0.55);
      background: linear-gradient(180deg, rgba(48,32,16,0.85), rgba(22,14,8,0.92));
      color: #f0e6d2;
    }
    .ahRow:hover{
      border-color: rgba(255,215,106,0.45);
      background: linear-gradient(180deg, rgba(62,42,20,0.95), rgba(28,18,10,0.95));
    }
    .ahIconWrap{
      position: relative;
      width: 42px; height: 42px;
      border: 1px solid #6a4a22;
      background: #0c0a07;
      display: flex; align-items: center; justify-content: center;
      border-radius: 3px;
    }
    .ahIconWrap img, .ahIconWrap .gemIcon{ width: 36px; height: 36px; object-fit: contain; }
    .ahStack{
      position: absolute; right: 1px; bottom: 0;
      font-size: 11px; font-weight: 800; color: #fff;
      text-shadow: 0 1px 2px #000;
    }
    .ahName{ font-weight: 700; min-width: 0; }
    .ahName.r-Low, .ahName.r-Iniciado{ color: #c9c9c9; }
    .ahName.r-Medium{ color: #5cadff; }
    .ahName.r-Epic{ color: #c060ff; }
    .ahName.r-Legendary{ color: #ff8000; }
    .ahMeta{ color: #b8a078; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ahGold{ color: #ffd76a; font-weight: 700; font-variant-numeric: tabular-nums; }
    .ahActs{ display: flex; flex-wrap: wrap; gap: 4px; align-items: center; justify-content: flex-end; }
    .ahActs input[type="number"]{
      width: 52px; padding: 4px 6px;
      background: #120e0a; color: #f0e6d2;
      border: 1px solid #6a4a22; border-radius: 3px;
    }
    @media (max-width: 720px){
      .ahHead{ display: none; }
      .ahRow{
        grid-template-columns: 48px minmax(0,1fr);
        grid-template-rows: auto auto auto;
      }
      .ahRow > .ahMeta, .ahRow > .ahGold, .ahRow > .ahActs{ grid-column: 1 / -1; }
    }
    .tallerChooseCard h3{
      margin: 0 0 6px;
      font-size: 15px;
      color: var(--taller-copper-hi);
      letter-spacing: 0.04em;
    }
    .tallerChooseCard p{
      margin: 0;
      font-size: 12px;
      color: var(--taller-steel);
      line-height: 1.4;
    }
    .tallerFootHint{
      flex-shrink: 0;
      position: relative;
      z-index: 2;
      padding: 10px 16px 14px;
      font-size: 11px;
      line-height: 1.35;
      color: var(--taller-steel);
      border-top: 1px solid rgba(201,162,39,0.18);
      background: #0a0d14;
    }