/* ════════════════════════════════════════════════════════════════════
   SymposiON · Ναὸς τῶν Μουσῶν (Temple of the Muses) — player styles.
   Ported from the design-handoff prototype styles.css. EVERY selector is
   scoped under .t-root so the prototype's generic class names
   (.btn .tab .panel .grid .stat .hud .pill …) cannot leak into the rest
   of the site. Colours resolve to the live --sym-* theme tokens, which
   RT.apply() re-writes per equipped palette on the .t-frame element.
   ════════════════════════════════════════════════════════════════════ */

/* fonts (scoped) */
.t-root{
  --t-display:'Cinzel', 'Cormorant Garamond', serif;
  --t-serif:'Cormorant Garamond', Georgia, serif;
  --t-sans:'Inter', system-ui, sans-serif;
  --t-mono:'JetBrains Mono', ui-monospace, monospace;
}

/* obsidian fallback tokens (RT.apply overrides these per-frame) */
.t-root .t-frame{
  --sym-bg:#0D0B09; --sym-bg-card:#181412; --sym-bg-raise:#201D1A;
  --sym-ink:#0D0B09; --sym-fg:#EFE9DC; --sym-fg-muted:#7C6F58;
  --sym-gold:#C87830; --sym-gold-lt:#E09E52; --sym-gold-dk:#9C5E1C;
  --sym-terra:#D96B30; --sym-accent:#C87830; --sym-accent2:#D96B30;
  --sym-hairline:color-mix(in srgb,#C87830 18%,transparent);
  --tint:var(--sym-gold);
  --hair:var(--sym-hairline);
  --gold-grad:linear-gradient(135deg,var(--sym-gold-lt) 0%,var(--sym-gold) 46%,var(--sym-gold-dk) 100%);
  --d:1;
}
.t-root .t-frame.is-light{ --hair:color-mix(in srgb,var(--sym-accent) 16%,transparent); }
.t-root *{ box-sizing:border-box; }

/* ════════════════ FRAME ════════════════ */
.t-root .t-frame{
  position:relative; width:100%; min-height:640px; height:100%; overflow:hidden;
  background:var(--sym-bg); color:var(--sym-fg);
  font-family:var(--t-sans); -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column;
  --sym-glow:radial-gradient(ellipse 80% 56% at 50% -12%,color-mix(in srgb,var(--sym-gold) 11%,transparent),transparent 60%),
             radial-gradient(ellipse 60% 50% at 100% 106%,color-mix(in srgb,var(--sym-accent2) 9%,transparent),transparent 55%);
}
.t-root .t-frame::before{
  content:""; position:absolute; inset:0; background:var(--sym-glow); pointer-events:none; z-index:0;
}

/* ── ambient layer ── */
.t-root .t-amb{ position:absolute; inset:0; pointer-events:none; z-index:0; overflow:hidden; color:var(--tint); }
.t-root .t-amb .t-ritual{ position:absolute; width:min(120%,860px); aspect-ratio:1; }
.t-root .t-ritual{ display:block; }
.t-root .t-embers{ position:absolute; inset:0; color:var(--tint); }
.t-root .t-embers span{ position:absolute; bottom:-6%; border-radius:50%;
  background:radial-gradient(circle,currentColor,transparent 70%);
  box-shadow:0 0 6px 1px color-mix(in srgb,currentColor 60%,transparent); }
.t-root .amb-frieze{ position:absolute; inset:0;
  background:repeating-linear-gradient(90deg,transparent 0 38px,color-mix(in srgb,var(--tint) 4%,transparent) 38px 39px),
            repeating-linear-gradient(0deg,transparent 0 38px,color-mix(in srgb,var(--tint) 3%,transparent) 38px 39px);
  -webkit-mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%);
          mask-image:radial-gradient(ellipse 70% 70% at 50% 40%,#000,transparent 75%); }
.t-root .amb-aether{ position:absolute; inset:0;
  background:radial-gradient(circle at 30% 20%,color-mix(in srgb,var(--sym-accent2) 18%,transparent),transparent 45%),
            radial-gradient(circle at 75% 70%,color-mix(in srgb,var(--tint) 12%,transparent),transparent 50%); }

@keyframes t-spin{ to{ transform:rotate(360deg);} }
@keyframes t-spin-rev{ to{ transform:rotate(-360deg);} }
@keyframes t-rise{
  0%{ transform:translate(0,0) scale(1); opacity:0; }
  12%{ opacity:var(--o,.6); }
  100%{ transform:translate(var(--drift,0),-115vh) scale(.4); opacity:0; }
}
@keyframes t-glow{ 0%,100%{ opacity:.55; } 50%{ opacity:1; } }
@keyframes t-pop{ 0%{ transform:scale(.4); opacity:0; } 60%{ transform:scale(1.12); } 100%{ transform:scale(1); opacity:1; } }
@keyframes t-toast-in{ 0%{ transform:translateY(14px); opacity:0; } 100%{ transform:translateY(0); opacity:1; } }
@keyframes t-sheen{ 0%{ background-position:-160% 0; } 100%{ background-position:260% 0; } }

@media (prefers-reduced-motion: reduce){
  .t-root .t-ritual g, .t-root .t-embers span{ animation:none !important; }
}

/* content scroll region inside a frame */
.t-root .t-scroll{ position:relative; z-index:1; flex:1; min-height:0; overflow-y:auto; }
.t-root .t-scroll::-webkit-scrollbar{ width:0; height:0; }
.t-root .t-pad{ padding:calc(22px * var(--d)) calc(24px * var(--d)) calc(40px * var(--d)); }

/* ════════════════ TYPE ════════════════ */
.t-root .gk{ font-family:var(--t-display); font-weight:600; letter-spacing:.3px; }
.t-root .t-lore{ font-family:var(--t-serif); font-size:13.5px; line-height:1.45; font-style:italic;
  color:color-mix(in srgb,var(--sym-fg) 58%,transparent); }

/* ════════════════ KLEOS HUD CHIP ════════════════ */
.t-root .hud{ display:inline-flex; align-items:center; gap:10px; padding:7px 14px 7px 9px;
  border:1px solid color-mix(in srgb,var(--tint) 34%,transparent);
  background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 10%,var(--sym-bg-card)),var(--sym-bg-card));
  position:relative; overflow:hidden; }
