/* prestige.css — Confirm modals, the Prestige action button on the skill-
   tree header, and the cinematic fade/bloom animation triggered by
   _runPrestige() in js/prestige.js. */

/* ── Diamond theme overrides — applied to the entire prestige modal ──── */
.prestige-modal{
  background:linear-gradient(180deg,#0a1830,#040820) !important;
  border:1.5px solid #80c8ff !important;
  box-shadow:0 0 60px rgba(128,200,255,0.45) !important;
}
.prestige-modal .prestige-header{
  background:linear-gradient(180deg,#0e2040,#08142a) !important;
  border-bottom:1px solid #3a6ab0 !important;
}
.prestige-modal .prestige-header h2{ color:#e0f0ff !important; }
.prestige-modal .class-tabs{
  background:#0a1428 !important;
  border-bottom:1px solid #1a3050 !important;
}
.prestige-modal .class-tab{
  background:#0a182e !important;
  border:1px solid #2a4a78 !important;
  color:#a0c8e8 !important;
}
.prestige-modal .class-tab:hover{
  background:#102244 !important;
  color:#e0f0ff !important;
}
.prestige-modal .class-tab.class-tab-locked{
  background:#080c18 !important;
  border-color:#1a2438 !important;
  color:#5a7090 !important;
}
.prestige-modal .prestige-pts-display{
  background:#0a182e !important;
  border:1px solid #3a6ab0 !important;
  color:#a8d8ff !important;
  box-shadow:0 0 8px rgba(128,200,255,0.25);
}
.prestige-modal .prestige-reset-btn{
  background:linear-gradient(135deg,#2c63b4,#163d78) !important;
  border:1px solid #6aa6ec !important;
  color:#f0f8ff !important;
  box-shadow:0 0 10px rgba(110,180,255,0.4), inset 0 1px 0 rgba(255,255,255,0.18) !important;
}
.prestige-modal .prestige-reset-btn:hover:not(:disabled){
  background:linear-gradient(135deg,#3a78d4,#1d4f96) !important;
  border-color:#a0d0ff !important;
  box-shadow:0 0 14px rgba(140,200,255,0.55), inset 0 1px 0 rgba(255,255,255,0.22) !important;
}
.prestige-modal .prestige-reset-free{
  border-color:#80c8ff !important;
  box-shadow:0 0 10px rgba(128,200,255,0.45);
}

/* Skill nodes — diamond palette only for the default (non-rarity) styling.
   .golden / .silver / .bronze / .darkgray nodes keep their rarity colors. */
.prestige-modal .skill-node:not(.golden):not(.silver):not(.bronze):not(.copper):not(.darkgray){
  background:#08142a;
  border-color:#1a3050;
}
.prestige-modal .skill-node:not(.golden):not(.silver):not(.bronze):not(.copper):not(.darkgray):hover:not(.locked-node){
  border-color:#80c8ff;
  background:#0e1c38;
  box-shadow:0 0 14px 2px rgba(128,200,255,0.45);
}
.prestige-modal .skill-node:not(.golden):not(.silver):not(.bronze):not(.copper):not(.darkgray).unlocked{
  border-color:#a8d8ff;
  background:#0e203c;
}
.prestige-modal .skill-node:not(.golden):not(.silver):not(.bronze):not(.copper):not(.darkgray).unlocked::after{ color:#a8d8ff; }
.prestige-modal .skill-node:not(.golden):not(.silver):not(.bronze):not(.copper):not(.darkgray).maxed{
  border-color:#e0f0ff;
  background:#142a4a;
}
.prestige-modal .skill-node .sn-name{ color:#c0e8ff; }
.prestige-modal .skill-node .sn-cost{ color:#80c8ff; }
.prestige-modal .skill-node .sn-desc{ color:#6098c8; }
.prestige-modal .skill-node .sn-level{ color:#7098c0; }

/* Class cards (picker + preview-only mode) */
.prestige-modal .class-card{
  background:#0a1830 !important;
  border:1.5px solid #2a4a78 !important;
}
.prestige-modal .class-card .cc-tag{ color:#c0d8f0 !important; }
.prestige-modal .class-card .cc-desc{ color:#90b0d0 !important; }

/* Tooltip */
.prestige-modal ~ .sk-tooltip,
#overlay-container .sk-tooltip{
  background:#040820 !important;
  border:1px solid #3a6ab0 !important;
  box-shadow:0 6px 24px rgba(20,80,160,0.55) !important;
}

/* ── Prestige action button (header of prestige tree modal) ──────────── */
.prestige-action-btn{
  background:linear-gradient(135deg,#1a4a8a,#3080d0);
  color:#fff;border:1px solid #80c8ff;border-radius:10px;
  padding:7px 16px;font-size:13px;font-weight:700;cursor:pointer;
  box-shadow:0 0 14px rgba(128,200,255,0.55),inset 0 0 8px rgba(255,255,255,0.15);
  margin-left:8px;letter-spacing:0.5px;
  transition:transform 0.12s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.prestige-action-btn:hover{
  filter:brightness(1.18);transform:translateY(-1px);
  box-shadow:0 0 22px rgba(168,216,255,0.85),inset 0 0 10px rgba(255,255,255,0.25);
}
.prestige-action-btn:active{ transform:translateY(0); }

/* ── Big pulsing prestige button (preview mode, top middle) ──────────── */
.prestige-big-btn-wrap{
  display:flex;justify-content:center;align-items:center;
  padding:10px 0 22px;
}
.prestige-big-btn{
  position:relative;
  background:linear-gradient(135deg,#1a4a8a 0%,#3080d0 50%,#1a4a8a 100%);
  border:2.5px solid #a8d8ff;border-radius:16px;
  padding:18px 56px;font-size:24px;font-weight:800;
  color:#fff;cursor:pointer;letter-spacing:1.2px;
  font-family:inherit;
  text-shadow:0 0 10px rgba(168,216,255,0.85),0 0 4px rgba(255,255,255,0.6);
  box-shadow:
    0 0 36px rgba(128,200,255,0.75),
    0 0 80px rgba(128,200,255,0.45),
    inset 0 0 18px rgba(255,255,255,0.22);
  animation:prestigeBigBtnPulse 1.6s ease-in-out infinite;
  transition:transform 0.12s ease, filter 0.18s ease;
}
.prestige-big-btn:hover{ filter:brightness(1.2); transform:scale(1.05); }
.prestige-big-btn:active{ transform:scale(0.98); }
.prestige-big-btn:disabled,
.prestige-big-btn[disabled]{
  background:linear-gradient(135deg,#2a2a2a 0%,#444 50%,#2a2a2a 100%);
  border-color:#555;
  color:#888;
  text-shadow:none;
  box-shadow:none;
  animation:none;
  cursor:not-allowed;
  filter:grayscale(1);
  pointer-events:none;
}
@keyframes prestigeBigBtnPulse{
  0%,100%{
    box-shadow:
      0 0 36px rgba(128,200,255,0.75),
      0 0 80px rgba(128,200,255,0.45),
      inset 0 0 18px rgba(255,255,255,0.22);
    border-color:#a8d8ff;
    transform:scale(1);
  }
  50%{
    box-shadow:
      0 0 64px rgba(168,216,255,1),
      0 0 130px rgba(128,200,255,0.7),
      inset 0 0 28px rgba(255,255,255,0.4);
    border-color:#e0f0ff;
    transform:scale(1.04);
  }
}

/* ── Preview-only mode (never-prestiged players) ─────────────────────── */
.prestige-modal.prestige-preview-mode .prestige-preview-header{
  text-align:center;margin:6px 0 14px;
}
.prestige-modal.prestige-preview-mode .prestige-preview-header h2{
  margin:0 0 6px;font-size:22px;font-weight:700;
  background:linear-gradient(135deg,#a8d8ff,#e0f0ff,#c0e8ff,#80c8ff,#a8d8ff);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(168,216,255,0.4);
  letter-spacing:0.8px;
}
.prestige-modal.prestige-preview-mode .prestige-preview-header .prestige-preview-sub{
  color:#a0c8e8;font-size:13px;line-height:1.5;
  max-width:560px;margin:0 auto;
}

/* ── Intermediate full-screen mode ───────────────────────────────────── */
.prestige-modal.prestige-intermediate{
  width:96vw !important;height:94vh !important;
  max-width:none !important;max-height:none !important;
  border:2px solid #a8d8ff !important;
  box-shadow:0 0 100px rgba(168,216,255,0.7),inset 0 0 60px rgba(20,60,120,0.35) !important;
  animation:prestigeIntermediateIn 0.5s cubic-bezier(0.2,0.8,0.3,1.05);
  /* Anchor for the absolutely-positioned .prestige-nav-arrow buttons. */
  position:relative;
}
/* Big modal-edge nav arrows that flip between the 4 previewable classes
   while in intermediate mode. Anchored to the .prestige-intermediate modal
   itself so they sit at its true left/right edges, not the tree-wrap edges. */
.prestige-modal.prestige-intermediate .prestige-nav-arrow{
  position:absolute;top:50%;transform:translateY(-50%);
  width:64px;height:140px;
  background:linear-gradient(135deg,#1a4a8a,#3080d0,#1a4a8a);
  border:2px solid #a8d8ff;border-radius:14px;
  color:#fff;font-size:56px;font-weight:800;line-height:1;
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  font-family:inherit;
  text-shadow:0 0 10px rgba(168,216,255,0.8);
  box-shadow:0 0 24px rgba(128,200,255,0.55),inset 0 0 14px rgba(255,255,255,0.18);
  transition:transform 0.15s ease,filter 0.15s ease,box-shadow 0.15s ease;
  z-index:5;
}
.prestige-modal.prestige-intermediate .prestige-nav-arrow:hover{
  filter:brightness(1.18);
  box-shadow:0 0 40px rgba(168,216,255,0.9),inset 0 0 18px rgba(255,255,255,0.28);
}
.prestige-modal.prestige-intermediate .prestige-nav-arrow.left{
  left:14px;
}
.prestige-modal.prestige-intermediate .prestige-nav-arrow.right{
  right:14px;
}
.prestige-modal.prestige-intermediate .prestige-nav-arrow.left:hover{
  transform:translateY(-50%) translateX(-3px);
}
.prestige-modal.prestige-intermediate .prestige-nav-arrow.right:hover{
  transform:translateY(-50%) translateX(3px);
}
@keyframes prestigeIntermediateIn{
  0%   { transform:scale(0.85); opacity:0;   filter:blur(6px); }
  60%  { opacity:1; filter:blur(0); }
  100% { transform:scale(1);    opacity:1;   filter:blur(0); }
}
/* Darken the rest of the page while intermediate mode is open. Targets the
   .overlay (the backdrop element itself) rather than #overlay-container —
   `backdrop-filter` on the container would promote it into a containing
   block for fixed descendants, collapsing the position:fixed .overlay to
   the container's 0-height box. .overlay already has its own backdrop-filter
   and is position:fixed inset:0, so layering this on it stays viewport-sized. */
body.prestige-intermediate-active .overlay{
  background:rgba(2,6,18,0.85);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

/* Finished button (replaces the Prestige action button in intermediate mode) */
.prestige-finished-btn{
  background:linear-gradient(135deg,#1a4a8a,#3080d0,#1a4a8a);
  border:2px solid #a8d8ff;border-radius:12px;
  padding:11px 32px;font-size:15px;font-weight:800;
  color:#fff;cursor:pointer;letter-spacing:0.8px;
  font-family:inherit;
  text-shadow:0 0 8px rgba(168,216,255,0.7);
  box-shadow:0 0 24px rgba(128,200,255,0.65),inset 0 0 12px rgba(255,255,255,0.2);
  animation:prestigeFinishedPulse 2s ease-in-out infinite;
  transition:transform 0.12s ease, filter 0.18s ease;
  margin-left:8px;
}
.prestige-finished-btn:hover{ filter:brightness(1.18); transform:translateY(-1px); }
.prestige-finished-btn:active{ transform:translateY(0); }
@keyframes prestigeFinishedPulse{
  0%,100%{ box-shadow:0 0 24px rgba(128,200,255,0.65),inset 0 0 12px rgba(255,255,255,0.2); border-color:#a8d8ff; }
  50%   { box-shadow:0 0 44px rgba(168,216,255,0.95),inset 0 0 18px rgba(255,255,255,0.32); border-color:#e0f0ff; }
}

/* ── Combined fullscreen pan/zoom skill tree ──────────────────────────── */
.prestige-modal.prestige-fullscreen{
  width:98vw !important;height:96vh !important;
  max-width:none !important;max-height:none !important;
  border:2px solid #a8d8ff !important;
  box-shadow:0 0 100px rgba(168,216,255,0.7),inset 0 0 60px rgba(20,60,120,0.35) !important;
  animation:prestigeIntermediateIn 0.45s cubic-bezier(0.2,0.8,0.3,1.05);
}
/* Stage = the flex-fill region under the header that the viewport fills. */
.prestige-tree-stage{
  position:relative;flex:1;min-height:0;overflow:hidden;
}
.ptree-viewport{
  position:absolute;inset:0;overflow:hidden;cursor:grab;
  touch-action:none;
  background:radial-gradient(circle at 50% 42%,#0a1830 0%,#06101f 55%,#030810 100%);
}
.ptree-viewport:active{ cursor:grabbing; }
.ptree-world{
  position:absolute;top:0;left:0;transform-origin:0 0;will-change:transform;
}
.ptree-node{ box-sizing:border-box; }
/* Lock badge floating above every node while in preview mode. */
.sk-lock{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
  font-size:34px;line-height:1;z-index:3;pointer-events:none;opacity:0.42;
  filter:drop-shadow(0 0 4px rgba(0,0,0,0.85));
}
.prestige-preview-phase .ptree-node{ cursor:default; }
/* Class name label sitting under each tree's root skill. */
.ptree-class-label{
  position:absolute;text-align:center;pointer-events:none;
  font-size:29px;font-weight:800;letter-spacing:0.5px;
  color:var(--cls-color);
  text-shadow:0 0 12px color-mix(in srgb,var(--cls-color) 55%,transparent),0 1px 3px #000;
  opacity:0.65;
}
.ptree-class-label.chosen{ opacity:1; text-shadow:0 0 16px var(--cls-color),0 1px 3px #000; }

/* ── Prestige skill-tree window tweaks ───────────────────────────────── */
/* Skill-node text: bold + 10% bigger. */
.prestige-modal .ptree-node .sn-name{ font-size:12px; font-weight:700; }
.prestige-modal .ptree-node .sn-cost{ font-size:11px;  font-weight:700; }
/* Points readout (top-right): 40% bigger. */
.prestige-fullscreen .prestige-pts-display{ font-size:18px; padding:6px 17px; }
/* "⭐ Prestige" header button text: 20% bigger. */
.prestige-big-header-btn{ font-size:19px; }
/* Styled close X sits inline in the header (replaces the old "Close" button),
   aligned to the TOP of the points display rather than vertically centered. */
.prestige-fullscreen .prestige-header-right{ align-items:flex-start; }
.prestige-fullscreen .prestige-header-right .ui-unlock-x{ position:static; margin-left:4px; }
/* Skill tooltip: all text bold + 20% bigger (and widen the box to fit). */
#overlay-container .sk-tooltip{ min-width:216px; max-width:264px; }
#overlay-container .sk-tooltip .skt-name{ font-size:16px; font-weight:700; }
#overlay-container .sk-tooltip .skt-desc{ font-size:13px; font-weight:700; }
#overlay-container .sk-tooltip .skt-cost{ font-size:13px; font-weight:700; }
/* Preview (locked) mode: every node's border is 30% transparent (color kept). */
.prestige-modal.prestige-preview-phase .ptree-node{ border-color:rgba(26,48,80,0.7) !important; }
.prestige-modal.prestige-preview-phase .ptree-node.golden{ border-color:rgba(245,200,74,0.7) !important; }
.prestige-modal.prestige-preview-phase .ptree-node.silver{ border-color:rgba(200,208,220,0.7) !important; }
.prestige-modal.prestige-preview-phase .ptree-node.bronze{ border-color:rgba(158,116,76,0.7) !important; }
.prestige-modal.prestige-preview-phase .ptree-node.darkgray{ border-color:rgba(74,78,88,0.7) !important; }
/* Floating hint strip along the bottom of the stage. */
.ptree-hint{
  position:absolute;bottom:14px;left:50%;transform:translateX(-50%);
  background:rgba(8,16,36,0.92);border:1px solid #3a6ab0;border-radius:10px;
  padding:8px 18px;font-size:13px;color:#a8d8ff;
  box-shadow:0 0 16px rgba(128,200,255,0.35);pointer-events:none;z-index:6;
  max-width:80%;text-align:center;
}
.ptree-hint b{ color:#e0f0ff; }
.ptree-hint-spend{ border-color:#80c8ff; }
/* Zoom controls, bottom-right of the stage. */
.ptree-zoom-ctrls{
  position:absolute;right:14px;bottom:14px;z-index:6;
  display:flex;flex-direction:column;gap:6px;
}
.ptree-zoom-ctrls button{
  width:44px;height:44px;font-size:23px;font-weight:800;line-height:1;
  color:#cfeaff;background:linear-gradient(135deg,#0e2040,#08142a);
  border:1.5px solid #3a6ab0;border-radius:9px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;font-family:inherit;
  transition:border-color 0.12s,box-shadow 0.12s,color 0.12s;
}
.ptree-zoom-ctrls button:hover{
  border-color:#80c8ff;color:#fff;box-shadow:0 0 12px rgba(128,200,255,0.5);
}

/* Big "Prestige" button in the preview-phase header (mirrors Finished). */
.prestige-big-header-btn{
  background:linear-gradient(135deg,#1a4a8a,#3080d0,#1a4a8a);
  border:2px solid #a8d8ff;border-radius:12px;
  padding:11px 36px;font-size:16px;font-weight:800;
  color:#fff;cursor:pointer;letter-spacing:0.8px;font-family:inherit;
  text-shadow:0 0 8px rgba(168,216,255,0.7);
  box-shadow:0 0 24px rgba(128,200,255,0.65),inset 0 0 12px rgba(255,255,255,0.2);
  animation:prestigeFinishedPulse 1.8s ease-in-out infinite;
  transition:transform 0.12s ease, filter 0.18s ease;
}
.prestige-big-header-btn:hover{ filter:brightness(1.18); transform:translateY(-1px); }
.prestige-big-header-btn:active{ transform:translateY(0); }
.prestige-big-header-btn:disabled,.prestige-big-header-btn[disabled]{
  background:linear-gradient(135deg,#2a2a2a,#444,#2a2a2a);border-color:#555;
  color:#888;text-shadow:none;box-shadow:none;animation:none;
  cursor:not-allowed;filter:grayscale(1);pointer-events:none;
}
/* Themed class lock-in confirm reuses .prestige-confirm; class color is set
   inline. Force the heading to render in the flat class color (the base rule
   uses a transparent gradient fill). */
.prestige-confirm.prestige-classlock h2{
  background:none;-webkit-background-clip:initial;background-clip:initial;
}

/* ── Confirm modals (diamond palette) ─────────────────────────────────── */
.prestige-confirm{
  background:linear-gradient(180deg,#0a1830,#040820);
  border:1.5px solid #80c8ff;border-radius:14px;
  padding:28px 32px;max-width:420px;text-align:center;
  box-shadow:0 0 60px rgba(128,200,255,0.45);
  font-family:inherit;
}
/* Class-pick confirm/notice rendered as its OWN layer ABOVE the prestige tree
   (stacks over the tree's .overlay at z 1000000) instead of replacing it. */
#prestige-confirm-layer{
  position:fixed; inset:0; z-index:1000001;
  display:flex; align-items:center; justify-content:center;
  background:rgba(2,4,12,0.55);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
}
#prestige-confirm-layer .prestige-confirm{ animation:fadeInScale 0.18s ease; }
.prestige-confirm-icon{font-size:38px;margin-bottom:6px;line-height:1;}
.prestige-confirm h2{
  margin:0 0 12px;font-size:20px;letter-spacing:0.5px;
  background:linear-gradient(135deg,#a8d8ff,#e0f0ff,#c0e8ff,#80c8ff,#a8d8ff);
  -webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-fill-color:transparent;
  text-shadow:0 0 14px rgba(168,216,255,0.4);
}
.prestige-confirm p{
  margin:0 0 10px;color:#c0d8f0;font-size:13px;line-height:1.55;
}
.prestige-confirm-sub{font-size:12px;color:#80a0c8;font-style:italic;}
.prestige-confirm-btns{
  display:flex;gap:12px;justify-content:center;margin-top:20px;
}
.prestige-confirm-cancel,.prestige-confirm-go{
  border-radius:8px;padding:9px 22px;font-size:13px;font-weight:700;
  cursor:pointer;border:1px solid #3a6ab0;
  font-family:inherit;
}
.prestige-confirm-cancel{
  background:#0a182e;color:#a0c0e0;
}
.prestige-confirm-cancel:hover{ background:#102244;color:#e0f0ff; }
.prestige-confirm-go{
  background:linear-gradient(135deg,#1a4a8a,#3080d0);color:#fff;
  border-color:#80c8ff;
  box-shadow:0 0 12px rgba(128,200,255,0.55);
}
.prestige-confirm-go:hover{ filter:brightness(1.18); }
.prestige-confirm-2{
  border-color:#a8d8ff;
  box-shadow:0 0 80px rgba(168,216,255,0.55);
  background:linear-gradient(180deg,rgba(10,24,48,0.85),rgba(4,10,24,0.92));
}
.prestige-confirm-2 .prestige-confirm-icon{ font-size:49px; }
.prestige-confirm-2 h2{ font-size:26px; }
.prestige-confirm-2 p{ font-size:17px; }
.prestige-confirm-2 .prestige-confirm-cancel,
.prestige-confirm-2 .prestige-confirm-go{ font-size:17px; }

/* ── First "Prestige?" confirm — restyle (background + diamond palette + 30%
      bigger text, no styling on the rest of the prestige confirm popups). */
.prestige-confirm-1{
  background:linear-gradient(180deg,rgba(26,8,48,0.8),rgba(13,4,32,0.8));
}
.prestige-confirm-1 .prestige-confirm-icon{
  font-size:49px;
  /* Tint the yellow ⭐ glyph toward the diamond skin's light-blue palette. */
  filter:hue-rotate(165deg) saturate(0.85) brightness(1.45);
}
.prestige-confirm-1 h2{
  font-size:26px;
  background:linear-gradient(135deg,#a8d8ff,#e0f0ff,#c0e8ff,#80c8ff,#a8d8ff);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  -webkit-text-fill-color:transparent;
  text-shadow:0 0 18px rgba(168,216,255,0.45);
}
.prestige-confirm-1 p{ font-size:17px; }
.prestige-confirm-1 .prestige-confirm-sub{ font-size:15px; }
.prestige-confirm-1 .prestige-confirm-cancel,
.prestige-confirm-1 .prestige-confirm-go{ font-size:17px; }
.prestige-reset-warning{ color:#ff5060; }

/* ── Cylinder selection step (between Confirm1 and Confirm2) ─────────────── */
.prestige-cyl-select{
  max-width:640px;       /* wider so 3 cards sit comfortably in a row */
  zoom:1.2;              /* all text + window 20% bigger */
}
.prestige-cyl-select *{ font-weight:700; }
/* Sort-by radio row above the grid. */
.pcyl-sort{
  display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px 16px;
  font-size:13px;color:#a8d8ff;margin:10px 0 2px;
}
.pcyl-sort-label{ color:#7fb0e0; }
.pcyl-sort-opt{ display:inline-flex;align-items:center;gap:4px;cursor:pointer;color:#c0d8f0; }
.pcyl-sort-opt input{ accent-color:#80c8ff;cursor:pointer;margin:0; }
.prestige-cyl-grid{
  display:grid;grid-template-columns:repeat(3, 1fr);gap:8px;
  max-height:340px;overflow-y:auto;overflow-x:hidden;
  margin:10px 0 6px;padding:4px;
  scrollbar-width:thin;scrollbar-color:#3a6ab0 #0a1830;
}
/* Favorited marker, bottom-right of the card. */
.pcyl-fav{
  position:absolute;bottom:5px;right:7px;font-size:13px;line-height:1;
  color:#ffd24d;text-shadow:0 0 6px rgba(255,200,60,0.75);pointer-events:none;
}
.pcyl-card{
  position:relative;background:#0a182e;border:1.5px solid #2a4a78;border-radius:8px;
  padding:8px 8px 8px 16px;cursor:pointer;text-align:left;color:#c0d8f0;
  font-family:inherit;display:flex;flex-direction:column;gap:2px;
  transition:border-color 0.12s,background 0.12s,box-shadow 0.12s;
}
.pcyl-card:hover{ background:#102244;border-color:#80c8ff; }
.pcyl-card-on{
  border-color:#a8d8ff;background:#142a4a;
  box-shadow:0 0 14px rgba(168,216,255,0.55), inset 0 0 8px rgba(168,216,255,0.18);
}
.pcyl-card-on:hover{ background:#1a3458; }
.pcyl-color{
  position:absolute;top:6px;left:6px;width:6px;height:calc(100% - 12px);
  border-radius:3px;
}
.pcyl-name{
  font-weight:700;font-size:13px;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.pcyl-rarity{ font-size:11px;font-weight:700; }
.pcyl-meta{ font-size:10px;color:#7090b0; }
.pcyl-check{
  position:absolute;top:6px;right:8px;font-size:13px;font-weight:900;
  color:#a8d8ff;opacity:0;transition:opacity 0.12s;
  text-shadow:0 0 6px rgba(168,216,255,0.8);
}
.pcyl-card-on .pcyl-check{ opacity:1; }
.prestige-cyl-counter{
  text-align:center;font-size:13px;font-weight:700;color:#7090b0;
  margin:4px 0 6px;letter-spacing:0.4px;
}
.prestige-cyl-counter.pcyl-counter-ready{
  color:#a8d8ff;text-shadow:0 0 6px rgba(168,216,255,0.6);
}
.prestige-confirm-go[disabled]{
  opacity:0.45;cursor:not-allowed;filter:grayscale(0.4);
}
.prestige-confirm-go[disabled]:hover{ filter:grayscale(0.4); }
.prestige-confirm-final{
  background:linear-gradient(135deg,#3080d0,#a8d8ff);
  border-color:#e0f0ff;animation:prestigeConfirmFinalPulse 1.4s ease-in-out infinite;
}
@keyframes prestigeConfirmFinalPulse{
  0%,100%{ box-shadow:0 0 12px rgba(128,200,255,0.55); }
  50%   { box-shadow:0 0 28px rgba(168,216,255,0.95); }
}

/* ── Animation: phase 1, fade-out everything but the cylinder + kiwis ──
   The body class .prestige-fading drives a coordinated 1.0s fade with a
   slight scale-down + blur. Element selectors enumerate everything the
   spec called out: mid-col, right-col, banner, cosmetics/themes/stroke
   buttons, drippy button, cylinder text, helper hands, sunbursts, and
   addon DOM (drippy character, buff icons, coach, tamagotchi). */
body.prestige-fading #mid-col,
body.prestige-fading #right-col,
body.prestige-fading #banner,
body.prestige-fading #cosmetics-btn-wrap,
body.prestige-fading #cash-buy-wrap,
body.prestige-fading #stroke-style-btn-wrap,
body.prestige-fading #drippy-tree-btn,
body.prestige-fading #left-stats,
body.prestige-fading #prestige-bar-wrap,
body.prestige-fading #prestige-info,
body.prestige-fading #prestige-xp-tooltip,
body.prestige-fading .col-sunburst,
body.prestige-fading #helper-hand-container,
body.prestige-fading .hh-orbit,
body.prestige-fading #coach-host,
body.prestige-fading #coach-wrap,
body.prestige-fading #coach-bubble,
body.prestige-fading #coach-emoji-layer,
body.prestige-fading #drippy-character,
body.prestige-fading #tama-host,
body.prestige-fading #tip,
body.prestige-fading #msg,
body.prestige-fading #shop-ad-slot,
body.prestige-fading #fps-display,
body.prestige-fading #ui-unlock-stack,
body.prestige-fading #mobile-col-tabs,
body.prestige-fading #torsion-overlay,
body.prestige-fading #ge-icon,
body.prestige-fading #golden-eggplant-portal,
body.prestige-fading .golden-eggplant-emoji,
body.prestige-fading .bad-eggplant-emoji,
body.prestige-fading #droplet-storm-rain,
body.prestige-fading #droplet-shower-rain,
body.prestige-fading #cursed-squeeze-overlay,
body.prestige-fading #small-curse-overlay,
body.prestige-fading #big-curse-overlay,
body.prestige-fading #golden-balls-overlay,
body.prestige-fading #tutorial-overlay,
body.prestige-fading #tutorial-loop-overlay{
  animation:prestigeFadeOut 1.418s ease forwards;
  pointer-events:none !important;
}

/* Mid + right cols + Drippy + minigame-bar (radio + VIP/Daily/Casino/
   Minigames/Lootbox/chevron + everything in that bar) all stay hidden
   until Drippy's cinematic (or the no-cinematic shortcut) calls
   _unlockMidRightCols. The grid-template-columns override below also
   collapses the dividers and gives the left column the full row, so the
   cylinder gets a clean fullscreen stage during the animation with no
   middle/right column or padding showing through. */
body.prestige-cols-hidden #mid-col,
body.prestige-cols-hidden #right-col,
body.prestige-cols-hidden #coach-host,
body.prestige-cols-hidden #coach-wrap,
body.prestige-cols-hidden #coach-bubble,
body.prestige-cols-hidden #coach-emoji-layer,
body.prestige-cols-hidden #drippy-character,
body.prestige-cols-hidden #tama-host,
body.prestige-cols-hidden #minigame-bar,
body.prestige-cols-hidden #prestige-bar-wrap,
body.prestige-cols-hidden #col-divider-lm,
body.prestige-cols-hidden #col-divider-mr,
body.prestige-cols-hidden #tutorial-overlay,
body.prestige-cols-hidden #sun{
  visibility:hidden !important;
  pointer-events:none !important;
}
/* Cylinder + kiwi pseudo-element shadows are decorative and read as a hard
   black blob during the bloom — drop them while the prestige animation runs. */
body.prestige-cols-hidden #cylinder-wrap::after,
body.prestige-cols-hidden #kiwi-left-wrap::after,
body.prestige-cols-hidden #kiwi-right-wrap::after{
  display:none !important;
}
/* Collapse the grid tracks for everything except the left column. The
   `!important` is required to defeat any inline grid-template-columns the
   resizer sets. With the other cols hidden + their tracks at 0, left-col
   visually fills the row. */
body.prestige-cols-hidden #main{
  grid-template-columns:1fr 0 0 0 0 !important;
  padding:0 !important;
}
/* The fullscreen left-col widens the cylinder/kiwi containing block, which
   would normally cause an instant horizontal jump (narrow-col center →
   screen center on entry; reverse on exit). Smooth that with a transition
   while the prestige body class is active, plus a short follow-up class
   added by _unlockMidRightCols so the exit also eases. We don't apply the
   transition globally because the column resizer continuously updates the
   layout — a 400ms `left` transition would make the cylinder lag the cursor. */
body.prestige-cols-hidden #cylinder-wrap,
body.prestige-cols-hidden #kiwi-wrap,
body.prestige-cylinder-resettling #cylinder-wrap,
body.prestige-cylinder-resettling #kiwi-wrap{
  transition:left 0.4s ease;
}
body.prestige-cols-hidden #ge-effect-stack,
body.prestige-cols-hidden .golden-eggplant-emoji,
body.prestige-cols-hidden .bad-eggplant-emoji,
body.prestige-cols-hidden #golden-eggplant-portal,
body.prestige-cols-hidden #ge-icon{
  display:none !important;
}
@keyframes prestigeFadeOut{
  0%   { opacity:1; transform:scale(1)         translateY(0);    filter:blur(0); }
  100% { opacity:0; transform:scale(0.92)      translateY(-6px); filter:blur(3px); }
}

/* The cylinder + kiwis stay — but get a slow inhale so they feel alive
   while everything else evaporates. They also rotate independently as
   they whiten: cylinder clockwise (2 turns), kiwis counter-clockwise
   (3 turns). End rotations are integer multiples of 360° so the rebound
   reset to rotate(0) is visually a no-op. */
body.prestige-fading #cylinder-wrap{
  animation:prestigeCylInhale 9.356s linear forwards;
  z-index:50;position:relative;
}
body.prestige-fading #kiwi-wrap{
  animation:prestigeKiwiInhale 9.356s linear forwards;
  z-index:50;position:relative;
}
/* The wrap drifts up to ~20% of the viewport, shrinks, and spins with an
   accelerating cadence (rotation deltas grow each step: 120 → 420 → 900°)
   so the spin visibly speeds up as the prestige animation builds. */
/* Pulsing brightness + glow ramp interleaved with the spin/scale steps — the
   brightness oscillates each ~7.5% so the cylinder visibly pulses while it
   rises, instead of monotonically brightening. drop-shadow grows in step. */
@keyframes prestigeCylInhale{
  0%   { transform:translateX(-50%) translateY(0)     scale(1)    rotate(0deg);    filter:brightness(1)    drop-shadow(0 0 0    rgba(255,255,255,0)); }
  15%  { transform:translateX(-50%) translateY(-4vh)  scale(0.93) rotate(60deg);   filter:brightness(1.45) drop-shadow(0 0 18px rgba(255,200,255,0.7)); }
  30%  { transform:translateX(-50%) translateY(-8vh)  scale(0.85) rotate(120deg);  filter:brightness(1.2)  drop-shadow(0 0 12px rgba(255,200,255,0.5)); }
  45%  { transform:translateX(-50%) translateY(-12vh) scale(0.72) rotate(330deg);  filter:brightness(1.75) drop-shadow(0 0 30px rgba(255,210,255,0.85)); }
  60%  { transform:translateX(-50%) translateY(-15vh) scale(0.6)  rotate(540deg);  filter:brightness(1.5)  drop-shadow(0 0 24px rgba(255,210,255,0.7)); }
  75%  { transform:translateX(-50%) translateY(-17vh) scale(0.48) rotate(900deg);  filter:brightness(2.0)  drop-shadow(0 0 40px rgba(255,230,255,0.9)); }
  90%  { transform:translateX(-50%) translateY(-19vh) scale(0.38) rotate(1200deg); filter:brightness(1.7)  drop-shadow(0 0 32px rgba(255,225,255,0.85)); }
  100% { transform:translateX(-50%) translateY(-20vh) scale(0.3)  rotate(1440deg); filter:brightness(2.4)  drop-shadow(0 0 56px rgba(255,255,255,1)); }
}
@keyframes prestigeKiwiInhale{
  0%   { transform:translateX(-50%) translateY(0)     scale(1)    rotate(0deg);     filter:brightness(1)    drop-shadow(0 0 0    rgba(255,255,255,0)); }
  15%  { transform:translateX(-50%) translateY(-4vh)  scale(0.93) rotate(-90deg);   filter:brightness(1.45) drop-shadow(0 0 18px rgba(255,200,255,0.7)); }
  30%  { transform:translateX(-50%) translateY(-8vh)  scale(0.85) rotate(-180deg);  filter:brightness(1.2)  drop-shadow(0 0 12px rgba(255,200,255,0.5)); }
  45%  { transform:translateX(-50%) translateY(-12vh) scale(0.72) rotate(-450deg);  filter:brightness(1.75) drop-shadow(0 0 30px rgba(255,210,255,0.85)); }
  60%  { transform:translateX(-50%) translateY(-15vh) scale(0.6)  rotate(-720deg);  filter:brightness(1.5)  drop-shadow(0 0 24px rgba(255,210,255,0.7)); }
  75%  { transform:translateX(-50%) translateY(-17vh) scale(0.48) rotate(-1300deg); filter:brightness(2.0)  drop-shadow(0 0 40px rgba(255,230,255,0.9)); }
  90%  { transform:translateX(-50%) translateY(-19vh) scale(0.38) rotate(-1700deg); filter:brightness(1.7)  drop-shadow(0 0 32px rgba(255,225,255,0.85)); }
  100% { transform:translateX(-50%) translateY(-20vh) scale(0.3)  rotate(-1980deg); filter:brightness(2.4)  drop-shadow(0 0 56px rgba(255,255,255,1)); }
}

/* Still-period kiwi lift — between the inhale finish (~9.4s) and the rebound
   start (~11.1s) the cylinder + kiwis hold static at -20vh, fully whited out
   by the bloom flash. During this window the kiwis float another 100px above
   the cylinder. The snap back to -20vh when prestige-rebound takes over is
   masked by the peak of prestigeBloomFlash. */
#kiwi-wrap.prestige-lifted{
  animation:prestigeKiwiLifted 0.4s ease-out forwards !important;
}
@keyframes prestigeKiwiLifted{
  0%   { transform:translateX(-50%) translateY(-20vh)              scale(0.3) rotate(-1980deg); filter:brightness(2.2) drop-shadow(0 0 48px rgba(255,255,255,0.95)); }
  100% { transform:translateX(-50%) translateY(calc(-20vh - 20px)) scale(0.3) rotate(-1980deg); filter:brightness(2.2) drop-shadow(0 0 48px rgba(255,255,255,0.95)); }
}

/* Body shake during the bloom phase — subtle, sells the "reset" weight. */
body.prestige-fading{ animation:prestigeShake 7.655s 2.977s ease-in-out; }
@keyframes prestigeShake{
  0%,100% { transform:translate(0,0); }
  10%  { transform:translate(-2px,1px); }
  20%  { transform:translate(2px,-1px); }
  35%  { transform:translate(-3px,2px); }
  50%  { transform:translate(3px,-2px); }
  70%  { transform:translate(-2px,1px); }
  85%  { transform:translate(2px,-1px); }
}

/* ── Bloom overlay ────────────────────────────────────────────────────── */
#prestige-bloom{
  position:fixed;inset:0;pointer-events:none;
  z-index:99999;
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
#prestige-bloom .pb-flash{
  position:absolute;top:50%;left:50%;width:40px;height:40px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,1) 0%,
    rgba(255,200,255,0.85) 35%,rgba(180,80,240,0.4) 65%,rgba(0,0,0,0) 100%);
  transform:translate(-50%,-50%) scale(0);
  opacity:0;
  filter:blur(2px);
}
#prestige-bloom .pb-ring{
  position:absolute;top:50%;left:50%;width:80px;height:80px;
  border:2px solid rgba(220,180,255,0.85);border-radius:50%;
  transform:translate(-50%,-50%) scale(0);opacity:0;
  box-shadow:0 0 24px rgba(220,180,255,0.8),inset 0 0 24px rgba(220,180,255,0.5);
}
#prestige-bloom.pb-blooming .pb-flash{
  animation:prestigeBloomFlash 11.057s cubic-bezier(0.18,0.7,0.3,1) forwards;
}
#prestige-bloom.pb-blooming .pb-ring{
  animation:prestigeBloomRing 11.057s cubic-bezier(0.2,0.6,0.3,1) forwards;
}
#prestige-bloom.pb-blooming .pb-ring-2{
  animation:prestigeBloomRing 11.057s cubic-bezier(0.2,0.6,0.3,1) 0.765s forwards;
}
@keyframes prestigeBloomFlash{
  0%   { transform:translate(-50%,-50%) scale(0);    opacity:0;    }
  18%  { transform:translate(-50%,-50%) scale(8);    opacity:0.7;  }
  46%  { transform:translate(-50%,-50%) scale(70);   opacity:1;    }
  62%  { transform:translate(-50%,-50%) scale(95);   opacity:0.85; }
  100% { transform:translate(-50%,-50%) scale(120);  opacity:0;    }
}
@keyframes prestigeBloomRing{
  0%   { transform:translate(-50%,-50%) scale(0);   opacity:0;    border-width:2px; }
  35%  { transform:translate(-50%,-50%) scale(6);   opacity:0.95; border-width:3px; }
  100% { transform:translate(-50%,-50%) scale(40);  opacity:0;    border-width:1px; }
}

/* Phase 4 rebound — cylinder lands back at rest with a small bounce. */
body.prestige-rebounding{
  animation:prestigeBodyFadeIn 3.969s ease-out;
}
@keyframes prestigeBodyFadeIn{
  0%   { filter:brightness(2.0); }
  100% { filter:brightness(1.0); }
}
#cylinder-wrap.prestige-rebound,
#kiwi-wrap.prestige-rebound{
  animation:prestigeRebound 4.253s cubic-bezier(0.34,1.56,0.64,1) forwards;
}
/* Pick up where the inhale left off (-20vh, scale 0.3) so the rebound is a
   visible swoop back to the cylinder's normal home rather than a snap. */
@keyframes prestigeRebound{
  0%   { transform:translateX(-50%) translateY(-20vh) scale(0.3)  rotate(0deg); filter:brightness(2.2); }
  60%  { transform:translateX(-50%) translateY(0)     scale(0.96) rotate(0deg); filter:brightness(1.1); }
  100% { transform:translateX(-50%) translateY(0)     scale(1)    rotate(0deg); filter:brightness(1);   }
}

/* ── Completion toast ─────────────────────────────────────────────────── */
.prestige-complete-toast{
  position:fixed;top:80px;left:50%;transform:translateX(-50%);
  background:linear-gradient(135deg,#3a1060,#7a30c0);
  border:1px solid #c080ff;border-radius:12px;
  padding:12px 24px;font-size:15px;color:#f0d8ff;
  box-shadow:0 0 32px rgba(180,100,240,0.7);
  z-index:99998;pointer-events:none;
  opacity:0;animation:prestigeToastIn 0.5s ease 0.1s forwards;
  letter-spacing:0.3px;
}
.prestige-complete-toast.fade-out{
  animation:prestigeToastOut 0.7s ease forwards;
}
@keyframes prestigeToastIn{
  0%   { opacity:0; transform:translateX(-50%) translateY(-12px); }
  100% { opacity:1; transform:translateX(-50%) translateY(0); }
}
@keyframes prestigeToastOut{
  0%   { opacity:1; transform:translateX(-50%) translateY(0); }
  100% { opacity:0; transform:translateX(-50%) translateY(-12px); }
}