/* ============================================================
   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; }
@font-face{ font-family:'Khaenriah'; src:url('../../assets/fonts/Khaenriah-Regular.otf') format('opentype'); 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:var(--nyx-color-accent);
  --accent-bright:var(--nyx-color-accent-bright);
  --accent-glow:var(--nyx-color-accent-glow);
  /* Literal fallback preserves the existing static favourites contract. */
  --character-hover:#c18cff;
  --character-hover:var(--nyx-color-character-hover);
  --character-hover-glow:var(--nyx-color-character-hover-glow);
  --panel:var(--nyx-color-surface);
  --panel2:var(--nyx-color-surface-raised);
  --tx:var(--nyx-color-text);
  --tx-dim:var(--nyx-color-text-dim);
  --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; z-index:1; overflow:hidden;
  background:var(--nyx-color-canvas);
  font-family:var(--nyx-font-ui);
  font-size:var(--nyx-compat-size-16p5px);
  color:var(--tx);
  -webkit-font-smoothing:antialiased;
  /* Text is selectable/copyable site-wide (user decision 2026-07-15); only
     drag/pan surfaces and buttons opt out below. */
}
.gp :is(button,[role="button"],.gp-fn-row,.gp-hex){ user-select:none; }
.gp *{ box-sizing:border-box; margin:0; padding:0; }

/* Shared contracts stay dormant until their feature-by-feature migrations. */
.nyx-btn{
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--nyx-space-8);
  clip-path:var(--nyx-clip-control); text-transform:uppercase; letter-spacing:var(--nyx-tracking-control);
  min-height:38px; box-sizing:border-box; border:0; border-radius:0;
  padding:var(--nyx-space-8) var(--nyx-space-14); color:var(--nyx-color-control-text);
  background:var(--nyx-color-control-surface); box-shadow:var(--nyx-shadow-control);
  font:var(--nyx-compat-font-872b97fb43e6); letter-spacing:var(--nyx-compat-tracking-p04em);
  text-decoration:none; cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,filter .16s ease,transform .16s ease;
}
.nyx-btn:hover{ color:var(--nyx-color-text-max); background:var(--nyx-color-control-surface-hover); }
.nyx-btn:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
.nyx-btn:active{ transform:translateY(1px); }
.nyx-btn:disabled,.nyx-btn[aria-disabled="true"]{ cursor:not-allowed; opacity:.48; }
.nyx-btn--primary{ color:var(--nyx-color-text-max); background:var(--nyx-color-control-active); }
.nyx-btn--primary:hover{ background:var(--nyx-color-control-active); filter:brightness(1.07); }
.nyx-btn--icon{ width:34px; min-width:34px; height:34px; min-height:34px; padding:0; }

.nyx-input{
  min-height:38px; box-sizing:border-box; border:1px solid var(--nyx-color-border-strong);
  border-radius:var(--nyx-radius-control); outline:0; padding:var(--nyx-space-8) var(--nyx-space-12);
  color:var(--nyx-color-heading); background:var(--nyx-color-input-surface);
  font:var(--nyx-compat-font-8182614572fa);
}
.nyx-input::placeholder{ color:var(--nyx-color-placeholder); }
.nyx-input:focus-visible{ border-color:var(--nyx-color-accent-bright); outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
.nyx-input:disabled{ cursor:not-allowed; opacity:.48; }

.nyx-panel{ padding:var(--nyx-space-24); border-radius:var(--nyx-radius-panel); background:var(--nyx-gradient-panel); box-shadow:var(--nyx-shadow-panel); }
.nyx-card{ padding:var(--nyx-space-12); border-radius:var(--nyx-radius-card); background:var(--nyx-color-surface-nested); box-shadow:var(--nyx-shadow-edge-subtle); }
.nyx-card--interactive{ cursor:pointer; transition:transform .18s ease,box-shadow .18s ease,filter .18s ease; }
.nyx-card--interactive:hover{ transform:translateY(-1px); filter:saturate(1.03); box-shadow:var(--nyx-compat-shadow-box-8ee9c57379f9); }
.nyx-card--interactive:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }

.nyx-chip{
  display:inline-flex; align-items:center; gap:var(--nyx-space-4); padding:var(--nyx-space-4) var(--nyx-space-8);
  border-radius:var(--nyx-radius-small); color:var(--nyx-color-chip-text); background:var(--nyx-color-chip-surface);
  box-shadow:var(--nyx-compat-shadow-box-e9bf70852e54);
  font:var(--nyx-compat-font-5ab99a010eb0);
  letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; white-space:nowrap;
}
.nyx-chip--success{ color:var(--nyx-color-chip-success); background:var(--nyx-color-chip-success-surface); box-shadow:var(--nyx-compat-shadow-box-5b2288cdc123); }
.nyx-chip--danger{ color:var(--nyx-color-chip-danger); background:var(--nyx-color-chip-danger-surface); box-shadow:var(--nyx-compat-shadow-box-d0ffda305757); }
.nyx-chip--warning{ color:var(--nyx-color-chip-warning); background:var(--nyx-compat-color-a9b260a4109a); box-shadow:var(--nyx-compat-shadow-box-b5f0fa3b2bcd); }
.nyx-chip--info{ color:var(--nyx-color-chip-info); background:var(--nyx-color-chip-info-surface); box-shadow:var(--nyx-compat-shadow-box-b875f2c75e2b); }

.nyx-section-title{
  display:flex; align-items:center; gap:var(--nyx-space-12); color:var(--nyx-color-heading);
  font:var(--nyx-compat-font-293f13d5dbf4);
  letter-spacing:var(--nyx-compat-tracking-p03em); text-shadow:var(--nyx-shadow-title); white-space:nowrap;
}
.nyx-section-title::after{ content:""; flex:1; height:1px; background:var(--nyx-gradient-section-rule); }

.nyx-u-fill{ flex:1 1 auto; min-width:0; }
.nyx-u-stack{ display:flex; flex-direction:column; gap:var(--nyx-space-12); }
.nyx-u-hidden{ display:none !important; }

/* background stack */
.page-bg{ z-index:0; }
.nyx-bgwrap{ z-index:1; }
.page-pattern{ z-index:2; }
.page-vignette{ z-index:3; }
.nyx-rune-field{ z-index:4; }
.stage-wrap{ z-index:5; }
.gp-bg{ position:absolute; inset:0; background:var(--nyx-color-canvas) 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%, var(--nyx-compat-color-876dbdbfb251), transparent 46%),
    radial-gradient(140% 120% at 50% 120%, var(--nyx-compat-color-7bbf8dd45571), transparent 55%),
    linear-gradient(180deg, var(--nyx-compat-color-32ad2e23a2c4) 0%, var(--nyx-compat-color-77f872e799a7) 24%, var(--nyx-compat-color-77f872e799a7) 60%, var(--nyx-compat-color-9614c9320601) 100%); }
.gp-content{ position:absolute; inset:0; }

/* ===== typography helpers ===== */
.gp-display{ font-family:var(--nyx-font-display); color:var(--nyx-compat-color-hex-f7f4ff); text-shadow:var(--nyx-compat-shadow-text-51cdec3fc915); }
.gp-kicker{ font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p3em); text-transform:uppercase; color:var(--tx-dim); }
.gp-sec{ position:relative; display:flex; align-items:center; gap:var(--nyx-space-12); }
.gp-sec .perch{ position:absolute; left:8px; bottom:-2px; height:52px; width:auto; z-index:2;
  transform:scaleX(1); pointer-events:none; filter:var(--nyx-compat-shadow-drop-25936f7ac68b); }
.gp-sec.withperch .rule{ transform:translateY(10px); }
.gp-sec .t{ font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); letter-spacing:var(--nyx-compat-tracking-p03em); color:var(--nyx-color-heading);
  text-shadow:var(--nyx-compat-shadow-text-7d6ceea671c0); white-space:nowrap; }
.gp-sec .rule{ position:relative; flex:1; height:1px; background:linear-gradient(90deg, var(--nyx-compat-color-f6b07e29e7bf), var(--nyx-compat-color-51af19e1cccc)); }
.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:var(--nyx-compat-spacing-neg-14px) var(--nyx-compat-spacing-neg-24px) var(--nyx-compat-spacing-neg-22px) var(--nyx-space-4); pointer-events:none; }
.gp-sec.withperch .t{ font-size:var(--nyx-compat-size-25px); }

/* ===== hex button (back / functions / actions) ===== */
.gp-hex{ position:relative; border:none; cursor:pointer; padding:var(--nyx-space-2); background:none; height:48px;
  filter:var(--nyx-compat-shadow-drop-d5bc05e3566e) var(--nyx-compat-shadow-drop-cb8d1980ed55);
  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,var(--nyx-compat-color-hex-cabfff) 0%,var(--nyx-compat-color-hex-8a79e8) 34%,var(--nyx-compat-color-hex-3a2f74) 66%,var(--nyx-compat-color-hex-6253b8) 100%); }
.gp-hex .in{ position:relative; display:flex; align-items:center; justify-content:center; gap:var(--nyx-space-10);
  height:100%; padding:0 var(--nyx-compat-spacing-26px); clip-path:var(--hclip);
  background:linear-gradient(180deg,var(--nyx-color-surface-raised),var(--nyx-color-surface));
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-body); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase;
  color:var(--nyx-compat-color-hex-e9e2ff); white-space:nowrap; transition:color .3s; }
.gp-hex:hover{ transform:translateY(-2px); filter:var(--nyx-compat-shadow-drop-f72ecd84a7c1) var(--nyx-compat-shadow-drop-8124492c4d1a); }
.gp-hex:hover .in{ color:var(--nyx-color-text-max); }
.gp-hex:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
.gp-hex.sm{ height:40px; }
.gp-hex.sm .in{ font-size:var(--nyx-compat-size-12p5px); padding:0 var(--nyx-space-20); }
/* 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:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-lead); color:var(--accent-bright); }
.gp-hex .eye{ width:16px; height:16px; flex:none;
  background:linear-gradient(165deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-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,var(--nyx-compat-color-hex-413480),var(--nyx-compat-color-hex-221a4e)); color:var(--nyx-color-text-max); }
.gp-hex.on{ filter:var(--nyx-compat-shadow-drop-f72ecd84a7c1) var(--nyx-compat-shadow-drop-cb8d1980ed55); }
.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%, var(--nyx-compat-color-hex-1b1640), var(--nyx-compat-color-hex-0a0820));
  box-shadow:var(--nyx-compat-shadow-box-2827c21485f3);
  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) var(--nyx-compat-shadow-drop-66a657c8872d); }
.gp-med:hover{ transform:translateY(-3px);
  box-shadow:var(--nyx-compat-shadow-box-d54c51cc2c49); }
.gp-med.on{ box-shadow:var(--nyx-compat-shadow-box-68f3f3ce7dee); }
.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%, var(--nyx-compat-color-hex-1b1640), var(--nyx-compat-color-hex-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; }
.gp-med.sim.sad .ballscale{ transform:scale(.86); transition-duration:1.1s; }
@keyframes gpSimVibe{ from{ transform:translateX(-1px); } to{ transform:translateX(1px); } }
.gp-med.sim .slayer{ position:absolute; inset:0;
  background:linear-gradient(165deg,var(--nyx-compat-color-hex-e3dcff),var(--nyx-compat-color-hex-9a89ea) 70%,var(--nyx-compat-color-hex-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; }
.gp-game-rail{ display:flex; align-items:center; gap:var(--nyx-space-16); }
.gp-game-rail-icons{ display:flex; align-items:center; gap:var(--nyx-space-10); }

/* ===== 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:var(--nyx-compat-shadow-drop-d5bc05e3566e) var(--nyx-compat-shadow-drop-2b7be80e6740); }
.gp-fav .frame{ position:absolute; inset:0; clip-path:var(--clip);
  background:linear-gradient(158deg,var(--nyx-compat-color-hex-cabfff) 0%,var(--nyx-compat-color-hex-8a79e8) 16%,var(--nyx-compat-color-hex-473a90) 42%,var(--nyx-compat-color-hex-241c4c) 58%,var(--nyx-compat-color-hex-5b4cb0) 82%,var(--nyx-compat-color-hex-b6a7ff) 100%); }
.gp-fav .frame::before{ content:""; position:absolute; inset:3px; clip-path:var(--clip); background:var(--nyx-color-surface); }
.gp-fav .topline{ position:absolute; top:0; left:11%; right:11%; height:3px; border-radius:var(--nyx-compat-radius-2px);
  background:var(--accent-bright); box-shadow:var(--nyx-compat-shadow-box-df40460eb9c6); z-index:4; }
.gp-fav .artwrap{ position:absolute; inset:0 5px 5px 5px; clip-path:var(--clip); overflow:hidden;
  box-shadow:var(--nyx-compat-shadow-box-590d965d7d24); }
.gp-fav .art{ position:absolute; inset:0; background-size:cover; background-position:50% 14%;
  background-color:var(--nyx-color-surface); transition:transform .5s; }
.gp-fav .scrim{ position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, var(--nyx-compat-color-f42ce387a3b1) 0%, var(--nyx-compat-color-12727bdce092) 24%, var(--nyx-compat-color-12727bdce092) 52%, var(--nyx-compat-color-c8b2bf152052) 100%); }
.gp-fav .nm{ position:absolute; left:0; right:0; bottom:18px; z-index:5; text-align:center;
  font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-18p5px); color:var(--nyx-compat-color-hex-f6f3ff);
  text-shadow:var(--nyx-compat-shadow-text-692422ff99e2); }
.gp-fav .nm .sub{ display:block; margin-top:var(--nyx-space-2); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-10p5px);
  letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; color:var(--nyx-color-text-soft); 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,var(--nyx-compat-color-hex-e3dcff),var(--nyx-compat-color-hex-8b79ea)); opacity:.9;
  box-shadow:var(--nyx-compat-shadow-box-4ff6bf766515); clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%); }
.gp-fav:hover{ transform:translateY(-8px);
  filter:var(--nyx-compat-shadow-drop-45e5a31895ae) var(--nyx-compat-shadow-drop-186de4cf1353); }
.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:var(--nyx-space-2);
  filter:var(--nyx-compat-shadow-drop-c6e344756ffa) var(--nyx-compat-shadow-drop-d56318fc11a7); }
.gp-panel .rim{ position:absolute; inset:0; clip-path:var(--hclip);
  background:linear-gradient(158deg,var(--nyx-compat-color-602c2104d90c) 0%,var(--nyx-compat-color-855f156f7583) 30%,var(--nyx-compat-color-d8223287e67d) 64%,var(--nyx-compat-color-0d2863e73b48) 100%); }
.gp-panel .body{ position:relative; clip-path:var(--hclip);
  background:linear-gradient(180deg, var(--nyx-compat-color-e4ea65e930a4), var(--nyx-compat-color-4640fde88a88)); }

/* ===== redemption code rows ===== */
.gp-code{ display:grid; grid-template-columns:minmax(0, 1fr) auto; align-items:center; gap:var(--nyx-space-6) var(--nyx-space-12); padding:var(--nyx-space-10) var(--nyx-compat-spacing-13px) var(--nyx-space-10) var(--nyx-compat-spacing-15px);
  border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-3882983fe67b);
  box-shadow:var(--nyx-compat-shadow-box-5dd74fa73177); }
.gp-code.premium{ box-shadow:var(--nyx-compat-shadow-box-f8ec99efaee7); }
.gp-code .code-main{ min-width:0; display:flex; align-items:center; gap:var(--nyx-space-8); }
.gp-code .code-actions{ display:flex; align-items:center; justify-content:flex-end; gap:var(--nyx-compat-spacing-7px); }
.gp-code .cc{ font-family:var(--nyx-font-mono); font-size:var(--nyx-compat-size-15p5px); letter-spacing:var(--nyx-compat-tracking-p07em);
  color:var(--nyx-color-text); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; align-self:center; text-decoration:none; }
.gp-code a.cc:hover{ color:var(--nyx-compat-color-hex-cfc6ff); text-shadow:var(--nyx-compat-shadow-text-4ff6bf766515); }
.gp-code .rw{ grid-column:1 / -1; min-width:0; font-size:var(--nyx-compat-size-12p5px); color:var(--tx-dim); letter-spacing:var(--nyx-compat-tracking-p03em); line-height:1.3; }
.gp-code .cp{ position:relative; border:none; cursor:pointer; height:30px; padding:0 var(--nyx-space-14); flex:none;
  border-radius:var(--nyx-compat-radius-7px); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p16em);
  text-transform:uppercase; color:var(--nyx-color-surface); font-weight:var(--nyx-weight-semibold);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-cfc4ff),var(--nyx-compat-color-hex-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,var(--nyx-compat-color-hex-dcd6ff),var(--nyx-color-accent)); color:var(--nyx-compat-color-hex-100b26); }
.gp-code .cp.icon{ width:32px; padding:0; display:grid; place-items:center; color:var(--nyx-compat-color-hex-160c25); }
.gp-code .mark{ border:none; cursor:pointer; height:28px; padding:0 var(--nyx-space-10);
  border-radius:var(--nyx-compat-radius-7px); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase;
  color:var(--nyx-color-text-soft); background:var(--nyx-compat-color-933f25d488b1); box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a);
  transition:color .2s, box-shadow .2s, transform .2s; }
.gp-code .mark:hover{ color:var(--nyx-color-text-max); transform:translateY(-1px); box-shadow:var(--nyx-compat-shadow-box-225a64c2e759); }
.gp-code .premium-dot{ width:7px; height:7px; flex:none; border-radius:50%; background:var(--nyx-color-accent-bright); box-shadow:var(--nyx-compat-shadow-box-47709c09df0e); }
.gp-code .newtag{ flex:none; font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p14em); font-weight:var(--nyx-weight-bold);
  padding:var(--nyx-space-2) var(--nyx-space-6); border-radius:var(--nyx-radius-small); color:var(--nyx-color-surface); background:var(--nyx-color-accent-bright);
  box-shadow:var(--nyx-compat-shadow-box-4ff6bf766515); }

/* ===== redemption codes — dense table (layout D) ===== */
.gp-codes-table{ display:flex; flex-direction:column; min-width:0; border-radius:var(--nyx-radius-card);
  background:var(--nyx-compat-color-1e36660fc6d8); box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58); overflow:hidden; }
/* The code column used to stretch, pushing the reward amount to the far right
   with a lake of dead space between them. Now the code sizes to its own text
   and the amount sits right beside it; the copy button keeps the right edge
   (user 2026-08-09). */
.gp-code-row{ display:grid; grid-template-columns:auto auto auto minmax(0,1fr) auto; align-items:center; gap:var(--nyx-space-8);
  padding:var(--nyx-space-4) var(--nyx-compat-spacing-11px); border-bottom:1px solid var(--nyx-compat-color-dffb33c1c353); transition:background .15s; }
/* Spacer cell between the reward and the copy button. */
.gp-code-row::after{ content:""; grid-column:4; }
.gp-code-row .cc-copy-cell{ grid-column:5; position:relative; display:grid; place-items:center; }
.gp-code-row:last-child{ border-bottom:none; }
.gp-code-row:hover{ background:var(--nyx-compat-color-5e50529bbb61); }
.gp-code-row.st-redeemed{ opacity:.5; }
.gp-code-row.st-redeemed .cc{ text-decoration:line-through; text-decoration-color:var(--nyx-compat-color-aeceb004b4ec); }
.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:var(--nyx-radius-small); background:var(--nyx-compat-color-7081c4a5b868);
  box-shadow:var(--nyx-compat-shadow-box-0cbfbee624cb); transition:background .15s, box-shadow .15s; }
.cc-check input:checked + .box{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-9a89ea),var(--nyx-compat-color-hex-6b5bd0)); box-shadow:var(--nyx-compat-shadow-box-11c6504beffe); }
.cc-check input:checked + .box::after{ content:"\2713"; position:absolute; inset:0; display:grid; place-items:center; font-size:var(--nyx-type-small); color:var(--nyx-color-surface); font-weight:var(--nyx-weight-bold); }
.cc-check input:focus-visible + .box{ box-shadow:var(--nyx-compat-shadow-box-c12fa247c17d); }
.gp-code-row .cc{ font-family:var(--nyx-font-mono); font-size:var(--nyx-type-body); letter-spacing:var(--nyx-compat-tracking-p05em); color:var(--nyx-color-text);
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; cursor:pointer; }
.gp-code-row a.cc:hover{ color:var(--nyx-compat-color-hex-cfc6ff); text-decoration:underline; }
.gp-code-row .cc.no-link{ cursor:default; color:var(--nyx-compat-color-hex-cfc6ff); }
.cc-reward{ position:relative; display:inline-flex; align-items:center; gap:var(--nyx-compat-spacing-5px); flex:none; cursor:help; color:var(--nyx-compat-color-hex-ffe3b3); font-size:var(--nyx-compat-size-13px); }
.cc-reward img{ width:24px; height:24px; object-fit:contain; filter:var(--nyx-compat-shadow-drop-34f9cfdf6f23); }
.cc-reward .cur-glyph{ width:16px; height:16px; transform:rotate(45deg); background:linear-gradient(160deg,var(--nyx-compat-color-hex-cfc4ff),var(--nyx-color-accent)); }
.cc-reward b{ font-family:var(--nyx-font-display); font-weight:var(--nyx-weight-regular); font-size:var(--nyx-compat-size-15px); color:var(--nyx-compat-color-hex-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:var(--nyx-compat-spacing-9px) var(--nyx-space-10); border-radius:var(--nyx-radius-control); background:var(--nyx-compat-color-77799c779fc0);
  box-shadow:var(--nyx-compat-shadow-box-2046a0de070f);
  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:var(--nyx-compat-spacing-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:var(--nyx-compat-color-hex-b9aeea); transition:color .18s, transform .15s; }
.cc-copy:hover{ color:var(--nyx-color-text-max); transform:scale(1.12); }
.gp-code-row{ position:relative; }
.cc-copied-pop{ position:absolute; z-index:9; right:0; top:-18px; padding:var(--nyx-space-2) var(--nyx-space-8);
  border-radius:var(--nyx-radius-pill); background:var(--nyx-color-control-active); color:var(--nyx-color-text-max);
  font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-bold); letter-spacing:var(--nyx-tracking-control);
  text-transform:uppercase; pointer-events:none; animation:nyxCopiedPop 1.4s ease forwards; }
@keyframes nyxCopiedPop{ 0%{ opacity:0; transform:translateY(3px); } 12%{ opacity:1; transform:translateY(0); } 78%{ opacity:1; } 100%{ opacity:0; } }
/* overview Codes — keep at least 3 rows visible, scroll the rest, with a "N more below" hint */
.overview-codes-scroll{ position:relative; max-height:none; overflow:visible; overscroll-behavior:contain;
  display:flex; flex-direction:column; gap:var(--nyx-space-10); padding-right:0;
  -webkit-mask-image:none; mask-image:none; }
.overview-codes-scroll::-webkit-scrollbar{ width:6px; }
.overview-codes-scroll::-webkit-scrollbar-track{ background:var(--nyx-compat-color-dffb33c1c353); border-radius:var(--nyx-compat-radius-3px); }
.overview-codes-scroll::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-3px); }
.overview-codes-scroll::-webkit-scrollbar-thumb:hover{ background:var(--nyx-compat-color-b4e6993b837a); }
.codes-more-hint{ display:flex; align-items:center; justify-content:center; gap:var(--nyx-compat-spacing-7px); margin-top:var(--nyx-compat-spacing-neg-8px);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase; color:var(--nyx-color-accent-bright); pointer-events:none; }
.codes-more-hint{ display:none; }
.codes-more-hint .chev{ font-size:var(--nyx-compat-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:var(--nyx-compat-spacing-7px); }
.codes-group + .codes-group{ margin-top:var(--nyx-space-4); }
.codes-group-hd{ display:flex; align-items:center; gap:var(--nyx-space-8); padding:0 var(--nyx-space-2);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; color:var(--nyx-color-accent-bright); }
.codes-group-hd img{ width:22px; height:22px; object-fit:contain; flex:none; filter:var(--nyx-compat-shadow-drop-34f9cfdf6f23); }
.codes-group-hd .cur-glyph{ width:12px; height:12px; flex:none; transform:rotate(45deg);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-cfc4ff),var(--nyx-color-accent)); box-shadow:var(--nyx-compat-shadow-box-d9cbcc71930c); }
.codes-group-hd .gl{ flex:none; }
.codes-group-hd .gn{ flex:none; font-size:var(--nyx-compat-size-9p5px); color:var(--nyx-compat-color-hex-9e93c8); }
.codes-group-hd .rule{ flex:1; height:1px; background:linear-gradient(90deg, var(--nyx-compat-color-e6cde4e4b286), var(--nyx-compat-color-51af19e1cccc)); }
/* non-currency reward cell — plain text, no currency image */
.cc-reward.plain{ color:var(--nyx-color-text-soft); cursor:help; }
.cc-reward.plain .reward-text{ font-size:var(--nyx-type-small); max-width:140px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.reward-chips{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-6); min-width:0; }
.reward-chips span{ min-width:0; max-width:100%; min-height:22px; display:inline-flex; align-items:center; padding:var(--nyx-compat-spacing-3px) var(--nyx-space-8);
  border-radius:var(--nyx-radius-control); background:var(--nyx-compat-color-108ef61fc9ce); color:var(--nyx-color-text-soft);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); font-size:var(--nyx-type-small); line-height:1.25; }
.reward-chips .more{ min-width:30px; justify-content:center; font-weight:var(--nyx-weight-bold); cursor:help; color:var(--nyx-compat-color-hex-cfc6ff);
  background:var(--nyx-compat-color-5f4cd78a5abc); box-shadow:var(--nyx-compat-shadow-box-ec221b14b392); }

/* ===== misc rows ===== */
.gp-fn-row{ display:flex; align-items:center; gap:var(--nyx-space-10); cursor:pointer; padding:var(--nyx-space-12) var(--nyx-compat-spacing-11px);
  clip-path:var(--hclip); transition:background .25s; color:var(--nyx-compat-color-hex-d9d1fb); font-size:var(--nyx-compat-size-13p5px); letter-spacing:var(--nyx-compat-tracking-p05em);
  text-transform:uppercase; white-space:nowrap; }
.gp-fn-row:hover{ background:var(--nyx-compat-color-ac1e946fec49); color:var(--nyx-color-text-max); }
/* 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; }
/* The hover chevron was removed 2026-08-08 at the user's request. */
.gp-fn-row .go{ display:none; }
.gp-fn-row.on{ background:var(--nyx-compat-color-c2b0ed1f9dca); color:var(--nyx-color-text-max);
  box-shadow:var(--nyx-compat-shadow-box-f8bdfc09bbda); }
.gp-fn-row.on .dia{ opacity:1; filter:var(--nyx-compat-shadow-drop-268e9d608980); }
.gp-fn-row:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:-2px;
  background:var(--nyx-compat-color-c2b0ed1f9dca); color:var(--nyx-color-text-max); }
.gp-fn-row:focus-visible .dia{ opacity:.6; }
.gp-section-nav-button{ appearance:none; width:100%; border:0; text-align:left; font-family:inherit; background-color:transparent; }

.gp-layout{ flex:1; min-width:0; min-height:0; display:grid; grid-template-columns:236px minmax(0, 1fr);
  gap:var(--nyx-compat-spacing-22px); overflow:hidden; }
.gp-layout.has-aside{ grid-template-columns:236px minmax(0, 1fr) minmax(300px, 360px); }
.gp-side-nav{ display:flex; flex-direction:column; gap:var(--nyx-space-8); min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:var(--nyx-space-2); }
.gp-side-nav::-webkit-scrollbar{ width:5px; height:5px; }
.gp-side-nav::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-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-overview-main{
  overflow-y:auto;
  overflow-x:hidden;
  gap:var(--nyx-space-18);
  padding-right:var(--nyx-space-4);
  overscroll-behavior:contain;
}
.gp-overview-aside{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-12);
  overflow-y:auto;
  overflow-x:hidden;
  padding-right:var(--nyx-space-2);
  overscroll-behavior:contain;
}

.gp-current-banners{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-space-8); }
.gp-current-banners-head{ display:flex; align-items:center; gap:var(--nyx-space-12); min-width:0; }
.gp-current-banners-head > span{
  flex:none;
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  letter-spacing:var(--nyx-compat-tracking-p16em);
  text-transform:uppercase;
  color:var(--nyx-color-text-muted);
}
.gp-current-banner-row{
  min-width:0;
  display:flex;
  gap:var(--nyx-space-12);
  overflow-x:auto;
  overflow-y:visible;
  padding:var(--nyx-space-4) var(--nyx-space-2) var(--nyx-space-2);
  overscroll-behavior-x:contain;
}
.gp-current-banner-cell{
  flex:0 0 342px;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-6);
}
.gp-oban{
  /* Featured-name scale (user 2026-08-09): the name reads as the headline of the
     card, so its line box is at least as tall as the 44px roster icon beside it. */
  --gp-oban-name-size:34px;
  position:relative;
  min-height:236px;
  overflow:hidden;
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-8df2e4e97657);
  box-shadow:var(--nyx-compat-shadow-box-158c1c10878c);
}
.gp-oban::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(135deg, var(--nyx-compat-color-78399ed4621b), var(--nyx-compat-color-d014b39fa56f) 44%, transparent 70%),
    radial-gradient(circle at 100% 0%, var(--nyx-compat-color-e98d879787c1), transparent 34%);
  opacity:.82;
}
.gp-oban-art{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:78% 30%;
  background-repeat:no-repeat;
  opacity:.68;
  filter:saturate(1.05) contrast(1.04);
}
.gp-oban-shade{
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg, var(--nyx-compat-color-85f7484c43f9) 0%, var(--nyx-compat-color-41b68c99533c) 56%, var(--nyx-compat-color-1d79ac92198d) 100%),
    linear-gradient(180deg, var(--nyx-compat-color-cbb26cfba1ad), var(--nyx-compat-color-0c86eb35730e));
}
.gp-oban-body{
  position:relative;
  z-index:1;
  min-height:236px;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-compat-spacing-9px);
  padding:var(--nyx-space-14) var(--nyx-space-14) var(--nyx-space-12);
}
.gp-oban-top{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-10);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  text-transform:uppercase;
}
.gp-oban-status{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-space-6);
  height:20px;
  padding:0 var(--nyx-compat-spacing-9px);
  border-radius:var(--nyx-compat-radius-6px);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p16em);
}
.gp-oban-status::before{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:currentColor;
  box-shadow:var(--nyx-compat-shadow-box-311691df181d);
}
.gp-oban-status.st-live{ color:var(--nyx-compat-color-hex-8ef0c3); background:var(--nyx-compat-color-8eeedf8fd4a5); box-shadow:var(--nyx-compat-shadow-box-86296a9233ee); }
.gp-oban-status.st-next{ color:var(--nyx-compat-color-hex-cfc4ff); background:var(--nyx-compat-color-e1b276e64ad6); box-shadow:var(--nyx-compat-shadow-box-60da0d62cf9f); }
.gp-oban-status.st-upcoming{ color:var(--nyx-compat-color-hex-a9b6d6); background:var(--nyx-compat-color-c1224e4dc910); box-shadow:var(--nyx-compat-shadow-box-1db15f533ead); }
.gp-oban-status.st-ended{ color:var(--nyx-compat-color-hex-f0a9b9); background:var(--nyx-compat-color-5b52a642f45a); box-shadow:var(--nyx-compat-shadow-box-7910a72aef06); }
.gp-oban-phase{
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--nyx-compat-color-hex-b9aee6);
  font-size:var(--nyx-type-label);
  letter-spacing:var(--nyx-compat-tracking-p14em);
}
.gp-oban-game{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--nyx-space-6);
  color:var(--nyx-compat-color-hex-958cc5);
  font-size:var(--nyx-type-caption);
  letter-spacing:var(--nyx-compat-tracking-p12em);
}
.gp-oban-game img{ width:18px; height:18px; border-radius:50%; object-fit:cover; filter:grayscale(.35) brightness(.8); }
.gp-oban-game span{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gp-oban-featured{
  min-width:0;
  display:flex;
  align-content:flex-start;
  flex-wrap:wrap;
  gap:var(--nyx-space-6);
  overflow-y:auto;
  scrollbar-width:none;
}
.gp-oban-featured::-webkit-scrollbar,
.gp-oban-supports div::-webkit-scrollbar{ display:none; }
/* Roster-sized icon with the name beside it and no chip around either
   (user 2026-08-08). */
.gp-oban-unit{
  min-width:0;
  max-width:100%;
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-space-10);
  padding:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  color:var(--nyx-compat-color-hex-f4efff);
}
/* A featured name is a link into that character's page (user 2026-08-09). It
   keeps the plain-text look and only lights up on hover, so the card does not
   turn into a wall of buttons. */
.gp-oban-unit.is-link{
  appearance:none; border:0; margin:0; background:none; box-shadow:none; clip-path:none;
  text-align:left; cursor:pointer;
  transition:color .16s ease, text-shadow .16s ease;
}
.gp-oban-unit.is-link:hover,
.gp-oban-unit.is-link:focus-visible{
  color:var(--nyx-color-text-max);
  text-shadow:0 0 10px rgba(183,170,255,.85);
}
.gp-oban-unit.is-link:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d9ceff); outline-offset:3px; }
.gp-oban-unit img{
  width:44px;
  height:44px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  background:var(--nyx-compat-color-24d34f5fb596);
  box-shadow:var(--nyx-compat-shadow-box-66ff41ffda8e);
}
/* The name wraps rather than ellipsing: at headline size a clipped "Raiden Sho…"
   is worse than two lines. */
.gp-oban-unit b{
  min-width:0;
  /* One line, shrinking to fit rather than wrapping or clipping — long alt
     names like "Aventurine • Waveflair" broke onto two rows (user
     2026-08-11). useFitText steps --fit down until it fits. */
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--nyx-font-display);
  font-size:calc(var(--gp-oban-name-size) * var(--fit, 1));
  line-height:1.08;
  font-weight:var(--nyx-weight-extrabold);
  text-shadow:var(--nyx-compat-shadow-text-b0e15cea0bf0);
}
.gp-oban-unit em{
  flex:none;
  color:var(--nyx-compat-color-hex-cfc6ff);
  font-style:normal;
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  letter-spacing:var(--nyx-compat-tracking-p06em);
}
/* Endfield labels this row: those names are the 50/50 loss pool, not extra
   featured units (user 2026-08-11). */
.gp-oban-supports-label{
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
  color:var(--nyx-color-text-muted);
}
.gp-oban-supports{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--nyx-space-6);
}
.gp-oban-supports .gp-oban-unit img{ width:32px; height:32px; }
/* Featured 4-stars are names, not a section label: normal case, normal weight
   (user 2026-08-09 — they were rendering as "J A H O D A" because the label
   rule below matched every direct <span> child, units included). */
.gp-oban-supports .gp-oban-unit b{
  font-size:var(--nyx-type-body);
  font-weight:var(--nyx-weight-regular);
  letter-spacing:normal;
  text-transform:none;
  color:var(--nyx-compat-color-hex-f4efff);
}
.gp-oban-supports > span:not(.gp-oban-unit){
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
}
.gp-oban-supports div{
  min-width:0;
  max-height:56px;
  display:flex;
  flex-wrap:wrap;
  gap:var(--nyx-compat-spacing-5px);
  overflow-y:auto;
  scrollbar-width:none;
}
.gp-oban-supports i{
  min-width:0;
  max-width:148px;
  height:24px;
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-5px);
  padding:0 var(--nyx-compat-spacing-7px) 0 var(--nyx-space-4);
  border-radius:var(--nyx-compat-radius-6px);
  color:var(--nyx-compat-color-hex-dcd6f7);
  background:var(--nyx-compat-color-208783a99916);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
  font-style:normal;
}
.gp-oban-supports img{ width:18px; height:18px; flex:none; border-radius:50%; object-fit:cover; }
.gp-oban-supports b{ min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--nyx-compat-size-10p5px); }
.gp-oban-foot{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0, 1fr);
  gap:var(--nyx-compat-spacing-5px);
  margin-top:auto;
  font-family:var(--nyx-font-mono);
}
/* Countdown and window are the two facts a player scans for, so they carry real
   weight rather than sitting as fine print (user 2026-08-09). */
.gp-oban-foot b{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--nyx-color-heading);
  font-weight:var(--nyx-weight-semibold);
  /* --fit is stepped down by useFitText when the line would not fit on one
     row at the viewer's width (user 2026-08-11). */
  font-size:calc(var(--nyx-type-section) * var(--fit, 1));
  letter-spacing:var(--nyx-compat-tracking-p05em);
  text-shadow:var(--nyx-compat-shadow-text-b0e15cea0bf0);
}
.gp-oban.st-ended .gp-oban-foot b{ color:var(--nyx-compat-color-hex-e3a2b2); text-shadow:none; }
.gp-oban-foot span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--nyx-compat-color-hex-b9aee6);
  font-size:calc(var(--nyx-type-body) * var(--fit, 1));
  letter-spacing:var(--nyx-compat-tracking-p03em);
}
/* The progress bar under a card was removed 2026-08-08 at the user's request. */
.gp-oban-foot i{ display:none; }
/* Current Events card — same shell as a banner card (.gp-oban), swapping the
   featured-unit block for the event title, blurb and official-notice link. */
/* ===== Overview board (user layout, 2026-08-08) =========================
   One full-width grid on a game Overview: five banner columns on top, then
   the events grid with Timers and Redemption Codes as their own columns.
   Reflows 5 -> 3 -> 1 as the window narrows; the side columns drop under the
   events grid rather than squeezing. */
.gp-ov-region{ display:flex; justify-content:flex-end; min-width:0; }
.gp-ovb{
  min-width:0;
  display:grid;
  /* Columns 1-4 are equal so a phase's two headline cards match and nothing
     squashes; column 5 is the narrower "later" list (user 2026-08-11). */
  grid-template-columns:repeat(4, minmax(0, 1fr)) minmax(0, 0.82fr);
  align-items:stretch;
  gap:var(--nyx-space-12);
}
/* heading / body / caption — the middle row absorbs the slack so every column
   is the same height and all five captions land on one baseline. */
.gp-ovb-col{ min-width:0; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; gap:var(--nyx-space-8); }
.gp-ovb-heading{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-type-small);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
  color:var(--nyx-color-accent-bright);
}
.gp-ovb-heading.is-blank{ visibility:hidden; }
.gp-ovb-body{ min-width:0; min-height:268px; display:flex; flex-direction:column; gap:var(--nyx-space-8); }
/* The Announced column is a list of unknown length, and every column in this
   grid stretches to the tallest one. Genshin's list ran to eleven names and
   dragged the headline banner cards from ~200px to over 600px — three times
   the size the same card has on HSR (user 2026-08-14). Capping this one column
   and letting it scroll takes it out of the height calculation, so the phase
   columns size to their own content again. */
.gp-ovb-col.is-announced .gp-ovb-body{ max-height:340px; }
.gp-ovb-scroll{ min-height:0; flex:1 1 auto; overflow-y:auto; display:flex; flex-direction:column; gap:var(--nyx-space-8);
  scrollbar-width:thin; scrollbar-color:var(--nyx-color-border-active) transparent; }
/* Pins live outside the scroller so they are always visible at the foot of the
   column and never push the cap. They are a running joke, not schedule data,
   so they run at two thirds the height of a real row and leave the space to
   the entries that mean something. */
.gp-ovb-pins{ flex:0 0 auto; display:flex; flex-direction:column; gap:var(--nyx-space-6); margin-top:var(--nyx-space-2); }
.gp-ovb-pins .gp-ovb-row{ min-height:40px; opacity:.6; }
.gp-ovb-pins .gp-ovb-row img{ width:28px; height:28px; }
.gp-ovb-pins .gp-ovb-row-body{ padding:var(--nyx-space-4) var(--nyx-space-10); gap:var(--nyx-space-8); }
.gp-ovb-pins .gp-ovb-row b{ font-size:calc(var(--nyx-compat-size-13px) * var(--fit, 1)); }
.gp-ovb-pins .gp-ovb-row-art{ display:none; }
/* Upcoming rows keep their own height instead of stretching to fill the column
   (user 2026-08-09): a row is exactly its 44px icon plus padding, so four or
   five fit in the space that used to hold two. */
.gp-ovb-body > .gp-ovb-row,
.gp-ovb-scroll > .gp-ovb-row,
.gp-ovb-pins > .gp-ovb-row{ flex:0 0 auto; }
/* The card is a flex column so its body fills the stretched height — without
   this the body keeps its content height and the countdown footer rides up
   under the name instead of sitting at the bottom. */
.gp-ovb-body > .gp-oban{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.gp-ovb-body > .gp-oban .gp-oban-body{ flex:1 1 auto; min-height:0; }
.gp-ovb-body > .gp-oban .gp-oban-supports .gp-oban-unit b{ font-size:var(--nyx-type-body); }
/* Art-forward: the splash is the point of the headline card. */
.gp-ovb-body > .gp-oban .gp-oban-art{ opacity:1; background-size:cover; background-position:50% 20%;
  filter:saturate(1.12) contrast(1.06) brightness(1.18); }
/* Lighter scrim than a banner strip: enough for the text, not so much that it
   dims the art the card exists to show. */
.gp-ovb-body > .gp-oban .gp-oban-shade{ opacity:.62; }
.gp-ovb-body > .gp-oban::before{ opacity:.42; }
.gp-ovb-caption{
  min-width:0;
  font-size:var(--nyx-type-label);
  letter-spacing:var(--nyx-compat-tracking-p05em);
  color:var(--nyx-color-text-muted);
}
/* Same art-forward treatment as a headline card, at row scale. */
/* ===== Nyx hub: Banners (user 2026-08-09) ==============================
   Five columns, one per game, each reading top to bottom through its phases.
   Every entry is the same wide row the game overviews use. */
.nyx-ban-cols{
  min-width:0;
  min-height:0;
  flex:1 1 0%;
  overflow-y:auto;
  padding-right:var(--nyx-space-8);
  display:grid;
  grid-template-columns:repeat(5, minmax(0, 1fr));
  align-items:start;
  gap:var(--nyx-space-14);
}
.nyx-ban-cols::-webkit-scrollbar{ width:7px; }
.nyx-ban-cols::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-4px); }
.nyx-ban-col{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-space-12); }
.nyx-ban-col-head{
  min-width:0; display:flex; align-items:center; gap:var(--nyx-space-8);
  padding-bottom:var(--nyx-space-6);
  border-bottom:1px solid var(--nyx-compat-color-9a593589b5e7);
}
.nyx-ban-col-head img{ width:26px; height:26px; flex:none; border-radius:50%; object-fit:cover; }
.nyx-ban-col-head b{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-lead); font-weight:var(--nyx-weight-regular);
  color:var(--nyx-color-heading);
}
.nyx-ban-phase{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-space-6); }
.nyx-ban-phase-head{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-space-2); }
.nyx-ban-phase-head > b{
  min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-small);
  letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase;
  color:var(--nyx-color-accent-bright);
}
/* Countdown and window for the whole group (user 2026-08-09). */
.nyx-ban-phase-when{ min-width:0; display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--nyx-space-6);
  font-family:var(--nyx-font-mono); }
.nyx-ban-phase-when b{ font-size:var(--nyx-type-small); font-weight:var(--nyx-weight-semibold); color:var(--nyx-color-heading); }
.nyx-ban-phase-when em{ font-style:normal; font-size:var(--nyx-type-caption); color:var(--nyx-color-text-muted); }
/* Same row, bigger name — this is the hub's headline content, not a footnote. */
.nyx-ban-col .gp-ovb-row b{ font-size:var(--nyx-type-section); }
.nyx-ban-col .gp-ovb-row{ min-height:64px; }

/* Nyx hub: Events — one block per game, each holding that game's own strip.
   Scrolls on its own (user 2026-08-09): five games of events run far past the
   viewport and the pane was clipping them. */
.nyx-events-view{ min-width:0; min-height:0; flex:1 1 0%; overflow-y:auto;
  display:flex; flex-direction:column; gap:var(--nyx-space-24);
  padding-right:var(--nyx-space-8); }
.nyx-events-view::-webkit-scrollbar{ width:7px; }
.nyx-events-view::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-4px); }
.nyx-events-game{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-space-10); }
.nyx-events-game .gp-current-events{ margin-top:0; }

.gp-ovb-row{
  position:relative;
  min-width:0;
  overflow:hidden;
  /* 44px icon + 6px padding top and bottom */
  min-height:56px;
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-8df2e4e97657);
  box-shadow:var(--nyx-compat-shadow-box-158c1c10878c);
}
.gp-ovb-row-art{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:60% 18%;
  opacity:.7;
  filter:saturate(1.1) contrast(1.05);
}
.gp-ovb-row-art::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(90deg, var(--nyx-compat-color-85f7484c43f9) 0%, var(--nyx-compat-color-41b68c99533c) 62%, transparent 100%);
}
.gp-ovb-row-body.is-link{
  appearance:none; border:0; margin:0; background:none; box-shadow:none; clip-path:none;
  width:100%; text-align:left; cursor:pointer;
}
.gp-ovb-row-body.is-link:hover b,
.gp-ovb-row-body.is-link:focus-visible b{
  color:var(--nyx-color-text-max);
  text-shadow:0 0 10px rgba(183,170,255,.85);
}
.gp-ovb-row-body.is-link:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d9ceff); outline-offset:-2px; }
.gp-ovb-row-body{
  position:relative;
  z-index:1;
  min-width:0;
  height:100%;
  display:flex;
  align-items:center;
  gap:var(--nyx-space-10);
  padding:var(--nyx-space-6) var(--nyx-space-12);
}
/* Backed circle: several operator icons are mostly transparent PNGs and read
   as an empty ring without something behind them. */
.gp-ovb-row img{ width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover;
  background:var(--nyx-compat-color-e1b276e64ad6);
  box-shadow:var(--nyx-compat-shadow-box-940bdb001abd); }
.gp-ovb-row b{
  min-width:0;
  flex:1;
  overflow:hidden;
  white-space:nowrap;
  font-family:var(--nyx-font-display);
  font-size:calc(var(--nyx-compat-size-17px) * var(--fit, 1));
  color:var(--nyx-color-heading);
  text-shadow:var(--nyx-compat-shadow-text-b0e15cea0bf0);
}
.gp-ovb-row.st-next,
.gp-ovb-row.st-upcoming{ opacity:.86; }
/* Name plus an optional sub-line ("copium" on the pinned Dainsleif/Alice). */
.gp-ovb-row-text{ min-width:0; flex:1; display:flex; flex-direction:column; justify-content:center; }
.gp-ovb-row.has-note b{ flex:0 0 auto; }
.gp-ovb-row-note{
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-type-caption);
  font-style:normal;
  letter-spacing:var(--nyx-compat-tracking-p12em);
  text-transform:uppercase;
  color:var(--nyx-color-text-faint);
}
.gp-ovb-note{
  flex:0 0 auto;
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-2);
  padding:var(--nyx-space-8) var(--nyx-space-10);
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-e1b276e64ad6);
  box-shadow:var(--nyx-compat-shadow-box-60da0d62cf9f);
}
.gp-ovb-note b{
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-type-label);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
  color:var(--nyx-compat-color-hex-cfc4ff);
}
.gp-ovb-note span{ font-size:var(--nyx-type-caption); line-height:1.35; color:var(--nyx-color-text-muted); }
.gp-ov-lower{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr)) minmax(200px, 0.85fr) minmax(220px, 0.95fr);
  /* Each column is as tall as its own content. Stretching made Timers and
     Redemption Codes run the full height of the events grid with nothing in
     the extra space (user 2026-08-11). */
  align-items:start;
  gap:var(--nyx-space-12);
}
.gp-ov-lower > .gp-current-events{ grid-column:1 / 4; margin-top:0; }

.gp-ov-side-title{
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-type-lead);
  color:var(--nyx-color-heading);
  text-shadow:var(--nyx-compat-shadow-text-807d5c88b94a);
}
.gp-ov-side{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-10);
  padding:var(--nyx-space-12);
  border-radius:var(--nyx-radius-card);
  background:var(--nyx-compat-color-8df2e4e97657);
  box-shadow:var(--nyx-compat-shadow-box-158c1c10878c);
}
/* Overview timers and codes draw no chrome of their own. They used to be a
   panel inside a panel inside a card, which reads as filler rather than
   structure (user 2026-08-11). */
.gp-ov-timers,
.gp-ov-codes{
  padding:0;
  background:none;
  box-shadow:none;
}
.gp-ov-codes .gp-codes-table{
  padding:0;
  border-radius:0;
  background:none;
  box-shadow:none;
  overflow:visible;
}
/* Rows dissolve into their group's grid, so the code, the reward amount and the
   copy button line up down invisible columns instead of each row packing to its
   own widths. */
.gp-ov-codes .overview-codes{
  display:grid;
  grid-template-columns:auto minmax(0, 1fr) auto auto;
  align-items:center;
  column-gap:var(--nyx-space-10);
  row-gap:var(--nyx-space-6);
}
.gp-ov-codes .overview-codes .gp-code-row{ display:contents; padding:0; border:0; }
.gp-ov-codes .overview-codes .gp-code-row::after{ content:none; }
.gp-ov-codes .overview-codes .gp-code-row .cc-copy-cell{ grid-column:auto; }
.gp-ov-codes .overview-codes .gp-code-row.st-redeemed > *{ opacity:.5; }
/* Left-aligned inside its own column so the currency icons stack and the
   amounts all start on the same edge. */
.gp-ov-codes .overview-codes .cc-reward{ justify-self:start; }
/* A long code steps down in size rather than truncating. */
.gp-code-row .cc-text{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:calc(var(--nyx-type-body) * var(--fit, 1));
}
.gp-event-grid{
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--nyx-space-12);
}
.gp-event-cell{ min-width:0; display:flex; flex-direction:column; }
@media (max-width:1500px){
  .gp-ovb{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .gp-ov-lower{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .gp-ov-lower > .gp-current-events{ grid-column:1 / -1; }
  .gp-event-grid{ grid-template-columns:repeat(2, minmax(0, 1fr)); }
}
@media (max-width:900px){
  .gp-ovb,
  .gp-ov-lower,
  .gp-event-grid{ grid-template-columns:minmax(0, 1fr); }
  .gp-ov-region{ justify-content:flex-start; }
}

.gp-current-events{ margin-top:var(--nyx-space-16); }
.gp-oev,
.gp-oev .gp-oban-body{ min-height:196px; }
/* Matches the brightness of the banner cards above it (user 2026-08-09): event
   art used to sit at half opacity and read as washed out beside them. */
.gp-oev-art{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:50% 32%;
  opacity:1;
  filter:saturate(1.12) contrast(1.06) brightness(1.18);
}
/* Scrim carries the text contrast now that the art is at full strength. */
.gp-oev .gp-oban-shade{ opacity:.72; }
.gp-oev::before{ opacity:.42; }
.gp-oev-title{
  min-width:0;
  margin:0;
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-17px);
  line-height:1.25;
  color:var(--nyx-color-heading);
  text-shadow:var(--nyx-compat-shadow-text-b0e15cea0bf0);
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Runs the full width of the card down to the countdown, with a generous cap so
   every card in the row still ends up the same height — the rest is one click
   away in the pop-up (user 2026-08-09). */
.gp-oev-text{
  min-width:0;
  width:100%;
  margin:0;
  color:var(--nyx-compat-color-hex-ded8f5);
  font-size:var(--nyx-type-small);
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:6;
  -webkit-box-orient:vertical;
  overflow:hidden;
}
/* Invisible hit area over the whole card — opens the description pop-up. */
.gp-oev-open{
  position:absolute; inset:0; z-index:2; width:100%; height:100%;
  appearance:none; border:0; padding:0; background:none; box-shadow:none; clip-path:none;
  border-radius:inherit; cursor:pointer;
}
.gp-oev-open:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d9ceff); outline-offset:-2px; }
.gp-oev:hover{ transform:translateY(-2px); }

/* Event description pop-up */
.gp-oev-modal{
  position:fixed; inset:0; z-index:1000; display:grid; place-items:center;
  padding:var(--nyx-space-18);
  background:var(--nyx-compat-color-eac178282411); backdrop-filter:blur(6px);
}
.gp-oev-modal-card{
  width:min(620px,100%); max-height:82vh; overflow:auto;
  padding:var(--nyx-space-24);
  border-radius:var(--nyx-compat-radius-16px);
  color:var(--nyx-color-heading);
  background:linear-gradient(180deg,var(--nyx-compat-color-hex-211946),var(--nyx-color-surface));
  box-shadow:var(--nyx-compat-shadow-box-4f7cd9937d9b);
}
.gp-oev-modal-head{ display:flex; align-items:flex-start; gap:var(--nyx-space-12); }
.gp-oev-modal-head h2{
  flex:1; margin:0;
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); font-weight:var(--nyx-weight-regular);
  line-height:1.2;
}
.gp-oev-modal-x{
  flex:none; appearance:none; border:0; cursor:pointer;
  width:32px; height:32px; border-radius:var(--nyx-compat-radius-9px);
  background:var(--nyx-compat-color-c201d2dab2c4); color:var(--nyx-compat-color-hex-ded8f5);
}
.gp-oev-modal-when{
  margin:var(--nyx-space-8) 0 var(--nyx-space-16);
  color:var(--nyx-compat-color-hex-9f94c8);
  font-family:var(--nyx-font-mono); font-size:var(--nyx-type-small);
}
.gp-oev-modal-body p{
  margin:0 0 var(--nyx-space-12);
  color:var(--nyx-compat-color-hex-ded8f5);
  font-size:var(--nyx-type-body); line-height:1.55;
}
.gp-oev-modal-body p:last-child{ margin-bottom:0; }
.gp-oban-empty{
  min-width:0;
  padding:var(--nyx-space-18) var(--nyx-space-16);
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-14713ca43cd4);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
  color:var(--nyx-color-text-muted);
  font-size:var(--nyx-type-small);
  letter-spacing:var(--nyx-compat-tracking-p04em);
}

.gp-reset-panel{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-compat-spacing-9px);
  padding:var(--nyx-compat-spacing-11px) var(--nyx-space-12) var(--nyx-space-12);
  border-radius:var(--nyx-radius-control);
  background:linear-gradient(180deg, var(--nyx-compat-color-09306eb90714), var(--nyx-compat-color-81c3a44c5e25));
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
}
.gp-reset-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-10);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  text-transform:uppercase;
}
.gp-reset-head span{
  color:var(--nyx-compat-color-hex-f4efff);
  font-size:var(--nyx-type-small);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p16em);
}
.gp-reset-head b{
  color:var(--nyx-compat-color-hex-8f84bd);
  font-size:var(--nyx-type-caption);
  letter-spacing:var(--nyx-compat-tracking-p18em);
}
.gp-reset-regions{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:var(--nyx-compat-spacing-5px);
}
.gp-reset-regions button{
  min-width:0;
  height:24px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-958cc5);
  background:var(--nyx-compat-color-0557dea73665);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.gp-reset-regions button:hover,
.gp-reset-regions button.on{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-202cf7aa7285);
  box-shadow:var(--nyx-compat-shadow-box-1d6ab82778b1);
}
.gp-reset-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--nyx-compat-spacing-7px);
}
.gp-reset-tile{
  min-width:0;
  min-height:50px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:var(--nyx-space-4);
  padding:var(--nyx-space-8) var(--nyx-compat-spacing-9px);
  border-radius:var(--nyx-compat-radius-7px);
  background:var(--nyx-compat-color-f40757156af9);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
}
.gp-reset-tile .k{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-9p5px);
  letter-spacing:var(--nyx-compat-tracking-p12em);
  text-transform:uppercase;
}
.gp-reset-tile .v{
  color:var(--nyx-compat-color-hex-f5f1ff);
  font-family:var(--nyx-font-mono);
  font-size:var(--nyx-type-small);
  letter-spacing:var(--nyx-compat-tracking-p02em);
  white-space:nowrap;
}
.gp-reset-custom{
  display:flex;
  flex-direction:column;
  gap:var(--nyx-compat-spacing-7px);
}
.gp-reset-tile.custom{
  position:relative;
  min-height:48px;
  padding-right:var(--nyx-compat-spacing-60px);
}
.gp-reset-tile.custom button{
  position:absolute;
  top:7px;
  right:7px;
  width:20px;
  height:20px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  cursor:pointer;
  color:var(--nyx-compat-color-hex-cfc6ff);
  background:var(--nyx-compat-color-c2b0ed1f9dca);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
  font-size:var(--nyx-type-label);
  line-height:1;
}
.gp-reset-tile.custom button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-ba15bed135df); }
.gp-reset-form{
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-6);
}
.gp-reset-form input,
.gp-reset-form select,
.gp-reset-form button{
  min-width:0;
  height:30px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  color:var(--nyx-compat-color-hex-f5f1ff);
  background:var(--nyx-compat-color-74c78649a540);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
}
.gp-reset-form input{ padding:0 var(--nyx-space-8); }
.gp-reset-form select{ padding:0 var(--nyx-space-6); color-scheme:dark; cursor:pointer; }
.gp-reset-form input[type="datetime-local"]{ color-scheme:dark; }
.gp-reset-recur-row{ display:flex; gap:var(--nyx-space-6); }
.gp-reset-recur-row > select{ flex:1 1 auto; }
.gp-reset-every{ display:flex; gap:var(--nyx-space-6); flex:0 0 auto; }
.gp-reset-every input[type="number"]{ width:52px; text-align:center; padding:0 var(--nyx-space-4); }
.gp-reset-every select{ width:auto; }
.gp-reset-form button{
  padding:0 var(--nyx-space-10);
  cursor:pointer;
  text-transform:uppercase;
  letter-spacing:var(--nyx-compat-tracking-p1em);
  background:var(--nyx-compat-color-e1b276e64ad6);
}
.gp-reset-form button:disabled{ opacity:.38; cursor:default; }
.gp-reset-form button:not(:disabled):hover{ background:var(--nyx-compat-color-0b4fbcaa53ef); }
.gp-reset-recur{
  margin-left:var(--nyx-space-6);
  color:var(--nyx-color-text-muted);
  font-style:normal;
  font-size:var(--nyx-compat-size-8p5px);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p04em);
  text-transform:uppercase;
  white-space:nowrap;
}
.gp-reset-unknown{ margin:var(--nyx-space-2) 0 var(--nyx-space-10); color:var(--nyx-compat-color-hex-9187b5); font-size:var(--nyx-compat-size-11px); line-height:1.45; }

.gp-world-row{ display:flex; align-items:center; gap:var(--nyx-space-12); cursor:pointer; padding:var(--nyx-compat-spacing-7px) var(--nyx-space-10);
  border-radius:var(--nyx-compat-radius-6px); transition:background .25s; }
.gp-world-row:hover{ background:var(--nyx-compat-color-0557dea73665); }
.gp-world-row .wn{ font-size:var(--nyx-compat-size-13p5px); color:var(--nyx-compat-color-hex-cfc6f0); letter-spacing:var(--nyx-compat-tracking-p02em); }
.gp-world-row:hover .wn{ color:var(--nyx-color-text-max); }

.gp-divider{ height:1px; background:linear-gradient(90deg, var(--nyx-compat-color-51af19e1cccc), var(--nyx-compat-color-5657ad0558da), var(--nyx-compat-color-51af19e1cccc)); }

/* ===== card row (turns into a slider only when cards no longer fit) ===== */
.gp-cardrow{ display:flex; gap:var(--nyx-space-16); padding:var(--nyx-space-16) var(--nyx-space-4) var(--nyx-space-6); }
.gp-favs.collapsed{
  padding-bottom:var(--nyx-space-4);
}
.gp-favs.collapsed .gp-sec .rule{
  opacity:.45;
}
.gp-cardrow.scroll{ overflow-x:auto; overscroll-behavior-x:contain; padding-bottom:var(--nyx-space-12); }
.gp-cardrow.scroll::-webkit-scrollbar{ height:6px; }
.gp-cardrow.scroll::-webkit-scrollbar-track{ background:var(--nyx-compat-color-dffb33c1c353); border-radius:var(--nyx-compat-radius-3px); }
.gp-cardrow.scroll::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-3px); }
.gp-cardrow.scroll::-webkit-scrollbar-thumb:hover{ background:var(--nyx-compat-color-b4e6993b837a); }

.gp-characters-main{ gap:var(--nyx-space-20); }
.gp-characters-main > .gp-favs{ flex:none; }
.gp-fav-more{ align-self:center; flex:none; border:1px solid var(--nyx-compat-color-e6cde4e4b286); border-radius:var(--nyx-radius-pill); padding:var(--nyx-space-10) var(--nyx-space-14);
  cursor:pointer; color:var(--nyx-color-heading); background:var(--nyx-compat-color-a4d07d237193); font-family:var(--nyx-compat-family-bbbd64e38bdd); }
.gp-fav-more:hover,.gp-fav-more:focus-visible{ border-color:var(--accent-bright); box-shadow:var(--nyx-compat-shadow-box-2c6fa8497efb); outline:none; }
.gp-fav-icon-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(92px,1fr)); gap:var(--nyx-space-16) var(--nyx-space-12); padding:var(--nyx-space-16) var(--nyx-space-4) var(--nyx-space-8); }
.gp-fav-icon{ position:relative; min-width:0; transition:transform .2s,opacity .2s,filter .2s; }
.gp-fav-icon.faded{ opacity:.2; filter:grayscale(1); }
.gp-fav-icon-open{ width:100%; border:0; padding:0; display:flex; flex-direction:column; align-items:center; gap:var(--nyx-space-6); cursor:pointer; background:none; color:var(--nyx-color-text-soft); }
.gp-fav-icon-open > span{ width:76px; height:76px; overflow:hidden; border-radius:50%; background:var(--nyx-compat-color-hex-0d0a24);
  box-shadow:var(--nyx-compat-shadow-box-935a4e8ca69b); }
.gp-fav-icon-open img{ width:100%; height:100%; object-fit:cover; }
.gp-fav-icon-open b{ max-width:96px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--nyx-compat-size-12p5px); font-weight:var(--nyx-weight-regular); }
.gp-fav-icon:hover,.gp-fav-icon:focus-within{ transform:translateY(-3px); }
.gp-fav-icon:hover .gp-fav-icon-open > span,.gp-fav-icon:focus-within .gp-fav-icon-open > span{
  box-shadow:var(--nyx-compat-shadow-box-031aa373ff21); }
.gp-fav-icon-open:focus-visible{ outline:none; }
.gp-fav-heading{ display:flex; align-items:center; gap:var(--nyx-space-10); min-width:0; }
.gp-fav-heading > img{ width:58px; height:58px; margin:var(--nyx-compat-spacing-neg-8px) var(--nyx-compat-spacing-neg-10px) var(--nyx-compat-spacing-neg-8px) 0; object-fit:contain; }
.gp-fav-heading h2{ flex:none; margin:0; font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); font-weight:var(--nyx-weight-regular); letter-spacing:var(--nyx-compat-tracking-p03em); color:var(--nyx-color-heading); }
.gp-fav-heading .gp-fav-rule{ flex:1; height:1px; background:linear-gradient(90deg,var(--nyx-compat-color-f6b07e29e7bf),transparent); }
.gp-fav-empty{ margin:var(--nyx-space-10) var(--nyx-space-4) var(--nyx-space-4); padding:var(--nyx-space-14) var(--nyx-space-16); border:1px solid var(--nyx-compat-color-b5dce4d08588); border-radius:var(--nyx-radius-control);
  color:var(--nyx-compat-color-hex-9187bd); background:var(--nyx-compat-color-78ef4f7739a0); font-size:var(--nyx-type-small); }
.gp-fav-icon-open > span{ position:relative; }
.gp-fav-icon-open > span > i{ position:absolute; right:0; bottom:0; width:19px; height:19px; overflow:hidden; border-radius:50%;
  background:var(--nyx-compat-color-hex-090616); box-shadow:var(--nyx-compat-shadow-box-a34f637e60b8); }
.gp-fav-icon-open > span > i img{ width:100%; height:100%; object-fit:contain; }
.gp-fav-game{ position:absolute; z-index:6; right:9px; top:9px; width:25px; height:25px; display:grid; place-items:center; border-radius:50%;
  background:var(--nyx-compat-color-fe4eeaebc45c); box-shadow:var(--nyx-compat-shadow-box-8c5e91e7f26f); }
.gp-fav-game img{ width:100%; height:100%; object-fit:contain; }
.gp-fav:focus-visible{ outline:2px solid var(--character-hover); outline-offset:3px; }
.gp-fav-icon-star{ position:absolute; top:-5px; right:calc(50% - 42px); z-index:2; width:25px; height:25px; border:0; border-radius:50%;
  cursor:pointer; color:var(--nyx-compat-color-hex-fff1a8); background:var(--nyx-compat-color-hex-18102f); box-shadow:var(--nyx-compat-shadow-box-142b6e01e0cc); }
.gp-fav-icon-star:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-fff1a8); outline-offset:2px; }

/* 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:var(--nyx-space-14);
  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:var(--nyx-space-4) var(--nyx-space-2);
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase;
  color:var(--nyx-color-text-muted); transition:color .2s, text-shadow .2s; }
.gp-fav .ctl .th:hover{ color:var(--nyx-color-text-max); text-shadow:var(--nyx-compat-shadow-text-4ff6bf766515); }
.gp-fav .ctl .tr:hover{ color:var(--nyx-compat-color-hex-ff9db4); text-shadow:var(--nyx-compat-shadow-text-2ac64d9b7929); }
.gp-fav .ctl .sep{ width:5px; height:5px; flex:none; transform:rotate(45deg); background:var(--nyx-compat-color-hex-6a5fa0); }
.gp-favs.manage .gp-cardrow{ padding-bottom:var(--nyx-compat-spacing-42px); }

.gp-fav-picker{ margin:var(--nyx-space-4) auto 0; width:min(100%, 920px); max-height:188px; overflow:auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(178px, 1fr)); gap:var(--nyx-space-10); padding:var(--nyx-space-12) var(--nyx-space-14);
  background:linear-gradient(180deg, var(--nyx-compat-color-8a3a0f144fc6), var(--nyx-compat-color-3ea7bcd61734));
  border-radius:var(--nyx-radius-panel); box-shadow:var(--nyx-compat-shadow-box-ae5609dece78);
  scrollbar-width:thin; scrollbar-color:var(--nyx-compat-color-9f11ba63d8ca) var(--nyx-compat-color-dffb33c1c353); }
.gp-fav-picker button{ min-width:0; min-height:48px; display:flex; align-items:center; gap:var(--nyx-space-10);
  padding:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-11px) var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-7px); border:none; cursor:pointer; border-radius:var(--nyx-compat-radius-11px);
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p04em); color:var(--nyx-compat-color-hex-d9d2f6);
  background:var(--nyx-compat-color-2ed3367aa626); box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  transition:transform .2s, color .2s, box-shadow .2s, background .2s; }
.gp-fav-picker button:hover:not(:disabled){ transform:translateY(-2px); color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-c2b0ed1f9dca); box-shadow:var(--nyx-compat-shadow-box-00ac7a7de8d6); }
.gp-fav-picker button.replace{ box-shadow:var(--nyx-compat-shadow-box-db47aaac2db0); }
.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:var(--nyx-radius-small);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-9a89ea),var(--nyx-compat-color-hex-372464));
  box-shadow:var(--nyx-compat-shadow-box-70fe6241edd7); }
.gp-fav-picker .pick-ico > img{ width:142%; height:142%; object-fit:cover; transform:rotate(-45deg); border-radius:var(--nyx-compat-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:var(--nyx-compat-color-hex-090616); box-shadow:var(--nyx-compat-shadow-box-2109571c6f05); }
.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:var(--nyx-space-2); 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:var(--nyx-compat-size-12p5px); color:var(--nyx-compat-color-hex-f3efff); font-weight:var(--nyx-compat-weight-500); }
.gp-fav-picker .pick-meta em{ font-style:normal; font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; color:var(--nyx-color-text-muted); }
.gp-fav-picker .empty{ padding:var(--nyx-space-10) 0; font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-small);
  letter-spacing:var(--nyx-compat-tracking-p08em); color:var(--nyx-compat-color-hex-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:var(--nyx-compat-shadow-drop-2767dd931543); }
.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:var(--nyx-radius-small); }
.gp-add .fr{ position:absolute; inset:0; clip-path:var(--clip); opacity:.55;
  background:linear-gradient(158deg, var(--nyx-compat-color-2279a26ac072), var(--nyx-compat-color-48aa2d1f5113)); transition:opacity .3s; }
.gp-add .fr::before{ content:""; position:absolute; inset:2px; clip-path:var(--clip); background:var(--nyx-compat-color-cbbf84f44bce); }
.gp-add .plus{ position:relative; z-index:2; font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-32px); color:var(--nyx-color-text-faint); transition:color .3s; }
.gp-add:hover{ filter:var(--nyx-compat-shadow-drop-0f3eb5507fc4); }
.gp-add:hover .fr{ opacity:.95; }
.gp-add:hover .plus, .gp-add.dt .plus{ color:var(--nyx-color-text-max); }
.gp-add.dt{ transform:scale(1.04); filter:var(--nyx-compat-shadow-drop-ff547c12a983); }
.gp-add.dt .fr{ opacity:1; }

/* search bar */
.gp-search{ position:relative; display:flex; align-items:center; gap:var(--nyx-compat-spacing-9px); height:40px; width:214px; flex:none;
  padding:0 var(--nyx-space-12) 0 var(--nyx-space-16); clip-path:var(--hclip);
  background:linear-gradient(180deg, var(--nyx-compat-color-03e6646ea7f3), var(--nyx-compat-color-6b51c74ae902));
  box-shadow:var(--nyx-compat-shadow-box-b5743bebbdd2); transition:box-shadow .25s; }
.gp-search:focus-within{ box-shadow:var(--nyx-compat-shadow-box-bcb67f4d5cf4); }
.gp-search .ic{ width:13px; height:13px; flex:none; border-radius:50%;
  border:1.5px solid var(--nyx-color-text-faint); position:relative; }
.gp-search .ic::after{ content:""; position:absolute; width:1.5px; height:6px; background:var(--nyx-color-text-faint);
  bottom:-5px; right:-2px; transform:rotate(-45deg); }
.gp-search input{ flex:1; min-width:0; border:none; outline:none; background:none;
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-compat-size-13px); letter-spacing:var(--nyx-compat-tracking-p05em); color:var(--nyx-color-heading); }
.gp-search input::placeholder{ color:var(--nyx-compat-color-hex-7d72ad); }
.gp-search .x{ border:none; background:none; cursor:pointer; flex:none; padding:var(--nyx-space-2) var(--nyx-space-4);
  font-size:var(--nyx-compat-size-11px); color:var(--nyx-color-text-muted); transition:color .2s; }
.gp-search .x:hover{ color:var(--nyx-color-text-max); }

/* 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) var(--nyx-compat-shadow-drop-5ea69fa038c7);
  transition:filter .3s; }
.gp-logo-btn:hover{ transform:translateY(-2px); }
.gp-logo-btn:hover img{ filter:brightness(0) invert(1) var(--nyx-compat-shadow-drop-705141bdc9cb); }

/* ===== 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:var(--nyx-compat-shadow-drop-64d9b02d780a) var(--nyx-compat-shadow-drop-898aef604509) var(--nyx-compat-shadow-drop-9418e716f96b); }
.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%, var(--nyx-compat-color-hex-1b1640), var(--nyx-compat-color-hex-0a0820));
  box-shadow:var(--nyx-compat-shadow-box-fa0e07c1acf8);
  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:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11p5px); font-weight:var(--nyx-weight-semibold);
  color:var(--nyx-color-surface); background:linear-gradient(160deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-9a89ea));
  box-shadow:var(--nyx-compat-shadow-box-79769cf7d96d); }
.gp-bench-ic:hover{ filter:none; transform:translateY(-4px);
  box-shadow:var(--nyx-compat-shadow-box-a7c7e91a459a); }
.gp-bench-ic.dt{ filter:none; transform:scale(1.08);
  box-shadow:var(--nyx-compat-shadow-box-2b4afc98e07b); }
.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, var(--nyx-compat-color-12727bdce092) 0%, var(--nyx-compat-color-12727bdce092) 64%, var(--nyx-compat-color-858b1df8685f) 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:var(--nyx-compat-shadow-drop-028d46200439);
  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:var(--nyx-compat-shadow-drop-5c330573301e) var(--nyx-compat-shadow-drop-aabf0e156b0b); }
.gp-bench-dia.dt{ z-index:7; transform:translateY(var(--oy,0)) scale(1.08);
  filter:var(--nyx-compat-shadow-drop-6f22cfc0a8d6) var(--nyx-compat-shadow-drop-aabf0e156b0b); }
.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,var(--nyx-compat-color-hex-3a2d6e),var(--nyx-compat-color-hex-1a1334));
  box-shadow:var(--nyx-compat-shadow-box-d17945aef2c7);
  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:var(--nyx-type-caption); line-height:1; color:var(--nyx-compat-color-hex-d6cdf7); font-family:var(--nyx-compat-family-ffc6cbbeca26); }
.gp-bench-dia .bp::before{ content:"+"; font-size:var(--nyx-type-body); line-height:1; color:var(--nyx-compat-color-hex-d6cdf7); font-family:var(--nyx-compat-family-ffc6cbbeca26); }
.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,var(--nyx-compat-color-hex-ffc2d1),var(--nyx-compat-color-hex-d95577)); }
.gp-bench-dia .bx:hover::before{ color:var(--nyx-compat-color-hex-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, var(--nyx-compat-color-306c851d2f0b), var(--nyx-compat-color-69661123ff29)); }
/* 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 */
/* Wordmark pulled well to the left (user 2026-08-09) — it used to start where
   the living eye needed room, and the eye has moved to the corner. */
.gp-topbar .tb-brand{ position:absolute; top:50%; left:24px; transform:translateY(-50%); z-index:6;
  display:inline-flex; align-items:center; height:96px; padding:0 var(--nyx-space-28) 0 var(--nyx-space-12); text-decoration:none; }
.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, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 36%, transparent 92%);
  mask:linear-gradient(90deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 36%, transparent 92%); }
.gp-topbar .tb-brand .brand-mark{ position:relative; display:inline-flex; align-items:center; gap:var(--nyx-compat-spacing-30px); }
/* Pengo stands behind the wordmark: big, quiet and centred on the text, so the
   letters still read cleanly over it (user 2026-08-09). */
/* Mirrored to face right and nudged past the wordmark's centre by a bit over
   half its own width. Smaller and at full strength (user 2026-08-09) — it reads
   as the mascot standing beside the word, not a watermark behind it. */
.gp-topbar .tb-brand .brand-pengo{ position:absolute; left:50%; top:50%; transform:translate(18%,-50%) scaleX(-1);
  height:62px; width:auto; z-index:1; opacity:1; pointer-events:none;
  filter:drop-shadow(0 4px 14px rgba(0,0,0,.6)); transition:transform .3s; }
.gp-topbar .tb-brand:hover .brand-pengo{ transform:translate(18%,-50%) scaleX(-1) scale(1.05); }
/* The living eye left the top bar 2026-08-09 and now sits in the bottom-left
   corner, directly above the Ko-fi badge. Decoration only. */
.gp-nav-eye{ display:flex; justify-content:center; pointer-events:none; }
.gp-nav-eye .tb-eye{ position:relative; width:64px; height:64px; flex:none;
  filter:var(--nyx-compat-shadow-drop-8f46e6767a0d) var(--nyx-compat-shadow-drop-83ef4fb15a2c); transition:filter .35s; }
/* The word is the only clickable part of the brand (user 2026-08-09). */
.gp-topbar .tb-brand .wm{ position:relative; z-index:2; font-family:var(--nyx-font-display); font-size:var(--nyx-type-display-large); line-height:.9;
  letter-spacing:var(--nyx-compat-tracking-p06em); color:var(--nyx-compat-color-hex-f7f4ff); text-shadow:var(--nyx-compat-shadow-text-af39948cc325);
  text-decoration:none; cursor:pointer; }
.gp-topbar .tb-brand .wm:hover{ color:var(--nyx-color-text-max); text-shadow:var(--nyx-compat-shadow-text-ece6b39df816); }
.gp-topbar .tb-brand .wm:focus-visible{ outline:2px solid var(--nyx-color-text-max); outline-offset:4px; }
/* 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:var(--nyx-compat-shadow-drop-f72ecd84a7c1) var(--nyx-compat-shadow-drop-5aa8f12f1880); }
.gp-topbar .tb-pengo img{ height:74px; width:auto; display:block; }
.gp-topbar .tb-pengo:hover{ transform:translateY(-50%) scale(1.06);
  filter:var(--nyx-compat-shadow-drop-64d9b02d780a) var(--nyx-compat-shadow-drop-58e74b593978); }
/* 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:90; width:168px;
  display:flex; flex-direction:column; align-items:stretch; gap:var(--nyx-space-8); pointer-events:none; }
.gp-corner > *{ pointer-events:auto; }
/* Stacked so the living eye sits directly above the Ko-fi badge
   (user 2026-08-09). */
.gp-corner-actions{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--nyx-space-8); width:100%; }
.gp-corner .tb-pengo.corner{ position:static; width:44px; height:44px; transform:none; display:grid; place-items:center; cursor:pointer;
  border:0; border-radius:50%; background:var(--nyx-compat-color-e070557ce3d7); padding:0;
  box-shadow:var(--nyx-compat-shadow-box-8136b345f554);
  transition:transform .2s ease, filter .2s ease, box-shadow .2s ease; }
.gp-corner .tb-pengo.corner img{ height:40px; width:auto; display:block; transform:scaleX(-1); }
.gp-corner .tb-pengo.corner:hover, .gp-corner .tb-pengo.corner.on{ transform:scale(1.06);
  filter:var(--nyx-compat-shadow-drop-ee53a56a3776); box-shadow:var(--nyx-compat-shadow-box-f170ab8396b6); }
.gp-kofi{ flex:none; width:118px; height:34px; display:grid; place-items:center; border-radius:var(--nyx-radius-control); padding:var(--nyx-space-4) var(--nyx-space-10);
  background:transparent; box-shadow:none;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.gp-kofi:hover{ transform:translateY(-1px); background:var(--nyx-compat-color-acca2f28522d); box-shadow:var(--nyx-compat-shadow-box-ed8239814032); }
.gp-kofi img{ width:100px; height:auto; max-height:24px; display:block; object-fit:contain; }
.nyx-pengo-menu{ position:absolute; z-index:95; left:calc(100% + 14px); bottom:46px; width:388px; max-height:calc(100vh - 84px); overflow:visible;
  padding:var(--nyx-space-12) var(--nyx-space-14) var(--nyx-space-14); border-radius:var(--nyx-radius-card); color:var(--nyx-compat-color-hex-f5f0ff); font-family:var(--nyx-compat-family-bbbd64e38bdd); background:var(--nyx-compat-color-hex-1a0731);
  box-shadow:var(--nyx-compat-shadow-box-8fe6d8f12733);
  backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); animation:gtRise .22s cubic-bezier(.2,.7,.2,1); }
.nyx-pengo-menu::before{ content:""; position:absolute; inset:0; z-index:1; border-radius:var(--nyx-radius-card); pointer-events:none;
  background:linear-gradient(180deg, var(--nyx-compat-color-20a452903c89), var(--nyx-compat-color-6a8209a01e0c) 48%, var(--nyx-compat-color-170c5d8f4300));
  -webkit-mask-image:url('../../assets/decor/alchemypengobg.png'); mask-image:url('../../assets/decor/alchemypengobg.png');
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
  -webkit-mask-position:center; mask-position:center;
  -webkit-mask-size:contain; mask-size:contain;
  opacity:.46; mix-blend-mode:screen; filter:var(--nyx-compat-shadow-drop-74e2c5901b17); }
.nyx-pengo-menu::after{ content:""; position:absolute; inset:0; z-index:0; border-radius:var(--nyx-radius-card); pointer-events:none;
  background:linear-gradient(180deg, var(--nyx-compat-color-c365ebdba9b1), var(--nyx-compat-color-6e49886b3c7d)); }
.nyx-pengo-menu::-webkit-scrollbar{ width:5px; }
.nyx-pengo-menu::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-b3f199645776); border-radius:var(--nyx-compat-radius-3px); }
.nyx-pengo-menu section{ position:relative; z-index:2; padding:0; border-radius:0; background:transparent; box-shadow:none; }
.nyx-pengo-menu section + section{ margin-top:var(--nyx-space-10); padding-top:var(--nyx-space-8); border-top:1px solid var(--nyx-compat-color-9a593589b5e7); }
.nyx-pengo-menu h3{ margin:0 0 var(--nyx-compat-spacing-7px); color:var(--nyx-compat-color-hex-f1e8ff); font-size:var(--nyx-type-small); line-height:1; font-weight:var(--nyx-weight-black); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; }
.pm-row, .pm-slider, .pm-display-games, .pm-identity-row{ min-height:30px; display:grid; grid-template-columns:142px minmax(0, 1fr); align-items:center; gap:var(--nyx-space-8);
  width:100%; margin-top:var(--nyx-compat-spacing-3px); border:0; border-radius:var(--nyx-radius-small); padding:var(--nyx-compat-spacing-3px) var(--nyx-space-4); color:var(--nyx-compat-color-hex-dcd4f6); background:transparent;
  box-shadow:none; font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p06em); text-transform:uppercase; }
.pm-row > span, .pm-slider > span, .pm-display-games > span, .pm-identity-row > span{ white-space:nowrap; }
.pm-row{ cursor:pointer; text-align:left; }
.pm-row:hover, .pm-slider:hover, .pm-display-games:hover, .pm-identity-row:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-468ae2f713cd); box-shadow:none; }
.pm-state{ min-width:42px; justify-self:end; text-align:center; color:var(--nyx-compat-color-hex-d9ccff); border-radius:var(--nyx-radius-small); padding:var(--nyx-space-4) var(--nyx-space-8);
  background:var(--nyx-compat-color-84cf1fda31a9); box-shadow:var(--nyx-compat-shadow-box-c52604492861); font-size:var(--nyx-type-label); pointer-events:none; }
.pm-row.media .pm-state{ min-width:34px; font-size:var(--nyx-compat-size-13px); line-height:1; }
.pm-row.media.pause .pm-state{ color:var(--nyx-compat-color-hex-ffe8b4); background:var(--nyx-compat-color-5a747666a1c2); }
.pm-row.media.stop .pm-state{ color:var(--nyx-compat-color-hex-f1bdca); background:var(--nyx-compat-color-a05847670a7f); }
.pm-slider input{ width:100%; accent-color:var(--nyx-compat-color-hex-9b84ff); }
.pm-game-icons{ display:flex; align-items:center; justify-content:flex-end; gap:var(--nyx-space-6); min-width:0; }
.pm-game-icons button{ width:28px; height:28px; display:grid; place-items:center; border:0; border-radius:50%; padding:var(--nyx-space-2); cursor:pointer;
  background:var(--nyx-compat-color-c22858019a25); box-shadow:var(--nyx-compat-shadow-box-c52604492861); opacity:.95;
  transition:opacity .15s ease, filter .15s ease, background .15s ease; }
.pm-game-icons button:not(.on){ opacity:.28; filter:grayscale(1); background:var(--nyx-compat-color-62345492d057); }
.pm-game-icons button:hover{ opacity:1; filter:none; background:var(--nyx-compat-color-05bf38071bda); }
.pm-game-icons img{ width:22px; height:22px; border-radius:50%; object-fit:cover; display:block; }
.pm-identity-list{ display:flex; flex-direction:column; gap:var(--nyx-space-2); }
.pm-identity-row{ grid-template-columns:94px minmax(0, 1fr); min-height:24px; margin-top:var(--nyx-space-2); align-items:start; }
.pm-identity-row > span{ padding-top:var(--nyx-compat-spacing-5px); }
.pm-choice-set{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:var(--nyx-compat-spacing-1px); min-width:0; }
.pm-choice-set button{ min-width:0; height:20px; border:0; border-radius:var(--nyx-compat-radius-4px); padding:0 var(--nyx-space-4); cursor:pointer; color:var(--nyx-compat-color-hex-bfb4e7);
  background:var(--nyx-compat-color-a7fc5c590b1b); box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-compat-size-8p4px); font-weight:var(--nyx-weight-extrabold); letter-spacing:var(--nyx-compat-tracking-0); text-transform:uppercase;
  white-space:nowrap; transition:color .15s ease, background .15s ease, box-shadow .15s ease; }
.pm-choice-set button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-c22858019a25); box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2); }
.pm-choice-set button.on{ color:var(--nyx-compat-color-hex-f7f1ff); background:var(--nyx-compat-color-abc6e1ec2648);
  box-shadow:var(--nyx-compat-shadow-box-721b100caf46); }
.pm-opus-actions{ display:grid; grid-template-columns:1fr 1fr 136px; align-items:center; gap:var(--nyx-space-8); margin-top:var(--nyx-compat-spacing-7px); }
.pm-action{ width:100%; height:24px; border:0; border-radius:var(--nyx-radius-small); cursor:pointer; color:var(--nyx-compat-color-hex-dcd4f6); background:var(--nyx-compat-color-6ffca9ffce5d);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p11em); text-transform:uppercase; }
.pm-action:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-202cf7aa7285); }
.pm-stepper{ display:grid; grid-template-columns:25px minmax(0,1fr) 25px; gap:0; margin:0; overflow:hidden;
  border-radius:var(--nyx-radius-small); background:var(--nyx-compat-color-b8519e5dc8e0); box-shadow:var(--nyx-compat-shadow-box-7209f9aded99); }
.pm-stepper button{ height:24px; border:0; border-radius:0; cursor:pointer; color:var(--nyx-compat-color-hex-dcd4f6); background:transparent;
  box-shadow:none; font-size:var(--nyx-compat-size-13px); line-height:1; }
.pm-stepper button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-2c42c6df8167); }
.pm-stepper input{ height:24px; min-width:0; border:0; border-radius:0; padding:0 var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-f5f0ff); background:transparent;
  box-shadow:var(--nyx-compat-shadow-box-bda8a65aeb6c);
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-compat-size-11px); text-align:center; }
.pm-stepper input::-webkit-outer-spin-button, .pm-stepper input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.pm-reset{ position:relative; width:100%; height:29px; margin-top:var(--nyx-space-8); border:0; border-radius:var(--nyx-compat-radius-6px); cursor:pointer; color:var(--nyx-compat-color-hex-dcd4f6);
  background:var(--nyx-compat-color-c22858019a25); box-shadow:var(--nyx-compat-shadow-box-7209f9aded99); font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label); font-weight:var(--nyx-weight-black); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; }
.pm-reset:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-04297d93eab0); }
.nyx-pengo-menu [data-tip]{ position:relative; }
.nyx-pengo-menu [data-tip]::after{ content:attr(data-tip); position:absolute; left:calc(100% + 10px); top:50%; z-index:8;
  width:max-content; max-width:285px; padding:var(--nyx-space-8) var(--nyx-space-10); border-radius:var(--nyx-compat-radius-6px); color:var(--nyx-compat-color-hex-f6f0ff); background:var(--nyx-compat-color-1874821bb7e7);
  box-shadow:var(--nyx-compat-shadow-box-a640ce94afb2);
  font-size:var(--nyx-compat-size-11px); line-height:1.35; letter-spacing:var(--nyx-compat-tracking-p02em); text-transform:none; opacity:0; pointer-events:none;
  transform:translate(6px,-50%); transition:opacity .14s ease, transform .14s ease; }
.nyx-pengo-menu [data-tip]:hover::after{ opacity:1; transform:translate(0,-50%); }
.settings-pane{
  overflow-y:auto;
  align-items:stretch;
  padding:var(--nyx-space-4) var(--nyx-space-10) var(--nyx-space-28) var(--nyx-space-2);
}
.nyx-pengo-menu.as-tab{
  position:relative;
  box-sizing:border-box;
  left:auto;
  bottom:auto;
  width:100%;
  min-height:100%;
  max-height:none;
  overflow:visible;
  margin:0;
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  animation:none;
  display:grid;
  grid-template-columns:minmax(330px, .84fr) minmax(420px, 1.16fr);
  grid-template-rows:auto 1fr;
  align-content:start;
  gap:var(--nyx-space-14) var(--nyx-space-16);
}
.nyx-pengo-menu.as-tab::before,
.nyx-pengo-menu.as-tab::after{ display:none; }
.nyx-pengo-menu.as-tab .pm-section{
  position:relative;
  box-sizing:border-box;
  min-width:0;
  padding:var(--nyx-space-18) var(--nyx-space-20);
  border-radius:var(--nyx-radius-control);
  overflow:visible;
  background:linear-gradient(180deg, var(--nyx-compat-color-590747eb9453), var(--nyx-compat-color-222487e5c631));
  box-shadow:var(--nyx-compat-shadow-box-79a11a751b3c);
}
.nyx-pengo-menu.as-tab .pm-section::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, var(--nyx-compat-color-b7091a91de32), transparent 42%),
    linear-gradient(180deg, var(--nyx-compat-color-c4f6a3598dea), transparent 58%);
  opacity:.72;
  border-radius:inherit;
}
.nyx-pengo-menu.as-tab .pm-section > *{ position:relative; z-index:1; }
.nyx-pengo-menu.as-tab .pm-section + .pm-section{ margin-top:0; padding-top:var(--nyx-space-18); border-top:0; }
.nyx-pengo-menu.as-tab .pm-opus{ grid-row:1 / span 2; align-self:stretch; display:flex; flex-direction:column; }
.nyx-pengo-menu.as-tab .pm-opus .pm-reset{ margin-top:auto; }
.nyx-pengo-menu.as-tab h3{
  margin:0 0 var(--nyx-space-16);
  font-size:var(--nyx-type-body);
  letter-spacing:var(--nyx-compat-tracking-p18em);
  color:var(--nyx-compat-color-hex-fbf8ff);
  text-shadow:var(--nyx-compat-shadow-text-b5a51d9d5a6f);
}
.nyx-pengo-menu.as-tab .pm-row,
.nyx-pengo-menu.as-tab .pm-slider,
.nyx-pengo-menu.as-tab .pm-display-games,
.nyx-pengo-menu.as-tab .pm-identity-row{
  min-height:42px;
  grid-template-columns:minmax(160px, .86fr) minmax(0, 1fr);
  gap:var(--nyx-space-12);
  margin-top:var(--nyx-compat-spacing-7px);
  padding:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-9px);
  border-radius:var(--nyx-compat-radius-7px);
  background:var(--nyx-compat-color-a6fd83eb3901);
  box-shadow:var(--nyx-compat-shadow-box-391fbc44f762);
  font-size:var(--nyx-compat-size-11p5px);
}
.nyx-pengo-menu.as-tab .pm-row:hover,
.nyx-pengo-menu.as-tab .pm-slider:hover,
.nyx-pengo-menu.as-tab .pm-display-games:hover,
.nyx-pengo-menu.as-tab .pm-identity-row:hover{
  background:var(--nyx-compat-color-71c0ce20ab05);
  box-shadow:var(--nyx-compat-shadow-box-86f75fb8fb1b);
}
.nyx-pengo-menu.as-tab .pm-state{
  min-width:58px;
  padding:var(--nyx-space-6) var(--nyx-space-10);
  background:var(--nyx-compat-color-2c42c6df8167);
  color:var(--nyx-compat-color-hex-efe9ff);
}
.nyx-pengo-menu.as-tab .pm-row.media.pause .pm-state,
.nyx-pengo-menu.as-tab .pm-row.media.stop .pm-state{
  color:var(--nyx-compat-color-hex-efe9ff);
  background:var(--nyx-compat-color-63a5a38919ca);
}
.nyx-pengo-menu.as-tab .pm-slider{
  grid-template-columns:minmax(92px, .42fr) minmax(0, 1fr) 64px;
}
.nyx-pengo-menu.as-tab .pm-slider input{ min-height:28px; }
.nyx-pengo-menu.as-tab .pm-slider input[type="number"]{
  width:64px;
  height:30px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  padding:0 var(--nyx-space-6);
  color:var(--nyx-compat-color-hex-f5f1ff);
  text-align:center;
  background:var(--nyx-compat-color-5f4cd78a5abc);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-11px);
  font-weight:var(--nyx-weight-black);
}
.nyx-pengo-menu.as-tab .pm-opus-actions{
  grid-template-columns:minmax(0, 1fr) minmax(0, 1fr) 150px;
  gap:var(--nyx-space-10);
  margin-top:var(--nyx-compat-spacing-15px);
}
.nyx-pengo-menu.as-tab .pm-action,
.nyx-pengo-menu.as-tab .pm-reset{
  min-height:36px;
  height:auto;
  border-radius:var(--nyx-compat-radius-7px);
  background:var(--nyx-compat-color-84cf1fda31a9);
  font-size:var(--nyx-compat-size-10p5px);
}
.nyx-pengo-menu.as-tab .pm-stepper{
  min-height:36px;
  grid-template-columns:36px minmax(0,1fr) 36px;
  border-radius:var(--nyx-compat-radius-7px);
}
.nyx-pengo-menu.as-tab .pm-stepper button,
.nyx-pengo-menu.as-tab .pm-stepper input{ height:36px; }
.nyx-pengo-menu.as-tab .pm-interface{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  align-content:start;
  gap:var(--nyx-space-8) var(--nyx-space-10);
}
.nyx-pengo-menu.as-tab .pm-interface h3,
.nyx-pengo-menu.as-tab .pm-interface .pm-display-games,
.nyx-pengo-menu.as-tab .pm-interface .pm-reset{ grid-column:1 / -1; }
.nyx-pengo-menu.as-tab .pm-interface .pm-row{ grid-template-columns:minmax(0, 1fr) auto; }
.nyx-pengo-menu.as-tab .pm-game-icons{ gap:var(--nyx-compat-spacing-9px); }
.nyx-pengo-menu.as-tab .pm-game-icons button{ width:34px; height:34px; }
.nyx-pengo-menu.as-tab .pm-game-icons img{ width:27px; height:27px; }
.nyx-pengo-menu.as-tab .pm-identity-list{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--nyx-space-8);
}
.nyx-pengo-menu.as-tab .pm-identity-row{
  grid-template-columns:minmax(118px, .48fr) minmax(0, 1fr);
  align-items:center;
  min-height:74px;
  margin-top:0;
}
.nyx-pengo-menu.as-tab .pm-identity-row > span{ padding-top:0; }
.nyx-pengo-menu.as-tab .pm-identity-control{
  display:flex;
  align-items:center;
  justify-content:flex-end;
}
.nyx-pengo-menu.as-tab .pm-choice-set{ justify-content:flex-start; gap:var(--nyx-compat-spacing-5px); }
.nyx-pengo-menu.as-tab .pm-choice-set button{
  height:25px;
  padding:0 var(--nyx-space-8);
  border-radius:var(--nyx-compat-radius-6px);
  font-size:var(--nyx-compat-size-9p5px);
}
.nyx-pengo-menu.as-tab [data-tip]::after{
  left:0;
  top:calc(100% + 7px);
  max-width:min(300px, calc(100vw - 40px));
  transform:translateY(-4px);
}
.nyx-pengo-menu.as-tab [data-tip]:hover::after{
  transform:translateY(0);
}
.nyx-pengo-menu.settings-board.as-tab{
  display:grid;
  grid-template-columns:minmax(310px, .86fr) minmax(0, 1.4fr);
  grid-template-rows:auto;
  gap:var(--nyx-space-16);
  padding-bottom:var(--nyx-compat-spacing-180px);
}
.settings-nyx-col,
.settings-games-col{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-14);
}
.settings-games-col{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  align-content:start;
}
.nyx-pengo-menu.settings-board.as-tab .pm-section{
  min-width:0;
  overflow:visible;
}
.nyx-pengo-menu.settings-board.as-tab .pm-opus{
  grid-row:auto;
  align-self:stretch;
}
.nyx-pengo-menu.settings-board.as-tab .pm-opus .pm-reset{
  margin-top:var(--nyx-space-14);
}
.nyx-pengo-menu.settings-board.as-tab .pm-interface{
  display:flex;
  flex-direction:column;
  gap:0;
}
.pm-game-section{
  position:relative;
  z-index:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-8);
}
.pm-game-section:focus-within{ z-index:30; }
.pm-game-head{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--nyx-space-10);
  margin-bottom:var(--nyx-space-2);
}
.pm-game-head img{
  width:34px;
  height:34px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
  background:var(--nyx-compat-color-55c20e2b46b5);
  box-shadow:var(--nyx-compat-shadow-box-87e461c2a2b2);
}
.pm-game-head h3{
  margin:0;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nyx-pengo-menu.as-tab .pm-game-section .pm-row,
.nyx-pengo-menu.as-tab .pm-game-section .pm-identity-row{
  min-height:38px;
  grid-template-columns:minmax(132px, .46fr) minmax(0, 1fr);
  margin-top:0;
}
.nyx-pengo-menu.as-tab .pm-game-section .pm-identity-row:not(.pm-icon-row):not(.pm-language-row){
  min-height:78px;
}
.pm-icon-picker{
  position:relative;
  z-index:40;
  min-width:0;
}
.pm-icon-trigger{
  width:100%;
  min-width:0;
  height:36px;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:var(--nyx-space-8);
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-compat-spacing-9px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-efe9ff);
  background:var(--nyx-compat-color-84cf1fda31a9);
  box-shadow:var(--nyx-compat-shadow-box-7209f9aded99);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.pm-icon-trigger:hover{ background:var(--nyx-compat-color-05bf38071bda); color:var(--nyx-color-text-max); }
.pm-icon-trigger img{
  width:26px;
  height:26px;
  flex:none;
  border-radius:50%;
  object-fit:cover;
}
.pm-icon-trigger span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pm-icon-pop{
  position:absolute;
  right:0;
  top:calc(100% + 8px);
  z-index:90;
  width:min(540px, 72vw);
  max-width:calc(100vw - 80px);
  padding:var(--nyx-space-10);
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-hex-080616);
  box-shadow:var(--nyx-compat-shadow-box-e9442dff8063);
}
.pm-icon-pop.fixed{
  position:fixed;
  right:auto;
  z-index:230;
  max-height:calc(100vh - 32px);
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.pm-icon-search{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:var(--nyx-space-8);
}
.pm-icon-search input{
  width:100%;
  height:34px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-space-10);
  color:var(--nyx-compat-color-hex-f5f1ff);
  background:var(--nyx-compat-color-108ef61fc9ce);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-11px);
}
.pm-icon-search button{
  min-width:112px;
  height:34px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-efe9ff);
  background:var(--nyx-compat-color-2c42c6df8167);
  box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.pm-icon-search button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-f780a9bbf36f); }
.pm-icon-grid{
  max-height:min(430px, 52vh);
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(68px, 1fr));
  gap:var(--nyx-space-8);
  margin-top:var(--nyx-space-10);
  padding-right:var(--nyx-space-2);
  scrollbar-width:thin;
  scrollbar-color:var(--nyx-compat-color-d6980ed7cd33) var(--nyx-compat-color-7c7e3a1deafd);
}
.pm-icon-grid::-webkit-scrollbar{ display:block; width:7px; }
.pm-icon-grid::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-882b20822869); border-radius:var(--nyx-compat-radius-6px); }
.pm-icon-grid button{
  min-width:0;
  height:70px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:var(--nyx-space-6) var(--nyx-space-4);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--nyx-compat-spacing-5px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-dcd4f6);
  background:var(--nyx-compat-color-9f2840cc4fb3);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
}
.pm-icon-grid button:hover,
.pm-icon-grid button.on{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-017421d156e5);
  box-shadow:var(--nyx-compat-shadow-box-d98e77153a15);
}
.pm-icon-grid img{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  flex:none;
}
.pm-icon-grid span{
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--nyx-compat-size-8p5px);
}
.pm-icon-empty{
  grid-column:1 / -1;
  padding:var(--nyx-space-18) var(--nyx-space-8);
  text-align:center;
  color:var(--nyx-compat-color-hex-9f95ca);
  font-size:var(--nyx-compat-size-11px);
}
.pm-special-list{
  display:flex;
  flex-direction:column;
  gap:var(--nyx-compat-spacing-7px);
}
.pm-reset-all .pm-reset.danger{
  background:var(--nyx-compat-color-202cf7aa7285);
  box-shadow:var(--nyx-compat-shadow-box-11dda1118db2);
}
.pm-reset-all{
  position:sticky;
  bottom:12px;
  z-index:3;
}
.pm-reset-confirm{
  position:fixed;
  inset:0;
  z-index:280;
  display:grid;
  place-items:center;
  padding:var(--nyx-space-18);
  background:var(--nyx-compat-color-166e591485b2);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.pm-reset-confirm article{
  width:min(420px, calc(100vw - 36px));
  border-radius:var(--nyx-radius-control);
  padding:var(--nyx-space-18);
  background:linear-gradient(180deg, var(--nyx-compat-color-acc38e37a551), var(--nyx-compat-color-430f93bafa2b));
  box-shadow:var(--nyx-compat-shadow-box-c5beb41f8e39);
}
.pm-reset-confirm b{
  display:block;
  color:var(--nyx-color-text-max);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-small);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
}
.pm-reset-confirm p{
  margin:var(--nyx-space-10) 0 var(--nyx-space-16);
  color:var(--nyx-compat-color-hex-dcd4f6);
  font-size:var(--nyx-compat-size-13px);
  line-height:1.45;
}
.pm-reset-confirm div{
  display:flex;
  justify-content:flex-end;
  gap:var(--nyx-space-8);
}
.pm-reset-confirm button{
  min-height:34px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-compat-spacing-13px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-dcd4f6);
  background:var(--nyx-compat-color-ac1e946fec49);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p11em);
  text-transform:uppercase;
}
.pm-reset-confirm button.primary{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-d57b2d640b5a);
}
.pm-identity-control{
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--nyx-space-8);
}
.pm-identity-label{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:var(--nyx-compat-spacing-7px);
  white-space:normal !important;
}
.pm-identity-label b{
  color:inherit;
  font-size:inherit;
  letter-spacing:inherit;
  text-transform:uppercase;
}
.pm-identity-preview{
  width:46px;
  height:46px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:var(--nyx-compat-color-55c20e2b46b5);
  box-shadow:var(--nyx-compat-shadow-box-1b9a80b71de2);
}
.pm-identity-preview img{
  width:38px;
  height:38px;
  border-radius:50%;
  object-fit:cover;
}
.pm-language-row select{
  width:100%;
  min-width:0;
  height:34px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-space-10);
  color:var(--nyx-compat-color-hex-f5f1ff);
  background:var(--nyx-compat-color-84cf1fda31a9);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  color-scheme:dark;
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
}
.pm-language-row select:focus{
  outline:none;
  box-shadow:var(--nyx-compat-shadow-box-382de5edde1b);
}
.pm-language-row select option{
  color:var(--nyx-compat-color-hex-f5f1ff);
  background:var(--nyx-compat-color-hex-120a2c);
}
.pm-select{
  position:relative;
  z-index:35;
  min-width:0;
}
.pm-select-trigger{
  width:100%;
  min-height:34px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-space-10);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-10);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-f5f1ff);
  background:var(--nyx-compat-color-84cf1fda31a9);
  box-shadow:var(--nyx-compat-shadow-box-7209f9aded99);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.pm-select-trigger:hover,
.pm-select-trigger[aria-expanded="true"]{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-1f60c4e4881c);
}
.pm-select-trigger span{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pm-select-trigger i{
  flex:none;
  color:var(--nyx-color-accent-bright);
  font-style:normal;
  font-size:var(--nyx-type-label);
}
.pm-select-menu{
  position:absolute;
  z-index:90;
  left:0;
  right:0;
  top:calc(100% + 6px);
  max-height:220px;
  overflow-y:auto;
  padding:var(--nyx-space-6);
  border-radius:var(--nyx-radius-control);
  background:linear-gradient(180deg, var(--nyx-compat-color-c9ec55ead729), var(--nyx-compat-color-0ebeeacdab55));
  box-shadow:var(--nyx-compat-shadow-box-72dee991391f);
}
.pm-select-menu button{
  width:100%;
  min-height:31px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  padding:0 var(--nyx-compat-spacing-9px);
  display:flex;
  align-items:center;
  cursor:pointer;
  color:var(--nyx-compat-color-hex-ded8ff);
  background:transparent;
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-align:left;
}
.pm-select-menu button:hover,
.pm-select-menu button.on{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-05bf38071bda);
}
.pm-collab-control{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  gap:var(--nyx-space-8);
}
.pm-collab-expand{
  min-height:38px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-space-10);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-dcd4f6);
  background:var(--nyx-compat-color-bfd4f2cf402d);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.pm-collab-expand:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-d29ff9b43a7d); }
.pm-collab-unit{
  margin-left:var(--nyx-space-12);
}
.settings-pane{
  padding-bottom:var(--nyx-compat-spacing-190px);
}
.nyx-img-editor{
  min-width:0;
  margin-top:var(--nyx-space-10);
  padding:var(--nyx-space-10);
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-29328b1f569f);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
}
.nyx-img-editor-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-10);
}
.nyx-img-editor-head b{
  min-width:0;
  color:var(--nyx-compat-color-hex-f4efff);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-10p5px);
  letter-spacing:var(--nyx-compat-tracking-p13em);
  text-transform:uppercase;
}
.nyx-img-editor-head label{
  flex:none;
  cursor:pointer;
}
.nyx-img-editor-head input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.nyx-img-editor-head label span,
.nyx-img-actions button{
  min-height:29px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  padding:0 var(--nyx-compat-spacing-9px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  color:var(--nyx-compat-color-hex-dcd4f6);
  background:var(--nyx-compat-color-84cf1fda31a9);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-9p5px);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.nyx-img-actions button.primary{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-d57b2d640b5a); }
.nyx-img-actions button:disabled{ cursor:not-allowed; opacity:.45; }
.nyx-img-preview{
  position:relative;
  width:100%;
  max-height:240px;
  margin-top:var(--nyx-compat-spacing-9px);
  overflow:hidden;
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-1653c6f86f8e);
  box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  cursor:grab;
  touch-action:none;
}
.nyx-img-preview:active{ cursor:grabbing; }
.nyx-img-editor.shape-circle .nyx-img-preview{ max-width:260px; border-radius:var(--nyx-radius-control); margin-left:auto; margin-right:auto; }
.nyx-img-editor.shape-circle .nyx-img-preview::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:radial-gradient(circle at center, transparent 0 49%, var(--nyx-compat-color-0e50e9a6e4c9) 50% 100%);
  box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2);
}
.nyx-img-editor.shape-circle .nyx-img-preview::before{
  content:"";
  position:absolute;
  inset:7%;
  z-index:2;
  pointer-events:none;
  border-radius:50%;
  box-shadow:var(--nyx-compat-shadow-box-624c20f59b53);
}
.nyx-img-preview img{
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:100%;
  object-fit:contain;
  transform-origin:50% 50%;
  user-select:none;
}
.nyx-img-fields{
  display:grid;
  grid-template-columns:1fr;
  gap:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-9px);
  margin-top:var(--nyx-space-10);
}
.nyx-img-fields label{
  min-width:0;
  display:grid;
  grid-template-columns:58px minmax(0, 1fr) 74px 28px;
  align-items:center;
  gap:var(--nyx-compat-spacing-7px);
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  letter-spacing:var(--nyx-compat-tracking-p11em);
  text-transform:uppercase;
}
.nyx-img-fields input{ min-width:0; }
.nyx-img-fields input[type="number"]{
  width:74px;
  height:28px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  padding:0 var(--nyx-space-6);
  color:var(--nyx-compat-color-hex-f5f1ff);
  text-align:center;
  background:var(--nyx-compat-color-5f4cd78a5abc);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
}
.nyx-img-fields em{
  color:var(--nyx-compat-color-hex-8f84bd);
  font-style:normal;
  font-size:var(--nyx-compat-size-8px);
  text-transform:none;
}
.nyx-img-flips{
  display:flex;
  flex-wrap:wrap;
  gap:var(--nyx-compat-spacing-7px);
  margin-top:var(--nyx-compat-spacing-9px);
}
.nyx-img-flips button{
  min-height:28px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  padding:0 var(--nyx-compat-spacing-9px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-dcd4f6);
  background:var(--nyx-compat-color-108ef61fc9ce);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p09em);
  text-transform:uppercase;
}
.nyx-img-flips button.on{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-f780a9bbf36f); }
.nyx-img-library-block{
  min-width:0;
  margin-top:var(--nyx-space-8);
}
.nyx-img-library-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-8);
  color:var(--nyx-compat-color-hex-9f96c9);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p12em);
  text-transform:uppercase;
}
.nyx-img-library-head button{
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  padding:var(--nyx-space-4) var(--nyx-space-8);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-d7d0ff);
  background:var(--nyx-compat-color-84cf1fda31a9);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
  font:inherit;
  letter-spacing:var(--nyx-compat-tracking-p1em);
}
.nyx-img-library-head button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-aab699f6afa8); }
.nyx-img-library{
  display:flex;
  gap:var(--nyx-compat-spacing-7px);
  overflow-x:auto;
  padding:var(--nyx-space-8) var(--nyx-compat-spacing-1px) var(--nyx-space-4);
  scrollbar-width:thin;
}
.nyx-img-library button{
  flex:0 0 64px;
  min-width:0;
  height:70px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:var(--nyx-compat-spacing-5px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-cfc6ff);
  background:var(--nyx-compat-color-2f93647338e5);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
}
.nyx-img-library img{
  width:38px;
  height:38px;
  border-radius:var(--nyx-compat-radius-6px);
  object-fit:cover;
  display:block;
  margin:0 auto var(--nyx-space-4);
}
.nyx-img-library span{
  display:block;
  width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--nyx-compat-size-8px);
}
.nyx-img-actions{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
  gap:var(--nyx-compat-spacing-7px);
  margin-top:var(--nyx-space-10);
}
.nyx-img-actions span{
  flex:1 1 180px;
  min-width:0;
  color:var(--nyx-compat-color-hex-8f84bd);
  font-size:var(--nyx-type-label);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nyx-img-error{
  margin-top:var(--nyx-space-8);
  color:var(--nyx-compat-color-hex-ffd0dd);
  font-size:var(--nyx-compat-size-11px);
}
.cm-custom-art-panel{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--nyx-space-10);
  padding:var(--nyx-space-10);
  border-radius:var(--nyx-compat-radius-12px);
  background:var(--nyx-compat-color-4892ff5203a7);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
}
.cm-customize-view{
  min-height:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-12);
}
.cm-custom-back,
.cm-ledger-customize-entry button{
  min-height:38px;
  border:0;
  border-radius:var(--nyx-radius-control);
  padding:0 var(--nyx-compat-spacing-13px);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--nyx-compat-spacing-9px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-efe9ff);
  background:var(--nyx-compat-color-2c42c6df8167);
  box-shadow:var(--nyx-compat-shadow-box-a65614cb2162);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p11em);
  text-transform:uppercase;
}
.cm-custom-back:hover,
.cm-ledger-customize-entry button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-aab699f6afa8); }
.cm-custom-back span{ font-size:var(--nyx-type-section); line-height:1; }
.cm-ledger-customize-entry{
  display:flex;
  justify-content:flex-end;
  padding:var(--nyx-space-8) 0 0;
}
.cm-ledger-customize-entry button{
  flex-direction:column;
  align-items:flex-end;
  gap:var(--nyx-compat-spacing-1px);
  min-width:230px;
  min-height:48px;
}
.cm-ledger-customize-entry b{
  color:var(--nyx-color-text-muted);
  font-size:var(--nyx-compat-size-8px);
  letter-spacing:var(--nyx-compat-tracking-p12em);
}
.cm-custom-page{
  width:100%;
  min-height:100%;
  overflow-y:auto;
  padding:var(--nyx-space-16) var(--nyx-space-18) var(--nyx-compat-spacing-170px);
  box-sizing:border-box;
}
.cm-custom-page-head{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--nyx-space-14);
  margin-bottom:var(--nyx-space-14);
  padding:var(--nyx-space-14) var(--nyx-space-16);
  border-radius:var(--nyx-radius-control);
  background:linear-gradient(180deg, var(--nyx-compat-color-590747eb9453), var(--nyx-compat-color-9dd9ac8a8af0));
  box-shadow:var(--nyx-compat-shadow-box-46d5d5a24037);
}
.cm-custom-page-head > div{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-4);
}
.cm-custom-page-head > div b{
  color:var(--nyx-color-text-max);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-28px);
  line-height:1;
  font-weight:var(--nyx-weight-regular);
}
.cm-custom-page-head > div em{
  color:var(--nyx-compat-color-hex-bdb3e9);
  font-style:normal;
  font-size:var(--nyx-type-small);
}
.cm-custom-page .cm-custom-art-panel{
  align-items:start;
}
.nyx-img-choice{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-8);
}
.nyx-img-choice-head{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-7px);
}
.nyx-img-choice-head b{
  flex:1;
  min-width:0;
  color:var(--nyx-color-heading);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  letter-spacing:var(--nyx-compat-tracking-p12em);
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nyx-img-choice-head button{
  flex:none;
  min-height:26px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  padding:0 var(--nyx-space-8);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-cfc6ff);
  background:var(--nyx-compat-color-ac1e946fec49);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-8p8px);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p09em);
  text-transform:uppercase;
}
.nyx-img-choice-row{
  display:flex;
  gap:var(--nyx-compat-spacing-7px);
  overflow-x:auto;
  padding:var(--nyx-compat-spacing-1px) var(--nyx-compat-spacing-1px) var(--nyx-space-6);
  scrollbar-width:thin;
}
.nyx-img-choice-row button{
  flex:0 0 72px;
  min-width:0;
  height:76px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:var(--nyx-compat-spacing-5px);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--nyx-space-4);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-cfc6ff);
  background:var(--nyx-compat-color-2f93647338e5);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
}
.nyx-img-choice-row button.on,
.nyx-img-choice-row button:hover{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-b6ceb79dc76c);
  box-shadow:var(--nyx-compat-shadow-box-05ed5520619e);
}
.nyx-img-choice-row img{
  width:42px;
  height:42px;
  border-radius:var(--nyx-compat-radius-6px);
  object-fit:cover;
  background:var(--nyx-compat-color-c51625e0f194);
}
.cm-custom-art-panel .nyx-img-choice:first-child .nyx-img-choice-row img{ border-radius:50%; }
.nyx-img-choice-row span{
  width:100%;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:var(--nyx-compat-size-8p5px);
}
/* D2: large selection preview + explicit Apply below the thumbnail row */
.nyx-img-choice-row button.previewing{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-e11aeb508c9e);
  box-shadow:var(--nyx-compat-shadow-box-82c7801b3ea5);
}
.nyx-img-pickpreview{
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-8);
  padding:var(--nyx-space-10);
  border-radius:var(--nyx-radius-card);
  background:var(--nyx-compat-color-07fd121e13e2);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
}
.nyx-img-pickpreview-frame{
  align-self:center;
  width:100%;
  max-width:380px;
  aspect-ratio:16/9;
  border-radius:var(--nyx-compat-radius-9px);
  overflow:hidden;
  background:var(--nyx-compat-color-c51625e0f194);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
}
.nyx-img-pickpreview.shape-circle .nyx-img-pickpreview-frame{
  width:140px;
  aspect-ratio:1;
  border-radius:50%;
}
.nyx-img-pickpreview-frame img{ width:100%; height:100%; object-fit:cover; }
.nyx-img-pickpreview-actions{
  display:flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-7px);
}
.nyx-img-pickpreview-actions em{
  flex:1;
  min-width:0;
  font-style:normal;
  font-size:var(--nyx-compat-size-10p5px);
  letter-spacing:var(--nyx-compat-tracking-p06em);
  color:var(--nyx-compat-color-hex-b3a9e0);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.nyx-img-pickpreview-actions button{
  flex:none;
  min-height:27px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-space-12);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-cfc6ff);
  background:var(--nyx-compat-color-ac1e946fec49);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p09em);
  text-transform:uppercase;
}
.nyx-img-pickpreview-actions button.apply{
  color:var(--nyx-color-surface);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-cfc4ff),var(--nyx-compat-color-hex-9a89ea));
  box-shadow:var(--nyx-compat-shadow-box-8f773f638f85);
}
.nyx-img-pickpreview-actions button.apply:disabled{
  cursor:default;
  opacity:.55;
  box-shadow:none;
}
.nyx-beta-confirm{
  position:fixed;
  inset:0;
  z-index:260;
  display:grid;
  place-items:center;
  background:var(--nyx-compat-color-166e591485b2);
  backdrop-filter:blur(4px);
  -webkit-backdrop-filter:blur(4px);
}
.nyx-beta-card{
  width:min(420px, calc(100vw - 32px));
  padding:var(--nyx-space-18);
  border-radius:var(--nyx-radius-card);
  background:linear-gradient(180deg, var(--nyx-compat-color-dfbb472394af), var(--nyx-compat-color-d16c85e39cab));
  box-shadow:var(--nyx-compat-shadow-box-e2bc2eef7c09);
}
.nyx-beta-card b{
  color:var(--nyx-color-text-max);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-13px);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
}
.nyx-beta-card p{
  margin:var(--nyx-space-10) 0 var(--nyx-space-16);
  color:var(--nyx-compat-color-hex-d8d1f5);
  font-size:var(--nyx-compat-size-13px);
  line-height:1.45;
}
.nyx-beta-card div{ display:flex; justify-content:flex-end; gap:var(--nyx-space-8); }
.nyx-beta-card button{
  min-height:34px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-compat-spacing-13px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-dcd4f6);
  background:var(--nyx-compat-color-ac1e946fec49);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p11em);
  text-transform:uppercase;
}
.nyx-beta-card button.primary{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-aab699f6afa8); }
.tcg-view{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.tcg-head{
  display:flex;
  align-items:center;
  gap:var(--nyx-space-14);
}
.tcg-search-tools{ position:relative; display:flex; align-items:center; gap:var(--nyx-space-8); min-width:min(440px,100%); }
.tcg-search-tools .gp-search{ flex:1 1 auto; min-width:0; }
.tcg-filter-button{ flex:none; min-height:38px; border:0; border-radius:var(--nyx-radius-control); padding:0 var(--nyx-compat-spacing-13px); cursor:pointer; display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px);
  color:var(--nyx-compat-color-hex-c9c0e9); background:var(--nyx-compat-color-143120cacd00); box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2); font:var(--nyx-compat-font-5981e2444f4b); letter-spacing:var(--nyx-compat-tracking-p11em); text-transform:uppercase; }
.tcg-filter-button:hover,.tcg-filter-button:focus-visible,.tcg-filter-button.on{ color:var(--nyx-color-text-max); outline:none; box-shadow:var(--nyx-compat-shadow-box-a0a55e0c71b2); }
.tcg-filter-button span{ min-width:18px; height:18px; display:grid; place-items:center; border-radius:var(--nyx-radius-pill); color:var(--nyx-compat-color-hex-140d2c); background:var(--nyx-compat-color-hex-d8ceff); font-size:var(--nyx-type-caption); }
.tcg-filter-popout{ position:absolute; z-index:40; top:calc(100% + 8px); right:0; width:min(470px,calc(100vw - 32px)); max-height:min(520px,70vh); overflow:auto;
  border-radius:var(--nyx-compat-radius-12px); padding:var(--nyx-compat-spacing-13px); background:var(--nyx-compat-color-fe4581d04412); box-shadow:var(--nyx-compat-shadow-box-9fea6873286a); }
.tcg-filter-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--nyx-space-12); }
.tcg-filter-pop-head b{ color:var(--nyx-color-text-max); font:var(--nyx-compat-font-2dff53a2982e); }
.tcg-filter-pop-head button{ border:0; padding:var(--nyx-compat-spacing-5px) var(--nyx-compat-spacing-7px); cursor:pointer; color:var(--nyx-compat-color-hex-bfb4e5); background:transparent; font-size:var(--nyx-type-label); }
.tcg-filter-pop-head button:hover,.tcg-filter-pop-head button:focus-visible{ color:var(--nyx-color-text-max); outline:1px solid var(--nyx-compat-color-hex-cdbfff); border-radius:var(--nyx-radius-small); }
.tcg-active-filters{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--nyx-compat-spacing-7px); margin-top:var(--nyx-space-10); }
.tcg-active-filters button{ border:0; border-radius:var(--nyx-radius-pill); padding:var(--nyx-space-6) var(--nyx-compat-spacing-9px); cursor:pointer; color:var(--nyx-color-heading); background:var(--nyx-compat-color-202cf7aa7285); box-shadow:var(--nyx-compat-shadow-box-fc1223acb7c7); font-size:var(--nyx-type-label); }
.tcg-active-filters button:hover,.tcg-active-filters button:focus-visible{ outline:1px solid var(--nyx-compat-color-hex-cdbfff); }
.tcg-active-filters button.clear{ color:var(--nyx-compat-color-hex-b5aad9); background:transparent; box-shadow:none; }
.tcg-tabs{
  display:flex;
  gap:var(--nyx-space-6);
  flex-wrap:wrap;
  margin-top:var(--nyx-space-14);
}
.tcg-category-tabs{
  margin-top:var(--nyx-compat-spacing-9px);
  max-height:76px;
  overflow:auto;
  padding-right:var(--nyx-compat-spacing-3px);
}
.tcg-filter-block{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-6);
  margin-top:var(--nyx-space-12);
}
.tcg-filter-block > span{
  color:var(--nyx-compat-color-hex-8f86b8);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p16em);
  text-transform:uppercase;
}
.tcg-tabs button{
  min-height:31px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-space-10);
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-space-8);
  cursor:pointer;
  color:var(--nyx-color-text-muted);
  background:var(--nyx-compat-color-e8fa77887ffa);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p12em);
  text-transform:uppercase;
}
.tcg-tabs button.on,
.tcg-tabs button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-2c42c6df8167); }
.tcg-tabs b{
  min-width:22px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:var(--nyx-radius-pill);
  color:var(--nyx-compat-color-hex-f5f1ff);
  background:var(--nyx-compat-color-e1b276e64ad6);
  font-size:var(--nyx-type-label);
}
.tcg-grid{
  --tcg-card-h:408px;
  --tcg-art-h:348px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(178px, 1fr));
  grid-auto-rows:var(--tcg-card-h);
  align-content:start;
  gap:var(--nyx-space-12);
  margin-top:var(--nyx-space-14);
  padding:var(--nyx-space-2) var(--nyx-space-8) var(--nyx-space-6) var(--nyx-space-2);
}
.tcg-card{
  min-width:0;
  height:var(--tcg-card-h);
  display:flex;
  flex-direction:column;
  border:0;
  border-radius:0;
  overflow:visible;
  padding:0;
  cursor:pointer;
  background:transparent;
  box-shadow:none;
  font-family:var(--nyx-font-display);
  text-align:left;
}
.tcg-card:hover,.tcg-card:focus-visible{ outline:none; }
.tcg-card:hover .tcg-art,.tcg-card:focus-visible .tcg-art{ transform:translateY(-2px); box-shadow:var(--nyx-compat-shadow-box-e2f7040f1121); }
.tcg-art{
  height:var(--tcg-art-h);
  flex:0 0 var(--tcg-art-h);
  overflow:hidden;
  border-radius:var(--nyx-radius-control);
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 34%, var(--nyx-compat-color-e1b276e64ad6), var(--nyx-compat-color-1653c6f86f8e));
  box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  transition:transform .2s,box-shadow .2s;
}
.tcg-art img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}
.tcg-art span{
  color:var(--nyx-compat-color-hex-f5f1ff);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-type-title);
}
.tcg-meta{
  flex:1 1 auto;
  min-width:0;
  min-height:60px;
  padding:var(--nyx-space-10) var(--nyx-space-4) 0;
  background:transparent;
  box-shadow:none;
}
.tcg-meta b{
  display:block;
  min-width:0;
  color:var(--nyx-color-text-max);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-18px);
  line-height:1.05;
  font-weight:var(--nyx-weight-regular);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.tcg-meta span{
  display:block;
  margin-top:var(--nyx-compat-spacing-5px);
  color:var(--nyx-compat-color-hex-9d92c5);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.tcg-detail-page{
  gap:var(--nyx-space-12);
}
.tcg-detail-toolbar{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-12);
  min-height:40px;
}
.tcg-detail-toolbar > div{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-9px);
  color:var(--nyx-compat-color-hex-8f84bd);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
}
.tcg-detail-toolbar > div b{
  color:var(--nyx-compat-color-hex-f5f1ff);
  font-size:var(--nyx-compat-size-11px);
}
.tcg-back{
  min-height:38px;
  border:0;
  border-radius:var(--nyx-radius-control);
  padding:0 var(--nyx-compat-spacing-13px) 0 var(--nyx-compat-spacing-9px);
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-7px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-efe9ff);
  background:var(--nyx-compat-color-2c42c6df8167);
  box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.tcg-back:hover{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-aab699f6afa8);
}
.tcg-back span{
  font-size:var(--nyx-compat-size-24px);
  line-height:1;
}
.tcg-back b{
  font-size:var(--nyx-type-label);
}
.tcg-detail-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:var(--nyx-space-8);
}
.tcg-detail-panel{
  position:relative;
  width:100%;
  min-height:100%;
  display:grid;
  grid-template-columns:minmax(240px, .58fr) minmax(0, 1fr);
  align-items:start;
  gap:var(--nyx-space-18);
  padding:var(--nyx-space-4) var(--nyx-space-2) var(--nyx-space-12) 0;
}
.tcg-detail-image,
.tcg-detail-fallback{
  position:sticky;
  top:0;
  justify-self:center;
  align-self:start;
}
.tcg-detail-image{
  max-width:100%;
  max-height:min(520px, calc(100vh - 180px));
  object-fit:contain;
}
.tcg-detail-fallback{
  width:100%;
  min-height:320px;
  display:grid;
  place-items:center;
  color:var(--nyx-compat-color-hex-f5f1ff);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-34px);
}
.tcg-detail-copy{
  min-width:0;
  padding:var(--nyx-space-4) var(--nyx-space-8) var(--nyx-space-8) 0;
  color:var(--nyx-compat-color-hex-dcd4f6);
}
.tcg-detail-copy b{
  display:block;
  color:var(--nyx-color-text-max);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-28px);
  line-height:1.05;
  font-weight:var(--nyx-weight-regular);
}
.tcg-detail-copy em{
  display:block;
  margin-top:var(--nyx-space-6);
  color:var(--nyx-compat-color-hex-bdb3e9);
  font-style:normal;
}
.tcg-detail-copy > span{
  display:block;
  margin-top:var(--nyx-space-12);
  color:var(--nyx-compat-color-hex-8f84bd);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p12em);
  text-transform:uppercase;
}
.tcg-detail-copy div{
  margin-top:var(--nyx-space-8);
  color:var(--nyx-compat-color-hex-cfc6ff);
  font-size:var(--nyx-compat-size-11px);
}
.tcg-stat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--nyx-space-8);
  margin-top:var(--nyx-space-16);
}
.tcg-stat-grid span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-compat-spacing-3px);
  border-radius:var(--nyx-compat-radius-7px);
  padding:var(--nyx-space-8) var(--nyx-compat-spacing-9px);
  background:var(--nyx-compat-color-108ef61fc9ce);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
}
.tcg-stat-grid span b{
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-8px);
  line-height:1;
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p13em);
  text-transform:uppercase;
}
.tcg-stat-grid span em{
  min-width:0;
  margin:0;
  color:var(--nyx-compat-color-hex-f4efff);
  font-size:var(--nyx-type-small);
  line-height:1.25;
  overflow:hidden;
  text-overflow:ellipsis;
}
.tcg-effect{
  margin-top:var(--nyx-space-16);
}
.tcg-effect span{
  display:block;
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p13em);
  text-transform:uppercase;
}
.tcg-detail-copy p{
  margin:var(--nyx-space-16) 0 0;
  color:var(--nyx-compat-color-hex-e5ddff);
  font-size:var(--nyx-type-body);
  line-height:1.55;
  white-space:pre-wrap;
}
.tcg-source p{
  color:var(--nyx-compat-color-hex-dcd5ff);
}
.tcg-skill-list{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-compat-spacing-9px);
  margin-top:var(--nyx-space-16);
}
.tcg-skill-list > span{
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p13em);
  text-transform:uppercase;
}
.tcg-skill-card{
  min-width:0;
  border-radius:var(--nyx-radius-control);
  padding:var(--nyx-compat-spacing-11px) var(--nyx-space-12);
  background:var(--nyx-compat-color-aea1415d7e2d);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79);
}
.tcg-skill-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--nyx-compat-spacing-7px);
}
.tcg-skill-head b{
  margin-right:auto;
  color:var(--nyx-compat-color-hex-f7f2ff);
  font-size:var(--nyx-type-lead);
}
.tcg-skill-head em,
.tcg-skill-head i{
  border-radius:var(--nyx-radius-pill);
  padding:var(--nyx-space-4) var(--nyx-space-8);
  color:var(--nyx-compat-color-hex-dcd5ff);
  background:var(--nyx-compat-color-2c42c6df8167);
  font-style:normal;
  font-size:var(--nyx-type-label);
}
.tcg-skill-card p{
  margin:var(--nyx-space-8) 0 0;
  white-space:pre-line;
  color:var(--nyx-compat-color-hex-e8e1ff);
  line-height:1.46;
}
.tcg-reference-list{
  margin-top:var(--nyx-space-10);
  display:flex;
  flex-direction:column;
  gap:var(--nyx-compat-spacing-7px);
}
.tcg-reference-list > span{
  color:var(--nyx-compat-color-hex-8d83b6);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
}
.tcg-reference-list div{
  margin-top:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:var(--nyx-space-8) var(--nyx-compat-spacing-9px);
  background:var(--nyx-compat-color-74c78649a540);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
}
.tcg-reference-list b{
  display:block;
  color:var(--nyx-compat-color-hex-f4efff);
  font-size:var(--nyx-type-small);
}
.tcg-reference-list p{
  margin-top:var(--nyx-space-4);
  color:var(--nyx-compat-color-hex-cfc7ef);
  font-size:var(--nyx-type-small);
}

/* ================= Serenitea Pot furnishings ================= */
.pot-view{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.pot-head{
  display:flex;
  align-items:center;
  gap:var(--nyx-space-14);
}
.pot-filter-block{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-6);
  margin-top:var(--nyx-space-12);
}
.pot-filter-block > span{
  color:var(--nyx-compat-color-hex-8f86b8);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p16em);
  text-transform:uppercase;
}
.pot-tabs{
  display:flex;
  gap:var(--nyx-space-6);
  flex-wrap:wrap;
  margin-top:var(--nyx-compat-spacing-9px);
}
.pot-category-tabs{
  max-height:80px;
  overflow:auto;
  padding-right:var(--nyx-compat-spacing-3px);
}
.pot-tabs button{
  min-height:31px;
  border:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:0 var(--nyx-space-10);
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-space-8);
  cursor:pointer;
  color:var(--nyx-color-text-muted);
  background:var(--nyx-compat-color-e8fa77887ffa);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p12em);
  text-transform:uppercase;
}
.pot-tabs button.on,
.pot-tabs button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-2c42c6df8167); }
.pot-tabs b{
  min-width:22px;
  height:20px;
  display:grid;
  place-items:center;
  border-radius:var(--nyx-radius-pill);
  color:var(--nyx-compat-color-hex-f5f1ff);
  background:var(--nyx-compat-color-e1b276e64ad6);
  font-size:var(--nyx-type-label);
}
.pot-grid{
  --pot-card-h:214px;
  --pot-art-h:158px;
  flex:1;
  min-height:0;
  overflow-y:auto;
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(150px, 1fr));
  grid-auto-rows:var(--pot-card-h);
  align-content:start;
  gap:var(--nyx-space-12);
  margin-top:var(--nyx-space-14);
  padding:var(--nyx-space-2) var(--nyx-space-8) var(--nyx-space-6) var(--nyx-space-2);
}
.pot-extra-group{ grid-column:1/-1; min-width:0; display:grid; gap:var(--nyx-space-12); }
.pot-extra-toggle{ width:100%; min-height:38px; display:flex; align-items:center; gap:var(--nyx-space-10);
  border:0; border-top:1px solid var(--nyx-color-border-strong); padding:var(--nyx-space-8) var(--nyx-space-4);
  color:var(--nyx-color-heading); background:transparent; cursor:pointer; text-align:left; }
.pot-extra-toggle span{ font-family:var(--nyx-font-display); font-size:var(--nyx-type-body); letter-spacing:var(--nyx-compat-tracking-p08em); }
.pot-extra-toggle b{ color:var(--nyx-color-text-faint); font-size:var(--nyx-type-small); }
.pot-extra-toggle i{ margin-left:auto; color:var(--nyx-color-heading); font-size:var(--nyx-type-title); font-style:normal; }
.pot-extra-toggle:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
.pot-extra-grid{ min-width:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(132px,1fr)); align-content:start; gap:var(--nyx-space-12); }
.pot-card{
  min-width:0;
  height:var(--pot-card-h);
  display:flex;
  flex-direction:column;
  border:0;
  border-radius:0;
  overflow:visible;
  padding:0;
  cursor:pointer;
  background:transparent;
  box-shadow:none;
  font-family:var(--nyx-font-display);
  text-align:left;
}
.pot-card:hover,.pot-card:focus-visible{ outline:none; }
.pot-card:hover .pot-art,.pot-card:focus-visible .pot-art{ transform:translateY(-2px); box-shadow:var(--nyx-compat-shadow-box-e2f7040f1121); }
.pot-art{
  position:relative;
  height:var(--pot-art-h);
  flex:0 0 var(--pot-art-h);
  overflow:hidden;
  border-radius:var(--nyx-radius-control);
  display:grid;
  place-items:center;
  background:radial-gradient(circle at 50% 34%, var(--nyx-compat-color-e1b276e64ad6), var(--nyx-compat-color-1653c6f86f8e));
  box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  transition:transform .2s,box-shadow .2s;
}
.pot-art img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:var(--nyx-space-10);
  display:block;
}
.pot-art span{
  color:var(--nyx-compat-color-hex-f5f1ff);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-26px);
}
.pot-rar{
  position:absolute;
  top:7px;
  left:7px;
  border-radius:var(--nyx-radius-pill);
  padding:var(--nyx-space-2) var(--nyx-compat-spacing-7px);
  color:var(--nyx-compat-color-hex-ffe6ad);
  background:var(--nyx-compat-color-250b573c0618);
  box-shadow:var(--nyx-compat-shadow-box-76e3347b7741);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  font-style:normal;
  letter-spacing:var(--nyx-compat-tracking-p04em);
}
.pot-meta{
  flex:1 1 auto;
  min-width:0;
  padding:var(--nyx-compat-spacing-9px) var(--nyx-space-4) 0;
  background:transparent;
  box-shadow:none;
}
.pot-meta b{
  display:block;
  min-width:0;
  color:var(--nyx-color-text-max);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-15px);
  line-height:1.1;
  font-weight:var(--nyx-weight-regular);
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pot-meta span{
  display:block;
  margin-top:var(--nyx-compat-spacing-5px);
  color:var(--nyx-compat-color-hex-9d92c5);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-8px);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.pot-detail-page{
  gap:var(--nyx-space-12);
}
.pot-detail-toolbar{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-12);
  min-height:40px;
}
.pot-detail-toolbar > div{
  min-width:0;
  display:flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-9px);
  color:var(--nyx-compat-color-hex-8f84bd);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase;
}
.pot-detail-toolbar > div b{
  color:var(--nyx-compat-color-hex-f5f1ff);
  font-size:var(--nyx-compat-size-11px);
}
.pot-back{
  min-height:38px;
  border:0;
  border-radius:var(--nyx-radius-control);
  padding:0 var(--nyx-compat-spacing-13px) 0 var(--nyx-compat-spacing-9px);
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-7px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-efe9ff);
  background:var(--nyx-compat-color-2c42c6df8167);
  box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.pot-back:hover{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-aab699f6afa8);
}
.pot-back span{
  font-size:var(--nyx-compat-size-24px);
  line-height:1;
}
.pot-back b{
  font-size:var(--nyx-type-label);
}
.pot-detail-scroll{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding-right:var(--nyx-space-8);
}
.pot-detail-panel{
  position:relative;
  width:100%;
  min-height:100%;
  display:grid;
  grid-template-columns:minmax(220px, .52fr) minmax(0, 1fr);
  align-items:start;
  gap:var(--nyx-space-18);
  padding:var(--nyx-space-4) var(--nyx-space-2) var(--nyx-space-12) 0;
}
.pot-detail-image,
.pot-detail-fallback{
  position:sticky;
  top:0;
  justify-self:center;
  align-self:start;
}
.pot-detail-image{
  max-width:100%;
  max-height:min(460px, calc(100vh - 180px));
  object-fit:contain;
}
.pot-detail-fallback{
  width:100%;
  min-height:260px;
  display:grid;
  place-items:center;
  color:var(--nyx-compat-color-hex-f5f1ff);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-34px);
}
.pot-detail-copy{
  min-width:0;
  padding:var(--nyx-space-4) var(--nyx-space-8) var(--nyx-space-8) 0;
  color:var(--nyx-compat-color-hex-dcd4f6);
}
.pot-detail-copy b{
  display:block;
  color:var(--nyx-color-text-max);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-28px);
  line-height:1.05;
  font-weight:var(--nyx-weight-regular);
}
.pot-stat-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:var(--nyx-space-8);
  margin-top:var(--nyx-space-16);
}
.pot-stat-grid span{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:var(--nyx-compat-spacing-3px);
  border-radius:var(--nyx-compat-radius-7px);
  padding:var(--nyx-space-8) var(--nyx-compat-spacing-9px);
  background:var(--nyx-compat-color-108ef61fc9ce);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
}
.pot-stat-grid span b{
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-8px);
  line-height:1;
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p13em);
  text-transform:uppercase;
}
.pot-stat-grid span em{
  min-width:0;
  margin:0;
  color:var(--nyx-compat-color-hex-f4efff);
  font-size:var(--nyx-type-small);
  line-height:1.25;
  font-style:normal;
  overflow:hidden;
  text-overflow:ellipsis;
}
.pot-effect{
  margin-top:var(--nyx-space-16);
}
.pot-effect > span{
  display:block;
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p13em);
  text-transform:uppercase;
}
.pot-effect p{
  margin:var(--nyx-space-10) 0 0;
  color:var(--nyx-compat-color-hex-e5ddff);
  font-size:var(--nyx-type-body);
  line-height:1.55;
  white-space:pre-wrap;
}
.pot-source p{
  color:var(--nyx-compat-color-hex-dcd5ff);
  font-size:var(--nyx-compat-size-13px);
}
.pot-source p + p{
  margin-top:var(--nyx-space-6);
}
.pot-recipe{
  margin-top:var(--nyx-space-18);
}
.pot-recipe > span{
  display:block;
  color:var(--nyx-compat-color-hex-9f95ca);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p13em);
  text-transform:uppercase;
}
.pot-recipe-list{
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(180px, 1fr));
  gap:var(--nyx-space-8);
  margin-top:var(--nyx-space-10);
}
.pot-mat{
  display:flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-9px);
  border-radius:var(--nyx-radius-control);
  padding:var(--nyx-compat-spacing-7px) var(--nyx-space-10) var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-7px);
  background:var(--nyx-compat-color-aea1415d7e2d);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79);
}
.pot-mat-icon{
  flex:0 0 34px;
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:var(--nyx-compat-radius-6px);
  overflow:hidden;
  background:radial-gradient(circle at 50% 40%, var(--nyx-compat-color-e11aeb508c9e), var(--nyx-compat-color-c51625e0f194));
}
.pot-mat-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
}
.pot-mat-icon span{
  color:var(--nyx-compat-color-hex-e8e1ff);
  font-size:var(--nyx-type-small);
}
.pot-mat b{
  flex:1 1 auto;
  min-width:0;
  color:var(--nyx-compat-color-hex-f4efff);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-type-body);
  font-weight:var(--nyx-weight-regular);
  line-height:1.15;
  overflow:hidden;
  display:-webkit-box;
  -webkit-box-orient:vertical;
  -webkit-line-clamp:2;
}
.pot-mat i{
  flex:none;
  color:var(--nyx-compat-color-hex-cdb3ff);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-small);
  font-style:normal;
  font-weight:var(--nyx-weight-black);
}
.gp-side-nav,
.gp-cardrow.scroll,
.gp-current-banner-row,
.gp-overview-main,
.gp-overview-aside,
.gp-fav-picker,
.overview-codes-scroll,
.gp-codes-scroll,
.gt-results,
.gt-fives .lst,
.gt-archive-grid,
.gt-history-table,
.gt-recent-five-list,
.gt-banner-history-list,
.gt-archive-side .gt-total-strip.archive,
.db-grid,
.tcg-grid,
.tcg-detail-scroll,
.cm-body,
.cm-pop-main,
.cm-pop.ledger .cm-pop-layout,
.gp-layout,
.settings-pane{
  scrollbar-width:none;
  -ms-overflow-style:none;
}
.gp-side-nav::-webkit-scrollbar,
.gp-cardrow.scroll::-webkit-scrollbar,
.gp-current-banner-row::-webkit-scrollbar,
.gp-overview-main::-webkit-scrollbar,
.gp-overview-aside::-webkit-scrollbar,
.gp-fav-picker::-webkit-scrollbar,
.overview-codes-scroll::-webkit-scrollbar,
.gp-codes-scroll::-webkit-scrollbar,
.gt-results::-webkit-scrollbar,
.gt-fives .lst::-webkit-scrollbar,
.gt-archive-grid::-webkit-scrollbar,
.gt-history-table::-webkit-scrollbar,
.gt-recent-five-list::-webkit-scrollbar,
.gt-banner-history-list::-webkit-scrollbar,
.gt-archive-side .gt-total-strip.archive::-webkit-scrollbar,
.db-grid::-webkit-scrollbar,
.tcg-grid::-webkit-scrollbar,
.tcg-detail-scroll::-webkit-scrollbar,
.cm-body::-webkit-scrollbar,
.cm-pop-main::-webkit-scrollbar,
.cm-pop.ledger .cm-pop-layout::-webkit-scrollbar,
.gp-layout::-webkit-scrollbar,
.settings-pane::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;
}
html.nyx-whispers-off .nyx-rune-field{ display:none !important; }
html.nyx-pattern-paused .page-pattern, html.nyx-pattern-paused .gp-pattern{ animation-play-state:paused !important; }
html.nyx-pattern-off .page-pattern, html.nyx-pattern-off .gp-pattern{ opacity:0 !important; animation:none !important; }
@media (prefers-reduced-motion: reduce){ .page-pattern, .gp-pattern{ animation-play-state:paused !important; } }
html.nyx-khaenriah .gp{ font-family:var(--nyx-compat-family-96b368c64d40) !important; font-size:var(--nyx-compat-size-18px); }
html.nyx-khaenriah .gp *:not(.nyx-pengo-menu):not(.nyx-pengo-menu *):not(.gt-results):not(.gt-results *){ font-family:var(--nyx-compat-family-96b368c64d40) !important; }
.nyx-pengo-menu, .nyx-pengo-menu *{ font-family:var(--nyx-compat-family-bbbd64e38bdd) !important; }
/* Eye layers are shared by the top bar and the side-nav eye (moved there
   2026-08-09). */
:is(.gp-topbar, .gp-nav-eye) .elayer{ position:absolute; inset:0; background:var(--nyx-compat-color-hex-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%; }
:is(.gp-topbar, .gp-nav-eye) .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; }
:is(.gp-topbar, .gp-nav-eye) .elayer.lid{ -webkit-mask-image:url('../../assets/icon/eye_lid.png'); mask-image:url('../../assets/icon/eye_lid.png'); }
:is(.gp-topbar, .gp-nav-eye) .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:var(--nyx-space-20); }
.gp-topbar.has-time-preference .tb-center{
  width:100%;
  display:grid;
  grid-template-columns:236px minmax(0,1fr) minmax(300px,360px);
  column-gap:var(--nyx-compat-spacing-22px);
}
.gp-topbar.has-time-preference .gp-game-rail{ grid-column:2; justify-self:center; }
.gp-topbar.has-time-preference .nyx-time-pref{ grid-column:3; justify-self:end; }
.nyx-time-pref{ position:relative; z-index:28; flex:0 0 auto; }
/* Overview right rail placement — the control spans the rail width above Reset Timers. */
.gp-aside-time .nyx-time-pref{ width:100%; }
.gp-aside-time .nyx-time-pref-switch{ width:100%; box-sizing:border-box; }
.gp-aside-time .nyx-time-pref-popover{ left:0; right:0; }
/* Plain compact text choices: EU / NA / ASIA, then Custom.
   The active choice glows rather than filling.
   Deliberately NOT named *-buttons: the shared control chrome near the end of
   this file hexagon-clips every button inside .nyx-time-pref-buttons. */
.nyx-time-pref-switch{ display:flex; align-items:center; }
.nyx-time-pref-regions{
  display:inline-flex; align-items:center; height:32px; padding:0;
}
/* A quiet divider separates Custom from the server choices. */
.nyx-time-pref-div{
  width:1px; height:12px; flex:none; margin:0 var(--nyx-space-8);
  background:var(--nyx-compat-color-fe41f066fa45);
}
.nyx-time-pref-switch button{
  appearance:none; border:0; margin:0; padding:0; background:none; box-shadow:none; clip-path:none;
  color:var(--nyx-color-text-faint); cursor:pointer;
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-small);
  letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase;
  transition:color .16s ease, text-shadow .16s ease;
}
/* Slash separators between the three server buttons only — the divider element
   already separates Custom. */
.nyx-time-pref-regions button + button:not(.nyx-time-pref-custom)::before{
  content:"/"; margin:0 var(--nyx-space-4); color:var(--nyx-compat-color-fe41f066fa45); text-shadow:none;
}
.nyx-time-pref-switch button:hover{ color:var(--nyx-color-text-soft); }
.nyx-time-pref-regions button.on,
.nyx-time-pref-custom.on{
  color:var(--nyx-color-text-max);
  text-shadow:0 0 8px rgba(183,170,255,.95), 0 0 18px rgba(139,123,255,.55);
}
.nyx-time-pref-switch button:focus-visible,
.nyx-time-pref-popover select:focus-visible{ outline:2px solid var(--nyx-color-accent-bright); outline-offset:2px; }
.nyx-time-pref-popover{ position:absolute; z-index:50; top:44px; right:0; display:grid; width:300px; gap:var(--nyx-space-10); padding:var(--nyx-space-12); border:1px solid var(--nyx-compat-color-9abf2f2b7722); border-radius:var(--nyx-compat-radius-9px); background:var(--nyx-color-surface); box-shadow:var(--nyx-compat-shadow-box-4f7cd9937d9b); }
.nyx-time-pref-popover label{ display:grid; gap:var(--nyx-compat-spacing-5px); color:var(--nyx-color-text-dim); font-size:var(--nyx-type-label); font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p04em); }
.nyx-time-pref-popover select{ width:100%; min-height:36px; border:1px solid var(--nyx-compat-color-821fe30a43b2); border-radius:var(--nyx-compat-radius-6px); padding:0 var(--nyx-compat-spacing-9px); background:var(--nyx-compat-color-hex-15102d); color:var(--nyx-color-text); color-scheme:dark; font:var(--nyx-compat-font-1cfdd39e4542); }
.nyx-time-pref-popover p{ margin:0; color:var(--nyx-compat-color-hex-8f86b2); font-size:var(--nyx-type-label); line-height:1.45; }
.gp-topbar .gp-med{ width:68px; height:68px; }
.gp-topbar .gp-med img{ width:56px; height:56px; }
.gp-topbar .gp-med img.glyph{ width:34px; height:34px; }
.gp-topbar .gp-med.sz-sm{ width:68px; height:68px; }
.gp-topbar .gp-med.sz-sm img{ width:56px; height:56px; }
.gp-topbar .gp-med.sz-sm img.glyph{ width:32px; height:32px; }
.gp-topbar .gp-med.sim{ width:74px; height:74px; }
.gp-topbar .gp-med.sim > .ballvibe,
.gp-topbar .gp-med.sim > .slayer{ width:60px; height:60px; inset:7px; }
.gp-topbar .gp-med.sim .ballvibe .slayer{ width:100%; height:100%; inset:0; }
.gp-topbar .banner{ position:relative; height:54px; border:none; cursor:pointer;
  display:flex; align-items:center; padding:0 var(--nyx-compat-spacing-30px);
  background:url('../../assets/cards/principal_frame.png') center/100% 100% no-repeat;
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-compat-size-15px); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase;
  color:var(--nyx-compat-color-hex-ece6ff); text-shadow:var(--nyx-compat-shadow-text-2dcb8d5b1bda); white-space:nowrap;
  filter:var(--nyx-compat-shadow-drop-d5bc05e3566e) var(--nyx-compat-shadow-drop-b751dbb72ded);
  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) var(--nyx-compat-shadow-drop-f72ecd84a7c1) var(--nyx-compat-shadow-drop-5df3db96847d); }
/* 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:var(--nyx-compat-shadow-drop-8f69dd7d7701); }
/* seated mascot perched on top of the search box */
.gp-search-wrap{ position:relative; flex:none; margin-right:var(--nyx-space-16); }
.search-seat{ position:absolute; right:22px; bottom:-14px; height:74px; width:auto; z-index:4;
  pointer-events:none; filter:var(--nyx-compat-shadow-drop-8f69dd7d7701); }
.gp-bench-dia .bp:hover{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-9a89ea)); }
.gp-bench-dia .bp:hover::before{ color:var(--nyx-color-surface); }

/* ===== scrollable codes list ===== */
.gp-codes-scroll{ overflow-y:auto; overscroll-behavior:contain; padding-right:var(--nyx-space-8);
  display:flex; flex-direction:column; gap:var(--nyx-space-8); }
.gp-codes-scroll::-webkit-scrollbar{ width:6px; }
.gp-codes-scroll::-webkit-scrollbar-track{ background:var(--nyx-compat-color-dffb33c1c353); border-radius:var(--nyx-compat-radius-3px); }
.gp-codes-scroll::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-3px); }
.gp-codes-scroll::-webkit-scrollbar-thumb:hover{ background:var(--nyx-compat-color-b4e6993b837a); }
.gp-code{ flex:none; }
.overview-codes{ padding-right:var(--nyx-compat-spacing-7px); }
.overview-codes .gp-code{ padding:var(--nyx-space-12) var(--nyx-compat-spacing-13px); gap:var(--nyx-space-8) var(--nyx-space-10); }
.overview-codes .reward-chips{ gap:var(--nyx-compat-spacing-5px); }
.overview-codes .reward-chips span{ min-height:20px; padding:var(--nyx-space-2) var(--nyx-compat-spacing-7px); font-size:var(--nyx-compat-size-11px); }
.gp-code .cp.ask{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-f5f0ff),var(--nyx-color-accent-bright)); }
.gp-code.redeemed,
.gp-code.st-redeemed{ opacity:.45; filter:grayscale(.75); }
.gp-code.st-copied{ box-shadow:var(--nyx-compat-shadow-box-0cca645cafa1); }

.code-filter{ min-height:36px; display:flex; align-items:center; gap:var(--nyx-compat-spacing-9px); padding:0 var(--nyx-space-12) 0 var(--nyx-space-10);
  clip-path:var(--hclip); background:linear-gradient(180deg, var(--nyx-compat-color-21fc42ba413a), var(--nyx-compat-color-f79ac4f07ed4));
  box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a); color:var(--nyx-compat-color-hex-d9d1fb);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; cursor:pointer; }
.code-filter.on{ box-shadow:var(--nyx-compat-shadow-box-626e5a41c986); }
.code-filter.disabled{ opacity:.48; cursor:not-allowed; }
.code-filter.wide{ flex:none; }
.code-filter input{ width:15px; height:15px; accent-color:var(--nyx-color-accent); cursor:pointer; }
.code-filter input:disabled{ cursor:not-allowed; }
.code-filter img{ width:24px; height:24px; object-fit:contain; filter:var(--nyx-compat-shadow-drop-752e86ae0f08); }
.code-filter .cur-glyph{ width:18px; height:18px; transform:rotate(45deg);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-cfc4ff),var(--nyx-color-accent)); box-shadow:var(--nyx-compat-shadow-box-c38d4e189ebb); }
.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:var(--nyx-compat-size-11px); font-weight:var(--nyx-weight-semibold); }
.code-filter-text small{ margin-top:var(--nyx-space-2); font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p12em); color:var(--nyx-compat-color-hex-9e93c8); }
.code-empty{ padding:var(--nyx-space-18); text-align:center; color:var(--nyx-color-text-faint); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; }

/* ===== Nyx personal page — all-games tabs ===== */
.sim-codegroup{ display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-9px); flex:none; }
.sim-grouphd{ display:flex; align-items:center; gap:var(--nyx-space-10); }
.sim-grouphd img{ width:30px; height:30px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:var(--nyx-compat-shadow-box-940bdb001abd); }
.sim-grouphd .gn{ font-family:var(--nyx-font-display); font-size:var(--nyx-type-lead); color:var(--nyx-color-heading); white-space:nowrap;
  text-shadow:var(--nyx-compat-shadow-text-807d5c88b94a); }
.sim-grouphd .rule{ flex:1; height:1px; background:linear-gradient(90deg, var(--nyx-compat-color-aaf84fa004c4), var(--nyx-compat-color-51af19e1cccc)); }
.sim-bangrid{ display:grid; grid-template-columns:1fr 1fr; gap:var(--nyx-space-16); }
.sim-ban{ position:relative; height:152px; overflow:hidden; clip-path:var(--hclip);
  box-shadow:var(--nyx-compat-shadow-box-e92aca61030e);
  filter:var(--nyx-compat-shadow-drop-afb300568fec); 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, var(--nyx-compat-color-9fa4120a9f58) 0%, var(--nyx-compat-color-858b1df8685f) 52%, var(--nyx-compat-color-c10fda8e8e55) 100%); }
.sim-ban .inner{ position:absolute; inset:0; padding:var(--nyx-space-14) var(--nyx-space-18); display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-7px); }
.sim-ban .top{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-9px); }
.sim-ban .top .gi{ width:26px; height:26px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:var(--nyx-compat-shadow-box-940bdb001abd); }
.sim-ban .top .gn{ font-family:var(--nyx-font-display); font-size:var(--nyx-type-body); color:var(--nyx-color-heading); }
.sim-ban .top .ph{ margin-left:auto; font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p18em); text-transform:uppercase;
  color:var(--accent-bright); }
.sim-ban .bt{ font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-21px); color:var(--nyx-compat-color-hex-f7f4ff);
  text-shadow:var(--nyx-compat-shadow-text-62143edadd1a); }
.sim-ban .feat{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-6); }
.sim-ban .chip{ display:inline-flex; align-items:center; height:21px; padding:0 var(--nyx-space-10); font-size:var(--nyx-compat-size-11px);
  border-radius:var(--nyx-compat-radius-11px); background:var(--nyx-compat-color-143120cacd00); color:var(--nyx-compat-color-hex-d9d1fb);
  box-shadow:var(--nyx-compat-shadow-box-9957f5618992); }
.sim-ban .chip.five{ background:linear-gradient(160deg, var(--nyx-compat-color-b477b9ac4e60), var(--nyx-compat-color-6f069793b713));
  box-shadow:var(--nyx-compat-shadow-box-225a64c2e759); color:var(--nyx-compat-color-hex-f2eeff); }
.sim-ban .tm{ margin-top:auto; font-size:var(--nyx-type-small); color:var(--nyx-color-text-soft); letter-spacing:var(--nyx-compat-tracking-p06em); }
.gp-code.redeemed .cc,
.gp-code.st-redeemed .cc{ text-decoration:line-through; text-decoration-color:var(--nyx-compat-color-e0888e602199); }
.gp-code.redeemed .cp,
.gp-code.st-redeemed .cp{ cursor:pointer; background:linear-gradient(160deg,var(--nyx-compat-color-hex-8d87a8),var(--nyx-compat-color-hex-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%, var(--nyx-compat-color-89ad15089a98), var(--nyx-compat-color-dec20a7f7ac9) 70%),
    linear-gradient(180deg, var(--nyx-compat-color-d8479496ea77) 0%, var(--nyx-compat-color-90f287d17c5c) 38%, var(--nyx-compat-color-3c27117dbecf) 100%); }
@media (prefers-reduced-motion: reduce){ .nyx-bgart{ transition:none; } }
.nyx-rune-field{ position:absolute; inset:0; z-index:0; overflow:hidden; pointer-events:none; mix-blend-mode:screen; }
.nyx-rune-line{ position:absolute; left:var(--x); top:0; display:block; writing-mode:vertical-rl; text-orientation:upright;
  max-height:520px; color:var(--nyx-compat-color-7c34197e4698); opacity:0; font-family:var(--nyx-compat-family-96b368c64d40); font-size:var(--size);
  line-height:.78; letter-spacing:var(--nyx-compat-tracking-0); white-space:nowrap; text-shadow:var(--nyx-compat-shadow-text-f5672c841b37);
  filter:var(--nyx-compat-shadow-drop-55c326b20aa6); animation:nyxRuneFall var(--dur) linear infinite; animation-delay:var(--delay);
  -webkit-mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 100%);
  mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 100%);
  will-change:transform, opacity, -webkit-mask-image, mask-image; }
@keyframes nyxRuneFall{
  0%{ transform:translate3d(0,-420px,0); opacity:0;
    -webkit-mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 100%);
    mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 100%); }
  14%{ opacity:var(--alpha);
    -webkit-mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 100%);
    mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 100%); }
  76%{ opacity:var(--alpha);
    -webkit-mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 100%);
    mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 100%); }
  86%{ opacity:var(--alpha);
    -webkit-mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 56%, var(--nyx-compat-color-63db2c445dba) 74%, transparent 100%);
    mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 56%, var(--nyx-compat-color-63db2c445dba) 74%, transparent 100%); }
  94%{ opacity:var(--alpha);
    -webkit-mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 14%, var(--nyx-compat-color-8fc68438ccc2) 34%, transparent 72%, transparent 100%);
    mask-image:linear-gradient(180deg, var(--nyx-compat-color-hex-000) 0%, var(--nyx-compat-color-hex-000) 14%, var(--nyx-compat-color-8fc68438ccc2) 34%, transparent 72%, transparent 100%); }
  100%{ transform:translate3d(0,1320px,0); opacity:0;
    -webkit-mask-image:linear-gradient(180deg, transparent 0%, transparent 100%);
    mask-image:linear-gradient(180deg, transparent 0%, transparent 100%); }
}
@media (prefers-reduced-motion: reduce){
  .nyx-rune-line{ top:0; transform:translateY(var(--static-y)); animation:none; opacity:calc(var(--alpha) * .62); -webkit-mask-image:none; mask-image:none; }
}

/* ===== Nyx — redesigned All Codes (grouped 2-col cards) ===== */
.sim-updated{ flex:none; font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11p5px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase;
  color:var(--nyx-color-text-faint); white-space:nowrap; }
.sim-codegroup{ gap:var(--nyx-compat-spacing-13px); }
/* Packs three or four codes per row instead of two half-empty ones
   (user 2026-08-09). */
.sim-codegrid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(272px, 1fr)); gap:var(--nyx-space-6) var(--nyx-space-12); }
.sim-codegrid .gp-code{ min-height:112px; }
.sim-code{ position:relative; display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-9px); padding:var(--nyx-space-14) var(--nyx-space-16);
  border-radius:var(--nyx-compat-radius-13px); background:linear-gradient(180deg, var(--nyx-compat-color-41b9ea4edbce), var(--nyx-compat-color-1e33b2b23972));
  box-shadow:var(--nyx-compat-shadow-box-c52604492861); transition:box-shadow .25s; }
.sim-code .hd{ display:flex; align-items:center; gap:var(--nyx-space-10); min-width:0; }
.sim-code .cc{ font-family:var(--nyx-font-mono); font-size:var(--nyx-compat-size-15px); letter-spacing:var(--nyx-compat-tracking-p07em); color:var(--nyx-color-text-max);
  flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none; }
.sim-code a.cc:hover{ color:var(--nyx-compat-color-hex-cfc6ff); text-shadow:var(--nyx-compat-shadow-text-922f6aa714d1); }
.sim-code .newtag{ flex:none; font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p16em); font-weight:var(--nyx-weight-bold);
  padding:var(--nyx-compat-spacing-3px) var(--nyx-compat-spacing-7px); border-radius:var(--nyx-compat-radius-6px); color:var(--nyx-color-surface); background:linear-gradient(160deg,var(--nyx-compat-color-hex-f5f0ff),var(--nyx-color-accent-bright));
  box-shadow:var(--nyx-compat-shadow-box-6342ef1fe132); }
.sim-code .copy{ flex:none; width:32px; height:32px; border:none; cursor:pointer; border-radius:var(--nyx-compat-radius-9px); display:grid; place-items:center;
  color:var(--nyx-color-text-soft); background:var(--nyx-compat-color-7081c4a5b868); box-shadow:var(--nyx-compat-shadow-box-9957f5618992); transition:color .2s, box-shadow .2s, transform .2s; }
.sim-code .copy:hover{ color:var(--nyx-color-text-max); transform:translateY(-1px); box-shadow:var(--nyx-compat-shadow-box-50379f5f18a4); }
.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:var(--nyx-compat-radius-2px); }
.i-copy::after{ content:""; position:absolute; right:0; bottom:0; width:9px; height:11px; border:1.6px solid currentColor; border-radius:var(--nyx-compat-radius-2px); background:linear-gradient(135deg, transparent 40%, var(--nyx-compat-color-b9e26f018016) 40%); }
.sim-code .cbtn{ flex:none; border:none; cursor:pointer; height:30px; padding:0 var(--nyx-compat-spacing-13px); border-radius:var(--nyx-compat-radius-9px);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; color:var(--nyx-color-surface); font-weight:var(--nyx-weight-semibold);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-f5f0ff),var(--nyx-color-accent-bright)); 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:var(--nyx-compat-size-13px); color:var(--nyx-compat-color-hex-dcd6ff);
  background:var(--nyx-compat-color-0e22c68e8710); box-shadow:var(--nyx-compat-shadow-box-e066385c6b63); }
.sim-code .rw{ font-size:var(--nyx-compat-size-12p5px); color:var(--tx-dim); letter-spacing:var(--nyx-compat-tracking-p02em); line-height:1.4; }
.sim-code .ft{ font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; color:var(--nyx-compat-color-hex-6f649c); min-height:12px; }
.sim-code.st-new{ box-shadow:var(--nyx-compat-shadow-box-263bfbd2bc9c); }
.sim-code.st-redeemed{ opacity:.5; }
.sim-code.st-redeemed .cc{ text-decoration:line-through; text-decoration-color:var(--nyx-compat-color-3cfd69311e95); }
.sim-code.st-copied{ box-shadow:var(--nyx-compat-shadow-box-695f61c95907); }

/* ===== Nyx — redesigned All Banners ===== */
.sim-banhd{ display:flex; align-items:center; gap:var(--nyx-space-18); flex:none; margin-bottom:var(--nyx-space-18); padding-right:var(--nyx-space-14); }
.sim-regions{ display:flex; gap:var(--nyx-space-6); padding:var(--nyx-compat-spacing-5px); border-radius:var(--nyx-compat-radius-12px); background:var(--nyx-compat-color-aead58cc9609);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }
.sim-regions button{ border:none; cursor:pointer; height:34px; padding:0 var(--nyx-space-18); border-radius:var(--nyx-radius-control); background:none;
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-12p5px); letter-spacing:var(--nyx-compat-tracking-p12em); color:var(--nyx-color-text-muted); transition:color .2s, background .2s; }
.sim-regions button:hover{ color:var(--nyx-color-text-max); }
.sim-regions button.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-5a47a8)); box-shadow:var(--nyx-compat-shadow-box-2c6fa8497efb); }
.sim-resets{ margin-left:auto; display:flex; gap:var(--nyx-space-24); }
.sim-resets .rs{ display:flex; flex-direction:column; gap:var(--nyx-space-2); text-align:right; }
.sim-resets .k{ font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p18em); text-transform:uppercase; color:var(--nyx-color-text-faint); }
.sim-resets .v{ font-family:var(--nyx-compat-family-9b9664d814ba); font-size:var(--nyx-type-body); color:var(--nyx-color-heading); letter-spacing:var(--nyx-compat-tracking-p04em); }

/* Per-game banner groups reuse the codes-page group header + the shared
   gp-oban phase cards, so All Banners and game overviews look identical. */
.sim-bangroup{ min-width:0; flex:none; display:flex; flex-direction:column; gap:var(--nyx-space-10); }

/* ===== gacha pull tracker (overlay) ===== */
.gt-overlay{ position:absolute; inset:0; z-index:60; display:grid; place-items:center;
  background:var(--nyx-compat-color-b94175ee48ef); 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, var(--nyx-compat-color-186544704d71), var(--nyx-compat-color-8163da2e19f6));
  border-radius:var(--nyx-compat-radius-20px); box-shadow:var(--nyx-compat-shadow-box-d61c1b58a40d);
  padding:var(--nyx-space-24) var(--nyx-space-28) var(--nyx-compat-spacing-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:var(--nyx-space-14); 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:var(--nyx-font-display); font-size:var(--nyx-compat-size-25px); color:var(--nyx-compat-color-hex-f6f3ff); text-shadow:var(--nyx-compat-shadow-text-2c6fa8497efb); }
.gt-ttl .s{ font-size:var(--nyx-compat-size-12p5px); color:var(--nyx-color-text-muted); letter-spacing:var(--nyx-compat-tracking-p04em); margin-top:var(--nyx-compat-spacing-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:var(--nyx-compat-color-hex-cdc3f3); font-size:var(--nyx-type-body);
  background:var(--nyx-compat-color-aa039c2853d0); box-shadow:var(--nyx-compat-shadow-box-9957f5618992); transition:background .2s, color .2s; }
.gt-x:hover{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-ffc2d1),var(--nyx-compat-color-hex-d95577)); color:var(--nyx-compat-color-hex-2b0a14); }

/* import */
.gt-import{ margin-top:var(--nyx-compat-spacing-22px); }
.gt-steps{ list-style:none; display:flex; flex-direction:column; gap:var(--nyx-space-14); margin:0 0 var(--nyx-compat-spacing-22px); padding:0; }
.gt-steps li{ display:flex; align-items:flex-start; gap:var(--nyx-space-14); }
.gt-steps .n{ flex:none; width:30px; height:30px; border-radius:50%; display:grid; place-items:center;
  font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-15px); color:var(--nyx-color-surface); background:linear-gradient(160deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-9a89ea));
  box-shadow:var(--nyx-compat-shadow-box-8f773f638f85); }
.gt-steps li > div{ display:flex; flex-direction:column; gap:var(--nyx-space-2); }
.gt-steps b{ font-size:var(--nyx-compat-size-14p5px); color:var(--nyx-color-heading); font-weight:var(--nyx-weight-semibold); }
.gt-steps span{ font-size:var(--nyx-compat-size-12p5px); color:var(--nyx-color-text-muted); line-height:1.5; }
.gt-urlrow{ display:flex; gap:var(--nyx-space-12); }
.gt-urlrow input{ flex:1; min-width:0; height:46px; border:none; outline:none; border-radius:var(--nyx-compat-radius-12px); padding:0 var(--nyx-space-18);
  background:var(--nyx-compat-color-6b51c74ae902); color:var(--nyx-color-heading); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-13p5px); letter-spacing:var(--nyx-compat-tracking-p03em);
  box-shadow:var(--nyx-compat-shadow-box-9957f5618992); transition:box-shadow .25s; }
.gt-urlrow input:focus{ box-shadow:var(--nyx-compat-shadow-box-417ad2d5dfaf); }
.gt-urlrow input::placeholder{ color:var(--nyx-compat-color-hex-6f649c); }
.gt-go{ flex:none; min-width:120px; height:46px; border:none; cursor:pointer; border-radius:var(--nyx-compat-radius-12px);
  display:grid; place-items:center; font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-13px); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase;
  color:var(--nyx-compat-color-hex-100c26); background:linear-gradient(160deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-9a89ea)); box-shadow:var(--nyx-compat-shadow-box-2c6fa8497efb); 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 var(--nyx-compat-color-59123281010c); border-top-color:var(--nyx-compat-color-hex-100c26);
  animation:gtSpin .7s linear infinite; }
@keyframes gtSpin{ to{ transform:rotate(360deg); } }
.gt-method-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--nyx-space-10); margin:0 0 var(--nyx-space-14); }
.gt-method{ min-width:0; padding:var(--nyx-space-12) var(--nyx-compat-spacing-13px); border-radius:var(--nyx-compat-radius-12px); background:var(--nyx-compat-color-22a90b4eee25);
  box-shadow:var(--nyx-compat-shadow-box-c52604492861); }
.gt-method b{ display:block; color:var(--nyx-color-heading); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-12p5px); letter-spacing:var(--nyx-compat-tracking-p04em); margin-bottom:var(--nyx-space-4); }
.gt-method p{ margin:0 0 var(--nyx-space-8); color:var(--nyx-compat-color-hex-9f95c9); font-size:var(--nyx-type-small); line-height:1.45; }
.gt-method-action{ border:none; cursor:pointer; border-radius:var(--nyx-compat-radius-9px); min-height:34px; padding:0 var(--nyx-compat-spacing-13px);
  color:var(--nyx-compat-color-hex-100c26); background:linear-gradient(160deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-9a89ea)); font-family:var(--nyx-compat-family-ffc6cbbeca26);
  font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p11em); text-transform:uppercase; }
.gt-method-action:disabled{ opacity:.55; cursor:default; }
.gt-safe-links{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-8); margin-bottom:var(--nyx-space-8); }
.gt-safe-links a{ color:var(--nyx-compat-color-hex-cdb3ff); font-size:var(--nyx-type-small); }
/* pull-tracker: command box, errors, progress, banner sub-tabs */
.gt-cmd{ display:flex; align-items:flex-start; gap:var(--nyx-space-10); margin:var(--nyx-space-12) 0 var(--nyx-space-4); padding:var(--nyx-space-10) var(--nyx-space-12); border-radius:var(--nyx-compat-radius-12px);
  background:var(--nyx-compat-color-6b51c74ae902); box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a); }
.gt-cmd code{ flex:1; min-width:0; white-space:pre-wrap; word-break:break-all; overflow-wrap:anywhere; color:var(--nyx-compat-color-hex-cfc6ff);
  font-family:var(--nyx-compat-family-d8deb30497a9); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p02em); line-height:1.55; }
.gt-cmd button{ flex:none; border:none; cursor:pointer; border-radius:var(--nyx-radius-control); padding:var(--nyx-space-6) var(--nyx-space-12); color:var(--nyx-compat-color-hex-100c26);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-9a89ea)); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px);
  letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; transition:filter .2s; }
.gt-cmd button:hover{ filter:brightness(1.08); }
.gt-err{ margin-top:var(--nyx-space-10); padding:var(--nyx-compat-spacing-9px) var(--nyx-compat-spacing-13px); border-radius:var(--nyx-radius-card); color:var(--nyx-compat-color-hex-ffd9e2); font-family:var(--nyx-compat-family-ffc6cbbeca26);
  font-size:var(--nyx-compat-size-12p5px); background:var(--nyx-compat-color-bfab755fe223); box-shadow:var(--nyx-compat-shadow-box-e4faa1d3ca76); }

.gt-safe-note{ color:var(--nyx-compat-color-hex-b3a9e0); font-size:var(--nyx-type-small); line-height:1.5; margin-bottom:var(--nyx-space-8); }
.gt-sync{ margin-top:var(--nyx-space-10); padding:var(--nyx-space-12) var(--nyx-compat-spacing-13px); border-radius:var(--nyx-compat-radius-12px);
  background:var(--nyx-compat-color-ec8c0fbcf038); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }
.gt-sync > div:first-child{ display:flex; flex-direction:column; gap:var(--nyx-space-4); margin-bottom:var(--nyx-compat-spacing-9px); }
.gt-sync b{ color:var(--nyx-color-heading); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-12p5px); letter-spacing:var(--nyx-compat-tracking-p04em); }
.gt-sync span{ color:var(--nyx-compat-color-hex-9f95c9); font-size:var(--nyx-type-small); line-height:1.45; }
.gt-sync-row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:var(--nyx-space-8); align-items:center; }
.gt-sync-row input{ min-width:0; height:34px; border:none; border-radius:var(--nyx-compat-radius-9px); padding:0 var(--nyx-compat-spacing-11px);
  color:var(--nyx-compat-color-hex-f4efff); background:var(--nyx-compat-color-6b51c74ae902); box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small); }
.gt-sync-row button{ height:34px; border:none; border-radius:var(--nyx-compat-radius-9px); padding:0 var(--nyx-space-12); cursor:pointer;
  color:var(--nyx-compat-color-hex-100c26); background:linear-gradient(160deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-9a89ea)); font-family:var(--nyx-compat-family-ffc6cbbeca26);
  font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p11em); text-transform:uppercase; }
.gt-sync-row button:disabled{ opacity:.55; cursor:default; }
.gt-sync-warn{ color:var(--nyx-compat-color-hex-e6b98f) !important; font-size:var(--nyx-compat-size-11p5px) !important; line-height:1.45; }
.gt-sync-warn i{ color:var(--nyx-compat-color-hex-f3d8b6); font-style:italic; }
.gt-sync-delete{ margin-top:var(--nyx-compat-spacing-9px); height:30px; border:none; border-radius:var(--nyx-compat-radius-9px); padding:0 var(--nyx-space-12); cursor:pointer;
  background:var(--nyx-compat-color-527c7023646c); box-shadow:var(--nyx-compat-shadow-box-4019d10f6f28); color:var(--nyx-compat-color-hex-ffd9e2);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; transition:filter .2s; }
.gt-sync-delete:hover{ filter:brightness(1.12); }
.gt-sync-delete:disabled{ opacity:.5; cursor:default; }
.gt-sync-status{ margin:var(--nyx-space-8) 0 0; color:var(--nyx-compat-color-hex-cfc6ff); font-size:var(--nyx-type-small); line-height:1.4; }
.gt-sha{ margin-top:var(--nyx-space-6); color:var(--nyx-compat-color-hex-9a90c8); font-size:var(--nyx-compat-size-11px); word-break:break-all; }
.gt-sha code{ color:var(--nyx-color-accent-bright); font-family:var(--nyx-compat-family-d8deb30497a9); }
.gt-prog{ margin-top:var(--nyx-space-10); color:var(--nyx-compat-color-hex-b3a9e0); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-12p5px); letter-spacing:var(--nyx-compat-tracking-p03em); }
.gt-bannertabs{ display:flex; gap:var(--nyx-space-6); flex-wrap:wrap; margin-bottom:var(--nyx-space-12); }
.gt-bannertabs button{ padding:var(--nyx-compat-spacing-5px) var(--nyx-space-12); border-radius:var(--nyx-compat-radius-9px); cursor:pointer; font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small);
  letter-spacing:var(--nyx-compat-tracking-p03em); color:var(--nyx-compat-color-c1daff7da42a); background:var(--nyx-compat-color-986d4b8ffda6);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); transition:all .18s; }
.gt-bannertabs button:hover{ color:var(--nyx-color-heading); background:var(--nyx-compat-color-d726430d38da); }
.gt-bannertabs button.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-43dbc83a4315),var(--nyx-compat-color-32522062e201));
  box-shadow:var(--nyx-compat-shadow-box-225a64c2e759); }
.gt-bannertabs button span{ opacity:.55; margin-left:var(--nyx-space-6); }

/* results */
.gt-results{ margin-top:var(--nyx-space-20); display:flex; flex-direction:column; gap:var(--nyx-space-16); min-height:0; overflow-y:auto; padding-right:var(--nyx-space-6); }
.gt-results::-webkit-scrollbar{ width:6px; }
.gt-results::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-3px); }
.gt-pity{ display:flex; flex-direction:column; gap:var(--nyx-space-8); }
.gt-pity .lbl{ display:flex; align-items:center; gap:var(--nyx-space-12); font-size:var(--nyx-compat-size-13px); color:var(--nyx-color-text-soft); letter-spacing:var(--nyx-compat-tracking-p04em); }
.gt-pity .lbl b{ font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-18px); color:var(--nyx-compat-color-hex-f6f3ff); font-weight:var(--nyx-weight-regular); }
.gt-pity .lbl b i{ color:var(--nyx-color-text-faint); font-size:var(--nyx-type-body); font-style:normal; }
.gt-pity .gtag{ margin-left:auto; font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase; padding:var(--nyx-compat-spacing-3px) var(--nyx-compat-spacing-11px);
  border-radius:var(--nyx-compat-radius-20px); color:var(--nyx-compat-color-hex-f2eeff); background:linear-gradient(160deg, var(--nyx-compat-color-b477b9ac4e60), var(--nyx-compat-color-6f069793b713));
  box-shadow:var(--nyx-compat-shadow-box-225a64c2e759); }
.gt-pity .bar{ position:relative; height:9px; border-radius:var(--nyx-radius-small); background:var(--nyx-compat-color-9a593589b5e7); overflow:hidden; }
.gt-pity .bar i{ position:absolute; inset:0 auto 0 0; border-radius:var(--nyx-radius-small);
  background:linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow:var(--nyx-compat-shadow-box-4ff6bf766515); }
.gt-pity .bar .soft{ position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--nyx-compat-color-d4b56983fdf4);
  box-shadow:var(--nyx-compat-shadow-box-1b30341cf5c3); }
.gt-stats{ display:grid; grid-template-columns:repeat(6,1fr); gap:var(--nyx-space-12); }
.gt-stats .st{ background:linear-gradient(180deg, var(--nyx-compat-color-41b9ea4edbce), var(--nyx-compat-color-1e33b2b23972)); border-radius:var(--nyx-compat-radius-13px);
  padding:var(--nyx-space-14) var(--nyx-space-14) var(--nyx-space-12); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }
.gt-stats .st .v{ font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-25px); color:var(--nyx-compat-color-hex-f6f3ff); line-height:1; }
.gt-stats .st .v i{ font-size:var(--nyx-compat-size-15px); color:var(--nyx-compat-color-hex-9a8fce); font-style:normal; }
.gt-stats .st .k{ margin-top:var(--nyx-space-6); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p06em); color:var(--nyx-compat-color-hex-9a90c6); text-transform:uppercase; }
.gt-stats .st.five .v{ color:var(--nyx-compat-color-hex-dcd6ff); text-shadow:var(--nyx-compat-shadow-text-3c50f32aba5f); }
.gt-stats .st.four .v{ color:var(--nyx-compat-color-hex-cdb3ff); }
.gt-dist{ display:flex; gap:var(--nyx-compat-spacing-5px); height:32px; }
.gt-dist .seg{ position:relative; display:flex; align-items:center; justify-content:center; border-radius:var(--nyx-radius-control);
  font-size:var(--nyx-compat-size-11p5px); color:var(--nyx-color-text-max); min-width:64px; overflow:hidden; white-space:nowrap; }
.gt-dist .s5{ background:linear-gradient(90deg,var(--nyx-color-accent-bright),var(--nyx-color-accent)); color:var(--nyx-compat-color-hex-100b26); }
.gt-dist .s4{ background:linear-gradient(90deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-9a89ea)); }
.gt-dist .s3{ background:linear-gradient(90deg,var(--nyx-compat-color-hex-3a4a86),var(--nyx-compat-color-hex-54639e)); }
.gt-cols{ display:grid; grid-template-columns:1.25fr 1fr; gap:var(--nyx-space-16); }
.gt-fives, .gt-stream{ background:linear-gradient(180deg, var(--nyx-compat-color-86af42f3a4fb), var(--nyx-compat-color-142dcb757611)); border-radius:var(--nyx-radius-panel);
  padding:var(--nyx-space-14) var(--nyx-space-16); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); display:flex; flex-direction:column; min-height:0; }
.gt-fives .hd, .gt-stream .hd{ display:flex; align-items:center; gap:var(--nyx-space-8); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p12em);
  text-transform:uppercase; color:var(--nyx-compat-color-hex-b3a9e0); margin-bottom:var(--nyx-compat-spacing-11px); }
.gt-fives .hd span, .gt-stream .hd span{ margin-left:auto; color:var(--nyx-color-text-faint); letter-spacing:var(--nyx-compat-tracking-p04em); }
.gt-fives .lst{ display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-7px); max-height:230px; overflow-y:auto; padding-right:var(--nyx-space-6); }
.gt-fives .lst::-webkit-scrollbar{ width:5px; }
.gt-fives .lst::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-b5006c0d175e); border-radius:var(--nyx-compat-radius-3px); }
.gt-fives .row{ display:flex; align-items:center; gap:var(--nyx-space-10); padding:var(--nyx-space-8) var(--nyx-space-12); border-radius:var(--nyx-radius-card);
  background:linear-gradient(90deg, var(--nyx-compat-color-108ef61fc9ce), var(--nyx-compat-color-e89d7e9d33b1));
  box-shadow:var(--nyx-compat-shadow-box-c52604492861); }
.gt-fives .row .star{ color:var(--nyx-compat-color-hex-dcd6ff); font-size:var(--nyx-compat-size-13px); flex:none; }
.gt-fives .row .nm{ font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-15px); color:var(--nyx-compat-color-hex-f6f3ff); }
.gt-fives .row .fz{ margin-left:auto; font-size:var(--nyx-compat-size-11p5px); padding:var(--nyx-space-2) var(--nyx-compat-spacing-9px); border-radius:var(--nyx-compat-radius-20px); color:var(--nyx-color-text-soft);
  background:var(--nyx-compat-color-aa039c2853d0); box-shadow:var(--nyx-compat-shadow-box-e92aca61030e); }
.gt-fives .row .fz.hi{ color:var(--nyx-compat-color-hex-ff9db4); box-shadow:var(--nyx-compat-shadow-box-44d5828cdaac); }
.gt-fives .row .fz.lo{ color:var(--nyx-compat-color-hex-9be8b6); box-shadow:var(--nyx-compat-shadow-box-47735992c849); }
.gt-fives .row .res{ flex:none; font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p04em); padding:var(--nyx-space-2) var(--nyx-compat-spacing-9px); border-radius:var(--nyx-compat-radius-20px); }
.gt-fives .row .res.win{ color:var(--nyx-compat-color-hex-9be8b6); background:var(--nyx-compat-color-533660e2c833); box-shadow:var(--nyx-compat-shadow-box-b4254e460bbf); }
.gt-fives .row .res.lose{ color:var(--nyx-compat-color-hex-ff9db4); background:var(--nyx-compat-color-b985fb202bf2); box-shadow:var(--nyx-compat-shadow-box-77f5268e5c57); }
.gt-fives .row .res.gtd{ color:var(--nyx-compat-color-hex-cdb3ff); background:var(--nyx-compat-color-07a3b08f278b); box-shadow:var(--nyx-compat-shadow-box-f8bdfc09bbda); }
.gt-stream .pips{ display:grid; grid-template-columns:repeat(10, 1fr); gap:var(--nyx-space-6); align-content:start; }
.gt-stream .pip{ aspect-ratio:1; border-radius:var(--nyx-radius-small); background:var(--nyx-compat-color-hex-3a4a86); box-shadow:var(--nyx-compat-shadow-box-0717c1de53c3); }
.gt-stream .pip.r4{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-9a89ea),var(--nyx-compat-color-hex-6f57bf)); }
.gt-stream .pip.r5{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-dcd6ff),var(--nyx-color-accent)); box-shadow:var(--nyx-compat-shadow-box-fb3f7a153faa); }
.gt-reset{ margin-top:auto; align-self:flex-start; border:none; cursor:pointer; margin-top:var(--nyx-space-14);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11p5px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; color:var(--nyx-compat-color-hex-b3a9e0);
  background:var(--nyx-compat-color-57309fd27e19); padding:var(--nyx-compat-spacing-9px) var(--nyx-space-16); border-radius:var(--nyx-radius-card); box-shadow:var(--nyx-compat-shadow-box-e92aca61030e);
  transition:color .2s, background .2s; }
.gt-reset:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-636883c5200f); }

/* Gacha tracker: full results dashboard */
.gt-panel{ width:1180px; max-height:86%; }
.gt-results{ --gt-gold:var(--nyx-color-accent-bright); --gt-gold-soft:var(--nyx-compat-color-b6ceb79dc76c); --gt-teal:var(--nyx-compat-color-hex-70d6b1); --gt-rose:var(--nyx-compat-color-hex-ea7894);
  margin-top:var(--nyx-space-18); display:flex; flex-direction:column; gap:var(--nyx-space-14); min-height:0; overflow-y:auto; padding:0 var(--nyx-space-8) var(--nyx-space-4) 0; }
.gt-results-top{ display:flex; align-items:center; gap:var(--nyx-space-10); flex:none; min-width:0; }
.gt-import-tab{ flex:none; height:36px; border:0; cursor:pointer; border-radius:var(--nyx-compat-radius-9px); padding:0 var(--nyx-space-16);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); font-weight:var(--nyx-weight-extrabold); letter-spacing:var(--nyx-compat-tracking-p13em); text-transform:uppercase;
  color:var(--nyx-compat-color-hex-130e2b); background:linear-gradient(160deg,var(--nyx-compat-color-hex-e6dcff),var(--nyx-compat-color-hex-9d88ff) 68%,var(--nyx-compat-color-hex-7c61df));
  box-shadow:var(--nyx-compat-shadow-box-911398df8177); }
.gt-import-tab:hover{ filter:brightness(1.07); }
.gt-results .gt-bannertabs{ flex:1; min-width:0; display:flex; gap:var(--nyx-space-6); flex-wrap:nowrap; margin:0; overflow-x:auto; padding:var(--nyx-space-2); }
.gt-results .gt-bannertabs::-webkit-scrollbar{ height:4px; }
.gt-results .gt-bannertabs::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-67a410e0be0b); border-radius:var(--nyx-compat-radius-3px); }
.gt-results .gt-bannertabs button{ flex:0 0 auto; min-width:112px; height:36px; display:flex; align-items:center; justify-content:space-between; gap:var(--nyx-space-10);
  padding:0 var(--nyx-compat-spacing-11px); border:0; border-radius:var(--nyx-compat-radius-9px); cursor:pointer; color:var(--nyx-compat-color-hex-9b91c4); background:var(--nyx-compat-color-77d3b11dce03);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p05em); }
.gt-results .gt-bannertabs button:hover{ color:var(--nyx-color-heading); background:var(--nyx-compat-color-ac1e946fec49); }
.gt-results .gt-bannertabs button.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-ac224e726de0),var(--nyx-compat-color-f5379b34371a));
  box-shadow:var(--nyx-compat-shadow-box-ad132650d241); }
.gt-tab-name{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.gt-results .gt-bannertabs button span:last-child{ margin:0; opacity:.62; color:var(--nyx-compat-color-hex-d8cef8); }
.gt-uid{ flex:none; color:var(--nyx-compat-color-hex-8d83b4); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; }

.gt-dashboard{ display:grid; grid-template-columns:minmax(0, 1fr) 324px; gap:var(--nyx-space-14); flex:none; }
.gt-banner-stage{ position:relative; min-height:218px; display:grid; grid-template-columns:220px minmax(0, 1fr); gap:var(--nyx-space-14); overflow:hidden;
  border-radius:var(--nyx-radius-panel); padding:var(--nyx-space-14); background:
    radial-gradient(100% 120% at 22% 0%, var(--nyx-compat-color-68d6e89e553d), transparent 46%),
    linear-gradient(150deg, var(--nyx-compat-color-4c583a824e26), var(--nyx-compat-color-1e3cb37fcece));
  box-shadow:var(--nyx-compat-shadow-box-704d2f11207f); }
.gt-banner-stage::after{ content:""; position:absolute; inset:auto 12px 10px 12px; height:1px;
  background:linear-gradient(90deg, transparent, var(--nyx-compat-color-9c5aee3172a6), transparent); opacity:.55; }
.gt-stage-copy{ position:relative; z-index:2; min-width:0; display:flex; flex-direction:column; justify-content:flex-end; gap:var(--nyx-compat-spacing-5px); }
.gt-stage-copy span{ color:var(--gt-gold); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p18em); text-transform:uppercase; }
.gt-stage-copy b{ color:var(--nyx-compat-color-hex-f8f6ff); font-family:var(--nyx-font-display); font-size:var(--nyx-type-title); line-height:1.02; font-weight:var(--nyx-weight-regular); text-shadow:var(--nyx-compat-shadow-text-84629f94326a); }
.gt-stage-copy i{ color:var(--nyx-compat-color-hex-b7accf); font-style:normal; font-size:var(--nyx-type-small); line-height:1.4; }
.gt-feature-grid{ position:relative; z-index:1; min-width:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--nyx-space-10); }
.gt-feature-card{ position:relative; overflow:hidden; min-height:188px; border-radius:var(--nyx-compat-radius-11px); background:
  radial-gradient(circle at 50% 25%, var(--nyx-compat-color-69537ac6dc80), var(--nyx-compat-color-4869048bc435) 70%);
  background-size:cover; background-position:center 18%; box-shadow:var(--nyx-compat-shadow-box-ff8259f56eb8); }
.gt-feature-card.empty{ display:grid; place-items:end start; background:var(--nyx-compat-color-e76bdc5191d0); }
.gt-feature-fade{ position:absolute; inset:0; background:
  linear-gradient(180deg, var(--nyx-compat-color-7e41e999a6a7) 26%, var(--nyx-compat-color-9ab69cf710a0) 100%),
  radial-gradient(80% 70% at 50% 14%, transparent, var(--nyx-compat-color-b9605db5ae9b)); }
.gt-feature-name{ position:absolute; left:12px; right:12px; bottom:10px; z-index:2; display:flex; align-items:end; justify-content:space-between; gap:var(--nyx-space-10); }
.gt-feature-name b{ min-width:0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); line-height:1; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-feature-name span{ flex:none; color:var(--nyx-compat-color-hex-dcd6ff); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; }
.gt-rateups{ position:absolute; left:14px; right:14px; top:14px; z-index:4; display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px); flex-wrap:wrap; }
.gt-rateups span{ color:var(--nyx-compat-color-hex-a99ed0); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p13em); text-transform:uppercase; }
.gt-rateups b{ color:var(--nyx-compat-color-hex-100b26); background:linear-gradient(160deg,var(--nyx-compat-color-hex-f5f0ff),var(--nyx-color-accent-bright)); border-radius:var(--nyx-radius-pill); padding:var(--nyx-compat-spacing-3px) var(--nyx-space-8); font-size:var(--nyx-compat-size-10p5px); font-weight:var(--nyx-weight-extrabold); }

.gt-source-grid{ position:relative; z-index:2; min-width:0; display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--nyx-space-10); }
.gt-source-card{ position:relative; overflow:hidden; min-width:0; display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-9px); min-height:92px; border-radius:var(--nyx-compat-radius-11px); padding:var(--nyx-space-10);
  background:linear-gradient(160deg, var(--nyx-compat-color-bc18cad93d2b), var(--nyx-compat-color-c38fd79529f1));
  background-size:cover; background-position:86% 28%;
  box-shadow:var(--nyx-compat-shadow-box-f799943f7f8c); }
.gt-source-card.has-art{ background-blend-mode:normal; }
.gt-source-art{ position:absolute; inset:0; background:
  linear-gradient(90deg, var(--nyx-compat-color-8b6efd581b3d) 0%, var(--nyx-compat-color-1799d040b2a3) 52%, var(--nyx-compat-color-6c08e8dfbf2e) 100%),
  radial-gradient(70% 90% at 88% 30%, transparent, var(--nyx-compat-color-5faae3cc9866));
  pointer-events:none; }
.gt-source-card > *:not(.gt-source-art){ position:relative; z-index:1; }
.gt-source-card.empty{ justify-content:center; }
.gt-source-title{ display:flex; align-items:start; gap:var(--nyx-space-10); min-width:0; }
.gt-source-title b{ min-width:0; flex:1; color:var(--nyx-compat-color-hex-f8f6ff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-17px); line-height:1.05; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-source-title span{ flex:none; color:var(--nyx-compat-color-hex-8f84b7); font-size:var(--nyx-type-label); white-space:nowrap; }
.gt-source-stats{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--nyx-space-6); }
.gt-source-stats div{ min-width:0; border-radius:var(--nyx-radius-control); padding:var(--nyx-space-6) var(--nyx-compat-spacing-7px); background:var(--nyx-compat-color-effe0b93d0ef); box-shadow:var(--nyx-compat-shadow-box-afdee69de954); }
.gt-source-stats b{ display:block; color:var(--nyx-compat-color-hex-dcd6ff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-18px); line-height:1; font-weight:var(--nyx-weight-regular); }
.gt-source-stats span{ display:block; margin-top:var(--nyx-compat-spacing-3px); color:var(--nyx-compat-color-hex-8f84b7); font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-source-icons, .gt-mini-pulls{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-5px); min-width:0; }
.gt-source-icons span, .gt-mini-pulls span{ flex:none; width:28px; height:28px; border-radius:50%; display:grid; place-items:center;
  background:var(--nyx-compat-color-a4a1f04d7ca4); box-shadow:var(--nyx-compat-shadow-box-c52604492861); overflow:hidden; }
.gt-source-icons span.r5, .gt-mini-pulls span.r5{ background:var(--nyx-compat-color-e1b276e64ad6); box-shadow:var(--nyx-compat-shadow-box-3939bb8324d0); }
.gt-source-icons img, .gt-mini-pulls img{ width:100%; height:100%; object-fit:cover; }
.gt-source-icons i, .gt-mini-pulls em{ color:var(--nyx-compat-color-hex-d8cef8); font-style:normal; font-size:var(--nyx-type-caption); }
.gt-source-icons em{ color:var(--nyx-compat-color-hex-8f84b7); font-style:normal; font-size:var(--nyx-compat-size-10p5px); }

.gt-state-stack{ display:grid; grid-template-rows:1.04fr 1fr .78fr; gap:var(--nyx-space-10); min-width:0; }
.gt-state-card{ min-width:0; border-radius:var(--nyx-compat-radius-13px); padding:var(--nyx-compat-spacing-13px) var(--nyx-space-14); display:flex; flex-direction:column; justify-content:center; gap:var(--nyx-compat-spacing-5px);
  background:linear-gradient(180deg, var(--nyx-compat-color-ba7c8b7fc870), var(--nyx-compat-color-c83d3c48ce19));
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }
.gt-state-card.primary{ background:linear-gradient(155deg, var(--nyx-compat-color-19d57efffeb5), var(--nyx-compat-color-6ca795c229c9)); box-shadow:var(--nyx-compat-shadow-box-013bbdd1a33e); }
.gt-state-card.last-banner{ justify-content:flex-start; }
.gt-state-card span{ color:var(--nyx-compat-color-hex-a99ed0); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase; }
.gt-state-card b{ color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-28px); line-height:1; font-weight:var(--nyx-weight-regular); }
.gt-state-card b em{ color:var(--nyx-compat-color-hex-9f93cb); font-style:normal; font-size:var(--nyx-type-body); margin-left:var(--nyx-space-4); }
.gt-state-card i{ color:var(--nyx-compat-color-hex-c8bee8); font-style:normal; font-size:var(--nyx-type-small); line-height:1.3; }
.gt-state-card.guarantee.on b{ color:var(--nyx-compat-color-hex-dcd6ff); text-shadow:var(--nyx-compat-shadow-text-d5d76ebaaa7b); }
.gt-state-line{ display:flex; align-items:center; justify-content:space-between; gap:var(--nyx-space-8); min-width:0; }
.gt-guarantee-pill{ flex:none; border-radius:var(--nyx-radius-pill); padding:var(--nyx-compat-spacing-3px) var(--nyx-compat-spacing-7px); color:var(--nyx-compat-color-hex-a99ed0); background:var(--nyx-compat-color-8caa693a1d6f);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); font-style:normal; font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }
.gt-guarantee-pill.on{ color:var(--nyx-compat-color-hex-100b26); background:linear-gradient(160deg,var(--nyx-compat-color-hex-f5f0ff),var(--nyx-color-accent-bright)); box-shadow:var(--nyx-compat-shadow-box-87b84d07b3f7); }
.gt-mini-pulls{ margin-top:var(--nyx-compat-spacing-3px); overflow:hidden; }
.gt-mini-pulls span{ width:27px; height:27px; }
.gt-mini-bar{ position:relative; height:7px; overflow:hidden; border-radius:var(--nyx-radius-pill); background:var(--nyx-compat-color-4da99af578c2); }
.gt-mini-bar i{ position:absolute; inset:0 auto 0 0; border-radius:var(--nyx-radius-pill); background:linear-gradient(90deg,var(--nyx-color-accent),var(--nyx-compat-color-hex-9db5ff)); }
.gt-mini-bar mark{ position:absolute; top:-2px; bottom:-2px; width:2px; padding:0; background:var(--nyx-compat-color-hex-dcd6ff); box-shadow:var(--nyx-compat-shadow-box-1b30341cf5c3); }

.gt-stat-strip{ display:grid; grid-template-columns:repeat(6, minmax(0, 1fr)); gap:var(--nyx-space-8); flex:none; }
.gt-stat-strip div{ min-width:0; border-radius:var(--nyx-radius-card); padding:var(--nyx-space-10) var(--nyx-compat-spacing-11px); background:var(--nyx-compat-color-00d5ec67aaea); box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); }
.gt-stat-strip b{ display:block; color:var(--nyx-compat-color-hex-f7f3ff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-21px); line-height:1; font-weight:var(--nyx-weight-regular); }
.gt-stat-strip span{ display:block; margin-top:var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-9186b8); font-size:var(--nyx-compat-size-9p8px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.gt-main-grid{ display:grid; grid-template-columns:minmax(330px, 1.05fr) minmax(330px, .95fr) minmax(260px, .72fr);
  grid-template-areas:"recent shape weapon" "archive archive totals" "history history history"; gap:var(--nyx-space-14); min-height:0; }
.gt-panel-box{ min-width:0; border-radius:var(--nyx-compat-radius-13px); padding:var(--nyx-compat-spacing-13px); background:linear-gradient(180deg, var(--nyx-compat-color-5c014dd27e45), var(--nyx-compat-color-9886de4d7745));
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); }
.gt-recent-fives, .gt-last-banner-pulls{ grid-area:recent; }
.gt-pity-shape{ grid-area:shape; }
.gt-side-banner{ grid-area:weapon; }
.gt-archive{ grid-area:archive; }
.gt-all-characters{ grid-area:totals; }
.gt-history{ grid-area:history; }
.gt-box-head{ display:flex; align-items:center; gap:var(--nyx-space-10); margin-bottom:var(--nyx-space-10); }
.gt-box-head b{ min-width:0; color:var(--nyx-color-heading); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small); font-weight:var(--nyx-weight-extrabold); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.gt-box-head span{ margin-left:auto; flex:none; color:var(--nyx-compat-color-hex-8f84b7); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }

.gt-five-compact{ display:grid; grid-template-columns:repeat(5, minmax(0, 1fr)); gap:var(--nyx-compat-spacing-7px); }
.gt-five-chip{ min-width:0; display:grid; grid-template-columns:30px minmax(0, 1fr); grid-template-rows:auto auto auto; gap:var(--nyx-space-2) var(--nyx-space-8);
  align-items:center; padding:var(--nyx-compat-spacing-7px); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-6eda07d8a498); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }
.gt-five-chip img, .gt-img-fallback{ grid-row:1 / span 3; width:30px; height:30px; border-radius:50%; object-fit:cover; background:linear-gradient(135deg,var(--nyx-compat-color-hex-c7b8ff),var(--nyx-compat-color-hex-51408e)); box-shadow:var(--nyx-compat-shadow-box-a7852ca42e33); }
.gt-five-chip b{ min-width:0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-weight:var(--nyx-weight-regular); font-size:var(--nyx-type-body); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-five-chip i{ color:var(--nyx-compat-color-hex-9489ba); font-style:normal; font-size:var(--nyx-compat-size-10p5px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-five-chip em{ justify-self:start; color:var(--nyx-compat-color-hex-cdb3ff); font-style:normal; font-size:var(--nyx-type-label); border-radius:var(--nyx-radius-pill); padding:var(--nyx-compat-spacing-1px) var(--nyx-compat-spacing-7px); background:var(--nyx-compat-color-c2b0ed1f9dca); }
.gt-five-chip em.win{ color:var(--nyx-compat-color-hex-9de7c3); background:var(--nyx-compat-color-c316e211a6e7); }
.gt-five-chip em.lose{ color:var(--nyx-compat-color-hex-ff9db4); background:var(--nyx-compat-color-a4a198c1d075); }

.gt-banner-pull-list{ display:grid; grid-template-columns:1fr; gap:var(--nyx-compat-spacing-7px); }
.gt-banner-pull{ min-width:0; display:grid; grid-template-columns:34px minmax(0, 1fr) 44px 80px; align-items:center; gap:var(--nyx-space-8);
  min-height:42px; padding:var(--nyx-compat-spacing-5px) var(--nyx-space-8); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-3a4e78455075); box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448); }
.gt-banner-pull.r5{ background:linear-gradient(135deg, var(--nyx-compat-color-c2b0ed1f9dca), var(--nyx-compat-color-00d5ec67aaea)); box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a); }
.gt-banner-pull img, .gt-banner-pull .gt-img-fallback{ width:34px; height:34px; border-radius:50%; object-fit:cover; }
.gt-banner-pull b{ min-width:0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-weight:var(--nyx-weight-regular); font-size:var(--nyx-compat-size-15px); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-banner-pull span{ color:var(--nyx-compat-color-hex-dcd6ff); font-size:var(--nyx-compat-size-11px); }
.gt-banner-pull i{ color:var(--nyx-compat-color-hex-8074a6); font-style:normal; font-size:var(--nyx-type-label); text-align:right; white-space:nowrap; }

.gt-pity-rail{ position:relative; height:34px; margin:var(--nyx-space-2) var(--nyx-compat-spacing-5px) var(--nyx-space-12); border-radius:var(--nyx-radius-pill); background:
  linear-gradient(90deg, var(--nyx-compat-color-df81bdcd3d3b), var(--nyx-compat-color-5f4cd78a5abc) 78%, var(--nyx-compat-color-68d6e89e553d));
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); }
.gt-pity-rail::before, .gt-pity-rail::after{ content:""; position:absolute; top:7px; bottom:7px; width:1px; background:var(--nyx-compat-color-82e16a994350); }
.gt-pity-rail::before{ left:33.33%; } .gt-pity-rail::after{ left:66.66%; }
.gt-soft-line{ position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--nyx-compat-color-hex-dcd6ff); box-shadow:var(--nyx-compat-shadow-box-41d9e620d635); }
.gt-pity-rail > i{ position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--nyx-compat-color-hex-cdb3ff); box-shadow:var(--nyx-compat-shadow-box-90043a94a99c); }
.gt-pity-rail > i.soft{ background:var(--nyx-color-accent-bright); }
.gt-pity-rail > i.win{ background:var(--gt-teal); }
.gt-pity-rail > i.lose{ background:var(--gt-rose); }
.gt-pity-bands{ display:grid; grid-template-columns:repeat(4, minmax(0, 1fr)); gap:var(--nyx-compat-spacing-7px); }
.gt-pity-band{ position:relative; overflow:hidden; min-width:0; min-height:54px; border-radius:var(--nyx-compat-radius-9px); padding:var(--nyx-space-8) var(--nyx-compat-spacing-9px); background:var(--nyx-compat-color-5bf68f80e695); box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58); }
.gt-pity-band mark{ position:absolute; left:0; bottom:0; height:3px; padding:0; background:linear-gradient(90deg,var(--nyx-compat-color-hex-7f6ae7),var(--nyx-compat-color-hex-9db5ff)); }
.gt-pity-band span{ display:block; color:var(--nyx-compat-color-hex-b8addb); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; }
.gt-pity-band b{ display:block; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-20px); line-height:1.05; font-weight:var(--nyx-weight-regular); margin-top:var(--nyx-compat-spacing-3px); }
.gt-pity-band i{ color:var(--nyx-compat-color-hex-8579aa); font-style:normal; font-size:var(--nyx-type-label); }

.gt-weapon-summary{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--nyx-compat-spacing-7px); }
.gt-weapon-summary div{ min-width:0; padding:var(--nyx-compat-spacing-9px); border-radius:var(--nyx-compat-radius-9px); background:var(--nyx-compat-color-5bf68f80e695); box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58); }
.gt-weapon-summary b{ display:block; color:var(--nyx-compat-color-hex-dcd6ff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-20px); line-height:1; font-weight:var(--nyx-weight-regular); }
.gt-weapon-summary b em{ color:var(--nyx-compat-color-hex-9f93cb); font-style:normal; font-size:var(--nyx-type-small); }
.gt-weapon-summary span{ display:block; margin-top:var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-8f84b7); font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }
.gt-weapon-list{ display:flex; flex-direction:column; gap:var(--nyx-space-6); margin-top:var(--nyx-space-10); }
.gt-weapon-list div{ display:grid; grid-template-columns:26px minmax(0, 1fr) auto; align-items:center; gap:var(--nyx-space-8); min-height:32px; padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px); border-radius:var(--nyx-compat-radius-9px); background:var(--nyx-compat-color-6eda07d8a498); }
.gt-weapon-list img{ width:26px; height:26px; object-fit:contain; }
.gt-weapon-list span{ min-width:0; color:var(--nyx-compat-color-hex-e9e2fb); font-size:var(--nyx-compat-size-11p5px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-weapon-list b{ color:var(--nyx-compat-color-hex-dcd6ff); font-size:var(--nyx-compat-size-10p5px); }

.gt-archive-tools{ display:flex; align-items:center; gap:var(--nyx-space-8); margin-bottom:var(--nyx-space-10); }
.gt-archive-tools select{ height:31px; border:0; border-radius:var(--nyx-radius-control); padding:0 var(--nyx-space-28) 0 var(--nyx-space-10); color:var(--nyx-compat-color-hex-ddd5ff); background:var(--nyx-compat-color-f7a53cf66f9a);
  box-shadow:var(--nyx-compat-shadow-box-c52604492861); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); }
.gt-filter-pills{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-5px); flex-wrap:wrap; }
.gt-filter-pills button{ height:29px; border:0; border-radius:var(--nyx-radius-control); padding:0 var(--nyx-space-10); cursor:pointer; color:var(--nyx-compat-color-hex-958abd); background:var(--nyx-compat-color-986d4b8ffda6);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }
.gt-filter-pills button:hover{ color:var(--nyx-color-text-max); }
.gt-filter-pills button.on{ color:var(--nyx-compat-color-hex-170f2e); background:linear-gradient(160deg,var(--nyx-compat-color-hex-e5dcff),var(--nyx-compat-color-hex-9a89ea)); }
.gt-archive-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:var(--nyx-space-8); max-height:238px; overflow:auto; padding-right:var(--nyx-space-4); }
.gt-archive-grid::-webkit-scrollbar, .gt-history-table::-webkit-scrollbar{ width:5px; }
.gt-archive-grid::-webkit-scrollbar-thumb, .gt-history-table::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-da6c8279a378); border-radius:var(--nyx-compat-radius-3px); }
.gt-archive-card{ min-width:0; position:relative; display:grid; grid-template-columns:36px minmax(0, 1fr); grid-template-rows:auto auto; gap:var(--nyx-space-2) var(--nyx-space-8);
  align-items:center; padding:var(--nyx-compat-spacing-7px); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-a4d009856c01); box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58); }
.gt-archive-card.r5{ background:linear-gradient(135deg, var(--nyx-compat-color-c2b0ed1f9dca), var(--nyx-compat-color-a4d009856c01)); box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a); }
.gt-archive-card img{ grid-row:1 / span 2; width:36px; height:36px; border-radius:50%; object-fit:cover; }
.gt-archive-card b{ min-width:0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-type-body); line-height:1; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-archive-card i{ color:var(--nyx-compat-color-hex-dcd6ff); font-style:normal; font-size:var(--nyx-compat-size-11px); }
.gt-archive-card em{ position:absolute; right:6px; bottom:5px; color:var(--nyx-compat-color-hex-8f84b7); font-style:normal; font-size:var(--nyx-type-caption); }

.gt-total-strip{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--nyx-compat-spacing-7px); }
.gt-total-unit{ min-width:0; position:relative; display:grid; grid-template-columns:30px minmax(0, 1fr) auto; align-items:center; gap:var(--nyx-compat-spacing-7px);
  min-height:42px; padding:var(--nyx-space-6) var(--nyx-compat-spacing-7px); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-00d5ec67aaea); box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58); }
.gt-total-unit img{ width:30px; height:30px; border-radius:50%; object-fit:cover; }
.gt-total-unit b{ min-width:0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-13px); line-height:1; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-total-unit i{ color:var(--nyx-compat-color-hex-dcd6ff); font-style:normal; font-size:var(--nyx-compat-size-10p5px); }
.gt-total-unit em{ position:absolute; right:7px; bottom:4px; color:var(--nyx-compat-color-hex-8073a4); font-style:normal; font-size:var(--nyx-type-caption); }

.gt-filter-pills.history{ margin:var(--nyx-compat-spacing-neg-2px) 0 var(--nyx-compat-spacing-9px); }
.gt-history-table{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--nyx-space-6) var(--nyx-space-8); max-height:210px; overflow:auto; padding-right:var(--nyx-space-4); }
.gt-history-row{ min-width:0; display:grid; grid-template-columns:26px minmax(0, 1fr) 38px 46px 72px; align-items:center; gap:var(--nyx-compat-spacing-7px);
  min-height:34px; padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px); border-radius:var(--nyx-compat-radius-9px); background:var(--nyx-compat-color-3a4e78455075); box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448); }
.gt-history-row.r5{ background:var(--nyx-compat-color-8bd71a949d4f); box-shadow:var(--nyx-compat-shadow-box-c52604492861); }
.gt-history-row img{ width:26px; height:26px; border-radius:50%; object-fit:cover; }
.gt-history-row b{ min-width:0; color:var(--nyx-color-heading); font-family:var(--nyx-font-display); font-weight:var(--nyx-weight-regular); font-size:var(--nyx-compat-size-13px); line-height:1; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-history-row span{ color:var(--nyx-color-text-soft); font-size:var(--nyx-compat-size-10p5px); }
.gt-history-row span:nth-of-type(1){ color:var(--nyx-compat-color-hex-dcd6ff); }
.gt-history-row i{ color:var(--nyx-compat-color-hex-8074a6); font-style:normal; font-size:var(--nyx-type-label); text-align:right; white-space:nowrap; }
.gt-empty-row{ color:var(--nyx-compat-color-hex-8f84b7); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small); padding:var(--nyx-compat-spacing-9px); }

@media (max-width: 1280px){
  .gt-dashboard{ grid-template-columns:1fr; }
  .gt-state-stack{ grid-template-columns:repeat(3, minmax(0, 1fr)); grid-template-rows:auto; }
  .gt-main-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"recent shape" "weapon totals" "archive archive" "history history"; }
  .gt-five-compact{ grid-template-columns:repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 760px){
  .gt-banner-stage{ grid-template-columns:1fr; }
  .gt-feature-grid, .gt-source-grid, .gt-state-stack, .gt-stat-strip, .gt-main-grid, .gt-history-table{ grid-template-columns:1fr; }
  .gt-main-grid{ grid-template-areas:"recent" "shape" "weapon" "archive" "totals" "history"; }
  .gt-five-compact{ grid-template-columns:1fr; }
}

/* Gacha tracker: compact Nyx ledger */
.gt-panel{ min-height:0; }
.gt-results{ flex:1 1 auto; }
.gt-mode-tabs{ flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:var(--nyx-space-6); padding:var(--nyx-compat-spacing-3px); border-radius:var(--nyx-radius-card);
  background:var(--nyx-compat-color-e364f3f72dd7); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); }
.gt-mode-tabs button{ flex:0 0 auto; min-width:116px; height:31px; border:0; border-radius:var(--nyx-compat-radius-7px); cursor:pointer;
  color:var(--nyx-color-text-muted); background:transparent; font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-10p5px); font-weight:var(--nyx-weight-extrabold);
  letter-spacing:var(--nyx-compat-tracking-p13em); text-transform:uppercase; }
.gt-mode-tabs button:hover{ color:var(--nyx-compat-color-hex-f3eeff); background:var(--nyx-compat-color-108ef61fc9ce); }
.gt-mode-tabs button.on{ color:var(--nyx-compat-color-hex-160f2e); background:linear-gradient(160deg,var(--nyx-compat-color-hex-eee8ff),var(--nyx-compat-color-hex-9c8cff) 72%,var(--nyx-compat-color-hex-755cdb));
  box-shadow:var(--nyx-compat-shadow-box-8952fe5e7c86); }
.gt-stat-strip.compact{ grid-template-columns:1.05fr 1.05fr .78fr .9fr .84fr .84fr; }
.gt-stat-strip.compact b{ font-size:var(--nyx-compat-size-19px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-stat-strip.compact span{ font-size:var(--nyx-compat-size-9p4px); letter-spacing:var(--nyx-compat-tracking-p08em); }

.gt-overview-grid{ display:grid; grid-template-columns:minmax(230px,.72fr) minmax(390px,1.16fr) minmax(360px,1fr);
  grid-template-areas:"ledger limited recent" "history history recent" "pity pity pity"; gap:var(--nyx-space-14); min-height:0; }
.gt-ledger-card{ grid-area:ledger; }
.gt-current-limited{ grid-area:limited; }
.gt-recent-pulls{ grid-area:recent; }
.gt-banner-history{ grid-area:history; }

/* Batch 14 — per-game banner timeline */
.ntl{ min-width:0; padding:var(--nyx-space-20); color:var(--nyx-compat-color-hex-eae4ff); }
/* Hub Timeline page — one tab per game above the shared per-game timeline. */
.ntl-gamepage{ display:flex; flex-direction:column; min-width:0; }
.ntl-gametabs{ display:flex; gap:var(--nyx-space-6); flex-wrap:wrap; padding:var(--nyx-space-20) var(--nyx-space-20) 0; }
.ntl-gametab{ display:inline-flex; align-items:center; gap:var(--nyx-space-8); min-height:38px; padding:0 var(--nyx-space-14);
  border:1px solid var(--nyx-compat-color-97cd05e0c6e8); border-radius:var(--nyx-radius-pill);
  background:var(--nyx-compat-color-29324858ffe0); color:var(--nyx-compat-color-hex-e9e2ff);
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p05em);
  cursor:pointer; transition:background .14s,border-color .14s,color .14s; }
.ntl-gametab img{ width:22px; height:22px; border-radius:50%; object-fit:cover; flex:none;
  box-shadow:var(--nyx-compat-shadow-box-940bdb001abd); }
.ntl-gametab:hover{ background:var(--nyx-compat-color-ef146d2930c5); border-color:var(--nyx-compat-color-d489b77ef351); }
.ntl-gametab:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d9ceff); outline-offset:2px; }
.ntl-gametab.on{ color:var(--nyx-color-text-max); border-color:var(--nyx-compat-color-d489b77ef351);
  background:linear-gradient(160deg,var(--nyx-compat-color-43dbc83a4315),var(--nyx-compat-color-32522062e201)); }
.ntl-gamepanel{ min-width:0; }
@media (max-width:760px){
  .ntl-gametabs{ flex-wrap:nowrap; overflow-x:auto; padding:var(--nyx-space-12) var(--nyx-space-12) 0; }
  .ntl-gametab{ flex:0 0 auto; }
}
.ntl-head{ display:flex; justify-content:space-between; gap:var(--nyx-space-18); align-items:end; margin-bottom:var(--nyx-space-14); }.ntl-head h1{ margin:var(--nyx-space-2) 0 0; font:var(--nyx-compat-font-f57bca9c3191); }.ntl-updated{ color:var(--nyx-compat-color-hex-9f95bf); font-size:var(--nyx-compat-size-11px); }
.ntl-tools,.ntl-marker-form{ display:flex; gap:var(--nyx-compat-spacing-7px); align-items:end; flex-wrap:wrap; margin-bottom:var(--nyx-space-12); }.ntl-tools button,.ntl-marker-form button,.ntl-results button{ display:inline-flex; align-items:center; min-height:34px; border:1px solid var(--nyx-compat-color-97cd05e0c6e8); border-radius:var(--nyx-radius-control); background:var(--nyx-compat-color-29324858ffe0); color:var(--nyx-compat-color-hex-e9e2ff); padding:0 var(--nyx-space-12); font-size:var(--nyx-compat-size-12p5px); cursor:pointer; transition:background .14s,border-color .14s; }.ntl-tools button:hover,.ntl-marker-form button:hover{ background:var(--nyx-compat-color-ef146d2930c5); border-color:var(--nyx-compat-color-d489b77ef351); }.ntl-search{ display:grid; gap:var(--nyx-compat-spacing-3px); color:var(--nyx-compat-color-hex-aaa0cb); font-size:var(--nyx-type-label); }.ntl-search input,.ntl-marker-form input,.ntl-marker-form select{ min-height:33px; border:1px solid var(--nyx-compat-color-7379e6877c6f); border-radius:var(--nyx-compat-radius-7px); background:var(--nyx-compat-color-hex-171029); color:var(--nyx-compat-color-hex-eee8ff); padding:var(--nyx-compat-spacing-5px) var(--nyx-space-8); }.ntl-search input{ width:min(235px,55vw); }.ntl-layers{ position:relative; }.ntl-popover{ position:absolute; z-index:8; top:38px; right:0; display:grid; gap:var(--nyx-compat-spacing-7px); min-width:175px; padding:var(--nyx-space-10); border:1px solid var(--nyx-compat-color-4df431eb8208); border-radius:var(--nyx-compat-radius-9px); background:var(--nyx-compat-color-hex-1a1231); box-shadow:var(--nyx-compat-shadow-box-013bc8d4cbf5); }.ntl-popover label{ font-size:var(--nyx-type-small); white-space:nowrap; }
.ntl-status{ padding:var(--nyx-compat-spacing-34px); text-align:center; color:var(--nyx-compat-color-hex-a99dce); }.ntl-status.error{ color:var(--nyx-compat-color-hex-ffb1bf); }.ntl-results{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-6); margin:var(--nyx-compat-spacing-neg-4px) 0 var(--nyx-space-10); }.ntl-results button{ font-size:var(--nyx-compat-size-11px); padding:var(--nyx-compat-spacing-5px) var(--nyx-space-8); }
.ntl-canvas{ position:relative; overflow:hidden; min-height:330px; border:1px solid var(--nyx-compat-color-c3f766a19dcb); border-radius:var(--nyx-compat-radius-16px); background:radial-gradient(120% 90% at 80% -12%,var(--nyx-compat-color-755036f85ffd),transparent 55%),linear-gradient(180deg,var(--nyx-compat-color-353d3ca36caf),var(--nyx-compat-color-83708b3f8896)); user-select:none; touch-action:pan-y; cursor:grab; }.ntl-canvas:active{ cursor:grabbing; }
/* Date ruler + gridlines (shared NyxTimeRuler) — the reading anchor the axis was missing */
.ntl-axis{ display:contents; }
.ntl-ruler{ position:relative; height:42px; z-index:5; border-bottom:1px solid var(--nyx-compat-color-50339e09f044); background:var(--nyx-compat-color-b266f30bc6cf); }
.ntl-tick{ position:absolute; top:0; bottom:0; }
.ntl-tick.major{ border-left:1px solid var(--nyx-compat-color-89496511e901); }
.ntl-tick b{ position:absolute; top:9px; left:8px; display:inline-flex; align-items:baseline; gap:var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-e7e0ff); font:var(--nyx-compat-font-67347b93c7eb); white-space:nowrap; }
.ntl-tick b i{ font:var(--nyx-compat-font-84ea098081a7); font-style:normal; letter-spacing:var(--nyx-compat-tracking-p08em); color:var(--nyx-compat-color-hex-8f85b0); }
.ntl-grid{ position:absolute; top:42px; left:0; right:0; bottom:0; z-index:0; pointer-events:none; }
.ntl-grid i{ position:absolute; top:0; bottom:0; border-left:1px solid var(--nyx-compat-color-caeaf2c22077); }
.ntl-ribbons{ position:relative; height:22px; z-index:2; overflow:hidden; border-bottom:1px solid var(--nyx-compat-color-ac2f31b9d703); background:var(--nyx-compat-color-5848cd0ae21a); }.ntl-ribbons span{ position:absolute; top:3px; height:16px; display:flex; align-items:center; justify-content:center; min-width:20px; overflow:hidden; border-radius:var(--nyx-radius-small); color:var(--nyx-compat-color-hex-c9baff); font:var(--nyx-compat-font-845a28db2e1f); white-space:nowrap; background:var(--nyx-compat-color-42d73111bc7b); }
/* Softened: the cross-game hub view still uses the generic canvas; the hard
   full-height rule read as a stray line (user 2026-07-16). */
.ntl-now{ position:absolute; z-index:6; top:0; bottom:0; width:0;
  border-left:1.5px solid transparent;
  border-image:linear-gradient(180deg, rgba(200,188,255,.85), rgba(200,188,255,.25) 70%, transparent) 1;
  pointer-events:none; }.ntl-now i{ display:none; }.ntl-now span{ position:absolute; top:10px; left:0; transform:translateX(-50%); background:linear-gradient(160deg,var(--nyx-compat-color-hex-efe9ff),var(--nyx-compat-color-hex-9c8cff)); color:var(--nyx-compat-color-hex-1a1030); font:var(--nyx-compat-font-3cad443cae61); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; padding:var(--nyx-compat-spacing-3px) var(--nyx-space-8); border-radius:var(--nyx-radius-pill); box-shadow:var(--nyx-compat-shadow-box-ed85e993ea2f); white-space:nowrap; }
.ntl-lane{ position:relative; margin-top:var(--nyx-compat-spacing-26px); border-top:1px solid var(--nyx-compat-color-ab9cfe7f9af6); }.ntl-lane>b{ position:absolute; z-index:7; top:8px; left:8px; display:inline-flex; align-items:center; gap:var(--nyx-compat-spacing-5px); padding:var(--nyx-compat-spacing-3px) var(--nyx-compat-spacing-9px); border-radius:var(--nyx-radius-pill); color:var(--nyx-compat-color-hex-cabfe8); font:var(--nyx-compat-font-845a28db2e1f); letter-spacing:var(--nyx-compat-tracking-p05em); text-transform:uppercase; background:var(--nyx-compat-color-1f44786ea83f); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }.ntl-lane.activities,.ntl-lane.custom{ min-height:58px; }
/* thin chips (activities + custom markers) — compact shared base */
.ntl-activity,.ntl-marker{ position:absolute; z-index:3; overflow:hidden; border-radius:var(--nyx-radius-control); text-align:left; cursor:pointer; box-shadow:var(--nyx-compat-shadow-box-4e90b9bccece); transition:transform .12s ease; }.ntl-activity:hover,.ntl-marker:hover{ transform:translateY(-1px); }.ntl-activity{ top:23px; min-height:23px; padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px); border:1px solid var(--nyx-compat-color-hex-7bd9cb55); border-left:3px solid var(--nyx-compat-color-hex-67e4ce); background:var(--nyx-compat-color-28fe7e17be25); color:var(--nyx-compat-color-hex-d3fff6); font-size:var(--nyx-type-label); text-decoration:none; white-space:nowrap; }.ntl-marker{ top:23px; min-height:25px; padding:var(--nyx-space-4) var(--nyx-space-8); border:1px solid var(--nyx-compat-color-fe29182bee44); background:var(--nyx-compat-color-73392192ae2a); color:var(--nyx-compat-color-hex-c8bcff); font-size:var(--nyx-type-label); white-space:nowrap; }
.ntl-activity.expected{ border-color:rgba(183,170,255,.4); background:rgba(139,123,255,.1); color:var(--nyx-color-text-soft); opacity:.85; }.ntl-activity small{ margin-left:var(--nyx-compat-spacing-5px); color:var(--nyx-color-accent-bright); font-size:var(--nyx-compat-size-7px); font-weight:var(--nyx-weight-bold); text-transform:uppercase; }
/* banner/event cards — asset-driven, rarity-tinted, animated */
.ntl-block{ position:absolute; z-index:3; overflow:hidden; min-height:72px; border:0; border-radius:var(--nyx-compat-radius-11px); color:var(--nyx-color-text-max); text-align:left; cursor:pointer; background:linear-gradient(150deg,var(--nyx-compat-color-69ff95a2dcbc),var(--nyx-compat-color-8d7af7fd3e1d)); box-shadow:var(--nyx-compat-shadow-box-803784edbd1b); transition:transform .13s ease,box-shadow .13s ease,filter .2s ease; }.ntl-block::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; z-index:3; background:var(--rar,var(--nyx-compat-color-hex-c49bff)); }.ntl-block:hover{ transform:translateY(-2px); box-shadow:var(--nyx-compat-shadow-box-1149fe06a162); }.ntl-block:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d9ceff); outline-offset:2px; }.ntl-block.selected{ transform:translateY(-2px); box-shadow:var(--nyx-compat-shadow-box-167dd4e48bd0); }.ntl-block.past{ filter:saturate(.5) brightness(.85); opacity:.72; }.ntl-block.live{ box-shadow:var(--nyx-compat-shadow-box-08036fc64111); }.ntl-block.expected{ box-shadow:var(--nyx-compat-shadow-box-ed9087641d8b); }.ntl-block.expected::before{ background:var(--nyx-color-accent-bright); opacity:.8; }
.ntl-block-art{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center 20%; opacity:.5; -webkit-mask-image:linear-gradient(90deg,transparent,var(--nyx-compat-color-hex-000) 55%); mask-image:linear-gradient(90deg,transparent,var(--nyx-compat-color-hex-000) 55%); }
.ntl-block-body{ position:relative; z-index:2; display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-3px); min-height:72px; padding:var(--nyx-space-8) var(--nyx-space-10); background:linear-gradient(100deg,var(--nyx-compat-color-5a5cbf44e873) 34%,var(--nyx-compat-color-387a1b5878eb)); }.ntl-block .ntl-block-tag{ font:var(--nyx-compat-font-1bfdde483f0f); letter-spacing:var(--nyx-compat-tracking-p09em); text-transform:uppercase; color:var(--rar,var(--nyx-compat-color-hex-d4c4ff)); }.ntl-block.expected .ntl-block-tag{ color:var(--nyx-color-accent-bright); }.ntl-block strong{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px); min-width:0; font-weight:var(--nyx-weight-regular); }.ntl-block strong img.ntl-block-portrait{ width:30px; height:30px; flex:0 0 auto; border-radius:50%; object-fit:cover; box-shadow:var(--nyx-compat-shadow-box-6a8b279372b9); }.ntl-block .ntl-block-title{ overflow:hidden; font:var(--nyx-compat-font-5ab26e0d336f); text-overflow:ellipsis; white-space:nowrap; }.ntl-block-body small{ overflow:hidden; color:var(--nyx-compat-color-c8f772839d50); font-size:var(--nyx-compat-size-10p5px); text-overflow:ellipsis; white-space:nowrap; }
/* events keep their lighter tag+title markup — re-skinned to match */
.ntl-block>span{ position:relative; z-index:2; display:block; padding:var(--nyx-space-8) var(--nyx-space-10) var(--nyx-space-2); font:var(--nyx-compat-font-1bfdde483f0f); letter-spacing:var(--nyx-compat-tracking-p09em); text-transform:uppercase; color:var(--nyx-compat-color-hex-7fdcff); }.ntl-block>strong{ position:relative; z-index:2; display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px); min-width:0; padding:0 var(--nyx-space-10) var(--nyx-compat-spacing-9px); overflow:hidden; font:var(--nyx-compat-font-b4f882fc8e44); white-space:nowrap; text-overflow:ellipsis; }.ntl-block>strong img{ width:26px; height:26px; flex:0 0 auto; border-radius:var(--nyx-compat-radius-7px); object-fit:cover; }
.ntl-detail{ display:grid; grid-template-columns:minmax(180px,.7fr) minmax(220px,1fr); gap:var(--nyx-space-18); margin-top:var(--nyx-space-12); padding:var(--nyx-space-16) var(--nyx-space-18); border:1px solid var(--nyx-compat-color-619eb972b706); border-radius:var(--nyx-compat-radius-13px); background:var(--nyx-compat-color-07fb6d7182c0); }.ntl-detail h2{ margin:var(--nyx-space-4) 0; font:var(--nyx-compat-font-1e3bdbb7a74d); }.ntl-detail p,.ntl-detail span{ margin:var(--nyx-compat-spacing-3px) 0; color:var(--nyx-compat-color-hex-a99fca); font-size:var(--nyx-type-small); }.ntl-detail a{ color:var(--nyx-compat-color-hex-d4c5ff); font-size:var(--nyx-type-small); }
@media (max-width:700px){ .ntl{ padding:var(--nyx-compat-spacing-13px); }.ntl-head{ align-items:start; flex-direction:column; gap:var(--nyx-compat-spacing-3px); }.ntl-head h1{ font-size:var(--nyx-compat-size-24px); }.ntl-tools{ align-items:center; }.ntl-search{ width:100%; }.ntl-search input{ width:100%; box-sizing:border-box; }.ntl-canvas{ min-height:300px; }.ntl-detail{ grid-template-columns:1fr; gap:var(--nyx-space-8); }.ntl-marker-form{ align-items:stretch; }.ntl-marker-form input,.ntl-marker-form select{ max-width:100%; } }
.ntl-tools button.on{ background:var(--nyx-compat-color-hex-6550ad); }.ntl-jump{ display:grid; gap:var(--nyx-compat-spacing-3px); color:var(--nyx-compat-color-hex-aaa0cb); font-size:var(--nyx-type-label); }.ntl-jump input{ min-height:33px; border:1px solid var(--nyx-compat-color-7379e6877c6f); border-radius:var(--nyx-compat-radius-7px); background:var(--nyx-compat-color-hex-171029); color:var(--nyx-compat-color-hex-eee8ff); padding:var(--nyx-compat-spacing-5px) var(--nyx-space-8); }.ntl-regions{ display:flex; }.ntl-regions button{ border-radius:0; padding:var(--nyx-space-8) var(--nyx-compat-spacing-7px); }.ntl-regions button:first-child{ border-radius:var(--nyx-radius-control) 0 0 var(--nyx-radius-control); }.ntl-regions button:last-child{ border-radius:0 var(--nyx-radius-control) var(--nyx-radius-control) 0; }
/* Batch 14 fixes — copy-link feedback, marker controls, marker form extras */
.ntl-copied{ align-self:center; color:var(--nyx-compat-color-hex-bff3e4); font-size:var(--nyx-compat-size-11px); padding:var(--nyx-space-4) var(--nyx-space-8); border-radius:var(--nyx-compat-radius-7px); background:var(--nyx-compat-color-e9b2e366d61c); }
.ntl-marker-form label.ntl-until,.ntl-marker-form label.ntl-align{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-aaa0cb); font-size:var(--nyx-compat-size-11px); white-space:nowrap; }

/* Batch 15 — events lane (Workstream N) */
.ntl-lane.events{ min-height:112px; }
.ntl-block.event{ background:linear-gradient(150deg,var(--nyx-compat-color-9c5a39b9be1c),var(--nyx-compat-color-122394c7e7fb)); }
.ntl-block.event::before{ background:var(--nyx-color-info); }
.ntl-block.event>span{ color:var(--nyx-compat-color-hex-7fdcff); }
.ntl-block.event.upcoming{ filter:saturate(.85); }
.ntl-block.event.ongoing,.ntl-block.event.live{ box-shadow:var(--nyx-compat-shadow-box-e7abf18c6c98); }
.ntl-block.event.past{ filter:saturate(.5) brightness(.85); opacity:.7; }
.ntl-block.event.expected::before{ background:var(--nyx-color-accent-bright); opacity:.8; }
.ntl-block.event.expected>span{ color:var(--nyx-color-accent-bright); }
.ntl-events-review{ margin-top:var(--nyx-space-14); padding:var(--nyx-space-12) var(--nyx-space-14); border:1px solid rgba(183,170,255,.25); border-radius:var(--nyx-radius-card); background:rgba(139,123,255,.06); }
.ntl-events-review>b{ display:block; margin-bottom:var(--nyx-compat-spacing-9px); color:var(--nyx-color-text-muted); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p06em); text-transform:uppercase; }
.ntl-events-review-list{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-8); }
.ntl-events-review-list .ntl-block{ position:static; min-height:auto; width:auto; max-width:260px; }
@media (max-width:700px){ .ntl-events-review-list{ flex-direction:column; } .ntl-events-review-list .ntl-block{ max-width:100%; } }
.ntl-marker{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-5px); min-width:110px; box-sizing:border-box; }.ntl-marker.off{ opacity:.5; filter:saturate(.4); }
.ntl-marker>button{ border:0; background:transparent; color:inherit; cursor:pointer; padding:0; font:inherit; line-height:1; }
.ntl-marker .ntl-marker-label{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:left; }
.ntl-marker .ntl-marker-toggle,.ntl-marker .ntl-marker-del{ flex:0 0 auto; font-size:var(--nyx-compat-size-11px); opacity:.85; }
.ntl-marker .ntl-marker-del{ font-size:var(--nyx-compat-size-13px); }
.gp-reset-tile.custom.off{ opacity:.55; }
.gp-reset-tile.custom button[aria-pressed]{ right:33px; opacity:.8; }

/* Batch 16 (nyx-0031) — hub cross-game banner timeline */
.ntl-lane>b .ntl-lane-icon,.ntl-lane>b img.ntl-lane-icon{ width:16px; height:16px; margin-right:var(--nyx-space-6); border-radius:50%; object-fit:cover; vertical-align:middle; }
.ntl-xgame-error{ padding:var(--nyx-compat-spacing-34px) var(--nyx-space-10); text-align:center; color:var(--nyx-compat-color-hex-ffb1bf); font-size:var(--nyx-type-small); }
.ntl-results>span{ align-self:center; color:var(--nyx-compat-color-hex-998fb9); font-size:var(--nyx-compat-size-11px); padding:var(--nyx-compat-spacing-5px) var(--nyx-space-2); }

/* Genshin desktop timeline redesign — scoped so other timelines stay compact. */
.ntl-genshin{ --gi-line:var(--nyx-compat-color-b5dce4d08588); --gi-accent:var(--nyx-color-accent); --gi-accent-2:var(--nyx-color-accent-bright); padding:var(--nyx-space-20); }
.ntl-genshin .ntl-head{ margin-bottom:var(--nyx-space-12); align-items:end; }
.ntl-genshin .ntl-head h1{ margin-top:var(--nyx-space-6); font-size:var(--nyx-type-title); }
.ntl-genshin .ntl-gi-tools{ align-items:center; gap:var(--nyx-space-8); }
.ntl-genshin .ntl-search label,.ntl-genshin .ntl-jump>span{ color:var(--nyx-compat-color-hex-81789f); font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }
.ntl-genshin .ntl-search input{ width:180px; }
.ntl-gi-jump{ position:relative; width:34px; }.ntl-gi-jump>span{ position:absolute; left:0; bottom:37px; width:max-content; }.ntl-gi-jump input{ position:absolute; z-index:3; inset:auto 0 0; width:34px; height:34px; opacity:0; padding:0; cursor:pointer; }.ntl-gi-calendar-icon{ position:relative; display:block; width:34px; height:34px; border:1px solid var(--nyx-compat-color-92028f0fbac1); border-radius:var(--nyx-radius-control); background:var(--nyx-compat-color-29324858ffe0); }.ntl-gi-calendar-icon::before{ content:""; position:absolute; left:9px; top:10px; width:14px; height:13px; border:1px solid var(--nyx-compat-color-hex-c9c0e2); border-radius:var(--nyx-compat-radius-2px); }.ntl-gi-calendar-icon::after{ content:""; position:absolute; left:10px; top:14px; width:14px; border-top:1px solid var(--nyx-compat-color-hex-c9c0e2); box-shadow:var(--nyx-compat-shadow-box-d50b1bedbcd1); }
.ntl-genshin .ntl-gi-today{ clip-path:polygon(0 50%,10px 0,calc(100% - 10px) 0,100% 50%,calc(100% - 10px) 100%,10px 100%); border:0; border-radius:0; padding-inline:var(--nyx-space-18); background:var(--nyx-compat-color-e11aeb508c9e); }
.ntl-genshin .ntl-gi-layer-buttons{ display:flex; align-items:center; gap:var(--nyx-space-6); margin-left:auto; }
.ntl-genshin .ntl-gi-layer-buttons>b{ margin-right:var(--nyx-space-2); color:var(--nyx-compat-color-hex-746b90); font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; }
.ntl-genshin .ntl-gi-layer-buttons button{ min-height:26px; height:26px; border:0; clip-path:polygon(0 50%,8px 0,calc(100% - 8px) 0,100% 50%,calc(100% - 8px) 100%,8px 100%); border-radius:0; padding:0 var(--nyx-space-14); background:var(--nyx-compat-color-e1b276e64ad6); color:var(--nyx-compat-color-hex-d9d0f5); font-size:var(--nyx-compat-size-10p5px); }
.ntl-genshin .ntl-gi-layer-buttons button.off{ background:var(--nyx-compat-color-d02d9c07c850); color:var(--nyx-compat-color-hex-746b90); opacity:.68; text-decoration:line-through; }
.ntl-gi-workspace{ min-width:0; }
.ntl-gi-stage{ min-width:0; }
.ntl-gi-frame{ display:grid; grid-template-columns:116px minmax(0,1fr); overflow:hidden; border:1px solid var(--nyx-compat-color-92028f0fbac1); border-radius:var(--nyx-compat-radius-16px); background:linear-gradient(180deg,var(--nyx-compat-color-cdeed168f4c4),var(--nyx-compat-color-d69f17639f65)); box-shadow:var(--nyx-compat-shadow-box-520228d325c2); }
.ntl-gi-track-rail{ position:relative; z-index:12; background:linear-gradient(180deg,var(--nyx-compat-color-386093c61b46),var(--nyx-compat-color-83e854f9244b)); border-right:1px solid var(--gi-line); }
.ntl-gi-rail-head{ display:flex; flex-direction:column; justify-content:space-between; height:104px; padding:var(--nyx-compat-spacing-13px) var(--nyx-space-12) var(--nyx-compat-spacing-11px); color:var(--nyx-compat-color-hex-716987); font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; }
.ntl-gi-rail-head span{ align-self:flex-end; }.ntl-gi-rail-head b{ color:var(--nyx-compat-color-hex-dcd4f5); font:var(--nyx-compat-font-79f1ade9752b); letter-spacing:var(--nyx-compat-tracking-0); text-transform:none; }
.ntl-gi-rail-row{ display:flex; align-items:flex-start; padding:var(--nyx-compat-spacing-13px) var(--nyx-space-12) 0; border-top:1px solid var(--nyx-compat-color-e3785321a1c3); color:var(--nyx-compat-color-hex-c9c0e2); font-size:var(--nyx-type-label); font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p055em); line-height:1.25; text-transform:uppercase; }
.ntl-gi-rail-row span{ display:block; line-height:1.25; }.ntl-gi-rail-row i{ display:inline-block; width:6px; height:6px; margin-right:var(--nyx-compat-spacing-7px); transform:rotate(45deg); background:var(--gi-accent); box-shadow:var(--nyx-compat-shadow-box-1b30341cf5c3); vertical-align:middle; }
.ntl-gi-rail-row.event i{ border-radius:50%; transform:none; background:var(--nyx-compat-color-hex-b5a7ff); }.ntl-gi-rail-row.activity i,.ntl-gi-rail-row.planning i{ border:1px solid var(--gi-accent-2); background:transparent; }
.ntl-genshin .ntl-gi-canvas{ min-height:0; border:0; border-radius:0; background:radial-gradient(120% 90% at 80% -12%,var(--nyx-compat-color-e2223e176006),transparent 55%),linear-gradient(180deg,var(--nyx-compat-color-cdeed168f4c4),var(--nyx-compat-color-d69f17639f65)); }
.ntl-gi-axis{ position:relative; z-index:5; height:58px; }.ntl-gi-ruler{ position:relative; height:58px; overflow:hidden; border-bottom:1px solid var(--gi-line); background:var(--nyx-compat-color-b266f30bc6cf); }
.ntl-gi-month{ position:absolute; top:0; bottom:0; border-left:1px solid var(--nyx-compat-color-9abf2f2b7722); }.ntl-gi-month b{ position:absolute; top:7px; left:9px; color:var(--nyx-compat-color-hex-efe9ff); font:var(--nyx-compat-font-464edc0b43e2); white-space:nowrap; }.ntl-gi-month i{ position:absolute; top:11px; left:43px; color:var(--nyx-compat-color-hex-8f85b0); font-size:var(--nyx-type-caption); font-style:normal; font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p08em); }
.ntl-gi-week{ position:absolute; top:27px; bottom:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--nyx-compat-spacing-1px); overflow:hidden; border-top:1px solid var(--nyx-compat-color-dffb33c1c353); border-left:1px solid var(--nyx-compat-color-fe41f066fa45); color:var(--nyx-compat-color-hex-847c9e); white-space:nowrap; }.ntl-gi-week.odd{ background:var(--nyx-compat-color-eb97676cadd8); }.ntl-gi-week b{ color:var(--nyx-compat-color-hex-b9b0d0); font-size:var(--nyx-type-caption); line-height:1; }.ntl-gi-week i{ color:var(--nyx-compat-color-hex-746d8d); font-size:var(--nyx-compat-size-6p5px); font-style:normal; font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p12em); line-height:1; text-transform:uppercase; }
.ntl-gi-week-grid{ position:absolute; z-index:0; top:104px; inset-inline:0; bottom:0; pointer-events:none; }.ntl-gi-week-grid i{ position:absolute; top:0; bottom:0; border-left:1px solid var(--nyx-compat-color-1d3f3c150396); }.ntl-gi-week-grid i.odd{ background:var(--nyx-compat-color-e4b9839713cc); }
.ntl-gi-orbit{ position:absolute; z-index:8; top:3px; width:26px; height:20px; transform:translateX(-13px); }.ntl-gi-orbit::before{ content:""; position:absolute; left:1px; top:5px; width:23px; height:10px; border:1px solid var(--nyx-compat-color-bcf0f27d136d); border-radius:50%; transform:rotate(-18deg); box-shadow:var(--nyx-compat-shadow-box-8736a2e69561); }.ntl-gi-orbit::after{ content:""; position:absolute; left:10px; top:6px; width:6px; height:6px; border-radius:50%; background:var(--nyx-compat-color-hex-efe9ff); box-shadow:var(--nyx-compat-shadow-box-c3feb3b14613); }.ntl-gi-orbit b{ position:absolute; left:21px; top:5px; color:var(--nyx-compat-color-hex-c6b8ff); font-size:var(--nyx-compat-size-8px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; white-space:nowrap; }
.ntl-gi-ribbons{ position:relative; z-index:2; height:46px; overflow:hidden; border-bottom:1px solid var(--nyx-compat-color-a4a1f04d7ca4); background:var(--nyx-compat-color-a9605f088420); }.ntl-gi-ribbons .version{ position:absolute; top:0; height:22px; display:flex; align-items:center; overflow:hidden; min-width:28px; border-left:2px solid var(--nyx-compat-color-d9e2511e655a); background:linear-gradient(90deg,var(--nyx-compat-color-c2b0ed1f9dca),transparent 64%); color:var(--nyx-compat-color-hex-c9baff); font-size:var(--nyx-compat-size-9p5px); font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p11em); text-transform:uppercase; white-space:nowrap; }.ntl-gi-ribbons .version i{ position:sticky; left:10px; padding:0 var(--nyx-space-4); font-style:normal; }
.ntl-gi-ribbons .phase{ position:absolute; bottom:0; height:24px; display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px); overflow:hidden; padding:0 var(--nyx-compat-spacing-9px); border-top:1px solid var(--nyx-compat-color-dffb33c1c353); border-left:1px solid var(--nyx-compat-color-821fe30a43b2); color:var(--nyx-compat-color-hex-cfc6ea); white-space:nowrap; }.ntl-gi-ribbons .phase b{ color:var(--nyx-compat-color-hex-ebe5ff); font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p07em); text-transform:uppercase; }.ntl-gi-ribbons .phase i{ overflow:hidden; color:var(--nyx-compat-color-hex-746b90); font-size:var(--nyx-compat-size-8p5px); font-style:normal; text-overflow:ellipsis; text-transform:uppercase; }.ntl-gi-ribbons .phase em{ margin-left:auto; padding:var(--nyx-space-2) var(--nyx-space-6); border-radius:var(--nyx-radius-pill); background:var(--nyx-compat-color-3f4dde54241d); color:var(--nyx-compat-color-hex-ddd4ff); font-size:var(--nyx-compat-size-8px); font-style:normal; text-transform:uppercase; }.ntl-gi-ribbons .phase.live{ background:linear-gradient(90deg,var(--nyx-compat-color-e3785321a1c3),var(--nyx-compat-color-6eda07d8a498)); }.ntl-gi-ribbons .phase.upcoming::after{ content:"Up next"; margin-left:auto; padding:var(--nyx-space-2) var(--nyx-space-6); border-radius:var(--nyx-radius-pill); background:var(--nyx-compat-color-108ef61fc9ce); color:var(--nyx-compat-color-hex-cfc5ff); font-size:var(--nyx-compat-size-8px); text-transform:uppercase; }
.ntl-gi-forecast{ position:absolute; z-index:1; top:104px; right:0; bottom:0; border-left:1px solid var(--nyx-compat-color-fe41f066fa45); background-image:radial-gradient(circle,var(--nyx-compat-color-a4a1f04d7ca4) 1px,transparent 1.5px),linear-gradient(90deg,var(--nyx-compat-color-aa51a1d2f927),transparent 58%); background-size:34px 34px,100% 100%; pointer-events:none; }.ntl-gi-forecast span{ position:absolute; top:15px; left:16px; color:var(--nyx-compat-color-78576e320b8c); font-size:var(--nyx-compat-size-8p5px); font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p13em); text-transform:uppercase; white-space:nowrap; }
.ntl-gi-now-band{ position:absolute; z-index:1; top:104px; bottom:0; width:26px; transform:translateX(-13px); background:linear-gradient(90deg,transparent,var(--nyx-compat-color-f4669037b239),transparent); pointer-events:none; }.ntl-genshin .ntl-now{ z-index:2; top:104px; border-color:var(--nyx-compat-color-ddccce1689d3); box-shadow:var(--nyx-compat-shadow-box-de5029fac96d); }.ntl-genshin .ntl-now span{ display:none; }
.ntl-genshin .ntl-lane{ margin-top:0; border-top:1px solid var(--nyx-compat-color-e3785321a1c3); background:transparent; }
.ntl-gi-banner{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px); overflow:hidden; border:1px solid var(--nyx-compat-color-ce9eb6907a77); border-radius:var(--nyx-compat-radius-9px); padding:var(--nyx-compat-spacing-7px) var(--nyx-space-8); background:linear-gradient(105deg,var(--nyx-compat-color-499fc5f83eb2),var(--nyx-compat-color-cba028b16041)); box-shadow:var(--nyx-compat-shadow-box-1a7e1ad020a5); }.ntl-gi-banner::before,.ntl-gi-banner::after{ display:none; }
.ntl-gi-banner:hover{ transform:translateY(-2px); border-color:var(--nyx-compat-color-581fc1abcf73); background:linear-gradient(105deg,var(--nyx-compat-color-74b8c25c0f96),var(--nyx-compat-color-386093c61b46)); }.ntl-gi-banner.selected{ transform:none; border-color:var(--nyx-compat-color-hex-c8bcff); box-shadow:var(--nyx-compat-shadow-box-c34bfeb9e65e); }.ntl-gi-banner.past{ opacity:.64; filter:saturate(.65); }.ntl-gi-banner.past:hover{ opacity:.9; filter:none; }.ntl-gi-banner.dim{ opacity:.14; filter:grayscale(.5); pointer-events:none; }
.ntl-gi-banner-icon{ position:relative; z-index:2; flex:0 0 40px; width:40px; height:40px; border-radius:50%; object-fit:contain; background:radial-gradient(circle,var(--nyx-compat-color-916a41171be5),var(--nyx-compat-color-565e9cae4ff2) 68%); box-shadow:var(--nyx-compat-shadow-box-0c3a672f1acb); }
.ntl-gi-banner-name{ position:relative; z-index:2; display:flex; min-width:0; flex:1; align-items:center; text-align:left; text-transform:none; }.ntl-gi-banner-name b{ overflow:hidden; max-width:100%; color:var(--nyx-compat-color-hex-f6f2ff); font:var(--nyx-compat-font-0737c9d5719f); text-overflow:ellipsis; text-transform:none; white-space:nowrap; }
.ntl-gi-banner.expected{ border-color:var(--nyx-compat-color-882b20822869); background:var(--nyx-compat-color-07408f0e6e0f); box-shadow:none; }
.ntl-gi-event,.ntl-gi-featured-activity{ position:absolute; z-index:3; overflow:hidden; border:0; color:var(--nyx-compat-color-hex-f0ecff); cursor:pointer; text-align:left; }.ntl-gi-event{ border-radius:var(--nyx-compat-radius-9px); background:linear-gradient(135deg,var(--nyx-compat-color-c6fc7fc06a6c),var(--nyx-compat-color-586d698fad46)); box-shadow:var(--nyx-compat-shadow-box-aacd329f9043); }.ntl-gi-event::before{ content:""; position:absolute; inset:0 auto 0 0; width:3px; background:var(--gi-accent); }.ntl-gi-event>b,.ntl-gi-featured-activity>b{ position:absolute; left:12px; top:5px; right:10px; overflow:hidden; font:var(--nyx-compat-font-ceca3129233a); text-overflow:ellipsis; white-space:nowrap; }.ntl-gi-event>i,.ntl-gi-featured-activity>i{ position:absolute; left:12px; right:78px; bottom:5px; overflow:hidden; color:var(--nyx-compat-color-hex-9f95bd); font-size:var(--nyx-compat-size-8p5px); font-style:normal; font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p06em); text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }.ntl-gi-event>span,.ntl-gi-featured-activity>span{ position:absolute; right:5px; bottom:4px; padding:var(--nyx-space-2) var(--nyx-space-6); border-radius:var(--nyx-radius-pill); background:var(--nyx-compat-color-e1b276e64ad6); color:var(--nyx-compat-color-hex-c9bcff); font-size:var(--nyx-compat-size-8px); font-weight:var(--nyx-weight-bold); text-transform:uppercase; }
.ntl-gi-event.live,.ntl-gi-event.ongoing{ box-shadow:var(--nyx-compat-shadow-box-688e117441b3); }.ntl-gi-event.past{ opacity:.7; filter:saturate(.5); }.ntl-gi-event.selected,.ntl-gi-featured-activity.selected{ box-shadow:var(--nyx-compat-shadow-box-3a0b4b75b09c); }
.ntl-gi-event.expected{ border:1px solid rgba(183,170,255,.35); background:rgba(25,19,51,.82); }.ntl-gi-event.expected>span{ color:var(--nyx-color-accent-bright); }
.ntl-genshin .ntl-activity{ display:flex; align-items:center; min-height:22px; padding:0 var(--nyx-compat-spacing-9px); border:0; border-radius:var(--nyx-radius-small); background:repeating-linear-gradient(135deg,var(--nyx-compat-color-6eda07d8a498) 0 5px,var(--nyx-compat-color-4363d1518fc8) 5px 10px); box-shadow:var(--nyx-compat-shadow-box-133bb241bd27); color:var(--nyx-compat-color-hex-d8d0f2); font-size:var(--nyx-type-label); }.ntl-gi-featured-activity{ clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px); background:linear-gradient(135deg,var(--nyx-compat-color-04e5c449364d),var(--nyx-compat-color-fba07e0aa77e)); box-shadow:var(--nyx-compat-shadow-box-b5743bebbdd2); }.ntl-gi-featured-activity>b{ top:7px; font-size:var(--nyx-compat-size-13px); }.ntl-gi-featured-activity>i{ bottom:7px; }
.ntl-gi-mini{ position:relative; height:32px; margin-top:var(--nyx-space-8); overflow:hidden; border:1px solid var(--gi-line); border-radius:var(--nyx-radius-control); background:linear-gradient(180deg,var(--nyx-compat-color-d72f99064c22),var(--nyx-compat-color-d3e969645119)); cursor:pointer; }.ntl-gi-mini::before{ content:"PAST                                      NOW                                      NEXT"; position:absolute; inset:4px 6px auto; color:var(--nyx-compat-color-hex-706887); font-size:var(--nyx-compat-size-8px); font-weight:var(--nyx-weight-semibold); letter-spacing:var(--nyx-compat-tracking-p13em); text-transform:uppercase; white-space:pre; }.ntl-gi-mini-now{ position:absolute; z-index:3; top:0; bottom:0; border-left:1.5px solid var(--nyx-compat-color-d453b1d12eb3); }.ntl-gi-mini-now b{ position:absolute; top:17px; left:4px; color:var(--nyx-compat-color-hex-efe9ff); font-size:var(--nyx-compat-size-7p5px); text-transform:uppercase; }.ntl-gi-mini-window{ position:absolute; z-index:2; top:0; bottom:0; border:1px solid var(--nyx-compat-color-0665dc723783); border-radius:var(--nyx-radius-small); background:var(--nyx-compat-color-c884d6f13b65); box-shadow:var(--nyx-compat-shadow-box-475115687cd8); }
.ntl-gi-modal-backdrop{ position:fixed; z-index:300; inset:0; display:grid; place-items:center; padding:var(--nyx-space-24); background:var(--nyx-compat-color-886430af7679); backdrop-filter:blur(8px); }
.ntl-gi-detail{ position:relative; display:flex; flex-direction:column; gap:var(--nyx-space-12); width:min(640px,calc(100vw - 48px)); max-height:calc(100vh - 48px); overflow:auto; padding:var(--nyx-space-14); border:1px solid var(--nyx-compat-color-ce9eb6907a77); border-radius:var(--nyx-radius-panel); background:linear-gradient(180deg,var(--nyx-compat-color-358a650c7b7a),var(--nyx-compat-color-3509543541c6)); box-shadow:var(--nyx-compat-shadow-box-866ffc86ca2d); }.ntl-gi-ledger-head{ display:flex; align-items:center; min-height:30px; padding:0 var(--nyx-compat-spacing-42px) var(--nyx-space-8) var(--nyx-space-2); border-bottom:1px solid var(--nyx-compat-color-a4a1f04d7ca4); }.ntl-gi-ledger-head span{ color:var(--nyx-compat-color-hex-9186b8); font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-bold); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; }.ntl-gi-ledger-head i{ display:none; }
.ntl-gi-modal-close{ position:absolute; z-index:3; top:10px; right:10px; display:grid; width:32px; height:32px; place-items:center; border:1px solid var(--nyx-compat-color-fe41f066fa45); border-radius:50%; padding:0; background:var(--nyx-compat-color-250b573c0618); color:var(--nyx-compat-color-hex-dcd4f5); font:var(--nyx-compat-font-78f72bcbf559); cursor:pointer; }.ntl-gi-modal-close:hover{ border-color:var(--nyx-compat-color-5e6512b0e156); background:var(--nyx-compat-color-e1b276e64ad6); color:var(--nyx-color-text-max); }
.ntl-gi-detail-art{ position:relative; overflow:hidden; aspect-ratio:16/7; border-radius:var(--nyx-compat-radius-9px); background-color:var(--nyx-compat-color-hex-0b0819); background-position:center; background-repeat:no-repeat; background-size:contain; box-shadow:var(--nyx-compat-shadow-box-403fe2d35c77); }
.ntl-gi-detail-copy{ padding:var(--nyx-space-2) var(--nyx-space-4) var(--nyx-space-4); }.ntl-gi-detail-copy .k{ color:var(--nyx-compat-color-hex-9186b8); font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-bold); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; }.ntl-gi-detail-copy h2{ margin:var(--nyx-compat-spacing-5px) 0 var(--nyx-space-8); color:var(--nyx-compat-color-hex-f6f1ff); font:var(--nyx-compat-font-c37de2870283); }.ntl-gi-detail-copy p{ margin:var(--nyx-space-6) 0; color:var(--nyx-compat-color-hex-b9b0cf); font-size:var(--nyx-compat-size-12p5px); line-height:1.45; }.ntl-gi-detail-copy .when{ color:var(--nyx-compat-color-hex-d2c7f2); font-variant-numeric:tabular-nums; }.ntl-gi-detail-copy .countdown{ margin-top:var(--nyx-space-10); color:var(--nyx-compat-color-hex-e9e2ff); font-weight:var(--nyx-weight-semibold); }.ntl-gi-detail-copy .countdown b{ color:var(--nyx-color-text-max); font-variant-numeric:tabular-nums; }.ntl-gi-detail-copy a{ color:var(--nyx-compat-color-hex-c6b8ff); text-decoration:none; border-bottom:1px solid var(--gi-line); }
.ntl-gi-search-results{ display:block; width:min(520px,100%); margin:0 0 var(--nyx-space-12); overflow:hidden; border:1px solid var(--nyx-compat-color-916a41171be5); border-radius:var(--nyx-compat-radius-11px); background:var(--nyx-compat-color-c704f77060e9); box-shadow:var(--nyx-compat-shadow-box-c667fa5f882a); }.ntl-gi-search-results section+section{ border-top:1px solid var(--nyx-compat-color-e3785321a1c3); }.ntl-gi-search-results .ntl-gi-search-summary{ display:grid; width:100%; min-height:42px; grid-template-columns:minmax(0,1fr) auto 18px; gap:var(--nyx-space-10); border:0; border-radius:0; padding:var(--nyx-compat-spacing-7px) var(--nyx-space-12); background:transparent; text-align:left; }.ntl-gi-search-summary b{ overflow:hidden; color:var(--nyx-compat-color-hex-eee8ff); font:var(--nyx-compat-font-945fb8934a90); text-overflow:ellipsis; white-space:nowrap; }.ntl-gi-search-summary span{ color:var(--nyx-compat-color-hex-9186b8); font-size:var(--nyx-type-label); }.ntl-gi-search-summary i{ color:var(--nyx-compat-color-hex-b9aedc); font-size:var(--nyx-compat-size-15px); font-style:normal; text-align:center; }.ntl-gi-search-results .ntl-gi-search-summary:hover{ background:var(--nyx-compat-color-0557dea73665); }.ntl-gi-search-runs{ display:grid; gap:var(--nyx-compat-spacing-1px); padding:0 var(--nyx-space-6) var(--nyx-space-6); }.ntl-gi-search-runs button{ display:flex; min-height:48px; justify-content:space-between; gap:var(--nyx-space-12); border:0; border-radius:var(--nyx-compat-radius-7px); padding:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-9px); background:var(--nyx-compat-color-d02d9c07c850); text-align:left; }.ntl-gi-search-runs button:hover{ background:var(--nyx-compat-color-ac1e946fec49); }.ntl-gi-search-runs button>span{ display:flex; min-width:0; flex-direction:column; gap:var(--nyx-compat-spacing-3px); }.ntl-gi-search-runs b{ color:var(--nyx-compat-color-hex-dcd4f5); font-size:var(--nyx-compat-size-10p5px); font-weight:var(--nyx-weight-semibold); font-variant-numeric:tabular-nums; }.ntl-gi-search-runs small{ overflow:hidden; color:var(--nyx-compat-color-hex-80779b); font-size:var(--nyx-type-caption); text-overflow:ellipsis; white-space:nowrap; }.ntl-gi-search-runs em{ align-self:center; color:var(--nyx-compat-color-hex-b9aaff); font-size:var(--nyx-type-caption); font-style:normal; font-weight:var(--nyx-weight-bold); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }

/* Timeline hierarchy: Patch -> Phase -> Week, with quiet dates at bottom. */
.ntl-head-quiet{ min-height:0; justify-content:flex-end; margin-bottom:var(--nyx-compat-spacing-7px); }
.ntl-tools button,.ntl-marker-form button,.ntl-jump input,.ntl-search input,.ntl-gi-calendar-icon{ border-radius:var(--nyx-compat-radius-4px); }
.ntl-schedule{ position:relative; z-index:5; overflow:hidden; border-bottom:1px solid var(--nyx-compat-color-b5dce4d08588); background:var(--nyx-compat-color-6b34f5e73deb); }
.ntl-schedule-row{ position:relative; min-height:28px; overflow:hidden; border-bottom:1px solid var(--nyx-compat-color-e3785321a1c3); }
.ntl-schedule-row:last-child{ border-bottom:0; }
.ntl-schedule-kind{ position:absolute; z-index:8; top:5px; left:6px; padding:var(--nyx-space-2) var(--nyx-compat-spacing-5px); border:1px solid var(--nyx-compat-color-916a41171be5); border-radius:var(--nyx-compat-radius-3px); background:var(--nyx-compat-color-601333ba2599); color:var(--nyx-compat-color-hex-9f95bd); font-size:var(--nyx-compat-size-7px); font-weight:var(--nyx-weight-bold); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; pointer-events:none; }
.ntl-schedule-band{ position:absolute; display:flex; min-width:0; height:22px; box-sizing:border-box; align-items:center; justify-content:center; gap:var(--nyx-compat-spacing-5px); overflow:hidden; border-left:1px solid var(--nyx-compat-color-17b618dc6492); border-right:1px solid var(--nyx-compat-color-c884d6f13b65); background:linear-gradient(90deg,var(--nyx-compat-color-b6ceb79dc76c),var(--nyx-compat-color-5e50529bbb61)); color:var(--nyx-compat-color-hex-eee9ff); white-space:nowrap; }
.ntl-schedule-band.phase{ background:var(--nyx-compat-color-6eda07d8a498); color:var(--nyx-compat-color-hex-cfc6ea); }
.ntl-schedule-band.expected{ background:var(--nyx-compat-color-2f0cdfacb2c3); opacity:.85; }
.ntl-schedule-band b{ min-width:0; overflow:hidden; font:var(--nyx-compat-font-073cfa42d81d); text-overflow:ellipsis; }.ntl-schedule-band em{ color:var(--nyx-compat-color-hex-a99dd1); font-size:var(--nyx-compat-size-7px); font-style:normal; text-transform:uppercase; }.ntl-schedule-band small{ flex-shrink:0; color:var(--nyx-compat-color-hex-b8a9ef); font-size:var(--nyx-compat-size-6p5px); text-transform:uppercase; }
.ntl-schedule-week{ position:absolute; top:0; height:22px; display:flex; align-items:center; justify-content:center; overflow:hidden; border-left:1px solid var(--nyx-compat-color-916a41171be5); color:var(--nyx-compat-color-hex-8f86ab); font-size:var(--nyx-compat-size-8px); }.ntl-schedule-week.odd{ background:var(--nyx-compat-color-eb7a11d783ec); }.ntl-schedule-week.partial{ border-inline-style:dashed; opacity:.78; }.ntl-schedule-week b{ font-weight:var(--nyx-weight-semibold); white-space:nowrap; }.ntl-schedule-week em{ color:var(--nyx-compat-color-hex-b5a9d8); font-size:var(--nyx-compat-size-6px); font-style:normal; }
.ntl-schedule-unavailable{ position:absolute; top:5px; left:56px; color:var(--nyx-compat-color-hex-817899); font-size:var(--nyx-compat-size-8px); font-style:normal; line-height:16px; }.ntl-reset-unknown{ position:absolute; z-index:7; top:5px; right:7px; padding:var(--nyx-space-2) var(--nyx-compat-spacing-5px); background:var(--nyx-compat-color-555c14dbe363); color:var(--nyx-compat-color-hex-8f85a8); font-size:var(--nyx-compat-size-7px); font-style:normal; }
.ntl-bottom-ruler{ position:relative; z-index:5; height:38px; overflow:hidden; border-top:1px solid var(--nyx-compat-color-9a593589b5e7); background:var(--nyx-compat-color-cbab4625df08); }
.ntl-bottom-ruler span{ position:absolute; top:0; bottom:0; padding:var(--nyx-compat-spacing-9px) 0 0 var(--nyx-space-8); border-left:1px solid var(--nyx-compat-color-916a41171be5); white-space:nowrap; }.ntl-bottom-ruler b{ color:var(--nyx-compat-color-hex-d8d0ef); font:var(--nyx-compat-font-ceca3129233a); }.ntl-bottom-ruler i{ margin-left:var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-746c8d); font-size:var(--nyx-compat-size-8px); font-style:normal; }
.ntl-block-body{ min-height:64px; padding:var(--nyx-space-6) var(--nyx-space-8); }.ntl-block{ min-height:64px; }.ntl-block .ntl-block-title{ line-height:1.05; white-space:normal; }
.ntl-activity{ display:flex; align-items:center; justify-content:center; text-align:center; }
.ntl-genshin .ntl-gi-today{ padding-inline:var(--nyx-space-18); }
.ntl-genshin .ntl-gi-layer-buttons button{ min-width:32px; padding:0 var(--nyx-space-14); }
.ntl-gi-rail-head{ height:84px; box-sizing:border-box; }.ntl-gi-rail-foot{ height:38px; box-sizing:border-box; padding:var(--nyx-compat-spacing-11px) var(--nyx-space-12); border-top:1px solid var(--nyx-compat-color-e3785321a1c3); color:var(--nyx-compat-color-hex-746b90); font-size:var(--nyx-compat-size-8px); font-weight:var(--nyx-weight-bold); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; }
.ntl-gi-forecast,.ntl-gi-now-band{ top:84px; }.ntl-genshin .ntl-now{ top:84px; }
.ntl-gi-banner-name b{ line-height:1.05; white-space:normal; }
.ntl-genshin .ntl-activity{ justify-content:center; text-align:center; }
.ntl-gi-featured-activity.static{ cursor:default; }
@media (max-width:760px){ .ntl-gi-modal-backdrop{ padding:var(--nyx-space-14); }.ntl-gi-detail{ width:calc(100vw - 28px); max-height:calc(100vh - 28px); } }
.gt-pity-observatory{ grid-area:pity; }
.gt-ledger-line{ display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:var(--nyx-compat-spacing-7px); }
.gt-ledger-line div{ min-width:0; border-radius:var(--nyx-compat-radius-9px); padding:var(--nyx-compat-spacing-9px) var(--nyx-space-8); background:var(--nyx-compat-color-d0bb7a60425c);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58); }
.gt-ledger-line span{ display:block; color:var(--nyx-compat-color-hex-9186b8); font-size:var(--nyx-compat-size-9p4px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-ledger-line b{ display:block; margin-top:var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-f4efff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-24px); line-height:1; font-weight:var(--nyx-weight-regular); }
.gt-ledger-current{ margin-top:var(--nyx-compat-spacing-9px); min-height:47px; display:flex; flex-direction:column; justify-content:center; gap:var(--nyx-compat-spacing-3px);
  border-radius:var(--nyx-radius-card); padding:var(--nyx-compat-spacing-9px) var(--nyx-space-10); background:linear-gradient(160deg, var(--nyx-compat-color-64f20fe5d318), var(--nyx-compat-color-3a4e78455075));
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }
.gt-ledger-current span{ color:var(--nyx-compat-color-hex-eee8ff); font-size:var(--nyx-type-small); line-height:1.25; }
.gt-ledger-current i{ color:var(--nyx-compat-color-hex-9f94c4); font-style:normal; font-size:var(--nyx-compat-size-10p5px); }

.gt-limited-grid{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:var(--nyx-compat-spacing-9px); }
.gt-limited-card{ position:relative; overflow:hidden; min-height:168px; border-radius:var(--nyx-radius-card);
  background:linear-gradient(160deg, var(--nyx-compat-color-57eb330020ee), var(--nyx-compat-color-30ba7b027630)); background-size:cover; background-position:center 20%;
  box-shadow:var(--nyx-compat-shadow-box-f92e47b88761); }
.gt-limited-fade{ position:absolute; inset:0; background:
  linear-gradient(180deg, var(--nyx-compat-color-ae79da1c29b4) 16%, var(--nyx-compat-color-e91a3af7f8fd) 100%),
  radial-gradient(82% 72% at 50% 18%, transparent, var(--nyx-compat-color-756df65fb7ab)); }
.gt-limited-copy{ position:absolute; left:12px; right:12px; bottom:10px; z-index:1; min-width:0; }
.gt-limited-copy b{ display:block; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); line-height:1; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-limited-copy span{ display:block; margin-top:var(--nyx-space-4); color:var(--nyx-compat-color-hex-bcb0e0); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; }
.gt-limited-rateups{ position:absolute; left:10px; top:10px; right:10px; z-index:2; display:flex; flex-wrap:wrap; gap:var(--nyx-compat-spacing-5px); }
.gt-limited-rateups i{ color:var(--nyx-compat-color-hex-ded4ff); font-style:normal; font-size:var(--nyx-type-label); line-height:1; border-radius:var(--nyx-radius-pill); padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px);
  background:var(--nyx-compat-color-77d3b11dce03); box-shadow:var(--nyx-compat-shadow-box-c52604492861); }

.gt-recent-five-list{ display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-7px); max-height:424px; overflow:auto; padding-right:var(--nyx-space-4); }
.gt-recent-five-list::-webkit-scrollbar, .gt-banner-history-list::-webkit-scrollbar, .gt-archive-grid.expanded::-webkit-scrollbar{ width:5px; }
.gt-recent-five-list::-webkit-scrollbar-thumb, .gt-banner-history-list::-webkit-scrollbar-thumb, .gt-archive-grid.expanded::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-da6c8279a378); border-radius:var(--nyx-compat-radius-3px); }
.gt-recent-five-row{ min-width:0; display:grid; grid-template-columns:34px minmax(0,1fr) auto 54px; align-items:center; gap:var(--nyx-space-8);
  min-height:45px; padding:var(--nyx-space-6) var(--nyx-space-8); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-3a4e78455075);
  box-shadow:var(--nyx-compat-shadow-box-afdee69de954); }
.gt-recent-five-row img, .gt-recent-five-row .gt-img-fallback{ width:34px; height:34px; border-radius:50%; object-fit:cover; grid-row:auto; }
.gt-recent-five-row b{ display:block; min-width:0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-15px); line-height:1; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-recent-five-row span{ display:block; min-width:0; margin-top:var(--nyx-compat-spacing-3px); color:var(--nyx-compat-color-hex-9186b8); font-size:var(--nyx-compat-size-10p3px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-recent-five-row em, .gt-banner-history-detail em{ border-radius:var(--nyx-radius-pill); padding:var(--nyx-compat-spacing-3px) var(--nyx-space-8); color:var(--nyx-compat-color-hex-d7ccff); background:var(--nyx-compat-color-c2b0ed1f9dca);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); font-style:normal; font-size:var(--nyx-type-label); white-space:nowrap; }
.gt-recent-five-row em.guaranteed, .gt-banner-history-detail em.guaranteed{ color:var(--nyx-compat-color-hex-efe7ff); background:var(--nyx-compat-color-338b69d06fc7); box-shadow:var(--nyx-compat-shadow-box-ab0d813c19f7); }
.gt-recent-five-row em.fifty-win, .gt-banner-history-detail em.fifty-win{ color:var(--nyx-compat-color-hex-a7f1d1); background:var(--nyx-compat-color-5b5c86eb5ca4); box-shadow:var(--nyx-compat-shadow-box-1f8b5612954a); }
.gt-recent-five-row em.fifty-loss, .gt-banner-history-detail em.fifty-loss{ color:var(--nyx-compat-color-hex-ffafc0); background:var(--nyx-compat-color-7dd8e82b32a2); box-shadow:var(--nyx-compat-shadow-box-4a1dd3fe610e); }
.gt-recent-five-row em.rank{ color:var(--nyx-compat-color-hex-8f84b7); background:var(--nyx-compat-color-2831cf426124); box-shadow:none; font-size:var(--nyx-type-label); }
.gt-recent-pulls .gt-filter-pills{ margin:var(--nyx-space-2) 0 var(--nyx-compat-spacing-9px); }
@media (max-width: 760px){
  .gt-filter-pills button, .gt-mode-tabs button, .gt-pity-filters button{ min-height:36px; padding-top:var(--nyx-space-8); padding-bottom:var(--nyx-space-8); }
}
.gt-recent-five-row i{ color:var(--nyx-compat-color-hex-c7bfff); font-style:normal; font-size:var(--nyx-compat-size-10p5px); text-align:right; white-space:nowrap; }

.gt-banner-history-list{ display:grid; grid-auto-rows:auto; gap:var(--nyx-space-8); max-height:392px; overflow:auto; padding-right:var(--nyx-space-4); }
.gt-banner-history-row{ border-radius:var(--nyx-compat-radius-11px); overflow:hidden; background:var(--nyx-compat-color-fadf6c54f881); box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58); }
.gt-banner-history-row.open{ background:linear-gradient(180deg, var(--nyx-compat-color-924ebfe2cb11), var(--nyx-compat-color-eb6074f8f786)); box-shadow:var(--nyx-compat-shadow-box-12c4ed4540b1); }
.gt-banner-history-row > button{ width:100%; min-height:55px; border:0; cursor:pointer; display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--nyx-space-12); align-items:center;
  padding:var(--nyx-compat-spacing-9px) var(--nyx-compat-spacing-11px); color:inherit; text-align:left; background:transparent; }
.gt-banner-history-main{ min-width:0; }
.gt-banner-history-main b{ display:block; min-width:0; color:var(--nyx-compat-color-hex-f4efff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-17px); line-height:1; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-banner-history-main span{ display:block; margin-top:var(--nyx-space-4); color:var(--nyx-compat-color-hex-9186b8); font-size:var(--nyx-compat-size-10p5px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-banner-history-meta{ display:flex; align-items:center; gap:var(--nyx-space-6); flex-wrap:wrap; justify-content:flex-end; }
.gt-banner-history-meta span{ color:var(--nyx-compat-color-hex-d8cef8); font-size:var(--nyx-compat-size-10p5px); border-radius:var(--nyx-radius-pill); padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px); background:var(--nyx-compat-color-d0e1a7f86561); }
.gt-paired-weapon{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-6); padding:0 var(--nyx-compat-spacing-11px) var(--nyx-compat-spacing-9px); }
.gt-paired-weapon span{ color:var(--nyx-color-text-muted); font-size:var(--nyx-compat-size-10p5px); border-radius:var(--nyx-radius-pill); padding:var(--nyx-space-4) var(--nyx-space-8); background:var(--nyx-compat-color-108ef61fc9ce); }
.gt-banner-history-detail{ display:flex; flex-direction:column; gap:var(--nyx-space-6); padding:0 var(--nyx-space-10) var(--nyx-space-10); }
.gt-banner-history-detail > div{ display:grid; grid-template-columns:30px minmax(0,1fr) minmax(120px,.58fr) auto 52px; align-items:center; gap:var(--nyx-space-8);
  min-height:38px; padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px); border-radius:var(--nyx-compat-radius-9px); background:var(--nyx-compat-color-2685085b3d32); box-shadow:var(--nyx-compat-shadow-box-b1599d4b2f27); }
.gt-banner-history-detail img, .gt-banner-history-detail .gt-img-fallback{ width:30px; height:30px; border-radius:50%; object-fit:cover; grid-row:auto; }
.gt-banner-history-detail b{ color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-type-body); line-height:1; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-banner-history-detail span{ color:var(--nyx-compat-color-hex-9186b8); font-size:var(--nyx-compat-size-10p5px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-banner-history-detail i{ color:var(--nyx-compat-color-hex-c7bfff); font-style:normal; font-size:var(--nyx-compat-size-10p5px); text-align:right; white-space:nowrap; }

.gt-pity-filters{ display:flex; align-items:center; gap:var(--nyx-space-6); flex-wrap:wrap; margin:var(--nyx-compat-spacing-neg-2px) 0 var(--nyx-compat-spacing-11px); }
.gt-pity-filters button{ height:29px; border:0; border-radius:var(--nyx-radius-control); padding:0 var(--nyx-space-10); cursor:pointer; color:var(--nyx-color-text-muted); background:var(--nyx-compat-color-986d4b8ffda6);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }
.gt-pity-filters button.on{ color:var(--nyx-compat-color-hex-160f2e); background:linear-gradient(160deg,var(--nyx-compat-color-hex-eee8ff),var(--nyx-compat-color-hex-9c8cff)); }
.gt-pity-lanes{ display:flex; flex-direction:column; gap:var(--nyx-space-10); }
.gt-pity-lane{ display:grid; grid-template-columns:126px minmax(0,1fr); align-items:center; gap:var(--nyx-space-10); }
.gt-pity-lane-label{ min-width:0; }
.gt-pity-lane-label b{ display:block; color:var(--nyx-color-heading); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); font-weight:var(--nyx-weight-extrabold); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-pity-lane-label span{ display:block; margin-top:var(--nyx-compat-spacing-3px); color:var(--nyx-compat-color-hex-8f84b7); font-size:var(--nyx-type-label); }
.gt-pity-track{ position:relative; height:31px; border-radius:var(--nyx-radius-pill); background:
  linear-gradient(90deg, var(--nyx-compat-color-f99ecd0e6a88), var(--nyx-compat-color-ac1e946fec49) 70%, var(--nyx-compat-color-5dbfa2009287));
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); }
.gt-pity-track mark{ position:absolute; top:-3px; bottom:-3px; width:2px; padding:0; background:var(--nyx-compat-color-hex-bca7ff); box-shadow:var(--nyx-compat-shadow-box-890625d72f63); }
.gt-pity-dot2{ position:absolute; top:50%; width:9px; height:9px; border-radius:50%; transform:translate(-50%,-50%);
  background:var(--nyx-compat-color-hex-bca7ff); box-shadow:var(--nyx-compat-shadow-box-4e39b37f7f02); }
.gt-pity-dot2.early{ background:var(--nyx-compat-color-hex-70d6b1); }
.gt-pity-dot2.soft{ background:var(--nyx-compat-color-hex-d4b4ff); }
.gt-pity-dot2.guaranteed{ width:11px; height:11px; background:var(--nyx-compat-color-hex-a78cff); }
.gt-pity-dot2.fifty-win{ background:var(--nyx-compat-color-hex-70d6b1); }
.gt-pity-dot2.fifty-loss{ background:var(--nyx-compat-color-hex-ea7894); }
.gt-pity-dot2.fixed{ background:var(--nyx-compat-color-hex-d9cfff); }
.gt-pity-legend{ display:flex; gap:var(--nyx-space-8); flex-wrap:wrap; margin-top:var(--nyx-compat-spacing-11px); }
.gt-pity-legend span{ position:relative; color:var(--nyx-compat-color-hex-9f94c4); font-size:var(--nyx-compat-size-10p5px); padding-left:var(--nyx-space-14); }
.gt-pity-legend span::before{ content:""; position:absolute; left:0; top:50%; width:8px; height:8px; border-radius:50%; transform:translateY(-50%); background:var(--nyx-compat-color-hex-bca7ff); }
.gt-pity-legend .early::before{ background:var(--nyx-compat-color-hex-70d6b1); }
.gt-pity-legend .soft::before{ background:var(--nyx-compat-color-hex-d4b4ff); }
.gt-pity-legend .guaranteed::before{ background:var(--nyx-compat-color-hex-a78cff); }
.gt-pity-legend .fifty::before{ background:var(--nyx-compat-color-hex-ea7894); }

.gt-archive-view{ display:grid; grid-template-columns:minmax(0,1fr) 310px; gap:var(--nyx-space-14); min-height:0; }
.gt-archive-grid.expanded{ max-height:520px; grid-template-columns:repeat(auto-fill, minmax(132px,1fr)); }
.gt-archive-side .gt-total-strip.archive{ grid-template-columns:1fr; max-height:520px; overflow:auto; padding-right:var(--nyx-space-4); }

@media (max-width: 1280px){
  .gt-overview-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"ledger limited" "recent recent" "history history" "pity pity"; }
  .gt-recent-five-list{ max-height:310px; }
  .gt-archive-view{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .gt-results-top{ align-items:stretch; flex-wrap:wrap; }
  .gt-import-tab{ width:100%; }
  .gt-mode-tabs{ width:100%; }
  .gt-mode-tabs button{ flex:1 1 0; min-width:0; }
  .gt-stat-strip.compact, .gt-overview-grid{ grid-template-columns:1fr; }
  .gt-overview-grid{ grid-template-areas:"ledger" "limited" "recent" "history" "pity"; }
  .gt-limited-grid, .gt-ledger-line{ grid-template-columns:1fr; }
  .gt-recent-five-row{ grid-template-columns:34px minmax(0,1fr) auto; min-height:62px; }
  .gt-recent-five-row i{ grid-column:2 / span 2; text-align:left; }
  .gt-banner-history-row > button{ grid-template-columns:1fr; }
  .gt-banner-history-meta{ justify-content:flex-start; }
  .gt-banner-history-detail > div{ grid-template-columns:30px minmax(0,1fr) auto; }
  .gt-banner-history-detail span{ grid-column:2 / span 2; }
  .gt-banner-history-detail i{ text-align:left; }
  .gt-pity-lane{ grid-template-columns:1fr; }
}

/* Gacha tracker: refined Nyx ledger surface */
.gt-panel{
  border-radius:var(--nyx-radius-panel);
  background:
    linear-gradient(180deg, var(--nyx-compat-color-63e1b8d699e7), var(--nyx-compat-color-8c09ae494c3a));
  box-shadow:var(--nyx-compat-shadow-box-aa9418fbba18);
}
/* Same glow rail the tab groups use, in place of the old diamond + hairline
   (user 2026-08-09). */
.gt-head{ position:relative; padding-bottom:var(--nyx-space-12); border-bottom:0; }
.gt-head::after{
  content:""; position:absolute; left:0; width:var(--nyx-size-rule, 168px); bottom:2px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--nyx-color-accent-bright) 22%,
    var(--nyx-color-accent-bright) 78%, transparent);
  box-shadow:0 0 10px rgba(139,123,255,.75), 0 0 20px rgba(139,123,255,.35);
}
.gt-ttl .t{ font-size:var(--nyx-compat-size-24px); text-shadow:none; }
.gt-ttl .s{ color:var(--nyx-compat-color-hex-8f86b2); }
.gt-x{
  border-radius:var(--nyx-radius-control);
  color:var(--nyx-compat-color-hex-bdb3df);
  background:var(--nyx-compat-color-f29e98ca6e5e);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
}
.gt-x:hover{ color:var(--nyx-compat-color-hex-f7f1ff); background:var(--nyx-compat-color-c2a7119adc47); }
.gt-results{
  --gt-gold:var(--nyx-color-accent-bright);
  --gt-gold-soft:var(--nyx-compat-color-c2b0ed1f9dca);
  --gt-teal:var(--nyx-color-success);
  --gt-rose:var(--nyx-color-danger);
  --gt-panel-ink:var(--nyx-compat-color-3fa345d26be8);
  --gt-panel-line:var(--nyx-compat-color-19468350ad2a);
  --gt-panel-line-strong:var(--nyx-compat-color-f567cbf06b39);
  --gt-muted:var(--nyx-compat-color-hex-8c83aa);
  --gt-text:var(--nyx-compat-color-hex-f2ecff);
  gap:var(--nyx-space-12);
}
.gt-results::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-821fe30a43b2); }
.gt-results-top{
  gap:var(--nyx-space-8);
  padding:var(--nyx-compat-spacing-3px);
  border-radius:var(--nyx-radius-card);
  background:var(--nyx-compat-color-11565380f030);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
}
.gt-import-tab,
.gt-go,
.gt-cmd button{
  border-radius:var(--nyx-compat-radius-7px);
  color:var(--nyx-compat-color-hex-eee9ff);
  background:var(--nyx-compat-color-e44cd9eb42ee);
  box-shadow:var(--nyx-compat-shadow-box-427b3160a5ef);
}
.gt-import-tab:hover,
.gt-go:hover,
.gt-cmd button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-3337ebd01b59); filter:none; }
.gt-mode-tabs{
  padding:0;
  border-radius:var(--nyx-radius-control);
  background:transparent;
  box-shadow:none;
}
.gt-mode-tabs button{
  min-width:104px;
  height:30px;
  border-radius:var(--nyx-compat-radius-6px);
  color:var(--nyx-compat-color-hex-9288b3);
  letter-spacing:var(--nyx-compat-tracking-p1em);
}
.gt-mode-tabs button:hover{ color:var(--nyx-color-heading); background:var(--nyx-compat-color-fb2e6ba029e9); }
.gt-mode-tabs button.on{
  color:var(--nyx-compat-color-hex-f4efff);
  background:var(--nyx-compat-color-6053d5394fcf);
  box-shadow:var(--nyx-compat-shadow-box-0be1832e69ee);
}
.gt-uid{ color:var(--nyx-compat-color-hex-756d92); }
.gt-stat-strip{ gap:var(--nyx-space-6); }
.gt-stat-strip div{
  border-radius:var(--nyx-radius-control);
  padding:var(--nyx-compat-spacing-9px) var(--nyx-space-10);
  background:var(--nyx-compat-color-2beb831d1506);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
}
.gt-stat-strip div:hover{ box-shadow:var(--nyx-compat-shadow-box-c52604492861); }
.gt-stat-strip b{ color:var(--nyx-compat-color-hex-f5f0ff); text-shadow:none; }
.gt-stat-strip span{ color:var(--nyx-compat-color-hex-81789e); letter-spacing:var(--nyx-compat-tracking-p08em); }
.gt-panel-box{
  border-radius:var(--nyx-compat-radius-9px);
  padding:var(--nyx-space-12);
  background:var(--gt-panel-ink);
  box-shadow:var(--nyx-compat-shadow-box-bcd83c7eb19a);
}
.gt-panel-box:hover{ box-shadow:var(--nyx-compat-shadow-box-c52604492861); }
.gt-box-head{
  min-height:22px;
  margin-bottom:var(--nyx-compat-spacing-9px);
  padding-bottom:var(--nyx-space-8);
  border-bottom:1px solid var(--nyx-compat-color-e3785321a1c3);
}
.gt-box-head b{ color:var(--nyx-compat-color-hex-ebe4ff); letter-spacing:var(--nyx-compat-tracking-p11em); }
.gt-box-head span{ color:var(--nyx-compat-color-hex-77708f); letter-spacing:var(--nyx-compat-tracking-p07em); }
.gt-ledger-line{ gap:var(--nyx-space-6); }
.gt-ledger-line div{
  border-radius:var(--nyx-compat-radius-7px);
  padding:var(--nyx-space-8) var(--nyx-space-8);
  background:var(--nyx-compat-color-603940981cfa);
  box-shadow:var(--nyx-compat-shadow-box-afdee69de954);
}
.gt-ledger-line span{ color:var(--nyx-compat-color-hex-7f7699); }
.gt-ledger-line b{ color:var(--nyx-compat-color-hex-f5f0ff); text-shadow:none; }
.gt-ledger-current{
  border-radius:var(--nyx-compat-radius-7px);
  background:var(--nyx-compat-color-1bc55d885213);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
}
.gt-ledger-current span{ color:var(--nyx-compat-color-hex-f0eaff); }
.gt-ledger-current i{ color:var(--nyx-compat-color-hex-8d84a8); }
.gt-limited-card{
  min-height:164px;
  border-radius:var(--nyx-radius-control);
  background-color:var(--nyx-compat-color-e96c824a243a);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease;
}
.gt-limited-card:hover{
  transform:translateY(-1px);
  filter:saturate(1.03);
  box-shadow:var(--nyx-compat-shadow-box-ba720672259e);
}
.gt-limited-fade{
  background:
    linear-gradient(180deg, var(--nyx-compat-color-7066fa9eb3af) 18%, var(--nyx-compat-color-a46a69bdb4e4) 100%),
    linear-gradient(90deg, var(--nyx-compat-color-5f0e547b06d0), transparent 54%);
}
.gt-limited-copy b{ font-size:var(--nyx-compat-size-21px); text-shadow:var(--nyx-compat-shadow-text-6cb71ba0cf75); }
.gt-limited-copy span{ color:var(--nyx-compat-color-hex-a99ed0); }
.gt-limited-rateups i{
  border-radius:var(--nyx-compat-radius-4px);
  color:var(--nyx-compat-color-hex-d9d0f5);
  background:var(--nyx-compat-color-ec8c0fbcf038);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
}
.gt-recent-five-list,
.gt-banner-history-list{ gap:var(--nyx-compat-spacing-5px); }
.gt-recent-five-row,
.gt-banner-history-row{
  border-radius:var(--nyx-compat-radius-7px);
  background:var(--nyx-compat-color-756df65fb7ab);
  box-shadow:var(--nyx-compat-shadow-box-afdee69de954);
}
.gt-recent-five-row{
  grid-template-columns:34px minmax(0,1fr) minmax(86px,auto) 58px;
  min-height:44px;
}
.gt-recent-five-row:hover,
.gt-banner-history-row:hover{ background:var(--nyx-compat-color-8bb0074c1d90); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }
.gt-recent-five-row img,
.gt-recent-five-row .gt-img-fallback,
.gt-banner-history-detail img,
.gt-banner-history-detail .gt-img-fallback,
.gt-archive-card img,
.gt-total-unit img{
  box-shadow:var(--nyx-compat-shadow-box-1691062f3390);
}
.gt-recent-five-row b,
.gt-banner-history-main b,
.gt-banner-history-detail b,
.gt-archive-card b,
.gt-total-unit b{ color:var(--nyx-compat-color-hex-f7f1ff); }
.gt-recent-five-row span,
.gt-banner-history-main span,
.gt-banner-history-detail span{ color:var(--nyx-compat-color-hex-82799d); }
.gt-recent-five-row em,
.gt-banner-history-detail em,
.gt-banner-history-meta span,
.gt-paired-weapon span{
  border-radius:var(--nyx-compat-radius-4px);
  color:var(--nyx-compat-color-hex-c9c0e8);
  background:var(--nyx-compat-color-fb2e6ba029e9);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
}
.gt-recent-five-row em.guaranteed,
.gt-banner-history-detail em.guaranteed{ color:var(--nyx-compat-color-hex-e9e1ff); background:var(--nyx-compat-color-07d1907e8cd5); box-shadow:var(--nyx-compat-shadow-box-dd95ee8feb65); }
.gt-recent-five-row em.fifty-win,
.gt-banner-history-detail em.fifty-win{ color:var(--nyx-compat-color-hex-9ee9cb); background:var(--nyx-compat-color-671868faa870); box-shadow:var(--nyx-compat-shadow-box-b93c69dfafdb); }
.gt-recent-five-row em.fifty-loss,
.gt-banner-history-detail em.fifty-loss{ color:var(--nyx-compat-color-hex-f3a7b8); background:var(--nyx-compat-color-aa0979912e01); box-shadow:var(--nyx-compat-shadow-box-2dcbfeb84f84); }
.gt-recent-five-row i,
.gt-banner-history-detail i{ color:var(--nyx-compat-color-hex-a99ed0); }
.gt-banner-history-row.open{
  background:var(--nyx-compat-color-908aed0e43a2);
  box-shadow:var(--nyx-compat-shadow-box-2ff1c6c3387b);
}
.gt-banner-history-row > button{ min-height:52px; }
.gt-banner-history-detail > div{
  border-radius:var(--nyx-compat-radius-6px);
  background:var(--nyx-compat-color-603940981cfa);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
}
.gt-pity-filters,
.gt-filter-pills{ gap:var(--nyx-space-4); }
.gt-pity-filters button,
.gt-filter-pills button{
  height:27px;
  border-radius:var(--nyx-radius-small);
  color:var(--nyx-compat-color-hex-9085ad);
  background:var(--nyx-compat-color-99cc84676c14);
  box-shadow:var(--nyx-compat-shadow-box-bb3796dd11e9);
}
.gt-pity-filters button:hover,
.gt-filter-pills button:hover{ color:var(--nyx-color-heading); background:var(--nyx-compat-color-fb2e6ba029e9); }
.gt-pity-filters button.on,
.gt-filter-pills button.on{
  color:var(--nyx-compat-color-hex-f4efff);
  background:var(--nyx-compat-color-6053d5394fcf);
  box-shadow:var(--nyx-compat-shadow-box-4612ae25e725);
}
.gt-pity-lanes{ gap:var(--nyx-space-8); }
.gt-pity-lane{ grid-template-columns:138px minmax(0,1fr); }
.gt-pity-lane-label b{ color:var(--nyx-compat-color-hex-e7e0ff); }
.gt-pity-lane-label span{ color:var(--nyx-compat-color-hex-756d92); }
.gt-pity-track{
  height:28px;
  border-radius:var(--nyx-compat-radius-6px);
  background:
    linear-gradient(90deg, var(--nyx-compat-color-75ed517204d0), var(--nyx-compat-color-8bd71a949d4f) 70%, var(--nyx-compat-color-c59f81d96fd1));
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448);
}
.gt-pity-track mark{
  top:0;
  bottom:0;
  background:var(--nyx-compat-color-1141eaf15351);
  box-shadow:none;
}
.gt-pity-dot2{
  width:8px;
  height:8px;
  box-shadow:var(--nyx-compat-shadow-box-f6f060c359dc);
}
.gt-pity-dot2.guaranteed{ width:10px; height:10px; }
.gt-pity-legend{ margin-top:var(--nyx-compat-spacing-9px); }
.gt-pity-legend span{ color:var(--nyx-compat-color-hex-82799d); }
.gt-archive-tools select{
  border-radius:var(--nyx-radius-small);
  color:var(--nyx-compat-color-hex-d9d1f2);
  background:var(--nyx-compat-color-756df65fb7ab);
  box-shadow:var(--nyx-compat-shadow-box-395d9fc68a58);
}
.gt-archive-grid.expanded{ gap:var(--nyx-space-6); }
.gt-archive-card,
.gt-total-unit{
  border-radius:var(--nyx-compat-radius-7px);
  background:var(--nyx-compat-color-756df65fb7ab);
  box-shadow:var(--nyx-compat-shadow-box-afdee69de954);
}
.gt-archive-card.r5{
  background:var(--nyx-compat-color-eb34b6454d87);
  box-shadow:var(--nyx-compat-shadow-box-f799943f7f8c);
}
.gt-archive-card i,
.gt-total-unit i{ color:var(--nyx-compat-color-hex-dcd6ff); }
.gt-empty-row{ color:var(--nyx-compat-color-hex-82799d); }

/* Gacha tracker: 2026-06-30 layout pass */
.gt-ttl-results{ display:flex; align-items:baseline; gap:var(--nyx-space-12); flex-wrap:wrap; min-width:0; }
.gt-title-import{
  border:0;
  padding:var(--nyx-compat-spacing-5px) var(--nyx-compat-spacing-11px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-c9c0e8);
  background:var(--nyx-compat-color-108ef61fc9ce);
  box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a);
  border-radius:var(--nyx-radius-pill);
  font-family:var(--nyx-compat-family-ffc6cbbeca26);
  font-size:var(--nyx-compat-size-11px);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
  line-height:1;
  text-align:left;
}
.gt-title-import:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-017421d156e5); text-shadow:var(--nyx-compat-shadow-text-5b7dad0d44bf); }
.gt-title-import:focus-visible{ outline:2px solid var(--nyx-compat-color-5025bdfd2ff0); outline-offset:4px; border-radius:var(--nyx-radius-small); }
.gt-results-top{
  position:sticky;
  top:0;
  z-index:8;
  backdrop-filter:blur(14px);
  background:var(--nyx-compat-color-2a1d3e15200c);
  box-shadow:var(--nyx-compat-shadow-box-f7149d8d4644);
}
.gt-mode-tabs{
  flex:0 1 auto;
  display:flex;
  flex-wrap:wrap;
  gap:var(--nyx-compat-spacing-7px);
  padding:var(--nyx-compat-spacing-5px);
  border-radius:var(--nyx-compat-radius-13px);
  background:var(--nyx-compat-color-aead58cc9609);
  box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a);
}
.gt-mode-tabs button{
  min-width:138px;
  height:33px;
  padding:0 var(--nyx-compat-spacing-13px);
  border-radius:var(--nyx-compat-radius-9px);
  font-family:var(--nyx-compat-family-ffc6cbbeca26);
  font-size:var(--nyx-compat-size-11p5px);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  color:var(--nyx-color-text-muted);
  background:none;
}
.gt-mode-tabs button:hover{ color:var(--nyx-color-text-max); background:transparent; }
.gt-mode-tabs button.on{
  color:var(--nyx-color-text-max);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-5a47a8));
  box-shadow:var(--nyx-compat-shadow-box-807d5c88b94a);
}
.gt-tab-status{
  flex:none;
  min-height:43px;
  display:flex;
  align-items:center;
  gap:var(--nyx-space-8);
  padding:0 var(--nyx-compat-spacing-11px);
  border-radius:var(--nyx-compat-radius-9px);
  background:var(--nyx-compat-color-756df65fb7ab);
  box-shadow:var(--nyx-compat-shadow-box-afdee69de954);
}
.gt-tab-status b{
  color:var(--nyx-color-heading);
  font-family:var(--nyx-compat-family-ffc6cbbeca26);
  font-size:var(--nyx-compat-size-11px);
  font-weight:var(--nyx-weight-extrabold);
  letter-spacing:var(--nyx-compat-tracking-p09em);
  text-transform:uppercase;
  white-space:nowrap;
}
.gt-tab-status span{
  color:var(--nyx-compat-color-hex-8f86ae);
  font-size:var(--nyx-compat-size-10p5px);
  white-space:nowrap;
}
.gt-account{
  flex:none;
  max-width:230px;
  color:var(--nyx-compat-color-hex-8f86ae);
  font-family:var(--nyx-compat-family-ffc6cbbeca26);
  font-size:var(--nyx-compat-size-10p5px);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gt-account b,
.gt-account span{ display:block; min-width:0; overflow:hidden; text-overflow:ellipsis; }
.gt-account b{ color:var(--nyx-compat-color-hex-cfc6ff); font-size:var(--nyx-compat-size-10p5px); font-weight:var(--nyx-weight-extrabold); }
.gt-account span{ margin-top:var(--nyx-space-2); color:var(--nyx-compat-color-hex-7f769e); font-size:var(--nyx-compat-size-9p5px); }
.gt-overview-grid{
  grid-template-columns:minmax(340px,.95fr) minmax(380px,1.05fr);
  grid-template-areas:"summary recent" "history recent";
}
.gt-summary-card{ grid-area:summary; }
.gt-summary-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:var(--nyx-space-6);
}
.gt-summary-grid div{
  min-width:0;
  border-radius:var(--nyx-compat-radius-7px);
  padding:var(--nyx-compat-spacing-9px) var(--nyx-space-8);
  background:var(--nyx-compat-color-603940981cfa);
  box-shadow:var(--nyx-compat-shadow-box-afdee69de954);
}
.gt-summary-grid b{
  display:block;
  color:var(--nyx-compat-color-hex-f5f0ff);
  font-family:var(--nyx-font-display);
  font-size:var(--nyx-compat-size-23px);
  line-height:1;
  font-weight:var(--nyx-weight-regular);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gt-summary-grid span{
  display:block;
  margin-top:var(--nyx-compat-spacing-5px);
  color:var(--nyx-compat-color-hex-7f7699);
  font-size:var(--nyx-compat-size-9p4px);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.gt-banner-history-list{
  grid-template-columns:repeat(auto-fill, minmax(286px, 1fr));
  align-items:start;
  max-height:440px;
}
.gt-banner-history-row > button{
  min-height:92px;
  grid-template-columns:1fr;
  align-items:start;
}
.gt-banner-history-meta{ justify-content:flex-start; }
.gt-paired-weapon{ padding-top:0; }
.gt-recent-five-row em.pool,
.gt-banner-history-detail em.pool{
  color:var(--nyx-compat-color-hex-d9d0ef);
  background:var(--nyx-compat-color-e1a5a8cff80b);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79);
}
.gt-pity-view{ min-height:0; }
.gt-pity-wide{
  min-height:560px;
  display:flex;
  flex-direction:column;
}
.gt-pity-wide .gt-pity-filters{ margin-bottom:var(--nyx-space-18); }
.gt-pity-wide .gt-pity-lanes{
  flex:1 1 auto;
  justify-content:space-around;
  gap:var(--nyx-space-18);
}
.gt-pity-wide .gt-pity-lane{ grid-template-columns:172px minmax(0,1fr); gap:var(--nyx-space-16); }
.gt-pity-wide .gt-pity-lane-label b{ font-size:var(--nyx-type-small); }
.gt-pity-wide .gt-pity-lane-label span{ font-size:var(--nyx-compat-size-11px); }
.gt-pity-wide .gt-pity-track{ height:58px; border-radius:var(--nyx-compat-radius-9px); }
.gt-pity-wide .gt-pity-dot2{ width:10px; height:10px; }
.gt-pity-wide .gt-pity-dot2.guaranteed{ width:13px; height:13px; }
.gt-pity-wide .gt-pity-legend{ margin-top:var(--nyx-space-18); }

/* Gacha tracker: 2026-07-08 hero pass (nyx-0005 Phase 1) —
   pity/guarantee + your-pulls-on-current-banners hero, replacing the old
   tab-status line and current-limited metadata card. */
.gt-overview{ display:flex; flex-direction:column; gap:var(--nyx-space-14); min-width:0; }
.gt-hero{ display:grid; grid-template-columns:minmax(240px,.6fr) minmax(420px,1.4fr); gap:var(--nyx-space-12); align-items:stretch; }
.gt-hero-pity{ display:flex; flex-direction:column; min-width:0; }
.gt-hero-pity-number{ display:flex; align-items:baseline; gap:var(--nyx-space-6); margin-top:var(--nyx-space-2); }
.gt-hero-pity-number b{ font-family:var(--nyx-font-display); font-weight:var(--nyx-weight-regular); font-size:var(--nyx-type-display-large); line-height:1; color:var(--nyx-compat-color-hex-f6f3ff);
  text-shadow:var(--nyx-compat-shadow-text-e830c49fd204); }
.gt-hero-pity-number i{ font-style:normal; color:var(--nyx-color-text-faint); font-size:var(--nyx-compat-size-15px); }
.gt-hero-pity-caption{ margin-top:var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-8f84b7); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p05em); }
.gt-hero-pity-bar{ position:relative; margin-top:var(--nyx-compat-spacing-15px); height:10px; border-radius:var(--nyx-compat-radius-6px);
  background:var(--nyx-compat-color-a4a1f04d7ca4); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); overflow:hidden; }
.gt-hero-pity-fill{ position:absolute; inset:0 auto 0 0; border-radius:var(--nyx-compat-radius-6px);
  background:linear-gradient(90deg, var(--accent), var(--accent-bright)); box-shadow:var(--nyx-compat-shadow-box-4ff6bf766515); }
.gt-hero-pity-bar mark{ position:absolute; top:-3px; bottom:-3px; width:2px; padding:0;
  background:var(--nyx-compat-color-hex-bca7ff); box-shadow:var(--nyx-compat-shadow-box-890625d72f63); }
.gt-hero-pity-scale{ display:flex; justify-content:space-between; margin-top:var(--nyx-space-6); color:var(--nyx-compat-color-hex-756d92);
  font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p06em); text-transform:uppercase; }
.gt-hero-chip{ align-self:flex-start; margin-top:var(--nyx-space-16); display:inline-flex; align-items:center; gap:var(--nyx-space-6);
  padding:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-15px); border-radius:var(--nyx-radius-pill); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); font-weight:var(--nyx-weight-extrabold);
  letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }
.gt-hero-chip.pool{ color:var(--nyx-compat-color-hex-d9d0ef); background:var(--nyx-compat-color-797cbe21ae99); box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2); }
.gt-hero-chip.fifty{ color:var(--nyx-compat-color-hex-ffd7e0); background:var(--nyx-compat-color-f7205b9b2719); box-shadow:var(--nyx-compat-shadow-box-c9ec152e9430); }
.gt-hero-chip.guaranteed{ color:var(--nyx-compat-color-hex-382a0c); background:linear-gradient(160deg,var(--nyx-compat-color-hex-f3ddab),var(--nyx-compat-color-hex-caa155) 72%,var(--nyx-compat-color-hex-a9803f));
  box-shadow:var(--nyx-compat-shadow-box-e3a455deabdc); }
.gt-hero-banners{ display:grid; grid-template-columns:repeat(auto-fit, minmax(230px,1fr)); gap:var(--nyx-space-12); }
.gt-hero-banners-head{ grid-column:1 / -1; margin-bottom:var(--nyx-compat-spacing-neg-2px); color:var(--nyx-compat-color-hex-8f84b7); font-family:var(--nyx-compat-family-ffc6cbbeca26);
  font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; }
.gt-hero-banner-card{ display:flex; flex-direction:column; min-width:0; border-radius:var(--nyx-radius-card); overflow:hidden;
  background:var(--nyx-compat-color-756df65fb7ab); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); }
.gt-hero-banner-art{ position:relative; min-height:108px; background-size:cover; background-position:center 18%;
  background-color:var(--nyx-compat-color-e96c824a243a); }
.gt-hero-banner-fade{ position:absolute; inset:0;
  background:linear-gradient(180deg, var(--nyx-compat-color-0bc0473ab434) 26%, var(--nyx-compat-color-e5a1c0f60ba3) 100%); }
.gt-hero-banner-copy{ position:absolute; left:11px; right:11px; bottom:8px; z-index:1; min-width:0; }
.gt-hero-banner-copy b{ display:block; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-19px); line-height:1;
  font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:var(--nyx-compat-shadow-text-284eb2383ba8); }
.gt-hero-banner-copy span{ display:block; margin-top:var(--nyx-compat-spacing-3px); color:var(--nyx-compat-color-hex-a99ed0); font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase; }
.gt-hero-banner-pulls{ display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-5px); padding:var(--nyx-compat-spacing-9px); }
.gt-hero-banner-pulls-head{ color:var(--nyx-compat-color-hex-8f84b7); font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase;
  margin-bottom:var(--nyx-compat-spacing-1px); }
.gt-hero-pull-row{ min-width:0; display:grid; grid-template-columns:26px minmax(0,1fr) auto; align-items:center;
  gap:var(--nyx-compat-spacing-7px); padding:var(--nyx-compat-spacing-5px) var(--nyx-compat-spacing-7px); border-radius:var(--nyx-compat-radius-6px); background:var(--nyx-compat-color-c257a0381316);
  box-shadow:var(--nyx-compat-shadow-box-bb3796dd11e9); }
.gt-hero-pull-row img, .gt-hero-pull-row .gt-img-fallback{ width:26px; height:26px; border-radius:50%;
  object-fit:cover; background:linear-gradient(135deg,var(--nyx-compat-color-hex-c7b8ff),var(--nyx-compat-color-hex-51408e)); box-shadow:var(--nyx-compat-shadow-box-0c3a672f1acb); }
.gt-hero-pull-row b{ display:block; min-width:0; color:var(--nyx-compat-color-hex-f0eaff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-12p5px);
  line-height:1; font-weight:var(--nyx-weight-regular); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-hero-pull-row span{ display:block; min-width:0; margin-top:var(--nyx-space-2); color:var(--nyx-compat-color-hex-8078a0); font-size:var(--nyx-type-caption);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gt-hero-pull-row em{ border-radius:var(--nyx-compat-radius-4px); padding:var(--nyx-space-2) var(--nyx-space-6); color:var(--nyx-compat-color-hex-c9c0e8); background:var(--nyx-compat-color-fb2e6ba029e9);
  box-shadow:var(--nyx-compat-shadow-box-ebcde5a57448); font-style:normal; font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p03em);
  white-space:nowrap; }
.gt-hero-pull-row em.guaranteed{ color:var(--nyx-compat-color-hex-e9e1ff); background:var(--nyx-compat-color-6053d5394fcf);
  box-shadow:var(--nyx-compat-shadow-box-1c1679ef7a17); }
.gt-hero-pull-row em.fifty-win{ color:var(--nyx-compat-color-hex-9ee9cb); background:var(--nyx-compat-color-633aca7b1b62);
  box-shadow:var(--nyx-compat-shadow-box-061fa7f3b607); }
.gt-hero-pull-row em.fifty-loss{ color:var(--nyx-compat-color-hex-f3a7b8); background:var(--nyx-compat-color-46a17d57cf03);
  box-shadow:var(--nyx-compat-shadow-box-fd7b4fcb4d77); }
.gt-hero-pull-row em.pool{ color:var(--nyx-compat-color-hex-d9d0ef); background:var(--nyx-compat-color-8a40380d7d8a); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); }
.gt-hero-pull-row i{ font-style:normal; color:var(--nyx-compat-color-hex-8d84a8); font-size:var(--nyx-compat-size-9p5px); white-space:nowrap; }
.gt-hero-banner-card .gt-paired-weapon{ padding:0 var(--nyx-compat-spacing-9px) var(--nyx-compat-spacing-9px); }
.gt-hero-banners .gt-empty-row{ grid-column:1 / -1; }

@media (max-width: 1280px){
  .gt-results-top{ align-items:flex-start; flex-wrap:wrap; }
  .gt-overview-grid{ grid-template-columns:1fr 1fr; grid-template-areas:"summary recent" "history recent"; }
  .gt-account{ max-width:100%; }
  .gt-hero{ grid-template-columns:1fr; }
}
@media (max-width: 760px){
  .gt-method-grid{ grid-template-columns:1fr; }
  .gt-mode-tabs{ width:100%; }
  .gt-mode-tabs button{ flex:1 1 0; min-width:0; }
  .gt-account{ width:100%; }
  .gt-overview-grid{ grid-template-columns:1fr; grid-template-areas:"summary" "recent" "history"; }
  .gt-summary-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .gt-banner-history-list{ grid-template-columns:1fr; max-height:none; }
  .gt-pity-wide{ min-height:0; }
  .gt-pity-wide .gt-pity-lane{ grid-template-columns:1fr; }
  .gt-pity-wide .gt-pity-track{ height:44px; }
  .gt-hero-banners{ grid-template-columns:1fr; }
  .gt-hero-pity-number b{ font-size:var(--nyx-type-display-small); }
  .gt-hero-chip{ width:100%; justify-content:center; text-align:center; }
}

/* ===== 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:var(--nyx-space-16); flex:none; padding-top:var(--nyx-space-2); }
.db-search-tools{ position:relative; display:flex; align-items:center; gap:var(--nyx-space-8); min-width:min(440px,100%); }
.db-search-tools .gp-search{ flex:1 1 auto; min-width:0; }
.db-filter-control{ position:relative; flex:none; }
.db-filter-button{ min-height:38px; border:0; border-radius:var(--nyx-radius-control); padding:0 var(--nyx-compat-spacing-13px); cursor:pointer; display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px);
  color:var(--nyx-compat-color-hex-c9c0e9); background:var(--nyx-compat-color-143120cacd00); box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2); font:var(--nyx-compat-font-5981e2444f4b); letter-spacing:var(--nyx-compat-tracking-p11em); text-transform:uppercase; }
.db-filter-button:hover,.db-filter-button:focus-visible,.db-filter-button.on{ color:var(--nyx-color-text-max); outline:none; box-shadow:var(--nyx-compat-shadow-box-a0a55e0c71b2); }
.db-filter-button > span{ min-width:18px; height:18px; display:grid; place-items:center; border-radius:var(--nyx-radius-pill); color:var(--nyx-compat-color-hex-140d2c); background:var(--nyx-compat-color-hex-d8ceff); font-size:var(--nyx-type-caption); }
.db-filter-popout{ position:absolute; z-index:40; top:calc(100% + 8px); right:0; width:min(470px,calc(100vw - 32px)); max-height:min(520px,70vh); overflow:auto;
  border-radius:var(--nyx-compat-radius-12px); padding:var(--nyx-compat-spacing-13px); background:var(--nyx-compat-color-fe4581d04412); box-shadow:var(--nyx-compat-shadow-box-9fea6873286a); }
.db-filter-pop-head{ display:flex; align-items:center; justify-content:space-between; gap:var(--nyx-space-12); }
.db-filter-pop-head b{ color:var(--nyx-color-text-max); font:var(--nyx-compat-font-2dff53a2982e); }
.db-filter-pop-head button{ border:0; padding:var(--nyx-compat-spacing-5px) var(--nyx-compat-spacing-7px); cursor:pointer; color:var(--nyx-compat-color-hex-bfb4e5); background:transparent; font-size:var(--nyx-type-label); }
.db-filter-pop-head button:disabled{ opacity:.45; cursor:default; }
.db-filter-pop-head button:not(:disabled):hover,.db-filter-pop-head button:not(:disabled):focus-visible{ color:var(--nyx-color-text-max); outline:1px solid var(--nyx-compat-color-hex-cdbfff); border-radius:var(--nyx-radius-small); }
.db-filter-group{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-space-6); margin-top:var(--nyx-space-12); }
.db-filter-group > span{ color:var(--nyx-compat-color-hex-8f86b8); font:var(--nyx-compat-font-32a861e27db6); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase; }
.db-filter-group > div{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-6); max-height:112px; overflow:auto; padding:var(--nyx-compat-spacing-1px); }
.db-filter-group button{ min-height:31px; border:0; border-radius:var(--nyx-compat-radius-7px); padding:0 var(--nyx-space-10); display:inline-flex; align-items:center; gap:var(--nyx-space-8); cursor:pointer;
  color:var(--nyx-color-text-muted); background:var(--nyx-compat-color-e8fa77887ffa); box-shadow:var(--nyx-compat-shadow-box-f32844ea6836); font-size:var(--nyx-type-label); }
.db-filter-group button em{ color:var(--nyx-compat-color-hex-8277ad); font-size:var(--nyx-type-caption); font-style:normal; }
.db-filter-group button:hover,.db-filter-group button:focus-visible{ color:var(--nyx-color-text-max); outline:1px solid var(--nyx-compat-color-hex-cdbfff); }
.db-filter-group button.on{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-hex-6652b3); box-shadow:var(--nyx-compat-shadow-box-8f773f638f85); }
.db-filter-group button.on em{ color:var(--nyx-compat-color-hex-eeeaff); }
/* Bare tab bar; the collection search docks after the last tab (user 2026-07-16). */
.db-tabs{ display:flex; align-items:center; flex-wrap:wrap; gap:var(--nyx-space-6); flex:none; margin-top:var(--nyx-space-8); padding:0; overflow:visible; }
.db-tabs .db-search-tools{ margin-left:auto; min-width:min(360px,100%); }
.db-tabs button{ border:none; cursor:pointer; min-width:98px; height:34px; border-radius:var(--nyx-radius-control); padding:0 var(--nyx-compat-spacing-9px);
  display:flex; align-items:center; justify-content:center; gap:var(--nyx-compat-spacing-9px); background:none; color:var(--nyx-color-text-muted);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p12em); 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:var(--nyx-compat-radius-20px);
  font-size:var(--nyx-compat-size-11px); color:var(--nyx-color-surface); background:var(--nyx-color-text-faint); }
.db-tabs button:hover{ color:var(--nyx-color-text-max); }
.db-tabs button:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d8ceff); outline-offset:2px; }
.db-tabs button.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-5a47a8)); box-shadow:var(--nyx-compat-shadow-box-2c6fa8497efb); }
.db-tabs button.on b{ background:var(--nyx-color-heading); }
.db-filters{ flex:none; display:flex; flex-direction:column; gap:var(--nyx-space-8); margin-top:var(--nyx-space-12); }
.db-filter-row{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px); min-width:0; overflow-x:auto; padding:var(--nyx-space-2) var(--nyx-compat-spacing-1px); }
.db-filter-row > b{ position:sticky; left:0; z-index:1; flex:none; padding:var(--nyx-space-6) var(--nyx-compat-spacing-9px); color:var(--nyx-color-text-muted);
  background:var(--nyx-compat-color-hex-100c27); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; }
.db-filter-row button{ flex:none; border:0; border-radius:var(--nyx-compat-radius-18px); padding:var(--nyx-space-6) var(--nyx-space-10); cursor:pointer; color:var(--nyx-compat-color-hex-bdb3e5);
  background:var(--nyx-compat-color-0557dea73665); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); font-size:var(--nyx-compat-size-11px); }
.db-filter-row button:hover,
.db-filter-row button:focus-visible{ color:var(--nyx-color-text-max); outline:none; box-shadow:var(--nyx-compat-shadow-box-55a85fde1022); }
.db-filter-row button.on{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-hex-6652b3); box-shadow:var(--nyx-compat-shadow-box-8f773f638f85); }
.db-load-state{ flex:none; display:flex; align-items:center; justify-content:center; gap:var(--nyx-space-10); min-height:42px; margin-top:var(--nyx-space-12);
  border-radius:var(--nyx-radius-card); color:var(--nyx-compat-color-hex-bdb3e5); background:var(--nyx-compat-color-6eda07d8a498); font-size:var(--nyx-type-small); }
.db-load-state.error{ color:var(--nyx-compat-color-hex-f1c9d2); }
.db-load-state button{ border:0; border-radius:var(--nyx-compat-radius-16px); padding:var(--nyx-space-6) var(--nyx-space-12); cursor:pointer; color:var(--nyx-color-text-max); background:var(--nyx-compat-color-hex-6652b3); }
.db-load-state button:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d8ceff); outline-offset:2px; }
.db-load-spinner{ width:15px; height:15px; border:2px solid var(--nyx-compat-color-8ed9308625df); border-top-color:var(--nyx-compat-color-hex-cdbfff);
  border-radius:50%; animation:db-spin .8s linear infinite; }
@keyframes db-spin{ to{ transform:rotate(360deg); } }
/* "Load more" was removed 2026-08-09 — every row renders. `.db-load-more` is
   kept only for the loading/error retry rows that reuse the same look. */
.db-load-more{ align-self:center; flex:none; min-height:34px; margin-top:var(--nyx-space-8); border:0; border-radius:var(--nyx-radius-control); padding:0 var(--nyx-space-14); cursor:pointer;
  color:var(--nyx-compat-color-hex-f2edff); background:var(--nyx-compat-color-202cf7aa7285); box-shadow:var(--nyx-compat-shadow-box-fc1223acb7c7); font-size:var(--nyx-compat-size-11px); }
.db-load-more span{ margin-left:var(--nyx-compat-spacing-7px); color:var(--nyx-compat-color-hex-aaa0d4); font-size:var(--nyx-type-caption); }
.db-load-more:hover,.db-load-more:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d8ceff); outline-offset:2px; background:var(--nyx-compat-color-d57b2d640b5a); }
/* One scroller holding every category section (user 2026-08-09). */
.db-scroll{ flex:1 1 0%; min-height:0; overflow-y:auto; margin-top:var(--nyx-space-16);
  padding:var(--nyx-space-2) var(--nyx-space-8) var(--nyx-space-6) var(--nyx-space-2);
  display:flex; flex-direction:column; gap:var(--nyx-space-20); }
.db-scroll::-webkit-scrollbar{ width:7px; }
.db-scroll::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-4px); }
.db-group{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-space-10); }
.db-group-head{ display:flex; align-items:baseline; gap:var(--nyx-space-10);
  border-bottom:1px solid var(--nyx-compat-color-9a593589b5e7); padding-bottom:var(--nyx-space-6); }
.db-group-head .t{ font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-body);
  letter-spacing:var(--nyx-compat-tracking-p2em); text-transform:uppercase; color:var(--nyx-color-heading); }
.db-group-head .n{ font-size:var(--nyx-type-small); color:var(--nyx-color-text-faint); }
.db-group-toggle{ width:24px; height:24px; flex:none; border:0; padding:0; cursor:pointer;
  color:var(--nyx-color-heading); background:transparent; font-size:var(--nyx-type-title); line-height:1; }
.db-group-toggle:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
/* The bottom section holds rows with no artwork in either game channel — cut or
   not-yet-shipped content (user 2026-08-09). It reads quieter than a real
   category so it never competes with the sections above it. */
.db-group.is-unreleased{ opacity:.72; }
.db-group.is-unreleased .db-group-head{ border-bottom-style:dashed; }
.db-group-note{ margin-left:auto; font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p04em); color:var(--nyx-color-text-faint); }
/* Reserves a section's real height until it scrolls into view and paints. */
.db-grid-placeholder{ min-width:0; }
.db-rarity-toggle{ align-self:center; flex:none; min-height:34px; margin:var(--nyx-space-4) 0 var(--nyx-space-12);
  border:0; border-radius:var(--nyx-radius-control); padding:0 var(--nyx-space-14); cursor:pointer;
  color:var(--nyx-compat-color-hex-f2edff); background:var(--nyx-compat-color-202cf7aa7285);
  box-shadow:var(--nyx-compat-shadow-box-fc1223acb7c7); font-size:var(--nyx-compat-size-11px); }
.db-rarity-toggle:hover,.db-rarity-toggle:focus-visible{ outline:2px solid var(--nyx-compat-color-hex-d8ceff); outline-offset:2px; background:var(--nyx-compat-color-d57b2d640b5a); }
.db-group .db-grid{ flex:none; overflow:visible; margin-top:0; padding:0; }
.db-special-view{ min-height:0; display:flex; flex:1 1 auto; flex-direction:column; gap:var(--nyx-space-14); }
.db-special-view > .db-search-tools{ justify-content:flex-end; }

/* Gallery: wide namecards stay wide; portraits and frames use the same quiet
   caption rhythm without borrowing Database rarity frames. */
.gallery-view{ min-height:0; display:flex; flex:1 1 auto; flex-direction:column; gap:var(--nyx-space-16); }
.gallery-toolbar{ flex:none; display:flex; align-items:center; justify-content:space-between; gap:var(--nyx-space-16); }
.gallery-toolbar .db-tabs{ flex:1 1 auto; }
.gallery-toolbar .gp-search{ flex:0 1 330px; }
.gallery-grid{ min-height:0; overflow-y:auto; display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
  gap:var(--nyx-space-18); padding:var(--nyx-space-2) var(--nyx-space-8) var(--nyx-space-16) var(--nyx-space-2); align-content:start; }
.gallery-grid.is-portraits,.gallery-grid.is-avatarFrames{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); }
.gallery-grid.is-splashArts{ grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); }
.gallery-card{ min-width:0; margin:0; display:grid; gap:var(--nyx-space-8); }
.gallery-art{ width:100%; aspect-ratio:2.1/1; overflow:hidden; display:grid; place-items:center;
  border-radius:var(--nyx-radius-card); background:var(--nyx-color-surface-nested); box-shadow:var(--nyx-shadow-edge-subtle); }
.gallery-art img{ width:100%; height:100%; object-fit:cover; }
.gallery-grid.is-portraits .gallery-art,.gallery-grid.is-avatarFrames .gallery-art,.gallery-grid.is-splashArts .gallery-art{
  overflow:visible; border-radius:0; background:transparent; box-shadow:none; }
.gallery-grid.is-portraits .gallery-art,.gallery-grid.is-avatarFrames .gallery-art{ aspect-ratio:1; }
.gallery-grid.is-splashArts .gallery-art{ aspect-ratio:4/3; }
.gallery-grid.is-portraits .gallery-art img,.gallery-grid.is-avatarFrames .gallery-art img,.gallery-grid.is-splashArts .gallery-art img{ object-fit:contain; padding:0; }
.gallery-card figcaption{ min-width:0; display:grid; gap:var(--nyx-space-2); }
.gallery-card figcaption b{ color:var(--nyx-color-heading); font-size:var(--nyx-type-body); line-height:1.2; overflow-wrap:anywhere; }
/* Every tile opens the lightbox, so the art frame is a button now. It has to
   keep looking exactly like the old div. */
.gallery-art.is-open{ border:0; padding:0; cursor:zoom-in; font:inherit; color:inherit; }
.gallery-art.is-open:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
.gallery-art.is-open:hover img{ transform:scale(1.03); }
.gallery-art.is-open img{ transition:transform .18s ease; }

/* ---- Gallery lightbox ----
   Shares .db-modal / .db-modal-card for the backdrop, focus trap styling and
   close button, but not its two-column media+copy layout: here the art is the
   whole point, so the card is one wide column. Selectors are doubled up
   (.db-modal-card.gallery-lightbox-card) to win over the base rule, which is
   defined further down the file. */
.db-modal-card.gallery-lightbox-card{ width:min(1100px, 100%); display:grid; grid-template-columns:minmax(0, 1fr);
  gap:var(--nyx-space-16); }
.gallery-lightbox-art{ min-height:0; display:grid; place-items:center; }
.gallery-lightbox-art img{ max-width:100%; max-height:min(70vh, 720px); width:auto; height:auto; object-fit:contain;
  border-radius:var(--nyx-radius-card); image-rendering:auto; }
/* Show the asset at its real resolution rather than upscaling a small icon. */
.gallery-lightbox-art img[src]{ min-width:0; }
.gallery-lightbox-art span{ color:var(--nyx-compat-color-hex-f5f1ff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-42px); }
.gallery-lightbox-copy{ min-width:0; }
.gallery-lightbox-copy h2{ margin:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-42px) 0 0; color:var(--nyx-color-text-max);
  font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-28px); line-height:1.1; font-weight:var(--nyx-weight-regular); }
.gallery-lightbox-actions{ display:flex; flex-wrap:wrap; align-items:center; gap:var(--nyx-space-8); }
.gallery-lightbox-actions button{ min-height:38px; padding:0 var(--nyx-space-16); cursor:pointer;
  border:1px solid var(--nyx-color-border-strong); border-radius:var(--nyx-radius-control);
  color:var(--nyx-color-heading); background:var(--nyx-color-control-surface);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p04em); }
.gallery-lightbox-actions button:hover:not(:disabled){ color:var(--nyx-color-text-max); background:var(--nyx-color-control-surface-hover); }
.gallery-lightbox-actions button:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
.gallery-lightbox-actions button:disabled{ cursor:not-allowed; opacity:.45; }
.gallery-lightbox-status{ min-height:1em; color:var(--nyx-color-text-muted); font-size:var(--nyx-type-caption); }
@media (max-width:760px){
  .gallery-lightbox-art img{ max-height:52vh; }
  .gallery-lightbox-actions button{ flex:1 1 auto; }
}
.db-grid{ flex:1 1 0%; min-height:0; overflow-y:auto; margin-top:var(--nyx-space-16); padding:var(--nyx-space-2) var(--nyx-space-8) var(--nyx-space-6) var(--nyx-space-2);
  display:grid; grid-template-columns:repeat(auto-fill, minmax(112px, 1fr)); gap:var(--nyx-space-14); align-content:start; }
.db-grid::-webkit-scrollbar{ width:7px; }
.db-grid::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-4px); }
.db-card{ appearance:none; min-width:0; min-height:128px; border:0; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; justify-content:flex-start; gap:var(--nyx-compat-spacing-9px); padding:0; text-align:center; color:inherit;
  border-radius:0; background:transparent; box-shadow:none; }
.db-card:hover,
.db-card:focus-visible{ outline:none; }
.db-card:hover .db-art,.db-card:focus-visible .db-art{ transform:translateY(-3px);
  box-shadow:var(--nyx-compat-shadow-box-1006c3ab596f); }
.db-art{ width:88px; height:88px; border-radius:var(--nyx-radius-panel); overflow:hidden; display:grid; place-items:center; flex:none;
  background:radial-gradient(circle at 50% 28%, var(--nyx-compat-color-hex-30275c), var(--nyx-compat-color-hex-0d0a24) 76%);
  box-shadow:var(--nyx-compat-shadow-box-9450b2b0c8ea); transition:transform .2s,box-shadow .2s; }
.db-art img{ width:100%; height:100%; object-fit:contain; padding:var(--nyx-space-6); }
.db-art span{ font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-24px); color:var(--nyx-color-heading); text-shadow:var(--nyx-compat-shadow-text-8f773f638f85); }
.db-item-frame{ overflow:visible; background:none; box-shadow:none; }
.db-item-frame.db-art{ --cm-frame-scale:.42308; }
.db-item-frame.wonder-art{ --cm-frame-scale:.53846; }
.db-item-frame.db-modal-media{ --cm-frame-scale:1.25; width:260px; height:260px; min-height:260px; justify-self:center; }
.db-item-frame.wonder-detail-art,.db-item-frame.pot-detail-art{ --cm-frame-scale:1.05; width:218.4px; height:218.4px; justify-self:center; }
.db-item-frame.pot-art{ --cm-frame-scale:.72115; width:150px; height:150px; }
.db-item-frame .cm-item-frame-canvas{ filter:var(--nyx-compat-shadow-drop-3570bd40209b); }
.db-item-frame-portrait{ position:relative; display:block; isolation:isolate; overflow:hidden; background:var(--cmf-fill); }
.db-item-frame-portrait-fill,.db-item-frame-portrait-glow,.db-item-frame-portrait-media,.db-item-frame-portrait-rim{ position:absolute; inset:0; }
.db-item-frame-portrait-fill{ z-index:0; overflow:hidden; background:var(--cmf-fill); }
.db-item-frame-portrait-glow{ left:50%; top:46%; width:98%; height:72%; border-radius:50%; transform:translate(-50%,-50%); background:var(--cmf-glow-grad); filter:blur(10px); }
.db-item-frame-portrait-media{ z-index:1; display:grid; place-items:center; overflow:hidden; }
.db-item-frame-portrait-media img{ width:100%; height:100%; object-fit:contain; }
.db-item-frame-portrait-media > span{ color:var(--nyx-compat-color-hex-f5f1ff); font-family:var(--nyx-font-display); font-size:var(--nyx-type-title); text-shadow:var(--nyx-compat-shadow-text-4eb7f4cb371f); }
.db-item-frame-portrait-rim{ z-index:2; width:100%; height:100%; pointer-events:none; }
.db-item-frame-portrait.tcg-detail-image{ width:min(100%,338px); height:min(520px,calc(100vh - 180px)); aspect-ratio:208/320; }
.db-name{ width:100%; flex:none; font-size:var(--nyx-compat-size-12p5px); line-height:1.2; color:var(--nyx-color-text-soft);
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; text-overflow:ellipsis; }
.db-modal{ position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:var(--nyx-space-24);
  background:var(--nyx-compat-color-e4eddc181c05); backdrop-filter:blur(8px); }
.db-modal-card{ position:relative; width:min(880px, 100%); max-height:min(760px, calc(100vh - 48px)); overflow:auto;
  display:grid; grid-template-columns:minmax(220px, .7fr) minmax(0, 1fr); gap:var(--nyx-space-24); padding:var(--nyx-space-24);
  border-radius:var(--nyx-compat-radius-18px); background:linear-gradient(160deg, var(--nyx-compat-color-96ac767b5492), var(--nyx-compat-color-c8461894b751));
  box-shadow:var(--nyx-compat-shadow-box-1e2e5d9821c9); }
.db-modal-close{ position:absolute; top:12px; right:12px; z-index:2; width:36px; height:36px; border:0;
  border-radius:50%; cursor:pointer; display:grid; place-items:center; color:var(--nyx-compat-color-hex-d8d0f7); background:var(--nyx-compat-color-846b4d5f1ca2);
  box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a); }
.db-modal-close:hover,
.db-modal-close:focus-visible{ outline:none; color:var(--nyx-color-text-max); background:var(--nyx-compat-color-0028f641c770);
  box-shadow:var(--nyx-compat-shadow-box-bc1df0be00e1); }
.db-modal-media{ min-height:260px; display:grid; place-items:center; align-self:start; }
.db-modal-media img{ width:100%; max-height:min(460px, calc(100vh - 120px)); object-fit:contain; }
.db-modal-media span{ color:var(--nyx-compat-color-hex-f5f1ff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-42px); text-shadow:var(--nyx-compat-shadow-text-7d6ceea671c0); }
.db-modal-copy{ min-width:0; padding:var(--nyx-space-12) var(--nyx-space-8) var(--nyx-space-4) 0; color:var(--nyx-compat-color-hex-ddd5f6); overflow-wrap:anywhere; }
.db-modal-kind{ color:var(--nyx-compat-color-hex-9f95ca); font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-label); font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; }
.db-modal-copy h2{ margin:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-42px) 0 0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-32px); line-height:1.05; font-weight:var(--nyx-weight-regular); }
.db-modal-description{ margin:var(--nyx-space-14) 0 0; color:var(--nyx-compat-color-hex-e1daf8); font-size:var(--nyx-type-body); line-height:1.55; white-space:pre-wrap; overflow-wrap:anywhere; }
.db-modal-fields{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--nyx-space-8); margin:var(--nyx-space-18) 0 0; }
.db-modal-fields div{ min-width:0; padding:var(--nyx-space-10) var(--nyx-space-12); border-radius:var(--nyx-compat-radius-9px); background:var(--nyx-compat-color-0557dea73665);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); }
.db-modal-fields dt{ color:var(--nyx-compat-color-hex-9f95ca); font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-black); letter-spacing:var(--nyx-compat-tracking-p11em); text-transform:uppercase; }
.db-modal-fields dd{ margin:var(--nyx-space-4) 0 0; color:var(--nyx-compat-color-hex-f3efff); font-size:var(--nyx-compat-size-13px); line-height:1.35; overflow-wrap:anywhere; }
.db-modal-skills{ margin-top:var(--nyx-compat-spacing-22px); }
.db-modal-skills > h3{ margin:0 0 var(--nyx-space-10); color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-23px); font-weight:var(--nyx-weight-regular); }
.db-modal-skills > article{ padding:var(--nyx-compat-spacing-13px); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-ad052fb00d94);
  box-shadow:var(--nyx-compat-shadow-box-f32844ea6836); }
.db-modal-skills > article + article{ margin-top:var(--nyx-compat-spacing-9px); }
.db-modal-skills article > span{ color:var(--nyx-compat-color-hex-9f95ca); font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-black); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; }
.db-modal-skills h4{ margin:var(--nyx-space-4) 0 0; color:var(--nyx-color-text-max); font-size:var(--nyx-compat-size-15px); }
.db-modal-skills p{ margin:var(--nyx-space-8) 0 0; color:var(--nyx-compat-color-hex-d9d1f3); font-size:var(--nyx-compat-size-13px); line-height:1.5; white-space:pre-wrap; }
.db-modal-skills article > div{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-6); margin-top:var(--nyx-space-10); }
.db-modal-skills em{ padding:var(--nyx-space-4) var(--nyx-space-8); border-radius:var(--nyx-compat-radius-20px); color:var(--nyx-color-text-soft); background:var(--nyx-compat-color-5f4cd78a5abc);
  font-size:var(--nyx-type-label); font-style:normal; }
.db-empty{ margin:auto; color:var(--nyx-color-text-faint); font-size:var(--nyx-type-body); letter-spacing:var(--nyx-compat-tracking-p04em); }

/* Miliastra Wonderland: source-driven filters with a deliberately bare detail
   image, matching the TCG/Pot detail treatment rather than boxing the art. */
.wonder-view{ flex:1 1 0%; min-width:0; min-height:0; display:flex; flex-direction:column; }
.wonder-head{ display:flex; align-items:center; gap:var(--nyx-space-16); flex:none; }
.wonder-tabs{ display:flex; align-items:center; gap:var(--nyx-space-6); flex:none; margin-top:var(--nyx-space-12); overflow-x:auto; padding:var(--nyx-compat-spacing-3px); }
.wonder-tabs button{ border:0; border-radius:var(--nyx-radius-control); min-width:96px; height:34px; padding:0 var(--nyx-compat-spacing-9px); cursor:pointer;
  display:flex; align-items:center; justify-content:center; gap:var(--nyx-space-8); color:var(--nyx-compat-color-hex-bdb3e5); background:var(--nyx-compat-color-6eda07d8a498); }
.wonder-tabs button:hover,.wonder-tabs button:focus-visible{ color:var(--nyx-color-text-max); outline:2px solid var(--nyx-compat-color-e7f2ba89903c); outline-offset:-2px; }
.wonder-tabs button.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-5a47a8)); box-shadow:var(--nyx-compat-shadow-box-2c6fa8497efb); }
.wonder-tabs button b{ min-width:25px; border-radius:var(--nyx-compat-radius-20px); padding:var(--nyx-space-2) var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-6652b3); background:var(--nyx-color-heading); font-size:var(--nyx-type-label); text-align:center; }
.wonder-filters{ flex:none; display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-7px); margin-top:var(--nyx-space-10); }
.wonder-filter-row{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px); min-width:0; overflow-x:auto; padding:var(--nyx-space-2) var(--nyx-compat-spacing-1px); }
.wonder-filter-row > b{ position:sticky; left:0; z-index:1; flex:none; min-width:75px; padding:var(--nyx-space-6) var(--nyx-compat-spacing-9px); border-radius:var(--nyx-compat-radius-16px);
  color:var(--nyx-compat-color-hex-aaa0d4); background:var(--nyx-compat-color-hex-0d0920); font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p09em); text-transform:uppercase; }
.wonder-filter-row button{ flex:none; border:0; border-radius:var(--nyx-compat-radius-18px); padding:var(--nyx-space-6) var(--nyx-compat-spacing-9px); cursor:pointer; color:var(--nyx-compat-color-hex-bdb3e5); background:var(--nyx-compat-color-0557dea73665); }
.wonder-filter-row button span{ font-style:normal; }
.wonder-filter-row button em{ margin-left:var(--nyx-space-6); color:var(--nyx-compat-color-hex-8f84bb); font-size:var(--nyx-type-caption); font-style:normal; }
.wonder-filter-row button:hover,.wonder-filter-row button:focus-visible{ color:var(--nyx-color-text-max); outline:1px solid var(--nyx-compat-color-127b1fcd69b1); }
.wonder-filter-row button.on{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-hex-6652b3); box-shadow:var(--nyx-compat-shadow-box-8f773f638f85); }
.wonder-filter-row button.on em{ color:var(--nyx-compat-color-hex-ece7ff); }
.wonder-grid{ flex:1 1 0%; min-height:0; overflow-y:auto; margin-top:var(--nyx-compat-spacing-13px); padding:var(--nyx-space-2) var(--nyx-space-8) var(--nyx-space-8) var(--nyx-space-2);
  display:grid; grid-template-columns:repeat(auto-fill,minmax(138px,1fr)); align-content:start; gap:var(--nyx-space-10); }
.wonder-card{ min-width:0; min-height:150px; border:0; border-radius:0; padding:0; cursor:pointer; display:flex; flex-direction:column;
  align-items:center; gap:var(--nyx-compat-spacing-9px); color:var(--nyx-compat-color-hex-f7f4ff); background:transparent; box-shadow:none; }
.wonder-card:hover,.wonder-card:focus-visible{ outline:none; }
.wonder-card:hover > span,.wonder-card:focus-visible > span{ transform:translateY(-2px); box-shadow:var(--nyx-compat-shadow-box-797c1d1480ff); }
.wonder-card > span{ width:112px; height:112px; border-radius:var(--nyx-radius-card); overflow:hidden; display:grid; place-items:center; color:var(--nyx-compat-color-hex-d9d0ff);
  background:radial-gradient(circle at 50% 34%,var(--nyx-compat-color-e1b276e64ad6),var(--nyx-compat-color-1653c6f86f8e)); box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-24px); transition:transform .2s,box-shadow .2s; }
.wonder-card img{ width:100%; height:100%; object-fit:contain; }
.wonder-card > b{ width:100%; font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-15px); line-height:1.15; font-weight:var(--nyx-weight-regular); text-align:center;
  overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.wonder-back{ align-self:flex-start; flex:none; border:0; border-radius:var(--nyx-compat-radius-18px); padding:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-13px); cursor:pointer; display:flex; align-items:center; gap:var(--nyx-compat-spacing-7px);
  color:var(--nyx-compat-color-hex-d8d0f4); background:var(--nyx-compat-color-ac1e946fec49); }
.wonder-back:hover,.wonder-back:focus-visible{ color:var(--nyx-color-text-max); outline:2px solid var(--nyx-compat-color-hex-cdbfff); outline-offset:2px; }
.wonder-back span{ font-size:var(--nyx-type-section); line-height:.7; }
.wonder-detail-scroll{ flex:1 1 0%; min-height:0; overflow:auto; margin-top:var(--nyx-space-12); }
.wonder-detail-panel{ min-height:100%; display:grid; grid-template-columns:minmax(260px,48%) minmax(260px,1fr); align-items:center; gap:var(--nyx-space-32); padding:var(--nyx-space-16) var(--nyx-compat-spacing-22px) var(--nyx-space-28); }
.wonder-detail-image{ display:block; width:100%; max-height:min(620px,calc(100vh - 190px)); object-fit:contain; filter:var(--nyx-compat-shadow-drop-8a91c483cc7b); }
.wonder-detail-fallback{ display:grid; place-items:center; min-height:280px; color:var(--nyx-compat-color-hex-eee8ff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-54px); text-shadow:var(--nyx-compat-shadow-text-7d6ceea671c0); }
.wonder-detail-copy > span{ color:var(--nyx-compat-color-hex-9f95ca); font-size:var(--nyx-type-label); font-weight:var(--nyx-weight-black); letter-spacing:var(--nyx-compat-tracking-p11em); text-transform:uppercase; }
.wonder-detail-copy h2{ margin:var(--nyx-space-8) 0 0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-34px); line-height:1.08; font-weight:var(--nyx-weight-regular); }
.wonder-detail-copy dl{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--nyx-space-8); margin:var(--nyx-space-20) 0 0; }
.wonder-detail-copy dl div{ min-width:0; padding:var(--nyx-space-10) var(--nyx-space-12); border-radius:var(--nyx-compat-radius-9px); background:var(--nyx-compat-color-0557dea73665); box-shadow:var(--nyx-compat-shadow-box-b68af75b023b); }
.wonder-detail-copy dt{ color:var(--nyx-compat-color-hex-9f95ca); font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-black); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; }
.wonder-detail-copy dd{ margin:var(--nyx-space-4) 0 0; color:var(--nyx-compat-color-hex-f3efff); font-size:var(--nyx-compat-size-13px); overflow-wrap:anywhere; }
.wonder-detail-art,.pot-detail-art{ width:100%; min-width:0; border-radius:var(--nyx-compat-radius-12px); align-self:start; }
.tcg-detail-copy,.pot-detail-copy,.wonder-detail-copy{ min-width:0; overflow-wrap:anywhere; }
.tcg-detail-copy p,.pot-detail-copy p,.wonder-detail-copy p{ white-space:pre-wrap; overflow-wrap:anywhere; }

/* ===== Character Materials (Art of Khemia) ===== */
.cm-overlay{ position:absolute; inset:0; z-index:60; display:grid; place-items:center;
  background:var(--nyx-compat-color-b94175ee48ef); 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, var(--nyx-compat-color-186544704d71), var(--nyx-compat-color-8163da2e19f6));
  border-radius:var(--nyx-compat-radius-20px); box-shadow:var(--nyx-compat-shadow-box-d61c1b58a40d);
  padding:var(--nyx-compat-spacing-22px) var(--nyx-compat-spacing-26px) var(--nyx-space-18); 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:var(--nyx-space-18); }
.cm-load-eye{ width:72px; height:58px; background:linear-gradient(160deg,var(--nyx-compat-color-hex-f8f2ff),var(--nyx-compat-color-hex-9a89ea) 70%,var(--nyx-compat-color-hex-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:var(--nyx-compat-shadow-drop-0edc81790589); 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:var(--nyx-space-14); 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:var(--nyx-font-display); font-size:var(--nyx-compat-size-24px); color:var(--nyx-compat-color-hex-f6f3ff); text-shadow:var(--nyx-compat-shadow-text-2c6fa8497efb); }
/* 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:var(--nyx-space-10); border:0; cursor:pointer; padding:var(--nyx-space-6) var(--nyx-space-12) var(--nyx-space-6) var(--nyx-space-8); border-radius:var(--nyx-radius-card);
  background:var(--nyx-compat-color-8db531e4cd34); box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a); color:var(--nyx-compat-color-hex-f6f3ff);
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); transition:box-shadow .15s, background .15s; }
.cm-section-btn:hover{ background:var(--nyx-compat-color-42196b6f81e6); box-shadow:var(--nyx-compat-shadow-box-225a64c2e759); }
.cm-section-btn .lbl{ line-height:1; }
.cm-section-btn .chev{ font-size:var(--nyx-compat-size-13px); color:var(--nyx-compat-color-hex-b3a6f0); }
.cm-section-menu{ position:absolute; left:0; top:calc(100% + 6px); z-index:60; min-width:206px; display:flex; flex-direction:column; gap:var(--nyx-space-2);
  padding:var(--nyx-space-6); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-d16c85e39cab); box-shadow:var(--nyx-compat-shadow-box-8463e82ed343); }
.cm-section-menu button{ border:0; cursor:pointer; text-align:left; padding:var(--nyx-compat-spacing-9px) var(--nyx-space-12); border-radius:var(--nyx-compat-radius-7px); background:transparent;
  color:var(--nyx-color-text-soft); font-family:var(--nyx-font-display); font-size:var(--nyx-type-lead); transition:color .12s, background .12s; }
.cm-section-menu button:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-c2b0ed1f9dca); }
.cm-section-menu button.on{ color:var(--nyx-compat-color-hex-0c0820); background:linear-gradient(160deg,var(--nyx-compat-color-hex-cdb3ff),var(--nyx-compat-color-hex-9a89ea)); }
.cm-ttl .s{ font-size:var(--nyx-type-small); color:var(--nyx-color-text-muted); letter-spacing:var(--nyx-compat-tracking-p04em); margin-top:var(--nyx-compat-spacing-1px); }
.cm-games{ margin-left:auto; display:flex; align-items:center; gap:var(--nyx-compat-spacing-9px); }
.cm-gi{ width:42px; height:42px; flex:none; border:none; cursor:pointer; padding:0; border-radius:50%;
  background:var(--nyx-compat-color-787fb7638b75); box-shadow:var(--nyx-compat-shadow-box-1a5cbb61015a);
  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:var(--nyx-compat-shadow-box-589dd9e61c87); }
.cm-x{ flex:none; width:34px; height:34px; border:none; cursor:pointer; border-radius:50%; margin-left:var(--nyx-space-6);
  display:grid; place-items:center; color:var(--nyx-compat-color-hex-cdc3f3); font-size:var(--nyx-type-body);
  background:var(--nyx-compat-color-aa039c2853d0); box-shadow:var(--nyx-compat-shadow-box-9957f5618992); transition:background .2s, color .2s; }
.cm-x:hover{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-ffc2d1),var(--nyx-compat-color-hex-d95577)); color:var(--nyx-compat-color-hex-2b0a14); }
.cm-x.sm{ width:30px; height:30px; font-size:var(--nyx-type-small); }
.cm-tabs{ display:flex; gap:var(--nyx-compat-spacing-9px); flex:none; margin-top:var(--nyx-space-16); }
.cm-tabs button{ position:relative; width:92px; min-height:76px; border:0; cursor:pointer; padding:var(--nyx-space-10) var(--nyx-compat-spacing-7px) var(--nyx-space-8); border-radius:var(--nyx-compat-radius-9px);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--nyx-compat-spacing-7px); overflow:hidden;
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-10p5px); line-height:1.1; letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; color:var(--nyx-color-text-muted);
  background:linear-gradient(160deg,var(--nyx-compat-color-ef51e2874371),var(--nyx-compat-color-d91eb10eb4db));
  box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2); transition:color .2s,background .2s,transform .2s,box-shadow .2s; }
.cm-tab-orbit{ position:relative; width:28px; height:28px; border:1px solid var(--nyx-compat-color-f6b07e29e7bf); border-radius:50%; }
.cm-tab-orbit::before{ content:""; position:absolute; inset:5px; border:1px solid var(--nyx-compat-color-deb9ef182902); border-radius:50%; }
.cm-tab-orbit i{ position:absolute; left:50%; top:50%; width:6px; height:6px; transform:translate(-50%,-50%) rotate(45deg); background:var(--nyx-compat-color-hex-a493f1); }
.cm-tabs button:hover,.cm-tabs button:focus-visible{ color:var(--nyx-color-text-max); transform:translateY(-2px); outline:none;
  box-shadow:var(--nyx-compat-shadow-box-714b050e24e2); }
.cm-tabs button.on{ color:var(--nyx-compat-color-hex-f6f3ff); background:linear-gradient(180deg, var(--nyx-compat-color-8db4a9cbacb0), var(--nyx-compat-color-86af42f3a4fb));
  box-shadow:var(--nyx-compat-shadow-box-9ac84fc386cc); }
.cm-body{ flex:1; min-height:0; overflow-y:auto; padding:var(--nyx-space-18) var(--nyx-space-8) var(--nyx-space-6) var(--nyx-space-2); display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-22px); }
.cm-body::-webkit-scrollbar{ width:7px; }
.cm-body::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-f77d2c801a14); border-radius:var(--nyx-compat-radius-4px); }
.cm-group{ display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-13px); }
.cm-ghd{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-11px); }
.cm-ghd .t{ font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-19px); color:var(--nyx-color-heading); }
.cm-ghd .c{ font-size:var(--nyx-type-small); color:var(--nyx-color-surface); background:linear-gradient(160deg,var(--nyx-compat-color-hex-d3c8ff),var(--nyx-compat-color-hex-9a89ea));
  padding:var(--nyx-space-2) var(--nyx-compat-spacing-11px); border-radius:var(--nyx-compat-radius-20px); font-weight:var(--nyx-weight-semibold); }
.cm-grid{ display:grid; grid-template-columns:repeat(auto-fill, 96px); gap:var(--nyx-space-18) var(--nyx-compat-spacing-15px); }
.cm-grid-recent{ grid-template-columns:repeat(auto-fit, minmax(96px, 108px)); }
.cm-cell{ position:relative; width:96px; padding:0; transition:transform .2s; }
.cm-cell-open{ width:100%; border:none; background:none; cursor:pointer; padding:0; display:flex; flex-direction:column; align-items:center; gap:var(--nyx-space-6); color:inherit; }
.cm-cell:hover{ transform:translateY(-3px); }
.cm-cell-open:focus-visible{ outline:none; }
.cm-cell:hover .disc,.cm-cell:focus-within .disc{ box-shadow:inset 0 0 0 2.5px var(--character-hover),0 0 20px var(--character-hover-glow),0 5px 12px rgba(0,0,0,.55); }
.cm-cell.hidden{ opacity:.42; filter:grayscale(.9) brightness(.72); }
.cm-cell.hide-mode .disc{ box-shadow:var(--nyx-compat-shadow-box-1a751288d68d); }
.cm-cell .hm{ margin-top:var(--nyx-compat-spacing-neg-3px); min-height:17px; padding:var(--nyx-space-2) var(--nyx-compat-spacing-7px); border-radius:var(--nyx-radius-pill);
  font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; color:var(--nyx-compat-color-hex-ffd7e1);
  background:var(--nyx-compat-color-2a7caa893352); box-shadow:var(--nyx-compat-shadow-box-c43e29902ba9); }
.cm-cell.hidden .hm{ color:var(--nyx-compat-color-hex-0b0716); background:linear-gradient(160deg,var(--nyx-compat-color-hex-ff9db4),var(--nyx-compat-color-hex-dd5f86)); }
.cm-cell .cn{ font-size:var(--nyx-compat-size-12p5px); color:var(--nyx-color-text-soft); max-width:96px; text-align:center; line-height:1.2;
  white-space:normal; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow-wrap:anywhere; text-overflow:ellipsis; }
.cm-cell:hover .cn{ color:var(--nyx-color-text-max); }
.cm-favourite-star{ position:absolute; z-index:3; top:-5px; right:3px; width:25px; height:25px; display:grid; place-items:center;
  border:0; border-radius:50%; cursor:pointer; color:var(--nyx-compat-color-hex-d7cff8); background:var(--nyx-compat-color-91b89a48f5ff);
  box-shadow:var(--nyx-compat-shadow-box-8b626a9e5fb7); font-size:var(--nyx-type-lead); line-height:1;
  opacity:0; pointer-events:none; transform:scale(.86); transition:opacity .15s,transform .15s,color .15s; }
.cm-favourite-star.on{ color:var(--nyx-compat-color-hex-d7cff8); box-shadow:var(--nyx-compat-shadow-box-8b626a9e5fb7); }
.cm-cell:hover .cm-favourite-star,.cm-cell:focus-within .cm-favourite-star{ opacity:1; pointer-events:auto; transform:scale(1); }
.cm-favourite-star:hover,.cm-favourite-star:focus-visible{ color:var(--nyx-color-text-max); outline:2px solid var(--character-hover); outline-offset:2px; }

.cm-unfav-overlay{ position:fixed; inset:0; z-index:1000; display:grid; place-items:center; padding:var(--nyx-space-18); background:var(--nyx-compat-color-eac178282411); backdrop-filter:blur(6px); }
.cm-unfav-card{ width:min(420px,100%); padding:var(--nyx-space-24); border-radius:var(--nyx-compat-radius-16px); color:var(--nyx-color-heading); background:linear-gradient(180deg,var(--nyx-compat-color-hex-211946),var(--nyx-color-surface));
  box-shadow:var(--nyx-compat-shadow-box-63bc77e7458c); font-family:var(--nyx-compat-family-bbbd64e38bdd); }
.cm-unfav-card h2{ margin:0 0 var(--nyx-space-8); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-23px); font-weight:var(--nyx-weight-regular); }
.cm-unfav-card p{ margin:0 0 var(--nyx-space-18); color:var(--nyx-compat-color-hex-aaa0cf); font-size:var(--nyx-compat-size-13px); }
.cm-unfav-suppress,.cm-unfav-card fieldset label{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-9px); cursor:pointer; font-size:var(--nyx-compat-size-13px); }
.cm-unfav-card fieldset{ margin:var(--nyx-compat-spacing-13px) 0 0 var(--nyx-compat-spacing-25px); padding:var(--nyx-space-10) var(--nyx-space-12); display:flex; gap:var(--nyx-space-18); border:1px solid var(--nyx-compat-color-92028f0fbac1); border-radius:var(--nyx-radius-card); }
.cm-unfav-card legend{ padding:0 var(--nyx-compat-spacing-5px); color:var(--nyx-compat-color-hex-9f94c8); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }
.cm-unfav-actions{ display:flex; justify-content:flex-end; gap:var(--nyx-space-10); margin-top:var(--nyx-compat-spacing-22px); }
.cm-unfav-actions button{ border:0; border-radius:var(--nyx-compat-radius-9px); padding:var(--nyx-space-10) var(--nyx-space-14); cursor:pointer; color:var(--nyx-compat-color-hex-ded8f5); background:var(--nyx-compat-color-c201d2dab2c4); }
/* Actually red, not pink (user 2026-08-09): this button destroys a pin, so it
   should read as a destructive action at a glance. White on a deep red clears
   AA contrast. */
.cm-unfav-actions button.danger{ color:#fff; background:linear-gradient(160deg,#e03131,#b02020); font-weight:var(--nyx-weight-bold); }
.cm-unfav-actions button.danger:hover{ background:linear-gradient(160deg,#f03e3e,#c42626); }
.cm-unfav-actions button:focus-visible{ outline:2px solid var(--accent-bright); outline-offset:2px; }

/* 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%, var(--nyx-compat-color-hex-1b1640)), var(--nyx-compat-color-hex-0d0a24) 78%);
  box-shadow:var(--nyx-compat-shadow-box-0e370ee0fee5);
  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:var(--nyx-font-display); font-size:var(--nyx-compat-size-26px); color:var(--nyx-compat-color-hex-f3efff); text-shadow:var(--nyx-compat-shadow-text-8d10f63f20a0); }
.cm-av.big .mono{ font-size:var(--nyx-compat-size-34px); }

/* material popup */
.cm-pop-wrap{ position:absolute; inset:0; z-index:8; display:grid; place-items:center;
  background:var(--nyx-compat-color-56fe3d9008ce); 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, var(--nyx-compat-color-a6e5f5218d68), var(--nyx-compat-color-c8461894b751));
  border-radius:var(--nyx-compat-radius-18px); box-shadow:var(--nyx-compat-shadow-box-9841943e0a7f);
  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, var(--nyx-compat-color-d0657de71cc7) 0%, var(--nyx-compat-color-2057d7514864) 46%, var(--nyx-compat-color-95f2d8b14956) 76%, var(--nyx-compat-color-6b3b23395b93) 100%),
    linear-gradient(180deg, var(--nyx-compat-color-a1e7db0468c7), var(--nyx-compat-color-7660045b847a)); }
.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%), var(--nyx-compat-color-hex-080612); }
.cm-pop-art::before{ content:""; position:absolute; inset:16px; border-radius:var(--nyx-compat-radius-16px);
  box-shadow:var(--nyx-compat-shadow-box-fa2dd89eea6b);
  pointer-events:none; z-index:2; }
.cm-pop-art::after{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, var(--nyx-compat-color-609f4c158629), var(--nyx-compat-color-ff71a483a031) 45%, var(--nyx-compat-color-39bc89db1178)); }
.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:var(--nyx-compat-spacing-neg-125px) 0 0 var(--nyx-compat-spacing-neg-125px); border-radius:50%;
  border:1px solid var(--nyx-compat-color-821fe30a43b2); box-shadow:var(--nyx-compat-shadow-box-fd448c6463cd);
  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:var(--nyx-font-display); font-size:var(--nyx-compat-size-16a52310e77d); line-height:.95; color:var(--nyx-compat-color-hex-f8f2ff);
  text-shadow:var(--nyx-compat-shadow-text-52f94cc077a8); }
/* 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:var(--nyx-space-8) var(--nyx-space-16); }
.cm-pop-name-wrap{ position:relative; display:inline-flex; align-items:center; gap:var(--nyx-space-14); }
.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:var(--nyx-compat-shadow-box-10a83928663e);
  -webkit-mask:none; mask:none; filter:saturate(1.08); pointer-events:none; }
.cm-pop-meta-inline{ display:inline-flex; align-items:center; gap:var(--nyx-space-10); }
.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:var(--nyx-space-8); margin-top:var(--nyx-space-14); }
.cm-pop-chip{ min-height:30px; display:inline-flex; align-items:center; gap:var(--nyx-space-8); padding:0 var(--nyx-compat-spacing-11px) 0 var(--nyx-space-6); border-radius:var(--nyx-radius-pill);
  font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; color:var(--nyx-compat-color-hex-ded6ff);
  background:var(--nyx-compat-color-62ee2642f92c); box-shadow:var(--nyx-compat-shadow-box-b97764a70285); }
.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,var(--nyx-color-accent-bright)) 28%, var(--nyx-compat-color-60c82e1a71d3)), var(--nyx-compat-color-072b42e83151));
  box-shadow:var(--nyx-compat-shadow-box-127af3a3b9c7); }
.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, var(--nyx-color-accent-bright)); }
.cm-meta-symbol svg{ width:100%; height:100%; display:block; filter:var(--nyx-compat-shadow-drop-8a769110fcd3); }
.cm-meta-symbol.img{ width:25px; height:25px; }
.cm-meta-symbol.img img{ width:100%; height:100%; object-fit:contain; display:block; filter:var(--nyx-compat-shadow-drop-90fd8f78e743); }
.cm-pop-tags .rr.r5{ color:var(--nyx-compat-color-hex-100b26); background:linear-gradient(160deg,var(--nyx-compat-color-hex-f5f0ff),var(--nyx-color-accent-bright)); box-shadow:var(--nyx-compat-shadow-box-3600d55fef4c); }
.cm-pop-tags .rr.r4{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-hex-9a89ea),var(--nyx-compat-color-hex-6f57bf)); }
.cm-pop-tags .el{ box-shadow:var(--nyx-compat-shadow-box-d343118307f4); }
.cm-pop-main{ min-width:0; width:100%; overflow-y:auto; padding:var(--nyx-space-28) var(--nyx-compat-spacing-30px) var(--nyx-compat-spacing-26px); display:flex; flex-direction:column; gap:var(--nyx-space-14);
  background:linear-gradient(90deg, var(--nyx-compat-color-862f270a7b59), var(--nyx-compat-color-6318ad43d9e1), var(--nyx-compat-color-ddd6b95eb517)); }
.cm-pop-main::-webkit-scrollbar{ width:7px; }
.cm-pop-main::-webkit-scrollbar-thumb{ background:var(--nyx-compat-color-8d92f970df3f); border-radius:var(--nyx-compat-radius-4px); }
.cm-pop-topline{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--nyx-space-18); padding-right:var(--nyx-compat-spacing-42px); }
.cm-pop-topline .eyebrow{ font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p22em); text-transform:uppercase; color:var(--nyx-compat-color-hex-9e93c8); }
.cm-pop-topline .title{ margin-top:var(--nyx-space-4); font-family:var(--nyx-font-display); font-size:var(--nyx-type-title); color:var(--nyx-compat-color-hex-f8f2ff); text-shadow:var(--nyx-compat-shadow-text-2c6fa8497efb); }
.cm-pop-topline .cm-av{ width:68px; height:68px; }
.cm-form-switches{ display:flex; flex-direction:column; gap:var(--nyx-space-10); padding:var(--nyx-space-12);
  border-radius:var(--nyx-radius-panel); background:var(--nyx-compat-color-aead58cc9609); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); }
.cm-form-row{ display:grid; grid-template-columns:84px minmax(0, 1fr); align-items:start; gap:var(--nyx-space-10); }
.cm-form-row > span{ padding-top:var(--nyx-compat-spacing-9px); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p18em);
  text-transform:uppercase; color:var(--nyx-color-text-faint); }
.cm-form-row > div{ display:flex; flex-wrap:wrap; gap:var(--nyx-compat-spacing-7px); min-width:0; }
.cm-form-row button{ border:none; cursor:pointer; min-height:33px; padding:0 var(--nyx-space-12); border-radius:var(--nyx-compat-radius-9px);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11p5px); letter-spacing:var(--nyx-compat-tracking-p08em); color:var(--nyx-color-text-muted);
  background:var(--nyx-compat-color-e4d010d4635d); box-shadow:var(--nyx-compat-shadow-box-f23afef10f79);
  transition:color .2s, background .2s, box-shadow .2s, transform .2s; }
.cm-form-row button:hover{ color:var(--nyx-color-text-max); transform:translateY(-1px); box-shadow:var(--nyx-compat-shadow-box-c8033a33b12b); }
.cm-form-row button.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-5a47a8)); box-shadow:var(--nyx-compat-shadow-box-807d5c88b94a); }
.cm-pop-ledger{ display:flex; flex-wrap:wrap; gap:var(--nyx-compat-spacing-7px); }
.cm-pop-ledger span{ min-height:26px; display:inline-flex; align-items:center; padding:0 var(--nyx-space-10); border-radius:var(--nyx-radius-pill);
  font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; color:var(--nyx-color-text-soft);
  background:var(--nyx-compat-color-e7297ac78008); box-shadow:var(--nyx-compat-shadow-box-c52604492861); }
.cm-pop-sections{ display:flex; flex-direction:column; gap:var(--nyx-space-10); }
.cm-sec{ display:grid; grid-template-columns:152px minmax(0, 1fr); align-items:start; gap:var(--nyx-space-14);
  padding:var(--nyx-space-12) var(--nyx-space-14); border-radius:var(--nyx-compat-radius-13px);
  background:linear-gradient(115deg, var(--nyx-compat-color-cda7bf9e1d6f), var(--nyx-compat-color-32f6eddfdcf1));
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); }
.cm-sec.total{ background:linear-gradient(115deg, var(--nyx-compat-color-55684d647f3f), var(--nyx-compat-color-521654c19107));
  box-shadow:var(--nyx-compat-shadow-box-af7c7255aaad); }
.cm-sechd{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-5px); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small);
  letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase; color:var(--nyx-compat-color-hex-b3a9e0); }
.cm-sechd b{ font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); line-height:1; letter-spacing:var(--nyx-compat-tracking-p04em); color:var(--nyx-compat-color-hex-f7f2ff); font-weight:var(--nyx-weight-regular);
  text-shadow:var(--nyx-compat-shadow-text-807d5c88b94a); }
.cm-sechd span{ font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p04em); text-transform:none; color:var(--nyx-color-text-faint); line-height:1.25; }
.cm-mats{ display:flex; flex-wrap:wrap; gap:var(--nyx-compat-spacing-9px); align-items:flex-start; min-width:0; }
.cm-mat{ --cm-frame-scale:.2788; position:relative; width:74px; min-width:74px; display:flex; flex-direction:column; align-items:center; gap:var(--nyx-compat-spacing-5px);
  padding:0 var(--nyx-compat-spacing-3px) var(--nyx-space-6); color:var(--nyx-color-text-max); }
/* Rarity item frame — 1:1 replica of the 208x260 "Rarity Frame" design, rendered at native
   design size and shrunk with transform:scale so every ratio, blur, stroke and font scales
   together. Resize ONLY via --cm-frame-scale (frame width = 208px * scale). */
.cm-item-frame{ position:relative; display:block; width:calc(208px * var(--cm-frame-scale, .35)); height:calc(260px * var(--cm-frame-scale, .35)); flex:none; }
.cm-item-frame.bandless{ height:calc(208px * var(--cm-frame-scale, .35)); }
.cm-item-frame.bandless .cm-item-frame-canvas{ height:208px; border-radius:var(--nyx-radius-panel); }
.cm-item-frame-canvas{ position:absolute; top:0; left:0; display:block; width:208px; height:260px;
  transform:scale(var(--cm-frame-scale, .35)); transform-origin:0 0;
  background:var(--nyx-compat-color-hex-1b1f27); border-radius:var(--nyx-radius-panel) var(--nyx-radius-panel) 0 0; overflow:hidden;
  filter:var(--nyx-compat-shadow-drop-f791b14a8c27); }
.cm-item-frame-art{ position:relative; display:block; height:208px; overflow:hidden; }
.cm-item-frame-fill{ position:absolute; inset:0; overflow:hidden; border-radius:var(--nyx-radius-panel) var(--nyx-radius-panel) 0 0; background:var(--cmf-fill); }
.cm-item-frame-glow{ position:absolute; left:50%; top:46%; width:202px; height:202px; border-radius:50%;
  transform:translate(-50%, -50%); background:var(--cmf-glow-grad); filter:blur(10px); }
.cm-item-frame-eye-soft{ position:absolute; left:50%; top:83px; width:184px; height:184px;
  transform:translate(-50%, -50%); opacity:.22; background:var(--cmf-eye-color);
  -webkit-mask:url('../../assets/decor/nyx_eye_line.png') center/contain no-repeat;
  mask:url('../../assets/decor/nyx_eye_line.png') center/contain no-repeat; }
.cm-item-frame-icon{ position:absolute; top:8px; left:9px; width:190px; height:190px;
  display:flex; align-items:center; justify-content:center; color:var(--nyx-color-text-max); text-shadow:var(--nyx-compat-shadow-text-bb493cee3054); }
.cm-item-frame-icon > img{ max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain;
  filter:var(--nyx-compat-shadow-drop-1f52bcb134cf); }
.cm-item-frame-icon .zzz-sprite img,
.cm-item-frame-icon .zzz-sprite canvas{ box-sizing:border-box; padding:var(--nyx-compat-spacing-11px); }
.cm-item-frame-icon .glyph{ font-size:var(--nyx-compat-size-86px); line-height:1; color:var(--nyx-color-text-max); }
.cm-item-frame-plate{ position:absolute; left:0; right:0; top:208px; bottom:0; background:var(--cmf-plate); }
.cm-item-frame-seam{ position:absolute; top:0; left:0; right:0; height:208px; overflow:hidden; pointer-events:none; }
.cm-item-frame-seam span{ position:absolute; left:50%; top:208px; width:150px; height:20px;
  transform:translate(-50%, -50%); background:var(--cmf-glow-wide); filter:blur(4px); }
.cm-item-frame-seam i{ position:absolute; left:50%; top:208px; width:48px; height:48px;
  transform:translate(-50%, -50%); background:radial-gradient(closest-side, var(--cmf-glow) 0%, var(--nyx-compat-color-190bdc64d2dc) 72%); filter:blur(5px); }
/* Band sits at z-index:2 like the design so its translucent gradient tints the rim
   and the eye emblem below the seam — the emblem's --cmf-eye-fill relies on this. */
.cm-item-frame-band{ position:absolute; z-index:2; left:0; right:0; bottom:0; height:52px;
  display:flex; align-items:flex-end; justify-content:center; background:var(--cmf-band); }
.cm-item-frame-band b{ font-family:var(--nyx-compat-family-f2002c7174f2); font-weight:var(--nyx-weight-regular); font-size:var(--cmf-qty-size, 35px);
  line-height:1; letter-spacing:var(--nyx-compat-tracking-0); white-space:nowrap; color:var(--nyx-color-text-max);
  text-shadow:var(--nyx-compat-shadow-text-1c2bbc21e691); padding-bottom:var(--nyx-compat-spacing-3px); }
.cm-item-frame-rim{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; }
.cm-item-frame-emblem{ position:absolute; left:50%; top:192.2px; width:30.6px; height:30.6px; transform:translateX(-50%); pointer-events:none; }
.cm-item-frame-emblem .fill{ position:absolute; inset:.65px; background:var(--cmf-eye-fill);
  -webkit-mask:url('../../assets/decor/nyx_eye_fill.png') center/contain no-repeat;
  mask:url('../../assets/decor/nyx_eye_fill.png') center/contain no-repeat; }
.cm-item-frame-emblem .line{ position:absolute; inset:0; background:var(--cmf-line);
  -webkit-mask:url('../../assets/decor/nyx_eye_line.png') center/contain no-repeat;
  mask:url('../../assets/decor/nyx_eye_line.png') center/contain no-repeat; }
.cm-mat .nm{ width:100%; height:24px; font-size:calc(var(--nyx-compat-size-9p5px) * var(--fit, 1)); color:var(--nyx-color-text-muted); line-height:1.18; text-align:center;
  overflow:hidden; display:block; }
.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:var(--nyx-compat-spacing-9px) var(--nyx-space-10); border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-c5df19023e9f); box-shadow:var(--nyx-compat-shadow-box-867868b3062e);
  transition:opacity .14s ease, transform .14s ease; }
.cm-mat .src-tip b{ display:block; margin-bottom:var(--nyx-space-4); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-13px); font-weight:var(--nyx-weight-regular); color:var(--nyx-compat-color-hex-f8f2ff); }
.cm-mat .src-tip em{ display:block; font-style:normal; font-size:var(--nyx-compat-size-11px); line-height:1.35; color:var(--nyx-compat-color-hex-cfc4f2); }
.cm-mat .src-list{ display:flex; flex-direction:column; gap:var(--nyx-space-6); }
.cm-mat .src-icons{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-6); }
.cm-mat .src-icons img{ width:26px; height:26px; flex:none; object-fit:contain; border-radius:var(--nyx-radius-small);
  background:var(--nyx-compat-color-dffb33c1c353); box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  filter:var(--nyx-compat-shadow-drop-0f563608be2b); }
.cm-mat .src-names{ display:block; font-style:normal; font-size:var(--nyx-compat-size-11px); line-height:1.35; color:var(--nyx-compat-color-hex-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:var(--nyx-compat-shadow-drop-8e1253d241ff); }
.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:var(--nyx-compat-spacing-13px) var(--nyx-space-18); border-radius:var(--nyx-compat-radius-12px);
  background:linear-gradient(160deg, var(--nyx-compat-color-bbf2d212d3e2), var(--nyx-compat-color-ed62751da57c)); box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2); }
.cm-tally span{ font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; color:var(--nyx-color-text-muted); }
.cm-tally b{ font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); color:var(--nyx-compat-color-hex-dcd6ff); font-weight:var(--nyx-weight-regular); text-shadow:var(--nyx-compat-shadow-text-601849d2764d); }

.cm-pop.ledger{ width:min(1380px, 94vw); min-height:min(680px, 86vh); border-radius:var(--nyx-radius-card);
  background:linear-gradient(180deg, var(--nyx-compat-color-621ac9eb4d09), var(--nyx-compat-color-03730ddd34df));
  box-shadow:var(--nyx-compat-shadow-box-11c181ca8b74); }
/* 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, var(--nyx-compat-color-ecbfd873b233) 0%, var(--nyx-compat-color-105c5695cb59) 34%, var(--nyx-compat-color-d864cfab9534) 66%, var(--nyx-compat-color-d48b2bb24b99) 100%),
  linear-gradient(180deg, var(--nyx-compat-color-1659e047ab6a), var(--nyx-compat-color-e0f16be78267)); }
.cm-pop.ledger .cm-pop-layout{ max-height:88vh; }
.cm-ledger-main{ padding:var(--nyx-space-20) var(--nyx-space-24) var(--nyx-space-24); gap:var(--nyx-space-12);
  background:linear-gradient(90deg, var(--nyx-compat-color-fbb35bf76fdc), var(--nyx-compat-color-fa5df614f070), var(--nyx-compat-color-f9dd63c9eed1)); }
.cm-ledger-top{ position:sticky; top:0; z-index:4; display:flex; align-items:flex-start; justify-content:space-between; gap:var(--nyx-space-18);
  padding:var(--nyx-space-10) var(--nyx-compat-spacing-56px) var(--nyx-space-10) var(--nyx-space-10); border-bottom:1px solid var(--nyx-compat-color-cc112a6deb3f); border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-hex-100a20); box-shadow:var(--nyx-compat-shadow-box-237b23a8a87c); }
.cm-ledger-title{ min-width:0; }
.cm-ledger-top .cm-pop-name{ font-size:var(--nyx-compat-size-2f5a4a4bf406); }
.cm-pop.ledger .cm-pop-tags{ margin-top:var(--nyx-space-10); }
/* 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:var(--nyx-space-6);
  gap:0; background:transparent; box-shadow:none; padding:0; }
.cm-pop.ledger .cm-presets-ledger button{ min-width:0; height:auto; padding:var(--nyx-space-2) var(--nyx-space-14); border-radius:0; font-size:var(--nyx-compat-size-17px);
  font-family:var(--nyx-font-display); letter-spacing:var(--nyx-compat-tracking-p02em); color:var(--nyx-compat-color-hex-9b91c4); background:transparent; box-shadow:none;
  border-left:1px solid var(--nyx-compat-color-92028f0fbac1); 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:var(--nyx-compat-color-hex-efe8ff); }
.cm-pop.ledger .cm-presets-ledger button.on{ color:var(--nyx-compat-color-hex-f3eeff); background:transparent;
  box-shadow:var(--nyx-compat-shadow-box-f64575d175a5); } /* G17: purple underline, not the element colour */
.cm-pop.ledger .cm-presets-ledger button:disabled{ cursor:wait; opacity:.55; }
.cm-share-status{ flex:1 0 100%; padding-top:var(--nyx-space-4); text-align:left; font-size:var(--nyx-type-caption); color:var(--nyx-color-text-muted); }
.cm-share-status.error{ color:var(--nyx-color-danger); }
/* Share buttons sit in the Total row's LEFT column, under the "Total" label and
   its section checkboxes (user 2026-08-14). They used to hang off the right end
   under the material tiles, where they read as part of the tile grid. */
.cm-share-actions{ grid-column:1; display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:var(--nyx-space-8); }
.cm-share-actions button{ min-height:34px; border:1px solid var(--nyx-compat-color-92028f0fbac1); border-radius:var(--nyx-radius-control); cursor:pointer;
  padding:var(--nyx-space-6) var(--nyx-space-12); color:var(--nyx-compat-color-hex-efe8ff); background:var(--nyx-compat-color-26ecac6a6aec); font:inherit; }
.cm-share-actions button:hover:not(:disabled){ border-color:var(--nyx-compat-color-hex-9a89ea); }
.cm-share-actions button:disabled{ cursor:not-allowed; opacity:.45; }
.cm-share-preview{ min-height:360px; display:flex; flex-direction:column; align-items:center; gap:var(--nyx-space-12); padding:var(--nyx-space-14);
  border:1px solid var(--nyx-compat-color-7c44b5fd4230); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-a4cfb227c1ed); }
.cm-share-preview-actions{ align-self:stretch; display:flex; flex-wrap:wrap; align-items:center; gap:var(--nyx-space-8); }
.cm-share-preview-actions button{ min-height:34px; border:1px solid var(--nyx-compat-color-92028f0fbac1); border-radius:var(--nyx-radius-control); cursor:pointer;
  padding:var(--nyx-space-6) var(--nyx-space-12); color:var(--nyx-compat-color-hex-efe8ff); background:var(--nyx-compat-color-26ecac6a6aec); font:inherit; }
.cm-share-preview-actions button:hover:not(:disabled){ border-color:var(--nyx-compat-color-hex-9a89ea); }
.cm-share-preview-actions button:disabled{ cursor:not-allowed; opacity:.45; }
.cm-share-preview-status{ align-self:stretch; min-height:20px; color:var(--nyx-color-text-muted); font-size:var(--nyx-type-small); }
.cm-share-preview-status.error{ color:var(--nyx-color-danger); }
.cm-share-preview > img{ display:block; width:min(100%, 1000px); height:auto; border-radius:var(--nyx-radius-control); box-shadow:var(--nyx-compat-shadow-box-11c181ca8b74); }
.cm-form-switches.compact{ display:grid; grid-template-columns:repeat(auto-fit, minmax(260px, 1fr)); gap:var(--nyx-space-8);
  padding:var(--nyx-space-8) var(--nyx-space-10); border-radius:var(--nyx-radius-card); background:var(--nyx-compat-color-a4cfb227c1ed); }
.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:var(--nyx-compat-radius-7px); }
.cm-ledger-rows{ position:relative; display:flex; flex-direction:column; border-top:1px solid var(--nyx-compat-color-7c44b5fd4230);
  border-bottom:1px solid var(--nyx-compat-color-0e83a3232bc0); overflow:visible; }
/* 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, var(--nyx-compat-color-d0c7e1a52509) 0%, var(--nyx-compat-color-deae7274cfd5) 12%, var(--nyx-compat-color-0bc6ed9b79bb) 100%); }
.cm-ledger-row{ position:relative; z-index:1; display:grid; grid-template-columns:260px minmax(0, 1fr); align-items:center; gap:var(--nyx-space-20);
  min-height:128px; padding:var(--nyx-space-16) var(--nyx-compat-spacing-22px); border-bottom:1px solid var(--nyx-compat-color-c6257dbd8c9a);
  background:linear-gradient(90deg, var(--nyx-compat-color-9b93f011d4fe), var(--nyx-compat-color-2096778fafe8)); }
.cm-ledger-row:last-child{ border-bottom:none; }
.cm-ledger-row.total{ min-height:170px; background:linear-gradient(90deg, var(--nyx-compat-color-a6603b5077b1), var(--nyx-compat-color-0ca00a818e27));
  box-shadow:var(--nyx-compat-shadow-box-d16886f386a8); }
.cm-ledger-label{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-space-10); }
.cm-ledger-label b{ font-family:var(--nyx-font-display); font-weight:var(--nyx-weight-regular); font-size:var(--nyx-type-title); line-height:1; letter-spacing:var(--nyx-compat-tracking-p035em);
  color:var(--nyx-compat-color-hex-f8f3ff); text-shadow:var(--nyx-compat-shadow-text-836698dbc802); }
/* 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:var(--nyx-compat-color-hex-d8cef7); background:transparent; box-shadow:none;
  font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-18px); line-height:1.1; letter-spacing:var(--nyx-compat-tracking-p02em); }
/* 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:var(--nyx-compat-spacing-7px); width:max-content; max-width:100%; min-height:32px; padding:0;
  border:0; cursor:text; background:transparent; box-shadow:none; color:var(--nyx-compat-color-hex-f0ecff); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-17px); line-height:1.1; }
.cm-ledger-label .cm-asc-level .lv{ color:var(--nyx-compat-color-hex-b3a6f0); font-size:var(--nyx-type-body); }
.cm-ledger-label .cm-asc-level input{ width:1.8em; height:26px; border:0; outline:0; padding:0 var(--nyx-space-2); cursor:text;
  border-radius:var(--nyx-compat-radius-7px); background:var(--nyx-compat-color-bc387791db6c); box-shadow:var(--nyx-compat-shadow-box-e4235ce3f870);
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-lead); line-height:1.1; color:var(--nyx-color-text-max); 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:var(--nyx-compat-shadow-box-2ebf2f54de3b); }
.cm-ledger-label .cm-asc-level input:focus{ background:var(--nyx-compat-color-233bf1f3374b); box-shadow:var(--nyx-compat-shadow-box-efccefd8bcaa); }
/* The ascension target-level slider sits in the ledger's label column, which is
   only ~260px wide — so it stacks (label over track over value) rather than
   using the kit tab's three-across layout. */
.cm-ledger-label .cm-asc-level-slider{ width:100%; min-height:0; grid-template-columns:minmax(0,1fr) auto;
  gap:var(--nyx-space-6) var(--nyx-space-8); padding:0; background:transparent; }
.cm-ledger-label .cm-asc-level-slider label{ grid-column:1 / -1; font-size:var(--nyx-type-caption); }
.cm-ledger-label .cm-asc-level-slider input[type="range"]{ min-height:26px; }
.cm-ledger-label .cm-asc-level-slider output{ min-width:64px; font-size:var(--nyx-type-label); }
.cm-ledger-label .cm-asc-exp-note{ display:block; font-style:normal; font-size:var(--nyx-type-caption);
  line-height:1.3; color:var(--nyx-color-text-faint); }

/* 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:var(--nyx-compat-spacing-9px);
  min-height:36px; padding:0; background:transparent; box-shadow:none; }
/* HSR has 4 traces — lay them out 2x2 (last two on a second row) with a bit more
   breathing room than the default triplet. */
.cm-talent-triplet.cols4{ width:max-content; grid-template-columns:repeat(2, auto); gap:var(--nyx-space-16) var(--nyx-compat-spacing-26px); }
/* ZZZ has 6 skills (5 combat skills + Core) — 3 per row = a 3x2 grid. */
.cm-talent-triplet.cols6{ width:max-content; grid-template-columns:repeat(3, auto); gap:var(--nyx-space-14) var(--nyx-space-10); }
/* 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:var(--nyx-compat-radius-7px); min-height:32px; padding:0 var(--nyx-space-14);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; color:var(--nyx-color-text-soft);
  background:var(--nyx-compat-color-7081c4a5b868); box-shadow:var(--nyx-compat-shadow-box-9957f5618992); transition:color .2s, box-shadow .2s, background .2s; }
.cm-trace-max:hover{ color:var(--nyx-color-text-max); box-shadow:var(--nyx-compat-shadow-box-c6ebf9dad851); }
.cm-trace-max.on{ color:var(--nyx-color-surface); background:linear-gradient(160deg,var(--nyx-compat-color-hex-cfc4ff),var(--nyx-compat-color-hex-9a89ea)); box-shadow:var(--nyx-compat-shadow-box-8f773f638f85); }
/* 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:32px auto;
  align-items:center; gap:var(--nyx-compat-spacing-3px); padding:0; text-align:left; color:var(--nyx-compat-color-hex-eef3ff); background:transparent; box-shadow:none; }
.cm-talent-icon{ width:32px; height:32px; display:grid; place-items:center; overflow:hidden; background:transparent; box-shadow:none; }
.cm-talent-icon img{ width:100%; height:100%; object-fit:contain; filter:var(--nyx-compat-shadow-drop-129530ec7a6b); }
.cm-talent-icon em{ font-style:normal; font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p04em); text-transform:uppercase; color:var(--nyx-compat-color-hex-bcd0ff); }
/* C: shared numeric field ([-][input][+]) used by ascension + talent targets. */
.cm-numfield{ display:inline-flex; align-items:center; gap:var(--nyx-compat-spacing-3px); }
.cm-numfield input{ width:1.5em; min-width:1.5em; max-width:1.9em; height:28px; border:0; outline:0; padding:0 var(--nyx-compat-spacing-1px);
  border-radius:var(--nyx-compat-radius-7px); background:var(--nyx-compat-color-bc387791db6c); box-shadow:var(--nyx-compat-shadow-box-e4235ce3f870);
  font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-18px); line-height:1; color:var(--nyx-compat-color-hex-f8f2ff); text-align:center; -moz-appearance:textfield; appearance:textfield;
  transition:box-shadow .15s ease, background .15s ease; }
.cm-numfield input:hover{ box-shadow:var(--nyx-compat-shadow-box-2ebf2f54de3b); }
.cm-numfield input:focus{ background:var(--nyx-compat-color-233bf1f3374b); box-shadow:var(--nyx-compat-shadow-box-efccefd8bcaa); }
.cm-numfield input::-webkit-outer-spin-button, .cm-numfield input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0; }
.cm-num-steps{ flex:none; display:inline-flex; flex-direction:column; gap:var(--nyx-compat-spacing-1px); }
.cm-num-step{ flex:none; width:14px; height:13px; border:0; padding:0; cursor:pointer; border-radius:var(--nyx-compat-radius-4px);
  display:grid; place-items:center; color:var(--nyx-compat-color-hex-b3a6f0); background:var(--nyx-compat-color-26ecac6a6aec);
  box-shadow:var(--nyx-compat-shadow-box-982847935a9d); font-size:var(--nyx-compat-size-8px); line-height:1;
  transition:color .15s ease, box-shadow .15s ease, background .15s ease; }
.cm-num-step:hover{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-233bf1f3374b); box-shadow:var(--nyx-compat-shadow-box-bd05acfa4892); }
/* 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:var(--nyx-space-8); 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:var(--nyx-compat-shadow-drop-129530ec7a6b); }
.cm-skill-icon.glyph{ color:var(--nyx-compat-color-hex-bcd0ff); }
.cm-skill-icon.glyph svg{ width:24px; height:24px; filter:var(--nyx-compat-shadow-drop-34f9cfdf6f23); }
.cm-skill-icons .cm-talent-summary{ margin-left:var(--nyx-space-2); }
.cm-ledger-row.weapon{ z-index:5; 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:var(--nyx-compat-shadow-drop-f047c0c13d06); }
.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:var(--nyx-space-8);
  border:0; cursor:pointer; border-radius:var(--nyx-compat-radius-7px); padding:0 var(--nyx-space-10); color:var(--nyx-compat-color-hex-efe8ff); background:var(--nyx-compat-color-8b69c0e0e954);
  box-shadow:var(--nyx-compat-shadow-box-b3f674f14d6f); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-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:var(--nyx-compat-size-p94em); }
.cm-weapon-pick i{ flex:none; font-style:normal; color:var(--nyx-compat-color-hex-cdb3ff); }
.cm-weapon-pick:not(:disabled):hover{ color:var(--nyx-color-text-max); box-shadow:var(--nyx-compat-shadow-box-4763f1f6f4dc); }
.cm-weapon-menu{ position:absolute; left:0; right:auto; top:calc(100% - 2px); z-index:60; width:min(340px, calc(100vw - 32px)); overflow:hidden; border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-af93de5dc996); box-shadow:var(--nyx-compat-shadow-box-23084518765d); }
.cm-weapon-menu input{ width:100%; height:36px; border:0; border-bottom:1px solid var(--nyx-compat-color-916a41171be5); padding:0 var(--nyx-space-10);
  color:var(--nyx-compat-color-hex-f8f2ff); background:var(--nyx-compat-color-8e47fc957df2); outline:none; font-size:var(--nyx-type-small); }
.cm-weapon-menu input::placeholder{ color:var(--nyx-color-text-faint); }
.cm-weapon-options{ max-height:238px; overflow:auto; padding:var(--nyx-space-4); }
.cm-weapon-options button{ width:100%; min-height:34px; display:grid; grid-template-columns:28px minmax(0, 1fr); align-items:center; gap:var(--nyx-space-8);
  border:0; cursor:pointer; border-radius:var(--nyx-compat-radius-6px); padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px); color:var(--nyx-compat-color-hex-daceff); background:transparent; text-align:left; font-size:var(--nyx-type-small); }
.cm-weapon-options button:hover,
.cm-weapon-options button.on{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-c2b0ed1f9dca); }
.cm-weapon-options img,
.cm-weapon-options .sig{ width:28px; height:28px; display:grid; place-items:center; object-fit:contain; border-radius:var(--nyx-radius-small);
  background:var(--nyx-compat-color-e3785321a1c3); color:var(--nyx-compat-color-hex-dcd6ff); }
.cm-weapon-options button span:last-child{ min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.cm-weapon-empty{ padding:var(--nyx-space-10); text-align:center; color:var(--nyx-compat-color-hex-9e93c8); font-size:var(--nyx-type-small); }
/* 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:var(--nyx-space-8); 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:var(--nyx-radius-pill);
  font-size:var(--nyx-compat-size-13px); line-height:1; color:var(--nyx-compat-color-hex-cdb3ff); background:var(--nyx-compat-color-709746c3f70e); box-shadow:var(--nyx-compat-shadow-box-196b253a0cad);
  transition:color .15s, box-shadow .15s; }
.cm-sig-note:hover .cm-sig-mark,
.cm-sig-note:focus-visible .cm-sig-mark{ color:var(--nyx-color-text-max); box-shadow:var(--nyx-compat-shadow-box-f026d9f10b1c); }
.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:var(--nyx-compat-spacing-9px) var(--nyx-compat-spacing-11px); border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-77799c779fc0); box-shadow:var(--nyx-compat-shadow-box-0f7fb784fc21);
  transition:opacity .14s ease, transform .14s ease; }
.cm-sig-tip b{ display:block; margin-bottom:var(--nyx-space-4); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-13px); font-weight:var(--nyx-weight-regular); color:var(--nyx-compat-color-hex-f8f2ff); }
.cm-sig-tip em{ display:block; font-style:normal; font-size:var(--nyx-compat-size-11px); line-height:1.4; color:var(--nyx-compat-color-hex-cfc4f2); }
.cm-sig-tip u{ text-decoration-color:var(--nyx-compat-color-64243cd99cb1); }
.cm-sig-note:hover .cm-sig-tip,
.cm-sig-note:focus-visible .cm-sig-tip{ opacity:1; transform:translateY(0); }
.cm-ledger-mats{ gap:var(--nyx-space-12); align-items:flex-start; }
.cm-ledger-mats .cm-mat{ --cm-frame-scale:.3462; width:78px; min-width:78px; gap:var(--nyx-compat-spacing-5px); padding:0; border-radius:0;
  background:transparent; box-shadow:none; }
.cm-ledger-mats .cm-mat .nm{ display:none; }
.cm-total-checks{ display:flex; flex-direction:column; align-items:flex-start; gap:var(--nyx-space-6); }
.cm-total-checks button{ border:none; cursor:pointer; display:inline-flex; align-items:center; gap:var(--nyx-space-8); min-height:25px; padding:0;
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-lead); color:var(--nyx-compat-color-hex-d9ceff); background:transparent; text-shadow:var(--nyx-compat-shadow-text-75b4bd7a2c83); }
.cm-total-checks button .box{ width:22px; height:22px; border-radius:var(--nyx-radius-small); display:grid; place-items:center;
  background:var(--nyx-compat-color-fb29abd3b0e8); box-shadow:var(--nyx-compat-shadow-box-b70f0b2c58a2); }
.cm-total-checks button.on .box{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-5a47a8)); box-shadow:var(--nyx-compat-shadow-box-89ac9d19440c); }
.cm-total-checks button.on .box::after{ content:"\2713"; color:var(--nyx-color-text-max); font-size:var(--nyx-type-lead); line-height:1; }
.cm-total-checks button:hover{ color:var(--nyx-color-text-max); }
.cm-total-empty{ min-height:42px; display:flex; align-items:center; padding:0 var(--nyx-space-14); border-radius:var(--nyx-radius-control);
  color:var(--nyx-compat-color-hex-b8adbf); background:var(--nyx-compat-color-154a051f5a9e); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  font-size:var(--nyx-compat-size-13px); letter-spacing:var(--nyx-compat-tracking-p04em); }

@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:var(--nyx-space-14) var(--nyx-compat-spacing-22px) var(--nyx-space-16); gap:var(--nyx-space-8); }
  .cm-ledger-top{ padding:var(--nyx-space-8) var(--nyx-compat-spacing-52px) var(--nyx-space-8) var(--nyx-space-8); gap:var(--nyx-space-14); }
  .cm-ledger-top .cm-pop-name{ font-size:var(--nyx-compat-size-a5cb157df4d0); }
  .cm-pop.ledger .cm-pop-tags{ margin-top:var(--nyx-space-8); gap:var(--nyx-space-6); }
  .cm-pop.ledger .cm-pop-chip{ min-height:25px; padding:0 var(--nyx-space-8) 0 var(--nyx-compat-spacing-5px); font-size:var(--nyx-type-label); }
  .cm-pop.ledger .cm-pop-chip .cm-fi{ width:19px; height:19px; }
  .cm-pop.ledger .cm-presets-ledger button{ padding:var(--nyx-space-2) var(--nyx-compat-spacing-11px); font-size:var(--nyx-compat-size-15px); }
  .cm-form-switches.compact{ padding:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-9px); }
  .cm-ledger-row{ grid-template-columns:220px minmax(0, 1fr); gap:var(--nyx-space-16); min-height:104px; padding:var(--nyx-space-10) var(--nyx-space-20); }
  .cm-ledger-art{ left:256px; }
  .cm-ledger-row.total{ min-height:136px; }
  .cm-ledger-label{ gap:var(--nyx-space-8); }
  .cm-ledger-label b{ font-size:var(--nyx-compat-size-25px); }
  .cm-ledger-label > span{ min-height:28px; padding:0; font-size:var(--nyx-type-lead); }
  .cm-ledger-mats{ gap:var(--nyx-space-8); }
  .cm-ledger-mats .cm-mat{ --cm-frame-scale:.3269; width:72px; min-width:72px; gap:var(--nyx-compat-spacing-5px); }
  .cm-total-checks{ gap:var(--nyx-compat-spacing-5px); }
  .cm-total-checks button{ min-height:23px; font-size:var(--nyx-compat-size-15px); }
  .cm-total-checks button .box{ width:20px; height:20px; }
  .cm-talent-triplet{ min-height:34px; padding:0; gap:var(--nyx-space-10); }
  .cm-talent-control{ height:auto; grid-template-columns:32px auto; gap:var(--nyx-compat-spacing-3px); }
  .cm-talent-icon{ width:32px; height:32px; }
  .cm-numfield input{ height:27px; font-size:var(--nyx-type-lead); }
  .cm-weapon-pick{ min-height:29px; font-size:var(--nyx-type-body); }
  .cm-weapon-watermark{ width:94px; height:94px; }
  .cm-weapon-options{ max-height:190px; }
}

@media (max-width: 820px){
  /* C: slightly larger stepper touch targets on phones */
  .cm-num-step{ width:20px; height:15px; font-size:var(--nyx-type-caption); }
  .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:var(--nyx-compat-spacing-22px) var(--nyx-space-18) var(--nyx-space-20); background:linear-gradient(180deg, var(--nyx-compat-color-06f8ae43a500), var(--nyx-compat-color-b81a3bae2308)); }
  .cm-pop-topline{ padding-right:var(--nyx-compat-spacing-44px); align-items:flex-start; }
  .cm-pop-topline .title{ font-size:var(--nyx-compat-size-26px); }
  .cm-pop-topline .cm-av{ display:none; }
  .cm-form-row{ grid-template-columns:1fr; gap:var(--nyx-space-6); }
  .cm-form-row > span{ padding-top:0; }
  .cm-sec{ grid-template-columns:1fr; gap:var(--nyx-compat-spacing-9px); }
  .cm-mat{ width:70px; min-width:70px; }
  .cm-pop.ledger{ width:min(94vw, 620px); min-height:0; max-height:90vh; border-radius:var(--nyx-compat-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:var(--nyx-space-18) var(--nyx-space-14) var(--nyx-space-16); }
  .cm-ledger-top{ flex-direction:column; padding:var(--nyx-space-10) var(--nyx-compat-spacing-44px) var(--nyx-space-10) var(--nyx-space-10); gap:var(--nyx-space-12); }
  .cm-ledger-top .cm-pop-name{ font-size:var(--nyx-compat-size-34px); }
  .cm-pop.ledger .cm-presets-ledger{ justify-content:flex-start; max-width:none; }
  .cm-pop.ledger .cm-presets-ledger button{ padding:var(--nyx-space-2) var(--nyx-compat-spacing-9px); font-size:var(--nyx-compat-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:var(--nyx-space-12); padding:var(--nyx-compat-spacing-15px) var(--nyx-space-12); }
  .cm-ledger-art{ left:0; }
  .cm-ledger-art::after{ background:var(--nyx-compat-color-07c5e98f60d2); }
  .cm-ledger-row.total{ min-height:0; }
  .cm-ledger-label b{ font-size:var(--nyx-compat-size-25px); }
  .cm-ledger-mats{ gap:var(--nyx-compat-spacing-9px); }
  .cm-ledger-mats .cm-mat{ --cm-frame-scale:.3269; width:72px; min-width:72px; }
  .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); }
  .cm-character-tabs{ margin-left:0; margin-top:var(--nyx-space-8); flex-wrap:wrap; }
  .cm-ledger-info-row{ align-items:flex-start; flex-direction:column; }
  .cm-ledger-info-row .cm-pop-meta-text{ justify-content:flex-start; }
  .cm-kit-list{ grid-template-columns:1fr; }
}

/* 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:var(--nyx-space-2); }
.cm-inline .cm-body{ padding-right:var(--nyx-space-8); }
.gt-inline .gt-import{ margin:var(--nyx-compat-spacing-26px) auto 0; max-width:860px; width:100%; }
.gt-inline .gt-results{ margin-top:var(--nyx-compat-spacing-22px); }
/* material popup still floats over the whole (scaled) stage */
.cm-pop-wrap.float{
  position:relative;
  inset:auto;
  z-index:auto;
  display:block;
  min-width:0;
  min-height:0;
  height:100%;
  padding:0;
  background:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.cm-pop-wrap.float.page .cm-pop.ledger{
  width:100%;
  max-width:none;
  min-height:0;
  height:100%;
  max-height:none;
  border-radius:0;
  box-shadow:none;
  background:var(--nyx-compat-color-b6fa417b5d2d);
}
.cm-pop-wrap.float.page .cm-pop-layout{
  max-height:none;
  height:100%;
  min-height:0;
  display:flex;
  flex-direction:column;
}
.cm-pop-wrap.float.page .cm-ledger-main{
  min-height:0;
  flex:1 1 auto;
}
.cm-detail-back{
  width:max-content;
  max-width:100%;
  min-height:38px;
  border:0;
  border-radius:var(--nyx-radius-control);
  margin:0 0 var(--nyx-space-12);
  padding:0 var(--nyx-compat-spacing-13px) 0 var(--nyx-compat-spacing-9px);
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-7px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-efe9ff);
  background:var(--nyx-compat-color-2c42c6df8167);
  box-shadow:var(--nyx-compat-shadow-box-c52604492861);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.cm-detail-back:hover{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-aab699f6afa8);
}
.cm-detail-back span{
  font-size:var(--nyx-compat-size-24px);
  line-height:1;
}
.cm-detail-back b{
  font-size:var(--nyx-type-label);
}

.cm-inline.has-detail-page .cm-pop-wrap.float.page .cm-pop.ledger{
  background:transparent;
}
.cm-inline.has-detail-page .cm-pop-ambient,
.cm-inline.has-detail-page .cm-pop-scrim{
  display:none;
}
.cm-inline.has-detail-page .cm-ledger-main{
  padding:0 var(--nyx-space-8) var(--nyx-space-18) 0;
  background:transparent;
}
.cm-inline.has-detail-page .cm-ledger-top{
  align-items:center;
  padding:var(--nyx-space-10) var(--nyx-space-10) var(--nyx-space-12);
}
.cm-inline.has-detail-page .cm-pop-name-row{
  align-items:center;
}
.cm-detail-nav{
  flex:none;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-12);
  margin:0 0 var(--nyx-space-24);
  padding-right:var(--nyx-space-8);
}
.cm-detail-nav .cm-detail-back{
  margin:0;
}
.cm-detail-custom{
  min-width:0;
  min-height:38px;
  border:0;
  border-radius:var(--nyx-radius-control);
  padding:0 var(--nyx-compat-spacing-13px);
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-9px);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-efe9ff);
  background:var(--nyx-compat-color-202cf7aa7285);
  box-shadow:var(--nyx-compat-shadow-box-a5ecdbef0df7);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.cm-detail-custom:hover{
  color:var(--nyx-color-text-max);
  background:var(--nyx-compat-color-d57b2d640b5a);
}
.cm-detail-custom span{
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
}
.cm-detail-custom b{
  color:var(--nyx-color-text-muted);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
}
.cm-pop-meta-text{
  min-width:240px;
  max-width:100%;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--nyx-space-6) var(--nyx-space-12);
  color:var(--nyx-compat-color-hex-dcd4f6);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-compat-size-11px);
  line-height:1.35;
  letter-spacing:var(--nyx-compat-tracking-p02em);
}
.cm-pop-meta-text > span{
  min-width:0;
  display:inline-flex;
  align-items:center;
  flex-wrap:wrap;
  gap:var(--nyx-compat-spacing-5px);
}
.cm-pop-meta-text b{
  color:var(--nyx-compat-color-hex-f5f1ff);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p1em);
  text-transform:uppercase;
}
.cm-pop-meta-text em{
  font-style:normal;
  color:var(--nyx-compat-color-hex-dcd4f6);
}
.cm-pop-meta-text a{
  color:var(--nyx-compat-color-hex-f5f1ff);
  text-decoration:none;
  border-bottom:1px solid var(--nyx-compat-color-2858389f363e);
}
.cm-pop-meta-text a:hover{
  color:var(--nyx-color-text-max);
  border-bottom-color:var(--nyx-compat-color-0d130f06bc25);
}

/* ===== Character Materials — controls row (tabs + search + tools) ===== */
.cm-beta-tag.upcoming{
  color:var(--nyx-color-text-max);
  background:linear-gradient(160deg,#8b7bff,#6f4ec3);
  box-shadow:var(--nyx-compat-shadow-box-303beb0d5804);
}
/* Bare row — the buttons carry the canonical silhouette themselves; no
   container-in-container pill (user 2026-07-15 #11). */
.cm-character-tabs{
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-space-6);
  margin-left:var(--nyx-space-8);
}
.cm-character-tabs button{
  min-height:27px;
  border:0;
  border-radius:var(--nyx-compat-radius-6px);
  padding:0 var(--nyx-space-10);
  cursor:pointer;
  color:var(--nyx-compat-color-hex-bdb3df);
  background:transparent;
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
}
.cm-character-tabs button:hover:not(:disabled){ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-5f4cd78a5abc); }
.cm-character-tabs button.on{
  color:var(--nyx-color-surface);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-d7ceff),var(--nyx-compat-color-hex-9a89ea));
}
.cm-character-tabs button:disabled{ cursor:default; opacity:.42; }
.cm-character-tabs .cm-detail-back{ min-height:27px; margin-right:var(--nyx-space-2); padding:0 var(--nyx-space-10) 0 var(--nyx-compat-spacing-7px); color:var(--nyx-compat-color-hex-d8d0f4); background:var(--nyx-compat-color-108ef61fc9ce); }
.cm-character-tabs .cm-detail-back:hover,.cm-character-tabs .cm-detail-back:focus-visible{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-017421d156e5); outline:2px solid var(--character-hover); outline-offset:2px; }
/* Three cards of very different shapes, so they get explicit weights rather
   than equal auto-fit columns (user 2026-08-14). Equal columns meant the
   profile icon — a ~256px avatar — was blown up to fill a 240px+ square while
   the splash art, a tall portrait, was letterboxed inside a 4/3 landscape box
   and rendered tiny. Splash now leads at portrait ratio, the namecard keeps
   its banner shape, and the profile icon never scales past its own size. */
/* Three cards of very different shapes, so they get explicit weights rather
   than equal auto-fit columns (user 2026-08-14). Equal columns meant the
   profile icon — a 256px avatar — was blown up to fill a 240px+ square, while
   the splash art (2048x1024 for Genshin) was letterboxed inside a 4/3 box and
   rendered at a fraction of the space it had. Splash now leads and keeps its
   own aspect ratio; the profile icon never scales past 1:1. */
/* ---- Story tab (Genshin) ----
   Reuses the kit panel's section chrome so Materials / Character Kit / Story
   read as one page. Each entry is a <details> so a 76-line voice-line list
   opens as a scannable index rather than a wall of text. */
.cm-story-list{ display:flex; flex-direction:column; gap:var(--nyx-space-8); padding:var(--nyx-space-8) var(--nyx-space-16) var(--nyx-space-16); }
.cm-story-entry{ min-width:0; border:1px solid var(--nyx-color-border-subtle); border-radius:var(--nyx-radius-control);
  background:var(--nyx-color-surface-nested); }
.cm-story-entry > summary{ display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--nyx-space-4) var(--nyx-space-10);
  padding:var(--nyx-space-10) var(--nyx-space-14); cursor:pointer; list-style:none; }
.cm-story-entry > summary::-webkit-details-marker{ display:none; }
.cm-story-entry > summary::before{ content:"\203A"; flex:none; color:var(--nyx-color-kit-term); font-size:var(--nyx-type-lead); line-height:1;
  transform:rotate(0deg); transition:transform .16s ease; }
.cm-story-entry[open] > summary::before{ transform:rotate(90deg); }
.cm-story-entry > summary:hover{ background:var(--nyx-color-control-surface); }
.cm-story-entry > summary:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
.cm-story-entry > summary b{ min-width:0; color:var(--nyx-color-heading); font-family:var(--nyx-font-display);
  font-size:var(--nyx-type-body); font-weight:var(--nyx-weight-regular); overflow-wrap:anywhere; }
.cm-story-entry > summary span{ color:var(--nyx-color-text-faint); font-size:var(--nyx-type-caption); }
.cm-story-entry > p{ margin:0; padding:0 var(--nyx-space-14) var(--nyx-space-14) var(--nyx-compat-spacing-30px);
  color:var(--nyx-color-text-soft); font-family:'Segoe UI',system-ui,sans-serif; font-size:var(--nyx-type-body);
  line-height:1.62; white-space:pre-line; overflow-wrap:anywhere; }
.cm-story-retry{ margin-top:var(--nyx-space-10); min-height:34px; padding:0 var(--nyx-space-14); cursor:pointer;
  border:1px solid var(--nyx-color-border-strong); border-radius:var(--nyx-radius-control);
  color:var(--nyx-color-heading); background:var(--nyx-color-control-surface); font:inherit; }
@media (max-width:760px){
  .cm-story-list{ padding:var(--nyx-space-6) var(--nyx-space-10) var(--nyx-space-12); }
  .cm-story-entry > p{ padding-left:var(--nyx-space-14); }
}

.cm-character-gallery{ display:grid; grid-template-columns:1fr 0.55fr 1.6fr; align-items:end;
  gap:var(--nyx-space-22); padding:var(--nyx-space-8) 0 var(--nyx-space-20); }
.cm-character-gallery-card{ min-width:0; margin:0; display:grid; gap:var(--nyx-space-8); align-content:end; }
.cm-character-gallery-art{ width:100%; aspect-ratio:4/3; display:grid; place-items:center; }
.cm-character-gallery-art img{ width:100%; height:100%; object-fit:contain; }
.cm-character-gallery-card figcaption{ color:var(--nyx-color-heading); font-family:var(--nyx-font-display); font-size:var(--nyx-type-body); }

/* Namecard: a real banner crop, so cover it. */
.cm-character-gallery-card.is-namecard .cm-character-gallery-art{ aspect-ratio:2.1/1; }
.cm-character-gallery-card.is-namecard img{ object-fit:cover; }

/* Profile: an avatar icon gains nothing from upscaling, so the box is capped
   and the image is allowed to sit smaller than it inside. */
.cm-character-gallery-card.is-profile .cm-character-gallery-art{ aspect-ratio:1; max-width:200px; justify-self:center; }
.cm-character-gallery-card.is-profile img{ width:auto; height:auto; max-width:100%; max-height:100%; }

/* Splash: no fixed box. Splash art is wide in Genshin/HSR and tall elsewhere,
   and any fixed ratio letterboxes half of them. The image keeps its own shape
   and is bounded by height alone. */
.cm-character-gallery-card.is-splash .cm-character-gallery-art{ aspect-ratio:auto; height:auto; }
.cm-character-gallery-card.is-splash img{ width:100%; height:auto; max-height:420px; object-fit:contain; }

@media (max-width:1180px){
  .cm-character-gallery{ grid-template-columns:1fr 0.55fr; }
  .cm-character-gallery-card.is-splash{ grid-column:1 / -1; }
}
@media (max-width:760px){
  .cm-character-gallery{ grid-template-columns:1fr; gap:var(--nyx-space-16); }
  .cm-character-gallery-card.is-splash{ grid-column:auto; }
  .cm-character-gallery-card.is-splash img{ max-height:300px; }
}
.cm-kit-panel{ display:flex; flex-direction:column; gap:var(--nyx-space-16); padding:var(--nyx-space-2) 0 var(--nyx-space-16); }
.cm-kit-profile{ display:flex; flex-direction:column; gap:var(--nyx-space-10); }
.cm-profile-facts{ display:flex; flex-wrap:wrap; gap:var(--nyx-compat-spacing-7px); }
.cm-profile-facts span{
  min-width:0;
  min-height:34px;
  display:inline-flex;
  align-items:center;
  gap:var(--nyx-compat-spacing-7px);
  padding:var(--nyx-compat-spacing-5px) var(--nyx-space-10);
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-108ef61fc9ce);
  box-shadow:var(--nyx-compat-shadow-box-f32844ea6836);
}
.cm-profile-facts b{
  flex:none;
  color:var(--nyx-color-text-muted);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
}
.cm-profile-facts em{ min-width:0; color:var(--nyx-compat-color-hex-f5f1ff); font-style:normal; font-size:var(--nyx-compat-size-11p5px); line-height:1.3; overflow-wrap:anywhere; }
.cm-profile-stat-grid{
  width:min(720px, 100%);
  overflow:hidden;
  border-radius:var(--nyx-radius-control);
  background:var(--nyx-compat-color-fd59c5911642);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
}
.cm-profile-level-control{
  display:grid;
  grid-template-columns:auto minmax(140px, 1fr) auto;
  align-items:center;
  gap:var(--nyx-space-10);
  min-height:52px;
  padding:var(--nyx-space-8) var(--nyx-space-10);
  color:var(--nyx-color-text-muted);
  background:var(--nyx-compat-color-0557dea73665);
}
.cm-profile-level-control label,
.cm-profile-level-control output{
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-caption);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
}
.cm-profile-level-control input[type="range"],
.cm-kit-level-control input[type="range"]{ width:100%; min-height:32px; accent-color:var(--nyx-color-kit-level); cursor:pointer; }
.cm-profile-level-control input[type="range"]:focus-visible,
.cm-kit-level-control input[type="range"]:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset); }
.cm-profile-level-control output,
.cm-kit-level-control output{
  min-width:70px;
  padding:var(--nyx-space-4) var(--nyx-space-8);
  border-radius:var(--nyx-radius-small);
  color:var(--nyx-color-canvas);
  background:var(--nyx-color-kit-level);
  text-align:center;
  font-variant-numeric:tabular-nums;
}
.cm-profile-stat-table{ width:100%; border-collapse:collapse; table-layout:fixed; }
.cm-profile-stat-table th,
.cm-profile-stat-table td{ padding:var(--nyx-space-7, 7px) var(--nyx-space-10); border-top:1px solid var(--nyx-compat-color-e3785321a1c3); }
.cm-profile-stat-table th{ color:var(--nyx-compat-color-hex-f5f1ff); font-size:var(--nyx-compat-size-11px); text-align:left; overflow-wrap:anywhere; }
.cm-profile-stat-table td,
.cm-profile-stat-table thead th:last-child{ color:var(--nyx-compat-color-hex-dcd4f6); font-size:var(--nyx-compat-size-11px); text-align:right; font-variant-numeric:tabular-nums; }
.cm-profile-stat-table thead th{ color:var(--nyx-color-text-muted); font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-black); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; }
.cm-kit-source{
  width:max-content;
  max-width:100%;
  padding:var(--nyx-compat-spacing-7px) var(--nyx-space-10);
  border-radius:var(--nyx-radius-control);
  color:var(--nyx-compat-color-hex-dcd4f6);
  background:var(--nyx-compat-color-7de1566c81ff);
  box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  font-size:var(--nyx-compat-size-11px);
  line-height:1.35;
}
.cm-kit-section{ display:flex; flex-direction:column; gap:var(--nyx-space-12); }
.cm-kit-section-title{
  display:flex;
  align-items:center;
  gap:var(--nyx-space-12);
  color:var(--nyx-color-heading);
  font-family:var(--nyx-font-display);
  font-size:clamp(24px,2.2vw,30px);
  line-height:1;
}
.cm-kit-section-title::after{ content:""; width:min(180px,24vw); height:1px; background:var(--nyx-gradient-section-rule); }
.cm-kit-list{ display:grid; grid-template-columns:repeat(var(--cm-kit-columns,1),minmax(0,1fr)); gap:var(--nyx-space-12); align-items:stretch; }
.cm-kit-entry{
  min-width:0;
  display:flex;
  flex-direction:column;
  border:1px solid var(--nyx-color-border);
  border-radius:var(--nyx-radius-card);
  color:var(--nyx-compat-color-hex-dcd4f6);
  background:linear-gradient(180deg,rgba(17,13,37,.94),rgba(10,8,25,.92));
  box-shadow:0 16px 42px rgba(1,0,10,.26),inset 0 1px rgba(255,255,255,.025);
  overflow:visible;
}
.cm-kit-entry-head{
  min-height:78px;
  display:flex;
  align-items:center;
  gap:var(--nyx-space-12);
  padding:var(--nyx-space-14) var(--nyx-space-16);
  border-bottom:1px solid var(--nyx-color-border-subtle);
  border-radius:var(--nyx-radius-card) var(--nyx-radius-card) 0 0;
  background:linear-gradient(110deg,rgba(139,123,255,.1),rgba(12,9,28,.84) 48%);
}
.cm-kit-entry-head img{
  width:48px;
  height:48px;
  object-fit:contain;
  flex:none;
  filter:var(--nyx-compat-shadow-drop-3e8f24b3de61);
}
.cm-kit-entry-head div{ min-width:0; display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-3px); }
.cm-kit-entry-head span{
  color:var(--nyx-color-accent-bright);
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
}
.cm-kit-entry-head b{ color:var(--nyx-color-text-max); font-size:var(--nyx-type-lead); line-height:1.24; overflow-wrap:anywhere; }
.cm-kit-copy{ display:flex; flex-direction:column; gap:var(--nyx-space-14); padding:var(--nyx-space-16); color:var(--nyx-color-text-soft); font-family:'Segoe UI',system-ui,sans-serif; font-size:var(--nyx-type-body); font-weight:var(--nyx-weight-regular); line-height:1.58; overflow-wrap:anywhere; }
.cm-kit-copy p{ position:relative; margin:0; }
.cm-kit-copy-body{ white-space:pre-line; }
.cm-kit-copy-heading{ display:block; margin-bottom:var(--nyx-space-2); color:var(--nyx-color-kit-term); font-weight:var(--nyx-weight-extrabold); }
.cm-kit-copy .is-accent{ color:var(--nyx-color-kit-term); font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-info{ color:var(--nyx-color-info); font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-pyro{ color:#ff9a83; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-hydro{ color:#79c9ff; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-cryo{ color:#8ceaff; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-electro{ color:#c3a4ff; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-anemo{ color:#79e4c3; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-geo{ color:#f0ca6b; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-dendro{ color:#9bdc78; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-quantum{ color:#b69aff; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-imaginary{ color:#f2d782; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-physical{ color:#d9d6e6; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-ether{ color:#ef9bff; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-havoc{ color:#e08cff; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-spectro{ color:#f1d86f; font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-strong{ font-weight:var(--nyx-weight-bold); }
.cm-kit-copy .is-em{ font-style:italic; color:var(--nyx-color-text-muted); }
.cm-kit-copy .is-underline{ text-decoration:underline; text-underline-offset:2px; }
.cm-kit-term{ position:relative; display:inline; }
.cm-kit-term > button{
  all:unset;
  border-radius:2px;
  color:var(--nyx-color-kit-term);
  cursor:help;
  font:inherit;
  font-weight:var(--nyx-weight-bold);
  text-decoration:underline;
  text-decoration-color:rgba(var(--nyx-rgb-kit-term),.55);
  text-decoration-thickness:1px;
  text-underline-offset:3px;
}
.cm-kit-term > button:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:2px; }
.cm-kit-term-tip{
  position:absolute;
  z-index:30;
  left:50%;
  bottom:calc(100% + 9px);
  width:min(320px,76vw);
  display:flex;
  flex-direction:column;
  gap:var(--nyx-space-6);
  padding:var(--nyx-space-10) var(--nyx-space-12);
  border:1px solid var(--nyx-color-border-strong);
  border-radius:var(--nyx-radius-control);
  color:var(--nyx-color-text-soft);
  background:#14102c;
  box-shadow:0 16px 38px rgba(0,0,0,.48);
  font-size:var(--nyx-type-small);
  font-style:normal;
  font-weight:var(--nyx-weight-regular);
  line-height:1.45;
  opacity:0;
  pointer-events:none;
  transform:translate(-50%,4px);
  visibility:hidden;
}
.cm-kit-term-tip b{ color:var(--nyx-color-heading); font-size:var(--nyx-type-body); }
.cm-kit-term-tip span{ max-height:180px; overflow:auto; white-space:pre-line; }
.cm-kit-term:hover .cm-kit-term-tip,
.cm-kit-term:focus-within .cm-kit-term-tip{ opacity:1; transform:translate(-50%,0); visibility:visible; }
.cm-kit-stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:var(--nyx-space-6); margin:0 var(--nyx-space-16) var(--nyx-space-16); }
.cm-kit-stats div{
  min-width:0;
  display:flex;
  justify-content:space-between;
  gap:var(--nyx-space-8);
  align-items:center;
  min-height:30px;
  padding:var(--nyx-space-4) var(--nyx-space-8);
  border-radius:var(--nyx-compat-radius-6px);
  background:var(--nyx-compat-color-108ef61fc9ce);
}
.cm-kit-stats dt{ color:var(--nyx-compat-color-hex-f5f1ff); font-size:var(--nyx-type-label); font-weight:var(--nyx-weight-bold); overflow-wrap:anywhere; }
.cm-kit-stats dd{ margin:0; color:var(--nyx-compat-color-hex-dcd4f6); font-size:var(--nyx-type-label); text-align:right; overflow-wrap:anywhere; }
.cm-kit-levels{
  margin:auto var(--nyx-space-16) var(--nyx-space-16);
  border-radius:var(--nyx-compat-radius-7px);
  background:var(--nyx-compat-color-05ef37b1270d);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79);
  overflow:hidden;
}
.cm-kit-levels summary{
  min-height:44px;
  padding:0 var(--nyx-space-10);
  display:flex;
  align-items:center;
  color:var(--nyx-compat-color-hex-f5f1ff);
  cursor:pointer;
  font-family:var(--nyx-compat-family-bbbd64e38bdd);
  font-size:var(--nyx-type-label);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p08em);
  text-transform:uppercase;
}
.cm-kit-levels summary{ list-style:none; }
.cm-kit-levels summary::-webkit-details-marker{ display:none; }
.cm-kit-levels summary::before{ content:"▸"; display:inline-block; margin-right:var(--nyx-space-6); color:var(--nyx-color-info); }
.cm-kit-levels[open] summary::before{ transform:rotate(90deg); }
.cm-kit-levels summary:focus-visible{ outline:var(--nyx-focus-ring); outline-offset:calc(-1 * var(--nyx-focus-offset)); }
.cm-kit-level-detail{ display:flex; flex-direction:column; gap:var(--nyx-space-14); padding:var(--nyx-space-12); border-top:1px solid var(--nyx-compat-color-e3785321a1c3); }
.cm-kit-level-control{
  display:grid;
  grid-template-columns:minmax(150px,auto) minmax(140px,1fr) auto;
  align-items:center;
  gap:var(--nyx-space-10);
}
.cm-kit-level-control label{ min-width:0; color:var(--nyx-color-text-muted); font-size:var(--nyx-type-small); overflow-wrap:anywhere; }
.cm-kit-level-control output{ font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-label); font-weight:var(--nyx-weight-black); }
.cm-kit-scale-table{ min-width:0; }
.cm-kit-scale-table h4{ margin:0 0 var(--nyx-space-6); color:var(--nyx-color-text-soft); font-size:var(--nyx-type-small); overflow-wrap:anywhere; }
.cm-kit-scale-table table{ width:100%; border-collapse:collapse; table-layout:fixed; color:var(--nyx-compat-color-hex-d8d0ee); font-size:var(--nyx-compat-size-10p5px); line-height:1.35; }
.cm-kit-scale-table th,
.cm-kit-scale-table td{
  padding:var(--nyx-space-8) var(--nyx-space-10);
  border-top:1px solid var(--nyx-compat-color-e3785321a1c3);
  text-align:right;
  overflow-wrap:anywhere;
}
.cm-kit-scale-table thead th{
  border-top:0;
  color:var(--nyx-color-text-muted);
  font-size:var(--nyx-compat-size-9p5px);
  font-weight:var(--nyx-weight-black);
  letter-spacing:var(--nyx-compat-tracking-p04em);
  text-transform:uppercase;
}
.cm-kit-scale-table th:first-child{
  width:72%;
  text-align:left;
  color:var(--nyx-compat-color-hex-f5f1ff);
  background:var(--nyx-compat-color-hex-17112a);
}
@media (max-width:1050px){
  .cm-kit-list{ grid-template-columns:repeat(auto-fit,minmax(min(100%,360px),1fr)); }
}
@media (max-width:600px){
  .cm-profile-level-control,
  .cm-kit-level-control{ grid-template-columns:minmax(0,1fr) auto; }
  .cm-profile-level-control label,
  .cm-kit-level-control label{ grid-column:1 / -1; }
  .cm-profile-level-control input[type="range"],
  .cm-kit-level-control input[type="range"]{ min-height:44px; }
  .cm-kit-entry-head{ min-height:68px; padding:var(--nyx-space-12); }
  .cm-kit-entry-head img{ width:42px; height:42px; }
  .cm-kit-copy{ padding:var(--nyx-space-12); font-size:var(--nyx-compat-size-12p5px); }
  .cm-kit-stats{ margin:0 var(--nyx-space-12) var(--nyx-space-12); }
  .cm-kit-levels{ margin:auto var(--nyx-space-12) var(--nyx-space-12); }
  .cm-kit-stats{ grid-template-columns:minmax(0,1fr); }
  .cm-kit-scale-table th,
  .cm-kit-scale-table td{ padding:var(--nyx-space-8); }
  .cm-kit-scale-table th:first-child{ width:66%; }
}
@media (prefers-reduced-motion:reduce){
  .cm-profile-level-control *,
  .cm-kit-levels *,
  .cm-kit-term-tip{ transition:none!important; scroll-behavior:auto!important; }
}
.cm-ledger-info-row{
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--nyx-space-14);
  padding:var(--nyx-compat-spacing-13px) var(--nyx-space-2) 0;
}
.cm-ledger-info-row .cm-pop-meta-text{ justify-content:flex-end; }

.cm-controls{ position:relative; display:flex; flex-direction:row; align-items:center; flex-wrap:wrap; gap:var(--nyx-space-14); flex:none; margin-top:var(--nyx-space-14); }
.cm-controls .cm-tabs{ margin-top:0; }
/* Each tab hugs its own label rather than every tab sharing one width
   (user 2026-08-09): equal 1fr columns made the "Talents" highlight nearly
   twice as wide as the word inside it. The highlight now extends only slightly
   past the text, and the tabs sit closer together. */
.cm-tabs{ flex:0 1 auto; display:inline-flex; flex-wrap:wrap; gap:var(--nyx-space-4); }
.cm-tabs .gp-section-nav-button{ width:auto; overflow:visible;
  flex-direction:row; align-items:center; justify-content:center; gap:var(--nyx-space-8); color:var(--nyx-compat-color-hex-d9d1fb);
  background:transparent; box-shadow:none; font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-small); line-height:1.2; }
.cm-tabs .gp-section-nav-button:hover,.cm-tabs .gp-section-nav-button:focus-visible{ color:var(--nyx-color-text-max); transform:none;
  background:var(--nyx-compat-color-ac1e946fec49); box-shadow:none; }
.cm-tabs .gp-section-nav-button.on{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-c2b0ed1f9dca);
  box-shadow:var(--nyx-compat-shadow-box-f8bdfc09bbda); }
.cm-pinned-slot{ flex:none; width:100%; padding-bottom:var(--nyx-space-4); }
.cm-roster-highlights{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--nyx-compat-spacing-22px); }

/* Beta / Live channel toggle — simple pill in the bottom-left corner (above the
   Pengo), rendered by the shell; GameData 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:var(--nyx-compat-spacing-7px); font-family:var(--nyx-compat-family-ffc6cbbeca26); }
.cm-chan-text .cm-chan-word{ border:0; background:transparent; cursor:pointer; padding:var(--nyx-space-2) var(--nyx-compat-spacing-1px);
  font-size:var(--nyx-compat-size-13px); font-weight:var(--nyx-weight-bold); letter-spacing:var(--nyx-compat-tracking-p05em); color:var(--nyx-compat-color-hex-6f6499); transition:color .15s, text-shadow .15s; }
.cm-chan-text .cm-chan-word:hover{ color:var(--nyx-compat-color-hex-cfc4f5); }
.cm-chan-text .cm-chan-word.on{ color:var(--nyx-compat-color-hex-cbb8ff); text-shadow:var(--nyx-compat-shadow-text-8f773f638f85); }
.cm-chan-text .cm-chan-word:focus-visible{ outline:none; color:var(--nyx-compat-color-hex-e6dcff); text-decoration:underline; }
.cm-chan-text .cm-chan-slash{ color:var(--nyx-compat-color-hex-564d7e); font-size:var(--nyx-compat-size-13px); font-weight:var(--nyx-weight-regular); pointer-events:none; }

/* "Beta (latest)" tag — roster cell + popout header */
/* Live / Beta channel switch - compact segmented control in the bottom-left corner. */
.cm-chan-switch{ --chan-purple:var(--nyx-compat-color-hex-7c35ff); --chan-muted:var(--nyx-compat-color-hex-747079); position:relative; isolation:isolate;
  display:grid; grid-template-columns:1fr 1fr; align-items:center; width:168px; height:38px; padding:var(--nyx-compat-spacing-3px);
  border-radius:var(--nyx-compat-radius-13px); font-family:var(--nyx-compat-family-ffc6cbbeca26); background:linear-gradient(180deg, var(--nyx-compat-color-12ace2d99e61), var(--nyx-compat-color-d7f1f8cc49de));
  box-shadow:var(--nyx-compat-shadow-box-5f2c2fe67622); cursor:pointer; }
.cm-chan-switch::before{ content:""; position:absolute; z-index:0; left:3px; top:3px; width:calc(50% - 3px); height:32px;
  border-radius:var(--nyx-compat-radius-9px); background:linear-gradient(160deg, var(--nyx-compat-color-04297d93eab0), var(--nyx-compat-color-3003633209a5));
  box-shadow:var(--nyx-compat-shadow-box-bb27b6810935);
  transform:translateX(0); transition:transform .22s cubic-bezier(.2,.7,.2,1); }
.cm-chan-switch.beta::before{ transform:translateX(81px); }
.cm-chan-option{ position:relative; z-index:2; height:32px; border:0; background:transparent; cursor:pointer; min-width:0;
  color:var(--chan-muted); font-size:var(--nyx-type-small); font-weight:var(--nyx-weight-black); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase;
  transition:color .12s ease, text-shadow .12s ease; }
.cm-chan-option.live-option{ padding:0 var(--nyx-space-28) 0 var(--nyx-space-8); }
.cm-chan-option.beta-option{ padding:0 var(--nyx-space-8) 0 var(--nyx-space-28); }
.cm-chan-option:hover{ color:var(--nyx-compat-color-hex-c9c4d2); }
.cm-chan-switch.no-beta{ cursor:default; }
.cm-chan-switch.no-beta .beta-option{ cursor:not-allowed; opacity:.46; }
.cm-chan-switch.no-beta .beta-option:hover{ color:var(--chan-muted); }
.cm-chan-switch.live .cm-chan-option.live-option,
.cm-chan-switch.beta .cm-chan-option.beta-option{ color:#f2edff; text-shadow:0 0 6px rgba(183,170,255,.95),0 0 14px rgba(139,123,255,.75),0 0 26px rgba(139,123,255,.45); }
.cm-chan-switch.live .cm-chan-option.beta-option,
.cm-chan-switch.beta .cm-chan-option.live-option{ color:var(--chan-muted); text-shadow:none; }
.cm-chan-option:focus-visible{ outline:none; box-shadow:var(--nyx-compat-shadow-box-25d4935a0db3); border-radius:var(--nyx-radius-control); }
.cm-chan-medallion{ position:absolute; z-index:4; left:50%; top:50%; width:48px; height:48px; display:grid; place-items:center;
  border-radius:50%; background:transparent; border:0;
  transform:translate(-50%, -50%); pointer-events:none; }
.cm-chan-medallion img{ width:46px; height:46px; object-fit:contain; border-radius:50%; transition:transform .18s ease; }
.cm-chan-switch.live .cm-chan-medallion img{ transform:scaleX(1); }
.cm-chan-switch.beta .cm-chan-medallion img{ transform:scaleX(-1); }
@media (prefers-reduced-motion: reduce){ .cm-chan-switch::before, .cm-chan-medallion, .cm-chan-option{ transition:none; } }

/* "Beta (latest)" tag - roster cell + popout header */
.cm-cell{ position:relative; }
.cm-beta-tag{ font-size:var(--nyx-type-caption); font-weight:var(--nyx-weight-extrabold); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; line-height:1;
  color:var(--nyx-color-text-max); background:var(--nyx-compat-color-hex-6f4ec3); padding:var(--nyx-space-2) var(--nyx-space-6); border-radius:var(--nyx-radius-pill);
  box-shadow:var(--nyx-compat-shadow-box-66d8ae424a12); }
.cm-cell .cm-beta-tag{ position:absolute; z-index:5; top:-3px; right:2px; pointer-events:none; }
/* beta character whose artwork hasn't shipped yet */
.cm-av.art-pending .disc{ box-shadow:var(--nyx-compat-shadow-box-a2587dfef298); }
.cm-av-pending{ position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  font-size:var(--nyx-compat-size-7p5px); font-weight:var(--nyx-weight-bold); letter-spacing:var(--nyx-compat-tracking-p04em); text-transform:uppercase; white-space:nowrap;
  color:var(--nyx-compat-color-hex-0d0b18); background:linear-gradient(160deg,#ded7ff,#a99cff); padding:var(--nyx-compat-spacing-1px) var(--nyx-compat-spacing-5px); border-radius:var(--nyx-radius-pill);
  box-shadow:var(--nyx-compat-shadow-box-bb493cee3054); pointer-events:none; }
.cm-beta-tag.pop{ align-self:center; margin-left:var(--nyx-space-8); font-size:var(--nyx-type-label); padding:var(--nyx-compat-spacing-3px) var(--nyx-space-8); }
.cm-tools{ margin-left:0; display:flex; align-items:center; gap:var(--nyx-space-10); position:relative; }
/* matches the overview .gp-search (hex clip, same dimensions/location) */
.cm-search{ position:relative; display:flex; align-items:center; gap:var(--nyx-compat-spacing-9px); height:40px; width:214px; flex:none;
  padding:0 var(--nyx-space-12); border-radius:var(--nyx-radius-small);
  background:linear-gradient(180deg, var(--nyx-compat-color-03e6646ea7f3), var(--nyx-compat-color-6b51c74ae902));
  box-shadow:var(--nyx-compat-shadow-box-b5743bebbdd2); transition:box-shadow .25s; }
.cm-search:focus-within{ box-shadow:var(--nyx-compat-shadow-box-bcb67f4d5cf4); }
.cm-search .ic{ width:13px; height:13px; flex:none; border-radius:50%; border:1.5px solid var(--nyx-color-text-faint); position:relative; }
.cm-search .ic::after{ content:""; position:absolute; width:1.5px; height:6px; background:var(--nyx-color-text-faint); bottom:-5px; right:-2px; transform:rotate(-45deg); }
.cm-search input{ flex:1; min-width:0; border:none; outline:none; background:none; color:var(--nyx-color-heading);
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-compat-size-13px); letter-spacing:var(--nyx-compat-tracking-p04em); }
.cm-search input::placeholder{ color:var(--nyx-compat-color-hex-6f649c); }
.cm-search .x{ border:none; background:none; cursor:pointer; flex:none; color:var(--nyx-color-text-muted); font-size:var(--nyx-compat-size-11px); padding:var(--nyx-space-2); }
.cm-search .x:hover{ color:var(--nyx-color-text-max); }
.cm-tbtns{ display:flex; align-items:center; gap:var(--nyx-space-6); }
.cm-tool{ position:relative; width:38px; height:38px; border:none; cursor:pointer; border-radius:var(--nyx-radius-card); display:grid; place-items:center;
  color:var(--nyx-color-text-muted); background:var(--nyx-compat-color-7081c4a5b868); box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2);
  transition:color .2s, box-shadow .2s, background .2s; }
.cm-tool:hover{ color:var(--nyx-color-text-max); box-shadow:var(--nyx-compat-shadow-box-2f69a871c254); }
.cm-tool.on{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-3db4de94bbbc); box-shadow:var(--nyx-compat-shadow-box-50379f5f18a4); }
.cm-tool.warn.on{ box-shadow:var(--nyx-compat-shadow-box-b6386996f3cd); }
.cm-tool-badge{ position:absolute; right:-5px; top:-6px; min-width:18px; height:18px; padding:0 var(--nyx-compat-spacing-5px); border-radius:var(--nyx-radius-pill);
  display:grid; place-items:center; font-family:var(--nyx-font-display); font-size:var(--nyx-type-small); line-height:1; color:var(--nyx-compat-color-hex-160712);
  background:linear-gradient(160deg,var(--nyx-compat-color-hex-ff9db4),var(--nyx-compat-color-hex-dd0044)); box-shadow:var(--nyx-compat-shadow-box-3a446408a7ce); }
.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:var(--nyx-compat-spacing-neg-2p5px) 0 0 var(--nyx-compat-spacing-neg-2p5px); 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:var(--nyx-compat-radius-2px); }

/* filter popover */
.cm-filter{ position:absolute; top:46px; right:0; z-index:30; width:440px; max-width:62vw; padding:var(--nyx-space-18) var(--nyx-space-20);
  border-radius:var(--nyx-compat-radius-16px); display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-15px);
  background:linear-gradient(180deg, var(--nyx-compat-color-707d061f78a0), var(--nyx-compat-color-586d698fad46));
  box-shadow:var(--nyx-compat-shadow-box-97741c98ebce); animation:gtRise .22s cubic-bezier(.2,.7,.2,1); }
.cm-fsec{ display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-9px); }
.cm-fhd{ font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p18em); text-transform:uppercase; color:var(--nyx-color-text-faint); }
.cm-fopts{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-8); }
.cm-fopt{ display:inline-flex; align-items:center; gap:var(--nyx-compat-spacing-7px); height:34px; padding:0 var(--nyx-space-14); border:none; cursor:pointer;
  border-radius:var(--nyx-compat-radius-9px); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-12p5px); letter-spacing:var(--nyx-compat-tracking-p03em); color:var(--nyx-color-text-soft);
  background:var(--nyx-compat-color-d02ed0908fe4); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8); transition:color .2s, box-shadow .2s, background .2s; }
.cm-fopt:hover{ color:var(--nyx-color-text-max); box-shadow:var(--nyx-compat-shadow-box-196b253a0cad); }
.cm-fopt.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg, var(--nyx-compat-color-bd3d7de09f49), var(--nyx-compat-color-e2fa36faa893)); box-shadow:var(--nyx-compat-shadow-box-50379f5f18a4); }
.cm-fopt.all{ font-weight:var(--nyx-weight-semibold); min-width:54px; justify-content:center; }
.cm-fopt .fd{ width:11px; height:11px; border-radius:50%; box-shadow:var(--nyx-compat-shadow-box-aa114b50a54c); }
.cm-fi{ width:20px; height:20px; flex:none; display:grid; place-items:center; border-radius:var(--nyx-compat-radius-6px);
  font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-11px); line-height:1; color:var(--nyx-compat-color-hex-f8f2ff);
  background:linear-gradient(160deg, var(--nyx-compat-color-11f436d53ef3), var(--nyx-compat-color-d09ce1384c71));
  box-shadow:var(--nyx-compat-shadow-box-39bc2d74419f); }
.cm-fi.elem{ color:var(--nyx-compat-color-hex-080614); background:linear-gradient(160deg, color-mix(in oklab, var(--fi) 86%, var(--nyx-color-text-max)), var(--fi)); }
.cm-fi.rare{ color:var(--nyx-compat-color-hex-100b26); background:linear-gradient(160deg,var(--nyx-compat-color-hex-f5f0ff),var(--nyx-color-accent-bright)); }
.cm-fi.sym{ font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-caption); letter-spacing:var(--nyx-compat-tracking-p02em); text-transform:uppercase; }
.cm-fi.real,.cm-fi.sym.fallback{ background:var(--nyx-compat-color-250b573c0618); }
.cm-fi.real img,.cm-fi.real > span,.cm-fi.sym.fallback svg{ width:18px; height:18px; object-fit:contain; color:var(--nyx-compat-color-hex-dcd5ff); }

.cm-hide-menu{ position:absolute; top:46px; right:0; z-index:31; width:330px; max-width:62vw; padding:var(--nyx-space-14);
  border-radius:var(--nyx-compat-radius-16px); display:flex; flex-direction:column; gap:var(--nyx-space-8);
  background:linear-gradient(180deg, var(--nyx-compat-color-707d061f78a0), var(--nyx-compat-color-586d698fad46));
  box-shadow:var(--nyx-compat-shadow-box-97741c98ebce); animation:gtRise .22s cubic-bezier(.2,.7,.2,1); }
.cm-hide-hd{ display:flex; align-items:baseline; justify-content:space-between; gap:var(--nyx-space-12); padding:var(--nyx-space-2) var(--nyx-space-4) var(--nyx-compat-spacing-7px);
  border-bottom:1px solid var(--nyx-compat-color-4da99af578c2); }
.cm-hide-hd b{ font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-17px); color:var(--nyx-compat-color-hex-f5f0ff); font-weight:var(--nyx-weight-regular); }
.cm-hide-hd span{ font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p12em); text-transform:uppercase; color:var(--nyx-color-text-faint); }
.cm-hide-menu button{ border:none; cursor:pointer; min-width:0; display:flex; align-items:center; gap:var(--nyx-space-10); text-align:left;
  padding:var(--nyx-space-10) var(--nyx-compat-spacing-11px); border-radius:var(--nyx-radius-card); color:var(--nyx-color-text-soft); background:var(--nyx-compat-color-c028c9f67154);
  box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); transition:color .2s, background .2s, box-shadow .2s; }
.cm-hide-menu button:hover:not(:disabled){ color:var(--nyx-color-text-max); box-shadow:var(--nyx-compat-shadow-box-b70f0b2c58a2); }
.cm-hide-menu button.on{ color:var(--nyx-color-text-max); background:var(--nyx-compat-color-28c2aec367a0); box-shadow:var(--nyx-compat-shadow-box-50379f5f18a4); }
.cm-hide-menu button:disabled{ opacity:.44; cursor:not-allowed; }
.cm-hide-menu .box{ width:15px; height:15px; flex:none; border-radius:var(--nyx-compat-radius-4px); box-shadow:var(--nyx-compat-shadow-box-9df5595cb916); }
.cm-hide-menu button.on .box{ background:linear-gradient(160deg,var(--nyx-compat-color-hex-ff8cad),var(--nyx-compat-color-hex-dd0044)); box-shadow:var(--nyx-compat-shadow-box-bebe471761a0); }
.cm-hide-menu b{ display:block; font-size:var(--nyx-compat-size-12p5px); font-weight:var(--nyx-weight-semibold); }
.cm-hide-menu em{ display:block; margin-top:var(--nyx-space-2); font-style:normal; font-size:var(--nyx-compat-size-10p5px); line-height:1.3; color:var(--nyx-color-text-faint); }
.cm-hide-menu .clear{ justify-content:center; color:var(--nyx-compat-color-hex-ffb8c9); }

/* day selector (Genshin talents) */
/* G26: compact day pills that don't stretch across the whole row. */
/* Plain text days in the same family as the Roster / Talents tabs above
   (user 2026-08-09): no raised container, no gradient pill — just quiet caps
   with a glow rail under the selected day. */
.cm-days{ display:inline-flex; gap:var(--nyx-space-4); flex:none; width:max-content; margin-top:var(--nyx-space-12);
  padding:0; border-radius:0; background:none; box-shadow:none; }
.cm-days button{ position:relative; flex:none; min-width:0; padding:var(--nyx-space-4) var(--nyx-space-10) var(--nyx-space-8);
  border:none; border-radius:0; cursor:pointer; height:auto; min-height:30px; background:none; box-shadow:none; clip-path:none;
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-small); font-weight:var(--nyx-weight-regular);
  letter-spacing:.18em; text-transform:uppercase; color:var(--nyx-color-text-faint);
  transition:color .18s ease, text-shadow .18s ease; }
.cm-days button:hover,
.cm-days button:focus-visible{ color:var(--nyx-color-text-soft); background:none; outline:none; }
.cm-days button.on{ color:var(--nyx-color-text-max); background:none; box-shadow:none; text-shadow:0 0 8px rgba(183,170,255,.35); }
.cm-days button.on::after{
  content:""; position:absolute; left:var(--nyx-space-4); right:var(--nyx-space-4); bottom:2px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--nyx-color-accent-bright) 22%,
    var(--nyx-color-accent-bright) 78%, transparent);
  box-shadow:0 0 10px rgba(139,123,255,.75), 0 0 20px rgba(139,123,255,.35);
}

/* mid tab — material groups */
.cm-mgroup{ display:flex; flex-direction:column; gap:var(--nyx-space-14); }
.cm-mgroup-hd{ display:flex; align-items:baseline; gap:var(--nyx-space-12);
  border-bottom:1px solid var(--nyx-compat-color-9a593589b5e7); padding-bottom:var(--nyx-space-8); }
.cm-mgroup-hd .t{ font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-body); letter-spacing:var(--nyx-compat-tracking-p2em); text-transform:uppercase; color:var(--nyx-color-heading); }
.cm-mgroup-hd .sub{ font-size:var(--nyx-type-small); letter-spacing:var(--nyx-compat-tracking-p04em); color:var(--nyx-color-text-faint); }
/* A1: token column hugs its content (one token = no dead gap); multi-token rows
   still wrap at the old 176px ceiling via the max-width below. */
.cm-mrow{ display:grid; grid-template-columns:auto 1fr; gap:var(--nyx-space-12); align-items:start; }
.cm-mrow > .cm-mtokens{ max-width:176px; }
.cm-mrow.has-bg{ position:relative; }
.cm-domain.has-bg, .cm-bgroup.has-bg{ position:relative; isolation:isolate; overflow:hidden; }
.cm-mrow.has-bg::before,
.cm-domain.has-bg::before,
.cm-bgroup.has-bg::before{ content:none; }
.cm-mrow.has-bg > *,
.cm-domain.has-bg > *,
.cm-bgroup.has-bg > *{ position:relative; z-index:1; }
.cm-mtokens{ display:flex; flex-wrap:wrap; gap:var(--nyx-space-14) var(--nyx-space-10); align-items:flex-start; }
.cm-mtoken{ --cm-frame-scale:.3462; display:flex; flex-direction:column; align-items:center; gap:var(--nyx-space-8); width:112px; text-align:center; padding-top:var(--nyx-space-2); }
.cm-mtoken .lbl{ width:100%; height:30px; overflow:hidden; font-size:calc(var(--nyx-compat-size-11px) * var(--fit, 1)); letter-spacing:var(--nyx-compat-tracking-p09em); text-transform:uppercase; color:var(--nyx-compat-color-hex-b3a9e0); line-height:1.35; max-width:112px; }
.cm-mtoken .mt{ margin-top:var(--nyx-compat-spacing-neg-4px); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; color:var(--nyx-compat-color-hex-7f74aa); line-height:1.25; }
.cm-domain{ padding:0; border-radius:0; background:transparent; box-shadow:none; }
.cm-domain-row + .cm-domain-row{ padding-top:var(--nyx-space-16); border-top:1px solid var(--nyx-compat-color-e3785321a1c3); }
.cm-weekly-row + .cm-weekly-row{ padding-top:var(--nyx-compat-spacing-15px); border-top:1px solid var(--nyx-compat-color-e3785321a1c3); }

/* boss tab */
.cm-bosshd{ display:flex; align-items:center; gap:var(--nyx-space-14); flex:none; }
.cm-bosshd .t{ font-family:var(--nyx-font-display); font-size:var(--nyx-type-section); letter-spacing:var(--nyx-compat-tracking-p06em); text-transform:uppercase; color:var(--nyx-color-heading);
  text-shadow:var(--nyx-compat-shadow-text-2c6fa8497efb); }
.cm-bosshd .ct{ margin-left:auto; font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-20px); color:var(--nyx-color-text-faint); }
.cm-bgroup{ display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-15px); padding:var(--nyx-space-16) var(--nyx-space-18); border-radius:var(--nyx-compat-radius-16px);
  background:var(--nyx-compat-color-222ef397f65a); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); }
/* All material sections sit directly on the page like Endfield Growth (user 2026-07-16). */
.cm-bgroup{ padding:0; border-radius:0; background:transparent; box-shadow:none; }
.cm-bgroup-hd{ font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-19px); color:var(--nyx-compat-color-hex-f3efff); }
.cm-brow{ display:grid; grid-template-columns:124px 1fr; gap:var(--nyx-compat-spacing-22px); align-items:start; }
.cm-bmats{ display:flex; flex-direction:column; gap:var(--nyx-space-16); }
.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. */
.cm-trounce-grid{ display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--nyx-space-14); align-items:start; }
/* A3: material token sits beside its characters instead of on its own row. */
.cm-trounce-grid .cm-brow{ grid-template-columns:auto 1fr; gap:var(--nyx-space-12); }
.cm-trounce-grid .cm-bmats{ flex-direction:column; gap:var(--nyx-space-10); }
.cm-trounce-grid .cm-bmats .cm-mtoken{ width:104px; }
.cm-trounce-grid .cm-bmats .cm-mtoken .lbl{ max-width:104px; }


.cm-presets{ display:flex; flex-wrap:wrap; gap:var(--nyx-compat-spacing-7px); padding:var(--nyx-compat-spacing-5px); border-radius:var(--nyx-compat-radius-13px);
  background:var(--nyx-compat-color-aead58cc9609); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); }
.cm-presets button{ border:none; cursor:pointer; height:33px; padding:0 var(--nyx-compat-spacing-13px); border-radius:var(--nyx-compat-radius-9px);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11p5px); letter-spacing:var(--nyx-compat-tracking-p1em); color:var(--nyx-color-text-muted); background:none;
  transition:color .2s, background .2s, box-shadow .2s; }
.cm-presets button:hover{ color:var(--nyx-color-text-max); }
.cm-presets button.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-5a47a8)); box-shadow:var(--nyx-compat-shadow-box-807d5c88b94a); }

.cm-empty{ color:var(--nyx-color-text-faint); font-size:var(--nyx-type-body); padding:var(--nyx-compat-spacing-26px); text-align:center; letter-spacing:var(--nyx-compat-tracking-p03em); }

@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 var(--nyx-space-18) var(--nyx-space-18); }
  .stage.is-compact-stage .gp-topbar{ height:auto; min-height:94px; padding:var(--nyx-space-12) 0 var(--nyx-space-8); justify-content:flex-start; }
  .stage.is-compact-stage .gp-topbar .tb-brand{ left:8px; height:60px; padding:0 var(--nyx-space-12) 0 var(--nyx-space-2); }
  .stage.is-compact-stage .gp-topbar .tb-brand .plate{ width:190px; height:54px; left:-8px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .brand-mark{ gap:var(--nyx-space-8); }
  .stage.is-compact-stage .gp-topbar .tb-brand .wm{ font-size:var(--nyx-type-title); }
  .stage.is-compact-stage .gp-topbar .tb-center{
    width:auto; display:flex; margin-left:var(--nyx-compat-spacing-150px); max-width:calc(100vw - 166px); gap:var(--nyx-space-10); overflow-x:auto; padding:var(--nyx-space-4) var(--nyx-space-4) var(--nyx-space-8);
    scrollbar-width:none; -ms-overflow-style:none;
  }
  .stage.is-compact-stage .gp-topbar .tb-center::-webkit-scrollbar{ display:none; }
  .stage.is-compact-stage .nyx-time-pref{
    order:1; position:relative; left:auto; z-index:30; padding-left:var(--nyx-compat-spacing-5px);
  }
  .stage.is-compact-stage .gp-topbar.has-time-preference .gp-game-rail,
  .stage.is-compact-stage .gp-topbar.has-time-preference .nyx-time-pref{ grid-column:auto; justify-self:auto; }
  .stage.is-compact-stage .nyx-time-pref-popover{
    position:fixed; top:84px; right:12px; width:min(300px,calc(100vw - 24px));
  }
  .stage.is-compact-stage .gp-topbar .banner{ min-width:178px; height:46px; padding:0 var(--nyx-space-20); font-size:var(--nyx-type-small); }
  .stage.is-compact-stage .banner-seat{ height:78px; left:-10px; bottom:-8px; }
  .stage.is-compact-stage .gp-topbar .tb-pengo{ display:none; }
  .stage.is-compact-stage .gp-corner{
    left:auto; right:12px; top:10px; bottom:auto; width:auto; z-index:140;
    align-items:flex-end; gap:var(--nyx-space-8); pointer-events:none;
  }
  .stage.is-compact-stage .gp-corner > *{ pointer-events:auto; }
  .stage.is-compact-stage .gp-corner-actions{ width:auto; justify-content:flex-end; gap:var(--nyx-compat-spacing-7px); }
  .stage.is-compact-stage .gp-kofi{ display:none; }
  .stage.is-compact-stage .gp-corner .tb-pengo.corner{
    width:44px; height:44px; background:var(--nyx-compat-color-250b573c0618);
    box-shadow:var(--nyx-compat-shadow-box-f5c4e287ed98);
  }
  .stage.is-compact-stage .gp-corner .tb-pengo.corner img{ height:38px; }
  .stage.is-compact-stage .nyx-pengo-menu{
    position:fixed; left:12px; right:12px; top:62px; bottom:auto; width:auto;
    max-height:calc(100vh - 82px); overflow:auto;
  }
  .stage.is-compact-stage .nyx-pengo-menu [data-tip]::after{ display:none; }
  .stage.is-compact-stage .cm-chan-switch{
    position:fixed; right:12px; bottom:12px; z-index:140;
    width:146px; height:34px; margin-top:0; transform-origin:100% 100%;
  }
  .stage.is-compact-stage .cm-chan-switch::before{ height:28px; width:calc(50% - 3px); }
  .stage.is-compact-stage .cm-chan-switch.beta::before{ transform:translateX(70px); }
  .stage.is-compact-stage .cm-chan-option{ height:28px; font-size:var(--nyx-compat-size-9p5px); letter-spacing:var(--nyx-compat-tracking-p1em); }
  .stage.is-compact-stage .cm-chan-option.live-option{ padding:0 var(--nyx-space-24) 0 var(--nyx-space-6); }
  .stage.is-compact-stage .cm-chan-option.beta-option{ padding:0 var(--nyx-space-6) 0 var(--nyx-space-24); }
  .stage.is-compact-stage .cm-chan-medallion{ width:40px; height:40px; }
  .stage.is-compact-stage .cm-chan-medallion img{ width:38px; height:38px; }
  .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:var(--nyx-space-14); overflow:auto; padding-bottom:var(--nyx-compat-spacing-92px);
  }
  .stage.is-compact-stage .gp-side-nav{
    position:relative; z-index:4; flex-direction:row; flex-wrap:wrap; overflow:visible; padding:0 0 var(--nyx-space-6); min-height:auto;
    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-overview-aside{
    min-height:auto;
    height:auto;
    overflow:visible;
  }
  .stage.is-compact-stage .gp-cardrow{ overflow-x:auto; padding-bottom:var(--nyx-compat-spacing-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{ grid-template-columns:repeat(2,minmax(0,326px)); max-width:660px; }
  .stage.is-compact-stage .cm-tabs button{ padding-inline:var(--nyx-space-12); }
  .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:var(--nyx-compat-spacing-15px) var(--nyx-compat-spacing-11px); }
  .stage.is-compact-stage .cm-mrow,
  .stage.is-compact-stage .cm-brow{ grid-template-columns:1fr; gap:var(--nyx-space-12); }
  .stage.is-compact-stage .cm-mtokens,
  .stage.is-compact-stage .cm-bmats{ flex-direction:row; flex-wrap:wrap; gap:var(--nyx-space-10); }
  .stage.is-compact-stage .cm-mrow > .cm-mtokens{ max-width:none; }
  .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){
  .gp-favs > div:first-child{ flex-wrap:wrap; }
  .gp-favs .gp-sec{ flex-basis:100%; }
  .gp-fav-icon-grid{ grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:var(--nyx-compat-spacing-13px) var(--nyx-space-8); }
  .gp-fav-heading{ flex-wrap:wrap; }
  .gp-fav-heading > img{ width:48px; height:48px; }
  .gp-fav-heading h2{ font-size:var(--nyx-compat-size-19px); }
  .gp-fav-heading .gp-fav-rule{ flex-basis:100%; }
  .cm-roster-highlights{ grid-template-columns:1fr; }
  .gp-characters-main{ gap:var(--nyx-space-14); }
  .stage.is-compact-stage .gp-page{ padding:0 var(--nyx-space-12) var(--nyx-space-12); }
  .stage.is-compact-stage .gp-topbar .tb-brand{ left:6px; height:52px; }
  .stage.is-compact-stage .gp-topbar .tb-brand .brand-mark{ gap:var(--nyx-space-6); }
  .stage.is-compact-stage .gp-topbar .tb-brand .wm{ font-size:var(--nyx-compat-size-26px); }
  .stage.is-compact-stage .gp-topbar .tb-center{ margin-left:var(--nyx-compat-spacing-128px); max-width:calc(100vw - 184px); }
  .stage.is-compact-stage .nyx-time-pref-buttons button{ min-width:32px; height:30px; padding:0 var(--nyx-space-6); font-size:var(--nyx-type-caption); }
  .stage.is-compact-stage .nyx-time-pref-buttons button:last-child{ min-width:52px; }
  .stage.is-compact-stage .nyx-time-pref-popover{ top:72px; right:8px; width:min(300px,calc(100vw - 16px)); }
  .stage.is-compact-stage .gp-corner{ right:8px; top:8px; }
  .stage.is-compact-stage .gp-corner .tb-pengo.corner{ width:40px; height:40px; }
  .stage.is-compact-stage .gp-corner .tb-pengo.corner img{ height:35px; }
  .stage.is-compact-stage .cm-chan-switch{ right:8px; bottom:8px; width:136px; transform:scale(.92); }
  .stage.is-compact-stage .cm-chan-switch.beta::before{ transform:translateX(65px); }
  .stage.is-compact-stage .gp-topbar .banner{ min-width:150px; font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p11em); }
  .stage.is-compact-stage .gp-favs > div:first-child{ gap:var(--nyx-space-10) !important; }
  .stage.is-compact-stage .gp-favs > div:first-child{ flex-wrap:wrap; }
  .stage.is-compact-stage .gp-favs > div:first-child .gp-sec{ flex:1 1 100% !important; }
  .stage.is-compact-stage .gp-sec{ gap:var(--nyx-space-8); }
  .stage.is-compact-stage .gp-sec .ic{ height:70px; margin:var(--nyx-compat-spacing-neg-8px) var(--nyx-compat-spacing-neg-18px) var(--nyx-compat-spacing-neg-16px) 0; }
  .stage.is-compact-stage .gp-sec .t{ font-size:var(--nyx-compat-size-20px); line-height:1; }
  .stage.is-compact-stage .gp-side-nav{ gap:var(--nyx-space-6); }
  .stage.is-compact-stage .gp-fn-row{ min-width:max-content; padding:var(--nyx-space-10) var(--nyx-compat-spacing-11px); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p08em); }
  .stage.is-compact-stage .gp-fn-row .go{ display:none; }
  .stage.is-compact-stage .cm-days{ gap:var(--nyx-compat-spacing-3px); padding:var(--nyx-space-4); }
  .stage.is-compact-stage .cm-days button{ font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p08em); }
  .stage.is-compact-stage .cm-panel{ padding:0; }
  .stage.is-compact-stage .cm-tools{ gap:var(--nyx-space-8); }
  .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:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p08em); padding-inline:var(--nyx-space-10); }
}

/* A3: trounce cells get too narrow for two columns on phones */
@media (max-width: 680px){
  .cm-trounce-grid{ grid-template-columns:1fr; }
  .cm-tabs,.stage.is-compact-stage .cm-tabs{ grid-template-columns:minmax(0,326px); max-width:326px; }
}

@media (max-width: 1180px), (max-height: 760px){
  .nyx-pengo-menu.as-tab{
    grid-template-columns:1fr;
    grid-template-rows:auto;
  }
  .nyx-pengo-menu.as-tab .pm-opus{ grid-row:auto; }
  .nyx-pengo-menu.as-tab .pm-opus .pm-reset{ margin-top:var(--nyx-space-14); }
  .nyx-pengo-menu.as-tab .pm-identity-list{ grid-template-columns:1fr; }
}

.stage.is-compact-stage .settings-pane{
  overflow:visible;
  padding:0 var(--nyx-space-10) var(--nyx-compat-spacing-82px);
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab{
  position:relative;
  left:auto;
  right:auto;
  top:auto;
  bottom:auto;
  width:100%;
  max-height:none;
  overflow:visible;
  display:grid;
  grid-template-columns:1fr;
  gap:var(--nyx-space-12);
  padding:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-section{
  padding:var(--nyx-space-14);
  border-radius:var(--nyx-radius-control);
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-row,
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-slider,
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-display-games,
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-identity-row{
  grid-template-columns:1fr;
  gap:var(--nyx-compat-spacing-7px);
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-slider{
  grid-template-columns:1fr;
}
.stage.is-compact-stage .pm-identity-control,
.stage.is-compact-stage .pm-collab-control{
  grid-template-columns:1fr;
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-row{
  grid-template-columns:minmax(0, 1fr) auto;
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-opus-actions{
  grid-template-columns:1fr;
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-interface{
  grid-template-columns:1fr;
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-game-icons{
  justify-content:flex-start;
  flex-wrap:wrap;
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab [data-tip]::after{ display:none; }
.stage.is-compact-stage .nyx-pengo-menu.settings-board.as-tab{
  grid-template-columns:1fr;
}
.stage.is-compact-stage .settings-games-col{
  grid-template-columns:1fr;
}
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-game-section .pm-row,
.stage.is-compact-stage .nyx-pengo-menu.as-tab .pm-game-section .pm-identity-row{
  grid-template-columns:1fr;
}
.stage.is-compact-stage .pm-icon-pop{
  position:fixed;
  left:12px;
  right:12px;
  top:104px;
  width:auto;
  max-width:none;
}
.stage.is-compact-stage .pm-icon-grid{
  max-height:52vh;
}

/* Character materials: keep the ledger artwork softer so material rows stay readable. */
.cm-ledger-art img{
  opacity:.72;
  filter:saturate(.96) contrast(1.02);
}
.cm-ledger-art.birthday img,
.cm-ledger-art.holiday img{
  opacity:.72;
}
.cm-ledger-art::after{
  background:
    linear-gradient(90deg, var(--nyx-compat-color-25e6b941e042) 0%, var(--nyx-compat-color-e46c06c32320) 20%, var(--nyx-compat-color-87a250ed2006) 100%),
    linear-gradient(180deg, var(--nyx-compat-color-db0112f295ad), var(--nyx-compat-color-0ea7eadc5114));
}

@media (max-width: 820px){
  .pm-icon-pop.fixed{
    left:12px !important;
    right:12px !important;
    top:84px !important;
    width:auto !important;
    max-height:calc(100vh - 104px);
  }
  .pm-icon-search,
  .tcg-head,
  .wonder-head{
    display:grid;
    grid-template-columns:1fr;
  }
  .cm-custom-art-panel{
    grid-template-columns:1fr;
  }
  .nyx-img-fields{
    grid-template-columns:1fr;
  }
  .nyx-img-fields label{
    grid-template-columns:1fr;
    gap:var(--nyx-compat-spacing-5px);
  }
  .tcg-grid{
    --tcg-card-h:342px;
    --tcg-art-h:282px;
    grid-template-columns:repeat(auto-fill, minmax(144px, 1fr));
  }
  .tcg-search-tools{ width:100%; min-width:0; }
  .gallery-toolbar{ align-items:stretch; flex-direction:column; }
  .gallery-toolbar .gp-search{ flex-basis:auto; width:100%; }
  .gallery-grid{ grid-template-columns:1fr; }
  .gallery-grid.is-portraits,.gallery-grid.is-avatarFrames{ grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); }
  .gallery-grid.is-splashArts{ grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); }
  .tcg-filter-popout{ left:0; right:auto; width:100%; }
  .tcg-detail-panel,
  .pot-detail-panel,
  .wonder-detail-panel,
  .db-modal-card{
    grid-template-columns:1fr;
  }
  .wonder-detail-panel{ padding:var(--nyx-space-12) var(--nyx-space-4) var(--nyx-space-24); gap:var(--nyx-space-18); }
  .wonder-detail-image{ max-height:42vh; }
  .wonder-detail-copy h2{ font-size:var(--nyx-compat-size-27px); }
  .wonder-detail-copy dl{ grid-template-columns:1fr; }
  .wonder-grid{ grid-template-columns:repeat(auto-fill,minmax(124px,1fr)); }
  .wonder-card{ min-height:142px; padding:0; }
  .wonder-card > span{ width:100px; height:100px; }
  .wonder-card > .db-item-frame{ --cm-frame-scale:.48077; }
  .tcg-detail-image,
  .tcg-detail-fallback,
  .pot-detail-image,
  .pot-detail-fallback{
    position:relative;
    top:auto;
    max-height:42vh;
  }
  .db-modal{
    padding:var(--nyx-space-12);
  }
  .db-modal-card{
    max-height:calc(100vh - 24px);
    gap:var(--nyx-space-8);
    padding:var(--nyx-space-18);
  }
  .db-modal-media{
    min-height:180px;
  }
  .db-modal-media img{
    max-height:34vh;
  }
  .db-modal-copy{
    padding-right:0;
  }
  .db-modal-fields{
    grid-template-columns:1fr;
  }
}

/* ================= hub birthday calendar (Workstream P) ================= */
.bcal{ display:flex; flex:1; flex-direction:column; gap:var(--nyx-space-14); min-width:0; min-height:0; overflow-y:auto; overflow-x:hidden; padding-right:var(--nyx-space-4); }
.bcal-head{ display:flex; align-items:center; gap:var(--nyx-space-14); flex-wrap:wrap; }
.bcal-toggles{ display:flex; gap:var(--nyx-compat-spacing-7px); flex-wrap:wrap; padding:var(--nyx-compat-spacing-5px); border-radius:var(--nyx-compat-radius-13px);
  background:var(--nyx-compat-color-aead58cc9609); box-shadow:var(--nyx-compat-shadow-box-1766dc5e697a); }
.bcal-toggle{ display:inline-flex; align-items:center; gap:var(--nyx-compat-spacing-7px); border:0; cursor:pointer; height:33px; padding:0 var(--nyx-space-12); border-radius:var(--nyx-compat-radius-9px);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; color:var(--nyx-color-text-muted); background:none;
  transition:color .2s, background .2s, box-shadow .2s; }
.bcal-toggle img{ width:20px; height:20px; border-radius:var(--nyx-radius-small); object-fit:cover; filter:saturate(.4) opacity(.7); transition:filter .2s; }
.bcal-toggle:hover{ color:var(--nyx-color-text-max); }
.bcal-toggle.on{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,var(--nyx-compat-color-hex-7a63c8),var(--nyx-compat-color-hex-5a47a8)); box-shadow:var(--nyx-compat-shadow-box-807d5c88b94a); }
.bcal-toggle.on img{ filter:none; }

/* Chips 1.5x larger (user 2026-08-09). */
.bcal-chip{ flex:none; width:51px; height:51px; border:1px solid rgba(190,158,255,.9); padding:0; cursor:pointer; border-radius:50%;
  display:grid; place-items:center; overflow:hidden; background:var(--nyx-compat-color-d9278c30e314);
  box-shadow:var(--nyx-compat-shadow-box-5f8afdc5538f);
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease; }
.bcal-chip:hover, .bcal-chip:focus-visible{ transform:scale(1.1); border-color:var(--nyx-compat-color-hex-c7a8ff); box-shadow:var(--nyx-compat-shadow-box-26687ad86523); outline:1px solid var(--nyx-compat-color-52c6f41a8268); outline-offset:2px; }
.bcal-chip img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.bcal-chip-fallback{ font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-body); color:var(--nyx-color-text-soft); }

.bcal-next{ display:flex; flex-direction:column; gap:var(--nyx-compat-spacing-9px); padding:var(--nyx-compat-spacing-13px) var(--nyx-compat-spacing-15px); border-radius:var(--nyx-radius-panel);
  background:var(--nyx-compat-color-222ef397f65a); box-shadow:var(--nyx-compat-shadow-box-f23afef10f79); }
.bcal-next > b{ font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11p5px); letter-spacing:var(--nyx-compat-tracking-p16em); text-transform:uppercase; color:var(--nyx-compat-color-hex-b3a9e0); }
.bcal-next-row{ display:flex; gap:var(--nyx-space-18); flex-wrap:wrap; }
.bcal-next-item{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-9px); min-width:0; }
.bcal-next-item .who{ font-size:var(--nyx-compat-size-13p5px); color:var(--nyx-color-heading); letter-spacing:var(--nyx-compat-tracking-p02em); white-space:nowrap; }
.bcal-next-item .when{ font-size:var(--nyx-compat-size-11px); color:var(--nyx-color-text-faint); letter-spacing:var(--nyx-compat-tracking-p05em); white-space:nowrap; }

.bcal-month-bar{ display:flex; align-items:center; gap:var(--nyx-compat-spacing-11px); }
.bcal-month-bar > b{ min-width:170px; text-align:center; font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-15px); letter-spacing:var(--nyx-compat-tracking-p14em); text-transform:uppercase; color:var(--nyx-color-heading); }
.bcal-nav{ width:32px; height:32px; border:0; cursor:pointer; border-radius:var(--nyx-compat-radius-9px); display:grid; place-items:center;
  font-size:var(--nyx-compat-size-17px); color:var(--nyx-color-text-soft); background:var(--nyx-compat-color-933f25d488b1); box-shadow:var(--nyx-compat-shadow-box-566d2ebc31c8);
  transition:color .2s, box-shadow .2s; }
.bcal-nav:hover{ color:var(--nyx-color-text-max); box-shadow:var(--nyx-compat-shadow-box-196b253a0cad); }
.bcal-today-btn{ border:0; cursor:pointer; height:30px; padding:0 var(--nyx-compat-spacing-13px); border-radius:var(--nyx-compat-radius-9px);
  font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; color:var(--nyx-color-text-soft);
  background:var(--nyx-compat-color-933f25d488b1); box-shadow:var(--nyx-compat-shadow-box-16dee3c0fdb2); transition:color .2s, box-shadow .2s; }
.bcal-today-btn:hover{ color:var(--nyx-color-text-max); box-shadow:var(--nyx-compat-shadow-box-2f69a871c254); }

.bcal-grid{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:var(--nyx-space-6); }
.bcal-wd{ padding:var(--nyx-space-4) var(--nyx-space-2) var(--nyx-space-6); text-align:center; font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-10p5px); letter-spacing:var(--nyx-compat-tracking-p14em);
  text-transform:uppercase; color:var(--nyx-color-text-faint); }
.bcal-cell{ position:relative; min-height:104px; padding:var(--nyx-space-6) var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-7px); border-radius:var(--nyx-compat-radius-11px);
  background:var(--nyx-compat-color-22b60a790294); box-shadow:var(--nyx-compat-shadow-box-bb3796dd11e9); }
.bcal-cell.blank{ background:transparent; box-shadow:none; }
/* The day number is a big quiet numeral centred in its cell, with the birthday
   chips sitting over it (user 2026-08-09). */
.bcal-cell .d{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none;
  font-family:var(--nyx-font-display); font-size:var(--nyx-type-display-small); line-height:1;
  letter-spacing:var(--nyx-compat-tracking-p04em); color:var(--nyx-color-text-faint); opacity:.32; }
.bcal-cell.has-bday{ background:var(--nyx-compat-color-8d93a55be9bb); box-shadow:var(--nyx-compat-shadow-box-c52604492861); }
.bcal-cell.today{ box-shadow:var(--nyx-compat-shadow-box-efc2612bcb20); }
.bcal-cell.today .d{ color:var(--nyx-color-accent-bright); opacity:.55; font-weight:var(--nyx-weight-bold); }
.bcal-cell-chips{ position:relative; z-index:1; display:flex; flex-wrap:wrap; justify-content:center; gap:var(--nyx-compat-spacing-5px); margin-top:var(--nyx-compat-spacing-5px); }
.bcal-empty{ color:var(--nyx-color-text-faint); font-size:var(--nyx-type-body); padding:var(--nyx-compat-spacing-22px); text-align:center; letter-spacing:var(--nyx-compat-tracking-p03em); }
.bcal-add{ flex:none; min-height:34px; padding:0 var(--nyx-space-14); border:1px solid var(--nyx-compat-color-b5adaf107ddf); border-radius:var(--nyx-compat-radius-9px); cursor:pointer;
  color:var(--nyx-color-heading); background:linear-gradient(145deg,var(--nyx-compat-color-807c6e0d950e),var(--nyx-compat-color-cf22cffeaa6e)); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-compat-size-11px); letter-spacing:var(--nyx-compat-tracking-p1em); text-transform:uppercase; }
.bcal-add:hover,.bcal-add:focus-visible{ border-color:var(--nyx-compat-color-hex-c4a9ff); box-shadow:var(--nyx-compat-shadow-box-9187ec16e1f4); outline:none; }
.bcal-storage-error{ padding:var(--nyx-space-10) var(--nyx-space-12); border:1px solid var(--nyx-compat-color-b311784badc8); border-radius:var(--nyx-compat-radius-9px); color:var(--nyx-compat-color-hex-ffc1d0); background:var(--nyx-compat-color-30debeaf45fe); }
.bcal-dialog-backdrop{ position:fixed; inset:0; z-index:1200; display:grid; place-items:center; padding:var(--nyx-space-18); background:var(--nyx-compat-color-e68bf83fe20d); backdrop-filter:blur(8px); }
.bcal-dialog{ width:min(520px,100%); max-height:calc(100vh - 36px); overflow-y:auto; display:grid; gap:var(--nyx-compat-spacing-13px); padding:var(--nyx-compat-spacing-22px); border:1px solid var(--nyx-compat-color-86adf8edfa1d); border-radius:var(--nyx-compat-radius-16px);
  color:var(--nyx-compat-color-hex-eee9ff); background:linear-gradient(155deg,var(--nyx-compat-color-74efe017c73d),var(--nyx-compat-color-97ac11135c8c)); box-shadow:var(--nyx-compat-shadow-box-5fdfceb40a68); }
.bcal-dialog-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:var(--nyx-space-16); }
.bcal-dialog-head span,.bcal-dialog label>span,.bcal-icon-field>div>span{ display:block; color:var(--nyx-color-text-muted); font-family:var(--nyx-compat-family-ffc6cbbeca26); font-size:var(--nyx-type-label); letter-spacing:var(--nyx-compat-tracking-p13em); text-transform:uppercase; }
.bcal-dialog-head h2{ margin:var(--nyx-space-4) 0 0; color:var(--nyx-color-text-max); font-family:var(--nyx-font-display); font-size:var(--nyx-compat-size-25px); font-weight:var(--nyx-weight-regular); }
.bcal-dialog-close{ width:34px; height:34px; border:1px solid var(--nyx-compat-color-fe41f066fa45); border-radius:50%; color:var(--nyx-compat-color-hex-dcd4fa); background:var(--nyx-compat-color-986d4b8ffda6); cursor:pointer; font-size:var(--nyx-compat-size-21px); }
.bcal-dialog label{ display:grid; gap:var(--nyx-space-6); }
.bcal-dialog input:not([type="file"]),.bcal-dialog select,.bcal-dialog textarea{ box-sizing:border-box; width:100%; border:1px solid var(--nyx-compat-color-fe41f066fa45); border-radius:var(--nyx-compat-radius-9px); padding:var(--nyx-space-10) var(--nyx-compat-spacing-11px); color:var(--nyx-compat-color-hex-f5f1ff); background:var(--nyx-compat-color-c770dc5ef756); font:inherit; }
.bcal-dialog textarea{ resize:vertical; min-height:72px; }
.bcal-dialog input:focus-visible,.bcal-dialog select:focus-visible,.bcal-dialog textarea:focus-visible,.bcal-dialog button:focus-visible,.bcal-file:focus-within{ outline:2px solid var(--nyx-compat-color-hex-b998ff); outline-offset:2px; }
.bcal-dialog-date{ display:grid; grid-template-columns:minmax(0,1fr) 110px; gap:var(--nyx-space-10); }
.bcal-icon-field{ display:flex; align-items:center; gap:var(--nyx-space-10); flex-wrap:wrap; padding:var(--nyx-compat-spacing-11px); border:1px solid var(--nyx-compat-color-a4a1f04d7ca4); border-radius:var(--nyx-radius-card); }
.bcal-icon-field>div{ flex:1; min-width:180px; }.bcal-icon-field small{ display:block; margin-top:var(--nyx-space-4); color:var(--nyx-compat-color-hex-8177a8); font-size:var(--nyx-compat-size-11px); }
.bcal-file input{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.bcal-file span,.bcal-icon-field>button,.bcal-dialog-actions button{ display:inline-grid; place-items:center; min-height:34px; padding:0 var(--nyx-space-12); border:1px solid var(--nyx-compat-color-92028f0fbac1); border-radius:var(--nyx-radius-control); color:var(--nyx-compat-color-hex-dcd5f7); background:var(--nyx-compat-color-1ef7f9315602); cursor:pointer; font:inherit; }
.bcal-dialog-error{ margin:0; padding:var(--nyx-compat-spacing-9px) var(--nyx-compat-spacing-11px); border-radius:var(--nyx-radius-control); color:var(--nyx-compat-color-hex-ffc1d0); background:var(--nyx-compat-color-e0bda39626f0); }
.bcal-dialog-actions{ display:grid; grid-template-columns:auto 1fr auto auto; gap:var(--nyx-space-8); align-items:center; padding-top:var(--nyx-compat-spacing-3px); }
.bcal-dialog-actions button.primary{ color:var(--nyx-color-text-max); border-color:var(--nyx-compat-color-713bcd776982); background:linear-gradient(145deg,var(--nyx-compat-color-hex-7755bc),var(--nyx-compat-color-hex-59409b)); }
.bcal-dialog-actions button.danger{ color:var(--nyx-compat-color-hex-ffb2c3); border-color:var(--nyx-compat-color-5bdc6317ac80); }
.bcal-dialog button:disabled,.bcal-file:has(input:disabled){ opacity:.55; cursor:wait; }

@media (max-width: 820px){
  .bcal-head{ flex-direction:column; align-items:flex-start; gap:var(--nyx-compat-spacing-9px); }
  .bcal-cell{ min-height:78px; padding:var(--nyx-space-4) var(--nyx-compat-spacing-5px) var(--nyx-compat-spacing-5px); }
  .bcal-cell .d{ font-size:var(--nyx-type-title); }
  .bcal-chip{ width:41px; height:41px; }
  .bcal-toggle span{ display:none; }
  .bcal-toggle{ padding:0 var(--nyx-compat-spacing-9px); }
  .bcal-month-bar > b{ min-width:0; flex:1; }
  .bcal-next-row{ gap:var(--nyx-space-12); }
  .bcal-add{ align-self:stretch; }
  .bcal-dialog-backdrop{ align-items:end; padding:0; }
  .bcal-dialog{ width:100%; max-height:92vh; border-radius:var(--nyx-compat-radius-16px) var(--nyx-compat-radius-16px) 0 0; padding:var(--nyx-space-18); }
  .bcal-dialog-actions{ grid-template-columns:1fr 1fr; }.bcal-dialog-actions>span{ display:none; }.bcal-dialog-actions button.danger{ grid-column:1 / -1; }
}
/* The Library: the index stays compact; book bodies load only after selection. */
.library-page{box-sizing:border-box;width:100%;max-width:100%;padding:clamp(var(--nyx-space-20),var(--nyx-compat-spacing-3vw),var(--nyx-compat-spacing-42px));overflow:auto;min-width:0}
.library-hero{max-width:720px;margin-bottom:var(--nyx-space-18)}
.library-hero>span{display:block;margin-bottom:var(--nyx-space-2);color:var(--muted,var(--nyx-compat-color-hex-aaa4bd));font-size:var(--nyx-compat-size-p76rem);font-weight:var(--nyx-weight-bold);letter-spacing:var(--nyx-compat-tracking-p08em);text-transform:uppercase}
.library-hero h1,.library-reader-head h1{margin:0;font:var(--nyx-compat-font-c3a494da8bba);color:var(--text,var(--nyx-compat-color-hex-f5f2ff))}
/* Search + count share one aligned row (#17). */
.library-search{display:flex;align-items:center;gap:var(--nyx-space-12);max-width:620px;margin-bottom:var(--nyx-space-8)}
.library-search input{flex:1 1 auto;min-width:0}
/* The "SEARCH LIBRARY" label was removed 2026-08-09 — the field stands alone. */
.library-search input{box-sizing:border-box;width:100%;border:1px solid var(--nyx-compat-color-e56afd83c3e1);border-radius:var(--nyx-compat-radius-12px);background:var(--nyx-compat-color-c4af97ccbfe4);color:inherit;padding:var(--nyx-space-12) var(--nyx-space-14);font:inherit}
.library-search input:focus-visible,.library-tile:focus-visible,.library-back:focus-visible,.library-volumes button:focus-visible{outline:2px solid var(--accent,var(--nyx-compat-color-hex-bba4ff));outline-offset:3px}
.library-count-row{display:flex;align-items:center;gap:var(--nyx-space-12);min-height:28px;margin:var(--nyx-space-6) 0 var(--nyx-space-12);color:var(--muted,var(--nyx-compat-color-hex-aaa4bd));font-size:var(--nyx-compat-size-p82rem)}
.library-count-row button{appearance:none;border:0;background:none;color:var(--accent,var(--nyx-compat-color-hex-bba4ff));padding:0;cursor:pointer}
.library-count{margin:0}
.library-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(145px,1fr));gap:var(--nyx-space-14);padding-bottom:var(--nyx-compat-spacing-30px)}
.library-tile{appearance:none;position:relative;min-width:0;border:0;background:none;color:inherit;padding:0;text-align:left;cursor:pointer;transition:transform .16s ease}
.library-tile:hover{transform:translateY(-2px)}
.library-cover{display:grid;place-items:center;aspect-ratio:1;border:0;border-radius:0;background:transparent;overflow:hidden;margin-bottom:var(--nyx-compat-spacing-9px);font-size:var(--nyx-compat-size-2p3rem);transition:filter .16s ease,transform .16s ease}
.library-tile:hover .library-cover{transform:translateY(-3px);filter:drop-shadow(0 6px 14px rgba(139,123,255,.35))}
.library-cover img{width:100%;height:100%;object-fit:contain;padding:var(--nyx-space-8);box-sizing:border-box}
/* Fixed two-line title block so every tile is the same height and the grid
   lines up (user 2026-08-09). A long title shrinks its font (set inline from
   the title length) rather than growing the tile. */
.library-tile strong{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  height:38px;line-height:1.25;overflow-wrap:break-word}
.library-tile small{display:block;margin-top:var(--nyx-compat-spacing-5px);color:var(--muted,var(--nyx-compat-color-hex-aaa4bd))}
.library-text-match{display:inline-block;margin-top:var(--nyx-compat-spacing-7px);border-radius:var(--nyx-radius-pill);background:var(--nyx-compat-color-ed632d4904d8);color:var(--nyx-compat-color-hex-d8c2ff);padding:var(--nyx-compat-spacing-3px) var(--nyx-compat-spacing-7px);font-size:var(--nyx-compat-size-p68rem);font-weight:var(--nyx-weight-bold);letter-spacing:var(--nyx-compat-tracking-p03em)}
.library-status{margin:var(--nyx-compat-spacing-30px) auto;max-width:560px;padding:var(--nyx-space-20);border:1px solid var(--nyx-compat-color-b56364a7c7a0);border-radius:var(--nyx-radius-panel);text-align:center;color:var(--muted,var(--nyx-compat-color-hex-aaa4bd))}
.library-status.error{border-color:var(--nyx-compat-color-3e3f322492e1)}
.library-status button,.library-back,.library-volumes button{appearance:none;border:1px solid var(--nyx-compat-color-06ff57dd0405);border-radius:var(--nyx-radius-card);background:var(--nyx-compat-color-0d923d38199d);color:inherit;padding:var(--nyx-compat-spacing-9px) var(--nyx-space-12);cursor:pointer}
.library-reader-head{box-sizing:border-box;display:flex;align-items:center;gap:var(--nyx-space-14);width:100%;max-width:920px;min-width:0;margin:0 auto var(--nyx-space-14)}
.library-reader-head h1{font-size:var(--nyx-compat-size-5f9cce4b1d89)}
.library-back{flex:0 0 auto}
.library-reader{box-sizing:border-box;width:100%;max-width:920px;min-width:0;margin:0 auto;background:var(--nyx-compat-color-f69bd21206ef);border:1px solid var(--nyx-compat-color-b56364a7c7a0);border-radius:var(--nyx-compat-radius-18px);padding:clamp(var(--nyx-space-20),var(--nyx-compat-spacing-4vw),var(--nyx-compat-spacing-48px));box-shadow:var(--nyx-compat-shadow-box-76fee1493cb7);overflow:hidden}
.library-volumes{box-sizing:border-box;display:flex;flex-wrap:wrap;gap:var(--nyx-space-8);width:100%;max-width:100%;min-width:0;padding-bottom:var(--nyx-compat-spacing-22px);margin-bottom:var(--nyx-compat-spacing-22px);border-bottom:1px solid var(--nyx-compat-color-79f2e0da8494)}
.library-volumes button.on{background:color-mix(in srgb,var(--accent,var(--nyx-compat-color-hex-bba4ff)) 27%,var(--nyx-compat-color-5704ef9ed39c));border-color:var(--accent,var(--nyx-compat-color-hex-bba4ff))}
.library-document{box-sizing:border-box;width:100%;max-width:100%;min-width:0;font:var(--nyx-compat-font-f0aee882ac3f);color:color-mix(in srgb,var(--text,var(--nyx-compat-color-hex-f5f2ff)) 93%,transparent);overflow-wrap:anywhere;user-select:text;-webkit-user-select:text;cursor:text}
.library-query-hit{border-radius:var(--nyx-compat-radius-p16em);background:var(--nyx-compat-color-38ae883e9772);color:inherit;padding:0 var(--nyx-compat-spacing-p06em)}
.library-source-text.is-bold{font-weight:var(--nyx-weight-extrabold)}
.library-source-text.is-underlined{text-decoration:underline;text-decoration-thickness:.12em;text-underline-offset:.16em}
.library-source-text.is-highlight-violet{background:var(--nyx-compat-color-f5d50dfbe004)}
.library-source-text.is-highlight-rose{background:var(--nyx-compat-color-0494364a37b7)}
.library-source-text.is-highlight-amber{background:var(--nyx-compat-color-f421c74256d0)}
.library-source-text.is-highlight-blue{background:var(--nyx-compat-color-21e756ce6e8b)}
.library-source-text.is-highlight-green{background:var(--nyx-compat-color-c787c40d25a8)}
.library-source-text.has-note{box-shadow:var(--nyx-compat-shadow-box-32120db861f8)}
.library-source-text.library-query-hit{outline:1px solid var(--nyx-compat-color-44e6f10b8545);outline-offset:1px}
.library-note-pin{appearance:none;display:inline-grid;place-items:center;width:1.15em;height:1.15em;margin:0 var(--nyx-compat-spacing-p18em) 0 var(--nyx-compat-spacing-p05em);border:0;border-radius:50%;background:var(--nyx-compat-color-3ffffae4cab0);color:var(--nyx-compat-color-hex-eadfff);padding:0;vertical-align:.08em;cursor:pointer}
.library-note-pin::before{content:'✦';font:var(--nyx-compat-font-324f1756f0bc)}
.library-note-pin:hover{background:var(--nyx-compat-color-125fcf1b17b4)}
.library-note-pin:focus-visible,.library-annotation-toolbar button:focus-visible,.library-note-popover :is(button,textarea):focus-visible,.library-stale-marks button:focus-visible{outline:2px solid var(--accent,var(--nyx-compat-color-hex-bba4ff));outline-offset:2px}
.library-annotation-message{display:flex;align-items:center;justify-content:space-between;gap:var(--nyx-space-12);max-width:920px;margin:0 auto var(--nyx-space-12);border-left:2px solid var(--nyx-compat-color-d8dc8da25f8f);padding:var(--nyx-compat-spacing-7px) var(--nyx-space-10);background:var(--nyx-compat-color-d257407d8316);color:var(--nyx-compat-color-hex-ddd1f3);font-size:var(--nyx-compat-size-p82rem)}
.library-annotation-message button{appearance:none;flex:0 0 auto;border:1px solid var(--nyx-compat-color-737f6745e6dd);border-radius:var(--nyx-compat-radius-7px);background:var(--nyx-compat-color-c7033bd71091);color:var(--nyx-compat-color-hex-f5f0ff);padding:var(--nyx-compat-spacing-5px) var(--nyx-compat-spacing-9px);cursor:pointer;font:var(--nyx-compat-font-ebd4d194132a)}
.library-annotation-message.error{border-color:var(--nyx-compat-color-d4513845613a);background:var(--nyx-compat-color-641ecf58493e)}
.library-stale-marks{max-width:920px;margin:0 auto var(--nyx-space-14);border:1px solid var(--nyx-compat-color-f6b1daac6808);border-radius:var(--nyx-radius-card);background:var(--nyx-compat-color-f8bf0cf9244e);padding:var(--nyx-space-8) var(--nyx-space-10);color:var(--nyx-compat-color-hex-dbcdbd);font-size:var(--nyx-compat-size-p78rem)}
.library-stale-marks summary{cursor:pointer;font-weight:var(--nyx-compat-weight-750);color:var(--nyx-compat-color-hex-f0d9bc)}
.library-stale-marks>div{display:flex;align-items:center;justify-content:space-between;gap:var(--nyx-space-10);padding-top:var(--nyx-space-8)}
.library-stale-marks button{appearance:none;flex:0 0 auto;border:1px solid var(--nyx-compat-color-836f46b50694);border-radius:var(--nyx-radius-control);background:transparent;color:var(--nyx-compat-color-hex-f0d9bc);padding:var(--nyx-compat-spacing-5px) var(--nyx-space-8);cursor:pointer}
.library-annotation-toolbar{position:fixed;z-index:80;left:50%;bottom:max(18px,env(safe-area-inset-bottom));transform:translateX(-50%);display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--nyx-compat-spacing-7px);width:min(760px,calc(100vw - 28px));box-sizing:border-box;border:1px solid var(--nyx-compat-color-922faba64705);border-radius:var(--nyx-radius-panel);background:var(--nyx-compat-color-7af80ae0c1a4);box-shadow:var(--nyx-compat-shadow-box-426d9713eb26);padding:var(--nyx-compat-spacing-9px) var(--nyx-compat-spacing-11px);color:var(--nyx-compat-color-hex-f5f0ff);backdrop-filter:blur(14px)}
.library-annotation-toolbar p{flex:1 0 100%;margin:0 var(--nyx-space-28) var(--nyx-space-2) 0;color:var(--nyx-compat-color-hex-cfc3df);font-size:var(--nyx-compat-size-p76rem);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.library-annotation-toolbar button{appearance:none;border:1px solid var(--nyx-compat-color-e56afd83c3e1);border-radius:var(--nyx-radius-control);background:var(--nyx-compat-color-bfcafe02ee03);color:inherit;padding:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-9px);font:var(--nyx-compat-font-5dbe8487eb68);cursor:pointer}
.library-annotation-toolbar button[aria-pressed="true"]{border-color:var(--nyx-compat-color-ebb7bceedd06);background:var(--nyx-compat-color-e0b78d734e05);box-shadow:var(--nyx-compat-shadow-box-dcfcc9cf5bbb)}
.library-annotation-toolbar button:disabled{opacity:.5;cursor:default}
.library-annotation-toolbar .library-annotation-close{position:absolute;top:7px;right:8px;border:0;background:transparent;font-size:var(--nyx-compat-size-1rem);padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px)}
.library-highlight-swatches{display:flex;align-items:center;gap:var(--nyx-space-4);border:1px solid var(--nyx-compat-color-b56364a7c7a0);border-radius:var(--nyx-compat-radius-9px);background:#0d0a14;padding:var(--nyx-space-4)}
.library-annotation-toolbar .library-highlight-swatch{--library-swatch:var(--nyx-compat-color-hex-9970ff);display:grid;place-items:center;width:25px;height:25px;border-color:transparent;border-radius:var(--nyx-compat-radius-6px);background:var(--nyx-compat-color-hex-181321);padding:0}
.library-highlight-swatch span{width:15px;height:15px;border-radius:var(--nyx-compat-radius-4px);background:var(--library-swatch);box-shadow:var(--nyx-compat-shadow-box-a036940505de)}
.library-highlight-swatch.is-rose{--library-swatch:var(--nyx-compat-color-hex-e85597)}.library-highlight-swatch.is-amber{--library-swatch:var(--nyx-compat-color-hex-e7ae43)}.library-highlight-swatch.is-blue{--library-swatch:var(--nyx-compat-color-hex-479de2)}.library-highlight-swatch.is-green{--library-swatch:var(--nyx-compat-color-hex-3eb787)}
.library-annotation-more{position:relative;flex:0 0 auto}
.library-annotation-toolbar .library-annotation-more-button{min-width:35px;font-size:var(--nyx-compat-size-p88rem);letter-spacing:var(--nyx-compat-tracking-p08em)}
.library-annotation-overflow{position:absolute;right:0;bottom:calc(100% + 7px);width:max-content;min-width:142px;border:1px solid var(--nyx-compat-color-cc1c75c2b61b);border-radius:var(--nyx-compat-radius-9px);background:#120e1d;box-shadow:var(--nyx-compat-shadow-box-0e48798bb91e);padding:var(--nyx-compat-spacing-5px)}
.library-annotation-toolbar .library-annotation-overflow button{width:100%;border:0;background:transparent;padding:var(--nyx-space-8) var(--nyx-compat-spacing-9px);text-align:left}
.library-annotation-toolbar .library-annotation-overflow button:not(:disabled):hover{background:var(--nyx-compat-color-2e79aeedb047)}
.library-note-popover{position:fixed;z-index:90;left:50%;top:50%;transform:translate(-50%,-50%);box-sizing:border-box;width:min(440px,calc(100vw - 28px));border:1px solid var(--nyx-compat-color-4f71471d97b5);border-radius:var(--nyx-compat-radius-15px);background:var(--nyx-compat-color-hex-171221);box-shadow:var(--nyx-compat-shadow-box-bc9399c773c2);padding:var(--nyx-compat-spacing-15px);color:var(--nyx-compat-color-hex-f5f0ff)}
.library-note-popover-head{display:flex;align-items:center;justify-content:space-between;gap:var(--nyx-space-12)}
.library-note-popover-head strong{font:var(--nyx-compat-font-0dc2a5053aa2)}
.library-note-popover-head button{appearance:none;border:0;background:transparent;color:inherit;padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px);font-size:var(--nyx-compat-size-1p05rem);cursor:pointer}
.library-note-popover>p{margin:var(--nyx-compat-spacing-7px) 0 var(--nyx-compat-spacing-11px);color:var(--nyx-compat-color-hex-bdb1ca);font-size:var(--nyx-compat-size-p78rem);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.library-note-popover textarea{box-sizing:border-box;width:100%;min-height:116px;resize:vertical;border:1px solid var(--nyx-compat-color-e56afd83c3e1);border-radius:var(--nyx-radius-card);background:var(--nyx-compat-color-hex-0e0b15);color:inherit;padding:var(--nyx-space-10) var(--nyx-compat-spacing-11px);font:inherit;user-select:text}
.library-note-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--nyx-space-8);margin-top:var(--nyx-compat-spacing-11px)}
.library-note-actions button{appearance:none;border:1px solid var(--nyx-compat-color-06ff57dd0405);border-radius:var(--nyx-radius-control);background:var(--nyx-compat-color-0d923d38199d);color:inherit;padding:var(--nyx-space-8) var(--nyx-space-10);cursor:pointer}
.library-note-actions button:first-child{background:var(--nyx-compat-color-df75b28eeffb);border-color:var(--nyx-compat-color-e3423287da97)}
.library-note-actions button.danger{color:var(--nyx-compat-color-hex-ff9caf)}
.library-document::selection,.library-document *::selection{background:var(--nyx-compat-color-7095faed97f9);color:var(--nyx-color-text-max)}
.library-document h2,.library-document h3,.library-document h4{font-family:var(--font-display,inherit);line-height:1.25;margin:var(--nyx-compat-spacing-1p8em) 0 var(--nyx-compat-spacing-p65em);color:var(--text,var(--nyx-color-text-max))}
.library-document h2:first-child,.library-document h3:first-child{margin-top:0}
.library-document p{margin:0 0 var(--nyx-compat-spacing-1p18em);white-space:normal}
.library-document li{margin:var(--nyx-compat-spacing-p28em) 0}
.library-table-wrap{max-width:100%;overflow-x:auto;margin:var(--nyx-compat-spacing-1p4em) 0}
.library-document table{border-collapse:collapse;min-width:420px}
.library-document td{border:1px solid var(--nyx-compat-color-06ff57dd0405);padding:var(--nyx-space-8) var(--nyx-space-10);vertical-align:top}
.library-inline-image{display:block;max-width:min(100%,520px);height:auto;margin:var(--nyx-space-20) auto;border-radius:var(--nyx-compat-radius-12px)}
@media (max-width:700px){.library-page{padding:var(--nyx-space-16)}.library-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--nyx-space-10)}.library-reader-head{align-items:flex-start;flex-direction:column}.library-back{margin:0}.library-reader{max-width:100%;padding:var(--nyx-space-20) var(--nyx-compat-spacing-17px);border-radius:var(--nyx-radius-panel)}.library-document{font-size:var(--nyx-compat-size-1rem);line-height:1.68}.library-volumes{flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-inline:contain;padding-bottom:var(--nyx-space-14)}.library-volumes button{flex:0 0 auto;white-space:nowrap}.library-annotation-toolbar{bottom:max(60px,calc(env(safe-area-inset-bottom) + 60px));gap:var(--nyx-space-6);width:calc(100vw - 18px);max-height:42vh;overflow-x:hidden;overflow-y:auto;padding:var(--nyx-compat-spacing-9px)}.library-annotation-toolbar p{font-size:var(--nyx-compat-size-p72rem)}.library-annotation-toolbar :is(button,select){min-height:34px;padding:var(--nyx-compat-spacing-7px) var(--nyx-space-8)}.library-highlight-swatches{order:8}.library-note-popover{top:auto;bottom:max(60px,calc(env(safe-area-inset-bottom) + 60px));transform:translateX(-50%);max-height:74vh;overflow-y:auto}.library-stale-marks>div{align-items:flex-start;flex-direction:column}}

/* ---------------- Achievement Ledger ---------------- */
.achievement-page{--ach-accent:var(--nyx-compat-color-hex-b7a7ff);--ach-accent-rgb:var(--nyx-compat-color-ef623ed4d696);position:relative;gap:var(--nyx-space-18);overflow:auto;padding:var(--nyx-space-4) var(--nyx-space-6) var(--nyx-compat-spacing-30px) var(--nyx-space-2);scrollbar-gutter:stable}
.achievement-hsr{--ach-accent:var(--nyx-compat-color-hex-75d9e7);--ach-accent-rgb:var(--nyx-compat-color-dbfdbbc3e4d0)}
.achievement-hero{position:relative;display:grid;grid-template-columns:auto minmax(260px,1fr) minmax(220px,320px);align-items:center;gap:var(--nyx-space-24);overflow:visible;padding:var(--nyx-space-20) var(--nyx-compat-spacing-22px);border:1px solid var(--nyx-compat-color-8ad29a1cb9b0);border-radius:var(--nyx-compat-radius-20px);background:radial-gradient(circle at 10% 20%,var(--nyx-compat-color-eb8a84a2f940),transparent 34%),linear-gradient(135deg,var(--nyx-compat-color-ae209f7b7139),var(--nyx-compat-color-38cf0e2dcf47));box-shadow:var(--nyx-compat-shadow-box-88b5a935ec10)}
.achievement-hero::after{content:"";position:absolute;inset:10px;pointer-events:none;border:1px solid var(--nyx-compat-color-f8d551cb0e88);border-radius:var(--nyx-radius-panel)}
.achievement-orbit{position:relative;display:grid;width:112px;aspect-ratio:1;place-items:center;border-radius:50%;background:conic-gradient(var(--ach-accent) 0 var(--ach-pct),var(--nyx-compat-color-79f2e0da8494) var(--ach-pct) 360deg);box-shadow:var(--nyx-compat-shadow-box-4a4f2ae9b6c9)}
.achievement-orbit::before{content:"";position:absolute;inset:7px;border-radius:50%;background:radial-gradient(circle at 50% 38%,var(--nyx-compat-color-6d2c3e54b1b0),var(--nyx-compat-color-6f8e9fae80f9) 68%);box-shadow:var(--nyx-compat-shadow-box-0cb1bb18754a)}
.achievement-orbit::after{content:"";position:absolute;inset:-5px;border:1px solid var(--nyx-compat-color-871947ad3714);border-radius:50%;clip-path:polygon(0 0,65% 0,65% 14%,100% 14%,100% 100%,28% 100%,28% 86%,0 86%)}
.achievement-orbit span{position:relative;z-index:1;display:grid;text-align:center}.achievement-orbit b{color:var(--nyx-color-text-max);font:var(--nyx-compat-font-cf1d7ea48cb6)}.achievement-orbit small{margin-top:var(--nyx-compat-spacing-5px);color:var(--nyx-compat-color-hex-aaa1c3);font-size:var(--nyx-type-label);letter-spacing:var(--nyx-compat-tracking-p08em)}
.achievement-title>span{color:var(--ach-accent);font-size:var(--nyx-type-label);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p16em);text-transform:uppercase}.achievement-title h1{margin:var(--nyx-compat-spacing-5px) 0 var(--nyx-space-8);color:var(--nyx-color-text-max);font:var(--nyx-compat-font-31de89a4ba73)}.achievement-title p{max-width:620px;margin:0;color:var(--nyx-compat-color-hex-aaa3bd);font-size:var(--nyx-type-small);line-height:1.5}
.achievement-profile-tools{position:relative;z-index:1;display:flex;flex-wrap:wrap;align-items:end;justify-content:flex-end;gap:var(--nyx-space-8)}.achievement-profile-tools>label{display:grid;flex:1 1 150px;gap:var(--nyx-compat-spacing-5px)}.achievement-profile-tools label>span,.achievement-new-profile label>span,.achievement-search>span{color:var(--nyx-compat-color-hex-887f9e);font-size:var(--nyx-type-caption);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p12em);text-transform:uppercase}
.achievement-page :is(select,input[type="search"],input[type="text"]){min-height:38px;box-sizing:border-box;border:1px solid var(--nyx-compat-color-871947ad3714);border-radius:var(--nyx-compat-radius-9px);outline:0;background:var(--nyx-compat-color-7ef3d5af1100);color:var(--nyx-compat-color-hex-eeeaf8);padding:var(--nyx-space-8) var(--nyx-compat-spacing-11px);font:inherit}.achievement-page :is(select,input):focus-visible,.achievement-page button:focus-visible,.achievement-page .achievement-file-button:focus-within{outline:2px solid var(--ach-accent);outline-offset:2px}
.achievement-page button,.achievement-file-button{min-height:38px;box-sizing:border-box;border:1px solid var(--nyx-compat-color-5c973303966c);border-radius:var(--nyx-compat-radius-9px);background:var(--nyx-compat-color-3972e28257b7);color:var(--nyx-compat-color-hex-eeeaff);padding:var(--nyx-space-8) var(--nyx-compat-spacing-13px);font:var(--nyx-compat-font-e37578d7a6e4);letter-spacing:var(--nyx-compat-tracking-p04em);cursor:pointer}.achievement-page button:hover,.achievement-file-button:hover{border-color:var(--nyx-compat-color-50d15e5722b0);background:var(--nyx-compat-color-584febac5703)}.achievement-page button:disabled{cursor:not-allowed;opacity:.5}
.achievement-page .achievement-quiet-button{border-color:var(--nyx-compat-color-b56364a7c7a0);background:var(--nyx-compat-color-f8d551cb0e88);color:var(--nyx-compat-color-hex-b8b0ca)}
.achievement-new-profile{position:absolute;z-index:4;top:calc(100% + 8px);right:0;display:grid;width:min(300px,80vw);gap:var(--nyx-compat-spacing-9px);padding:var(--nyx-compat-spacing-13px);border:1px solid var(--nyx-compat-color-2c2e69e12484);border-radius:var(--nyx-compat-radius-12px);background:var(--nyx-compat-color-hex-0e0b1d);box-shadow:var(--nyx-compat-shadow-box-1340826dbcf3)}.achievement-new-profile label{display:grid;gap:var(--nyx-compat-spacing-5px)}.achievement-new-profile input{width:100%}
.achievement-notice{padding:var(--nyx-space-18);border:1px solid var(--nyx-compat-color-871947ad3714);border-radius:var(--nyx-radius-panel);background:var(--nyx-compat-color-c6211d55d129);color:var(--nyx-compat-color-hex-cfc8df);text-align:center}.achievement-notice.error,.achievement-import-message.error{border-color:var(--nyx-compat-color-f3e338033de7);color:var(--nyx-compat-color-hex-ff9daf)}.achievement-notice p{margin:0 0 var(--nyx-space-10)}
.achievement-command{display:grid;grid-template-columns:minmax(220px,1fr) auto;gap:var(--nyx-space-12) var(--nyx-space-20);align-items:center;padding:var(--nyx-space-16) var(--nyx-space-18);border:1px solid var(--nyx-compat-color-d8a01d2328f4);border-radius:var(--nyx-compat-radius-15px);background:linear-gradient(90deg,var(--nyx-compat-color-bcd550fac433),var(--nyx-compat-color-c3c6b148749d))}.achievement-import-copy{display:grid;gap:var(--nyx-space-4)}.achievement-import-copy strong{color:var(--nyx-compat-color-hex-e8e3f5);font-size:var(--nyx-compat-size-13px)}.achievement-import-copy span{color:var(--nyx-compat-color-hex-8f879f);font-size:var(--nyx-compat-size-10p5px);line-height:1.45}.achievement-command-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nyx-space-8)}.achievement-file-button{display:inline-grid;place-items:center}.achievement-file-button input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.achievement-import-preview{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--nyx-compat-spacing-9px);padding-top:var(--nyx-space-12);border-top:1px solid var(--nyx-compat-color-bfcafe02ee03)}.achievement-import-preview>div{display:grid;min-width:90px}.achievement-import-preview b{color:var(--nyx-color-text-max);font-size:var(--nyx-compat-size-18px)}.achievement-import-preview span{color:var(--nyx-compat-color-hex-8e869e);font-size:var(--nyx-type-caption);text-transform:uppercase}.achievement-import-preview .warn b{color:var(--nyx-compat-color-hex-ffcc83)}.achievement-import-preview button:first-of-type{margin-left:auto}.achievement-import-message,.achievement-unknown-note,.achievement-backup-note{grid-column:1/-1;margin:0;color:var(--nyx-compat-color-hex-bdebd7);font-size:var(--nyx-compat-size-10p5px)}.achievement-unknown-note{color:var(--nyx-compat-color-hex-d8b77c)}.achievement-backup-note{color:var(--nyx-compat-color-hex-6f687d);font-size:var(--nyx-type-caption)}
.achievement-workspace{display:grid;grid-template-columns:minmax(210px,260px) minmax(0,1fr);gap:var(--nyx-space-16);height:clamp(460px,calc(100vh - 385px),720px);min-height:0}.achievement-categories{display:flex;flex-direction:column;gap:var(--nyx-compat-spacing-7px);min-height:0;overflow-y:auto;padding-right:var(--nyx-compat-spacing-3px);scrollbar-width:thin;scrollbar-color:var(--nyx-compat-color-2c2e69e12484) transparent}.achievement-categories button{display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;flex:none;gap:var(--nyx-space-10);min-height:58px;padding:var(--nyx-space-8) var(--nyx-space-10);border-color:var(--nyx-compat-color-0d923d38199d);background:var(--nyx-compat-color-1626650d3fe1);text-align:left}.achievement-categories button:hover,.achievement-categories button.on{border-color:var(--nyx-compat-color-f42edb24539a);background:linear-gradient(90deg,var(--nyx-compat-color-3972e28257b7),var(--nyx-compat-color-73ac77550f58))}.achievement-categories button.on{box-shadow:var(--nyx-compat-shadow-box-c978411d6e5f)}
.achievement-category-mark{position:relative;display:grid;width:38px;aspect-ratio:1;place-items:center;border-radius:50%;background:conic-gradient(var(--ach-accent) 0 var(--cat-pct,0deg),var(--nyx-compat-color-c201d2dab2c4) var(--cat-pct,0deg));color:var(--nyx-color-heading);font-size:var(--nyx-type-caption);font-weight:var(--nyx-weight-black);letter-spacing:var(--nyx-compat-tracking-neg-p03em)}.achievement-category-mark::before{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--nyx-compat-color-hex-110d24)}.achievement-category-mark{isolation:isolate}.achievement-category-mark::before{z-index:-1}.achievement-categories button>span:last-child{display:grid;gap:var(--nyx-compat-spacing-3px);min-width:0}.achievement-categories strong{overflow:hidden;color:var(--nyx-compat-color-hex-cec8dc);font-size:var(--nyx-type-label);line-height:1.25;text-overflow:ellipsis}.achievement-categories small{color:var(--nyx-compat-color-hex-7d758d);font-size:var(--nyx-type-caption)}
.achievement-ledger{min-width:0;overflow-x:hidden;overflow-y:auto;border:1px solid var(--nyx-compat-color-0d923d38199d);border-radius:var(--nyx-compat-radius-16px);background:var(--nyx-compat-color-9ca680c05aec);scrollbar-width:thin;scrollbar-color:var(--nyx-compat-color-2c2e69e12484) transparent}.achievement-filters{position:sticky;z-index:2;top:0;display:flex;align-items:end;gap:var(--nyx-space-12);padding:var(--nyx-space-14);border-bottom:1px solid var(--nyx-compat-color-bfcafe02ee03);background:var(--nyx-compat-color-0c5a2f0fb780);backdrop-filter:blur(12px)}.achievement-search{display:grid;flex:1;gap:var(--nyx-compat-spacing-5px)}.achievement-search input{width:100%}.achievement-status-filter{display:flex;gap:var(--nyx-compat-spacing-5px)}.achievement-status-filter button{min-height:38px;border-color:transparent;background:var(--nyx-compat-color-f8d551cb0e88);color:var(--nyx-compat-color-hex-91899f)}.achievement-status-filter button.on{border-color:var(--nyx-compat-color-2c2e69e12484);background:var(--nyx-compat-color-6d2c3e54b1b0);color:var(--nyx-compat-color-hex-f2edff)}.achievement-result-count{position:sticky;z-index:2;top:67px;margin:0;padding:var(--nyx-compat-spacing-9px) var(--nyx-compat-spacing-15px);border-bottom:1px solid var(--nyx-compat-color-8caa693a1d6f);background:var(--nyx-compat-color-592ed2dd0377);color:var(--nyx-compat-color-hex-766e86);font-size:var(--nyx-type-caption);font-weight:var(--nyx-weight-bold);letter-spacing:var(--nyx-compat-tracking-p1em);text-transform:uppercase}
.achievement-list{display:flex;flex-direction:column}.achievement-row{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:var(--nyx-space-12);align-items:center;min-height:78px;padding:var(--nyx-space-12) var(--nyx-compat-spacing-15px);border-bottom:1px solid var(--nyx-compat-color-1ef7f9315602);background:linear-gradient(90deg,transparent,var(--nyx-compat-color-64e1eb7086e1));cursor:pointer}.achievement-row:hover{background:var(--nyx-compat-color-901e59bbe7fa)}.achievement-row.done{background:linear-gradient(90deg,var(--nyx-compat-color-3123953fe303),var(--nyx-compat-color-64e1eb7086e1))}.achievement-row>input{position:absolute;opacity:0;pointer-events:none}.achievement-check{display:grid;width:20px;aspect-ratio:1;place-items:center;border:1px solid var(--nyx-compat-color-13c4fd519b98);border-radius:var(--nyx-radius-small);background:var(--nyx-compat-color-2b17a7190343);color:var(--nyx-compat-color-hex-0c0a16);font-size:var(--nyx-compat-size-13px);font-weight:var(--nyx-weight-black)}.achievement-row.done .achievement-check{border-color:var(--ach-accent);background:var(--ach-accent);box-shadow:var(--nyx-compat-shadow-box-565dfa931161)}.achievement-row-copy{display:grid;min-width:0;gap:var(--nyx-compat-spacing-3px)}.achievement-row-copy>strong{color:var(--nyx-compat-color-hex-e3deed);font:var(--nyx-compat-font-5fe1d8ac54f3)}.achievement-row-copy>span:last-child{overflow:hidden;color:var(--nyx-compat-color-hex-8e879c);font-size:var(--nyx-compat-size-10p5px);line-height:1.4;text-overflow:ellipsis}.achievement-row.done .achievement-row-copy>strong{color:var(--nyx-compat-color-hex-aaa2b8)}.achievement-row-meta{display:flex;gap:var(--nyx-space-6);align-items:center}.achievement-row-meta small{color:var(--nyx-compat-color-hex-6e667c);font-size:var(--nyx-compat-size-8px)}.achievement-row-meta em{padding:var(--nyx-space-2) var(--nyx-compat-spacing-5px);border:1px solid var(--nyx-compat-color-d8934e8d79b2);border-radius:var(--nyx-radius-pill);color:var(--nyx-compat-color-hex-968cab);font-size:var(--nyx-compat-size-7px);font-style:normal;font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p08em);text-transform:uppercase}.achievement-reward{display:grid;min-width:66px;text-align:right}.achievement-reward b{color:var(--nyx-compat-color-hex-e9c986);font-size:var(--nyx-type-body)}.achievement-reward small{color:var(--nyx-compat-color-hex-746d80);font-size:var(--nyx-compat-size-7px);letter-spacing:var(--nyx-compat-tracking-p06em);text-transform:uppercase}.achievement-empty{padding:var(--nyx-compat-spacing-36px) var(--nyx-space-18);color:var(--nyx-compat-color-hex-8d859c);text-align:center}
.achievement-disclaimer{padding:var(--nyx-space-8) var(--nyx-space-4);color:var(--nyx-compat-color-hex-625c6c);font-size:var(--nyx-compat-size-8px);line-height:1.55;text-align:center}
@media (max-width:1100px){.achievement-hero{grid-template-columns:auto 1fr}.achievement-profile-tools{grid-column:1/-1;justify-content:flex-start}.achievement-profile-tools>label{flex:0 1 260px}.achievement-workspace{grid-template-columns:190px minmax(0,1fr)}}
@media (max-width:760px){.achievement-page{gap:var(--nyx-space-12);padding:0 0 var(--nyx-space-24)}.achievement-hero{grid-template-columns:auto 1fr;gap:var(--nyx-space-14);padding:var(--nyx-space-16)}.achievement-orbit{width:78px}.achievement-orbit b{font-size:var(--nyx-compat-size-20px)}.achievement-title h1{font-size:var(--nyx-compat-size-23px)}.achievement-title p{font-size:var(--nyx-compat-size-10p5px)}.achievement-profile-tools{display:grid;grid-template-columns:1fr auto}.achievement-profile-tools>label{min-width:0}.achievement-new-profile{left:0;right:auto}.achievement-command{grid-template-columns:1fr;padding:var(--nyx-space-14)}.achievement-command-actions{justify-content:flex-start}.achievement-import-preview{grid-column:1}.achievement-import-preview button:first-of-type{margin-left:0}.achievement-workspace{grid-template-columns:1fr;height:auto}.achievement-categories{flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:0 0 var(--nyx-compat-spacing-5px);scrollbar-width:thin}.achievement-categories button{flex:0 0 178px}.achievement-ledger{max-height:68vh}.achievement-filters{align-items:stretch;flex-direction:column}.achievement-result-count{top:126px}.achievement-status-filter{display:grid;grid-template-columns:repeat(3,1fr)}.achievement-row{grid-template-columns:22px minmax(0,1fr);gap:var(--nyx-space-10);padding:var(--nyx-compat-spacing-11px)}.achievement-reward{grid-column:2;display:flex;gap:var(--nyx-compat-spacing-5px);align-items:baseline;text-align:left}.achievement-row-copy>strong{font-size:var(--nyx-compat-size-13px)}.achievement-row-copy>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.achievement-disclaimer{padding-inline:var(--nyx-space-12)}}
@media (max-width:420px){.achievement-hero{grid-template-columns:1fr}.achievement-orbit{width:70px}.achievement-title{grid-column:1}.achievement-profile-tools{grid-template-columns:1fr}.achievement-command-actions{display:grid;grid-template-columns:1fr}.achievement-command-actions>*{width:100%}.achievement-import-preview>div{min-width:72px}.achievement-categories button{flex-basis:164px}}
@media (prefers-reduced-motion:reduce){.achievement-page *{scroll-behavior:auto!important}}
.achievement-workspace{overflow:hidden;contain:layout paint}
.achievement-ledger{contain:layout paint}
.achievement-row:focus-within{outline:2px solid var(--ach-accent);outline-offset:-3px}
@media (max-width:760px){.achievement-workspace{overflow:visible;contain:none}}

/* ---------------- Achievement tracker (legacy base styles) ---------------- */
.achievement-page{
  --ach-void:var(--nyx-compat-color-hex-080713);--ach-ledger:var(--nyx-compat-color-hex-121027);--ach-violet:var(--nyx-compat-color-hex-8d78ff);--ach-gold:var(--nyx-compat-color-hex-e7c778);
  --ach-pearl:var(--nyx-color-text);--ach-dusk:var(--nyx-compat-color-hex-a8a0ba);--ach-accent:var(--nyx-compat-color-hex-e3bd70);--ach-accent-rgb:var(--nyx-compat-color-62f74bd2fe1f);
  gap:var(--nyx-space-18);overflow-x:hidden;overflow-y:auto;padding:var(--nyx-space-4) var(--nyx-space-8) var(--nyx-compat-spacing-36px) var(--nyx-space-2);color:var(--ach-pearl);scrollbar-gutter:stable
}
.achievement-hsr{--ach-accent:var(--nyx-compat-color-hex-75d9e7);--ach-accent-rgb:var(--nyx-compat-color-dbfdbbc3e4d0)}
.achievement-page button,.achievement-page .achievement-file-button{transition:border-color .16s ease,background-color .16s ease,color .16s ease,transform .16s ease}
.achievement-page button:active{transform:translateY(1px)}
.achievement-page :is(select,input[type="search"],input[type="text"]){min-height:42px;border-radius:var(--nyx-radius-card);background:var(--nyx-compat-color-7f1103bc05d5)}
.achievement-page :is(select,input,button):disabled{cursor:not-allowed;opacity:.48}
.achievement-observatory{position:relative;isolation:isolate;display:grid;grid-template-columns:170px minmax(300px,1fr) minmax(220px,290px);align-items:center;gap:var(--nyx-space-28);min-height:210px;overflow:hidden;padding:var(--nyx-space-24) var(--nyx-space-28);border:1px solid var(--nyx-compat-color-5bf6d390d8f0);border-radius:var(--nyx-compat-radius-24px);background:radial-gradient(circle at 11% 48%,var(--nyx-compat-color-eb8a84a2f940),transparent 27%),radial-gradient(circle at 72% 0,var(--nyx-compat-color-3693c2f39c75),transparent 36%),linear-gradient(135deg,var(--nyx-compat-color-hex-17122d) 0,var(--ach-void) 70%);box-shadow:var(--nyx-compat-shadow-box-27f3211cf0af)}
.achievement-observatory::before{content:"";position:absolute;z-index:-1;inset:13px;border:1px solid var(--nyx-compat-color-986d4b8ffda6);border-radius:var(--nyx-compat-radius-16px);pointer-events:none}
.achievement-observatory::after{content:"✦     ·        ✧       ·      ✦       ·";position:absolute;z-index:-1;top:20px;right:4%;color:var(--nyx-compat-color-e56afd83c3e1);font-size:var(--nyx-type-small);letter-spacing:var(--nyx-compat-tracking-1p8em);white-space:nowrap;pointer-events:none}
.achievement-astral-seal{position:relative;display:grid;width:148px;aspect-ratio:1;place-items:center;border-radius:50%;background:conic-gradient(var(--ach-accent) 0 var(--ach-pct),var(--nyx-compat-color-c201d2dab2c4) var(--ach-pct) 360deg);box-shadow:var(--nyx-compat-shadow-box-a423a1bb4151)}
.achievement-astral-seal::before{content:"";position:absolute;inset:7px;border-radius:inherit;background:radial-gradient(circle at 50% 34%,var(--nyx-compat-color-eb8a84a2f940),var(--nyx-compat-color-c206dc6a234c) 67%);box-shadow:var(--nyx-compat-shadow-box-81e4af61bbfb)}
.achievement-astral-ring{position:absolute;z-index:1;inset:-8px;border:1px solid var(--nyx-compat-color-a0d022bb7dfc);border-radius:50%;clip-path:polygon(0 0,68% 0,68% 8%,100% 8%,100% 100%,23% 100%,23% 92%,0 92%)}
.achievement-astral-ring::before,.achievement-astral-ring::after{content:"";position:absolute;width:5px;aspect-ratio:1;border-radius:50%;background:var(--ach-gold);box-shadow:var(--nyx-compat-shadow-box-292504bbca69)}
.achievement-astral-ring::before{top:6px;right:26%}.achievement-astral-ring::after{bottom:5px;left:20%}
.achievement-astral-art{position:absolute;z-index:2;top:27px;width:76px!important;height:76px!important;border:0!important;background:transparent!important;opacity:.82}
.achievement-astral-art img{filter:var(--nyx-compat-shadow-drop-ac0dbbaf45d9)}
.achievement-astral-value{position:relative;z-index:3;display:grid;margin-top:var(--nyx-compat-spacing-76px);text-align:center}.achievement-astral-value b{color:var(--nyx-color-text-max);font:var(--nyx-compat-font-ddec57a109fa)}.achievement-astral-value small{margin-top:var(--nyx-space-4);color:var(--ach-dusk);font-size:var(--nyx-type-caption);letter-spacing:var(--nyx-compat-tracking-p08em)}
.achievement-category-art{display:grid;overflow:hidden;place-items:center;border-radius:50%;background:radial-gradient(circle,var(--nyx-compat-color-584febac5703),var(--nyx-compat-color-a90e01b053c3));color:var(--ach-pearl)}
.achievement-category-art img{display:block;width:100%;height:100%;object-fit:contain}.achievement-category-art b{font-size:var(--nyx-type-caption);letter-spacing:var(--nyx-compat-tracking-neg-p03em)}
.achievement-observatory-copy>span,.achievement-ledger-heading>div>span,.achievement-manage-intro>span,.achievement-manage>header span{color:var(--ach-accent);font-size:var(--nyx-type-caption);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p16em);text-transform:uppercase}
.achievement-observatory-copy h1{margin:var(--nyx-space-6) 0 var(--nyx-space-10);color:var(--nyx-color-text-max);font:var(--nyx-compat-font-b95bcc3dd809)}.achievement-observatory-copy>p{max-width:650px;margin:0;color:var(--ach-dusk);font-size:var(--nyx-type-small);line-height:1.6}
.achievement-observatory-facts{display:flex;flex-wrap:wrap;gap:var(--nyx-space-8) var(--nyx-space-18);margin-top:var(--nyx-compat-spacing-19px)}.achievement-observatory-facts span{color:var(--nyx-compat-color-hex-8f879e);font-size:var(--nyx-compat-size-9p5px)}.achievement-observatory-facts b{color:var(--ach-gold);font-size:var(--nyx-type-small)}
.achievement-profile-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;justify-content:stretch}.achievement-profile-tools>label{display:grid;gap:var(--nyx-space-6)}.achievement-profile-tools label>span{color:var(--nyx-compat-color-hex-8f879e)}.achievement-manage-button{min-width:84px}
.achievement-notice{display:flex;align-items:center;justify-content:center;gap:var(--nyx-space-8)}.achievement-notice span{color:var(--nyx-compat-color-hex-aaa2b9);font-size:var(--nyx-compat-size-10p5px)}.achievement-notice.error strong{color:var(--nyx-compat-color-hex-ff9daf)}.achievement-unknown-note{border-color:var(--nyx-compat-color-80c9236ce4c7);background:var(--nyx-compat-color-6c1178c55369)}.achievement-unknown-note strong{color:var(--ach-gold)}
.achievement-loading{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nyx-space-10);padding:var(--nyx-space-24);border:1px solid var(--nyx-compat-color-0d923d38199d);border-radius:var(--nyx-compat-radius-16px);background:var(--ach-void)}.achievement-loading span{height:74px;border-radius:var(--nyx-radius-card);background:linear-gradient(90deg,var(--nyx-compat-color-f8d551cb0e88),var(--nyx-compat-color-226f46ff22b2),var(--nyx-compat-color-f8d551cb0e88));background-size:220% 100%;animation:achievement-shimmer 1.6s linear infinite}.achievement-loading p{grid-column:1/-1;margin:var(--nyx-space-4) 0 0;color:var(--ach-dusk);font-size:var(--nyx-compat-size-11px);text-align:center}@keyframes achievement-shimmer{to{background-position:-220% 0}}
.achievement-atlas-toggle{display:none}
.achievement-archive{display:grid;grid-template-columns:minmax(230px,275px) minmax(0,1fr);flex:none;gap:var(--nyx-compat-spacing-17px);align-items:start;min-height:0}
.achievement-atlas{position:sticky;top:12px;display:flex;flex-direction:column;max-height:calc(100vh - 40px);overflow:hidden;border:1px solid var(--nyx-compat-color-d8a01d2328f4);border-radius:var(--nyx-compat-radius-18px);background:linear-gradient(180deg,var(--nyx-compat-color-f36eaba8453b),var(--nyx-compat-color-c0d90b6215c1));box-shadow:var(--nyx-compat-shadow-box-54e7bc604c52)}
.achievement-atlas>header{display:grid;gap:var(--nyx-compat-spacing-3px);padding:var(--nyx-space-16) var(--nyx-space-16) var(--nyx-space-12);border-bottom:1px solid var(--nyx-compat-color-1ef7f9315602)}.achievement-atlas>header span{color:var(--ach-accent);font-size:var(--nyx-type-caption);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p15em);text-transform:uppercase}.achievement-atlas>header b{color:var(--nyx-compat-color-hex-dcd6e8);font:var(--nyx-compat-font-6b66b36cb706)}
.achievement-atlas-search{display:grid;gap:var(--nyx-compat-spacing-5px);padding:var(--nyx-space-12) var(--nyx-space-12) var(--nyx-space-8)}.achievement-atlas-search>span,.achievement-filter-bar label>span,.achievement-profile-form label>span,.achievement-create-profile label>span{color:var(--nyx-compat-color-hex-8c849a);font-size:var(--nyx-compat-size-8px);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p12em);text-transform:uppercase}.achievement-atlas-search input{width:100%;min-height:38px!important}
.achievement-atlas-check{display:flex;align-items:center;gap:var(--nyx-space-8);padding:var(--nyx-compat-spacing-3px) var(--nyx-compat-spacing-13px) var(--nyx-space-10);color:var(--nyx-compat-color-hex-91899d);font-size:var(--nyx-type-caption)}.achievement-atlas-check input{accent-color:var(--ach-violet)}
.achievement-atlas nav{display:flex;flex-direction:column;gap:var(--nyx-compat-spacing-5px);min-height:0;overflow-y:auto;padding:var(--nyx-space-4) var(--nyx-space-8) var(--nyx-space-12);scrollbar-width:thin;scrollbar-color:var(--nyx-compat-color-5bf6d390d8f0) transparent}.achievement-atlas nav>button{display:grid;grid-template-columns:48px minmax(0,1fr);align-items:center;gap:var(--nyx-space-10);min-height:61px;padding:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-9px);border-color:transparent;background:transparent;text-align:left}.achievement-atlas nav>button:hover{background:var(--nyx-compat-color-c6211d55d129)}.achievement-atlas nav>button.on{border-color:var(--nyx-compat-color-13c4fd519b98);background:linear-gradient(90deg,var(--nyx-compat-color-eb8a84a2f940),var(--nyx-compat-color-3c4839cf1be7));box-shadow:var(--nyx-compat-shadow-box-c978411d6e5f)}
.achievement-category-orbit{display:grid;width:44px;aspect-ratio:1;place-items:center;border-radius:50%;background:conic-gradient(var(--ach-accent) 0 var(--cat-pct),var(--nyx-compat-color-0d923d38199d) var(--cat-pct) 360deg)}.achievement-category-icon{width:38px;height:38px;border:3px solid var(--ach-ledger)}
.achievement-atlas nav button>span:last-child{display:grid;gap:var(--nyx-compat-spacing-5px);min-width:0}.achievement-atlas nav strong{overflow:hidden;color:var(--nyx-compat-color-hex-d3cddd);font-size:var(--nyx-compat-size-11p5px);line-height:1.3;text-overflow:ellipsis}.achievement-atlas nav small{display:flex;justify-content:space-between;color:var(--nyx-compat-color-hex-91899d);font-size:var(--nyx-type-label)}.achievement-atlas nav small i{color:var(--nyx-compat-color-hex-aaa1b8);font-style:normal}.achievement-atlas nav>p{margin:var(--nyx-space-12);color:var(--nyx-compat-color-hex-8e869a);font-size:var(--nyx-type-label);text-align:center}
.achievement-ledger{overflow:visible;border-color:var(--nyx-compat-color-d8a01d2328f4);border-radius:var(--nyx-compat-radius-18px);background:var(--nyx-compat-color-a321f195d7ac);contain:none}
.achievement-ledger-heading{display:grid;grid-template-columns:72px minmax(0,1fr) auto;align-items:center;gap:var(--nyx-space-16);padding:var(--nyx-compat-spacing-19px) var(--nyx-space-20);border-bottom:1px solid var(--nyx-compat-color-bfcafe02ee03);background:radial-gradient(circle at 4% 50%,var(--nyx-compat-color-c00f3dba3ae7),transparent 27%),linear-gradient(120deg,var(--nyx-compat-color-e491388f571b),var(--nyx-compat-color-8d07278c2122));border-radius:var(--nyx-compat-radius-18px) var(--nyx-compat-radius-18px) 0 0}.achievement-ledger-icon{width:66px;height:66px;border:1px solid var(--nyx-compat-color-584febac5703)}.achievement-ledger-heading h2{margin:var(--nyx-space-4) 0 var(--nyx-compat-spacing-5px);color:var(--nyx-color-text-max);font:var(--nyx-compat-font-27a1b4f955e5)}.achievement-ledger-heading p{margin:0;color:var(--nyx-compat-color-hex-8f879c);font-size:var(--nyx-compat-size-9p5px);line-height:1.45}
.achievement-category-actions{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:var(--nyx-compat-spacing-7px)}.achievement-category-actions button{white-space:nowrap}.achievement-inline-confirm{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:var(--nyx-space-6);max-width:260px}.achievement-inline-confirm span{flex:1 0 100%;color:var(--nyx-compat-color-hex-e5c47e);font-size:var(--nyx-compat-size-9p5px);text-align:right}
.achievement-filter-bar{display:grid;grid-template-columns:minmax(220px,1.5fr) auto repeat(3,minmax(116px,.55fr));align-items:end;gap:var(--nyx-compat-spacing-9px);padding:var(--nyx-space-14) var(--nyx-compat-spacing-15px);border-bottom:1px solid var(--nyx-compat-color-5704ef9ed39c);background:var(--nyx-compat-color-9cc2e7c4dddf)}.achievement-hsr .achievement-filter-bar{grid-template-columns:minmax(220px,1.4fr) auto repeat(4,minmax(105px,.5fr))}.achievement-filter-bar label{display:grid;gap:var(--nyx-compat-spacing-5px);min-width:0}.achievement-filter-bar :is(input,select){width:100%;min-width:0}.achievement-status-filter{display:grid;grid-template-columns:repeat(3,auto);gap:var(--nyx-space-4)}.achievement-status-filter button{min-height:42px;padding-inline:var(--nyx-space-10)}
.achievement-result-strip{display:flex;align-items:center;justify-content:space-between;min-height:38px;padding:var(--nyx-space-6) var(--nyx-space-16);border-bottom:1px solid var(--nyx-compat-color-8caa693a1d6f);background:var(--nyx-compat-color-c0d90b6215c1);color:var(--nyx-compat-color-hex-797183);font-size:var(--nyx-compat-size-8p5px);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p09em);text-transform:uppercase}.achievement-result-strip button{min-height:28px;padding:var(--nyx-compat-spacing-5px) var(--nyx-space-8);border:0;background:transparent;color:var(--ach-accent)}
.achievement-list{display:flex;flex-direction:column}
.achievement-row{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:var(--nyx-space-12);align-items:center;min-height:84px;padding:var(--nyx-space-12) var(--nyx-compat-spacing-15px);border-bottom:1px solid var(--nyx-compat-color-1ef7f9315602);background:linear-gradient(90deg,transparent,var(--nyx-compat-color-5d7282444a10));cursor:default}.achievement-row:hover{background:var(--nyx-compat-color-3071ba9a7dff)}.achievement-row.done{background:linear-gradient(90deg,var(--nyx-compat-color-c6211d55d129),var(--nyx-compat-color-4c7d99947564))}.achievement-row.expanded{background:var(--nyx-compat-color-bcd550fac433)}
.achievement-row .achievement-check{display:grid;width:34px;min-height:34px;aspect-ratio:1;place-items:center;padding:0;border:1px solid var(--nyx-compat-color-f42edb24539a);border-radius:var(--nyx-compat-radius-9px);background:var(--nyx-compat-color-2b17a7190343);color:var(--nyx-compat-color-hex-0c0a16)}.achievement-row .achievement-check span{display:grid;width:100%;height:100%;place-items:center}.achievement-row .achievement-check[aria-pressed="true"]{border-color:var(--ach-accent);background:var(--ach-accent);box-shadow:var(--nyx-compat-shadow-box-7b552336bbe3);color:var(--nyx-compat-color-hex-0b0915)}
.achievement-row-main{display:grid!important;min-width:0;min-height:0!important;padding:var(--nyx-space-2)!important;border:0!important;background:transparent!important;text-align:left;letter-spacing:var(--nyx-compat-tracking-0)!important}.achievement-row-main>strong{color:var(--nyx-compat-color-hex-e6e1ee);font:var(--nyx-compat-font-5fe1d8ac54f3)}.achievement-row-main>span:last-child{overflow:hidden;color:var(--nyx-compat-color-hex-90899d);font-size:var(--nyx-compat-size-10p5px);line-height:1.45;text-overflow:ellipsis}.achievement-row.done .achievement-row-main>strong{color:var(--nyx-compat-color-hex-ada6b8)}.achievement-row-meta{display:flex;flex-wrap:wrap;gap:var(--nyx-compat-spacing-5px);align-items:center;margin-bottom:var(--nyx-compat-spacing-3px)}.achievement-row-meta small{color:var(--nyx-compat-color-hex-6f687a);font:var(--nyx-compat-font-4dfe69a0fd95)}.achievement-row-meta em{max-width:220px;overflow:hidden;padding:var(--nyx-space-2) var(--nyx-compat-spacing-5px);border:1px solid var(--nyx-compat-color-a42fead3b275);border-radius:var(--nyx-radius-pill);color:var(--nyx-compat-color-hex-978fa5);font-size:var(--nyx-compat-size-7px);font-style:normal;font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p06em);text-overflow:ellipsis;text-transform:uppercase;white-space:nowrap}
.achievement-reward{display:grid;grid-template-columns:auto auto;align-items:center;justify-items:end;min-width:72px;text-align:right}.achievement-reward img{grid-row:1/3;width:25px;height:25px;margin-right:var(--nyx-space-6);object-fit:contain}.achievement-reward b{color:var(--ach-gold);font-size:var(--nyx-type-body)}.achievement-reward small{grid-column:2;color:var(--nyx-compat-color-hex-777080);font-size:var(--nyx-compat-size-7px);letter-spacing:var(--nyx-compat-tracking-p05em);text-transform:uppercase}
.achievement-row-detail{grid-column:2/-1;display:grid;grid-template-columns:minmax(220px,1fr) minmax(260px,.75fr);gap:var(--nyx-space-18);margin:var(--nyx-space-2) 0 var(--nyx-space-4);padding:var(--nyx-space-14) var(--nyx-space-16);border:1px solid var(--nyx-compat-color-eb8a84a2f940);border-radius:var(--nyx-compat-radius-11px);background:var(--nyx-compat-color-5fc5e6e19a67)}.achievement-row-detail>div>span{color:var(--ach-accent);font-size:var(--nyx-compat-size-8px);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p12em);text-transform:uppercase}.achievement-row-detail p{margin:var(--nyx-space-6) 0 0;color:var(--nyx-compat-color-hex-b5aebe);font-size:var(--nyx-compat-size-11px);line-height:1.55}.achievement-row-detail dl{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--nyx-compat-spacing-9px);margin:0}.achievement-row-detail dl>div{min-width:0}.achievement-row-detail dt{color:var(--nyx-compat-color-hex-716a7d);font-size:var(--nyx-compat-size-7px);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p08em);text-transform:uppercase}.achievement-row-detail dd{overflow-wrap:anywhere;margin:var(--nyx-space-4) 0 0;color:var(--nyx-compat-color-hex-c7c0d0);font-size:var(--nyx-compat-size-9p5px)}
.achievement-empty,.achievement-zero-guide{display:grid;justify-items:center;gap:var(--nyx-compat-spacing-7px);padding:var(--nyx-compat-spacing-42px) var(--nyx-space-20);color:var(--nyx-compat-color-hex-8e869a);text-align:center}.achievement-empty-seal{width:56px;height:56px;margin-bottom:var(--nyx-space-4)}.achievement-empty strong,.achievement-zero-guide strong{color:var(--nyx-compat-color-hex-ddd6e8);font:var(--nyx-compat-font-cd3d319cfe7f)}.achievement-empty span,.achievement-zero-guide span{font-size:var(--nyx-type-label)}.achievement-empty button,.achievement-zero-guide button{margin-top:var(--nyx-compat-spacing-5px)}.achievement-zero-guide{border-top:1px solid var(--nyx-compat-color-8caa693a1d6f);background:var(--nyx-compat-color-a39b8af67668)}
.achievement-load-more{display:grid!important;justify-items:center;gap:var(--nyx-space-4);min-height:56px!important;margin:var(--nyx-space-10) var(--nyx-compat-spacing-15px)!important;border-style:dashed!important;background:var(--nyx-compat-color-885f85cc3a5a)!important}.achievement-load-more span{color:var(--nyx-compat-color-hex-777080);font-size:var(--nyx-compat-size-8px);font-weight:var(--nyx-compat-weight-500)}
.achievement-disclaimer{padding:var(--nyx-space-12);color:var(--nyx-compat-color-hex-6d6675);font-size:var(--nyx-compat-size-8px);line-height:1.65}
.achievement-manage-layer{position:fixed;z-index:90;inset:0;display:flex;justify-content:flex-end}.achievement-manage-scrim{position:absolute!important;inset:0;min-height:100%!important;border:0!important;border-radius:0!important;background:var(--nyx-compat-color-44837c62bfcc)!important;backdrop-filter:blur(5px)}
.achievement-manage{position:relative;z-index:1;width:min(520px,100vw);height:100%;overflow-y:auto;border-left:1px solid var(--nyx-compat-color-a0d022bb7dfc);background:radial-gradient(circle at 80% 0,var(--nyx-compat-color-c00f3dba3ae7),transparent 30%),var(--nyx-compat-color-hex-0b0918);box-shadow:var(--nyx-compat-shadow-box-16f45bc51428);animation:achievement-sheet-in .2s ease-out}
@keyframes achievement-sheet-in{from{transform:translateX(28px);opacity:.55}}
.achievement-manage>header{position:sticky;z-index:2;top:0;display:flex;align-items:center;justify-content:space-between;padding:var(--nyx-space-20) var(--nyx-compat-spacing-22px);border-bottom:1px solid var(--nyx-compat-color-0d923d38199d);background:var(--nyx-compat-color-4cfe955755e4);backdrop-filter:blur(12px)}.achievement-manage>header h2{margin:var(--nyx-space-4) 0 0;color:var(--nyx-color-text-max);font:var(--nyx-compat-font-2a6c6516c849)}.achievement-manage-close{display:grid;width:40px;min-height:40px!important;place-items:center;padding:0!important;border-radius:50%!important;font-size:var(--nyx-type-section)!important}
.achievement-manage>nav{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--nyx-space-6);padding:var(--nyx-space-12) var(--nyx-space-18);border-bottom:1px solid var(--nyx-compat-color-1ef7f9315602)}.achievement-manage>nav button{border-color:transparent;background:transparent;color:var(--nyx-compat-color-hex-91899f)}.achievement-manage>nav button.on{border-color:var(--nyx-compat-color-12376054c278);background:var(--nyx-compat-color-c00f3dba3ae7);color:var(--nyx-compat-color-hex-f2edff)}
.achievement-manage-section{display:grid;gap:var(--nyx-space-16);padding:var(--nyx-compat-spacing-22px)}.achievement-manage-intro{display:grid;gap:var(--nyx-compat-spacing-5px)}.achievement-manage-intro h3{margin:0;color:var(--nyx-compat-color-hex-eee9f6);font:var(--nyx-compat-font-d3044a79dc0a)}.achievement-manage-intro p{margin:var(--nyx-space-2) 0 0;color:var(--nyx-compat-color-hex-9991a6);font-size:var(--nyx-compat-size-11px);line-height:1.6}
.achievement-file-button{position:relative}.achievement-manage-section>.achievement-file-button{justify-self:start;min-height:44px}.achievement-file-button input{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.achievement-methods{display:grid;gap:var(--nyx-space-10)}.achievement-method{display:grid;gap:var(--nyx-space-8);padding:var(--nyx-space-14);border:1px solid var(--nyx-compat-color-0d923d38199d);border-radius:var(--nyx-compat-radius-12px);background:var(--nyx-compat-color-99cc84676c14)}.achievement-method>div{display:flex;align-items:center;justify-content:space-between;gap:var(--nyx-space-12)}.achievement-method strong{color:var(--nyx-compat-color-hex-eee9f6);font-size:var(--nyx-compat-size-12px)}.achievement-method em{padding:var(--nyx-space-4) var(--nyx-space-8);border:1px solid currentColor;border-radius:999px;color:var(--nyx-compat-color-hex-a89bc0);font-size:var(--nyx-type-caption);font-style:normal;letter-spacing:var(--nyx-compat-tracking-p06em);text-transform:uppercase}.achievement-method p{margin:0;color:var(--nyx-compat-color-hex-9991a6);font-size:var(--nyx-compat-size-10p5px);line-height:1.5}.achievement-method.status-available{border-color:var(--nyx-compat-color-e88900b28d3d)}.achievement-method.status-available em{color:var(--nyx-compat-color-hex-bdebd7)}.achievement-method .achievement-file-button{justify-self:start;margin-top:var(--nyx-space-4)}.achievement-binding-note{grid-column:1/-1!important;margin:0!important;padding:var(--nyx-space-8);border-left:2px solid var(--ach-accent);color:var(--nyx-compat-color-hex-bdebd7)!important}
.achievement-method .achievement-method-actions{display:flex;flex-wrap:wrap;justify-content:flex-start;gap:var(--nyx-space-6);margin-top:var(--nyx-space-2)}.achievement-method-actions :is(a,button){display:inline-grid;min-height:36px;box-sizing:border-box;place-items:center;padding:var(--nyx-space-6) var(--nyx-space-10);border:1px solid var(--nyx-compat-color-5c973303966c);border-radius:var(--nyx-compat-radius-9px);background:var(--nyx-compat-color-3972e28257b7);color:var(--nyx-compat-color-hex-eeeaff);font:var(--nyx-compat-font-e37578d7a6e4);letter-spacing:var(--nyx-compat-tracking-p04em);text-decoration:none;cursor:pointer}.achievement-method-actions :is(a,button):hover{border-color:var(--nyx-compat-color-50d15e5722b0);background:var(--nyx-compat-color-584febac5703)}.achievement-method-actions a:focus-visible{outline:2px solid var(--ach-accent);outline-offset:2px}.achievement-method-notice{padding-top:var(--nyx-space-4);border-top:1px solid var(--nyx-compat-color-1ef7f9315602);color:var(--nyx-compat-color-hex-a89bc0);font-size:var(--nyx-compat-size-10p5px)}.achievement-method-notice summary{cursor:pointer;font-weight:var(--nyx-weight-bold)}.achievement-method-notice p{margin-top:var(--nyx-space-8)}.achievement-method-notice code{display:block;margin-top:var(--nyx-space-8);padding:var(--nyx-space-8);border-radius:var(--nyx-radius-control);background:var(--nyx-compat-color-7ef3d5af1100);color:var(--nyx-compat-color-hex-d7d0e0);font-size:var(--nyx-type-caption);overflow-wrap:anywhere;user-select:all}
.achievement-file-button[aria-disabled="true"]{cursor:not-allowed;opacity:.48}
.achievement-import-mode{display:grid;gap:var(--nyx-space-8);margin:0;padding:var(--nyx-space-12);border:1px solid var(--nyx-compat-color-0d923d38199d);border-radius:var(--nyx-compat-radius-12px)}.achievement-import-mode legend{padding:0 var(--nyx-compat-spacing-5px);color:var(--nyx-compat-color-hex-8e869d);font-size:var(--nyx-type-caption);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p09em);text-transform:uppercase}.achievement-import-mode label{display:flex;align-items:flex-start;gap:var(--nyx-compat-spacing-9px);padding:var(--nyx-compat-spacing-9px);border-radius:var(--nyx-radius-control);background:var(--nyx-compat-color-99cc84676c14)}.achievement-import-mode input{margin-top:var(--nyx-compat-spacing-3px);accent-color:var(--ach-violet)}.achievement-import-mode span{display:grid;gap:var(--nyx-compat-spacing-3px)}.achievement-import-mode b{color:var(--nyx-compat-color-hex-d7d0e2);font-size:var(--nyx-compat-size-11px)}.achievement-import-mode small{color:var(--nyx-compat-color-hex-898195);font-size:var(--nyx-type-caption);line-height:1.45}
.achievement-manage .achievement-import-preview{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--nyx-space-8);padding:var(--nyx-space-14);border:1px solid var(--nyx-compat-color-6d2c3e54b1b0);border-radius:var(--nyx-compat-radius-12px);background:var(--nyx-compat-color-885f85cc3a5a)}.achievement-manage .achievement-import-preview>div{min-width:0}.achievement-manage .achievement-import-preview .danger b{color:var(--nyx-compat-color-hex-ff9daf)}.achievement-manage .achievement-import-preview>p,.achievement-replace-confirm,.achievement-import-actions{grid-column:1/-1}.achievement-manage .achievement-import-preview>p{margin:var(--nyx-space-6) 0 0;color:var(--nyx-compat-color-hex-9991a5);font-size:var(--nyx-compat-size-9p5px);line-height:1.5}.achievement-manage .achievement-import-preview>p strong{color:var(--nyx-compat-color-hex-d7d0e0)}.achievement-replace-confirm{display:flex;align-items:flex-start;gap:var(--nyx-space-8);padding:var(--nyx-compat-spacing-9px);border:1px solid var(--nyx-compat-color-b277798fe000);border-radius:var(--nyx-radius-control);color:var(--nyx-compat-color-hex-d7a8b2);font-size:var(--nyx-compat-size-9p5px);line-height:1.4}.achievement-replace-confirm input{accent-color:var(--nyx-compat-color-hex-ff748f)}.achievement-import-actions{display:flex;gap:var(--nyx-compat-spacing-7px);margin-top:var(--nyx-compat-spacing-3px)}
.achievement-unknown-list{padding:var(--nyx-compat-spacing-11px);border:1px solid var(--nyx-compat-color-9a80dfcf1b1b);border-radius:var(--nyx-radius-card);color:var(--nyx-compat-color-hex-b99d69);font-size:var(--nyx-type-label)}.achievement-unknown-list summary{cursor:pointer}.achievement-unknown-list p{overflow-wrap:anywhere;color:var(--nyx-compat-color-hex-8f7e62);line-height:1.55}
.achievement-profile-form,.achievement-create-profile{display:grid;grid-template-columns:1fr 1fr;gap:var(--nyx-space-10);padding:var(--nyx-space-14);border:1px solid var(--nyx-compat-color-0d923d38199d);border-radius:var(--nyx-compat-radius-12px);background:var(--nyx-compat-color-bb50cd6943d7)}.achievement-profile-form label,.achievement-create-profile label{display:grid;gap:var(--nyx-compat-spacing-5px)}.achievement-profile-form button{grid-column:1/-1;justify-self:start}.achievement-create-profile{grid-template-columns:1fr auto;align-items:end}.achievement-create-profile button{min-height:42px}
.achievement-danger-zone{display:grid;gap:var(--nyx-compat-spacing-9px);margin-top:var(--nyx-space-12);padding:var(--nyx-space-14);border:1px solid var(--nyx-compat-color-b277798fe000);border-radius:var(--nyx-compat-radius-12px);background:var(--nyx-compat-color-d7944b9aa2ef)}.achievement-danger-zone>span{color:var(--nyx-compat-color-hex-ff8da2);font-size:var(--nyx-compat-size-8px);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p14em);text-transform:uppercase}.achievement-danger-zone>button{justify-self:start;border-color:var(--nyx-compat-color-f3e338033de7);background:var(--nyx-compat-color-b6257e3c940d);color:var(--nyx-compat-color-hex-f4a1b1)}.achievement-danger-zone>small{color:var(--nyx-compat-color-hex-796e7b);font-size:var(--nyx-compat-size-8p5px)}.achievement-danger-confirm{display:flex;flex-wrap:wrap;gap:var(--nyx-compat-spacing-7px)}.achievement-danger-confirm p{flex:1 0 100%;margin:0;color:var(--nyx-compat-color-hex-dba4ae);font-size:var(--nyx-type-label);line-height:1.45}.achievement-danger-confirm button:first-of-type{border-color:var(--nyx-compat-color-1eb428457455);background:var(--nyx-compat-color-4fbd53d1db3d);color:var(--nyx-compat-color-hex-ffc0cc)}
.achievement-backup-actions{display:flex;flex-wrap:wrap;gap:var(--nyx-space-8)}.achievement-backup-actions>*{min-height:44px}.achievement-backup-note{margin:0;padding:var(--nyx-compat-spacing-11px);border-left:2px solid var(--nyx-compat-color-a0d022bb7dfc);color:var(--nyx-compat-color-hex-898193);font-size:var(--nyx-compat-size-9p5px);line-height:1.55}.achievement-manage>.achievement-import-message{margin:0 var(--nyx-compat-spacing-22px) var(--nyx-compat-spacing-22px);padding:var(--nyx-compat-spacing-11px);border:1px solid var(--nyx-compat-color-e88900b28d3d);border-radius:var(--nyx-compat-radius-9px);background:var(--nyx-compat-color-69a5ba4bf7ae)}
@media (max-width:1280px){.achievement-filter-bar,.achievement-hsr .achievement-filter-bar{grid-template-columns:minmax(220px,1fr) auto repeat(2,minmax(120px,.5fr))}.achievement-filter-bar label:last-child{grid-column:auto}.achievement-observatory{grid-template-columns:150px minmax(260px,1fr) minmax(210px,260px)}.achievement-astral-seal{width:132px}}
@media (max-width:980px){.achievement-observatory{grid-template-columns:130px minmax(0,1fr)}.achievement-profile-tools{grid-column:1/-1;max-width:430px}.achievement-archive{grid-template-columns:220px minmax(0,1fr)}.achievement-filter-bar,.achievement-hsr .achievement-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr))}.achievement-search,.achievement-status-filter{grid-column:1/-1}.achievement-ledger-heading{grid-template-columns:64px minmax(0,1fr)}.achievement-category-actions{grid-column:1/-1;justify-content:flex-start}.achievement-inline-confirm{justify-content:flex-start}.achievement-inline-confirm span{text-align:left}}
@media (max-width:760px){
  .achievement-page{gap:var(--nyx-space-12);padding:0 0 var(--nyx-space-28)}.achievement-observatory{grid-template-columns:104px minmax(0,1fr);gap:var(--nyx-compat-spacing-15px);min-height:0;padding:var(--nyx-space-18) var(--nyx-space-16);border-radius:var(--nyx-compat-radius-18px)}.achievement-astral-seal{width:96px}.achievement-astral-art{top:18px;width:51px!important;height:51px!important}.achievement-astral-value{margin-top:var(--nyx-compat-spacing-51px)}.achievement-astral-value b{font-size:var(--nyx-compat-size-17px)}.achievement-observatory-copy h1{font-size:var(--nyx-compat-size-25px)}.achievement-observatory-copy>p{font-size:var(--nyx-compat-size-10p5px)}.achievement-observatory-facts{grid-column:1/-1;gap:var(--nyx-compat-spacing-7px) var(--nyx-compat-spacing-13px);margin-top:var(--nyx-space-12)}.achievement-observatory-facts span{font-size:var(--nyx-compat-size-8p5px)}.achievement-profile-tools{grid-column:1/-1;max-width:none}.achievement-notice{align-items:flex-start;flex-direction:column;padding:var(--nyx-compat-spacing-13px);text-align:left}
  .achievement-atlas-toggle{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:var(--nyx-space-10);width:100%;min-height:60px;text-align:left}.achievement-atlas-toggle-art{width:38px;height:38px}.achievement-atlas-toggle>span{display:grid;gap:var(--nyx-compat-spacing-3px)}.achievement-atlas-toggle small{color:var(--nyx-compat-color-hex-81798d);font-size:var(--nyx-compat-size-7p5px);text-transform:uppercase}.achievement-atlas-toggle b{overflow:hidden;color:var(--nyx-compat-color-hex-e0d9e9);font-size:var(--nyx-type-label);text-overflow:ellipsis}.achievement-atlas-toggle>i{color:var(--ach-accent);font-size:var(--nyx-compat-size-8px);font-style:normal;text-transform:uppercase}
  .achievement-archive{grid-template-columns:1fr;gap:var(--nyx-space-10)}.achievement-atlas{position:static;display:none;max-height:min(70vh,620px)}.achievement-atlas.open{display:flex}.achievement-atlas nav>button{min-height:62px}.achievement-ledger{max-height:none;overflow:visible}.achievement-ledger-heading{grid-template-columns:54px minmax(0,1fr);gap:var(--nyx-space-12);padding:var(--nyx-compat-spacing-15px)}.achievement-ledger-icon{width:50px;height:50px}.achievement-ledger-heading h2{font-size:var(--nyx-compat-size-21px)}.achievement-category-actions{display:grid;grid-template-columns:1fr 1fr}.achievement-category-actions button{min-height:44px}.achievement-inline-confirm{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;max-width:none}.achievement-inline-confirm span{grid-column:1/-1}
  .achievement-filter-bar,.achievement-hsr .achievement-filter-bar{grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--nyx-space-12)}.achievement-search,.achievement-status-filter{grid-column:1/-1}.achievement-status-filter button{min-height:44px}.achievement-filter-bar :is(input,select){min-height:44px}.achievement-result-strip{padding-inline:var(--nyx-space-12)}
  .achievement-row{grid-template-columns:44px minmax(0,1fr) auto;gap:var(--nyx-space-8);padding:var(--nyx-compat-spacing-11px) var(--nyx-space-10)}.achievement-row .achievement-check{width:44px;min-height:44px}.achievement-row-main>strong{font-size:var(--nyx-compat-size-13px)}.achievement-row-main>span:last-child{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}.achievement-row-meta em{max-width:130px}.achievement-reward{min-width:48px}.achievement-reward small{display:none}.achievement-row-detail{grid-column:1/-1;grid-template-columns:1fr;gap:var(--nyx-space-12)}.achievement-row-detail dl{grid-template-columns:repeat(2,minmax(0,1fr))}
  .achievement-profile-tools select,.achievement-manage :is(button,input,select){min-height:44px}.achievement-manage{width:100vw}.achievement-manage>header{padding:var(--nyx-compat-spacing-17px)}.achievement-manage-section{padding:var(--nyx-space-18)}.achievement-manage>nav{padding-inline:var(--nyx-space-12)}.achievement-manage-close{width:44px!important}.achievement-profile-form{grid-template-columns:1fr}.achievement-profile-form button{grid-column:1}.achievement-create-profile{grid-template-columns:1fr}.achievement-manage .achievement-import-preview{grid-template-columns:repeat(2,1fr)}.achievement-backup-actions{display:grid}.achievement-backup-actions>*{width:100%}
}
@media (max-width:420px){.achievement-observatory{grid-template-columns:1fr}.achievement-astral-seal{width:88px}.achievement-observatory-copy{grid-column:1}.achievement-profile-tools{grid-template-columns:1fr}.achievement-manage-button{min-height:44px}.achievement-filter-bar,.achievement-hsr .achievement-filter-bar{grid-template-columns:1fr}.achievement-search,.achievement-status-filter{grid-column:1}.achievement-row{grid-template-columns:42px minmax(0,1fr)}.achievement-reward{grid-column:2;display:flex;justify-items:start;justify-self:start;gap:var(--nyx-space-4)}.achievement-row-detail{grid-column:1/-1}.achievement-category-actions{grid-template-columns:1fr}.achievement-inline-confirm{grid-template-columns:1fr}.achievement-inline-confirm>*{grid-column:1}.achievement-manage>nav button{padding-inline:var(--nyx-space-6);font-size:var(--nyx-type-label)}}
@media (prefers-reduced-motion:reduce){.achievement-page *{animation:none!important;transition:none!important}.achievement-manage{animation:none}}

/* ---------------- Achievement tracker: Nyx in-game layout ---------------- */
.achievement-page{
  --ach-display:'GI',Georgia,serif;
  --ach-accent:var(--nyx-compat-color-hex-a995ff);
  --ach-accent-rgb:var(--nyx-compat-color-86342bb4ce49);
  --ach-game-accent:var(--nyx-compat-color-hex-e1c575);
  --ach-panel:var(--nyx-compat-color-hex-100d1b);
  --ach-panel-2:var(--nyx-compat-color-hex-171226);
  --ach-panel-3:var(--nyx-compat-color-hex-201a32);
  --ach-line:var(--nyx-compat-color-e0dd229670da);
  --ach-text:var(--nyx-compat-color-hex-f3efff);
  --ach-muted:var(--nyx-compat-color-hex-a49bad);
  flex:1;
  gap:var(--nyx-space-10);
  min-height:0;
  overflow:hidden;
  padding:0 var(--nyx-space-8) var(--nyx-space-14) 0;
  color:var(--ach-text);
}
.achievement-hsr{--ach-display:'HSR','Arial Narrow','Segoe UI',sans-serif;--ach-game-accent:var(--nyx-compat-color-hex-d99a6c)}
.achievement-page-head{
  display:grid;
  grid-template-columns:minmax(260px,1fr) minmax(260px,430px) minmax(230px,300px);
  align-items:center;
  gap:var(--nyx-compat-spacing-22px);
  flex:none;
  min-height:84px;
  padding:var(--nyx-compat-spacing-13px) var(--nyx-space-18);
  border:1px solid var(--ach-line);
  border-radius:var(--nyx-radius-panel);
  background:
    radial-gradient(circle at 7% 50%,var(--nyx-compat-color-a42fead3b275),transparent 30%),
    linear-gradient(115deg,var(--nyx-compat-color-9ce462daf8fc),var(--nyx-compat-color-3bcecfb6d780));
  box-shadow:var(--nyx-compat-shadow-box-3cbb4bf44b69);
}
.achievement-page-title{display:flex;align-items:center;gap:var(--nyx-compat-spacing-13px);min-width:0}
.achievement-page-title>div{min-width:0}.achievement-page-title span{color:var(--ach-game-accent);font-size:var(--nyx-compat-size-8px);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p15em);text-transform:uppercase}
.achievement-page-title h1{margin:var(--nyx-compat-spacing-3px) 0 0;color:var(--nyx-color-text-max);font:var(--nyx-compat-font-1d7152a27f50)}
.achievement-overall{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--nyx-space-6) var(--nyx-space-12);min-width:0}
.achievement-overall>span{color:var(--nyx-compat-color-hex-8e849b);font-size:var(--nyx-compat-size-8px);font-weight:var(--nyx-compat-weight-850);letter-spacing:var(--nyx-compat-tracking-p13em);text-transform:uppercase}
.achievement-overall>strong{color:var(--ach-game-accent);font:var(--nyx-compat-font-7d47598aa130)}
.achievement-overall>i{grid-column:1/-1;height:4px;overflow:hidden;background:var(--nyx-compat-color-b56364a7c7a0)}
.achievement-overall>i b{display:block;height:100%;background:linear-gradient(90deg,var(--ach-accent),var(--ach-game-accent));box-shadow:var(--nyx-compat-shadow-box-e40242f9c372)}
.achievement-overall>small{grid-column:1/-1;overflow:hidden;color:var(--nyx-compat-color-hex-817989);font-size:var(--nyx-compat-size-8px);text-overflow:ellipsis;white-space:nowrap}
.achievement-page-head .achievement-profile-tools{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--nyx-compat-spacing-7px);max-width:none}
.achievement-page-head .achievement-profile-tools>label{display:grid;gap:var(--nyx-compat-spacing-5px);min-width:0}.achievement-page-head .achievement-profile-tools label>span{color:var(--nyx-compat-color-hex-898093);font-size:var(--nyx-compat-size-8px);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p11em);text-transform:uppercase}
.achievement-page-head .achievement-manage-button{min-width:112px;white-space:nowrap}

.achievement-toolbar{
  display:grid;
  grid-template-columns:minmax(260px,1fr) auto auto minmax(130px,170px);
  align-items:end;
  gap:var(--nyx-compat-spacing-9px);
  flex:none;
  padding:var(--nyx-space-10) var(--nyx-space-12);
  border:1px solid var(--ach-line);
  border-radius:var(--nyx-compat-radius-12px);
  background:var(--nyx-compat-color-c20f9825606b);
  backdrop-filter:blur(14px);
}
.achievement-toolbar .achievement-search,.achievement-toolbar .achievement-sort{display:grid;gap:var(--nyx-compat-spacing-5px);min-width:0}
.achievement-toolbar label>span{color:var(--nyx-compat-color-hex-898093);font-size:var(--nyx-compat-size-8px);font-weight:var(--nyx-weight-extrabold);letter-spacing:var(--nyx-compat-tracking-p11em);text-transform:uppercase}
.achievement-toolbar :is(input,select){width:100%;min-width:0}
.achievement-toolbar .achievement-status-filter{display:grid;grid-template-columns:repeat(3,auto);gap:var(--nyx-compat-spacing-3px);padding:var(--nyx-compat-spacing-3px);border:1px solid var(--nyx-compat-color-c201d2dab2c4);border-radius:var(--nyx-radius-card);background:var(--nyx-compat-color-99cc84676c14)}
.achievement-toolbar .achievement-status-filter button{min-height:34px;padding:var(--nyx-compat-spacing-7px) var(--nyx-space-12);border:0;background:transparent;color:var(--nyx-compat-color-hex-847b90)}
.achievement-toolbar .achievement-status-filter button.on{background:var(--ach-paper-sel);color:var(--ach-paper-ink);box-shadow:var(--nyx-compat-shadow-box-4928ac5770ed)}
.achievement-gallery-toggle{min-height:42px!important;white-space:nowrap}

.achievement-category-gallery{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(168px,1fr));
  gap:var(--nyx-compat-spacing-11px);
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:var(--nyx-space-4) var(--nyx-compat-spacing-5px) var(--nyx-space-18) var(--nyx-compat-spacing-1px);
  scrollbar-width:thin;
  scrollbar-color:var(--nyx-compat-color-129eb6a17ebd) transparent;
}
.achievement-category-card{
  position:relative;
  display:grid!important;
  grid-template-rows:90px minmax(44px,auto) auto 3px;
  align-content:start;
  min-height:184px!important;
  overflow:hidden;
  padding:var(--nyx-space-14) var(--nyx-compat-spacing-13px) var(--nyx-space-12)!important;
  border-color:var(--nyx-compat-color-1d0e03510af4)!important;
  border-radius:var(--nyx-radius-small) var(--nyx-radius-small) var(--nyx-compat-radius-18px) var(--nyx-compat-radius-18px)!important;
  background:
    radial-gradient(circle at 50% 22%,var(--nyx-compat-color-a42fead3b275),transparent 38%),
    linear-gradient(165deg,var(--nyx-compat-color-hex-211a36),var(--nyx-compat-color-hex-100d1b))!important;
  color:var(--ach-text)!important;
  text-align:center;
  box-shadow:var(--nyx-compat-shadow-box-7f57c6ec85cc);
}
.achievement-category-card::before{content:"";position:absolute;inset:5px;border:1px solid var(--nyx-compat-color-2ed3367aa626);border-radius:var(--nyx-compat-radius-3px) var(--nyx-compat-radius-3px) var(--nyx-radius-panel) var(--nyx-radius-panel);pointer-events:none}
.achievement-category-card:hover{transform:translateY(-3px)!important;border-color:var(--nyx-compat-color-815c37e5f24b)!important;background:linear-gradient(165deg,var(--nyx-compat-color-hex-2a2044),var(--nyx-compat-color-hex-120e20))!important}
.achievement-category-card-icon{align-self:center;justify-self:center;width:78px;height:78px;border:0!important;background:transparent!important}
.achievement-category-card-icon img{filter:var(--nyx-compat-shadow-drop-4c727e4bb27d)}
.achievement-category-card>strong{align-self:center;font:var(--nyx-compat-font-31d44c2e446d);overflow-wrap:anywhere}
.achievement-category-card>span{display:flex;align-items:center;justify-content:space-between;margin-top:var(--nyx-compat-spacing-9px);color:var(--ach-game-accent);font-size:var(--nyx-type-caption)}.achievement-category-card>span small{color:var(--nyx-compat-color-hex-8e859a)}.achievement-category-card>span b{font-size:var(--nyx-type-caption)}
.achievement-category-card>i{position:relative;display:block;height:3px;margin-top:var(--nyx-space-6);background:var(--nyx-compat-color-79f2e0da8494)}
.achievement-category-card>i::after{content:"";display:block;width:var(--category-progress);height:100%;background:linear-gradient(90deg,var(--ach-accent),var(--ach-game-accent))}
.achievement-hsr .achievement-category-card{border-radius:0!important;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}

.achievement-archive{display:grid;grid-template-columns:minmax(260px,310px) minmax(0,1fr);align-items:stretch;gap:var(--nyx-space-10);flex:1;min-height:0}
.achievement-atlas{position:static;display:flex;min-height:0;max-height:none;border-color:var(--ach-line);border-radius:var(--nyx-compat-radius-12px);background:linear-gradient(180deg,var(--nyx-compat-color-fc25c175a038),var(--nyx-compat-color-d8015d0bf817));box-shadow:var(--nyx-compat-shadow-box-3b6396aaed84)}
.achievement-atlas>header{display:flex;align-items:end;justify-content:space-between;gap:var(--nyx-space-8);padding:var(--nyx-compat-spacing-13px) var(--nyx-space-14) var(--nyx-space-10)}.achievement-atlas>header span{color:var(--nyx-compat-color-hex-e8e2f3);font:var(--nyx-compat-font-2eaea2d675f9);letter-spacing:var(--nyx-compat-tracking-0);text-transform:none}.achievement-atlas>header b{color:var(--nyx-compat-color-hex-7f7689);font:var(--nyx-compat-font-9079aa01e1b1);letter-spacing:var(--nyx-compat-tracking-p08em);text-transform:uppercase}
.achievement-atlas-search{padding:var(--nyx-space-8) var(--nyx-space-10) var(--nyx-space-6)}.achievement-atlas-check{padding:var(--nyx-space-2) var(--nyx-compat-spacing-11px) var(--nyx-space-8)}
.achievement-atlas nav{gap:var(--nyx-space-4);padding:var(--nyx-space-4) var(--nyx-compat-spacing-7px) var(--nyx-space-10)}.achievement-atlas nav>button{grid-template-columns:46px minmax(0,1fr);min-height:57px;padding:var(--nyx-space-6) var(--nyx-space-8);border-color:var(--nyx-compat-color-2ed3367aa626);border-radius:var(--nyx-compat-radius-7px);background:var(--nyx-compat-color-99cc84676c14)}
.achievement-atlas nav>button:hover{background:var(--nyx-compat-color-226f46ff22b2)}
.achievement-atlas nav>button.on{border-color:var(--ach-accent);background:var(--ach-paper-sel);box-shadow:var(--nyx-compat-shadow-box-4e18e70e69d1)}
.achievement-atlas nav>button.on strong{color:var(--ach-paper-ink)}.achievement-atlas nav>button.on small{color:var(--ach-paper-muted)}.achievement-atlas nav>button.on small i{color:var(--ach-accent)}
.achievement-atlas nav strong{font:var(--nyx-compat-font-6f6db41e21f7)}
.achievement-category-orbit{width:42px}.achievement-category-icon{width:36px;height:36px}

.achievement-ledger{display:flex;flex-direction:column;min-height:0;overflow:hidden;border-color:var(--ach-line);border-radius:var(--nyx-compat-radius-12px);background:var(--nyx-compat-color-46e2fece141c);box-shadow:var(--nyx-compat-shadow-box-3b6396aaed84)}
.achievement-ledger-heading{grid-template-columns:64px minmax(0,1fr) auto;gap:var(--nyx-space-14);flex:none;padding:var(--nyx-space-14) var(--nyx-space-16);border-radius:var(--nyx-compat-radius-12px) var(--nyx-compat-radius-12px) 0 0;background:radial-gradient(circle at 4% 50%,var(--nyx-compat-color-eb8a84a2f940),transparent 28%),linear-gradient(110deg,var(--nyx-compat-color-hex-201831),var(--nyx-compat-color-hex-100d1b))}
.achievement-ledger-icon{width:58px;height:58px;border-color:var(--nyx-compat-color-a0d022bb7dfc)}
.achievement-ledger-heading>div>span{color:var(--ach-game-accent)}
.achievement-ledger-heading h2{margin:var(--nyx-compat-spacing-3px) 0 var(--nyx-space-4);font:var(--nyx-compat-font-95e3d34efed8)}
.achievement-ledger-heading p{font-size:var(--nyx-type-caption)}
.achievement-category-actions button{min-height:36px;padding:var(--nyx-compat-spacing-7px) var(--nyx-space-10)}
.achievement-filter-bar,.achievement-hsr .achievement-filter-bar{display:flex;align-items:end;gap:var(--nyx-space-8);flex:none;padding:var(--nyx-space-8) var(--nyx-space-12);border-bottom:1px solid var(--nyx-compat-color-1ef7f9315602);background:var(--nyx-compat-color-e185bd740345)}
.achievement-filter-bar label{display:grid;gap:var(--nyx-space-4);min-width:120px}.achievement-filter-bar label>span{font-size:var(--nyx-compat-size-7px)}.achievement-filter-bar :is(select,input){min-height:36px!important;padding-block:var(--nyx-space-6)}
.achievement-result-strip{flex:none;min-height:32px;padding:var(--nyx-compat-spacing-5px) var(--nyx-compat-spacing-13px)}
.achievement-list{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--nyx-compat-color-f42edb24539a) transparent}
.achievement-row{grid-template-columns:42px minmax(0,1fr) auto;gap:var(--nyx-space-10);min-height:76px;padding:var(--nyx-space-10) var(--nyx-compat-spacing-13px);border-bottom-color:var(--nyx-compat-color-1ef7f9315602);background:var(--nyx-compat-color-2dd3aa7181cd)}
.achievement-row:hover{background:var(--nyx-compat-color-bcd550fac433)}.achievement-row.done{background:linear-gradient(90deg,var(--nyx-compat-color-957ff2afb298),var(--nyx-compat-color-3c4839cf1be7))}
.achievement-row .achievement-check{width:38px;min-height:38px;border-radius:50%;background:var(--nyx-compat-color-22c778c4b5c4)}
.achievement-row .achievement-check[aria-pressed="true"]{background:var(--ach-accent);color:var(--nyx-compat-color-hex-100c1d)}
.achievement-row-main>strong{font:var(--nyx-compat-font-b517fc117361)}
.achievement-reward b{color:var(--ach-game-accent)}
.achievement-row-detail{border-color:var(--nyx-compat-color-f029f58ccc9b);background:var(--nyx-compat-color-c337c3db2a88)}
.achievement-empty strong,.achievement-zero-guide strong{font-family:var(--ach-display)}
.achievement-disclaimer{flex:none;padding:var(--nyx-space-6) var(--nyx-space-10) 0;color:var(--nyx-compat-color-hex-5f5867);font-size:var(--nyx-compat-size-7px);text-align:center}

@media(max-width:1180px){
  .achievement-page-head{grid-template-columns:minmax(220px,1fr) minmax(230px,360px)}
  .achievement-page-head .achievement-profile-tools{grid-column:1/-1;grid-template-columns:minmax(180px,280px) auto;justify-content:start}
  .achievement-toolbar{grid-template-columns:minmax(220px,1fr) auto auto}.achievement-toolbar .achievement-sort{display:none}
  .achievement-archive{grid-template-columns:240px minmax(0,1fr)}
  .achievement-ledger-heading{grid-template-columns:56px minmax(0,1fr)}.achievement-category-actions{grid-column:1/-1;justify-content:flex-start}
}
@media(max-width:760px){
  .achievement-page{flex:none;min-height:auto;overflow:visible;padding:0 0 var(--nyx-space-24)}
  .achievement-page-head{grid-template-columns:1fr;gap:var(--nyx-compat-spacing-11px);padding:var(--nyx-space-14);border-radius:var(--nyx-compat-radius-12px)}.achievement-page-title h1{font-size:var(--nyx-compat-size-23px)}
  .achievement-page-head .achievement-profile-tools{grid-column:1;grid-template-columns:minmax(0,1fr) auto}.achievement-page-head .achievement-manage-button{min-width:110px}
  .achievement-toolbar{grid-template-columns:1fr 1fr;padding:var(--nyx-compat-spacing-9px)}.achievement-toolbar .achievement-search,.achievement-toolbar .achievement-status-filter{grid-column:1/-1}.achievement-toolbar .achievement-status-filter button{min-height:42px}.achievement-gallery-toggle{width:100%}
  .achievement-atlas-toggle{display:grid;grid-template-columns:42px minmax(0,1fr) auto;align-items:center;gap:var(--nyx-space-10);width:100%;min-height:56px;text-align:left}.achievement-atlas-toggle-art{width:38px;height:38px}.achievement-atlas-toggle>span{display:grid;gap:var(--nyx-compat-spacing-3px)}.achievement-atlas-toggle small{color:var(--nyx-compat-color-hex-81798d);font-size:var(--nyx-compat-size-7p5px);text-transform:uppercase}.achievement-atlas-toggle b{overflow:hidden;color:var(--nyx-compat-color-hex-e0d9e9);font-size:var(--nyx-type-label);text-overflow:ellipsis}.achievement-atlas-toggle>i{color:var(--ach-accent);font-size:var(--nyx-compat-size-8px);font-style:normal;text-transform:uppercase}
  .achievement-category-gallery{grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;padding:0}.achievement-category-card{min-height:168px!important;grid-template-rows:76px minmax(38px,auto) auto 3px}.achievement-category-card-icon{width:66px;height:66px}.achievement-category-card>strong{font-size:var(--nyx-type-small)}
  .achievement-archive{grid-template-columns:1fr;flex:none}.achievement-atlas{display:none;max-height:min(65vh,560px)}.achievement-atlas.open{display:flex}.achievement-ledger{overflow:visible}.achievement-list{overflow:visible}
  .achievement-ledger-heading{grid-template-columns:50px minmax(0,1fr);gap:var(--nyx-compat-spacing-11px);padding:var(--nyx-space-12)}.achievement-ledger-icon{width:46px;height:46px}.achievement-category-actions{display:grid;grid-template-columns:1fr 1fr}.achievement-category-actions button{min-height:42px}
  .achievement-filter-bar,.achievement-hsr .achievement-filter-bar{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding:var(--nyx-space-10)}.achievement-filter-bar label{min-width:0}.achievement-filter-bar :is(select,input){min-height:42px!important}
  .achievement-row{grid-template-columns:44px minmax(0,1fr) auto;padding:var(--nyx-space-10)}.achievement-row .achievement-check{width:42px;min-height:42px}.achievement-row-detail{grid-column:1/-1}
  .achievement-disclaimer{padding:var(--nyx-space-10) var(--nyx-space-12) 0}
}
@media(max-width:430px){
  .achievement-page-head .achievement-profile-tools{grid-template-columns:1fr}.achievement-page-head .achievement-manage-button{min-height:44px}
  .achievement-toolbar{grid-template-columns:1fr}.achievement-gallery-toggle{grid-column:1}.achievement-category-gallery{gap:var(--nyx-compat-spacing-7px)}.achievement-category-card{padding-inline:var(--nyx-space-8)!important}
  .achievement-filter-bar,.achievement-hsr .achievement-filter-bar{grid-template-columns:1fr}.achievement-row{grid-template-columns:42px minmax(0,1fr)}.achievement-reward{grid-column:2;display:flex;justify-self:start;gap:var(--nyx-compat-spacing-5px)}.achievement-row-detail{grid-column:1/-1}.achievement-category-actions{grid-template-columns:1fr}
}

/* Approved achievement mockup translated to the Nyx palette.

   The ledger half of this page used to be a literal sheet of paper — a
   near-white #f0ecf7 panel carrying the whole achievement list. Against the
   rest of Nyx it read as a light-mode page dropped into a dark app and was
   genuinely uncomfortable to look at (user 2026-08-14). The --ach-paper* names
   are kept because 30+ rules below reference them, but they now describe a
   DARK ledger: paper = the panel surface, ink = the text on it. */
.achievement-page{
  --ach-accent:var(--nyx-compat-color-hex-ad96ff);
  --ach-accent-rgb:var(--nyx-compat-color-889449892a40);
  --ach-game-accent:var(--nyx-compat-color-hex-c8b8ff);
  --ach-paper:#100c22;                              /* ledger body */
  --ach-paper-2:#171130;                            /* heading / filter / result strips */
  --ach-paper-row:rgba(183,170,255,.05);            /* a single achievement row */
  --ach-paper-row-hover:rgba(183,170,255,.1);
  --ach-paper-field:rgba(5,4,14,.7);                /* inputs, row detail, load-more */
  --ach-paper-sel:rgba(var(--ach-accent-rgb),.2);   /* selected category / filter chip */
  --ach-paper-ink:#f1edff;
  --ach-paper-muted:#a79ecb;
  --ach-paper-line:rgba(183,170,255,.16);
  --ach-nav:var(--nyx-compat-color-hex-151025);
  --ach-nav-2:var(--nyx-compat-color-hex-281d43);
}
.achievement-hsr{--ach-game-accent:var(--nyx-compat-color-hex-c8b8ff)}
.achievement-page-head{
  min-height:94px;
  border-color:var(--nyx-compat-color-5bf6d390d8f0);
  background:linear-gradient(110deg,var(--nyx-compat-color-f67162aa9e17),var(--nyx-compat-color-15b842453fbc));
}
.achievement-page-title>div>span{color:var(--nyx-compat-color-hex-a893e9);font-size:var(--nyx-type-label)}
.achievement-page-title h1{font-size:var(--nyx-compat-size-35px)}
.achievement-overall>span,.achievement-page-head .achievement-profile-tools label>span{font-size:var(--nyx-type-caption)}
.achievement-overall>strong{color:var(--nyx-compat-color-hex-c9b9ff);font-size:var(--nyx-type-section)}
.achievement-overall>i b{background:var(--ach-accent);box-shadow:var(--nyx-compat-shadow-box-13b1acaa2730)}
.achievement-overall>small{color:var(--nyx-compat-color-hex-9b91a8);font-size:var(--nyx-type-caption)}

.achievement-toolbar{
  min-height:60px;
  border-color:var(--nyx-compat-color-871947ad3714);
  background:var(--nyx-compat-color-e99235e3558b);
}
.achievement-toolbar .achievement-search input{border-radius:var(--nyx-radius-pill)}
.achievement-toolbar .achievement-status-filter button.on{background:var(--ach-paper-sel);color:var(--ach-paper-ink)}

.achievement-archive{grid-template-columns:minmax(365px,410px) minmax(0,1fr)}
.achievement-atlas{
  border-color:var(--nyx-compat-color-2c2e69e12484);
  border-radius:var(--nyx-compat-radius-3px);
  background:linear-gradient(180deg,var(--nyx-compat-color-3a167cc3e1b9),var(--nyx-compat-color-50f0883c5061));
}
.achievement-atlas>header{min-height:58px;padding:0 var(--nyx-space-16);border-bottom:1px solid var(--nyx-compat-color-79f2e0da8494)}
.achievement-atlas>header span{font-size:var(--nyx-compat-size-18px)}
.achievement-atlas>header b{font-size:var(--nyx-type-caption)}
.achievement-atlas-search,.achievement-atlas-check{display:none}
.achievement-atlas nav{gap:var(--nyx-space-6);padding:var(--nyx-space-8)}
.achievement-atlas nav>button{
  position:relative;
  grid-template-columns:54px minmax(0,1fr);
  min-height:72px;
  padding:var(--nyx-space-8) var(--nyx-space-12);
  border:1px solid var(--nyx-compat-color-b56364a7c7a0);
  border-radius:var(--nyx-compat-radius-3px);
  background:var(--nyx-compat-color-8caa693a1d6f);
}
.achievement-atlas nav>button:hover{transform:translateX(2px);background:var(--nyx-compat-color-79f2e0da8494)}
.achievement-atlas nav>button.on{
  border-color:var(--ach-accent);
  background:var(--ach-paper-sel);
  box-shadow:var(--nyx-compat-shadow-box-22d029e13f2b);
}
.achievement-atlas nav>button.on::before{
  content:"";
  position:absolute;
  left:-8px;
  width:0;
  height:0;
  border-top:7px solid transparent;
  border-bottom:7px solid transparent;
  border-right:7px solid var(--ach-accent);
}
.achievement-atlas nav strong{font-size:var(--nyx-type-body)}
.achievement-atlas nav small{font-size:var(--nyx-type-label)}
.achievement-atlas nav>button.on strong{color:var(--ach-paper-ink)}
.achievement-atlas nav>button.on small{color:var(--ach-paper-muted)}
.achievement-atlas nav>button.on small i{color:var(--ach-accent)}
.achievement-category-orbit{width:48px}.achievement-category-icon{width:42px;height:42px}

.achievement-ledger{
  border:2px solid var(--ach-paper-line);
  border-radius:var(--nyx-compat-radius-3px);
  background:var(--ach-paper);
  color:var(--ach-paper-ink);
  box-shadow:var(--nyx-compat-shadow-box-3cfc6080326a);
}
.achievement-hsr .achievement-ledger{border-radius:0;clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px)}
.achievement-ledger-heading{
  min-height:108px;
  padding:var(--nyx-compat-spacing-15px) var(--nyx-compat-spacing-22px);
  border-bottom:1px solid var(--ach-paper-line);
  border-radius:0;
  background:linear-gradient(100deg,var(--nyx-compat-color-3972e28257b7),transparent 48%);
}
.achievement-ledger-icon{width:68px;height:68px;border-color:var(--nyx-compat-color-f42edb24539a);background:var(--nyx-compat-color-4aaaecca2665)}
.achievement-ledger-heading>div>span{color:var(--ach-accent);font-size:var(--nyx-type-caption)}
.achievement-ledger-heading h2{color:var(--ach-paper-ink);font-size:var(--nyx-compat-size-31px)}
.achievement-ledger-heading p{color:var(--ach-paper-muted);font-size:var(--nyx-compat-size-11px)}
.achievement-category-actions button{
  min-height:34px;
  border-color:var(--ach-paper-line);
  background:var(--ach-paper-field);
  color:var(--ach-paper-ink);
}
.achievement-category-actions button:hover{border-color:var(--ach-accent);background:var(--ach-paper-sel)}
.achievement-filter-bar,.achievement-hsr .achievement-filter-bar{
  padding:var(--nyx-space-10) var(--nyx-space-14);
  border-bottom:1px solid var(--ach-paper-line);
  background:var(--ach-paper-2);
}
.achievement-filter-bar label>span{color:var(--ach-paper-muted);font-size:var(--nyx-compat-size-8px)}
.achievement-filter-bar :is(select,input){border-color:var(--ach-paper-line)!important;background:var(--ach-paper-field)!important;color:var(--ach-paper-ink)!important}
.achievement-result-strip{border-bottom:1px solid var(--ach-paper-line);background:var(--ach-paper-2);color:var(--ach-paper-muted);font-size:var(--nyx-type-caption)}
.achievement-result-strip button{color:var(--ach-accent)}
.achievement-list{padding:var(--nyx-space-8) var(--nyx-space-12) var(--nyx-space-12);background:var(--ach-paper)}
.achievement-row{
  min-height:88px;
  margin-bottom:var(--nyx-compat-spacing-5px);
  padding:var(--nyx-compat-spacing-11px) var(--nyx-compat-spacing-15px);
  border:1px solid var(--ach-paper-line);
  background:var(--ach-paper-row);
}
.achievement-row:hover{transform:translateX(2px);background:var(--ach-paper-row-hover)}
.achievement-row.done{background:color-mix(in srgb,var(--ach-paper) 82%,var(--ach-accent))}
.achievement-row .achievement-check{border-color:var(--nyx-compat-color-4068a7e421a9);background:rgba(var(--ach-accent-rgb),.14);color:var(--ach-paper-ink)}
.achievement-row .achievement-check[aria-pressed="true"]{background:var(--ach-accent);color:var(--nyx-compat-color-hex-211830)}
.achievement-row-main>strong{color:var(--ach-paper-ink);font-size:var(--nyx-compat-size-18px)}
.achievement-row-main>span:last-child{color:var(--ach-paper-muted);font-size:var(--nyx-type-small)}
.achievement-row.done .achievement-row-main>strong{color:var(--ach-paper-muted)}
.achievement-row-meta small{color:var(--ach-paper-muted);font-size:var(--nyx-compat-size-8px)}
.achievement-row-meta em{border-color:var(--ach-paper-line);color:var(--ach-paper-muted);background:var(--ach-paper-row-hover)}
.achievement-reward b{color:var(--ach-gold);font-size:var(--nyx-type-lead)}
.achievement-reward small{color:var(--ach-paper-muted)}
.achievement-row-detail{border-color:var(--ach-paper-line);background:var(--ach-paper-field)}
.achievement-row-detail>div>span{color:var(--ach-accent)}.achievement-row-detail p,.achievement-row-detail dd{color:var(--ach-paper-ink)}.achievement-row-detail dt{color:var(--ach-paper-muted)}
.achievement-empty,.achievement-zero-guide{color:var(--ach-paper-muted)}
.achievement-empty strong,.achievement-zero-guide strong{color:var(--ach-paper-ink)}
.achievement-load-more{margin:var(--nyx-space-8);border-color:var(--ach-paper-line)!important;background:var(--ach-paper-field)!important;color:var(--ach-paper-ink)!important}

@media(max-width:1180px){.achievement-archive{grid-template-columns:minmax(300px,340px) minmax(0,1fr)}.achievement-row-main>strong{font-size:var(--nyx-type-lead)}}
@media(max-width:760px){.achievement-archive{grid-template-columns:1fr}.achievement-atlas-search,.achievement-atlas-check{display:flex}.achievement-ledger{clip-path:none}.achievement-row-main>strong{font-size:var(--nyx-compat-size-15px)}}

/* ===== Production stacked-left shell (2026-07) ===== */
@media (min-width:761px) {
  #app > [data-screen-label] {
    display:grid!important;
    grid-template-columns:92px 236px minmax(0,1fr)!important;
    grid-template-rows:132px minmax(0,1fr)!important;
  }

  .gp-topbar{display:contents!important}

  .gp-topbar .tb-brand {
    position:relative!important;
    inset:auto!important;
    transform:none!important;
    grid-column:1 / 3;
    grid-row:1;
    z-index:20;
    width:328px;
    height:132px;
    /* Pulled left 2026-08-09 to match the desktop wordmark position. */
    padding:0 var(--nyx-space-24) 0 var(--nyx-space-4);
    overflow:visible;
    border:0;
    background:transparent;
  }
  .gp-topbar .tb-brand .plate{left:12px;width:316px;opacity:.56}
  .gp-topbar .tb-brand .brand-mark{width:100%;justify-content:flex-start;gap:var(--nyx-compat-spacing-22px)}
  .gp-topbar .tb-brand .wm{font-size:var(--nyx-compat-size-46px)}

  .gp-topbar .tb-center {
    grid-column:1;
    grid-row:2;
    z-index:12;
    min-width:0;
    min-height:0;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    overflow-x:hidden;
    overflow-y:auto;
    padding:var(--nyx-space-18) var(--nyx-space-10) var(--nyx-compat-spacing-122px);
    border:0;
    background:transparent;
    scrollbar-width:none;
  }
  .gp-topbar .tb-center::-webkit-scrollbar{display:none}
  /* The horizontal-topbar time-preference grid collapses the 92px stacked rail
     (icons clipped off-screen — user #1). Restore the stacked column here. */
  .gp-topbar.has-time-preference .tb-center{display:flex;flex-direction:column;width:auto;column-gap:0}
  .gp-topbar.has-time-preference .gp-game-rail,
  .gp-topbar.has-time-preference .nyx-time-pref{grid-column:auto;justify-self:auto}
  .gp-topbar.has-time-preference .nyx-time-pref{margin-top:var(--nyx-space-12)}
  .gp-topbar.has-time-preference .nyx-time-pref-buttons{flex-direction:column}
  .gp-game-rail,.gp-game-rail-icons{flex-direction:column;align-items:center}
  .gp-game-rail{width:100%;gap:var(--nyx-space-12)}
  .gp-topbar.is-game-overview .gp-game-rail{width:64px;justify-self:start}
  .gp-game-rail-icons{gap:var(--nyx-space-10)}
  .gp-topbar .gp-med{width:64px;height:64px}
  .gp-topbar .gp-med img{width:52px;height:52px}
  .gp-topbar .gp-med img.glyph{width:34px;height:34px}
  .gp-game-rail-icons a:not(.on){filter:grayscale(1);opacity:.38}
  .gp-game-rail-icons a.on,.gp-game-rail-icons a:hover,.gp-game-rail-icons a:focus-visible{filter:none;opacity:1}

  .gp-layout,.gp-layout.has-aside {
    grid-column:2 / 4;
    grid-row:1 / 3;
    z-index:4;
    min-width:0;
    min-height:0;
    display:grid;
    grid-template-columns:236px minmax(0,1fr);
    grid-template-rows:132px minmax(0,1fr);
    gap:0!important;
    padding:0!important;
    overflow:hidden;
  }
  .gp-layout.has-aside{grid-template-columns:236px minmax(0,1fr) minmax(300px,360px)}
  .gp-side-nav {
    grid-column:1;
    grid-row:2;
    gap:var(--nyx-space-8);
    padding:var(--nyx-space-18) var(--nyx-space-10) var(--nyx-compat-spacing-120px);
    border:0;
    background:transparent;
  }
  .gp-fn-row{min-height:54px;padding-inline:var(--nyx-space-12)}
  .gp-main-pane{grid-column:2;grid-row:1 / 3}
  .gp-main-pane.fill{grid-column:2 / -1}
  .gp-overview-aside{grid-column:3;grid-row:1 / 3}
  .gp-corner {
    left:12px;
    bottom:14px;
    z-index:90;
    width:168px;
    padding:0;
    border:0;
    background:transparent;
  }
  /* Ko-fi centers over the channel medallion (user 2026-07-15 #5). */
  .gp-corner-actions{justify-content:center}
  .cm-chan-switch{width:168px}
  .gp-topbar .tb-brand .wm:focus-visible{outline:2px solid var(--nyx-color-text-max);outline-offset:4px}
}

.gp-topbar .tb-brand{overflow:visible;border-color:transparent;background:transparent}
.gp-side-nav,.gp-topbar .tb-center{border:0;background:transparent}
.gp-corner{border:0;background:transparent;box-shadow:none}
.cm-chan-switch{padding:0;border-radius:0;background:transparent;box-shadow:none}
.cm-chan-switch::before{display:none}

.gp-fn-row,.gp-fn-row:hover,.gp-fn-row.on,.gp-fn-row:focus-visible {
  clip-path:none;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
.gp-fn-row.on{color:var(--nyx-color-text-max);text-shadow:var(--nyx-compat-shadow-text-d64b9a7534db)}
.gp-fn-row:hover{color:var(--nyx-color-text-max);background:linear-gradient(90deg,var(--nyx-compat-color-87c0bf79f667),transparent 72%)}
.gp-game-rail :is(a,button):focus-visible,.gp-game-rail-icons :is(a,button):focus-visible {
  outline:2px solid var(--nyx-color-text-max);
  outline-offset:3px;
  border-radius:50%;
}

@media (max-width:760px) {
  .stage.is-compact-stage .gp-side-nav{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    height:50px;
    min-height:50px;
    padding:0 var(--nyx-space-12) var(--nyx-space-6);
    scroll-padding-inline:var(--nyx-space-12);
    background:transparent;
  }
  .stage.is-compact-stage .gp-fn-row{width:auto;min-width:max-content;min-height:44px}
  .stage.is-compact-stage .gp-fn-row.on{order:-1}
  .stage.is-compact-stage .gp-topbar .tb-brand .wm:focus-visible{outline:2px solid var(--nyx-color-text-max);outline-offset:3px}
  .stage.is-compact-stage .gp-corner {
    position:relative;
    inset:auto;
    flex:0 0 44px;
    width:100%;
    height:44px;
    padding:0 var(--nyx-space-8) var(--nyx-space-4);
    flex-direction:row;
    align-items:flex-end;
    justify-content:flex-end;
    border:0;
    background:transparent;
  }
  .stage.is-compact-stage .gp-corner-actions{display:none}
  .stage.is-compact-stage .cm-chan-switch{position:static;inset:auto;margin:0}
}

/* ===== shared page shell ===== */
  html, body{ margin:0; height:100%; background:var(--nyx-color-canvas); overflow:hidden; }
  .gp-vsep{ width:1px; height:34px; background:linear-gradient(180deg, var(--nyx-compat-color-51af19e1cccc), var(--nyx-compat-color-f6b07e29e7bf), var(--nyx-compat-color-51af19e1cccc)); }
  .stage-wrap{ position:fixed; inset:0; display:flex; justify-content:center; align-items:flex-start; overflow:hidden; }
  .stage{ position:relative; flex:none; width:1600px; height:900px; transform-origin:top center; }
  /* page-level background lives at viewport scale so letterboxing stays dark */
  .page-bg{ position:fixed; inset:-6vmax; background:var(--nyx-color-canvas) url('../../assets/bg/backgroundnyx.png') 50% 50%/118% auto no-repeat; transform:scale(1.025); filter:brightness(1.4) saturate(1.12) contrast(1.05); transform-origin:center center; }
  .page-pattern{ position:fixed; top:50%; left:50%; width:150vmax; height:150vmax;
    transform:translate(-50%,-50%) rotate(0deg); transform-origin:center center;
    background:url('../../assets/decor/pattern.png') center/cover no-repeat;
    mix-blend-mode:screen; opacity:.2; pointer-events:none;
    animation:spinPattern 480s linear infinite; }
  @keyframes spinPattern{ from{ transform:translate(-50%,-50%) rotate(0deg); } to{ transform:translate(-50%,-50%) rotate(360deg); } }
  @media (prefers-reduced-motion: reduce){ .page-pattern{ animation:none; } }
  .page-vignette{ position:fixed; inset:0; pointer-events:none;
    background:
      radial-gradient(120% 90% at 50% 8%, var(--nyx-compat-color-876dbdbfb251), transparent 46%),
      radial-gradient(140% 120% at 50% 120%, var(--nyx-compat-color-7bbf8dd45571), transparent 55%),
      linear-gradient(180deg, var(--nyx-compat-color-32ad2e23a2c4) 0%, var(--nyx-compat-color-77f872e799a7) 24%, var(--nyx-compat-color-77f872e799a7) 60%, var(--nyx-compat-color-9614c9320601) 100%); }
  /* the .gp root inside the stage is transparent; backdrop is page-level */
  .gp.bare .gp-bg, .gp.bare .gp-pattern, .gp.bare .gp-vignette{ display:none; }
  /* boot splash — covers the bare background until the app mounts, then fades out
     (reuses the existing html.nyx-app-ready flip; 8s failsafe if the bundle never mounts) */
  .nyx-boot{ position:fixed; inset:0; z-index:50; display:grid; place-items:center;
    background:radial-gradient(120% 95% at 50% 30%, var(--nyx-compat-color-hex-0b0820) 0%, var(--nyx-color-canvas) 70%);
    opacity:1; transition:opacity .5s ease; }
  html.nyx-app-ready .nyx-boot{ opacity:0; visibility:hidden; pointer-events:none; transition:opacity .5s ease, visibility 0s linear .5s; }
  /* failsafe: only while NOT ready, so it never overrides the ready fade-out */
  html:not(.nyx-app-ready) .nyx-boot{ animation:nyxBootFailsafe .6s ease 8s forwards; }
  .nyx-boot-eye{ position:relative; width:128px; height:128px; animation:nyxBootPulse 1.7s ease-in-out infinite;
    filter:var(--nyx-compat-shadow-drop-807afd52b227); }
  .nyx-boot-eye .elayer{ position:absolute; inset:0; background:var(--nyx-compat-color-hex-cdc2ff);
    -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%; }
  .nyx-boot-eye .elayer.ball{ -webkit-mask-image:url('../../assets/icon/eye_ball.png'); mask-image:url('../../assets/icon/eye_ball.png'); }
  .nyx-boot-eye .elayer.lid{ -webkit-mask-image:url('../../assets/icon/eye_lid.png'); mask-image:url('../../assets/icon/eye_lid.png'); }
  .nyx-boot-eye .elayer.drips{ -webkit-mask-image:url('../../assets/icon/eye_drips.png'); mask-image:url('../../assets/icon/eye_drips.png'); }
  .nyx-boot-spin{ position:absolute; width:200px; height:200px; border-radius:50%;
    border:2px solid transparent; border-top-color:var(--nyx-compat-color-9160d202a7ca); border-right-color:var(--nyx-compat-color-67a410e0be0b);
    animation:nyxBootRot .9s linear infinite; }
  @keyframes nyxBootPulse{ 0%,100%{ transform:scale(.94); opacity:.82; } 50%{ transform:scale(1.04); opacity:1; } }
  @keyframes nyxBootRot{ to{ transform:rotate(360deg); } }
  @keyframes nyxBootFailsafe{ to{ opacity:0; visibility:hidden; } }
  @media (prefers-reduced-motion: reduce){ .nyx-boot-eye, .nyx-boot-spin{ animation:none; } .nyx-boot{ transition:none; } }

/* ===== shared ordinary chrome =====
   Feature-specific geometry and artwork stay local. These final groups make
   ordinary controls and surfaces consume one behavior and token contract. */
.gp :is(button,a,[role="button"],input,select,textarea):focus-visible{
  outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset);
}
.gp :is(button,input,select,textarea):disabled,
.gp [aria-disabled="true"]{ cursor:not-allowed; opacity:.48; }

:is(
  .gp-code .cp,.gp-code .mark,.gp-reset-form button,
  .nyx-time-pref-buttons button,.pm-action,.pm-reset,.pm-icon-search button,.pm-select-trigger,
  .pm-select-menu button,.pm-reset-confirm button,.nyx-beta-card button,.beta-diff-actions button,
  .gt-import-tab,.gt-go,.gt-method-action,.gt-cmd button,.gt-sync-row button,.gt-sync-delete,
  .gt-title-import,.gt-mode-tabs button,.gt-filter-pills button,.gt-pity-filters button,
  .cm-fopt,.cm-hide-menu button,.cm-presets button,.cm-form-row button,
  .cm-character-tabs button,.cm-trace-max,.cm-custom-back,.cm-detail-back,.cm-detail-custom,
  .cm-unfav-actions button,.nyx-img-choice-head button,.nyx-img-flips button,.nyx-img-actions button,
  .nyx-img-pickpreview-actions button,.nyx-img-library-head button,
  .ntl-tools > button,.ntl-marker-form > button,.ntl-results > button,.ntl-gi-search-runs button,
  .ntl-gi-layer-buttons button,.db-filter-button,.db-filter-pop-head button,.db-filter-group button,
  .db-tabs button,.db-filter-row button,.db-load-state button,.db-load-more,.wonder-tabs button,
  .wonder-filter-row button,.wonder-back,.tcg-filter-button,.tcg-filter-pop-head button,
  .tcg-active-filters button,.tcg-tabs button,.tcg-back,.pot-tabs button,.pot-back,
  .library-status button,.library-back,.library-volumes button,.library-count-row button,
  .library-annotation-toolbar button,.library-annotation-overflow button,
  .library-annotation-message button,.library-stale-marks button,.library-note-actions button,
  .bcal-add,.bcal-toggle,.bcal-nav,.bcal-today-btn,.bcal-icon-field > button,
  .bcal-dialog-actions button,.bcal-file,.achievement-manage-button,.achievement-notice button,
  .achievement-gallery-toggle,.achievement-inline-confirm button,.achievement-manage > nav button,
  .achievement-file-button,.achievement-import-actions button,.achievement-profile-form button,
  .achievement-create-profile button,.achievement-danger-zone > button,
  .achievement-danger-confirm button,.achievement-backup-actions > :is(button,.achievement-file-button)
){
  appearance:none; display:inline-flex; align-items:center; justify-content:center; gap:var(--nyx-space-8);
  min-height:var(--nyx-size-control); box-sizing:border-box; border:0; border-radius:0;
  clip-path:var(--nyx-clip-control);
  padding:var(--nyx-space-8) var(--nyx-space-18); color:var(--nyx-color-control-text);
  background:var(--nyx-color-control-surface);
  font:var(--nyx-compat-font-872b97fb43e6); letter-spacing:var(--nyx-tracking-control);
  text-transform:uppercase; text-decoration:none; cursor:pointer;
  transition:border-color .16s ease,background-color .16s ease,color .16s ease,filter .16s ease,transform .16s ease;
}
:is(
  .gp-code .cp,.gp-code .mark,.gp-reset-form button,
  .nyx-time-pref-buttons button,.pm-action,.pm-reset,.pm-icon-search button,.pm-select-trigger,
  .pm-select-menu button,.pm-reset-confirm button,.nyx-beta-card button,.beta-diff-actions button,
  .gt-import-tab,.gt-go,.gt-method-action,.gt-cmd button,.gt-sync-row button,.gt-sync-delete,
  .gt-title-import,.gt-mode-tabs button,.gt-filter-pills button,.gt-pity-filters button,
  .cm-fopt,.cm-hide-menu button,.cm-presets button,.cm-form-row button,
  .cm-character-tabs button,.cm-trace-max,.cm-custom-back,.cm-detail-back,.cm-detail-custom,
  .cm-unfav-actions button,.nyx-img-choice-head button,.nyx-img-flips button,.nyx-img-actions button,
  .nyx-img-pickpreview-actions button,.nyx-img-library-head button,
  .ntl-tools > button,.ntl-marker-form > button,.ntl-results > button,.ntl-gi-search-runs button,
  .ntl-gi-layer-buttons button,.db-filter-button,.db-filter-pop-head button,.db-filter-group button,
  .db-tabs button,.db-filter-row button,.db-load-state button,.db-load-more,.wonder-tabs button,
  .wonder-filter-row button,.wonder-back,.tcg-filter-button,.tcg-filter-pop-head button,
  .tcg-active-filters button,.tcg-tabs button,.tcg-back,.pot-tabs button,.pot-back,
  .library-status button,.library-back,.library-volumes button,.library-count-row button,
  .library-annotation-toolbar button,.library-annotation-overflow button,
  .library-annotation-message button,.library-stale-marks button,.library-note-actions button,
  .bcal-add,.bcal-toggle,.bcal-nav,.bcal-today-btn,.bcal-icon-field > button,
  .bcal-dialog-actions button,.bcal-file,.achievement-manage-button,.achievement-notice button,
  .achievement-gallery-toggle,.achievement-inline-confirm button,.achievement-manage > nav button,
  .achievement-file-button,.achievement-import-actions button,.achievement-profile-form button,
  .achievement-create-profile button,.achievement-danger-zone > button,
  .achievement-danger-confirm button,.achievement-backup-actions > :is(button,.achievement-file-button)
):hover{ color:var(--nyx-color-text-max); background:var(--nyx-color-control-surface-hover); }
:is(
  .gp-code .cp,.gp-code .mark,.gp-reset-form button,
  .nyx-time-pref-buttons button,.pm-action,.pm-reset,.pm-icon-search button,.pm-select-trigger,
  .pm-select-menu button,.pm-reset-confirm button,.nyx-beta-card button,.beta-diff-actions button,
  .gt-import-tab,.gt-go,.gt-method-action,.gt-cmd button,.gt-sync-row button,.gt-sync-delete,
  .gt-title-import,.gt-mode-tabs button,.gt-filter-pills button,.gt-pity-filters button,
  .cm-fopt,.cm-hide-menu button,.cm-presets button,.cm-form-row button,
  .cm-character-tabs button,.cm-trace-max,.cm-custom-back,.cm-detail-back,.cm-detail-custom,
  .cm-unfav-actions button,.nyx-img-choice-head button,.nyx-img-flips button,.nyx-img-actions button,
  .nyx-img-pickpreview-actions button,.nyx-img-library-head button,
  .ntl-tools > button,.ntl-marker-form > button,.ntl-results > button,.ntl-gi-search-runs button,
  .ntl-gi-layer-buttons button,.db-filter-button,.db-filter-pop-head button,.db-filter-group button,
  .db-tabs button,.db-filter-row button,.db-load-state button,.db-load-more,.wonder-tabs button,
  .wonder-filter-row button,.wonder-back,.tcg-filter-button,.tcg-filter-pop-head button,
  .tcg-active-filters button,.tcg-tabs button,.tcg-back,.pot-tabs button,.pot-back,
  .library-status button,.library-back,.library-volumes button,.library-count-row button,
  .library-annotation-toolbar button,.library-annotation-overflow button,
  .library-annotation-message button,.library-stale-marks button,.library-note-actions button,
  .bcal-add,.bcal-toggle,.bcal-nav,.bcal-today-btn,.bcal-icon-field > button,
  .bcal-dialog-actions button,.bcal-file,.achievement-manage-button,.achievement-notice button,
  .achievement-gallery-toggle,.achievement-inline-confirm button,.achievement-manage > nav button,
  .achievement-file-button,.achievement-import-actions button,.achievement-profile-form button,
  .achievement-create-profile button,.achievement-danger-zone > button,
  .achievement-danger-confirm button,.achievement-backup-actions > :is(button,.achievement-file-button)
):active{ transform:translateY(1px); }

:is(.gt-go,.pm-action.primary,.pm-reset-confirm button.primary,.nyx-beta-card button.primary,
  .beta-diff-actions button.primary,.nyx-img-actions button.primary,.nyx-img-pickpreview-actions button.apply,
  .bcal-dialog-actions button.primary,.achievement-import-actions button.primary,
  .achievement-create-profile button,.achievement-profile-form button[type="submit"]){
  color:var(--nyx-color-text-max); background:var(--nyx-color-control-active);
}
:is(.gt-mode-tabs button.on,.gt-filter-pills button.on,.gt-pity-filters button.on,
  .cm-presets button.on,.cm-character-tabs button.on,.db-tabs button.on,
  .wonder-tabs button.on,.tcg-tabs button.on,.pot-tabs button.on,.achievement-manage > nav button.on){
  color:var(--nyx-color-text-max); background:var(--nyx-color-control-active);
}
:is(.gt-sync-delete,.achievement-danger-zone > button,.achievement-danger-confirm button:first-of-type){
  color:var(--nyx-color-chip-danger); background:var(--nyx-color-chip-danger-surface);
  box-shadow:var(--nyx-compat-shadow-box-d0ffda305757);
}

:is(.gt-x,.cm-x,.cm-pop-close,.cm-tool,.ntl-gi-modal-close,.db-modal-close,
  .library-note-close,.library-annotation-close,.bcal-dialog-close,.achievement-manage-close,
  .gp-search .x){
  appearance:none; display:inline-grid; place-items:center; width:var(--nyx-size-icon); min-width:var(--nyx-size-icon);
  height:var(--nyx-size-icon); min-height:var(--nyx-size-icon); box-sizing:border-box; border:0;
  border-radius:var(--nyx-radius-control); padding:0; color:var(--nyx-color-control-text);
  background:var(--nyx-color-control-surface); box-shadow:var(--nyx-shadow-control); cursor:pointer;
  transition:background-color .16s ease,color .16s ease,transform .16s ease;
}
:is(.gt-x,.cm-x,.cm-pop-close,.cm-tool,.ntl-gi-modal-close,.db-modal-close,
  .library-note-close,.library-annotation-close,.bcal-dialog-close,.achievement-manage-close,
  .gp-search .x):hover{ color:var(--nyx-color-text-max); background:var(--nyx-color-control-surface-hover); }

:is(
  .gp-reset-form input,.gp-reset-form select,.nyx-time-pref-popover select,.pm-icon-search input,
  .pm-slider input[type="number"],.pm-language-row select,.gt-urlrow input,
  .gt-sync-row input,.gt-archive-tools select,.cm-weapon-menu input,.nyx-img-fields input[type="number"],
  .ntl-search input,.ntl-jump input,.ntl-marker-form input:not([type="color"]):not([type="checkbox"]),
  .ntl-marker-form select,.library-search input,.library-note-popover textarea,
  .bcal-dialog input:not([type="file"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  .bcal-dialog select,.bcal-dialog textarea,.achievement-profile-tools select,
  .achievement-toolbar input,.achievement-toolbar select,.achievement-manage input,.achievement-manage select
){
  min-height:var(--nyx-size-control); box-sizing:border-box; border:1px solid var(--nyx-color-border-strong);
  border-radius:var(--nyx-radius-control); outline:0; padding:var(--nyx-space-8) var(--nyx-space-12);
  color:var(--nyx-color-heading); background:var(--nyx-color-input-surface);
  font:var(--nyx-compat-font-8182614572fa);
}
:is(
  .gp-reset-form input,.gp-reset-form select,.nyx-time-pref-popover select,.pm-icon-search input,
  .pm-slider input[type="number"],.pm-language-row select,.gt-urlrow input,.gt-sync-row input,
  .gt-archive-tools select,.cm-weapon-menu input,.nyx-img-fields input[type="number"],
  .ntl-search input,.ntl-jump input,.ntl-marker-form input:not([type="color"]):not([type="checkbox"]),
  .ntl-marker-form select,.library-search input,
  .bcal-dialog input:not([type="file"]):not([type="color"]):not([type="checkbox"]):not([type="radio"]),
  .bcal-dialog select,.achievement-profile-tools select,.achievement-toolbar input,
  .achievement-toolbar select,.achievement-manage input,.achievement-manage select
){ height:var(--nyx-size-control); }
:is(.library-note-popover textarea,.bcal-dialog textarea){ height:auto; }
:is(.gp-search,.cm-search,.library-search){
  min-height:var(--nyx-size-control); border:1px solid var(--nyx-color-border-strong);
  border-radius:var(--nyx-radius-control); background:var(--nyx-color-input-surface);
  box-shadow:none;
}
:is(.gp-search,.cm-search,.library-search):focus-within{
  border-color:var(--nyx-color-accent-bright); outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset);
}
:is(.gp-search,.cm-search,.library-search) input{ border:0; outline:0; background:transparent; box-shadow:none; }

:is(.gt-panel,.cm-panel,.db-modal-card,.bcal-dialog,.achievement-manage,.library-reader,.ntl-gi-detail){
  border-radius:var(--nyx-radius-panel); background:var(--nyx-gradient-panel); box-shadow:var(--nyx-shadow-panel);
}
:is(.gt-panel-box,.gt-method,.gt-sync,.gt-archive-card,.gt-total-unit,.gt-recent-five-row,
  .gt-banner-history-row,.gp-reset-panel,.gp-reset-tile,.nyx-time-pref-popover,
  .nyx-pengo-menu.as-tab .pm-section,.cm-filter,.cm-hide-menu,.cm-weapon-menu,.cm-custom-art-panel,
  .nyx-img-editor,.cm-kit-entry,.ntl-detail,.ntl-popover,.db-load-state,.db-modal-fields div,
  .db-modal-skills > article,.library-status,.library-annotation-toolbar,.library-note-popover,
  .library-stale-marks,.bcal-next,.bcal-cell,.achievement-toolbar,.achievement-import-preview,
  .achievement-notice){
  border-radius:var(--nyx-radius-card); background:var(--nyx-color-surface-nested);
  box-shadow:var(--nyx-shadow-edge-subtle);
}
:is(.db-load-state,.bcal-cell,.gt-archive-card):hover{
  box-shadow:var(--nyx-compat-shadow-box-8ee9c57379f9);
}

:is(.gp-code .newtag,.gp-reset-recur,.cm-beta-tag,.gt-recent-five-row em,
  .gt-banner-history-detail em,.gt-banner-history-meta span,.gt-paired-weapon span,.library-text-match){
  display:inline-flex; align-items:center; gap:var(--nyx-space-4); padding:var(--nyx-space-4) var(--nyx-space-8);
  border-radius:var(--nyx-radius-small); color:var(--nyx-color-chip-text); background:var(--nyx-color-chip-surface);
  box-shadow:var(--nyx-compat-shadow-box-e9bf70852e54);
  font:var(--nyx-compat-font-5ab99a010eb0);
  letter-spacing:var(--nyx-compat-tracking-p08em); text-transform:uppercase; white-space:nowrap;
}
:is(.gt-recent-five-row em.fifty-win,.gt-banner-history-detail em.fifty-win){
  color:var(--nyx-color-chip-success); background:var(--nyx-color-chip-success-surface);
}
:is(.gt-recent-five-row em.fifty-loss,.gt-banner-history-detail em.fifty-loss){
  color:var(--nyx-color-chip-danger); background:var(--nyx-color-chip-danger-surface);
}
:is(.gt-recent-five-row em.guaranteed,.gt-banner-history-detail em.guaranteed){
  color:var(--nyx-color-chip-warning); background:var(--nyx-compat-color-a9b260a4109a);
}
/* Beta/Upcoming are purple, not warning-gold (user 2026-07-15 #14). */
.cm-beta-tag.cm-beta-tag{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,#8b7bff,#6f4ec3);
  box-shadow:0 1px 4px rgba(5,4,11,.75), inset 0 0 0 1px rgba(243,240,255,.28); }
.cm-beta-tag.cm-beta-tag.upcoming{ color:var(--nyx-color-text-max); background:linear-gradient(160deg,#8b7bff,#6f4ec3); }
.library-text-match{ color:var(--nyx-color-chip-info); background:var(--nyx-color-chip-info-surface); }

:is(.ntl-block,.ntl-marker > button,.ntl-gi-mini,.db-card,.wonder-card,.tcg-card,.pot-card,
  .library-tile,.library-cover,.bcal-chip,.cm-cell-open,.cm-favourite-star):focus-visible{
  outline:var(--nyx-focus-ring); outline-offset:var(--nyx-focus-offset);
}

.gt-results-top,.achievement-manage > header,.beta-diff-card > header{ z-index:var(--nyx-layer-sticky); }
:is(.nyx-pengo-menu,.nyx-time-pref-popover,.pm-icon-pop,.pm-select-menu,.cm-filter,.cm-hide-menu,
  .cm-weapon-menu,.ntl-popover,.db-filter-popout,.library-annotation-toolbar,
  .library-annotation-overflow,.library-note-popover){ z-index:var(--nyx-layer-popover); }
:is(.gt-overlay,.cm-overlay,.cm-unfav-overlay,.cm-pop-wrap:not(.float),.ntl-gi-modal-backdrop,
  .db-modal,.bcal-dialog-backdrop,.achievement-manage-layer,.pm-reset-confirm,
  .nyx-beta-confirm,.beta-diff-modal){ z-index:var(--nyx-layer-modal); }
:is(.cc-reward-pop,.cm-mat .src-tip,.cm-sig-tip,.nyx-pengo-menu [data-tip]::after){ z-index:var(--nyx-layer-tooltip); }

/* Inline tabs intentionally remove modal chrome after the shared surface rule. */
.cm-inline .cm-panel,.gt-inline .gt-panel{
  width:100%; max-width:none; height:100%; max-height:100%; padding:0; border-radius:0;
  background:none; box-shadow:none; animation:none;
}

/* Static React layout helpers. Runtime geometry and art remain inline. */
.nyx-screen{ position:absolute; inset:0; display:flex; flex-direction:column; }
.gp-more-favs{ display:flex; align-items:center; justify-content:center; gap:var(--nyx-space-12); }
.gp-switcher-strip{ display:flex; align-items:center; gap:var(--gp-switcher-gap,var(--nyx-space-14)); }
.gp-row-stack{ display:flex; flex-direction:column; gap:var(--nyx-space-4); }
.gp-fn-tabs{ display:flex; align-items:center; gap:var(--nyx-space-16); }
.gp-codes-stack{ display:flex; flex-direction:column; gap:var(--gp-codes-gap,var(--nyx-space-10)); }
.gp-fav-icon--sim{ --el:var(--nyx-color-sim-element); }
.all-codes-view{ min-width:0; min-height:0; display:flex; flex-direction:column; }
.all-codes-head{ display:flex; align-items:center; gap:var(--nyx-space-14); }
.gp-codes-scroll.all-codes-list{ flex:1; min-height:0; margin-top:var(--nyx-space-16); gap:var(--nyx-space-24); }

/* Cross-game pull overview now uses the same title, card, chip, and spacing language. */
.pulls-overview{ padding:var(--nyx-space-8) var(--nyx-space-4) var(--nyx-space-24); }
.pulls-overview-title{ margin-bottom:var(--nyx-space-4); }
.pulls-overview-subtitle{ margin-bottom:var(--nyx-space-18); color:var(--nyx-color-text-muted); font:var(--nyx-compat-font-985e2e8b9ea7); }
.pulls-overview-loading{ color:var(--nyx-color-text-muted); font-family:var(--nyx-font-ui); }
.pulls-overview-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(248px,1fr)); gap:var(--nyx-space-14); }
.pulls-overview-card{ display:flex; flex-direction:column; gap:var(--nyx-space-10); padding:var(--nyx-space-16); }
.pulls-overview-card.is-empty{ opacity:.72; }
.pulls-overview-game{ border-left:3px solid var(--pull-accent); padding-left:var(--nyx-space-10); color:var(--nyx-color-heading); font:var(--nyx-compat-font-3d7a495e54b8); letter-spacing:var(--nyx-compat-tracking-p03em); }
.pulls-overview-pity{ display:flex; align-items:baseline; gap:var(--nyx-space-8); }
.pulls-overview-pity b{ color:var(--nyx-color-text-max); font:var(--nyx-compat-font-70d8b173be8b); }
.pulls-overview-pity > i{ color:var(--nyx-color-text-faint); font:var(--nyx-compat-font-8f9db28e304f); }
.pulls-overview-guaranteed{ margin-left:auto; }
.pulls-overview-progress{ height:7px; overflow:hidden; border-radius:var(--nyx-radius-small); background:var(--nyx-color-border-subtle); }
.pulls-overview-progress i{ display:block; width:var(--pull-progress); height:100%; background:linear-gradient(90deg,var(--nyx-color-accent-bright),var(--pull-accent)); }
.pulls-overview-stats{ display:flex; justify-content:space-between; color:var(--nyx-color-text-muted); font:var(--nyx-compat-font-e57c3adc85a4); }
.pulls-overview-last{ display:flex; align-items:center; gap:var(--nyx-space-10); margin-top:var(--nyx-space-2); color:var(--nyx-color-text-soft); font:var(--nyx-compat-font-e57c3adc85a4); }
.pulls-overview-last img,.pulls-overview-avatar-fallback{ width:30px; height:30px; flex:0 0 auto; border-radius:var(--nyx-radius-circle); background:var(--nyx-color-chip-surface); object-fit:cover; }
.pulls-overview-avatar-fallback{ background:linear-gradient(135deg,var(--nyx-color-warning),var(--nyx-color-surface-raised)); }
.pulls-overview-last i{ color:var(--nyx-color-text-faint); font-style:normal; }
.pulls-overview-empty{ color:var(--nyx-color-text-faint); font:var(--nyx-compat-font-acd193eb0c56); }

/* ============================================================
   Canonical TAB style (user 2026-07-16): quiet spaced caps; the
   active tab turns white above an underline rail with the Nyx
   logo straddling it, integrated like the item-frame emblem.
   :nth-child(n) lifts specificity above the shared contracts.
   ============================================================ */
:is(.cm-tabs .gp-section-nav-button, .cm-character-tabs button, .gt-mode-tabs button, .gt-import-tab, .db-tabs button,
  .wonder-tabs button, .tcg-tabs button, .pot-tabs button):nth-child(n){
  position:relative; appearance:none; display:inline-flex; align-items:center; justify-content:center;
  /* Tightened 2026-08-09: the tab used to be 18px wider than its word on each
     side, so the underline glow read as a bar floating well past the text and
     the tabs sat far apart. Padding now hugs the label and the rail sits just
     under it. */
  min-height:32px; width:auto; border:0; border-radius:0; clip-path:none; overflow:visible;
  padding:var(--nyx-space-4) var(--nyx-space-10) var(--nyx-space-8); margin:0;
  background:transparent; box-shadow:none; cursor:pointer;
  color:var(--nyx-color-text-faint); font-family:var(--nyx-font-display);
  font-size:var(--nyx-type-small); font-weight:var(--nyx-weight-regular);
  letter-spacing:.18em; text-transform:uppercase; line-height:1.2; text-align:center;
  transition:color .18s ease, text-shadow .18s ease;
}
:is(.cm-tabs .gp-section-nav-button, .cm-character-tabs button, .gt-mode-tabs button, .gt-import-tab, .db-tabs button,
  .wonder-tabs button, .tcg-tabs button, .pot-tabs button):nth-child(n):hover,
:is(.cm-tabs .gp-section-nav-button, .cm-character-tabs button, .gt-mode-tabs button, .gt-import-tab, .db-tabs button,
  .wonder-tabs button, .tcg-tabs button, .pot-tabs button):nth-child(n):focus-visible{
  color:var(--nyx-color-text-soft); background:transparent; box-shadow:none; transform:none; outline:none;
}
:is(.cm-tabs .gp-section-nav-button.on, .cm-character-tabs button.on, .gt-mode-tabs button.on, .gt-import-tab.on, .db-tabs button.on,
  .wonder-tabs button.on, .tcg-tabs button.on, .pot-tabs button.on):nth-child(n){
  z-index:2; color:var(--nyx-color-text-max); background:transparent;
  text-shadow:0 0 8px rgba(183,170,255,.35); box-shadow:none;
}
/* underline rail */
:is(.cm-tabs .gp-section-nav-button.on, .cm-character-tabs button.on, .gt-mode-tabs button.on, .gt-import-tab.on, .db-tabs button.on,
  .wonder-tabs button.on, .tcg-tabs button.on, .pot-tabs button.on):nth-child(n)::after{
  content:""; position:absolute; left:var(--nyx-space-4); right:var(--nyx-space-4); bottom:2px; height:2px;
  border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--nyx-color-accent-bright) 22%,
    var(--nyx-color-accent-bright) 78%, transparent);
  box-shadow:0 0 10px rgba(139,123,255,.75), 0 0 20px rgba(139,123,255,.35);
}
/* The emblem that straddled the old rail was removed 2026-08-08; the
   underline above is the whole indicator now. */
/* tab-group housekeeping: no leftover markers, bars must not clip the emblem */
.cm-tabs .gp-section-nav-button .dia, .cm-tabs .gp-section-nav-button .go{ display:none; }
.cm-tabs, .cm-character-tabs, .db-tabs, .wonder-tabs, .tcg-tabs, .pot-tabs, .gt-mode-tabs{ overflow:visible; padding-bottom:var(--nyx-space-4); }
/* Back / Customize sit in the same bar as quiet siblings */
:is(.cm-character-tabs .cm-detail-back):nth-child(n){ color:var(--nyx-color-text-soft); }

/* Special database views (TCG / Pot / Wonderland) have no page title; their
   search rows right-align to mirror the collection search position. */
.tcg-head,.pot-head,.wonder-head{ justify-content:flex-end; }
/* The favourites HIDE toggle and its Card/Icon siblings were removed
   2026-08-09 — pinned favourites are always icons, always shown. */

/* ===== overview board: one frame per column =============================
   Must live after the shared-surface block above — an :is() selector takes
   the specificity of its most specific argument, so a plain
   `.gp-ov-timers .gp-reset-panel` loses to it. */
/* Three classes deep to outrank the shared-surface :is() above. */
.gp-ov-side.gp-ov-timers .gp-reset-panel{ padding:0; background:none; box-shadow:none; border:0; border-radius:0; }

/* ZZZ splash art sits inside the card rather than filling it edge to edge, so
   a full-body agent render is not cropped to a torso. Zoomed slightly and
   anchored high so the face stays in frame (user 2026-08-11). */
.gp-ovb .gp-oban.is-contain-art .gp-oban-art{
  background-size:contain;
  background-repeat:no-repeat;
  background-position:50% 0%;
  transform:scale(1.2);
  transform-origin:50% 0%;
}
/* The "?" beside Endfield's loss pool. */
.gp-oban-supports-label{ display:inline-flex; align-items:center; gap:var(--nyx-space-6); }
.gp-oban-supports-help{
  width:16px; height:16px; flex:none; display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--nyx-compat-color-97cd05e0c6e8); border-radius:50%;
  background:var(--nyx-compat-color-e1b276e64ad6); color:var(--nyx-compat-color-hex-cfc4ff);
  font-family:var(--nyx-compat-family-bbbd64e38bdd); font-size:var(--nyx-type-caption); line-height:1;
  cursor:pointer; padding:0;
}
.gp-oban-supports-help:hover,
.gp-oban-supports-help:focus-visible{ color:var(--nyx-color-text-max); border-color:var(--nyx-compat-color-d489b77ef351); }
/* Loss-rate explainer overlay. */
.gp-ovb-modal{
  position:fixed; inset:0; z-index:80; display:flex; align-items:center; justify-content:center;
  padding:var(--nyx-space-20); background:var(--nyx-compat-color-9fa4120a9f58); backdrop-filter:blur(2px);
}
.gp-ovb-modal-box{
  position:relative; max-width:min(920px, 92vw); max-height:88vh; overflow:auto;
  padding:var(--nyx-space-12); border-radius:var(--nyx-radius-card);
  background:var(--nyx-color-surface); box-shadow:var(--nyx-compat-shadow-box-4f7cd9937d9b);
}
.gp-ovb-modal-box img{ display:block; max-width:100%; height:auto; border-radius:var(--nyx-radius-control); }
.gp-ovb-modal-close{
  position:absolute; top:var(--nyx-space-6); right:var(--nyx-space-8);
  width:28px; height:28px; border:0; border-radius:50%; cursor:pointer;
  background:var(--nyx-compat-color-e1b276e64ad6); color:var(--nyx-color-text-max); font-size:var(--nyx-type-body); line-height:1;
}