.t-root .hud::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 38%,color-mix(in srgb,var(--sym-gold-lt) 40%,transparent) 50%,transparent 62%);
  background-size:220% 100%; animation:t-sheen 7s ease-in-out infinite; opacity:.5; }
.t-root .hud .sig{ width:30px; height:30px; flex:none; color:var(--tint); display:flex; align-items:center; justify-content:center;
  filter:drop-shadow(0 0 5px color-mix(in srgb,var(--tint) 45%,transparent)); }
.t-root .hud .sig .t-glyph{ width:100%; height:100%; }
.t-root .hud .amt{ display:flex; flex-direction:column; line-height:1; gap:3px; }
.t-root .hud .amt b{ font-family:var(--t-serif); font-weight:600; font-size:20px; color:var(--sym-fg);
  font-variant-numeric:tabular-nums; letter-spacing:.2px; }
.t-root .hud .amt span{ font-family:var(--t-mono); font-size:7.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--sym-fg-muted); }
.t-root .hud.lg .sig{ width:38px; height:38px; }
.t-root .hud.lg .amt b{ font-size:27px; }

/* ════════════════ SECTION HEADER ════════════════ */
.t-root .sec-head{ display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.t-root .sec-head .si{ width:26px; height:26px; flex:none; color:var(--tint); display:flex; align-items:center; justify-content:center;
  border:1px solid color-mix(in srgb,var(--tint) 36%,transparent); }
.t-root .sec-head .si .t-glyph{ width:58%; height:58%; }
.t-root .sec-head h3{ margin:0; font-family:var(--t-display); font-weight:600; font-size:16px; letter-spacing:.4px; color:var(--sym-fg); }
.t-root .sec-head .en{ font-family:var(--t-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--sym-fg-muted); }
.t-root .sec-head::after{ content:""; flex:1; height:1px; background:var(--hair); }
.t-root .sec-head .cnt{ font-family:var(--t-mono); font-size:9px; color:var(--sym-fg-muted); }

/* ════════════════ CARD GRID ════════════════ */
.t-root .grid{ display:grid; gap:calc(12px * var(--d)); }
.t-root .grid.c2{ grid-template-columns:repeat(2,1fr); }
.t-root .grid.c3{ grid-template-columns:repeat(3,1fr); }
.t-root .grid.c1{ grid-template-columns:1fr; }

/* ── COSMETIC CARD ── */
.t-root .cos{ position:relative; background:var(--sym-bg-card); border:1px solid color-mix(in srgb,var(--tint) 20%,transparent);
  display:flex; flex-direction:column; overflow:hidden; transition:transform .3s cubic-bezier(.16,1,.3,1),border-color .25s,box-shadow .25s; }
.t-root .cos:hover{ transform:translateY(-3px); border-color:color-mix(in srgb,var(--tint) 50%,transparent);
  box-shadow:0 14px 30px color-mix(in srgb,var(--tint) 16%,transparent); }
.t-root .cos.eq{ border-color:var(--tint); box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--tint) 40%,transparent); }
.t-root .cos-preview{ height:84px; position:relative; overflow:hidden; border-bottom:1px solid color-mix(in srgb,var(--tint) 14%,transparent);
  display:flex; align-items:center; justify-content:center; }
