/* ============================================================
   Nyx — Game Page template shared styles  (.gp scope)
   Carries the hub's visual language: violet frames, hex clips,
   GI display font, HSR ui font, dark abyss background stack.
   ============================================================ */

@font-face{ font-family:'GI';  src:url('../../assets/fonts/GI.ttf')  format('truetype'); font-display:swap; }
@font-face{ font-family:'HSR'; src:url('../../assets/fonts/HSR.ttf') format('truetype'); font-display:swap; }

/* Game-page reveal — the (bright) page background paints immediately; the app
   content fades in once it has actually mounted (html.nyx-app-ready, set in
   nyx-app.jsx) rather than hiding behind a black veil. This removes BOTH the
   bright-background flash and the "dark for a few seconds" wait while the bundle
   loads (the old solid veil sat opaque the whole time). The delayed keyframe is
   a failsafe if the bundle never mounts. Scoped to game pages only — index.html
   doesn't load this file. */
.gp{ transition:opacity .45s ease; }
html:not(.nyx-app-ready) .gp{ opacity:0; animation:nyxGpReveal .45s ease 5s forwards; }
@keyframes nyxGpReveal{ to{ opacity:1; } }
@media (prefers-reduced-motion: reduce){ html:not(.nyx-app-ready) .gp{ opacity:1; animation:none; } .gp{ transition:none; } }

.gp{
  --accent:#8b7bff;
  --accent-bright:#b7aaff;
  --accent-glow:rgba(139,123,255,.6);
  --panel:#0c0922;
  --panel2:#191333;
  --tx:#f3f0ff;
  --tx-dim:#9c93c4;
  --clip:polygon(11% 0%, 89% 0%, 100% 6%, 100% 92%, 50% 100%, 0% 92%, 0% 6%);
  --hclip:polygon(0% 50%, 12px 0%, calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 12px 100%);
  position:absolute; inset:0; overflow:hidden;
  background:#05040b;
  font-family:'HSR','Segoe UI',system-ui,sans-serif;
  font-size:16.5px;
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  user-select:none;
}
.gp *{ box-sizing:border-box; margin:0; padding:0; }

