.gems-page { --rail-width:80px; --gems-brand-gradient:linear-gradient(110deg,var(--app-accent-cyan,#22d3ee),var(--app-accent-purple,#8b5cf6)); margin:0; color:var(--app-text); background:var(--app-bg); font-family:var(--font-ui); }
.gems-shell { display:flex; min-height:100dvh; }
.gems-main { position:relative; z-index:1; flex:1; min-width:0; max-width:1400px; margin:0 auto; padding:25px 36px 64px; box-sizing:border-box; }
.gems-main::before { content:''; position:absolute; z-index:-1; inset:0; pointer-events:none; background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--app-bg) 85%,transparent) 8%,color-mix(in srgb,var(--app-bg) 85%,transparent) 92%,transparent); }
.gems-page [hidden] { display:none; }
.gems-heading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); text-align:center; }
.gems-heading h1 { margin:0; color:var(--app-muted); font-size:1.1rem; font-weight:750; }
.gems-layout { display:grid; grid-template-columns:minmax(0,1fr) 254px; column-gap:36px; align-items:start; }
.gems-showcase { grid-column:1; min-width:0; position:relative; text-align:center; }
.gems-total { display:flex; align-items:center; flex-direction:column; min-width:0; container-type:inline-size; }
.gems-diamond { display:block; color:var(--app-accent-cyan); filter:drop-shadow(0 0 14px rgb(var(--app-accent-cyan-rgb) / 25%)); }
.gems-diamond .mathos-nav-symbol { width:52px; height:52px; display:block; color:var(--app-accent-cyan); }
.gems-balance { display:block; width:100%; margin-top:4px; color:var(--app-text); font-size:clamp(2rem,7vw,4.7rem); font-size:clamp(2rem,10cqi,4.7rem); font-variant-numeric:tabular-nums; line-height:1.06; letter-spacing:-.04em; font-weight:850; text-align:center; overflow-wrap:normal; }
.gems-rank-heading { display:flex; align-items:center; justify-content:center; gap:9px; margin-top:7px; }
.gems-main .gems-rank { margin:0; font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.1; font-weight:850; color:var(--app-brand-ink); }
.gems-badge { display:block; flex:none; object-fit:contain; filter:drop-shadow(0 1px 2px rgb(0 0 0 / 24%)); }
.gems-badge--hero { width:38px; height:42px; }
.gems-next { width:min(310px,82%); margin:12px auto 0; }
.gems-next p,.gems-complete { margin:0; font-size:.83rem; color:var(--app-muted); }
.gems-next progress { display:block; width:100%; height:7px; margin-top:9px; appearance:none; border:0; border-radius:10px; overflow:hidden; background:var(--app-border); color:var(--app-accent-cyan); }
.gems-next progress::-webkit-progress-bar { background:var(--app-border); }
.gems-next progress::-webkit-progress-value { background:linear-gradient(90deg,var(--app-accent-cyan),var(--app-brand-ink)); border-radius:10px; }
.gems-next progress::-moz-progress-bar { background:var(--app-accent-cyan); border-radius:10px; }
.gems-complete { margin-top:12px; }
.gems-character { position:relative; display:flex; justify-content:center; align-items:center; height:440px; margin:4px 0 0; isolation:isolate; }
.gems-character::before { content:''; position:absolute; z-index:-1; inset:8% 12% 0; background:radial-gradient(ellipse at 50% 75%,rgb(var(--app-accent-cyan-rgb) / 12%),transparent 65%); pointer-events:none; }
.gems-character picture { display:block; max-width:100%; width:430px; height:100%; }
.gems-character img { display:block; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 14px 22px rgb(0 0 0 / 16%)); }
.gems-character-caption { position:absolute; bottom:8px; max-width:calc(100% - 32px); padding:8px 14px; border:1px solid var(--app-border-strong); border-radius:10px; background:var(--app-surface); font-size:.8rem; color:var(--app-text); }
.gems-back-character { position:absolute; z-index:2; right:12px; bottom:12px; padding:8px 11px; border:1px solid var(--app-border-strong); border-radius:9px; color:var(--app-text); background:var(--app-surface); font:inherit; font-size:.75rem; cursor:pointer; }
.gems-collection { grid-column:2; grid-row:1 / span 4; padding-left:24px; border-left:1px solid var(--app-border); }
.gems-collection-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:17px; }
.gems-collection-heading h2 { min-width:0; font-size:1.25rem; line-height:1.2; color:var(--app-brand-ink); margin:0; font-weight:850; }
.gems-collection-heading > span { flex:none; font-size:.78rem; color:var(--app-muted); }
.gems-roster { display:grid; gap:10px; list-style:none; padding:0; margin:0; }
.gems-roster li { min-width:0; }
.gems-roster button { display:grid; grid-template-columns:66px minmax(0,1fr); grid-template-rows:auto auto; gap:0 12px; align-items:center; width:100%; min-height:79px; padding:6px; text-align:left; border:1px solid var(--app-border); border-radius:15px; background:color-mix(in srgb,var(--app-surface) 78%,transparent); color:var(--app-text); font:inherit; cursor:pointer; transition:border-color .18s,background .18s; }
.gems-roster button:hover { border-color:var(--app-brand-ink); background:var(--app-surface); }
.gems-roster button[aria-pressed=true] { border-color:var(--app-accent-cyan); box-shadow:0 0 0 1px var(--app-accent-cyan); }
.gems-portrait-wrap { position:relative; width:66px; height:66px; grid-row:1 / span 2; }
.gems-portrait { display:block; overflow:hidden; width:100%; height:100%; border-radius:10px; background:color-mix(in srgb,var(--app-brand-ink) 10%,var(--app-surface)); }
.gems-portrait img { display:block; width:100%; height:100%; object-fit:cover; }
.gems-badge--card { position:absolute; right:-4px; bottom:-4px; width:26px; height:30px; }
.gems-lock { position:absolute; top:-3px; right:-3px; display:grid; place-items:center; box-sizing:border-box; width:23px; height:23px; border:1px solid var(--app-border-strong); border-radius:7px; color:var(--app-text); background:var(--app-surface); box-shadow:0 1px 3px rgb(0 0 0 / 20%); }
.gems-lock svg { display:block; width:15px; height:15px; }
.gems-roster-copy { display:flex; flex-direction:column; gap:4px; min-width:0; align-self:end; }
.gems-roster-copy strong { align-self:flex-start; max-width:100%; font-size:1.2rem; line-height:1.15; font-weight:800; }
.gems-roster-copy > span { font-size:.75rem; color:var(--app-muted); font-variant-numeric:tabular-nums; }
.gems-roster-state { grid-column:2; align-self:start; font-size:.63rem; color:var(--app-muted); margin-top:4px; }
.gems-roster .is-current .gems-roster-state { color:var(--app-accent-cyan); font-weight:700; }
.gems-roster .is-locked .gems-portrait img { filter:grayscale(.8); opacity:.6; }
.gems-roster .is-locked:hover .gems-portrait img,.gems-roster .is-locked[aria-pressed=true] .gems-portrait img { filter:grayscale(.35); opacity:.85; }
.gems-week { grid-column:1; padding:22px 0 23px; border-top:1px solid var(--app-border); }
.gems-section-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.gems-week h2 { margin:0; font-size:1.05rem; font-weight:850; }
.gems-muted { color:var(--app-muted); }
.gems-week-meta { display:flex; align-items:center; flex-wrap:wrap; gap:8px 15px; margin:8px 0 20px; font-size:.78rem; }
.gems-week-meta p { margin:0; }
.gems-week-meta > .gems-muted { margin-left:auto; font-size:.73rem; }
.gems-week-count { display:flex; gap:5px; align-items:center; }
.gems-week-count strong { color:var(--app-brand-ink); }
.gems-worked { color:var(--app-muted); padding:4px 7px; border-radius:6px; }
.gems-worked.has-work { color:var(--app-brand-ink); background:color-mix(in srgb,var(--app-brand-ink) 9%,transparent); }
.gems-tiers { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; padding:0; margin:0; list-style:none; }
.gems-tiers li { position:relative; display:grid; justify-items:center; gap:6px; min-width:0; }
.gems-tiers li:not(:last-child)::after { content:''; position:absolute; z-index:-1; height:2px; top:18px; left:calc(50% + 21px); right:calc(-50% + 13px); background:color-mix(in srgb,var(--app-muted) 48%,var(--app-surface)); }
.gems-day-marker { display:grid; place-items:center; box-sizing:border-box; width:38px; height:38px; border:1px solid color-mix(in srgb,var(--app-muted) 60%,var(--app-surface)); border-radius:50%; background:var(--app-surface); color:var(--app-muted); }
.gems-day-marker svg { width:23px; height:23px; }
.gems-day-label { color:var(--app-muted); font-size:.77rem; font-weight:700; }
.gems-tiers strong { font-size:.78rem; font-weight:700; color:var(--app-muted); font-variant-numeric:tabular-nums; white-space:nowrap; }
.gems-amount-short { display:none; }
.gems-tiers .is-earned .gems-day-marker { color:var(--app-accent-cyan); border-color:var(--app-accent-cyan); background:color-mix(in srgb,var(--app-accent-cyan) 15%,var(--app-surface)); }
.gems-tiers .is-earned :is(.gems-day-label,strong) { color:var(--app-accent-cyan); }
.gems-help { position:relative; flex:0 0 auto; font-size:.74rem; }
.gems-help summary { display:flex; align-items:center; min-height:36px; color:var(--app-muted); text-decoration:underline; text-underline-offset:4px; cursor:pointer; list-style:none; }
.gems-help summary::-webkit-details-marker { display:none; }
.gems-help[open] summary { color:var(--app-text); }
.gems-help-content { position:absolute; z-index:4; top:calc(100% + 6px); right:0; width:300px; box-sizing:border-box; padding:18px; border:1px solid var(--app-border-strong); border-radius:16px; background:var(--app-surface); box-shadow:var(--app-shadow); color:var(--app-text); font-size:.84rem; line-height:1.6; }
.gems-help-content p { margin:0; }
.gems-help-content p + p { margin-top:10px; color:var(--app-muted); }
.gems-actions { grid-column:1; text-align:center; }
.gems-return { display:inline-flex; align-items:center; justify-content:center; gap:16px; min-height:48px; box-sizing:border-box; padding:12px 25px; border:1px solid var(--app-border-strong); border-radius:13px; color:var(--app-text); background:var(--app-surface); text-decoration:none; font:inherit; font-size:.9rem; font-weight:750; cursor:pointer; }
.gems-return--primary { background:var(--gems-brand-gradient); border-color:var(--app-accent-purple,#8b5cf6); color:#071426; font-size:1.2rem; font-weight:800; box-shadow:inset 0 1px 0 rgb(255 255 255 / 30%),inset 0 -2px 0 rgb(42 15 105 / 17%); }
.gems-return:hover { filter:brightness(1.1); }
.gems-history { grid-column:1; margin:22px 0 0; }
.gems-history > summary { color:var(--app-muted); font-size:.8rem; width:fit-content; padding:8px 0; cursor:pointer; }
.gems-gains { list-style:none; padding:0; margin:8px 0 0; }
.gems-gains li { display:flex; align-items:center; justify-content:space-between; gap:16px; padding:14px 0; border-bottom:1px solid var(--app-border); font-size:.85rem; }
.gems-gains time { display:block; margin-top:5px; font-size:.73rem; color:var(--app-muted); }
.gems-gains strong { color:var(--app-accent-cyan); white-space:nowrap; font-size:.8rem; }
.gems-empty { color:var(--app-muted); font-size:.85rem; }
.gems-error { padding:24px; border:1px solid var(--app-border); border-radius:20px; background:var(--app-surface); }
.gems-page :is(a,button,summary):focus-visible { outline:3px solid var(--app-accent-cyan); outline-offset:4px; }
.gems-skip { position:fixed; top:-100px; z-index:1000; padding:12px; background:var(--app-surface); color:var(--app-text); }
.gems-skip:focus { top:12px; left:100px; }
.gems-sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
@supports (background-clip:text) or (-webkit-background-clip:text) {
  .gems-page .gems-brand-text { background:var(--gems-brand-gradient); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
}
@media (max-width:1050px) {
  .gems-main { padding:22px 24px 72px; }
  .gems-layout { grid-template-columns:minmax(0,1fr) 220px; column-gap:24px; }
  .gems-heading { width:calc(100% - 244px); }
  .gems-collection { padding-left:18px; }
  .gems-roster button { grid-template-columns:54px minmax(0,1fr); gap:0 9px; }
  .gems-portrait-wrap { width:54px; height:66px; }
  .gems-amount-full { display:none; }
  .gems-amount-short { display:inline; }
}
@media (max-width:760px) {
  .gems-main { padding:20px 20px 98px; }
  .gems-heading { position:static; width:auto; height:auto; overflow:visible; clip-path:none; margin-bottom:12px; }
  .gems-heading h1 { font-size:1.35rem; color:var(--app-brand-ink); font-weight:850; }
  .gems-layout { display:flex; flex-direction:column; gap:0; }
  .gems-layout > * { width:100%; box-sizing:border-box; }
  .gems-diamond .mathos-nav-symbol { width:38px; height:38px; }
  .gems-balance { font-size:clamp(2rem,11cqi,3.5rem); margin-top:4px; }
  .gems-rank-heading { gap:7px; margin-top:6px; }
  .gems-main .gems-rank { font-size:1.5rem; }
  .gems-badge--hero { width:28px; height:32px; }
  .gems-next { margin-top:8px; width:min(240px,80%); }
  .gems-next p,.gems-complete { font-size:.75rem; }
  .gems-character { height:280px; margin-top:3px; }
  .gems-character picture { width:100%; }
  .gems-character img { mask-image:linear-gradient(to bottom,#000 88%,transparent); }
  .gems-character-caption { font-size:.72rem; bottom:20px; }
  .gems-back-character { position:static; margin:2px auto 10px; font-size:.75rem; }
  .gems-collection { padding:8px 0 17px; border-left:0; }
  .gems-collection-heading { margin-bottom:12px; }
  .gems-collection-heading h2 { font-size:1.2rem; font-weight:850; color:var(--app-text); }
  .gems-roster { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
  .gems-roster button { display:flex; flex-direction:column; gap:4px; min-height:66px; padding:2px 0 3px; border-radius:14px; border-color:transparent; background:none; }
  .gems-roster button[aria-pressed=true] { border-color:var(--app-accent-cyan); box-shadow:none; }
  .gems-portrait-wrap { width:100%; height:auto; padding-bottom:29px; }
  .gems-portrait { width:100%; height:auto; aspect-ratio:1; border-radius:50%; }
  .gems-badge--card { right:50%; bottom:0; width:22px; height:26px; transform:translateX(50%); }
  .gems-lock { top:-3px; right:-2px; width:18px; height:18px; border-radius:5px; }
  .gems-lock svg { width:12px; height:12px; }
  .gems-roster-copy,.gems-roster-state { display:none; }
  .gems-roster .is-current { background:color-mix(in srgb,var(--app-accent-cyan) 15%,transparent); }
  .gems-week { padding:15px 0 20px; }
  .gems-week h2 { font-size:1rem; }
  .gems-help { font-size:.7rem; }
  .gems-help-content { width:min(300px,calc(100vw - 52px)); }
  .gems-week-meta { gap:6px 9px; margin:4px 0 16px; font-size:.72rem; }
  .gems-week-meta > .gems-muted { width:100%; margin-left:0; font-size:.68rem; }
  .gems-tiers { gap:5px; }
  .gems-day-marker { width:30px; height:30px; }
  .gems-day-marker svg { width:21px; height:21px; }
  .gems-tiers li:not(:last-child)::after { top:14px; left:calc(50% + 17px); right:calc(-50% + 12px); }
  .gems-day-label { font-size:.72rem; }
  .gems-tiers strong { font-size:.68rem; }
  .gems-return--primary { display:flex; width:100%; gap:10px; padding-inline:14px; }
  .gems-history { margin-top:14px; }
  .gems-gains li { font-size:.8rem; }
  .gems-gains strong { font-size:.75rem; }
}
@media (prefers-reduced-motion:reduce) { .gems-roster button { transition:none; } }
@media (forced-colors:active) {
  .gems-page .gems-brand-text { background:none; -webkit-text-fill-color:CanvasText; color:CanvasText; }
  .gems-return--primary { background:ButtonFace; color:ButtonText; border-color:ButtonText; }
  .gems-lock { color:CanvasText; background:Canvas; border-color:CanvasText; }
  .gems-roster button[aria-pressed=true] { outline:2px solid Highlight; }
}