.t-root .cos-swatch{ position:absolute; inset:0; }
.t-root .cos-preview .pv-glyph{ width:42px; height:42px; color:var(--sym-fg); position:relative; z-index:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.t-root .cos-preview .pv-glyph .t-glyph{ width:100%; height:100%; }
.t-root .cos-body{ padding:calc(13px * var(--d)) 14px 0; flex:1; }
.t-root .cos-body h4{ margin:0; font-family:var(--t-display); font-weight:600; font-size:15.5px; letter-spacing:.2px; line-height:1.1; }
.t-root .cos-body .en{ font-family:var(--t-serif); font-style:italic; font-size:12.5px; color:color-mix(in srgb,var(--tint) 72%,var(--sym-fg) 28%); margin-top:1px; }
.t-root .cos-body .lore{ margin:8px 0 0; font-family:var(--t-serif); font-style:italic; font-size:12.5px; line-height:1.4;
  color:color-mix(in srgb,var(--sym-fg) 56%,transparent); }
.t-root .cos-foot{ padding:calc(11px * var(--d)) 14px calc(13px * var(--d)); margin-top:10px; }

/* slot tag */
.t-root .slot-tag{ position:absolute; top:9px; left:9px; z-index:2; font-family:var(--t-mono); font-size:7.5px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--sym-fg); background:color-mix(in srgb,#000 45%,transparent);
  border:1px solid color-mix(in srgb,var(--tint) 30%,transparent); padding:3px 6px; backdrop-filter:blur(3px); }

/* ── controls ── */
.t-root .btn{ appearance:none; cursor:pointer; font-family:var(--t-mono); font-size:9.5px; letter-spacing:1.6px; text-transform:uppercase;
  font-weight:600; padding:10px 12px; border:1px solid color-mix(in srgb,var(--tint) 36%,transparent);
  background:transparent; color:var(--tint); display:inline-flex; align-items:center; justify-content:center; gap:7px;
  width:100%; transition:background .2s,border-color .2s,color .2s,transform .1s; }
.t-root .btn:hover{ background:color-mix(in srgb,var(--tint) 14%,transparent); }
.t-root .btn:active{ transform:translateY(1px); }
.t-root .btn.solid{ background:var(--gold-grad); color:var(--sym-ink); border-color:transparent; }
.t-root .btn.solid:hover{ filter:brightness(1.06); background:var(--gold-grad); }
.t-root .btn:disabled{ cursor:not-allowed; opacity:.4; }
.t-root .btn .kx{ width:13px; height:13px; }
.t-root .btn .kx .t-glyph{ width:100%; height:100%; }
.t-root .btn.ghost{ border-color:var(--hair); color:var(--sym-fg-muted); }
.t-root .btn.ghost:hover{ color:var(--sym-fg); border-color:color-mix(in srgb,var(--tint) 40%,transparent); background:transparent; }

.t-root .pill{ font-family:var(--t-mono); font-size:9px; letter-spacing:1.6px; text-transform:uppercase; font-weight:600;
  padding:8px 12px; display:flex; align-items:center; justify-content:center; gap:7px; width:100%; }
.t-root .pill.equipped{ color:var(--tint); border:1px solid var(--tint);
  background:color-mix(in srgb,var(--tint) 12%,transparent); }
.t-root .pill.equipped::before{ content:""; width:5px; height:5px; background:var(--tint); transform:rotate(45deg); }
.t-root .pill.locked{ color:var(--sym-fg-muted); border:1px dashed var(--hair); background:transparent; }

.t-root .price{ display:inline-flex; align-items:center; gap:6px; font-family:var(--t-serif); font-weight:600; font-size:15px;
  color:var(--sym-gold-lt); font-variant-numeric:tabular-nums; }
.t-root .price .kx{ width:14px; height:14px; color:var(--tint); }
.t-root .price .kx .t-glyph{ width:100%; height:100%; }

/* ════════════════ BOON CARD ════════════════ */
.t-root .boon{ position:relative; background:var(--sym-bg-card); border:1px solid color-mix(in srgb,var(--tint) 20%,transparent);
  padding:calc(14px * var(--d)) 15px; display:flex; flex-direction:column; gap:10px; transition:border-color .25s,transform .25s,box-shadow .25s; }
.t-root .boon:hover{ transform:translateY(-2px); border-color:color-mix(in srgb,var(--tint) 46%,transparent);
  box-shadow:0 12px 26px color-mix(in srgb,var(--tint) 14%,transparent); }
.t-root .boon.slotted{ border-color:var(--tint); background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 8%,var(--sym-bg-card)),var(--sym-bg-card)); }
.t-root .boon-top{ display:flex; align-items:flex-start; gap:12px; }
.t-root .boon-ic{ width:42px; height:42px; flex:none; color:var(--tint); border:1px solid color-mix(in srgb,var(--tint) 30%,transparent);
  background:color-mix(in srgb,var(--tint) 9%,transparent); display:flex; align-items:center; justify-content:center; }
.t-root .boon-ic .t-glyph{ width:60%; height:60%; }
.t-root .boon h4{ margin:0; font-family:var(--t-display); font-weight:600; font-size:15.5px; letter-spacing:.2px; line-height:1.1; }
.t-root .boon .en{ font-family:var(--t-serif); font-style:italic; font-size:12px; color:color-mix(in srgb,var(--tint) 70%,var(--sym-fg) 30%); }
.t-root .boon .eff{ font-size:11.5px; line-height:1.5; color:color-mix(in srgb,var(--sym-fg) 60%,transparent); }
.t-root .boon-foot{ display:flex; align-items:center; gap:10px; }
.t-root .boon-foot .btn,.t-root .boon-foot .pill{ width:auto; flex:1; }

/* loadout meter */
.t-root .loadout-meter{ display:flex; align-items:center; gap:8px; font-family:var(--t-mono); font-size:9px; letter-spacing:1.6px;
  text-transform:uppercase; color:var(--sym-fg-muted); }