/* background stack */
.gp-bg{ position:absolute; inset:0; background:#05040b url('../../assets/bg/backgroundnyx.png') 50% 46%/cover no-repeat; }
.gp-pattern{ position:absolute; top:50%; left:50%; width:170%; aspect-ratio:1; transform:translate(-50%,-50%);
  background:url('../../assets/decor/pattern.png') center/cover no-repeat;
  mix-blend-mode:screen; opacity:.34; pointer-events:none; }
.gp-vignette{ position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(120% 90% at 50% 8%, rgba(120,96,200,.16), transparent 46%),
    radial-gradient(140% 120% at 50% 120%, rgba(70,48,140,.28), transparent 55%),
    linear-gradient(180deg, rgba(5,4,11,.6) 0%, rgba(5,4,11,.06) 24%, rgba(5,4,11,.06) 60%, rgba(5,4,11,.8) 100%); }
.gp-content{ position:absolute; inset:0; }

/* ===== typography helpers ===== */
.gp-display{ font-family:'GI',serif; color:#f7f4ff; text-shadow:0 0 22px var(--accent-glow), 0 2px 14px rgba(0,0,0,.6); }
.gp-kicker{ font-size:12px; letter-spacing:.3em; text-transform:uppercase; color:var(--tx-dim); }
.gp-sec{ position:relative; display:flex; align-items:center; gap:12px; }
.gp-sec .perch{ position:absolute; left:8px; bottom:-2px; height:52px; width:auto; z-index:2;
  transform:scaleX(1); pointer-events:none; filter:drop-shadow(0 4px 7px rgba(0,0,0,.55)); }
.gp-sec.withperch .rule{ transform:translateY(10px); }
.gp-sec .t{ font-family:'GI',serif; font-size:22px; letter-spacing:.03em; color:#efeaff;
  text-shadow:0 0 18px var(--accent-glow); white-space:nowrap; }
.gp-sec .rule{ position:relative; flex:1; height:1px; background:linear-gradient(90deg, rgba(183,170,255,.45), rgba(183,170,255,0)); }
.gp-sec .dia{ width:17px; height:29px; flex:none;
  background:url('../../assets/decor/toast_dia.png') center/contain no-repeat; }
.gp-sec .ic{ height:92px; width:auto; flex:none; margin:-14px -24px -22px 4px; pointer-events:none; }
.gp-sec.withperch .t{ font-size:25px; }

/* ===== hex button (back / functions / actions) ===== */
.gp-hex{ position:relative; border:none; cursor:pointer; padding:2px; background:none; height:48px;
  filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 5px 12px rgba(0,0,0,.5));
  transition:transform .3s cubic-bezier(.2,.7,.2,1), filter .3s; flex:none; }
.gp-hex .rim{ position:absolute; inset:0; clip-path:var(--hclip);
  background:linear-gradient(152deg,#cabfff 0%,#8a79e8 34%,#3a2f74 66%,#6253b8 100%); }
.gp-hex .in{ position:relative; display:flex; align-items:center; justify-content:center; gap:10px;
  height:100%; padding:0 26px; clip-path:var(--hclip);
  background:linear-gradient(180deg,#191333,#0c0922);
  font-family:'HSR','Segoe UI',sans-serif; font-size:14px; letter-spacing:.14em; text-transform:uppercase;
  color:#e9e2ff; white-space:nowrap; transition:color .3s; }
.gp-hex:hover{ transform:translateY(-2px); filter:drop-shadow(0 0 8px var(--accent-glow)) drop-shadow(0 6px 14px rgba(0,0,0,.55)); }
.gp-hex:hover .in{ color:#fff; }
.gp-hex.sm{ height:40px; }
.gp-hex.sm .in{ font-size:12.5px; padding:0 20px; }
/* keep the Edit / Done toggle one fixed width so it doesn't resize between states */
.gp-hex.sm.fixw .in{ min-width:96px; }
.gp-hex .chev{ font-family:'HSR',sans-serif; font-size:16px; color:var(--accent-bright); }
.gp-hex .eye{ width:16px; height:16px; flex:none;
  background:linear-gradient(165deg,#d3c8ff,#8b79ea);
  -webkit-mask:url('../../assets/icon/nyx_logo.png') center/contain no-repeat;
  mask:url('../../assets/icon/nyx_logo.png') center/contain no-repeat; }
.gp-hex .dia{ width:14px; height:24px; flex:none;
  background:url('../../assets/decor/toast_dia.png') center/contain no-repeat; }
.gp-hex.on .in{ background:linear-gradient(180deg,#413480,#221a4e); color:#fff; }
.gp-hex.on{ filter:drop-shadow(0 0 8px var(--accent-glow)) drop-shadow(0 5px 12px rgba(0,0,0,.5)); }
.gp-hex:disabled{ opacity:.4; pointer-events:none; }

/* ===== medallions (game switcher) ===== */
.gp-med{ position:relative; width:68px; height:68px; border-radius:50%; flex:none; cursor:pointer;
  display:grid; place-items:center; text-decoration:none;
  background:radial-gradient(circle at 50% 35%, #1b1640, #0a0820);
  box-shadow:0 0 0 1.5px rgba(183,170,255,.55), 0 0 12px rgba(139,123,255,.35), 0 4px 10px rgba(0,0,0,.55);
  transition:box-shadow .35s, transform .35s; }
.gp-med img{ width:56px; height:56px; border-radius:50%; object-fit:cover; }
.gp-med img.glyph{ width:38px; height:38px; border-radius:0; object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 0 4px rgba(183,170,255,.8)); }
.gp-med:hover{ transform:translateY(-3px);
  box-shadow:0 0 0 2px var(--accent-bright), 0 0 18px var(--accent-glow), 0 4px 10px rgba(0,0,0,.55); }
.gp-med.on{ box-shadow:0 0 0 2px #fff, 0 0 22px var(--accent-glow), 0 4px 10px rgba(0,0,0,.6); }
.gp-med.sz-sm{ width:56px; height:56px; }
.gp-med.sz-sm img{ width:46px; height:46px; }

/* Nyx medallion — the hub's living eye, gaze-follow + hover vibrate */
.gp-med.sim{ background:url('../../assets/bg/noxbg.png') 50% 32%/cover no-repeat,
  radial-gradient(circle at 50% 35%, #1b1640, #0a0820); }
.gp-med.sim .ballvibe, .gp-med.sim .ballscale{ position:absolute; inset:0; }
.gp-med.sim .ballscale{ transform-origin:50% 45%; transition:transform .5s cubic-bezier(.2,.7,.2,1); }
.gp-med.sim:hover .ballscale{ transform:scale(1.09); }
.gp-med.sim:hover .ballvibe{ animation:gpSimVibe .055s linear infinite alternate; }
@keyframes gpSimVibe{ from{ transform:translateX(-1px); } to{ transform:translateX(1px); } }
.gp-med.sim .slayer{ position:absolute; inset:0;
  background:linear-gradient(165deg,#e3dcff,#9a89ea 70%,#7a69d8);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:50% 46%; mask-position:50% 46%;
  -webkit-mask-size:98% auto; mask-size:98% auto; }
.gp-med.sim .slayer.ball{ -webkit-mask-image:url('../../assets/icon/eye_ball.png'); mask-image:url('../../assets/icon/eye_ball.png');
  transition:transform .6s cubic-bezier(.2,.7,.2,1); will-change:transform; }
.gp-med.sim .slayer.lid{ -webkit-mask-image:url('../../assets/icon/eye_lid.png'); mask-image:url('../../assets/icon/eye_lid.png'); }
.gp-med.sim .slayer.drips{ -webkit-mask-image:url('../../assets/icon/eye_drips.png'); mask-image:url('../../assets/icon/eye_drips.png');
  animation:gpSimDrip 3.4s ease-in-out infinite; }
@keyframes gpSimDrip{ 0%,72%{ opacity:.9; transform:translateY(0); } 86%{ opacity:1; transform:translateY(1px); } 100%{ opacity:.9; transform:translateY(0); } }
@media (prefers-reduced-motion: reduce){ .gp-med.sim .slayer.drips{ animation:none; } }
@media (prefers-reduced-motion: reduce){ .gp-med.sim:hover .ballvibe{ animation:none; } }
.gp-med.sz-sm img.glyph{ width:24px; height:24px; }

/* ===== favourite character card (vertical, hub-frame style) ===== */
.gp-fav{ position:relative; cursor:pointer; flex:none;
  transition:transform .45s cubic-bezier(.2,.7,.2,1), filter .45s;
  filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 9px 18px rgba(0,0,0,.55)); }
.gp-fav .frame{ position:absolute; inset:0; clip-path:var(--clip);
  background:linear-gradient(158deg,#cabfff 0%,#8a79e8 16%,#473a90 42%,#241c4c 58%,#5b4cb0 82%,#b6a7ff 100%); }
.gp-fav .frame::before{ content:""; position:absolute; inset:3px; clip-path:var(--clip); background:#0c0922; }
.gp-fav .topline{ position:absolute; top:0; left:11%; right:11%; height:3px; border-radius:2px;
  background:var(--accent-bright); box-shadow:0 0 5px var(--accent-glow); z-index:4; }
.gp-fav .artwrap{ position:absolute; inset:0 5px 5px 5px; clip-path:var(--clip); overflow:hidden;
  box-shadow:inset 0 0 0 1.5px rgba(183,170,255,.2), inset 0 0 24px rgba(0,0,0,.55); }
.gp-fav .art{ position:absolute; inset:0; background-size:cover; background-position:50% 14%;
  background-color:#0c0922; transition:transform .5s; }
.gp-fav .scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(8,6,18,.1) 0%, rgba(8,6,18,0) 24%, rgba(8,6,18,0) 52%, rgba(8,6,18,.82) 100%); }
.gp-fav .nm{ position:absolute; left:0; right:0; bottom:18px; z-index:5; text-align:center;
  font-family:'GI',serif; font-size:18.5px; color:#f6f3ff;
  text-shadow:0 1px 8px rgba(0,0,0,.8), 0 0 14px var(--accent-glow); }
.gp-fav .nm .sub{ display:block; margin-top:2px; font-family:'HSR',sans-serif; font-size:10.5px;
  letter-spacing:.08em; text-transform:uppercase; color:#cfc6f5; opacity:.86; }
.gp-fav .pin{ position:absolute; top:10px; right:14%; z-index:5; width:18px; height:18px; transform:rotate(45deg);
  background:linear-gradient(160deg,#e3dcff,#8b79ea); opacity:.9;
  box-shadow:0 0 10px var(--accent-glow); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.gp-fav:hover{ transform:translateY(-8px);
  filter:drop-shadow(0 0 9px var(--accent-bright)) drop-shadow(0 10px 20px rgba(0,0,0,.6)); }
.gp-fav:hover .art{ transform:scale(1.04); }

/* landscape favourite (variation C) */
.gp-fav.land .art{ background-position:50% 12%; }
.gp-fav.land .nm{ text-align:left; left:26px; bottom:16px; }

/* ===== panels ===== */
.gp-panel{ position:relative; padding:2px;
  filter:drop-shadow(0 0 4px rgba(139,123,255,.35)) drop-shadow(0 7px 16px rgba(0,0,0,.5)); }
.gp-panel .rim{ position:absolute; inset:0; clip-path:var(--hclip);
  background:linear-gradient(158deg,rgba(202,191,255,.85) 0%,rgba(106,90,200,.7) 30%,rgba(43,34,92,.8) 64%,rgba(140,122,235,.8) 100%); }
.gp-panel .body{ position:relative; clip-path:var(--hclip);
  background:linear-gradient(180deg, rgba(22,17,46,.96), rgba(10,8,26,.96)); }

/* ===== banner cards ===== */
.gp-ban{ position:relative; cursor:pointer; padding:2px;
  transition:transform .35s, filter .35s;
  filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 7px 16px rgba(0,0,0,.5)); }
.gp-ban:hover{ transform:translateY(-3px); filter:drop-shadow(0 0 9px var(--accent-glow)) drop-shadow(0 8px 18px rgba(0,0,0,.55)); }
.gp-ban .rim{ position:absolute; inset:0; clip-path:var(--hclip);
  background:linear-gradient(152deg,#cabfff 0%,#8a79e8 34%,#3a2f74 66%,#6253b8 100%); }
.gp-ban .body{ position:relative; clip-path:var(--hclip); overflow:hidden; background:#0c0922; }
.gp-ban .art{ position:absolute; inset:0; background-size:cover; background-position:center 30%; }
.gp-ban .art.ph{ background:repeating-linear-gradient(135deg, #161130 0 14px, #1b1540 14px 28px); }
.gp-ban .art .phnote{ position:absolute; top:12px; right:16px; font-family:ui-monospace,monospace;
  font-size:11px; color:#7d72ad; letter-spacing:.06em; }
.gp-ban .shade{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(7,5,18,.96) 0%, rgba(7,5,18,.84) 45%, rgba(7,5,18,.18) 84%); }
.gp-ban .inner{ position:relative; display:flex; flex-direction:column; justify-content:center; gap:8px;
  padding:18px 24px; }
.gp-ban .ban-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; min-width:0; }
.gp-ban .status{ display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.22em;
  text-transform:uppercase; color:var(--accent-bright); min-width:0; }
.gp-ban .status span:last-child{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gp-ban .status .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-bright);
  box-shadow:0 0 8px var(--accent-glow); }
.gp-ban .status.next{ color:var(--tx-dim); }
.gp-ban .status.next .dot{ background:var(--tx-dim); box-shadow:none; }
.gp-ban .bt{ font-family:'GI',serif; font-size:24px; color:#f7f4ff;
  text-shadow:0 0 16px var(--accent-glow), 0 2px 10px rgba(0,0,0,.7); }
.gp-ban .feat{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.gp-ban .chip{ display:inline-flex; align-items:center; gap:5px; height:23px; padding:0 11px;
  clip-path:var(--hclip); font-size:11.5px; letter-spacing:.06em; white-space:nowrap;
  background:rgba(139,123,255,.16); color:#ded6ff; box-shadow:inset 0 0 0 1px rgba(183,170,255,.25); }
.gp-ban .chip img{ width:18px; height:18px; flex:none; border-radius:50%; object-fit:cover; margin-left:-6px;
  box-shadow:0 0 0 1px rgba(255,255,255,.24), 0 0 8px rgba(139,123,255,.35); }
.gp-ban .chip.five{ background:linear-gradient(160deg, rgba(255,205,120,.22), rgba(255,170,80,.12));
  color:#ffe2b0; box-shadow:inset 0 0 0 1px rgba(255,205,140,.4); }
.gp-ban .cd{ display:flex; align-items:center; gap:10px; margin-top:3px; }
.gp-ban .cd .bar{ position:relative; width:min(210px, 64%); height:5px; border-radius:3px; background:rgba(183,170,255,.16); }
.gp-ban .cd .bar i{ position:absolute; inset:0 auto 0 0; width:42%; border-radius:2px;
  background:linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow:0 0 8px var(--accent-glow); }
.gp-ban .tm{ flex:none; font-size:12.5px; letter-spacing:.08em; color:#ffe2b0; text-shadow:0 0 10px rgba(227,178,105,.2); white-space:nowrap; }

/* ===== redemption code rows ===== */
.gp-code{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:6px 12px; padding:10px 13px 10px 15px;
  border-radius:10px; background:rgba(18,13,40,.6);
  box-shadow:inset 3px 0 0 var(--accent), inset 0 0 0 1px rgba(183,170,255,.13); }
.gp-code.premium{ box-shadow:inset 3px 0 0 #b7aaff, inset 0 0 0 1px rgba(183,170,255,.24); }
.gp-code .code-main{ min-width:0; display:flex; align-items:center; gap:8px; }
.gp-code .code-actions{ display:flex; align-items:center; justify-content:flex-end; gap:7px; }
.gp-code .cc{ font-family:ui-monospace,'Cascadia Mono',monospace; font-size:15.5px; letter-spacing:.07em;
  color:#f3f0ff; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; align-self:center; text-decoration:none; }
.gp-code a.cc:hover{ color:#cfc6ff; text-shadow:0 0 10px var(--accent-glow); }
.gp-code .rw{ grid-column:1 / -1; min-width:0; font-size:12.5px; color:var(--tx-dim); letter-spacing:.03em; line-height:1.3; }
.gp-code .cp{ position:relative; border:none; cursor:pointer; height:30px; padding:0 14px; flex:none;
  border-radius:7px; font-family:'HSR',sans-serif; font-size:11px; letter-spacing:.16em;
  text-transform:uppercase; color:#0c0922; font-weight:600;
  background:linear-gradient(160deg,#cfc4ff,#9a89ea); transition:filter .25s, transform .25s; }
.gp-code .cp:hover{ filter:brightness(1.12); transform:translateY(-1px); }
.gp-code .cp.ok{ background:linear-gradient(160deg,#d8b86a,#dd8f45); color:#170d12; }
.gp-code .cp.icon{ width:32px; padding:0; display:grid; place-items:center; color:#160c25; }
.gp-code .mark{ border:none; cursor:pointer; height:28px; padding:0 10px;
  border-radius:7px; font-family:'HSR',sans-serif; font-size:10px; letter-spacing:.12em; text-transform:uppercase;
  color:#cfc6f5; background:rgba(13,10,30,.55); box-shadow:inset 0 0 0 1px rgba(183,170,255,.22);
  transition:color .2s, box-shadow .2s, transform .2s; }
.gp-code .mark:hover{ color:#fff; transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(183,170,255,.5); }
.gp-code .premium-dot{ width:7px; height:7px; flex:none; border-radius:50%; background:#b7aaff; box-shadow:0 0 9px var(--accent-glow); }
.gp-code .newtag{ flex:none; font-family:'HSR',sans-serif; font-size:9px; letter-spacing:.14em; font-weight:700;
  padding:2px 6px; border-radius:5px; color:#0c0922; background:#b7aaff;
  box-shadow:0 0 10px var(--accent-glow); }

/* ===== redemption codes — dense table (layout D) ===== */
.gp-codes-table{ display:flex; flex-direction:column; min-width:0; border-radius:10px;
  background:rgba(14,10,32,.5); box-shadow:inset 0 0 0 1px rgba(183,170,255,.12); overflow:hidden; }
.gp-code-row{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; align-items:center; gap:10px;
  padding:4px 11px; border-bottom:1px solid rgba(183,170,255,.08); transition:background .15s; }
.gp-code-row:last-child{ border-bottom:none; }
.gp-code-row:hover{ background:rgba(139,123,255,.07); }
.gp-code-row.st-redeemed{ opacity:.5; }
.gp-code-row.st-redeemed .cc{ text-decoration:line-through; text-decoration-color:rgba(255,255,255,.5); }
.cc-check{ position:relative; width:18px; height:18px; flex:none; cursor:pointer; }
.cc-check input{ position:absolute; inset:0; width:100%; height:100%; margin:0; opacity:0; cursor:pointer; }
.cc-check .box{ position:absolute; inset:0; border-radius:5px; background:rgba(13,10,30,.6);
  box-shadow:inset 0 0 0 1.5px rgba(183,170,255,.4); transition:background .15s, box-shadow .15s; }
.cc-check input:checked + .box{ background:linear-gradient(160deg,#9a89ea,#6b5bd0); box-shadow:inset 0 0 0 1.5px rgba(207,196,255,.85); }
.cc-check input:checked + .box::after{ content:"\2713"; position:absolute; inset:0; display:grid; place-items:center; font-size:12px; color:#0c0922; font-weight:700; }
.cc-check input:focus-visible + .box{ box-shadow:inset 0 0 0 1.5px var(--accent-bright), 0 0 0 2px rgba(139,123,255,.4); }
.gp-code-row .cc{ font-family:ui-monospace,'Cascadia Mono',monospace; font-size:14px; letter-spacing:.05em; color:#f3f0ff;
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; cursor:pointer; }
.gp-code-row a.cc:hover{ color:#cfc6ff; text-decoration:underline; }
.gp-code-row .cc.no-link{ cursor:default; color:#cfc6ff; }
.cc-reward{ position:relative; display:inline-flex; align-items:center; gap:5px; flex:none; cursor:help; color:#ffe3b3; font-size:13px; }
.cc-reward img{ width:18px; height:18px; object-fit:contain; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.cc-reward .cur-glyph{ width:13px; height:13px; transform:rotate(45deg); background:linear-gradient(160deg,#cfc4ff,#8b7bff); }
.cc-reward b{ font-family:'GI',serif; font-weight:400; font-size:15px; color:#f8f2ff; }
/* G4: reward popout sits BELOW the cell (below the cursor), wraps to show EVERY
   reward with no "..." truncation. */
.cc-reward-pop{ position:absolute; right:0; top:calc(100% + 8px); z-index:50; width:max-content; max-width:300px;
  padding:9px 10px; border-radius:8px; background:rgba(7,5,16,.97);
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.28), 0 12px 28px rgba(0,0,0,.6);
  opacity:0; pointer-events:none; transform:translateY(-6px); transition:opacity .14s ease, transform .14s ease; }
.cc-reward-pop .reward-chips{ display:flex; flex-wrap:wrap; gap:5px; }
.cc-reward:hover .cc-reward-pop, .cc-reward:focus-within .cc-reward-pop{ opacity:1; transform:translateY(0); }
/* G2: copy is just the symbol — no container/box, and no gold on copy. */
.cc-copy{ width:28px; height:28px; flex:none; border:none; cursor:pointer; background:transparent; display:grid; place-items:center;
  color:#b9aeea; transition:color .18s, transform .15s; }
.cc-copy:hover{ color:#fff; transform:scale(1.12); }
/* overview Codes — keep at least 3 rows visible, scroll the rest, with a "N more below" hint */
.overview-codes-scroll{ position:relative; max-height:236px; overflow-y:auto; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:10px; padding-right:6px;
  -webkit-mask-image:linear-gradient(180deg, #000 calc(100% - 9px), transparent 100%);
  mask-image:linear-gradient(180deg, #000 calc(100% - 9px), transparent 100%); }
.overview-codes-scroll::-webkit-scrollbar{ width:6px; }
.overview-codes-scroll::-webkit-scrollbar-track{ background:rgba(183,170,255,.08); border-radius:3px; }
.overview-codes-scroll::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.45); border-radius:3px; }
.overview-codes-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(139,123,255,.7); }
.codes-more-hint{ display:flex; align-items:center; justify-content:center; gap:7px; margin-top:-8px;
  font-family:'HSR',sans-serif; font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:#b7aaff; pointer-events:none; }
.codes-more-hint .chev{ font-size:15px; line-height:1; animation:codes-more-bob 1.6s ease-in-out infinite; }
@keyframes codes-more-bob{ 0%,100%{ transform:translateY(0); opacity:.7; } 50%{ transform:translateY(2px); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .codes-more-hint .chev{ animation:none; } }
/* premium-currency vs non-currency code groups */
.codes-group{ display:flex; flex-direction:column; gap:7px; }
.codes-group + .codes-group{ margin-top:4px; }
.codes-group-hd{ display:flex; align-items:center; gap:8px; padding:0 2px;
  font-family:'HSR',sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#b7aaff; }
.codes-group-hd img{ width:18px; height:18px; object-fit:contain; flex:none; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.codes-group-hd .cur-glyph{ width:12px; height:12px; flex:none; transform:rotate(45deg);
  background:linear-gradient(160deg,#cfc4ff,#8b7bff); box-shadow:0 0 8px rgba(139,123,255,.4); }
.codes-group-hd .gl{ flex:none; }
.codes-group-hd .gn{ flex:none; font-size:9.5px; color:#9e93c8; }
.codes-group-hd .rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(183,170,255,.32), rgba(183,170,255,0)); }
/* non-currency reward cell — plain text, no currency image */
.cc-reward.plain{ color:#cfc6f5; cursor:help; }
.cc-reward.plain .reward-text{ font-size:12px; max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reward-chips{ display:flex; flex-wrap:wrap; gap:6px; min-width:0; }
.reward-chips span{ min-width:0; max-width:100%; min-height:22px; display:inline-flex; align-items:center; padding:3px 8px;
  border-radius:8px; background:rgba(139,123,255,.12); color:#cfc6f5;
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.14); font-size:12px; line-height:1.25; }
.reward-chips .more{ min-width:30px; justify-content:center; font-weight:700; cursor:help; color:#cfc6ff;
  background:rgba(139,123,255,.14); box-shadow:inset 0 0 0 1px rgba(139,123,255,.3); }

/* ===== misc rows ===== */
.gp-fn-row{ display:flex; align-items:center; gap:10px; cursor:pointer; padding:12px 11px;
  clip-path:var(--hclip); transition:background .25s; color:#d9d1fb; font-size:13.5px; letter-spacing:.05em;
  text-transform:uppercase; white-space:nowrap; }
.gp-fn-row:hover{ background:rgba(139,123,255,.13); color:#fff; }
/* the toast diamond is the selector marker: it shows on the active row and is
   reserved (transparent) on the others so labels stay aligned. */
.gp-fn-row .dia{ width:16px; height:27px; flex:none; opacity:0; transition:opacity .25s;
  background:url('../../assets/decor/toast_dia.png') center/contain no-repeat; }
.gp-fn-row:hover .dia{ opacity:.4; }
.gp-fn-row .go{ margin-left:auto; color:var(--accent-bright); font-size:14px; opacity:0;
  transition:opacity .25s; }
.gp-fn-row:hover .go{ opacity:1; }
.gp-fn-row.on{ background:rgba(139,123,255,.16); color:#fff;
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.35); }
.gp-fn-row.on .dia{ opacity:1; filter:drop-shadow(0 0 7px var(--accent-bright)); }
.gp-fn-row:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:-2px;
  background:rgba(139,123,255,.16); color:#fff; }
.gp-fn-row:focus-visible .dia{ opacity:.6; }

/* banner freshness / stale-data warning */
.gp-banner-fresh{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px;
  padding:8px 11px; border-radius:8px; font-size:12px; line-height:1.3;
  background:rgba(230,180,80,.10); box-shadow:inset 0 0 0 1px rgba(230,180,80,.32); color:#e8cf9a; }
.gp-banner-fresh .dot{ width:8px; height:8px; flex:none; border-radius:50%; background:#e6b450;
  box-shadow:0 0 8px rgba(230,180,80,.7); }
.gp-banner-fresh .lbl{ font-weight:600; }
.gp-banner-fresh .chk{ margin-left:auto; color:#bcae90; font-size:11px; letter-spacing:.02em; }
.gp-banner-fresh.st-unavailable{ background:rgba(217,85,119,.10); box-shadow:inset 0 0 0 1px rgba(217,85,119,.3); color:#f0b7c4; }
.gp-banner-fresh.st-unavailable .dot{ background:#d95577; box-shadow:0 0 8px rgba(217,85,119,.7); }

.gp-layout{ flex:1; min-width:0; min-height:0; display:grid; grid-template-columns:208px minmax(0, 1fr);
  gap:22px; overflow:hidden; }
.gp-layout.has-aside{ grid-template-columns:208px minmax(0, 1fr) minmax(300px, 360px); }
.gp-side-nav{ display:flex; flex-direction:column; gap:8px; min-width:0; min-height:0; overflow:auto; padding-right:2px; }
.gp-side-nav::-webkit-scrollbar{ width:5px; height:5px; }
.gp-side-nav::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.45); border-radius:4px; }
.gp-main-pane{ min-width:0; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.gp-main-pane.fill{ grid-column:2 / -1; }

.gp-world-row{ display:flex; align-items:center; gap:12px; cursor:pointer; padding:7px 10px;
  border-radius:6px; transition:background .25s; }
.gp-world-row:hover{ background:rgba(139,123,255,.1); }
.gp-world-row .wn{ font-size:13.5px; color:#cfc6f0; letter-spacing:.02em; }
.gp-world-row:hover .wn{ color:#fff; }

.gp-divider{ height:1px; background:linear-gradient(90deg, rgba(183,170,255,0), rgba(183,170,255,.35), rgba(183,170,255,0)); }

/* ===== card row (turns into a slider only when cards no longer fit) ===== */
.gp-cardrow{ display:flex; gap:16px; padding:16px 4px 6px; }
.gp-cardrow.scroll{ overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:12px; }
.gp-cardrow.scroll::-webkit-scrollbar{ height:6px; }
.gp-cardrow.scroll::-webkit-scrollbar-track{ background:rgba(183,170,255,.08); border-radius:3px; }
.gp-cardrow.scroll::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.45); border-radius:3px; }
.gp-cardrow.scroll::-webkit-scrollbar-thumb:hover{ background:rgba(139,123,255,.7); }

/* edit-mode text controls resting above the card frame */
.gp-fav .ctl{ position:absolute; left:0; right:0; top:calc(100% + 8px); bottom:auto; z-index:6;
  display:flex; align-items:center; justify-content:center; gap:14px;
  opacity:0; pointer-events:none; transition:opacity .25s; }
.gp-favs.manage .gp-fav .ctl{ opacity:1; pointer-events:auto; }
.gp-fav .ctl button{ border:none; background:none; cursor:pointer; padding:4px 2px;
  font-family:'HSR','Segoe UI',sans-serif; font-size:12px; letter-spacing:.16em; text-transform:uppercase;
  color:#a99fd6; transition:color .2s, text-shadow .2s; }
.gp-fav .ctl .th:hover{ color:#fff; text-shadow:0 0 10px var(--accent-glow); }
.gp-fav .ctl .tr:hover{ color:#ff9db4; text-shadow:0 0 10px rgba(217,85,119,.6); }
.gp-fav .ctl .sep{ width:5px; height:5px; flex:none; transform:rotate(45deg); background:#6a5fa0; }
.gp-favs.manage .gp-cardrow{ padding-bottom:42px; }

.gp-fav-picker{ margin:4px auto 0; width:min(100%, 920px); max-height:188px; overflow:auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:10px; padding:12px 14px;
  background:linear-gradient(180deg, rgba(20,15,42,.76), rgba(8,6,21,.76));
  border-radius:14px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.2), 0 12px 30px rgba(0,0,0,.28);
  scrollbar-width:thin; scrollbar-color:rgba(139,123,255,.55) rgba(183,170,255,.08); }
.gp-fav-picker button{ min-width:0; min-height:48px; display:flex; align-items:center; gap:10px;
  padding:7px 11px 7px 7px; border:none; cursor:pointer; border-radius:11px;
  font-family:'HSR','Segoe UI',sans-serif; font-size:12px; letter-spacing:.04em; color:#d9d2f6;
  background:rgba(255,255,255,.045); box-shadow:inset 0 0 0 1px rgba(183,170,255,.18);
  transition:transform .2s, color .2s, box-shadow .2s, background .2s; }
.gp-fav-picker button:hover:not(:disabled){ transform:translateY(-2px); color:#fff;
  background:rgba(139,123,255,.16); box-shadow:inset 0 0 0 1px rgba(183,170,255,.42), 0 0 18px rgba(139,123,255,.18); }
.gp-fav-picker button.replace{ box-shadow:inset 0 0 0 1px rgba(221,0,68,.22); }
.gp-fav-picker button:disabled{ opacity:.42; cursor:not-allowed; }
.gp-fav-picker .pick-ico{ width:34px; height:34px; flex:none; display:grid; place-items:center;
  position:relative; transform:rotate(45deg); overflow:visible; border-radius:5px;
  background:linear-gradient(160deg,#9a89ea,#372464);
  box-shadow:inset 0 0 0 1.5px rgba(205,179,255,.62), 0 0 12px rgba(139,123,255,.28); }
.gp-fav-picker .pick-ico > img{ width:142%; height:142%; object-fit:cover; transform:rotate(-45deg); border-radius:7px; }
.gp-fav-picker .pick-ico i{ position:absolute; right:-7px; bottom:-7px; width:18px; height:18px; display:grid; place-items:center;
  border-radius:50%; overflow:hidden; background:#090616; box-shadow:0 0 0 1px rgba(216,184,106,.62), 0 0 8px rgba(0,0,0,.6); }
.gp-fav-picker .pick-ico i img{ width:100%; height:100%; object-fit:contain; transform:rotate(-45deg); }
.gp-fav-picker .pick-meta{ min-width:0; display:flex; flex-direction:column; gap:2px; text-align:left; }
.gp-fav-picker .pick-meta b,
.gp-fav-picker .pick-meta em{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gp-fav-picker .pick-meta b{ font-size:12.5px; color:#f3efff; font-weight:500; }
.gp-fav-picker .pick-meta em{ font-style:normal; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#a99fd6; }
.gp-fav-picker .empty{ padding:10px 0; font-family:'HSR','Segoe UI',sans-serif; font-size:12px;
  letter-spacing:.08em; color:#8e83b8; text-transform:uppercase; }

/* "+" pin slot (Edit mode only) */
.gp-add{ position:relative; flex:none; cursor:pointer; display:grid; place-items:center;
  border:0; background:none; padding:0; appearance:none; -webkit-appearance:none;
  transition:transform .3s, filter .3s; filter:drop-shadow(0 0 4px rgba(139,123,255,.2)); }
.gp-add:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:3px; }
.gp-fav .ctl button:disabled{ opacity:.35; cursor:default; }
.gp-fav .ctl button:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; border-radius:5px; }
.gp-add .fr{ position:absolute; inset:0; clip-path:var(--clip); opacity:.55;
  background:linear-gradient(158deg, rgba(202,191,255,.65), rgba(70,58,144,.65)); transition:opacity .3s; }
.gp-add .fr::before{ content:""; position:absolute; inset:2px; clip-path:var(--clip); background:rgba(11,8,30,.94); }
.gp-add .plus{ position:relative; z-index:2; font-family:'GI',serif; font-size:32px; color:#8d82bd; transition:color .3s; }
.gp-add:hover{ filter:drop-shadow(0 0 9px var(--accent-glow)); }
.gp-add:hover .fr{ opacity:.95; }
.gp-add:hover .plus, .gp-add.dt .plus{ color:#fff; }
.gp-add.dt{ transform:scale(1.04); filter:drop-shadow(0 0 11px var(--accent-bright)); }
.gp-add.dt .fr{ opacity:1; }

/* search bar */
.gp-search{ position:relative; display:flex; align-items:center; gap:9px; height:40px; width:214px; flex:none;
  padding:0 12px 0 16px; clip-path:var(--hclip);
  background:linear-gradient(180deg, rgba(28,22,58,.85), rgba(13,10,30,.85));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.28); transition:box-shadow .25s; }
.gp-search:focus-within{ box-shadow:inset 0 0 0 1px rgba(183,170,255,.6), inset 0 0 14px rgba(139,123,255,.12); }
.gp-search .ic{ width:13px; height:13px; flex:none; border-radius:50%;
  border:1.5px solid #8d82bd; position:relative; }
.gp-search .ic::after{ content:""; position:absolute; width:1.5px; height:6px; background:#8d82bd;
  bottom:-5px; right:-2px; transform:rotate(-45deg); }
.gp-search input{ flex:1; min-width:0; border:none; outline:none; background:none;
  font-family:'HSR','Segoe UI',sans-serif; font-size:13px; letter-spacing:.05em; color:#efeaff; }
.gp-search input::placeholder{ color:#7d72ad; }
.gp-search .x{ border:none; background:none; cursor:pointer; flex:none; padding:2px 4px;
  font-size:11px; color:#a99fd6; transition:color .2s; }
.gp-search .x:hover{ color:#fff; }

/* search-faded cards */
.gp-fav.faded{ opacity:.16; filter:grayscale(1) brightness(.6); pointer-events:none; }

/* ===== greyed medallion (inactive worlds / overflow favourites) ===== */
.gp-med.dim{ filter:grayscale(1) brightness(.55); opacity:.8; transition:filter .35s, opacity .35s, box-shadow .35s, transform .35s; }
.gp-med.dim:hover{ filter:none; opacity:1; }

/* ===== nyx logo back button ===== */
.gp-logo-btn{ border:none; background:none; cursor:pointer; padding:0; flex:none;
  transition:transform .3s cubic-bezier(.2,.7,.2,1); }
.gp-logo-btn img{ display:block; width:54px; height:54px; object-fit:contain;
  filter:brightness(0) invert(1) drop-shadow(0 2px 8px rgba(0,0,0,.6));
  transition:filter .3s; }
.gp-logo-btn:hover{ transform:translateY(-2px); }
.gp-logo-btn:hover img{ filter:brightness(0) invert(1) drop-shadow(0 0 12px rgba(183,170,255,.95)); }

/* ===== compact banner cards (stacked 2+2 column) ===== */
.gp-ban.compact .inner{ padding:15px 22px; gap:8px; justify-content:center; }
.gp-ban.compact .ban-head{ align-items:flex-start; }
.gp-ban.compact .status{ font-size:11.5px; letter-spacing:.18em; }
.gp-ban.compact .tm{ font-size:12px; max-width:42%; overflow:hidden; text-overflow:ellipsis; }
.gp-ban.compact .bt{ font-size:24px; line-height:1; }
.gp-ban.compact .chip{ height:25px; padding:0 11px; font-size:12px; }
.gp-ban.compact .chip.five{ height:30px; padding:0 14px; font-size:13px; }
.gp-ban.compact .chip.five img{ width:24px; height:24px; margin-left:-8px; }
.gp-ban.compact .cd{ margin-top:0; }
.gp-ban.compact .cd .bar{ width:72%; height:5px; }
.gp-ban.compact .shade{ background:linear-gradient(90deg, rgba(7,5,18,.97) 0%, rgba(7,5,18,.86) 48%, rgba(7,5,18,.18) 86%); }

/* ===== banner — layout F (art-forward, 4★ icons, big duration below) ===== */
.gp-ban.f{ padding:0; cursor:default; display:flex; flex-direction:column; gap:7px; }
.gp-ban.f:hover{ transform:none; filter:none; }
.gp-ban.f .ban-art-card{ position:relative; border-radius:12px; overflow:hidden; background:#0c0922;
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.2), 0 8px 18px rgba(0,0,0,.45); }
.gp-ban.f .art{ position:absolute; inset:0; background-size:cover; background-position:center 22%; }
.gp-ban.f .shade{ position:absolute; inset:0;
  background:linear-gradient(0deg, rgba(6,4,16,.96) 0%, rgba(6,4,16,.55) 33%, rgba(6,4,16,0) 64%); }
.gp-ban.f .status.f{ position:absolute; top:10px; left:12px; display:inline-flex; align-items:center; gap:7px;
  font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:#ded6ff;
  background:rgba(8,5,20,.62); padding:4px 9px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.24); }
.gp-ban.f .status.f .dot{ width:6px; height:6px; border-radius:50%; background:var(--accent-bright); box-shadow:0 0 8px var(--accent-glow); }
.gp-ban.f .status.f.next{ color:var(--tx-dim); }
.gp-ban.f .status.f.next .dot{ background:var(--tx-dim); box-shadow:none; }
/* G32: name top-left; 4★ icons bottom-left; end date bottom-right; no "Ongoing". */
.gp-ban.f .ban-name{ position:absolute; top:10px; left:13px; z-index:2; font-family:'GI',serif; font-size:24px; line-height:1;
  color:#f7f4ff; text-shadow:0 2px 12px rgba(0,0,0,.85); }
.gp-ban.f .ban-flag{ position:absolute; top:12px; right:12px; z-index:2; font-size:9.5px; letter-spacing:.16em; text-transform:uppercase;
  color:#ded6ff; background:rgba(8,5,20,.62); padding:3px 8px; border-radius:999px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.24); }
.gp-ban.f .ban-bottom{ position:absolute; left:0; right:0; bottom:0; padding:10px 13px; display:flex; flex-direction:row;
  align-items:flex-end; justify-content:space-between; gap:10px; }
.gp-ban.f .four-icons{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-height:1px; }
.gp-ban.f .four-icons img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 1.5px rgba(183,170,255,.5), 0 2px 6px rgba(0,0,0,.5); background:#0c0922; }
.gp-ban.f .four-init{ width:30px; height:30px; border-radius:50%; flex:none; display:grid; place-items:center;
  font-family:'GI',serif; font-size:14px; color:#cfc6ff; background:rgba(20,15,46,.85); box-shadow:0 0 0 1.5px rgba(183,170,255,.4); }
.gp-ban.f .ban-date{ flex:none; align-self:flex-end; font-family:'GI',serif; font-size:14px; letter-spacing:.02em;
  color:#ffe2b0; text-shadow:0 1px 8px rgba(0,0,0,.8); white-space:nowrap; }
/* G33: compact "Next" sub-banner — smaller name/icons/date. */
.gp-ban.f.isnext .ban-name{ font-size:17px; }
.gp-ban.f.isnext .four-icons img, .gp-ban.f.isnext .four-init{ width:24px; height:24px; }
.gp-ban.f.isnext .ban-date{ font-size:12px; }

/* ===== bare root (page-level bg handles backdrop) ===== */
.gp.bare{ background:transparent; }

/* ===== draggable favourites ===== */
.gp-fav.grab{ cursor:grab; }
.gp-fav.grab:active{ cursor:grabbing; }
.gp-fav.dt{ transform:translateY(-10px) scale(1.02);
  filter:drop-shadow(0 0 12px var(--accent-bright)) drop-shadow(0 0 26px var(--accent-glow)) drop-shadow(0 10px 22px rgba(0,0,0,.6)); }
.gp-fav.dragging{ opacity:.4; }

/* ===== bench (overflow favourites, large icons) ===== */
.gp-bench{ display:flex; justify-content:space-between; align-items:center; }
.gp-bench-ic{ position:relative; border-radius:50%; cursor:grab; flex:none;
  display:grid; place-items:center;
  background:radial-gradient(circle at 50% 35%, #1b1640, #0a0820);
  box-shadow:0 0 0 2px rgba(183,170,255,.45), 0 0 12px rgba(139,123,255,.25), 0 5px 12px rgba(0,0,0,.55);
  filter:grayscale(.85) brightness(.78);
  transition:filter .3s, transform .3s, box-shadow .3s, opacity .3s; }
.gp-bench-ic:active{ cursor:grabbing; }
.gp-bench-ic img{ border-radius:50%; object-fit:cover; pointer-events:none; }
.gp-bench-ic .num{ position:absolute; bottom:-2px; right:-2px; width:24px; height:24px; border-radius:50%;
  display:grid; place-items:center; font-family:'HSR',sans-serif; font-size:11.5px; font-weight:600;
  color:#0c0922; background:linear-gradient(160deg,#d3c8ff,#9a89ea);
  box-shadow:0 0 0 2px #0a0820, 0 2px 6px rgba(0,0,0,.5); }
.gp-bench-ic:hover{ filter:none; transform:translateY(-4px);
  box-shadow:0 0 0 2px var(--accent-bright), 0 0 18px var(--accent-glow), 0 5px 12px rgba(0,0,0,.55); }
.gp-bench-ic.dt{ filter:none; transform:scale(1.08);
  box-shadow:0 0 0 2px #fff, 0 0 22px var(--accent-glow), 0 5px 12px rgba(0,0,0,.55); }
.gp-bench-ic.dragging{ opacity:.35; }

/* ===== favourite card — battle-pass frame variant (.bpf) =====
   Frame = real asset (assets/cards/fav_frame.png). Art is masked to the
   frame's exact silhouette (fav_frame_mask.png, alpha-boosted, keeps the
   designed bottom fade); the rim/star overlay (fav_frame_rim.png) draws on
   top with the interior mist suppressed so it never fogs the art. */
.gp-fav.bpf .frame{ position:absolute; inset:0; clip-path:none; z-index:3; pointer-events:none;
  background:url('../../assets/cards/fav_frame_rim2.png') center/100% 100% no-repeat; }
.gp-fav.bpf .frame::before{ content:none; }
.gp-fav.bpf .artwrap{ inset:0; clip-path:none; box-shadow:none;
  -webkit-mask:url('../../assets/cards/fav_frame_mask2.png') center/100% 100% no-repeat;
  mask:url('../../assets/cards/fav_frame_mask2.png') center/100% 100% no-repeat; }
.gp-fav.bpf .scrim{ background:linear-gradient(180deg, rgba(8,6,18,0) 0%, rgba(8,6,18,0) 64%, rgba(8,6,18,.55) 90%); }

/* ===== bench icons — 9a mosaic: interlocking diamonds, edges touching =====
   Lozenge w×1.73w; odd/even rows offset ±h/4 and each diamond overlaps the
   previous by half a width, so the edges meet exactly (Card Styles v9 · 9a). */
.gp-bench-grid{ display:grid; justify-content:center; align-items:center; width:100%; }
.gp-bench-dia{ position:relative; flex:none; cursor:grab; z-index:1;
  transform:translateY(var(--oy,0));
  filter:drop-shadow(0 5px 10px rgba(0,0,0,.5));
  transition:filter .3s, transform .3s, opacity .3s; }
.gp-bench-dia:active{ cursor:grabbing; }
/* layered diamond build from the rogue-DLC assets: container backplate
   (glow halo overflows the tile), art clipped to the diamond, gem overlay
   at very low opacity, thin highlight outline on top. Layer geometry maps
   each asset's measured diamond bbox onto the tile diamond. */
.gp-bench-dia .cbg{ position:absolute; left:-53.5%; top:-14.6%; width:206.3%; height:130%;
  pointer-events:none; }
.gp-bench-dia .aw{ position:absolute; inset:4.5%; overflow:hidden;
  clip-path:polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.gp-bench-dia .aw .ci{ width:100%; height:100%; object-fit:cover; object-position:50% 28%;
  display:block; pointer-events:none; transform:scale(1); transform-origin:50% 34%; }
.gp-favs.game-gi .gp-bench-dia .aw .ci,
.gp-favs.game-ae .gp-bench-dia .aw .ci{ transform:scale(.91); }
.gp-favs.game-zzz .gp-bench-dia .aw .ci{ transform:scale(1.12); }
.gp-bench-dia .aw .ovl{ position:absolute; left:-27.5%; top:-15.5%; width:153.3%; height:131%;
  opacity:.14; mix-blend-mode:screen; pointer-events:none; }
.gp-bench-dia .hl{ position:absolute; left:-6.1%; top:-3.5%; width:112.2%; height:107%;
  pointer-events:none; }
.gp-bench-dia:hover{ z-index:6; transform:translateY(var(--oy,0)) scale(1.05);
  filter:drop-shadow(0 0 8px rgba(139,123,255,.55)) drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
.gp-bench-dia.dt{ z-index:7; transform:translateY(var(--oy,0)) scale(1.08);
  filter:drop-shadow(0 0 10px var(--accent-bright)) drop-shadow(0 6px 12px rgba(0,0,0,.55)); }
.gp-bench-dia.dragging{ opacity:.35; }
.gp-bench-dia.faded{ opacity:.16; filter:grayscale(1) brightness(.5); pointer-events:none; }
.gp-bench-dia .bx, .gp-bench-dia .bp{ position:absolute; width:22px; height:22px; border:none; cursor:pointer;
  border-radius:50%; display:grid; place-items:center; padding:0;
  background:linear-gradient(160deg,#3a2d6e,#1a1334);
  box-shadow:0 0 0 1.5px rgba(183,170,255,.4), 0 2px 6px rgba(0,0,0,.5);
  opacity:0; pointer-events:none; transition:opacity .25s, background .25s; z-index:3; }
.gp-bench-dia .bx{ left:calc(75% - 11px); top:calc(25% - 11px); }
.gp-bench-dia .bp{ left:calc(25% - 11px); top:calc(25% - 11px); }
.gp-bench-dia .bx::before{ content:"\2715"; font-size:9px; line-height:1; color:#d6cdf7; font-family:'HSR',sans-serif; }
.gp-bench-dia .bp::before{ content:"+"; font-size:14px; line-height:1; color:#d6cdf7; font-family:'HSR',sans-serif; }
.gp-favs.manage .gp-bench-dia .bx, .gp-favs.manage .gp-bench-dia .bp{ opacity:.95; pointer-events:auto; }
.gp-bench-dia .bx:hover{ background:linear-gradient(160deg,#ffc2d1,#d95577); }
.gp-bench-dia .bx:hover::before{ color:#2b0a14; }

/* ===== hub-unified top bar =====
   Same vocabulary as index.html: living-eye logo hugging the top-left
   (click → back to Worlds), Nyx wordmark on the achievement-cycle plate
   top-right, principal-frame banner buttons centered with the game medallions
   to their left. Scaled to bar height so page content keeps its room. */
.gp-topbar{ position:relative; height:132px; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(180deg, rgba(10,7,24,.85), rgba(10,7,24,0)); }
/* left brand — the living eye sits BEHIND the "Nyx" wordmark on the decorative
   plate; the whole group (and the right-hand Pengo icon) link to the index */
.gp-topbar .tb-brand{ position:absolute; top:50%; left:160px; transform:translateY(-50%); z-index:6;
  display:inline-flex; align-items:center; height:96px; padding:0 28px 0 64px; text-decoration:none; cursor:pointer; }
.gp-topbar .tb-brand .plate{ position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  width:448px; height:86px; pointer-events:none;
  background:url('../../assets/decor/achievement_cycle.png') center/100% 100% no-repeat;
  mix-blend-mode:screen; opacity:.5;
  -webkit-mask:linear-gradient(90deg, #000 0%, #000 36%, transparent 92%);
  mask:linear-gradient(90deg, #000 0%, #000 36%, transparent 92%); }
.gp-topbar .tb-brand .brand-mark{ position:relative; display:inline-flex; align-items:center; gap:30px; }
/* the living eye sits well after the Nyx wordmark (in-flow), larger than the cap height. */
.gp-topbar .tb-brand .tb-eye{ position:relative; left:auto; top:auto; transform:none;
  width:74px; height:74px; flex:none; z-index:2; pointer-events:none;
  filter:drop-shadow(0 0 7px var(--accent-glow)) drop-shadow(0 3px 10px rgba(0,0,0,.6)); transition:filter .35s; }
.gp-topbar .tb-brand .wm{ position:relative; z-index:2; font-family:'GI',serif; font-size:50px; line-height:.9;
  letter-spacing:.06em; color:#f7f4ff; text-shadow:0 0 22px var(--accent-glow), 0 2px 16px rgba(0,0,0,.78); }
.gp-topbar .tb-brand:hover .wm{ color:#fff; text-shadow:0 0 28px var(--accent-bright), 0 2px 16px rgba(0,0,0,.78); }
.gp-topbar .tb-brand:hover .tb-eye{ filter:drop-shadow(0 0 11px var(--accent-bright)) drop-shadow(0 3px 10px rgba(0,0,0,.6)); }
/* right — Pengo icon, also links to the index */
.gp-topbar .tb-pengo{ position:absolute; top:50%; right:24px; transform:translateY(-50%); z-index:6;
  display:inline-flex; cursor:pointer; transition:transform .3s, filter .3s;
  filter:drop-shadow(0 0 8px var(--accent-glow)) drop-shadow(0 3px 10px rgba(0,0,0,.55)); }
.gp-topbar .tb-pengo img{ height:74px; width:auto; display:block; }
.gp-topbar .tb-pengo:hover{ transform:translateY(-50%) scale(1.06);
  filter:drop-shadow(0 0 12px var(--accent-bright)) drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
/* bottom-left page corner: G7 — the mirrored Pengo sits ABOVE the Live/Beta toggle
   (column-reverse puts the last DOM child, the Pengo, on top). */
.gp-corner{ position:absolute; left:26px; bottom:18px; z-index:7;
  display:flex; flex-direction:column-reverse; align-items:flex-start; gap:10px; pointer-events:none; }
.gp-corner > *{ pointer-events:auto; }
.gp-corner .tb-pengo.corner{ position:static; transform:none; display:inline-flex; cursor:pointer;
  transition:transform .3s, filter .3s;
  filter:drop-shadow(0 0 8px var(--accent-glow)) drop-shadow(0 3px 10px rgba(0,0,0,.55)); }
.gp-corner .tb-pengo.corner img{ height:62px; width:auto; display:block; transform:scaleX(-1); }
.gp-corner .tb-pengo.corner:hover{ transform:scale(1.06);
  filter:drop-shadow(0 0 12px var(--accent-bright)) drop-shadow(0 4px 12px rgba(0,0,0,.6)); }
.gp-topbar .elayer{ position:absolute; inset:0; background:#f7f4ff;
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:100% 100%; mask-size:100% 100%; }
.gp-topbar .elayer.ball{ -webkit-mask-image:url('../../assets/icon/eye_ball.png'); mask-image:url('../../assets/icon/eye_ball.png');
  transition:transform 1.3s cubic-bezier(.45,.05,.3,1); will-change:transform; }
.gp-topbar .elayer.lid{ -webkit-mask-image:url('../../assets/icon/eye_lid.png'); mask-image:url('../../assets/icon/eye_lid.png'); }
.gp-topbar .elayer.drips{ -webkit-mask-image:url('../../assets/icon/eye_drips.png'); mask-image:url('../../assets/icon/eye_drips.png'); }
.gp-topbar .tb-center{ display:flex; align-items:center; gap:20px; }
.gp-topbar .gp-med{ width:74px; height:74px; }
.gp-topbar .gp-med img{ width:60px; height:60px; }
.gp-topbar .gp-med img.glyph{ width:42px; height:42px; }
.gp-topbar .gp-med.sz-sm{ width:64px; height:64px; }
.gp-topbar .gp-med.sz-sm img{ width:52px; height:52px; }
.gp-topbar .gp-med.sz-sm img.glyph{ width:30px; height:30px; }
.gp-topbar .banner{ position:relative; height:54px; border:none; cursor:pointer;
  display:flex; align-items:center; padding:0 30px;
  background:url('../../assets/cards/principal_frame.png') center/100% 100% no-repeat;
  font-family:'HSR','Segoe UI',sans-serif; font-size:15px; letter-spacing:.16em; text-transform:uppercase;
  color:#ece6ff; text-shadow:0 1px 6px rgba(8,5,26,.9); white-space:nowrap;
  filter:drop-shadow(0 0 4px var(--accent-glow)) drop-shadow(0 6px 14px rgba(0,0,0,.5));
  transition:transform .35s cubic-bezier(.2,.7,.2,1), filter .35s; }
.gp-topbar .banner{ justify-content:center; min-width:248px; }
.gp-topbar .banner:hover{ transform:translateY(-3px);
  filter:brightness(1.15) drop-shadow(0 0 8px var(--accent-glow)) drop-shadow(0 8px 16px rgba(0,0,0,.55)); }
/* seated mascot perched on the top-left of the All Banners button */
.banner-seat{ position:absolute; left:-18px; bottom:-10px; height:112px; width:auto; z-index:4;
  pointer-events:none; filter:drop-shadow(0 5px 9px rgba(0,0,0,.55)); }
/* seated mascot perched on top of the search box */
.gp-search-wrap{ position:relative; flex:none; margin-right:16px; }
.search-seat{ position:absolute; right:22px; bottom:-14px; height:74px; width:auto; z-index:4;
  pointer-events:none; filter:drop-shadow(0 5px 9px rgba(0,0,0,.55)); }
.gp-bench-dia .bp:hover{ background:linear-gradient(160deg,#d3c8ff,#9a89ea); }
.gp-bench-dia .bp:hover::before{ color:#0c0922; }

/* ===== scrollable codes list ===== */
.gp-codes-scroll{ overflow-y:auto; overscroll-behavior:contain; padding-right:8px;
  display:flex; flex-direction:column; gap:8px; }
.gp-codes-scroll::-webkit-scrollbar{ width:6px; }
.gp-codes-scroll::-webkit-scrollbar-track{ background:rgba(183,170,255,.08); border-radius:3px; }
.gp-codes-scroll::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.45); border-radius:3px; }
.gp-codes-scroll::-webkit-scrollbar-thumb:hover{ background:rgba(139,123,255,.7); }
.gp-code{ flex:none; }
.overview-codes{ padding-right:7px; }
.overview-codes .gp-code{ padding:12px 13px; gap:8px 10px; }
.overview-codes .reward-chips{ gap:5px; }
.overview-codes .reward-chips span{ min-height:20px; padding:2px 7px; font-size:11px; }
.gp-code .cp.ask{ background:linear-gradient(160deg,#ffe3b3,#e3b269); }
.gp-code.redeemed,
.gp-code.st-redeemed{ opacity:.45; filter:grayscale(.75); }
.gp-code.st-copied{ box-shadow:inset 0 0 0 1.5px rgba(216,184,106,.44), 0 0 16px rgba(216,184,106,.1); }

.code-filter{ min-height:36px; display:flex; align-items:center; gap:9px; padding:0 12px 0 10px;
  clip-path:var(--hclip); background:linear-gradient(180deg, rgba(28,22,58,.72), rgba(13,10,30,.72));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.22); color:#d9d1fb;
  font-family:'HSR',sans-serif; font-size:12px; letter-spacing:.08em; text-transform:uppercase; cursor:pointer; }
.code-filter.on{ box-shadow:inset 0 0 0 1.5px rgba(139,123,255,.6), 0 0 16px rgba(139,123,255,.16); }
.code-filter.disabled{ opacity:.48; cursor:not-allowed; }
.code-filter.wide{ flex:none; }
.code-filter input{ width:15px; height:15px; accent-color:#8b7bff; cursor:pointer; }
.code-filter input:disabled{ cursor:not-allowed; }
.code-filter img{ width:24px; height:24px; object-fit:contain; filter:drop-shadow(0 2px 5px rgba(0,0,0,.35)); }
.code-filter .cur-glyph{ width:18px; height:18px; transform:rotate(45deg);
  background:linear-gradient(160deg,#cfc4ff,#8b7bff); box-shadow:0 0 10px rgba(139,123,255,.42); }
.code-filter-text{ min-width:0; display:flex; flex-direction:column; line-height:1.05; }
.code-filter-text b{ min-width:0; max-width:126px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:600; }
.code-filter-text small{ margin-top:2px; font-size:9.5px; letter-spacing:.12em; color:#9e93c8; }
.code-empty{ padding:18px; text-align:center; color:#8d82bd; font-size:12px; letter-spacing:.1em; text-transform:uppercase; }

/* ===== Nyx personal page — all-games tabs ===== */
.sim-codegroup{ display:flex; flex-direction:column; gap:9px; flex:none; }
.sim-grouphd{ display:flex; align-items:center; gap:10px; }
.sim-grouphd img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 1.5px rgba(183,170,255,.5); }
.sim-grouphd .gn{ font-family:'GI',serif; font-size:16px; color:#efeaff; white-space:nowrap;
  text-shadow:0 0 14px var(--accent-glow); }
.sim-grouphd .rule{ flex:1; height:1px; background:linear-gradient(90deg, rgba(183,170,255,.4), rgba(183,170,255,0)); }
.sim-bangrid{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.sim-ban{ position:relative; height:152px; overflow:hidden; clip-path:var(--hclip);
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.25);
  filter:drop-shadow(0 6px 14px rgba(0,0,0,.45)); transition:transform .3s; cursor:pointer; }
.sim-ban:hover{ transform:translateY(-3px); }
.sim-ban .art{ position:absolute; inset:0; background-size:cover; }
.sim-ban .shade{ position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,6,18,.92) 0%, rgba(8,6,18,.55) 52%, rgba(8,6,18,.15) 100%); }
.sim-ban .inner{ position:absolute; inset:0; padding:14px 18px; display:flex; flex-direction:column; gap:7px; }
.sim-ban .top{ display:flex; align-items:center; gap:9px; }
.sim-ban .top .gi{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:0 0 0 1.5px rgba(183,170,255,.5); }
.sim-ban .top .gn{ font-family:'GI',serif; font-size:14px; color:#efeaff; }
.sim-ban .top .ph{ margin-left:auto; font-size:10px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--accent-bright); }
.sim-ban .bt{ font-family:'GI',serif; font-size:21px; color:#f7f4ff;
  text-shadow:0 0 14px var(--accent-glow), 0 2px 8px rgba(0,0,0,.7); }
.sim-ban .feat{ display:flex; flex-wrap:wrap; gap:6px; }
.sim-ban .chip{ display:inline-flex; align-items:center; height:21px; padding:0 10px; font-size:11px;
  border-radius:11px; background:rgba(20,15,42,.72); color:#d9d1fb;
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.3); }
.sim-ban .chip.five{ background:linear-gradient(160deg, rgba(227,178,105,.34), rgba(120,80,30,.34));
  box-shadow:inset 0 0 0 1px rgba(255,210,140,.5); color:#ffe6bd; }
.sim-ban .tm{ margin-top:auto; font-size:12px; color:#cfc6f5; letter-spacing:.06em; }
.gp-code.redeemed .cc,
.gp-code.st-redeemed .cc{ text-decoration:line-through; text-decoration-color:rgba(255,255,255,.55); }
.gp-code.redeemed .cp,
.gp-code.st-redeemed .cp{ cursor:pointer; background:linear-gradient(160deg,#8d87a8,#6b6584); }

/* ===== per-game background art (crossfades on tab switch) ===== */
.nyx-bgwrap{ position:fixed; inset:0; pointer-events:none; }
.nyx-bgart{ position:absolute; inset:-8vmax; background-size:cover; background-repeat:no-repeat;
  opacity:0; transition:opacity .55s ease; transform-origin:center center; }
.nyx-bgart.on{ opacity:1 !important; }
.nyx-bgscrim{ position:absolute; inset:0;
  background:
    radial-gradient(120% 95% at 50% 20%, rgba(5,4,11,.46), rgba(5,4,11,.74) 70%),
    linear-gradient(180deg, rgba(5,4,11,.62) 0%, rgba(5,4,11,.5) 38%, rgba(5,4,11,.72) 100%); }
@media (prefers-reduced-motion: reduce){ .nyx-bgart{ transition:none; } }

/* ===== Nyx — redesigned All Codes (grouped 2-col cards) ===== */
.sim-updated{ flex:none; font-family:'HSR',sans-serif; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
  color:#8d82bd; white-space:nowrap; }
.sim-codegroup{ gap:13px; }
.sim-codegrid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.sim-codegrid .gp-code{ min-height:112px; }
.sim-code{ position:relative; display:flex; flex-direction:column; gap:9px; padding:14px 16px;
  border-radius:13px; background:linear-gradient(180deg, rgba(30,23,62,.6), rgba(14,10,32,.6));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.18); transition:box-shadow .25s; }
.sim-code .hd{ display:flex; align-items:center; gap:10px; min-width:0; }
.sim-code .cc{ font-family:ui-monospace,'Cascadia Mono',monospace; font-size:15px; letter-spacing:.07em; color:#fff;
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.sim-code a.cc:hover{ color:#cfc6ff; text-shadow:0 0 10px rgba(139,123,255,.4); }
.sim-code .newtag{ flex:none; font-family:'HSR',sans-serif; font-size:9.5px; letter-spacing:.16em; font-weight:700;
  padding:3px 7px; border-radius:6px; color:#0c0922; background:linear-gradient(160deg,#ffe3b3,#e3b269);
  box-shadow:0 0 12px rgba(227,178,105,.45); }
.sim-code .copy{ flex:none; width:32px; height:32px; border:none; cursor:pointer; border-radius:9px; display:grid; place-items:center;
  color:#cfc6f5; background:rgba(13,10,30,.6); box-shadow:inset 0 0 0 1px rgba(183,170,255,.3); transition:color .2s, box-shadow .2s, transform .2s; }
.sim-code .copy:hover{ color:#fff; transform:translateY(-1px); box-shadow:inset 0 0 0 1.5px var(--accent-bright); }
.i-copy{ position:relative; width:13px; height:13px; }
.i-copy::before{ content:""; position:absolute; left:0; top:0; width:9px; height:11px; border:1.6px solid currentColor; border-radius:2px; }
.i-copy::after{ content:""; position:absolute; right:0; bottom:0; width:9px; height:11px; border:1.6px solid currentColor; border-radius:2px; background:linear-gradient(135deg, transparent 40%, rgba(20,15,42,1) 40%); }
.sim-code .cbtn{ flex:none; border:none; cursor:pointer; height:30px; padding:0 13px; border-radius:9px;
  font-family:'HSR',sans-serif; font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:#0c0922; font-weight:600;
  background:linear-gradient(160deg,#ffe3b3,#e3b269); transition:filter .2s; }
.sim-code .cbtn:hover{ filter:brightness(1.1); }
.sim-code .check{ flex:none; width:30px; height:30px; border:none; cursor:pointer; border-radius:50%; display:grid; place-items:center; font-size:13px; color:#f7d98b;
  background:rgba(80,52,90,.42); box-shadow:inset 0 0 0 1.5px rgba(216,184,106,.48); }
.sim-code .rw{ font-size:12.5px; color:var(--tx-dim); letter-spacing:.02em; line-height:1.4; }
.sim-code .ft{ font-family:'HSR',sans-serif; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#6f649c; min-height:12px; }
.sim-code.st-new{ box-shadow:inset 0 0 0 1.5px rgba(227,178,105,.45), 0 0 22px rgba(227,178,105,.1); }
.sim-code.st-redeemed{ opacity:.5; }
.sim-code.st-redeemed .cc{ text-decoration:line-through; text-decoration-color:rgba(255,255,255,.4); }
.sim-code.st-copied{ box-shadow:inset 0 0 0 1.5px rgba(216,184,106,.5), 0 0 18px rgba(216,184,106,.12); }

/* ===== Nyx — redesigned All Banners ===== */
.sim-banhd{ display:flex; align-items:center; gap:18px; flex:none; margin-bottom:18px; }
.sim-regions{ display:flex; gap:6px; padding:5px; border-radius:12px; background:rgba(13,10,30,.5);
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.16); }
.sim-regions button{ border:none; cursor:pointer; height:34px; padding:0 18px; border-radius:8px; background:none;
  font-family:'HSR',sans-serif; font-size:12.5px; letter-spacing:.12em; color:#a99fd6; transition:color .2s, background .2s; }
.sim-regions button:hover{ color:#fff; }
.sim-regions button.on{ color:#fff; background:linear-gradient(160deg,#7a63c8,#5a47a8); box-shadow:0 0 16px var(--accent-glow); }
.sim-resets{ margin-left:auto; display:flex; gap:24px; }
.sim-resets .rs{ display:flex; flex-direction:column; gap:2px; text-align:right; }
.sim-resets .k{ font-family:'HSR',sans-serif; font-size:10px; letter-spacing:.18em; text-transform:uppercase; color:#8d82bd; }
.sim-resets .v{ font-family:ui-monospace,monospace; font-size:14px; color:#efeaff; letter-spacing:.04em; }

.sim-gbangrid{ flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain; padding-right:8px;
  display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:18px; align-content:start; }
.sim-gbangrid::-webkit-scrollbar{ width:6px; }
.sim-gbangrid::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.45); border-radius:3px; }
.sim-gbanner{ position:relative; min-height:230px; overflow:hidden; border-radius:18px; display:flex;
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.22); filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); }
.sim-gbanner .art{ position:absolute; inset:0; background-size:cover; }
.sim-gbanner .shade{ position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(8,6,18,.55) 0%, rgba(8,6,18,.82) 55%, rgba(8,6,18,.95) 100%); }
.sim-gbanner .inner{ position:relative; z-index:2; flex:1; min-width:0; padding:16px 20px 18px; display:flex; flex-direction:column; gap:8px; }
.sim-gbanner .ghd{ font-family:'GI',serif; font-size:20px; color:#f7f4ff; text-shadow:0 0 14px var(--accent-glow), 0 2px 8px rgba(0,0,0,.7); }
.sim-gbanner .phase{ font-family:'HSR',sans-serif; font-size:10px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--accent-bright); margin-top:2px; }
.sim-gbanner .phase.end{ color:#cf7d8d; }
.sim-gbanner .ccrow{ display:flex; gap:12px; }
.sim-gbanner .ccrow.wrap{ flex-wrap:wrap; gap:10px 12px; }
.sim-cc{ display:flex; flex-direction:column; align-items:center; gap:5px; width:54px; }
.sim-cc .d{ width:48px; height:48px; border-radius:50%; display:grid; place-items:center; flex:none;
  background:radial-gradient(circle at 50% 30%, color-mix(in oklab, var(--c) 75%, #2a2150), #14102e);
  box-shadow:inset 0 0 0 2px color-mix(in oklab, var(--c) 65%, transparent), 0 0 14px color-mix(in oklab, var(--c) 40%, transparent); }
.sim-cc .d img{ width:100%; height:100%; border-radius:50%; object-fit:cover; }
.sim-cc .d span{ font-family:'GI',serif; font-size:16px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.6); }
.sim-cc .n{ font-size:9.5px; letter-spacing:.02em; color:#cfc6f5; text-align:center; line-height:1.2; max-width:54px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.sim-gbanner .timer{ font-family:ui-monospace,monospace; font-size:15px; letter-spacing:.06em; color:#ffe6bd;
  text-shadow:0 0 12px rgba(255,210,140,.35); }
.sim-gbanner .timer.ended{ color:#cf7d8d; text-shadow:none; }
.sim-gbanner .substart{ font-size:11px; color:#a99fd6; letter-spacing:.03em; }
.sim-gbanner .phase + .ccrow{ margin-top:-1px; }

/* ===== gacha pull tracker (overlay) ===== */
.gt-overlay{ position:absolute; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(5,4,11,.66); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px);
  animation:gtFade .25s ease; }
@keyframes gtFade{ from{ opacity:0; } to{ opacity:1; } }
.gt-panel{ position:relative; width:1060px; max-width:94%; max-height:80%; display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(24,18,52,.97), rgba(12,9,30,.98));
  border-radius:20px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.28), 0 0 0 1px rgba(0,0,0,.5), 0 30px 80px rgba(0,0,0,.6);
  padding:24px 28px 26px; animation:gtRise .3s cubic-bezier(.2,.7,.2,1); }
@keyframes gtRise{ from{ transform:translateY(14px) scale(.985); opacity:0; } to{ transform:none; opacity:1; } }
.gt-head{ display:flex; align-items:center; gap:14px; flex:none; }
.gt-dia{ width:17px; height:29px; flex:none; background:url('../../assets/decor/toast_dia.png') center/contain no-repeat; }
.gt-ttl{ min-width:0; }
.gt-ttl .t{ font-family:'GI',serif; font-size:25px; color:#f6f3ff; text-shadow:0 0 16px var(--accent-glow); }
.gt-ttl .s{ font-size:12.5px; color:#a99fd6; letter-spacing:.04em; margin-top:1px; }
.gt-x{ margin-left:auto; flex:none; width:34px; height:34px; border:none; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; color:#cdc3f3; font-size:14px;
  background:rgba(40,31,78,.7); box-shadow:inset 0 0 0 1px rgba(183,170,255,.3); transition:background .2s, color .2s; }
.gt-x:hover{ background:linear-gradient(160deg,#ffc2d1,#d95577); color:#2b0a14; }

/* import */
.gt-import{ margin-top:22px; }
.gt-steps{ list-style:none; display:flex; flex-direction:column; gap:14px; margin:0 0 22px; padding:0; }
.gt-steps li{ display:flex; align-items:flex-start; gap:14px; }
.gt-steps .n{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-family:'GI',serif; font-size:15px; color:#0c0922; background:linear-gradient(160deg,#d3c8ff,#9a89ea);
  box-shadow:0 0 12px var(--accent-glow); }
.gt-steps li > div{ display:flex; flex-direction:column; gap:2px; }
.gt-steps b{ font-size:14.5px; color:#efeaff; font-weight:600; }
.gt-steps span{ font-size:12.5px; color:#a99fd6; line-height:1.5; }
.gt-urlrow{ display:flex; gap:12px; }
.gt-urlrow input{ flex:1; min-width:0; height:46px; border:none; outline:none; border-radius:12px; padding:0 18px;
  background:rgba(13,10,30,.85); color:#efeaff; font-family:'HSR',sans-serif; font-size:13.5px; letter-spacing:.03em;
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.3); transition:box-shadow .25s; }
.gt-urlrow input:focus{ box-shadow:inset 0 0 0 1px rgba(183,170,255,.65), inset 0 0 16px rgba(139,123,255,.14); }
.gt-urlrow input::placeholder{ color:#6f649c; }
.gt-go{ flex:none; min-width:120px; height:46px; border:none; cursor:pointer; border-radius:12px;
  display:grid; place-items:center; font-family:'HSR',sans-serif; font-size:13px; letter-spacing:.16em; text-transform:uppercase;
  color:#100c26; background:linear-gradient(160deg,#d3c8ff,#9a89ea); box-shadow:0 0 16px var(--accent-glow); transition:filter .2s; }
.gt-go:hover{ filter:brightness(1.08); }
.gt-go:disabled{ cursor:default; }
.gt-spin{ width:18px; height:18px; border-radius:50%; border:2.5px solid rgba(16,12,38,.35); border-top-color:#100c26;
  animation:gtSpin .7s linear infinite; }
@keyframes gtSpin{ to{ transform:rotate(360deg); } }
.gt-sample{ margin-top:14px; border:none; background:none; cursor:pointer; padding:4px 0;
  color:#b3a9e0; font-family:'HSR',sans-serif; font-size:12.5px; letter-spacing:.04em; transition:color .2s; }
.gt-sample:hover{ color:#fff; }
/* pull-tracker: command box, errors, progress, banner sub-tabs */
.gt-cmd{ display:flex; align-items:center; gap:10px; margin:12px 0 4px; padding:10px 12px; border-radius:12px;
  background:rgba(13,10,30,.85); box-shadow:inset 0 0 0 1px rgba(183,170,255,.22); }
.gt-cmd code{ flex:1; min-width:0; overflow-x:auto; white-space:nowrap; color:#cfc6ff;
  font-family:'Consolas','SF Mono',monospace; font-size:12px; letter-spacing:.02em; }
.gt-cmd button{ flex:none; border:none; cursor:pointer; border-radius:8px; padding:6px 12px; color:#100c26;
  background:linear-gradient(160deg,#d3c8ff,#9a89ea); font-family:'HSR',sans-serif; font-size:11px;
  letter-spacing:.12em; text-transform:uppercase; transition:filter .2s; }
.gt-cmd button:hover{ filter:brightness(1.08); }
.gt-err{ margin-top:10px; padding:9px 13px; border-radius:10px; color:#ffd9e2; font-family:'HSR',sans-serif;
  font-size:12.5px; background:rgba(120,30,55,.28); box-shadow:inset 0 0 0 1px rgba(255,120,150,.35); }

/* safer download+verify alternative to the iex one-liner */
.gt-safe{ margin:6px 0 2px; }
.gt-safe > summary{ cursor:pointer; color:#b7aaff; font-family:'HSR',sans-serif; font-size:12px;
  letter-spacing:.03em; padding:6px 2px; list-style:none; }
.gt-safe > summary::-webkit-details-marker{ display:none; }
.gt-safe > summary::before{ content:'\25B8'; display:inline-block; margin-right:7px; transition:transform .2s; }
.gt-safe[open] > summary::before{ transform:rotate(90deg); }
.gt-safe > summary:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; border-radius:6px; }
.gt-safe-body{ padding:2px 2px 6px; }
.gt-safe-note{ color:#b3a9e0; font-size:12px; line-height:1.5; margin-bottom:8px; }
.gt-safe-steps{ margin:0; padding-left:18px; color:#cfc6ec; font-size:12.5px; line-height:1.55; }
.gt-safe-steps > li{ margin-bottom:8px; }
.gt-safe-steps a{ color:#cdb3ff; }
.gt-sha{ margin-top:6px; color:#9a90c8; font-size:11px; word-break:break-all; }
.gt-sha code{ color:#b7aaff; font-family:'Consolas','SF Mono',monospace; }
.gt-prog{ margin-top:10px; color:#b3a9e0; font-family:'HSR',sans-serif; font-size:12.5px; letter-spacing:.03em; }
.gt-bannertabs{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.gt-bannertabs button{ padding:5px 12px; border-radius:9px; cursor:pointer; font-family:'HSR',sans-serif; font-size:12px;
  letter-spacing:.03em; color:rgba(239,234,255,.6); background:rgba(255,255,255,.04);
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.16); transition:all .18s; }
.gt-bannertabs button:hover{ color:#efeaff; background:rgba(154,137,234,.16); }
.gt-bannertabs button.on{ color:#fff; background:linear-gradient(160deg,rgba(211,200,255,.34),rgba(154,137,234,.34));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.5); }
.gt-bannertabs button span{ opacity:.55; margin-left:6px; }

/* results */
.gt-results{ margin-top:20px; display:flex; flex-direction:column; gap:16px; min-height:0; overflow-y:auto; padding-right:6px; }
.gt-results::-webkit-scrollbar{ width:6px; }
.gt-results::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.45); border-radius:3px; }
.gt-pity{ display:flex; flex-direction:column; gap:8px; }
.gt-pity .lbl{ display:flex; align-items:center; gap:12px; font-size:13px; color:#cfc6f5; letter-spacing:.04em; }
.gt-pity .lbl b{ font-family:'GI',serif; font-size:18px; color:#f6f3ff; font-weight:400; }
.gt-pity .lbl b i{ color:#8d82bd; font-size:14px; font-style:normal; }
.gt-pity .gtag{ margin-left:auto; font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; padding:3px 11px;
  border-radius:20px; color:#ffe6bd; background:linear-gradient(160deg, rgba(227,178,105,.34), rgba(120,80,30,.34));
  box-shadow:inset 0 0 0 1px rgba(255,210,140,.5); }
.gt-pity .bar{ position:relative; height:9px; border-radius:5px; background:rgba(183,170,255,.14); overflow:hidden; }
.gt-pity .bar i{ position:absolute; inset:0 auto 0 0; border-radius:5px;
  background:linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow:0 0 10px var(--accent-glow); }
.gt-pity .bar .soft{ position:absolute; top:-3px; bottom:-3px; width:2px; background:rgba(255,210,140,.85);
  box-shadow:0 0 8px rgba(255,200,120,.7); }
.gt-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:12px; }
.gt-stats .st{ background:linear-gradient(180deg, rgba(30,23,62,.6), rgba(14,10,32,.6)); border-radius:13px;
  padding:14px 14px 12px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.16); }
.gt-stats .st .v{ font-family:'GI',serif; font-size:25px; color:#f6f3ff; line-height:1; }
.gt-stats .st .v i{ font-size:15px; color:#9a8fce; font-style:normal; }
.gt-stats .st .k{ margin-top:6px; font-size:11px; letter-spacing:.06em; color:#9a90c6; text-transform:uppercase; }
.gt-stats .st.five .v{ color:#ffd98a; text-shadow:0 0 14px rgba(255,190,90,.4); }
.gt-stats .st.four .v{ color:#cdb3ff; }
.gt-dist{ display:flex; gap:5px; height:32px; }
.gt-dist .seg{ position:relative; display:flex; align-items:center; justify-content:center; border-radius:8px;
  font-size:11.5px; color:#fff; min-width:64px; overflow:hidden; white-space:nowrap; }
.gt-dist .s5{ background:linear-gradient(90deg,#e3b269,#caa14e); color:#2b1d06; }
.gt-dist .s4{ background:linear-gradient(90deg,#7a63c8,#9a89ea); }
.gt-dist .s3{ background:linear-gradient(90deg,#3a4a86,#54639e); }
.gt-cols{ display:grid; grid-template-columns:1.25fr 1fr; gap:16px; }
.gt-fives, .gt-stream{ background:linear-gradient(180deg, rgba(22,16,46,.55), rgba(12,9,28,.55)); border-radius:14px;
  padding:14px 16px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.14); display:flex; flex-direction:column; min-height:0; }
.gt-fives .hd, .gt-stream .hd{ display:flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.12em;
  text-transform:uppercase; color:#b3a9e0; margin-bottom:11px; }
.gt-fives .hd span, .gt-stream .hd span{ margin-left:auto; color:#8d82bd; letter-spacing:.04em; }
.gt-fives .lst{ display:flex; flex-direction:column; gap:7px; max-height:230px; overflow-y:auto; padding-right:6px; }
.gt-fives .lst::-webkit-scrollbar{ width:5px; }
.gt-fives .lst::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.4); border-radius:3px; }
.gt-fives .row{ display:flex; align-items:center; gap:10px; padding:8px 12px; border-radius:10px;
  background:linear-gradient(90deg, rgba(227,178,105,.12), rgba(227,178,105,.03));
  box-shadow:inset 0 0 0 1px rgba(255,210,140,.18); }
.gt-fives .row .star{ color:#ffd98a; font-size:13px; flex:none; }
.gt-fives .row .nm{ font-family:'GI',serif; font-size:15px; color:#f6f3ff; }
.gt-fives .row .fz{ margin-left:auto; font-size:11.5px; padding:2px 9px; border-radius:20px; color:#cfc6f5;
  background:rgba(40,31,78,.7); box-shadow:inset 0 0 0 1px rgba(183,170,255,.25); }
.gt-fives .row .fz.hi{ color:#ff9db4; box-shadow:inset 0 0 0 1px rgba(217,85,119,.5); }
.gt-fives .row .fz.lo{ color:#9be8b6; box-shadow:inset 0 0 0 1px rgba(85,190,130,.5); }
.gt-fives .row .res{ flex:none; font-size:10.5px; letter-spacing:.04em; padding:2px 9px; border-radius:20px; }
.gt-fives .row .res.win{ color:#9be8b6; background:rgba(40,90,60,.4); box-shadow:inset 0 0 0 1px rgba(85,190,130,.45); }
.gt-fives .row .res.lose{ color:#ff9db4; background:rgba(90,30,45,.4); box-shadow:inset 0 0 0 1px rgba(217,85,119,.45); }
.gt-fives .row .res.gtd{ color:#cdb3ff; background:rgba(50,38,90,.5); box-shadow:inset 0 0 0 1px rgba(183,170,255,.35); }
.gt-stream .pips{ display:grid; grid-template-columns:repeat(10, 1fr); gap:6px; align-content:start; }
.gt-stream .pip{ aspect-ratio:1; border-radius:5px; background:#3a4a86; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06); }
.gt-stream .pip.r4{ background:linear-gradient(160deg,#9a89ea,#6f57bf); }
.gt-stream .pip.r5{ background:linear-gradient(160deg,#ffe0a0,#d99f48); box-shadow:0 0 8px rgba(255,190,90,.6); }
.gt-reset{ margin-top:auto; align-self:flex-start; border:none; cursor:pointer; margin-top:14px;
  font-family:'HSR',sans-serif; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#b3a9e0;
  background:rgba(40,31,78,.6); padding:9px 16px; border-radius:10px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.25);
  transition:color .2s, background .2s; }
.gt-reset:hover{ color:#fff; background:rgba(60,47,108,.7); }

/* ===== Database-backed collection library ===== */
.db-lib{ flex:1 1 0%; min-width:0; min-height:0; display:flex; flex-direction:column; }
.db-lib-head{ display:flex; align-items:center; gap:16px; flex:none; padding-top:2px; }
.db-tabs{ display:flex; align-items:center; gap:8px; flex:none; margin-top:16px; padding:5px;
  border-radius:13px; background:rgba(13,10,30,.5); box-shadow:inset 0 0 0 1px rgba(183,170,255,.14); }
.db-tabs button{ border:none; cursor:pointer; min-width:138px; height:38px; border-radius:9px; padding:0 12px;
  display:flex; align-items:center; justify-content:center; gap:9px; background:none; color:#a99fd6;
  font-family:'HSR',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase;
  transition:color .2s, background .2s, box-shadow .2s; }
.db-tabs button b{ min-width:24px; height:20px; display:grid; place-items:center; border-radius:20px;
  font-size:11px; color:#0c0922; background:#8d82bd; }
.db-tabs button:hover{ color:#fff; }
.db-tabs button.on{ color:#fff; background:linear-gradient(160deg,#7a63c8,#5a47a8); box-shadow:0 0 16px var(--accent-glow); }
.db-tabs button.on b{ background:#efeaff; }
.db-grid{ flex:1 1 0%; min-height:0; overflow-y:auto; margin-top:16px; padding:2px 8px 6px 2px;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(244px, 1fr)); gap:14px; align-content:start; }
.db-grid::-webkit-scrollbar{ width:7px; }
.db-grid::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.45); border-radius:4px; }
.db-card{ min-width:0; min-height:154px; display:grid; grid-template-columns:82px 1fr; gap:13px; padding:13px;
  border-radius:14px; background:linear-gradient(180deg, rgba(30,23,62,.58), rgba(14,10,32,.64));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.16); transition:transform .22s, box-shadow .22s; }
.db-card:hover{ transform:translateY(-3px); box-shadow:inset 0 0 0 1px rgba(183,170,255,.34), 0 10px 22px rgba(0,0,0,.28); }
.db-art{ width:82px; height:82px; border-radius:14px; overflow:hidden; display:grid; place-items:center; align-self:start;
  background:radial-gradient(circle at 50% 28%, #30275c, #0d0a24 76%);
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.26), 0 4px 10px rgba(0,0,0,.36); }
.db-art img{ width:100%; height:100%; object-fit:contain; padding:6px; }
.db-art span{ font-family:'GI',serif; font-size:24px; color:#efeaff; text-shadow:0 0 12px var(--accent-glow); }
.db-meta{ min-width:0; display:flex; flex-direction:column; gap:8px; }
.db-name{ font-family:'GI',serif; font-size:18px; line-height:1.08; color:#f7f4ff;
  text-shadow:0 0 14px rgba(139,123,255,.34); }
.db-fields{ display:flex; flex-wrap:wrap; gap:6px; }
.db-fields span{ max-width:100%; height:22px; display:inline-flex; align-items:center; padding:0 9px;
  border-radius:20px; background:rgba(139,123,255,.14); color:#d9d1fb;
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.18); font-size:11px; letter-spacing:.04em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.db-meta p{ color:#9c93c4; font-size:12px; line-height:1.38; display:-webkit-box;
  -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.db-empty{ margin:auto; color:#8d82bd; font-size:14px; letter-spacing:.04em; }

/* ===== Character Materials (Art of Khemia) ===== */
.cm-overlay{ position:absolute; inset:0; z-index:60; display:grid; place-items:center;
  background:rgba(5,4,11,.66); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); animation:gtFade .25s ease; }
.cm-panel{ position:relative; width:1180px; max-width:95%; height:80%; display:flex; flex-direction:column;
  background:linear-gradient(180deg, rgba(24,18,52,.97), rgba(12,9,30,.98));
  border-radius:20px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.28), 0 0 0 1px rgba(0,0,0,.5), 0 30px 80px rgba(0,0,0,.6);
  padding:22px 26px 18px; animation:gtRise .3s cubic-bezier(.2,.7,.2,1); }
.cm-panel.cm-loading{ height:auto; min-height:220px; max-width:520px; align-items:center; justify-content:center; text-align:center; gap:18px; }
.cm-load-eye{ width:72px; height:58px; background:linear-gradient(160deg,#f8f2ff,#9a89ea 70%,#dd0044);
  -webkit-mask:url('../../assets/icon/nyx_logo.png') center/contain no-repeat; mask:url('../../assets/icon/nyx_logo.png') center/contain no-repeat;
  filter:drop-shadow(0 0 18px var(--accent-glow)); animation:cmPulse 1.4s ease-in-out infinite; }
@keyframes cmPulse{ 0%,100%{ opacity:.58; transform:scale(.96); } 50%{ opacity:1; transform:scale(1.04); } }
@media (prefers-reduced-motion: reduce){ .cm-load-eye{ animation:none; } }
.cm-head{ display:flex; align-items:center; gap:14px; flex:none; }
.cm-dia{ width:17px; height:29px; flex:none; background:url('../../assets/decor/toast_dia.png') center/contain no-repeat; }
.cm-ttl{ min-width:0; }
.cm-ttl .t{ font-family:'GI',serif; font-size:24px; color:#f6f3ff; text-shadow:0 0 16px var(--accent-glow); }
/* G13: header section selector — the icon + current-section label opens a dropdown. */
.cm-section-select{ position:relative; }
.cm-section-btn{ display:inline-flex; align-items:center; gap:10px; border:0; cursor:pointer; padding:6px 12px 6px 8px; border-radius:10px;
  background:rgba(20,15,46,.55); box-shadow:inset 0 0 0 1px rgba(183,170,255,.22); color:#f6f3ff;
  font-family:'GI',serif; font-size:22px; transition:box-shadow .15s, background .15s; }
.cm-section-btn:hover{ background:rgba(28,20,60,.7); box-shadow:inset 0 0 0 1px rgba(183,170,255,.5); }
.cm-section-btn .lbl{ line-height:1; }
.cm-section-btn .chev{ font-size:13px; color:#b3a6f0; }
.cm-section-menu{ position:absolute; left:0; top:calc(100% + 6px); z-index:60; min-width:206px; display:flex; flex-direction:column; gap:2px;
  padding:6px; border-radius:10px; background:rgba(10,7,24,.98); box-shadow:inset 0 0 0 1px rgba(183,170,255,.26), 0 16px 34px rgba(0,0,0,.6); }
.cm-section-menu button{ border:0; cursor:pointer; text-align:left; padding:9px 12px; border-radius:7px; background:transparent;
  color:#cfc6f5; font-family:'GI',serif; font-size:16px; transition:color .12s, background .12s; }
.cm-section-menu button:hover{ color:#fff; background:rgba(139,123,255,.16); }
.cm-section-menu button.on{ color:#0c0820; background:linear-gradient(160deg,#cdb3ff,#9a89ea); }
.cm-ttl .s{ font-size:12px; color:#a99fd6; letter-spacing:.04em; margin-top:1px; }
.cm-games{ margin-left:auto; display:flex; align-items:center; gap:9px; }
.cm-gi{ width:42px; height:42px; flex:none; border:none; cursor:pointer; padding:0; border-radius:50%;
  background:rgba(13,10,30,.7); box-shadow:inset 0 0 0 1px rgba(183,170,255,.22);
  display:grid; place-items:center; opacity:.5; filter:grayscale(.6); transition:opacity .25s, filter .25s, box-shadow .25s, transform .2s; }
.cm-gi img{ width:30px; height:30px; object-fit:contain; }
.cm-gi:hover{ opacity:.85; transform:translateY(-2px); }
.cm-gi.on{ opacity:1; filter:none; box-shadow:inset 0 0 0 1.5px var(--accent-bright), 0 0 14px var(--accent-glow); }
.cm-x{ flex:none; width:34px; height:34px; border:none; cursor:pointer; border-radius:50%; margin-left:6px;
  display:grid; place-items:center; color:#cdc3f3; font-size:14px;
  background:rgba(40,31,78,.7); box-shadow:inset 0 0 0 1px rgba(183,170,255,.3); transition:background .2s, color .2s; }
.cm-x:hover{ background:linear-gradient(160deg,#ffc2d1,#d95577); color:#2b0a14; }
.cm-x.sm{ width:30px; height:30px; font-size:12px; }
.cm-tabs{ display:flex; gap:8px; flex:none; margin-top:16px; }
.cm-tabs button{ border:none; cursor:pointer; padding:9px 23px; border-radius:10px 10px 0 0;
  font-family:'HSR',sans-serif; font-size:13.3px; letter-spacing:.14em; text-transform:uppercase; color:#a99fd6;
  background:rgba(20,15,42,.5); transition:color .2s, background .2s; }
.cm-tabs button.on{ color:#f6f3ff; background:linear-gradient(180deg, rgba(40,31,80,.85), rgba(22,16,46,.55));
  box-shadow:inset 0 1.5px 0 var(--accent-bright); }
.cm-body{ flex:1; min-height:0; overflow-y:auto; padding:18px 8px 6px 2px; display:flex; flex-direction:column; gap:22px; }
.cm-body::-webkit-scrollbar{ width:7px; }
.cm-body::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.45); border-radius:4px; }
.cm-group{ display:flex; flex-direction:column; gap:13px; }
.cm-ghd{ display:flex; align-items:center; gap:11px; }
.cm-ghd .t{ font-family:'GI',serif; font-size:19px; color:#efeaff; }
.cm-ghd .c{ font-size:12px; color:#0c0922; background:linear-gradient(160deg,#d3c8ff,#9a89ea);
  padding:2px 11px; border-radius:20px; font-weight:600; }
.cm-grid{ display:grid; grid-template-columns:repeat(auto-fill, 96px); gap:18px 15px; }
.cm-grid-recent{ grid-template-columns:repeat(auto-fit, minmax(96px, 108px)); }
.cm-cell{ border:none; background:none; cursor:pointer; padding:0; display:flex; flex-direction:column; align-items:center; gap:6px;
  transition:transform .2s; }
.cm-cell:hover{ transform:translateY(-3px); }
.cm-cell.hidden{ opacity:.42; filter:grayscale(.9) brightness(.72); }
.cm-cell.hide-mode .disc{ box-shadow:inset 0 0 0 2.5px var(--ring), 0 0 12px var(--glow), 0 4px 10px rgba(0,0,0,.5), 0 0 0 3px rgba(221,0,68,.28); }
.cm-cell .hm{ margin-top:-3px; min-height:17px; padding:2px 7px; border-radius:999px;
  font-size:9px; letter-spacing:.12em; text-transform:uppercase; color:#ffd7e1;
  background:rgba(76,12,34,.7); box-shadow:inset 0 0 0 1px rgba(221,0,68,.32); }
.cm-cell.hidden .hm{ color:#0b0716; background:linear-gradient(160deg,#ff9db4,#dd5f86); }
.cm-cell .cn{ font-size:12.5px; color:#cfc6f5; max-width:96px; text-align:center; line-height:1.2;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cm-cell:hover .cn{ color:#fff; }

/* avatar disc */
.cm-av{ position:relative; width:76px; height:76px; flex:none; }
.cm-av.big{ width:96px; height:96px; }
.cm-av .disc{ position:absolute; inset:0; border-radius:50%; overflow:hidden;
  background:radial-gradient(circle at 50% 32%, color-mix(in oklab, var(--rA) 55%, #1b1640), #0d0a24 78%);
  box-shadow:inset 0 0 0 2.5px var(--ring), 0 0 12px var(--glow), 0 4px 10px rgba(0,0,0,.5);
  display:grid; place-items:center; }
.cm-av .disc img{ width:100%; height:100%; object-fit:cover; }
.cm-av .disc img.zoom{ transform:scale(var(--iconZoom, 1.18)); transform-origin:50% 24%; }
.cm-av .mono{ font-family:'GI',serif; font-size:26px; color:#f3efff; text-shadow:0 0 12px var(--glow); }
.cm-av.big .mono{ font-size:34px; }

/* material popup */
.cm-pop-wrap{ position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:rgba(4,3,9,.62); backdrop-filter:blur(5px); -webkit-backdrop-filter:blur(5px); animation:gtFade .2s ease; }
.cm-pop{ position:relative; width:min(1240px, 96vw); max-height:92vh; min-height:min(640px, 88vh);
  background:linear-gradient(180deg, rgba(27,20,58,.99), rgba(10,7,24,.99));
  border-radius:18px; box-shadow:inset 0 0 0 1px rgba(183,170,255,.34), 0 34px 86px rgba(0,0,0,.72);
  animation:gtRise .28s cubic-bezier(.2,.7,.2,1); overflow:hidden; }
.cm-pop-ambient{ position:absolute; inset:-24% -16% auto auto; width:54%; height:64%; pointer-events:none;
  background:radial-gradient(circle, color-mix(in oklab, var(--el) 32%, transparent), transparent 66%);
  filter:blur(4px); opacity:.78; }
.cm-pop-bg{ position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.cm-pop-bg img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:82% 14%;
  transform:scale(1.05); filter:saturate(1.08) contrast(1.04); opacity:.68; }
.cm-pop-bg.birthday img{ object-position:50% 46%; transform:scale(1.02); opacity:.58; }
.cm-pop-bg.holiday img{ object-position:50% 38%; transform:scale(1.02); opacity:.58; }
.cm-pop-scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(90deg, rgba(6,4,15,.97) 0%, rgba(9,6,22,.95) 46%, rgba(9,6,22,.82) 76%, rgba(7,5,16,.62) 100%),
    linear-gradient(180deg, rgba(5,4,10,.14), rgba(5,4,10,.78)); }
.cm-pop-layout{ position:relative; z-index:1; display:grid; grid-template-columns:1fr;
  min-height:inherit; max-height:88vh; }
.cm-pop-close{ position:absolute; right:18px; top:18px; z-index:5; margin:0; }
.cm-pop-art{ position:relative; min-height:620px; overflow:hidden; background:radial-gradient(circle at 50% 18%, color-mix(in oklab, var(--el) 24%, transparent), transparent 38%), #080612; }
.cm-pop-art::before{ content:""; position:absolute; inset:16px; border-radius:16px;
  box-shadow:inset 0 0 0 1px rgba(216,184,106,.3), inset 0 0 0 7px rgba(8,6,18,.38);
  pointer-events:none; z-index:2; }
.cm-pop-art::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(5,4,10,.03), rgba(5,4,10,.22) 45%, rgba(5,4,10,.88)); }
.cm-pop-art > img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 16%;
  transform:scale(1.03); filter:saturate(1.08) contrast(1.03); }
.cm-pop-art > .cm-av{ position:absolute; left:50%; top:42%; transform:translate(-50%, -50%); z-index:3; }
.cm-pop-orbit{ position:absolute; left:50%; top:42%; width:250px; height:250px; margin:-125px 0 0 -125px; border-radius:50%;
  border:1px solid rgba(216,184,106,.24); box-shadow:0 0 46px color-mix(in oklab, var(--el) 22%, transparent);
  z-index:2; opacity:.75; }
.cm-pop-id{ position:absolute; left:30px; right:30px; bottom:30px; z-index:3; min-width:0; }
.cm-pop-name{ position:relative; z-index:1; font-family:'GI',serif; font-size:clamp(30px, 4.4vw, 54px); line-height:.95; color:#f8f2ff;
  text-shadow:0 0 18px color-mix(in oklab, var(--el) 45%, transparent), 0 3px 18px rgba(0,0,0,.75); }
/* header: character circle icon sits BEFORE the name as a leading badge;
   element/type/weapon icons run inline after it with no chip containers */
.cm-pop-name-row{ display:flex; align-items:center; flex-wrap:wrap; gap:8px 16px; }
.cm-pop-name-wrap{ position:relative; display:inline-flex; align-items:center; gap:14px; }
.cm-name-circle{ position:static; transform:none; flex:none;
  height:clamp(40px, 3vw, 54px); width:clamp(40px, 3vw, 54px); aspect-ratio:1/1; border-radius:50%; object-fit:cover; opacity:1; z-index:1;
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.4), 0 2px 10px rgba(0,0,0,.5);
  -webkit-mask:none; mask:none; filter:saturate(1.08); pointer-events:none; }
.cm-pop-meta-inline{ display:inline-flex; align-items:center; gap:10px; }
.cm-meta-inline{ width:40px; height:40px; display:grid; place-items:center; } /* G16: larger trailing meta icons */
.cm-meta-inline .cm-meta-symbol{ width:38px; height:38px; }
.cm-meta-inline .cm-meta-symbol.img{ width:40px; height:40px; }
.cm-pop-tags{ display:flex; flex-wrap:wrap; align-items:center; gap:8px; margin-top:14px; }
.cm-pop-chip{ min-height:30px; display:inline-flex; align-items:center; gap:8px; padding:0 11px 0 6px; border-radius:999px;
  font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#ded6ff;
  background:rgba(12,9,30,.72); box-shadow:inset 0 0 0 1px rgba(183,170,255,.24); }
.cm-pop-chip.icon-only{ width:34px; height:34px; min-height:34px; padding:0; justify-content:center; border-radius:50%;
  background:radial-gradient(circle at 50% 34%, color-mix(in oklab, var(--meta) 28%, rgba(12,9,30,.82)), rgba(12,9,30,.78));
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--meta) 52%, transparent), 0 0 14px color-mix(in oklab, var(--meta) 18%, transparent); }
.cm-pop-chip .cm-fi{ width:22px; height:22px; border-radius:50%; }
.cm-pop-chip em{ font-style:normal; line-height:1; }
.cm-meta-symbol{ width:23px; height:23px; display:grid; place-items:center; color:var(--meta, #b7aaff); }
.cm-meta-symbol svg{ width:100%; height:100%; display:block; filter:drop-shadow(0 1px 5px rgba(0,0,0,.55)); }
.cm-meta-symbol.img{ width:25px; height:25px; }
.cm-meta-symbol.img img{ width:100%; height:100%; object-fit:contain; display:block; filter:drop-shadow(0 1px 4px rgba(0,0,0,.5)); }
.cm-pop-tags .rr.r5{ color:#2b1d06; background:linear-gradient(160deg,#ffd98a,#d99f48); box-shadow:0 0 16px rgba(255,190,90,.28); }
.cm-pop-tags .rr.r4{ color:#fff; background:linear-gradient(160deg,#9a89ea,#6f57bf); }
.cm-pop-tags .el{ box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--el) 58%, transparent), 0 0 14px color-mix(in oklab, var(--el) 18%, transparent); }
.cm-pop-main{ min-width:0; width:100%; overflow-y:auto; padding:28px 30px 26px; display:flex; flex-direction:column; gap:14px;
  background:linear-gradient(90deg, rgba(17,12,38,.9), rgba(13,9,29,.76), rgba(13,9,29,.3)); }
.cm-pop-main::-webkit-scrollbar{ width:7px; }
.cm-pop-main::-webkit-scrollbar-thumb{ background:rgba(139,123,255,.5); border-radius:4px; }
.cm-pop-topline{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding-right:42px; }
.cm-pop-topline .eyebrow{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:#9e93c8; }
.cm-pop-topline .title{ margin-top:4px; font-family:'GI',serif; font-size:30px; color:#f8f2ff; text-shadow:0 0 16px var(--accent-glow); }
.cm-pop-topline .cm-av{ width:68px; height:68px; }
.cm-form-switches{ display:flex; flex-direction:column; gap:10px; padding:12px;
  border-radius:14px; background:rgba(13,10,30,.5); box-shadow:inset 0 0 0 1px rgba(183,170,255,.14); }
.cm-form-row{ display:grid; grid-template-columns:84px minmax(0, 1fr); align-items:start; gap:10px; }
.cm-form-row > span{ padding-top:9px; font-family:'HSR',sans-serif; font-size:10.5px; letter-spacing:.18em;
  text-transform:uppercase; color:#8d82bd; }
.cm-form-row > div{ display:flex; flex-wrap:wrap; gap:7px; min-width:0; }
.cm-form-row button{ border:none; cursor:pointer; min-height:33px; padding:0 12px; border-radius:9px;
  font-family:'HSR',sans-serif; font-size:11.5px; letter-spacing:.08em; color:#a99fd6;
  background:rgba(20,15,44,.64); box-shadow:inset 0 0 0 1px rgba(183,170,255,.13);
  transition:color .2s, background .2s, box-shadow .2s, transform .2s; }
.cm-form-row button:hover{ color:#fff; transform:translateY(-1px); box-shadow:inset 0 0 0 1px rgba(183,170,255,.42); }
.cm-form-row button.on{ color:#fff; background:linear-gradient(160deg,#7a63c8,#5a47a8); box-shadow:0 0 14px var(--accent-glow); }
.cm-pop-ledger{ display:flex; flex-wrap:wrap; gap:7px; }
.cm-pop-ledger span{ min-height:26px; display:inline-flex; align-items:center; padding:0 10px; border-radius:999px;
  font-size:10.5px; letter-spacing:.1em; text-transform:uppercase; color:#cfc6f5;
  background:rgba(13,10,30,.58); box-shadow:inset 0 0 0 1px rgba(183,170,255,.18); }
.cm-pop-sections{ display:flex; flex-direction:column; gap:10px; }
.cm-sec{ display:grid; grid-template-columns:152px minmax(0, 1fr); align-items:start; gap:14px;
  padding:12px 14px; border-radius:13px;
  background:linear-gradient(115deg, rgba(18,13,40,.68), rgba(12,9,28,.5));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.13); }
.cm-sec.total{ background:linear-gradient(115deg, rgba(52,39,88,.66), rgba(17,12,38,.58));
  box-shadow:inset 0 0 0 1px rgba(216,184,106,.23); }
.cm-sechd{ min-width:0; display:flex; flex-direction:column; gap:5px; font-family:'HSR',sans-serif; font-size:12px;
  letter-spacing:.16em; text-transform:uppercase; color:#b3a9e0; }
.cm-sechd b{ font-family:'GI',serif; font-size:22px; line-height:1; letter-spacing:.04em; color:#f7f2ff; font-weight:400;
  text-shadow:0 0 14px var(--accent-glow); }
.cm-sechd span{ font-size:11px; letter-spacing:.04em; text-transform:none; color:#8d82bd; line-height:1.25; }
.cm-mats{ display:flex; flex-wrap:wrap; gap:9px; align-items:flex-start; min-width:0; }
.cm-mat{ position:relative; width:74px; min-width:74px; display:flex; flex-direction:column; align-items:center; gap:5px;
  padding:6px 5px 7px; border-radius:10px;
  background:linear-gradient(160deg, color-mix(in oklab, var(--rA) 16%, rgba(16,12,38,.88)), rgba(16,12,38,.76));
  box-shadow:inset 0 0 0 1px color-mix(in oklab, var(--rA) 38%, transparent); }
.cm-mat .ic{ width:46px; height:46px; flex:none; border-radius:8px; display:grid; place-items:center; overflow:hidden; padding:3px;
  background:var(--rarBg) center/100% 100% no-repeat, var(--rB);
  box-shadow:0 2px 7px rgba(0,0,0,.4), inset 0 0 0 1px rgba(255,255,255,.16); }
.cm-mat .ic img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.42)); }
.cm-mat .ic .glyph{ font-size:20px; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.5); }
.cm-mat .qt{ font-family:'GI',serif; font-size:16px; line-height:1; color:#f7f2ff; font-weight:400; }
.cm-mat .nm{ width:100%; min-height:24px; font-size:9.5px; color:#a99fd6; line-height:1.18; text-align:center;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.cm-mat .src-tip{ position:absolute; left:50%; bottom:calc(100% + 10px); z-index:40; width:228px;
  transform:translate(-50%, 8px); pointer-events:none; opacity:0; padding:9px 10px; border-radius:8px;
  background:rgba(7,5,16,.96); box-shadow:inset 0 0 0 1px rgba(183,170,255,.28), 0 12px 30px rgba(0,0,0,.58);
  transition:opacity .14s ease, transform .14s ease; }
.cm-mat .src-tip b{ display:block; margin-bottom:4px; font-family:'GI',serif; font-size:13px; font-weight:400; color:#f8f2ff; }
.cm-mat .src-tip em{ display:block; font-style:normal; font-size:11px; line-height:1.35; color:#cfc4f2; }
.cm-mat .src-list{ display:flex; flex-direction:column; gap:6px; }
.cm-mat .src-icons{ display:flex; flex-wrap:wrap; gap:6px; }
.cm-mat .src-icons img{ width:26px; height:26px; flex:none; object-fit:contain; border-radius:5px;
  background:rgba(183,170,255,.08); box-shadow:inset 0 0 0 1px rgba(183,170,255,.18);
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.48)); }
.cm-mat .src-names{ display:block; font-style:normal; font-size:11px; line-height:1.35; color:#cfc4f2; }
.cm-mat:hover .src-tip{ opacity:1; transform:translate(-50%, 0); }
.zzz-sprite{ position:relative; width:100%; height:100%; display:block; }
.zzz-sprite img,
.zzz-sprite canvas{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 3px 5px rgba(0,0,0,.42)); }
.zzz-sprite canvas{ opacity:0; }
.zzz-sprite.is-animated img{ opacity:0; }
.zzz-sprite.is-animated canvas{ opacity:1; }
.cm-tally{ display:flex; align-items:center; justify-content:space-between; padding:13px 18px; border-radius:12px;
  background:linear-gradient(160deg, rgba(40,31,80,.6), rgba(20,15,44,.6)); box-shadow:inset 0 0 0 1px rgba(183,170,255,.2); }
.cm-tally span{ font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#a99fd6; }
.cm-tally b{ font-family:'GI',serif; font-size:22px; color:#ffd98a; font-weight:400; text-shadow:0 0 14px rgba(255,190,90,.35); }

.cm-pop.ledger{ width:min(1380px, 94vw); min-height:min(680px, 86vh); border-radius:10px;
  background:linear-gradient(180deg, rgba(16,10,32,.98), rgba(9,5,20,.98));
  box-shadow:inset 0 0 0 1px rgba(176,150,255,.3), 0 34px 92px rgba(0,0,0,.78); }
/* the character art is the star — overlays above are kept light + purple so it shows clearly */
.cm-pop.ledger .cm-pop-bg img{ object-position:50% 28%; transform:scale(1.03); opacity:.82; }
.cm-pop.ledger .cm-pop-bg.birthday img{ object-position:50% 36%; opacity:.92; }
.cm-pop.ledger .cm-pop-bg.holiday img{ object-position:50% 36%; opacity:.9; }
.cm-pop.ledger .cm-pop-scrim{ background:
  linear-gradient(90deg, rgba(11,6,24,.8) 0%, rgba(14,8,30,.56) 34%, rgba(16,10,34,.3) 66%, rgba(12,7,26,.16) 100%),
  linear-gradient(180deg, rgba(16,10,32,.08), rgba(8,5,18,.66)); }
.cm-pop.ledger .cm-pop-layout{ max-height:88vh; }
.cm-ledger-main{ padding:20px 24px 24px; gap:12px;
  background:linear-gradient(90deg, rgba(16,10,32,.34), rgba(16,10,32,.16), rgba(16,10,32,.05)); }
.cm-ledger-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px; padding:0 56px 12px 0;
  border-bottom:1px solid rgba(176,150,255,.2); }
.cm-ledger-title{ min-width:0; }
.cm-ledger-top .cm-pop-name{ font-size:clamp(38px, 3.2vw, 58px); }
.cm-pop.ledger .cm-pop-tags{ margin-top:10px; }
/* GI talent presets — flat segmented text row (no pills/box), active = underline */
.cm-pop.ledger .cm-presets-ledger{ flex:0 1 auto; justify-content:flex-end; align-items:center; max-width:760px; margin-top:6px;
  gap:0; background:transparent; box-shadow:none; padding:0; }
.cm-pop.ledger .cm-presets-ledger button{ min-width:0; height:auto; padding:2px 14px; border-radius:0; font-size:17px;
  font-family:'GI',serif; letter-spacing:.02em; color:#9b91c4; background:transparent; box-shadow:none;
  border-left:1px solid rgba(183,170,255,.22); transition:color .18s ease; }
.cm-pop.ledger .cm-presets-ledger button:first-child{ border-left:0; }
.cm-pop.ledger .cm-presets-ledger button:hover{ color:#efe8ff; }
.cm-pop.ledger .cm-presets-ledger button.on{ color:#f3eeff; background:transparent;
  box-shadow:inset 0 -2px 0 0 #9a89ea; } /* G17: purple underline, not the element colour */
.cm-form-switches.compact{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:8px;
  padding:8px 10px; border-radius:10px; background:rgba(16,10,32,.45); }
.cm-form-switches.compact .cm-form-row{ grid-template-columns:74px minmax(0, 1fr); }
.cm-form-switches.compact .cm-form-row button{ min-height:30px; border-radius:7px; }
.cm-ledger-rows{ position:relative; display:flex; flex-direction:column; border-top:1px solid rgba(176,150,255,.16);
  border-bottom:1px solid rgba(176,150,255,.15); }
/* the character art lives ONLY in the materials grid (right of the label column),
   clipped to the rows area — never behind the labels or header. */
.cm-ledger-art{ position:absolute; left:302px; top:0; right:0; bottom:0; z-index:0; overflow:hidden; pointer-events:none; }
.cm-ledger-art img{ width:100%; height:100%; object-fit:cover; object-position:50% 26%; opacity:.9; }
.cm-ledger-art.birthday img{ object-position:50% 32%; opacity:.96; }
.cm-ledger-art.holiday img{ object-position:50% 32%; opacity:.94; }
.cm-ledger-art::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(14,9,28,.62) 0%, rgba(14,9,28,.18) 12%, rgba(14,9,28,.06) 100%); }
.cm-ledger-row{ position:relative; display:grid; grid-template-columns:260px minmax(0, 1fr); align-items:center; gap:20px;
  min-height:128px; padding:16px 22px; border-bottom:1px solid rgba(176,150,255,.14);
  background:linear-gradient(90deg, rgba(16,9,32,.34), rgba(16,9,32,.1)); }
.cm-ledger-row:last-child{ border-bottom:none; }
.cm-ledger-row.total{ min-height:170px; background:linear-gradient(90deg, rgba(40,22,68,.62), rgba(22,12,42,.42));
  box-shadow:inset 0 0 0 1px rgba(176,150,255,.2); }
.cm-ledger-label{ min-width:0; display:flex; flex-direction:column; gap:10px; }
.cm-ledger-label b{ font-family:'GI',serif; font-weight:400; font-size:30px; line-height:1; letter-spacing:.035em;
  color:#f8f3ff; text-shadow:0 0 16px color-mix(in oklab, var(--el) 34%, transparent), 0 3px 14px rgba(0,0,0,.8); }
/* read-only level/summary text — NO box (the box is reserved for typeable fields) */
.cm-ledger-label > span{ display:inline-flex; align-items:center; width:max-content; max-width:100%; min-height:32px; padding:0;
  color:#d8cef7; background:transparent; box-shadow:none;
  font-family:'GI',serif; font-size:18px; line-height:1.1; letter-spacing:.02em; }
/* typeable ascension target-level field — purple box + caret signal it's editable */
/* G19: no box around the whole "Lv N" control — only the typeable number is boxed. */
.cm-ledger-label .cm-asc-level{ display:inline-flex; align-items:center; gap:7px; width:max-content; max-width:100%; min-height:32px; padding:0;
  border:0; cursor:text; background:transparent; box-shadow:none; color:#f0ecff; font-family:'GI',serif; font-size:17px; line-height:1.1; }
.cm-ledger-label .cm-asc-level .lv{ color:#b3a6f0; font-size:14px; }
.cm-ledger-label .cm-asc-level input{ width:1.8em; height:26px; border:0; outline:0; padding:0 2px; cursor:text;
  border-radius:7px; background:rgba(20,14,46,.78); box-shadow:inset 0 0 0 1px rgba(139,123,255,.55);
  font-family:'GI',serif; font-size:16px; line-height:1.1; color:#fff; text-align:center; -moz-appearance:textfield; appearance:textfield;
  transition:box-shadow .15s ease, background .15s ease; }
.cm-ledger-label .cm-asc-level input::-webkit-outer-spin-button,
.cm-ledger-label .cm-asc-level input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cm-ledger-label .cm-asc-level input:hover{ box-shadow:inset 0 0 0 1px rgba(168,153,255,.78); }
.cm-ledger-label .cm-asc-level input:focus{ background:rgba(28,20,60,.92); box-shadow:inset 0 0 0 1.5px rgba(174,160,255,.95), 0 0 12px rgba(139,123,255,.35); }
/* G19: empty space, no outer box — each cell is just [skill icon][boxed number]. */
.cm-talent-triplet{ width:max-content; max-width:100%; display:grid; grid-template-columns:repeat(3, auto); gap:14px;
  min-height:36px; padding:0; background:transparent; box-shadow:none; }
.cm-talent-triplet.cols4{ width:max-content; grid-template-columns:repeat(4, auto); }
/* HSR "Max" toggle — on by default (all traces maxed); turning it off / editing
   an input lets you set per-trace levels */
.cm-trace-max{ flex:none; align-self:center; border:0; cursor:pointer; border-radius:7px; min-height:32px; padding:0 14px;
  font-family:'HSR',sans-serif; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:#cfc6f5;
  background:rgba(13,10,30,.6); box-shadow:inset 0 0 0 1px rgba(183,170,255,.3); transition:color .2s, box-shadow .2s, background .2s; }
.cm-trace-max:hover{ color:#fff; box-shadow:inset 0 0 0 1px rgba(183,170,255,.55); }
.cm-trace-max.on{ color:#0c0922; background:linear-gradient(160deg,#cfc4ff,#9a89ea); box-shadow:0 0 12px var(--accent-glow); }
/* G19: [skill icon][number] with no surrounding box — only the number is boxed
   (purple) to signal it's typeable; the skill icon sits bare beside it. */
.cm-talent-control{ min-width:0; height:auto; border:0; cursor:text; display:grid; grid-template-columns:40px auto;
  align-items:center; gap:3px; padding:0; text-align:left; color:#eef3ff; background:transparent; box-shadow:none; }
.cm-talent-icon{ width:40px; height:40px; display:grid; place-items:center; overflow:hidden; background:transparent; box-shadow:none; }
.cm-talent-icon img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.cm-talent-icon em{ font-style:normal; font-size:9px; letter-spacing:.04em; text-transform:uppercase; color:#bcd0ff; }
.cm-talent-num{ width:1.5em; min-width:1.5em; max-width:1.8em; height:28px; border:0; outline:0; padding:0 1px;
  border-radius:7px; background:rgba(20,14,46,.78); box-shadow:inset 0 0 0 1px rgba(139,123,255,.55);
  font-family:'GI',serif; font-size:18px; line-height:1; color:#f8f2ff; text-align:center; -moz-appearance:textfield; appearance:textfield;
  transition:box-shadow .15s ease, background .15s ease; }
.cm-talent-num:hover{ box-shadow:inset 0 0 0 1px rgba(168,153,255,.78); }
.cm-talent-num:focus{ background:rgba(28,20,60,.92); box-shadow:inset 0 0 0 1.5px rgba(174,160,255,.95), 0 0 12px rgba(139,123,255,.35); }
.cm-talent-num::-webkit-outer-spin-button, .cm-talent-num::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
/* G37: read-only skill-icon row for games without per-level inputs (WuWa/ZZZ/AE). */
.cm-skill-icons{ display:inline-flex; align-items:center; gap:8px; flex-wrap:wrap; }
.cm-skill-icon{ width:30px; height:30px; display:grid; place-items:center; }
.cm-skill-icon img{ width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 2px 4px rgba(0,0,0,.55)); }
.cm-skill-icon.glyph{ color:#bcd0ff; }
.cm-skill-icon.glyph svg{ width:24px; height:24px; filter:drop-shadow(0 1px 3px rgba(0,0,0,.5)); }
.cm-skill-icons .cm-talent-summary{ margin-left:2px; }
.cm-ledger-row.weapon{ align-items:stretch; }
.cm-weapon-label{ position:relative; justify-content:center; overflow:visible; isolation:isolate; }
.cm-weapon-watermark{ position:absolute; right:-6px; top:50%; z-index:-1; width:112px; height:112px; object-fit:contain;
  transform:translateY(-50%); opacity:.28; filter:drop-shadow(0 0 18px rgba(183,170,255,.28)); }
.cm-weapon-pick{ position:relative; z-index:2; width:min(100%, 220px); min-height:32px; display:flex; align-items:center; justify-content:space-between; gap:8px;
  border:0; cursor:pointer; border-radius:7px; padding:0 10px; color:#efe8ff; background:rgba(16,12,36,.78);
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.27); font-family:'GI',serif; font-size:15px; text-align:left; }
.cm-weapon-pick:disabled{ cursor:default; opacity:.86; }
.cm-weapon-pick span{ min-width:0; overflow:hidden; white-space:normal; line-height:1.12; overflow-wrap:anywhere;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; font-size:.94em; }
.cm-weapon-pick i{ flex:none; font-style:normal; color:#cdb3ff; }
.cm-weapon-pick:not(:disabled):hover{ color:#fff; box-shadow:inset 0 0 0 1px rgba(221,0,68,.55), 0 0 16px rgba(221,0,68,.18); }
.cm-weapon-menu{ position:absolute; left:0; right:0; top:calc(100% - 2px); z-index:60; overflow:hidden; border-radius:8px;
  background:rgba(7,5,16,.98); box-shadow:inset 0 0 0 1px rgba(183,170,255,.34), 0 18px 42px rgba(0,0,0,.68); }
.cm-weapon-menu input{ width:100%; height:36px; border:0; border-bottom:1px solid rgba(183,170,255,.18); padding:0 10px;
  color:#f8f2ff; background:rgba(13,9,31,.86); outline:none; font-size:12px; }
.cm-weapon-menu input::placeholder{ color:#8d82bd; }
.cm-weapon-options{ max-height:238px; overflow:auto; padding:4px; }
.cm-weapon-options button{ width:100%; min-height:34px; display:grid; grid-template-columns:28px minmax(0, 1fr); align-items:center; gap:8px;
  border:0; cursor:pointer; border-radius:6px; padding:4px 7px; color:#daceff; background:transparent; text-align:left; font-size:12px; }
.cm-weapon-options button:hover,
.cm-weapon-options button.on{ color:#fff; background:rgba(139,123,255,.16); }
.cm-weapon-options img,
.cm-weapon-options .sig{ width:28px; height:28px; display:grid; place-items:center; object-fit:contain; border-radius:5px;
  background:rgba(183,170,255,.1); color:#ffd98a; }
.cm-weapon-options button span:last-child{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cm-weapon-empty{ padding:10px; text-align:center; color:#9e93c8; font-size:12px; }
/* picker + signature marker share one row; the marker sits to the RIGHT of the weapon. */
.cm-weapon-pickrow{ position:relative; z-index:2; display:flex; align-items:center; gap:8px; width:100%; }
.cm-weapon-pickrow .cm-weapon-pick{ flex:0 1 auto; min-width:0; }
/* signature disclaimer lives in a hover tooltip on the small ⓘ marker to the
   right of the picker whenever the shown weapon is the auto signature guess. */
.cm-sig-note{ position:relative; z-index:3; flex:none; display:inline-flex; cursor:help; outline:none; }
.cm-sig-mark{ display:inline-grid; place-items:center; width:18px; height:18px; border-radius:999px;
  font-size:13px; line-height:1; color:#cdb3ff; background:rgba(20,14,46,.7); box-shadow:inset 0 0 0 1px rgba(183,170,255,.4);
  transition:color .15s, box-shadow .15s; }
.cm-sig-note:hover .cm-sig-mark,
.cm-sig-note:focus-visible .cm-sig-mark{ color:#fff; box-shadow:inset 0 0 0 1px rgba(183,170,255,.85); }
.cm-sig-tip{ position:absolute; right:0; left:auto; bottom:calc(100% + 9px); z-index:50; width:240px;
  transform:translateY(8px); pointer-events:none; opacity:0; padding:9px 11px; border-radius:8px;
  background:rgba(7,5,16,.97); box-shadow:inset 0 0 0 1px rgba(183,170,255,.3), 0 12px 30px rgba(0,0,0,.6);
  transition:opacity .14s ease, transform .14s ease; }
.cm-sig-tip b{ display:block; margin-bottom:4px; font-family:'GI',serif; font-size:13px; font-weight:400; color:#f8f2ff; }
.cm-sig-tip em{ display:block; font-style:normal; font-size:11px; line-height:1.4; color:#cfc4f2; }
.cm-sig-tip u{ text-decoration-color:rgba(183,170,255,.8); }
.cm-sig-note:hover .cm-sig-tip,
.cm-sig-note:focus-visible .cm-sig-tip{ opacity:1; transform:translateY(0); }
.cm-ledger-mats{ gap:12px; align-items:flex-start; }
.cm-ledger-mats .cm-mat{ width:72px; min-width:72px; gap:5px; padding:0; border-radius:0;
  background:transparent; box-shadow:none; }
.cm-ledger-mats .cm-mat .ic{ width:66px; height:66px; border-radius:8px; padding:4px; }
.cm-ledger-mats .cm-mat .qt{ font-size:17px; max-width:100%; white-space:nowrap; text-shadow:0 2px 6px rgba(0,0,0,.72); }
.cm-ledger-mats .cm-mat.cur .qt{ font-size:12.5px; letter-spacing:-.01em; } /* G21: keep big currency amounts (Mora) within the tile/icon-background width */
.cm-ledger-mats .cm-mat .nm{ display:none; }
.cm-total-checks{ display:flex; flex-direction:column; align-items:flex-start; gap:6px; }
.cm-total-checks button{ border:none; cursor:pointer; display:inline-flex; align-items:center; gap:8px; min-height:25px; padding:0;
  font-family:'GI',serif; font-size:16px; color:#d9ceff; background:transparent; text-shadow:0 2px 8px rgba(0,0,0,.6); }
.cm-total-checks button .box{ width:22px; height:22px; border-radius:5px; display:grid; place-items:center;
  background:rgba(20,15,44,.72); box-shadow:inset 0 0 0 1px rgba(183,170,255,.36); }
.cm-total-checks button.on .box{ background:linear-gradient(160deg,#7a63c8,#5a47a8); box-shadow:inset 0 0 0 1px rgba(244,239,255,.6); }
.cm-total-checks button.on .box::after{ content:"\2713"; color:#fff; font-size:16px; line-height:1; }
.cm-total-checks button:hover{ color:#fff; }
.cm-total-empty{ min-height:42px; display:flex; align-items:center; padding:0 14px; border-radius:8px;
  color:#b8adbf; background:rgba(8,6,20,.54); box-shadow:inset 0 0 0 1px rgba(183,170,255,.16);
  font-size:13px; letter-spacing:.04em; }

@media (max-height: 820px) and (min-width: 821px){
  .cm-pop.ledger{ width:min(1480px, 94vw); min-height:0; max-height:94vh; }
  .cm-pop.ledger .cm-pop-layout{ max-height:94vh; min-height:0; }
  .cm-pop.ledger .cm-pop-close{ top:14px; right:14px; }
  .cm-ledger-main{ padding:14px 22px 16px; gap:8px; }
  .cm-ledger-top{ padding:0 52px 8px 0; gap:14px; }
  .cm-ledger-top .cm-pop-name{ font-size:clamp(36px, 2.8vw, 48px); }
  .cm-pop.ledger .cm-pop-tags{ margin-top:8px; gap:6px; }
  .cm-pop.ledger .cm-pop-chip{ min-height:25px; padding:0 8px 0 5px; font-size:10px; }
  .cm-pop.ledger .cm-pop-chip .cm-fi{ width:19px; height:19px; }
  .cm-pop.ledger .cm-presets-ledger button{ padding:2px 11px; font-size:15px; }
  .cm-form-switches.compact{ padding:7px 9px; }
  .cm-ledger-row{ grid-template-columns:220px minmax(0, 1fr); gap:16px; min-height:104px; padding:10px 20px; }
  .cm-ledger-art{ left:256px; }
  .cm-ledger-row.total{ min-height:136px; }
  .cm-ledger-label{ gap:8px; }
  .cm-ledger-label b{ font-size:25px; }
  .cm-ledger-label > span{ min-height:28px; padding:0; font-size:16px; }
  .cm-ledger-mats{ gap:8px; }
  .cm-ledger-mats .cm-mat{ width:68px; min-width:68px; gap:5px; }
  .cm-ledger-mats .cm-mat .ic{ width:62px; height:62px; padding:4px; }
  .cm-ledger-mats .cm-mat .qt{ font-size:16px; }
  .cm-total-checks{ gap:5px; }
  .cm-total-checks button{ min-height:23px; font-size:15px; }
  .cm-total-checks button .box{ width:20px; height:20px; }
  .cm-talent-triplet{ min-height:34px; padding:0; gap:10px; }
  .cm-talent-control{ height:auto; grid-template-columns:32px auto; gap:3px; }
  .cm-talent-icon{ width:32px; height:32px; }
  .cm-talent-num{ height:27px; font-size:16px; }
  .cm-weapon-pick{ min-height:29px; font-size:14px; }
  .cm-weapon-watermark{ width:94px; height:94px; }
  .cm-weapon-options{ max-height:190px; }
}

@media (max-width: 820px){
  .cm-pop{ width:min(94vw, 560px); min-height:0; max-height:90vh; }
  .cm-pop-layout{ grid-template-columns:1fr; max-height:90vh; overflow-y:auto; }
  .cm-pop-bg img{ object-position:50% 8%; opacity:.42; }
  .cm-pop-bg.birthday img{ object-position:50% 44%; opacity:.38; }
  .cm-pop-bg.holiday img{ object-position:50% 36%; opacity:.38; }
  .cm-pop-art{ min-height:300px; }
  .cm-pop-art > img{ object-position:50% 12%; }
  .cm-pop-main{ width:100%; overflow:visible; padding:22px 18px 20px; background:linear-gradient(180deg, rgba(11,8,26,.9), rgba(11,8,26,.8)); }
  .cm-pop-topline{ padding-right:44px; align-items:flex-start; }
  .cm-pop-topline .title{ font-size:26px; }
  .cm-pop-topline .cm-av{ display:none; }
  .cm-form-row{ grid-template-columns:1fr; gap:6px; }
  .cm-form-row > span{ padding-top:0; }
  .cm-sec{ grid-template-columns:1fr; gap:9px; }
  .cm-mat{ width:70px; min-width:70px; }
  .cm-pop.ledger{ width:min(94vw, 620px); min-height:0; max-height:90vh; border-radius:12px; }
  .cm-pop.ledger .cm-pop-layout{ max-height:90vh; overflow-y:auto; }
  .cm-pop.ledger .cm-pop-bg img{ opacity:.4; object-position:50% 28%; }
  .cm-ledger-main{ padding:18px 14px 16px; }
  .cm-ledger-top{ flex-direction:column; padding-right:44px; gap:12px; }
  .cm-ledger-top .cm-pop-name{ font-size:34px; }
  .cm-pop.ledger .cm-presets-ledger{ justify-content:flex-start; max-width:none; }
  .cm-pop.ledger .cm-presets-ledger button{ padding:2px 9px; font-size:13px; }
  .cm-form-switches.compact{ grid-template-columns:1fr; }
  .cm-form-switches.compact .cm-form-row{ grid-template-columns:1fr; }
  .cm-ledger-row{ grid-template-columns:1fr; min-height:0; gap:12px; padding:15px 12px; }
  .cm-ledger-art{ left:0; }
  .cm-ledger-art::after{ background:rgba(14,9,28,.5); }
  .cm-ledger-row.total{ min-height:0; }
  .cm-ledger-label b{ font-size:25px; }
  .cm-ledger-mats{ gap:9px; }
  .cm-ledger-mats .cm-mat{ width:72px; min-width:72px; }
  .cm-ledger-mats .cm-mat .ic{ width:68px; height:68px; }
  .cm-ledger-mats .cm-mat .qt{ font-size:16px; }
  .cm-total-checks{ flex-direction:row; flex-wrap:wrap; }
  .cm-talent-triplet{ width:min(100%, 300px); max-width:100%; }
  .cm-weapon-label{ align-items:flex-start; }
  .cm-weapon-pick{ width:100%; max-width:260px; }
  .cm-weapon-menu{ left:0; right:auto; width:min(290px, 100%); }
  .cm-sig-tip{ width:min(240px, 78vw); }
}

/* inline (tab) mode — panel fills the content column, no modal chrome */
.cm-inline, .gt-inline{ display:flex; flex-direction:column; min-width:0; min-height:0; height:100%; flex:1 1 0%; }
/* inline grids fill the full content column instead of hugging the left */
.cm-inline .cm-grid{ grid-template-columns:repeat(auto-fill, minmax(100px, 1fr)); }
.cm-inline .cm-panel, .gt-inline .gt-panel{ width:100%; max-width:none; height:100%; max-height:100%;
  background:none; border-radius:0; box-shadow:none; padding:0; animation:none; }
.gt-inline .gt-panel{ display:flex; flex-direction:column; }
.cm-inline .cm-head, .gt-inline .gt-head{ padding-top:2px; }
.cm-inline .cm-body{ padding-right:8px; }
.gt-inline .gt-import{ margin:26px auto 0; max-width:860px; width:100%; }
.gt-inline .gt-results{ margin-top:22px; }
/* material popup still floats over the whole (scaled) stage */
.cm-pop-wrap.float{ position:fixed; z-index:80; }

/* ===== Character Materials — controls row (tabs + search + tools) ===== */
.cm-controls{ position:relative; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:14px; flex:none; margin-top:14px; }
.cm-controls .cm-tabs{ margin-top:0; }

/* Beta / Live channel toggle — simple pill in the bottom-left corner (above the
   Pengo), rendered by the shell; Nanoka games only, defaults to Live */
/* plain "Live / Beta" text toggle — the active channel is highlighted purple,
   the other dim, separated by a literal slash. */
.cm-chan-text{ display:inline-flex; align-items:center; gap:7px; font-family:'HSR',sans-serif; }
.cm-chan-text .cm-chan-word{ border:0; background:transparent; cursor:pointer; padding:2px 1px;
  font-size:13px; font-weight:700; letter-spacing:.05em; color:#6f6499; transition:color .15s, text-shadow .15s; }
.cm-chan-text .cm-chan-word:hover{ color:#cfc4f5; }
.cm-chan-text .cm-chan-word.on{ color:#cbb8ff; text-shadow:0 0 12px var(--accent-glow); }
.cm-chan-text .cm-chan-word:focus-visible{ outline:none; color:#e6dcff; text-decoration:underline; }
.cm-chan-text .cm-chan-slash{ color:#564d7e; font-size:13px; font-weight:400; pointer-events:none; }

/* "Beta (latest)" tag — roster cell + popout header */
.cm-cell{ position:relative; }
.cm-beta-tag{ font-size:9px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1;
  color:#1c0d05; background:linear-gradient(160deg,#ffcf8a,#f0a44a); padding:2px 6px; border-radius:999px;
  box-shadow:0 1px 4px rgba(0,0,0,.45); }
.cm-cell .cm-beta-tag{ position:absolute; top:-3px; right:2px; pointer-events:none; }
/* beta character whose artwork hasn't shipped yet */
.cm-av.art-pending .disc{ box-shadow:inset 0 0 0 1px rgba(240,164,74,.5); }
.cm-av-pending{ position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  font-size:7.5px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; white-space:nowrap;
  color:#1c0d05; background:linear-gradient(160deg,#ffcf8a,#f0a44a); padding:1px 5px; border-radius:999px;
  box-shadow:0 1px 3px rgba(0,0,0,.5); pointer-events:none; }
.cm-beta-tag.pop{ align-self:center; margin-left:8px; font-size:10px; padding:3px 8px; }
.cm-tools{ margin-left:0; display:flex; align-items:center; gap:10px; position:relative; }
/* matches the overview .gp-search (hex clip, same dimensions/location) */
.cm-search{ position:relative; display:flex; align-items:center; gap:9px; height:40px; width:214px; flex:none;
  padding:0 12px 0 16px; clip-path:var(--hclip);
  background:linear-gradient(180deg, rgba(28,22,58,.85), rgba(13,10,30,.85));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.28); transition:box-shadow .25s; }
.cm-search:focus-within{ box-shadow:inset 0 0 0 1px rgba(183,170,255,.6), inset 0 0 14px rgba(139,123,255,.12); }
.cm-search .ic{ width:13px; height:13px; flex:none; border-radius:50%; border:1.5px solid #8d82bd; position:relative; }
.cm-search .ic::after{ content:""; position:absolute; width:1.5px; height:6px; background:#8d82bd; bottom:-5px; right:-2px; transform:rotate(-45deg); }
.cm-search input{ flex:1; min-width:0; border:none; outline:none; background:none; color:#efeaff;
  font-family:'HSR','Segoe UI',sans-serif; font-size:13px; letter-spacing:.04em; }
.cm-search input::placeholder{ color:#6f649c; }
.cm-search .x{ border:none; background:none; cursor:pointer; flex:none; color:#a99fd6; font-size:11px; padding:2px; }
.cm-search .x:hover{ color:#fff; }
.cm-tbtns{ display:flex; align-items:center; gap:6px; }
.cm-tool{ position:relative; width:38px; height:38px; border:none; cursor:pointer; border-radius:10px; display:grid; place-items:center;
  color:#a99fd6; background:rgba(13,10,30,.6); box-shadow:inset 0 0 0 1px rgba(183,170,255,.2);
  transition:color .2s, box-shadow .2s, background .2s; }
.cm-tool:hover{ color:#fff; box-shadow:inset 0 0 0 1px rgba(183,170,255,.45); }
.cm-tool.on{ color:#fff; background:rgba(40,31,80,.7); box-shadow:inset 0 0 0 1.5px var(--accent-bright); }
.cm-tool.warn.on{ box-shadow:inset 0 0 0 1.5px rgba(221,0,68,.8), 0 0 14px rgba(221,0,68,.22); }
.cm-tool-badge{ position:absolute; right:-5px; top:-6px; min-width:18px; height:18px; padding:0 5px; border-radius:999px;
  display:grid; place-items:center; font-family:'GI',serif; font-size:12px; line-height:1; color:#160712;
  background:linear-gradient(160deg,#ff9db4,#dd0044); box-shadow:0 0 10px rgba(221,0,68,.4); }
.i-filter{ width:15px; height:12px; background:currentColor; clip-path:polygon(0% 0%,100% 0%,62% 42%,62% 100%,38% 78%,38% 42%); }
.i-eye{ position:relative; width:18px; height:11px; }
.i-eye::before{ content:""; position:absolute; inset:0; border:1.6px solid currentColor; border-radius:50%; }
.i-eye::after{ content:""; position:absolute; left:50%; top:50%; width:5px; height:5px; margin:-2.5px 0 0 -2.5px; border-radius:50%; background:currentColor; }
.i-eyeoff{ position:relative; width:18px; height:11px; }
.i-eyeoff::before{ content:""; position:absolute; inset:0; border:1.6px solid currentColor; border-radius:50%; opacity:.7; }
.i-eyeoff::after{ content:""; position:absolute; left:-12%; top:50%; width:124%; height:1.8px; background:currentColor; transform:rotate(-20deg); border-radius:2px; }

/* filter popover */
.cm-filter{ position:absolute; top:46px; right:0; z-index:30; width:440px; max-width:62vw; padding:18px 20px;
  border-radius:16px; display:flex; flex-direction:column; gap:15px;
  background:linear-gradient(180deg, rgba(28,21,58,.98), rgba(15,11,33,.98));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.25), 0 24px 60px rgba(0,0,0,.6); animation:gtRise .22s cubic-bezier(.2,.7,.2,1); }
.cm-fsec{ display:flex; flex-direction:column; gap:9px; }
.cm-fhd{ font-family:'HSR',sans-serif; font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#8d82bd; }
.cm-fopts{ display:flex; flex-wrap:wrap; gap:8px; }
.cm-fopt{ display:inline-flex; align-items:center; gap:7px; height:34px; padding:0 14px; border:none; cursor:pointer;
  border-radius:9px; font-family:'HSR',sans-serif; font-size:12.5px; letter-spacing:.03em; color:#cfc6f5;
  background:rgba(20,15,44,.85); box-shadow:inset 0 0 0 1px rgba(183,170,255,.16); transition:color .2s, box-shadow .2s, background .2s; }
.cm-fopt:hover{ color:#fff; box-shadow:inset 0 0 0 1px rgba(183,170,255,.4); }
.cm-fopt.on{ color:#fff; background:linear-gradient(160deg, rgba(120,100,220,.5), rgba(70,55,150,.5)); box-shadow:inset 0 0 0 1.5px var(--accent-bright); }
.cm-fopt.all{ font-weight:600; min-width:54px; justify-content:center; }
.cm-fopt .fd{ width:11px; height:11px; border-radius:50%; box-shadow:0 0 0 1px rgba(0,0,0,.35), 0 0 6px rgba(0,0,0,.3); }
.cm-fi{ width:20px; height:20px; flex:none; display:grid; place-items:center; border-radius:6px;
  font-family:'GI',serif; font-size:11px; line-height:1; color:#f8f2ff;
  background:linear-gradient(160deg, rgba(122,99,200,.45), rgba(22,16,46,.85));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.25), 0 0 9px rgba(139,123,255,.12); }
.cm-fi.elem{ color:#080614; background:linear-gradient(160deg, color-mix(in oklab, var(--fi) 86%, white), var(--fi)); }
.cm-fi.rare{ color:#271802; background:linear-gradient(160deg,#ffd98a,#d99f48); }
.cm-fi.sym{ font-family:'HSR','Segoe UI',sans-serif; font-size:9px; letter-spacing:.02em; text-transform:uppercase; }

.cm-hide-menu{ position:absolute; top:46px; right:0; z-index:31; width:330px; max-width:62vw; padding:14px;
  border-radius:16px; display:flex; flex-direction:column; gap:8px;
  background:linear-gradient(180deg, rgba(28,21,58,.98), rgba(15,11,33,.98));
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.25), 0 24px 60px rgba(0,0,0,.6); animation:gtRise .22s cubic-bezier(.2,.7,.2,1); }
.cm-hide-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding:2px 4px 7px;
  border-bottom:1px solid rgba(183,170,255,.13); }
.cm-hide-hd b{ font-family:'GI',serif; font-size:17px; color:#f5f0ff; font-weight:400; }
.cm-hide-hd span{ font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#8d82bd; }
.cm-hide-menu button{ border:none; cursor:pointer; min-width:0; display:flex; align-items:center; gap:10px; text-align:left;
  padding:10px 11px; border-radius:10px; color:#cfc6f5; background:rgba(20,15,44,.58);
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.13); transition:color .2s, background .2s, box-shadow .2s; }
.cm-hide-menu button:hover:not(:disabled){ color:#fff; box-shadow:inset 0 0 0 1px rgba(183,170,255,.36); }
.cm-hide-menu button.on{ color:#fff; background:rgba(58,40,102,.66); box-shadow:inset 0 0 0 1.5px var(--accent-bright); }
.cm-hide-menu button:disabled{ opacity:.44; cursor:not-allowed; }
.cm-hide-menu .box{ width:15px; height:15px; flex:none; border-radius:4px; box-shadow:inset 0 0 0 1.5px rgba(183,170,255,.45); }
.cm-hide-menu button.on .box{ background:linear-gradient(160deg,#ff8cad,#dd0044); box-shadow:0 0 12px rgba(221,0,68,.34); }
.cm-hide-menu b{ display:block; font-size:12.5px; font-weight:600; }
.cm-hide-menu em{ display:block; margin-top:2px; font-style:normal; font-size:10.5px; line-height:1.3; color:#8d82bd; }
.cm-hide-menu .clear{ justify-content:center; color:#ffb8c9; }

/* day selector (Genshin talents) */
/* G26: compact day pills that don't stretch across the whole row. */
.cm-days{ display:inline-flex; gap:4px; flex:none; width:max-content; margin-top:14px; padding:4px; border-radius:11px;
  background:rgba(13,10,30,.5); box-shadow:inset 0 0 0 1px rgba(183,170,255,.14); }
.cm-days button{ flex:none; min-width:44px; padding:0 11px; border:none; cursor:pointer; height:32px; border-radius:8px; background:none;
  font-family:'HSR',sans-serif; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:#a99fd6;
  transition:color .2s, background .2s; }
.cm-days button:hover{ color:#fff; }
.cm-days button.on{ color:#fff; background:linear-gradient(160deg,#7a63c8,#5a47a8); box-shadow:0 0 16px var(--accent-glow); }

/* mid tab — material groups */
.cm-mgroup{ display:flex; flex-direction:column; gap:14px; }
.cm-mgroup-hd{ display:flex; align-items:baseline; gap:12px;
  border-bottom:1px solid rgba(183,170,255,.14); padding-bottom:8px; }
.cm-mgroup-hd .t{ font-family:'HSR',sans-serif; font-size:14px; letter-spacing:.2em; text-transform:uppercase; color:#efeaff; }
.cm-mgroup-hd .sub{ font-size:12px; letter-spacing:.04em; color:#8d82bd; }
.cm-mrow{ display:grid; grid-template-columns:minmax(108px, 176px) 1fr; gap:12px; align-items:start; } /* G25: tighter gap between the material and the character icons */
.cm-mtokens{ display:flex; flex-wrap:wrap; gap:12px 10px; align-items:flex-start; }
.cm-mtoken{ display:flex; flex-direction:column; align-items:center; gap:8px; width:112px; text-align:center; padding-top:4px; }
.cm-mtoken .tk{ width:62px; height:62px; border-radius:15px; display:grid; place-items:center; font-size:27px; color:#fff;
  background:linear-gradient(160deg, color-mix(in oklab, var(--tc) 68%, #2a2150), color-mix(in oklab, var(--tc) 32%, #14102e));
  box-shadow:inset 0 0 0 1.5px color-mix(in oklab, var(--tc) 55%, transparent), 0 5px 12px rgba(0,0,0,.45);
  text-shadow:0 1px 4px rgba(0,0,0,.5); }
.cm-mtoken .tk img{ width:100%; height:100%; object-fit:contain; padding:6px; filter:drop-shadow(0 3px 5px rgba(0,0,0,.42)); }
.cm-mtoken .tk .zzz-sprite img,
.cm-mtoken .tk .zzz-sprite canvas{ box-sizing:border-box; padding:6px; }
.cm-mtoken .lbl{ font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#b3a9e0; line-height:1.35; max-width:112px; }
.cm-mtoken .mt{ margin-top:-4px; font-size:10px; letter-spacing:.08em; text-transform:uppercase; color:#7f74aa; line-height:1.25; }
.cm-domain{ padding:15px 16px 18px; border-radius:15px; background:rgba(16,12,34,.28);
  box-shadow:inset 0 0 0 1px rgba(183,170,255,.11); }
.cm-domain-row + .cm-domain-row{ padding-top:16px; border-top:1px solid rgba(183,170,255,.1); }
.cm-weekly-row + .cm-weekly-row{ padding-top:15px; border-top:1px solid rgba(183,170,255,.1); }

/* boss tab */
.cm-bosshd{ display:flex; align-items:center; gap:14px; flex:none; }
.cm-bosshd .t{ font-family:'GI',serif; font-size:22px; letter-spacing:.06em; text-transform:uppercase; color:#efeaff;
  text-shadow:0 0 16px var(--accent-glow); }
.cm-bosshd .ct{ margin-left:auto; font-family:'GI',serif; font-size:20px; color:#8d82bd; }
.cm-bgroup{ display:flex; flex-direction:column; gap:15px; padding:16px 18px; border-radius:16px;
  background:rgba(16,12,34,.4); box-shadow:inset 0 0 0 1px rgba(183,170,255,.14); }
.cm-bgroup-hd{ font-family:'GI',serif; font-size:19px; color:#f3efff; }
.cm-brow{ display:grid; grid-template-columns:124px 1fr; gap:22px; align-items:start; }
.cm-bmats{ display:flex; flex-direction:column; gap:16px; }
.cm-bmats .cm-mtoken{ width:124px; }
.cm-bmats .cm-mtoken .lbl{ max-width:124px; }
/* talent-book + weekly-boss cards keep their natural height (the scroll body
   scrolls); never shrink + clip the character rows. */
.cm-domain, .cm-bgroup.cm-weekly{ position:relative; flex-shrink:0; }
/* G30: GI trounce domains in a 2-column grid, newest-first; each cell stacks the
   material label above the character grid so it fits 5+ icons. */
.cm-trounce-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:14px; align-items:start; }
.cm-trounce-grid .cm-brow{ grid-template-columns:1fr; gap:10px; }
.cm-trounce-grid .cm-bmats{ flex-direction:row; flex-wrap:wrap; gap:10px; }
.cm-trounce-grid .cm-bmats .cm-mtoken{ width:auto; }

.cm-presets{ display:flex; flex-wrap:wrap; gap:7px; padding:5px; border-radius:13px;
  background:rgba(13,10,30,.5); box-shadow:inset 0 0 0 1px rgba(183,170,255,.14); }
.cm-presets button{ border:none; cursor:pointer; height:33px; padding:0 13px; border-radius:9px;
  font-family:'HSR',sans-serif; font-size:11.5px; letter-spacing:.1em; color:#a99fd6; background:none;
  transition:color .2s, background .2s, box-shadow .2s; }
.cm-presets button:hover{ color:#fff; }
.cm-presets button.on{ color:#fff; background:linear-gradient(160deg,#7a63c8,#5a47a8); box-shadow:0 0 14px var(--accent-glow); }

.cm-empty{ color:#8d82bd; font-size:14px; padding:26px; text-align:center; letter-spacing:.03em; }

@media (max-width: 1599px), (max-height: 859px){
  .stage.is-compact-stage{
    width:100vw !important; height:100vh !important; transform:none !important;
    max-width:none; max-height:none; overflow:hidden;
  }
  .stage.is-compact-stage .gp-page{ padding:0 18px 18px; }
  .stage.is-compact-stage .gp-topbar{ height:auto; min-height:94px; padding:12px 0 8px; justify-content:flex-start; }
  .stage.is-compact-stage .gp-topbar .tb-brand{ left:8px; height:60px; padding:0 12px 0 2px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .plate{ width:190px; height:54px; left:-8px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .tb-eye{ width:42px; height:42px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .brand-mark{ gap:8px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .wm{ font-size:30px; }
  .stage.is-compact-stage .gp-topbar .tb-center{
    margin-left:150px; max-width:calc(100vw - 166px); gap:10px; overflow-x:auto; padding:4px 4px 8px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .stage.is-compact-stage .gp-topbar .tb-center::-webkit-scrollbar{ display:none; }
  .stage.is-compact-stage .gp-topbar .banner{ min-width:178px; height:46px; padding:0 20px; font-size:12px; }
  .stage.is-compact-stage .banner-seat{ height:78px; left:-10px; bottom:-8px; }
  .stage.is-compact-stage .gp-topbar .tb-pengo,
  .stage.is-compact-stage .gp-corner{ display:none; }
  .stage.is-compact-stage .gp-layout,
  .stage.is-compact-stage .gp-layout.has-aside{
    grid-template-columns:minmax(0, 1fr); grid-auto-rows:auto; gap:14px; overflow:auto; padding-bottom:8px;
  }
  .stage.is-compact-stage .gp-side-nav{
    flex-direction:row; overflow-x:auto; overflow-y:hidden; padding:0 0 6px; min-height:46px;
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .stage.is-compact-stage .gp-side-nav::-webkit-scrollbar{ display:none; }
  .stage.is-compact-stage .gp-fn-row{ flex:0 0 auto; min-width:184px; justify-content:flex-start; }
  .stage.is-compact-stage .gp-main-pane{ min-height:auto; overflow:visible; }
  .stage.is-compact-stage .gp-main-pane.fill{ grid-column:auto; }
  .stage.is-compact-stage .gp-cardrow{ overflow-x:auto; padding-bottom:36px; }
  .stage.is-compact-stage .gp-fav-picker{ max-height:148px; grid-template-columns:repeat(auto-fill, minmax(164px, 1fr)); }
  .stage.is-compact-stage .gp-search-wrap{ margin-right:0; }
  .stage.is-compact-stage .search-seat{ display:none; }
  .stage.is-compact-stage .cm-head{ align-items:flex-start; flex-wrap:wrap; }
  .stage.is-compact-stage .cm-tools{ order:3; width:100%; margin-left:0; justify-content:space-between; }
  .stage.is-compact-stage .cm-search{ flex:1 1 220px; width:auto; }
  /* compact: never a horizontal slider — tabs wrap, the day row shrinks to fit fully */
  .stage.is-compact-stage .cm-controls{ overflow:visible; flex-wrap:wrap; }
  .stage.is-compact-stage .cm-tabs{ flex-wrap:wrap; }
  .stage.is-compact-stage .cm-tabs button{ flex:0 1 auto; padding-inline:12px; }
  .stage.is-compact-stage .cm-days{ width:100%; max-width:100%; overflow:visible; flex-wrap:nowrap; }
  .stage.is-compact-stage .cm-days button{ flex:1 1 0; min-width:0; }
  .stage.is-compact-stage .cm-grid,
  .stage.is-compact-stage .cm-inline .cm-grid{ grid-template-columns:repeat(auto-fill, minmax(92px, 1fr)); gap:15px 11px; }
  .stage.is-compact-stage .cm-mrow,
  .stage.is-compact-stage .cm-brow{ grid-template-columns:1fr; gap:12px; }
  .stage.is-compact-stage .cm-mtokens,
  .stage.is-compact-stage .cm-bmats{ flex-direction:row; flex-wrap:wrap; gap:10px; }
  .stage.is-compact-stage .cm-filter{ position:fixed; left:18px; right:18px; top:104px; width:auto; max-width:none; max-height:70vh; overflow:auto; }
  .stage.is-compact-stage .cm-hide-menu{ position:fixed; left:18px; right:18px; top:104px; width:auto; max-width:none; max-height:70vh; overflow:auto; }
}

@media (max-width: 680px){
  .stage.is-compact-stage .gp-page{ padding:0 12px 12px; }
  .stage.is-compact-stage .gp-topbar .tb-brand{ left:6px; height:52px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .tb-eye{ width:36px; height:36px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .brand-mark{ gap:6px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .wm{ font-size:26px; }
  .stage.is-compact-stage .gp-topbar .tb-center{ margin-left:128px; max-width:calc(100vw - 140px); }
  .stage.is-compact-stage .gp-topbar .banner{ min-width:150px; font-size:10.5px; letter-spacing:.11em; }
  .stage.is-compact-stage .gp-favs > div:first-child{ gap:10px !important; }
  .stage.is-compact-stage .gp-sec{ gap:8px; }
  .stage.is-compact-stage .gp-sec .ic{ height:70px; margin:-8px -18px -16px 0; }
  .stage.is-compact-stage .gp-sec .t{ font-size:20px; line-height:1; }
  .stage.is-compact-stage .gp-side-nav{ gap:6px; }
  .stage.is-compact-stage .gp-fn-row{ min-width:max-content; padding:10px 11px; font-size:10.5px; letter-spacing:.08em; }
  .stage.is-compact-stage .gp-fn-row .go{ display:none; }
  .stage.is-compact-stage .cm-days{ gap:3px; padding:4px; }
  .stage.is-compact-stage .cm-days button{ font-size:11px; letter-spacing:.08em; }
  .stage.is-compact-stage .cm-panel{ padding:0; }
  .stage.is-compact-stage .cm-tools{ gap:8px; }
  .stage.is-compact-stage .cm-tbtns{ flex:none; }
  .stage.is-compact-stage .cm-tool{ width:36px; height:36px; }
  .stage.is-compact-stage .cm-tabs button{ font-size:10.5px; letter-spacing:.08em; padding-inline:10px; }
}