.t-root .loadout-slots{ display:flex; gap:5px; }
.t-root .loadout-slots i{ width:9px; height:9px; transform:rotate(45deg); border:1px solid color-mix(in srgb,var(--tint) 50%,transparent); }
.t-root .loadout-slots i.fill{ background:var(--tint); }

/* consumable charge */
.t-root .charge{ display:flex; align-items:center; gap:13px; padding:calc(12px * var(--d)) 14px; background:var(--sym-bg-card);
  border:1px solid color-mix(in srgb,var(--tint) 18%,transparent); }
.t-root .charge .boon-ic{ width:38px; height:38px; }
.t-root .charge-main{ flex:1; min-width:0; }
.t-root .charge-main h4{ margin:0; font-family:var(--t-display); font-weight:600; font-size:14px; line-height:1.1; }
.t-root .charge-main .eff{ font-size:11px; color:color-mix(in srgb,var(--sym-fg) 55%,transparent); margin-top:2px; }
.t-root .charge-have{ display:flex; align-items:center; gap:7px; font-family:var(--t-mono); font-size:9px; letter-spacing:1.4px;
  text-transform:uppercase; color:var(--sym-fg-muted); }
.t-root .charge-have b{ font-family:var(--t-serif); font-style:normal; font-size:20px; color:var(--tint); line-height:1; font-variant-numeric:tabular-nums; }
.t-root .charge-buy{ display:flex; flex-direction:column; gap:6px; align-items:flex-end; flex:none; }
.t-root .mini-btn{ appearance:none; cursor:pointer; font-family:var(--t-mono); font-size:8.5px; letter-spacing:1.3px; text-transform:uppercase;
  font-weight:600; padding:7px 10px; border:1px solid color-mix(in srgb,var(--tint) 34%,transparent); background:transparent;
  color:var(--tint); white-space:nowrap; transition:background .2s; }
.t-root .mini-btn:hover{ background:color-mix(in srgb,var(--tint) 14%,transparent); }
.t-root .mini-btn:disabled{ opacity:.4; cursor:not-allowed; }
.t-root .mini-btn.use{ border-style:dashed; color:var(--sym-fg-muted); }
.t-root .mini-btn.use:hover{ color:var(--sym-fg); }

/* ════════════════ QUEST CARD ════════════════ */
.t-root .quest{ position:relative; background:var(--sym-bg-card); border:1px solid color-mix(in srgb,var(--tint) 18%,transparent);
  padding:calc(13px * var(--d)) 15px; display:flex; align-items:center; gap:14px; transition:border-color .25s; }
.t-root .quest:hover{ border-color:color-mix(in srgb,var(--tint) 40%,transparent); }
.t-root .quest.done{ border-color:color-mix(in srgb,var(--tint) 55%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 7%,var(--sym-bg-card)),var(--sym-bg-card)); }
.t-root .quest.claimed{ opacity:.55; }
.t-root .q-ic{ width:36px; height:36px; flex:none; color:var(--tint); border:1px solid color-mix(in srgb,var(--tint) 28%,transparent);
  background:color-mix(in srgb,var(--tint) 8%,transparent); display:flex; align-items:center; justify-content:center; }
.t-root .q-ic .t-glyph{ width:58%; height:58%; }
.t-root .q-main{ flex:1; min-width:0; }
.t-root .q-top{ display:flex; align-items:baseline; gap:8px; }
.t-root .q-top h4{ margin:0; font-family:var(--t-display); font-weight:600; font-size:14.5px; line-height:1.1; }
.t-root .q-rew{ margin-left:auto; font-family:var(--t-mono); font-size:9px; letter-spacing:1px; color:var(--sym-fg-muted); display:flex; align-items:center; gap:4px; white-space:nowrap; }
.t-root .q-rew .kx{ width:11px; height:11px; color:var(--tint); }
.t-root .q-rew .kx .t-glyph{ width:100%; height:100%; }
.t-root .q-rew b{ color:var(--sym-gold-lt); font-family:var(--t-serif); font-style:normal; font-size:13px; }

/* progress bar */
.t-root .pbar{ position:relative; height:5px; background:color-mix(in srgb,var(--sym-fg) 9%,transparent); margin-top:8px; overflow:hidden; }
.t-root .pbar i{ position:absolute; left:0; top:0; bottom:0; background:var(--gold-grad); transition:width .5s cubic-bezier(.16,1,.3,1); }
.t-root .pbar.full i{ box-shadow:0 0 8px color-mix(in srgb,var(--tint) 70%,transparent); }
.t-root .q-count{ font-family:var(--t-mono); font-size:9px; color:var(--sym-fg-muted); margin-top:5px; letter-spacing:1px; }
.t-root .q-count b{ color:var(--sym-fg); }
.t-root .q-claim{ flex:none; }

/* ════════════════ SAGA ════════════════ */
.t-root .saga{ border:1px solid color-mix(in srgb,var(--tint) 26%,transparent); background:linear-gradient(180deg,color-mix(in srgb,var(--tint) 6%,transparent),transparent);
  padding:calc(16px * var(--d)) 16px 18px; }
.t-root .saga-head{ display:flex; align-items:center; gap:12px; margin-bottom:4px; }
.t-root .saga-head .ti{ width:30px; height:30px; color:var(--tint); }
.t-root .saga-head .ti .t-glyph{ width:100%; height:100%; }
.t-root .saga-head h3{ margin:0; font-family:var(--t-display); font-weight:700; font-size:19px; letter-spacing:.4px; }
.t-root .saga-head .en{ font-family:var(--t-serif); font-style:italic; font-size:13px; color:color-mix(in srgb,var(--tint) 72%,var(--sym-fg) 28%); }
.t-root .saga-track{ display:flex; flex-direction:column; gap:0; margin-top:12px; }
.t-root .saga-step{ display:flex; gap:13px; position:relative; padding-bottom:14px; }
.t-root .saga-step:last-child{ padding-bottom:0; }
.t-root .saga-node{ flex:none; width:26px; display:flex; flex-direction:column; align-items:center; }
.t-root .saga-dot{ width:15px; height:15px; transform:rotate(45deg); border:1.5px solid color-mix(in srgb,var(--tint) 45%,transparent);
  background:var(--sym-bg); flex:none; margin-top:2px; transition:background .3s; }
.t-root .saga-step.done .saga-dot{ background:var(--tint); box-shadow:0 0 8px color-mix(in srgb,var(--tint) 55%,transparent); }
.t-root .saga-step.cur .saga-dot{ border-color:var(--tint); background:color-mix(in srgb,var(--tint) 30%,transparent); animation:t-glow 2.6s ease-in-out infinite; }
.t-root .saga-line{ width:1px; flex:1; background:color-mix(in srgb,var(--tint) 22%,transparent); margin-top:3px; }
.t-root .saga-step.done .saga-line{ background:color-mix(in srgb,var(--tint) 50%,transparent); }
.t-root .saga-info{ flex:1; min-width:0; padding-top:1px; }
.t-root .saga-info h4{ margin:0; font-family:var(--t-display); font-weight:600; font-size:14.5px; line-height:1.1; }
.t-root .saga-info .en{ font-family:var(--t-serif); font-style:italic; font-size:12px; color:color-mix(in srgb,var(--tint) 68%,var(--sym-fg) 32%); }
.t-root .saga-info .meta{ font-family:var(--t-mono); font-size:8.5px; letter-spacing:1.2px; text-transform:uppercase; color:var(--sym-fg-muted); margin-top:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.t-root .saga-info .meta .unl{ color:var(--tint); }
.t-root .saga-step.locked{ opacity:.5; }
.t-root .saga-cur-bar{ margin-top:6px; }
.t-root .saga-advance{ margin-top:14px; }

/* ════════════════ ACHIEVEMENTS ════════════════ */
.t-root .ach-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:calc(11px * var(--d)); }
.t-root .medal{ position:relative; background:var(--sym-bg-card); border:1px solid color-mix(in srgb,var(--tint) 18%,transparent);
  padding:calc(14px * var(--d)) 14px; display:flex; gap:13px; align-items:center; transition:border-color .25s,transform .25s; }
.t-root .medal:hover{ border-color:color-mix(in srgb,var(--tint) 42%,transparent); transform:translateY(-2px); }
.t-root .medal.earned{ border-color:color-mix(in srgb,var(--tint) 50%,transparent); }
.t-root .ring{ width:50px; height:50px; flex:none; position:relative; }
.t-root .ring svg{ width:100%; height:100%; transform:rotate(-90deg); }
.t-root .ring .rg-glyph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--tint); }
.t-root .ring .rg-glyph .t-glyph{ width:46%; height:46%; }
.t-root .medal.earned .rg-glyph{ filter:drop-shadow(0 0 5px color-mix(in srgb,var(--tint) 55%,transparent)); }
.t-root .medal-main{ flex:1; min-width:0; }
.t-root .medal-main h4{ margin:0; font-family:var(--t-display); font-weight:600; font-size:14px; line-height:1.1; }
.t-root .medal-main .en{ font-family:var(--t-serif); font-style:italic; font-size:11.5px; color:color-mix(in srgb,var(--tint) 68%,var(--sym-fg) 32%); }
.t-root .medal-main .note{ font-size:10.5px; line-height:1.4; color:color-mix(in srgb,var(--sym-fg) 52%,transparent); margin-top:4px; }
.t-root .medal-prog{ font-family:var(--t-mono); font-size:8.5px; letter-spacing:1px; color:var(--sym-fg-muted); margin-top:5px; }
.t-root .medal-prog b{ color:var(--sym-fg); }
.t-root .medal.earned .medal-prog b{ color:var(--tint); }

/* dimension tabs */
.t-root .dim-row{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px; }
.t-root .dim{ appearance:none; cursor:pointer; font-family:var(--t-mono); font-size:8.5px; letter-spacing:1.3px; text-transform:uppercase;
  color:var(--sym-fg-muted); background:transparent; border:1px solid var(--hair); padding:7px 11px; display:inline-flex; align-items:center; gap:6px; transition:color .2s,border-color .2s,background .2s; }
.t-root .dim .di{ width:13px; height:13px; opacity:.7; }
.t-root .dim .di .t-glyph{ width:100%; height:100%; }
.t-root .dim:hover{ color:var(--sym-fg); border-color:color-mix(in srgb,var(--tint) 36%,transparent); }
.t-root .dim.on{ color:var(--sym-ink); background:var(--tint); border-color:var(--tint); }
.t-root .dim.on .di{ opacity:1; }

/* lifetime stat dashboard */
.t-root .stats{ display:grid; grid-template-columns:repeat(auto-fit,minmax(96px,1fr)); gap:1px; background:var(--hair);
  border:1px solid var(--hair); margin-bottom:16px; }
.t-root .stat{ background:var(--sym-bg-card); padding:calc(14px * var(--d)) 13px; display:flex; flex-direction:column; gap:5px; }
.t-root .stat .v{ font-family:var(--t-serif); font-weight:600; font-size:23px; color:var(--sym-fg); line-height:1; font-variant-numeric:tabular-nums; }
.t-root .stat.gold .v{ color:var(--tint); }
.t-root .stat .l{ font-family:var(--t-mono); font-size:8px; letter-spacing:1.4px; text-transform:uppercase; color:var(--sym-fg-muted); }
.t-root .stat .gk{ font-family:var(--t-display); font-size:10px; color:color-mix(in srgb,var(--tint) 60%,var(--sym-fg) 40%); }

/* ════════════════ CELEBRATION TOAST ════════════════ */
.t-root .toast-host{ position:absolute; z-index:40; pointer-events:none; }
.t-root .toast{ pointer-events:auto; display:flex; align-items:center; gap:13px; padding:13px 16px 13px 13px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--tint) 16%,var(--sym-bg-raise)),var(--sym-bg-raise));
  border:1px solid var(--tint); box-shadow:0 18px 44px rgba(0,0,0,.5),0 0 0 1px color-mix(in srgb,var(--tint) 20%,transparent);
  animation:t-toast-in .45s cubic-bezier(.16,1,.3,1); min-width:230px; max-width:300px; position:relative; overflow:hidden; }
.t-root .toast::after{ content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(110deg,transparent 40%,color-mix(in srgb,var(--sym-gold-lt) 55%,transparent) 50%,transparent 60%);
  background-size:240% 100%; animation:t-sheen 1.4s ease-out; }
.t-root .toast-medal{ width:46px; height:46px; flex:none; position:relative; color:var(--tint);
  border:1px solid var(--tint); background:radial-gradient(circle at 50% 35%,color-mix(in srgb,var(--tint) 32%,transparent),transparent 70%);
  display:flex; align-items:center; justify-content:center; animation:t-pop .5s cubic-bezier(.2,1.4,.4,1) both; }
.t-root .toast-medal .t-glyph{ width:58%; height:58%; }
.t-root .toast-body{ flex:1; min-width:0; }
.t-root .toast-body .k{ font-family:var(--t-mono); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--tint); }
.t-root .toast-body h5{ margin:2px 0 0; font-family:var(--t-display); font-weight:600; font-size:15px; line-height:1.05; }
.t-root .toast-body .en{ font-family:var(--t-serif); font-style:italic; font-size:11.5px; color:color-mix(in srgb,var(--sym-fg) 60%,transparent); }
.t-root .toast-gain{ font-family:var(--t-serif); font-weight:600; font-size:17px; color:var(--sym-gold-lt); white-space:nowrap; display:flex; align-items:center; gap:5px; flex:none; }
.t-root .toast-gain .kx{ width:14px; height:14px; color:var(--tint); }
.t-root .toast-gain .kx .t-glyph{ width:100%; height:100%; }
.t-root .toast.style-banner{ border-radius:0; min-width:260px; }
.t-root .toast.style-minimal{ min-width:0; padding:9px 14px; background:var(--sym-bg-raise); border-color:color-mix(in srgb,var(--tint) 45%,transparent); box-shadow:0 12px 30px rgba(0,0,0,.45); }
.t-root .toast.style-minimal .toast-medal{ width:30px; height:30px; }
.t-root .toast.style-minimal .toast-body .en{ display:none; }

/* empty state */
.t-root .t-empty{ padding:30px; text-align:center; font-family:var(--t-serif); font-style:italic; color:var(--sym-fg-muted); font-size:13px; border:1px dashed var(--hair); }

/* reroll button */
.t-root .reroll-btn{ appearance:none; cursor:pointer; font-family:var(--t-mono); font-size:8px; letter-spacing:1.4px; text-transform:uppercase;
  font-weight:600; color:var(--sym-fg-muted); background:transparent; border:1px solid var(--hair); padding:5px 9px;
  display:inline-flex; align-items:center; gap:6px; flex:none; transition:color .2s,border-color .2s; }
.t-root .reroll-btn:hover{ color:var(--tint); border-color:color-mix(in srgb,var(--tint) 40%,transparent); }
.t-root .reroll-btn .t-glyph{ width:11px; height:11px; }
.t-root .sec-head .reroll-btn{ margin-left:8px; }

/* ════════════════ LAYOUT: RAIL (web) ════════════════ */
.t-root .lay-rail{ flex-direction:row; }
.t-root .rail-nav{ width:236px; flex:none; border-right:1px solid var(--hair); display:flex; flex-direction:column;
  background:color-mix(in srgb,var(--sym-bg-card) 50%,var(--sym-bg)); position:relative; z-index:2; }
.t-root .rail-brand{ padding:22px 22px 18px; border-bottom:1px solid var(--hair); }
.t-root .rail-brand .crest{ color:var(--tint); margin-bottom:12px; }
.t-root .rail-brand h1{ margin:0; font-family:var(--t-display); font-weight:700; font-size:19px; letter-spacing:.5px; line-height:1.05; }
.t-root .rail-brand .en{ font-family:var(--t-serif); font-style:italic; font-size:12.5px; color:color-mix(in srgb,var(--tint) 70%,var(--sym-fg) 30%); margin-top:2px; }
.t-root .rail-hud{ padding:16px 22px; border-bottom:1px solid var(--hair); }
.t-root .rail-tabs{ display:flex; flex-direction:column; padding:12px 0; flex:1; overflow-y:auto; scrollbar-width:none; }
.t-root .rail-tabs::-webkit-scrollbar{ width:0; }
.t-root .rail-tab{ appearance:none; border:0; background:transparent; cursor:pointer; text-align:left; color:var(--sym-fg-muted);
  display:flex; align-items:center; gap:13px; padding:13px 22px; position:relative; transition:color .2s,background .2s; }
.t-root .rail-tab .ti{ width:20px; height:20px; flex:none; opacity:.7; }
.t-root .rail-tab .ti .t-glyph{ width:100%; height:100%; }
.t-root .rail-tab .lbl{ display:flex; flex-direction:column; gap:2px; }
.t-root .rail-tab .lbl b{ font-family:var(--t-display); font-weight:600; font-size:15px; letter-spacing:.3px; color:inherit; }
.t-root .rail-tab .lbl span{ font-family:var(--t-mono); font-size:8px; letter-spacing:1.6px; text-transform:uppercase; opacity:.7; }
.t-root .rail-tab:hover{ color:var(--sym-fg); background:color-mix(in srgb,var(--tint) 5%,transparent); }
.t-root .rail-tab.on{ color:var(--tint); background:color-mix(in srgb,var(--tint) 9%,transparent); }
.t-root .rail-tab.on .ti{ opacity:1; }
.t-root .rail-tab.on::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--tint); }
.t-root .rail-foot{ padding:14px 22px; border-top:1px solid var(--hair); display:flex; gap:8px; }
.t-root .rail-body{ flex:1; min-width:0; display:flex; flex-direction:column; position:relative; z-index:1; }
.t-root .rail-topbar{ display:flex; align-items:center; gap:14px; padding:18px 26px; border-bottom:1px solid var(--hair); position:relative; z-index:2; }
.t-root .rail-topbar .si{ width:26px; height:26px; flex:none; color:var(--tint); display:flex; align-items:center; justify-content:center; border:1px solid color-mix(in srgb,var(--tint) 36%,transparent); }
.t-root .rail-topbar .si .t-glyph{ width:58%; height:58%; }
.t-root .rail-topbar .tt{ flex:1; min-width:0; }
.t-root .rail-topbar .tt h2{ margin:0; font-family:var(--t-display); font-weight:600; font-size:21px; letter-spacing:.4px; }
.t-root .rail-topbar .tt .en{ font-family:var(--t-mono); font-size:9px; letter-spacing:2px; text-transform:uppercase; color:var(--sym-fg-muted); margin-top:3px; }

/* ── responsive: collapse the rail on narrow viewports ── */
@media (max-width:720px){
  .t-root .lay-rail{ flex-direction:column; }
  .t-root .rail-nav{ width:100%; flex-direction:row; overflow-x:auto; border-right:0; border-bottom:1px solid var(--hair); }
  .t-root .rail-brand,.t-root .rail-hud{ display:none; }
  .t-root .rail-tabs{ flex-direction:row; padding:0; }
  .t-root .rail-tab{ flex-direction:column; gap:4px; padding:10px 14px; white-space:nowrap; }
  .t-root .rail-tab.on::before{ top:auto; bottom:0; left:20%; right:20%; width:auto; height:2px; }
  .t-root .rail-foot{ display:none; }
  .t-root .grid.c3,.t-root .grid.c2{ grid-template-columns:1fr; }
  .t-root .ach-grid{ grid-template-columns:1fr; }
}

/* ════════════════ SURFACE WRAPPER + CONTAINERS ════════════════ */
#temple-content{ display:flex; }
#temple-content .t-root{ flex:1; min-height:100vh; display:flex; min-width:0; }
#temple-overlay{ position:fixed; inset:0; z-index:9000; }
#temple-overlay .t-root{ width:100%; height:100%; display:flex; }
#admin-tab-realm .cur-preview-frame .t-root{ width:100%; height:100%; display:flex; }
.t-root > .t-frame{ flex:1; min-width:0; }

/* ════════════════ PILLAR TABS (ceremonial) ════════════════ */
.t-root .temple-tabs{ display:flex; gap:0; overflow-x:auto; scrollbar-width:none; }
.t-root .temple-tabs::-webkit-scrollbar{ height:0; }
.t-root .tab{ appearance:none; border:0; background:transparent; cursor:pointer; color:var(--sym-fg-muted);
  display:flex; align-items:center; gap:9px; padding:12px 14px; position:relative; transition:color .2s; }
.t-root .tab .ti{ width:17px; height:17px; opacity:.75; }
.t-root .tab .ti .t-glyph{ width:100%; height:100%; }
.t-root .tab .tlabel{ font-family:var(--t-display); font-size:14px; letter-spacing:.4px; font-weight:600; }
.t-root .tab:hover{ color:var(--sym-fg); }
.t-root .tab.on{ color:var(--tint); }
.t-root .tab.on .ti{ opacity:1; }
.t-root .tab::after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:var(--tint);
  transform:scaleX(0); transform-origin:left; transition:transform .25s; }
.t-root .tab.on::after{ transform:scaleX(1); }

/* ════════════════ LAYOUT: TEMPLE (in-game ceremonial overlay) ════════════════ */
.t-root .lay-temple{ align-items:center; }
.t-root .temple-veil{ position:absolute; inset:0; background:radial-gradient(ellipse 60% 70% at 50% 42%,transparent,color-mix(in srgb,#000 55%,transparent) 100%); z-index:1; pointer-events:none; }
.t-root .temple-inner{ position:relative; z-index:2; width:100%; height:100%; display:flex; flex-direction:column; align-items:center; }
.t-root .temple-head{ text-align:center; padding:26px 24px 10px; flex:none; }
.t-root .temple-head .crest{ color:var(--tint); margin-bottom:10px; filter:drop-shadow(0 0 12px color-mix(in srgb,var(--tint) 35%,transparent)); }
.t-root .temple-head h1{ margin:0; font-family:var(--t-display); font-weight:700; font-size:25px; letter-spacing:1px; }
.t-root .temple-head .en{ font-family:var(--t-serif); font-style:italic; font-size:14px; color:color-mix(in srgb,var(--tint) 72%,var(--sym-fg) 28%); margin-top:3px; }
.t-root .temple-hud{ position:absolute; top:22px; right:24px; z-index:5; }
.t-root .temple-back{ position:absolute; top:24px; left:24px; z-index:5; }
.t-root .temple-tabs{ border-top:1px solid var(--hair); border-bottom:1px solid var(--hair); margin:8px 0 0;
  padding:0 6px; flex:none; background:color-mix(in srgb,var(--sym-bg-card) 40%,transparent); }
.t-root .temple-scroll{ width:100%; max-width:680px; flex:1; min-height:0; overflow-y:auto; padding:22px 26px 40px; position:relative; z-index:2; scrollbar-width:none; }
.t-root .temple-scroll::-webkit-scrollbar{ width:0; }

/* ════════════════ LAYOUT: MOBILE (PWA codex) ════════════════ */
.t-root .lay-mobile{ }
.t-root .mob-head{ padding:14px 20px 12px; flex:none; position:relative; z-index:2; display:flex; align-items:center; gap:12px; }
.t-root .mob-head .crest{ color:var(--tint); flex:none; }
.t-root .mob-head .tt{ flex:1; min-width:0; }
.t-root .mob-head .tt h1{ margin:0; font-family:var(--t-display); font-weight:700; font-size:16px; letter-spacing:.4px; line-height:1; }
.t-root .mob-head .tt .en{ font-family:var(--t-mono); font-size:7.5px; letter-spacing:1.8px; text-transform:uppercase; color:var(--sym-fg-muted); margin-top:3px; }
.t-root .mob-hud-bar{ padding:0 16px 12px; flex:none; position:relative; z-index:2; }
.t-root .mob-hud-bar .hud{ width:100%; justify-content:space-between; }
.t-root .mob-tabbar{ flex:none; display:flex; border-top:1px solid var(--hair); background:color-mix(in srgb,var(--sym-bg-card) 70%,var(--sym-bg));
  position:relative; z-index:3; padding-bottom:6px; overflow-x:auto; scrollbar-width:none; }
.t-root .mob-tabbar::-webkit-scrollbar{ height:0; }
.t-root .mob-tab{ flex:1; min-width:64px; appearance:none; border:0; background:transparent; cursor:pointer; color:var(--sym-fg-muted);
  display:flex; flex-direction:column; align-items:center; gap:4px; padding:10px 4px 8px; position:relative; transition:color .2s; }
.t-root .mob-tab .ti{ width:21px; height:21px; opacity:.7; }
.t-root .mob-tab .ti .t-glyph{ width:100%; height:100%; }
.t-root .mob-tab span{ font-family:var(--t-mono); font-size:7px; letter-spacing:1px; text-transform:uppercase; }
.t-root .mob-tab.on{ color:var(--tint); }
.t-root .mob-tab.on .ti{ opacity:1; }
.t-root .mob-tab.on::before{ content:""; position:absolute; top:0; left:30%; right:30%; height:2px; background:var(--tint); }
.t-root .mob-section-title{ font-family:var(--t-display); font-weight:600; font-size:18px; letter-spacing:.3px; margin:0 0 2px; }
.t-root .mob-section-en{ font-family:var(--t-mono); font-size:8px; letter-spacing:2px; text-transform:uppercase; color:var(--sym-fg-muted); margin-bottom:14px; }