/*
 * MU Dito — "Cinemático" page layer: player/guild profiles, info page and per-module refinements.
 * Loaded after mudito-cine.css. Tokens from tokens.css; MU tooltip (.md-tip) from components.css.
 */

/* ================================================================== */
/* Profiles                                                            */
/* ================================================================== */
.mdc-prof, .mdc-guild { display: grid; gap: 20px; }
.mdc-prof__hero { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); align-items: end; min-height: 380px; padding: 36px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(55% 80% at 78% 60%, var(--glow, rgba(196,26,54,.42)), transparent 70%), linear-gradient(180deg, #120e15, #08060a); }
.mdc-prof__word { position: absolute; right: 16px; top: 12px; z-index: -1; font: 700 110px/.85 var(--font-display); text-transform: uppercase; white-space: nowrap; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.07); animation: mdc-slidein 900ms cubic-bezier(.16,1,.3,1) both; }
.mdc-prof__art { position: absolute; right: 2%; bottom: -6%; z-index: -1; height: 112%; width: auto; max-width: none; filter: drop-shadow(0 30px 40px rgba(0,0,0,.7)); animation: mdc-artrise 1000ms cubic-bezier(.16,1,.3,1) both; pointer-events: none; }
.mdc-prof__id { display: grid; gap: 14px; justify-items: start; animation: fadeup 700ms cubic-bezier(.16,1,.3,1) both; }
.mdc-prof__id .kick { margin: 0; }
.mdc-content .mdc-prof__id h2, .mdc-content .mdc-guild__id h2 { margin: 0; font: 700 64px/.95 var(--font-display); text-transform: uppercase; color: var(--ink); text-shadow: 0 10px 30px rgba(0,0,0,.6); overflow-wrap: anywhere; }
.mdc-prof__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.mdc-prof__class { font: 700 15px/20px var(--font-body); letter-spacing: .06em; color: var(--ember); }
.mdc-pill { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--radius-pill); font: 800 11px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink-muted); background: rgba(6,5,9,.5); }
.mdc-pill i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-muted); }
.mdc-pill.is-on { color: var(--excellent); border-color: rgba(82,232,148,.45); }
.mdc-pill.is-on i { background: var(--excellent); animation: md-pulse 2.2s ease-out infinite; }
.mdc-prof__guild { display: inline-flex; align-items: center; gap: 12px; padding: 8px 14px 8px 8px; border-radius: var(--radius-sm); background: rgba(6,5,9,.55); border: 1px solid rgba(255,255,255,.1); backdrop-filter: blur(8px); }
.mdc-prof__guild > span:last-child { display: grid; font: 700 16px/20px var(--font-display); }
.mdc-prof__guild small { font: 800 10px/14px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--ink-muted); }
.mdc-prof__glogo img, .mdc-prof__glogo svg { display: block; width: 44px; height: 44px; border-radius: var(--radius-tip); image-rendering: pixelated; }
.mdc-prof__head { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; }
.mdc-prof__head > div { min-width: 112px; padding: 12px 16px; border-radius: var(--radius-sm); background: rgba(6,5,9,.6); border: 1px solid rgba(255,255,255,.08); backdrop-filter: blur(8px); }
.mdc-prof__head dt { font: 800 10px/14px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.mdc-prof__head dd { margin: 4px 0 0; font: 700 26px/1 var(--font-display); color: var(--ink); }
.mdc-prof__head dd.is-link { font-size: 18px; line-height: 26px; }

.mdc-prof__grid { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 5fr) minmax(0, 5fr); gap: 20px; align-items: start; }
.mdc-prof__box { min-width: 0; padding: 22px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.mdc-prof__bt { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 16px; }
.mdc-content .mdc-prof__bt h3 { margin: 0; font: 600 22px/1.1 var(--font-display); text-transform: uppercase; }
.mdc-prof__alert { margin: 0 0 14px; padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid rgba(255,122,69,.4); background: rgba(255,122,69,.08); color: #ffe0cf; font: 600 14px/21px var(--font-body); }
.mdc-prof__foot { margin: 0; text-align: center; }
.mdc-prof__empty { margin: 10px 0 0; }
.mdc-prof__back { margin-top: 16px; text-align: center; }

.mdc-statlist { display: grid; gap: 2px; margin: 0; }
.mdc-statlist > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm); background: rgba(255,255,255,.025); }
.mdc-statlist dt { font: 800 11px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.mdc-statlist dd { margin: 0; font: 800 18px/22px var(--font-body); color: var(--ink); }
.mdc-statlist .is-pk dd { color: var(--tip-danger); }

/* Item slots (equipment + inventory) */
.mdc-slot { position: relative; display: grid; place-items: center; min-width: 0; border-radius: var(--radius-tip); border: 1px solid #2c2532; background: radial-gradient(circle at 50% 40%, #1d1823, #0e0b11);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -2px 6px rgba(0,0,0,.6); transition: border-color 160ms ease; outline-offset: 1px; }
.mdc-slot img { position: absolute; left: 8%; top: 8%; width: 84%; height: 84%; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 4px 6px rgba(0,0,0,.7)); transition: transform 260ms cubic-bezier(.16,1,.3,1); }
.mdc-slot.has-item { cursor: help; }
.mdc-slot .mdc-glyph { display: none; font: 400 22px/1 var(--font-body); color: rgba(185,173,159,.35); }
.mdc-slot.is-empty .mdc-glyph, .mdc-slot.is-noimg .mdc-glyph { display: block; }
.mdc-slot.is-noimg img { display: none; }
.mdc-slot.is-noimg .mdc-glyph { color: var(--gold); }
.mdc-slot--exc { border-color: rgba(79,232,146,.55); box-shadow: inset 0 0 14px rgba(79,232,146,.18), inset 0 -2px 6px rgba(0,0,0,.6); }
.mdc-slot--anc { border-color: rgba(239,203,107,.6); box-shadow: inset 0 0 14px rgba(239,203,107,.2), inset 0 -2px 6px rgba(0,0,0,.6); }
.mdc-slot.has-item:hover, .mdc-slot.has-item:focus-visible { border-color: var(--gold); z-index: 6; }
.mdc-slot.has-item:hover img, .mdc-slot.has-item:focus-visible img { transform: scale(1.08); }
.mdc-slot .md-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); z-index: 20; width: max-content; min-width: 210px; max-width: 290px; transform: translate(-50%, 6px); opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.16,1,.3,1), visibility 0s linear 220ms; }
.mdc-slot.tip-below .md-tip { bottom: auto; top: calc(100% + 10px); }
.mdc-slot:hover .md-tip, .mdc-slot:focus .md-tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.mdc-slot .md-tip .md-tip__name { font-size: 16px; line-height: 21px; }
.mdc-slot .md-tip .md-tip__line { font-size: 13px; line-height: 19px; }
.mdc-slot__lb { position: absolute; left: 0; right: 0; bottom: 3px; padding: 0 3px; font: 800 8px/10px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: rgba(185,173,159,.55); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.mdc-slot.has-item .mdc-slot__lb { display: none; }

/* Paper doll: MU S6 equipment window */
.mdc-doll { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); gap: 8px; aspect-ratio: 5 / 4; padding: 12px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background: radial-gradient(60% 60% at 50% 45%, rgba(227,181,98,.07), transparent 70%), linear-gradient(180deg, #120f16, #0a080d);
  grid-template-areas: "pe pd hm wg wg" "wl rl ar wg wg" "wl rr ar wr bt" "gl pt pt wr bt"; }
.mdc-doll__pe { grid-area: pe; } .mdc-doll__pd { grid-area: pd; } .mdc-doll__hm { grid-area: hm; } .mdc-doll__wg { grid-area: wg; }
.mdc-doll__wl { grid-area: wl; } .mdc-doll__ar { grid-area: ar; } .mdc-doll__wr { grid-area: wr; } .mdc-doll__rl { grid-area: rl; }
.mdc-doll__rr { grid-area: rr; } .mdc-doll__gl { grid-area: gl; } .mdc-doll__pt { grid-area: pt; } .mdc-doll__bt { grid-area: bt; }
.mdc-doll .mdc-doll__pe .md-tip, .mdc-doll .mdc-doll__pd .md-tip, .mdc-doll .mdc-doll__hm .md-tip, .mdc-doll .mdc-doll__wg .md-tip { bottom: auto; top: calc(100% + 10px); }

/* Inventory 8x8: items keep their real width x height */
.mdc-bag { position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(8, minmax(0, 1fr)); gap: 3px; aspect-ratio: 1; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--line);
  background-color: #0a080d; background-image: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size: calc((100% - 16px) / 8) calc((100% - 16px) / 8); background-position: 8px 8px; background-origin: border-box; }
.mdc-bag__it { margin: 0; }
.mdc-bag__it img { left: 6%; top: 6%; width: 88%; height: 88%; }

/* Guild */
.mdc-guild__hero { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 32px; padding: 32px; border-radius: var(--radius-md); border: 1px solid rgba(255,255,255,.08);
  background: radial-gradient(50% 90% at 20% 50%, rgba(227,181,98,.14), transparent 70%), linear-gradient(180deg, #120e15, #08060a); }
.mdc-guild__logo { padding: 10px; border-radius: var(--radius-sm); border: 1px solid rgba(227,181,98,.4); background: #0a080d; box-shadow: var(--shadow-gold); }
.mdc-guild__logo img, .mdc-guild__logo svg { display: block; width: 150px; height: 150px; image-rendering: pixelated; }
.mdc-guild__id { display: grid; gap: 12px; justify-items: start; }
.mdc-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin: 0; padding: 0; list-style: none; }
.mdc-member { display: grid; grid-template-columns: 48px minmax(0, 1fr); align-items: center; gap: 12px; padding: 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,.025); border: 1px solid var(--line); transition: border-color 200ms ease, transform 260ms cubic-bezier(.16,1,.3,1); }
.mdc-member:hover { border-color: rgba(227,181,98,.45); transform: translateY(-2px); }
.mdc-member.is-master { border-color: rgba(227,181,98,.55); background: rgba(227,181,98,.07); }
.mdc-member__av { display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden; border-radius: var(--radius-tip); background: var(--surface-raised); color: var(--ink-muted); font: 700 18px/1 var(--font-display); }
.mdc-member__av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.5) translateY(14%); }
.mdc-member__t { display: grid; min-width: 0; }
.mdc-member__t b { font: 700 15px/20px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mdc-member__t small { font: 600 12px/17px var(--font-body); color: var(--ink-muted); overflow-wrap: anywhere; }

@keyframes mdc-slidein { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: none; } }
@keyframes mdc-artrise { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .mdc-prof__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .mdc-prof__stats { grid-column: 1 / -1; }
  .mdc-statlist { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
}
@media (max-width: 760px) {
  .mdc-prof__hero { grid-template-columns: minmax(0, 1fr); min-height: 0; padding: 200px 18px 20px; }
  .mdc-prof__art { right: 50%; transform: translateX(50%); bottom: auto; top: -10px; height: 260px; animation: none; opacity: .9; }
  .mdc-prof__word { font-size: 64px; }
  .mdc-content .mdc-prof__id h2, .mdc-content .mdc-guild__id h2 { font-size: 40px; }
  .mdc-prof__head { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; }
  .mdc-prof__head > div { min-width: 0; }
  .mdc-prof__head dd { font-size: 22px; }
  .mdc-prof__grid { grid-template-columns: minmax(0, 1fr); }
  .mdc-statlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdc-prof__box { padding: 16px 12px; }
  .mdc-doll { gap: 5px; padding: 8px; }
  .mdc-slot__lb { display: none; }
  .mdc-guild__hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; padding: 24px 16px; gap: 18px; }
  .mdc-guild__id { justify-items: center; }
  .mdc-guild__logo img, .mdc-guild__logo svg { width: 112px; height: 112px; }
  /* Touch: tooltips become a bottom sheet so they never leave the viewport */
  .mdc-slot .md-tip, .mdc-slot.tip-below .md-tip, .mdc-doll .mdc-slot .md-tip { position: fixed; left: 16px; right: 16px; top: auto; bottom: 16px; width: auto; max-width: none; min-width: 0; transform: translateY(8px); }
  .mdc-slot:hover .md-tip, .mdc-slot:focus .md-tip { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mdc-prof__word, .mdc-prof__art, .mdc-prof__id { animation: none !important; }
}

/* ================================================================== */
/* Info page (override "info")                                         */
/* ================================================================== */
.mdc-js .mdc-js-only { display: revert; }
.mdc-js-only { display: none; }
/* One shrinkable column: an implicit auto track grew to the widest nowrap table and pushed the panels past phone width. */
.mdc-info { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; }
.mdc-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-bottom: 22px; }
.mdc-facts span { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: var(--radius-sm); background: rgba(13,11,16,.7); border: 1px solid rgba(255,255,255,.1); font: 700 13px/16px var(--font-body); color: var(--ink-muted); }
.mdc-facts b { color: var(--gold); font-weight: 800; }
.mdc-tabs { position: sticky; top: 12px; z-index: 20; display: flex; justify-content: center; gap: 4px; padding: 6px; border-radius: var(--radius-md); background: rgba(13,11,16,.94); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,.08); box-shadow: 0 16px 40px rgba(0,0,0,.45); overflow-x: auto; scrollbar-width: none; }
.mdc-tabs::-webkit-scrollbar { display: none; }
.mdc .mdc-tab { flex: none; display: inline-flex; align-items: center; min-height: 46px; padding: 0 20px; border-radius: 6px; color: var(--ink-muted); font: 800 12px/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; transition: color 160ms ease, background-color 200ms ease; }
.mdc .mdc-tab:hover { color: var(--ink); background: rgba(255,255,255,.05); }
/* Dark label on gold like the play button; no colour fade, so the label is never mid-fade gold on gold (change 221). */
.mdc .mdc-tab.is-on, .mdc .mdc-tab[aria-selected="true"] { color: var(--on-gold); background: linear-gradient(180deg, #f6d491, var(--gold) 50%, var(--gold-deep)); box-shadow: inset 0 1px 0 rgba(255,255,255,.5); transition: none; }
.mdc-panel { min-width: 0; padding: 48px 0 8px; scroll-margin-top: calc(90px + env(safe-area-inset-top, 0px)); overflow-wrap: break-word; }
.mdc-js .mdc-panel:not([hidden]) { animation: mdc-panel 480ms cubic-bezier(.16,1,.3,1) both; }
.mdc-panel:focus { outline: none; }
.mdc-panel:focus-visible { outline: none; }
.mdc-ptitle { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 28px; }
.mdc-content .mdc-ptitle h2, .mdc-content .mdc-invw h2 { margin: 0; font: 600 40px/1 var(--font-display); text-transform: uppercase; }
.mdc-ptitle p { margin: 10px 0 0; max-width: 62ch; color: var(--ink-muted); font: 500 16px/26px var(--font-body); }
.mdc-content .mdc-subt { margin: 28px 0 14px; font: 800 12px/16px var(--font-body); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.mdc-ico { position: relative; display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; }
.mdc-ico img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.mdc-ico .mdc-glyph { display: none; color: var(--gold); font-size: 20px; }
.mdc-ico.is-noimg img { display: none; }
.mdc-ico.is-noimg .mdc-glyph { display: block; }

/* Rates */
.mdc-ratestats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.mdc-rstat { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: center; padding: 22px; border-radius: var(--radius-md); background: linear-gradient(180deg, #141018, #0b090e); border: 1px solid rgba(255,255,255,.07); overflow: hidden; transition: border-color 260ms ease, transform 300ms cubic-bezier(.16,1,.3,1); }
.mdc-rstat:hover { border-color: rgba(227,181,98,.45); transform: translateY(-3px); }
.mdc-rstat > .mdc-ico { width: 56px; height: 56px; padding: 8px; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #231c29, #0e0b11); border: 1px solid #2c2532; }
.mdc-rstat .lb { font: 800 11px/14px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ink-muted); }
.mdc-rstat .val { margin-top: 6px; font: 700 38px/1 var(--font-display); color: var(--ink); }
.mdc-rstat .sub { margin-top: 6px; font: 600 13px/18px var(--font-body); color: var(--ink-muted); }
.mdc-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.mdc-tipx { position: relative; display: grid; justify-items: stretch; align-content: start; gap: 0; padding: 24px 22px 18px; text-align: left; background: var(--tooltip); border: 1px solid rgba(255,255,255,.07); border-radius: var(--radius-sm); }
.mdc-tipx::before, .mdc-tipx::after { content: ""; position: absolute; width: 16px; height: 16px; border-color: var(--gold); border-style: solid; opacity: .75; }
.mdc-tipx::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.mdc-tipx::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
.mdc-content .mdc-tipx h3 { margin: 0 0 8px; padding-bottom: 10px; font: 600 20px/26px var(--font-display); color: var(--tip-ancient); text-transform: uppercase; border-bottom: 1px solid rgba(227,181,98,.35); }
.mdc-content .mdc-tipx h3.ex { color: var(--tip-excellent); }
.mdc-tipx .l { position: relative; display: block; padding: 7px 0 7px 16px; font: 600 14px/20px var(--font-body); color: var(--tip-ink); border-bottom: 1px solid rgba(255,255,255,.05); }
.mdc-tipx .l::before { content: ""; position: absolute; left: 2px; top: 14px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.28); }
.mdc-tipx .l.lv::before { background: var(--tip-level); } .mdc-tipx .l.ex::before { background: var(--tip-excellent); } .mdc-tipx .l.an::before { background: var(--tip-ancient); }
.mdc-tipx .l:last-child { border-bottom: 0; }
.mdc-tipx .l.lv { color: var(--tip-level); } .mdc-tipx .l.ex { color: var(--tip-excellent); } .mdc-tipx .l.an { color: var(--tip-ancient); }
.mdc-tipx .gap { height: 10px; }
.mdc-sys, .mdc-kinds { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 16px; }
.mdc-sysc { display: grid; gap: 8px; align-content: start; padding: 20px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.mdc-sysc .tag { display: inline-flex; align-items: center; gap: 6px; font: 800 11px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--excellent); }
.mdc-sysc .tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--excellent); box-shadow: 0 0 8px rgba(82,232,148,.7); }
.mdc-content .mdc-sysc h4 { margin: 0; font: 600 19px/24px var(--font-display); color: var(--ink); text-transform: uppercase; }
.mdc-sysc p { margin: 0; font: 500 14px/22px var(--font-body); color: var(--ink-muted); }

/* Classes */
.mdc-cpick { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mdc-js .mdc-cpick { display: grid; }
.mdc-ct { position: relative; isolation: isolate; display: grid; align-content: end; height: 110px; padding: 10px; border-radius: 8px; overflow: hidden; border: 1px solid rgba(255,255,255,.07); background: var(--surface); cursor: pointer; color: var(--ink-muted); text-align: left; transition: border-color 220ms ease, transform 260ms cubic-bezier(.16,1,.3,1); }
.mdc-ct img { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; transform: scale(1.5) translateY(8%); filter: grayscale(.7) brightness(.55); transition: filter 300ms ease; }
.mdc-ct::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,5,9,0) 40%, rgba(6,5,9,.9)); }
.mdc-ct span { font: 800 11px/14px var(--font-body); letter-spacing: .1em; text-transform: uppercase; }
.mdc-ct:hover { transform: translateY(-3px); }
.mdc-ct:hover img { filter: grayscale(.1) brightness(.85); }
.mdc-ct[aria-selected="true"] { border-color: var(--gold); box-shadow: var(--shadow-gold); color: #fff; }
.mdc-ct[aria-selected="true"] img { filter: none; }
.mdc-show { position: relative; isolation: isolate; overflow: hidden; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; min-height: 480px; margin-bottom: 16px; padding: 40px; border-radius: 12px; border: 1px solid rgba(255,255,255,.07);
  background: radial-gradient(55% 75% at 68% 60%, var(--glow), transparent 70%), linear-gradient(180deg, #120e15, #08060a); }
.mdc-show__word { position: absolute; right: 20px; top: 20px; z-index: -1; font: 700 140px/.85 var(--font-display); text-transform: uppercase; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); white-space: nowrap; }
.mdc-show__info { display: grid; gap: 14px; justify-items: start; }
.mdc-show__info .idx { font: 800 12px/14px var(--font-body); letter-spacing: .22em; color: var(--gold); }
.mdc-content .mdc-show__info h3 { margin: 0; font: 700 52px/.95 var(--font-display); text-transform: uppercase; }
.mdc-show__info .role { font: 700 14px/20px var(--font-body); letter-spacing: .06em; color: var(--ember); }
.mdc-show__info p { margin: 0; max-width: 46ch; color: var(--ink-muted); font: 500 16px/26px var(--font-body); }
.mdc-show__info .evo b { display: block; font: 800 11px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); margin-bottom: 4px; }
.mdc-show .req { display: inline-flex; padding: 8px 12px; border-radius: var(--radius-sm); font: 700 13px/16px var(--font-body); color: var(--tip-danger); background: rgba(255,116,102,.08); border: 1px solid rgba(255,116,102,.25); }
.mdc-show .req.free { color: var(--excellent); background: rgba(82,232,148,.08); border-color: rgba(82,232,148,.25); }
.mdc-show__art { position: relative; height: 440px; }
.mdc-show__art img { position: absolute; left: 50%; bottom: 0; height: 100%; width: auto; max-width: none; transform: translateX(-46%); filter: drop-shadow(0 40px 50px rgba(0,0,0,.7)); }

/* Events */
.mdc-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 10px; }
.mdc-day { display: grid; align-content: start; gap: 8px; min-height: 200px; padding: 14px 12px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.mdc-day.is-today { border-color: rgba(227,181,98,.6); box-shadow: var(--shadow-gold); }
.mdc-content .mdc-day h4 { margin: 0 0 4px; display: flex; justify-content: space-between; align-items: center; font: 800 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }
.mdc-content .mdc-day.is-today h4 { color: var(--gold); }
.mdc-day h4 small { font: 800 9px/12px var(--font-body); padding: 2px 6px; border-radius: 3px; background: var(--gold); color: var(--on-gold); }
.mdc-evi { --c: var(--gold); display: grid; gap: 2px; padding: 8px 10px; border-radius: 6px; background: rgba(255,255,255,.035); }
.mdc-evi--pvp { --c: #ff8a5c; } .mdc-evi--boss { --c: #6fa3ff; } .mdc-evi--bonus { --c: var(--excellent); }
.mdc-evi .t { display: flex; align-items: center; gap: 6px; font: 800 12px/15px var(--font-body); color: var(--c); }
.mdc-evi .t::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--c); }
.mdc-evi .n { font: 700 13px/17px var(--font-body); color: var(--ink); }
.mdc-daily { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mdc-dly { display: grid; gap: 2px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface); border: 1px solid var(--line); }
.mdc-dly.is-feat { border-color: rgba(227,181,98,.3); }
.mdc-dly b { font: 700 15px/20px var(--font-body); color: var(--ink); }
.mdc-dly .w { font: 600 13px/19px var(--font-body); color: #d6ccbf; }
.mdc-dly .nx { font: 700 12px/16px var(--font-body); color: var(--gold); }
.mdc-info__note { margin: 16px 0 0; font-size: 13px; line-height: 20px; }

/* Commands */
.mdc-search { display: flex; align-items: center; gap: 10px; width: 320px; max-width: 100%; min-height: 46px; margin: 0; padding: 0 14px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface-raised); color: var(--ink-muted); }
.mdc-js .mdc-search { display: flex; }
.mdc-content .mdc-search input { flex: 1; min-width: 0; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; color: var(--ink); font: 500 15px/20px var(--font-body); }
.mdc-search:focus-within { border-color: var(--focus); box-shadow: 0 0 0 3px rgba(255,217,138,.2); }
.mdc-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.mdc-grp { border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mdc-content .mdc-grp h3 { display: flex; align-items: center; gap: 10px; margin: 0; padding: 14px 18px; font: 600 18px/24px var(--font-display); text-transform: uppercase; border-bottom: 1px solid var(--line); background: rgba(255,255,255,.02); }
.mdc-grp h3 .mdc-ico { width: 28px; height: 28px; }
.mdc-cmd { display: grid; grid-template-columns: minmax(140px, auto) minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 11px 18px; border-bottom: 1px solid var(--line); }
.mdc-cmd:last-child { border-bottom: 0; }
.mdc-cmd:hover { background: rgba(255,255,255,.025); }
.mdc-cmd code { justify-self: start; padding: 5px 9px; border-radius: 4px; background: rgba(227,181,98,.08); border: 1px solid rgba(227,181,98,.25); font: 700 13px/16px var(--font-body); color: var(--gold); white-space: nowrap; }
.mdc-cmd .d { font: 500 14px/20px var(--font-body); color: #d6ccbf; }
.mdc-cmd .k { font: 700 12px/16px var(--font-body); color: var(--ink-muted); text-align: right; }
.mdc-cmd .k.free { color: var(--excellent); }
.mdc-cmd__more { margin-left: 6px; font-weight: 700; color: var(--gold); white-space: nowrap; }
/* Auto-attack guide (commands panel, change 201). */
.mdc-attack { margin-top: 12px; scroll-margin-top: calc(90px + env(safe-area-inset-top, 0px)); }
.mdc-attack__intro { margin-bottom: 16px; font: 500 15px/24px var(--font-body); color: #d6ccbf; }
.mdc-attack__intro p, .mdc-attack__intro ol { margin: 0 0 10px; }
.mdc-attack__intro ol { padding-left: 22px; }
.mdc-attack code { padding: 2px 7px; border-radius: 4px; background: rgba(227,181,98,.08); border: 1px solid rgba(227,181,98,.25); font: 700 13px/18px var(--font-body); color: var(--gold); }
.mdc-content .mdc-attack__skills td.wrap { text-align: left; font-weight: 500; }
.mdc-attack__skills .mdc-sk { display: inline-block; margin: 3px 14px 3px 0; white-space: nowrap; }
/* Off-attack, storage and reset guides (change 204) reuse the .mdc-attack layout. */
.mdc-attack__intro ul { margin: 0 0 10px; padding-left: 22px; }
.mdc-attack + .mdc-attack { margin-top: 28px; }
.mdc-content .mdc-guide__cmp td.wrap { text-align: left; font-weight: 500; }
.mdc-guide__cmp th .mdc-cmd__more { font-size: 12px; }
.mdc-info .mdc-subt[id] { scroll-margin-top: calc(90px + env(safe-area-inset-top, 0px)); }
/* Guides tab and guide blocks (change 221): every guide is a framed card with its own anchored heading. */
.mdc-sys.mdc-guides { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 980px) { .mdc-sys.mdc-guides { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .mdc-sys.mdc-guides { grid-template-columns: minmax(0, 1fr); } }
.mdc-gcard .mdc-gcard__go { justify-self: start; margin-top: 6px; }
.mdc-info .mdc-attack { margin-top: 32px; padding: 20px 22px 8px; border: 1px solid var(--line); border-left: 3px solid var(--gold); border-radius: var(--radius-md); background: var(--surface); }
.mdc-guide__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 14px; }
.mdc-guide__tag { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(227,181,98,.45); font: 800 11px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); }
.mdc-content .mdc-guide__h { margin: 0; font: 600 20px/26px var(--font-display); letter-spacing: .02em; color: var(--ink); }
.mdc-guide__h a { color: inherit; text-decoration: none; }
.mdc-guide__h a:hover, .mdc-guide__h a:focus-visible { color: var(--gold); text-decoration: underline; }
.mdc-guide__back { margin-left: auto; font: 700 13px/18px var(--font-body); color: var(--gold); white-space: nowrap; }
.mdc-reset__full { color: var(--ink); }
.mdc-empty { margin-top: 16px; padding: 36px; text-align: center; font: 600 15px/22px var(--font-body); color: var(--ink-muted); border: 1px dashed var(--line-strong); border-radius: var(--radius-md); }

/* VIP */
.mdc-vipw { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow: hidden; }
.mdc-content .mdc-vipt { width: 100%; margin: 0; border-collapse: separate; border-spacing: 0; font: 500 15px/20px var(--font-body); }
.mdc-content .mdc-vipt thead th { padding: 22px 14px 18px; vertical-align: bottom; text-align: center; border-bottom: 1px solid var(--line-strong); background: var(--surface-raised); }
.mdc-content .mdc-vipt thead th:first-child { text-align: left; }
.mdc-vipt .vh { display: grid; justify-items: center; gap: 8px; }
.mdc-vipt .vh img { height: 44px; width: auto; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.mdc-vipt .vh b { font: 600 20px/1 var(--font-display); text-transform: uppercase; letter-spacing: 0; color: var(--c); }
.mdc-vipt .vh small { font: 700 11px/14px var(--font-body); letter-spacing: .04em; text-transform: none; color: var(--ink-muted); }
.mdc-content .mdc-vipt tbody th { padding: 13px 16px; text-align: left; font: 600 15px/20px var(--font-body); letter-spacing: 0; text-transform: none; color: #d6ccbf; background: transparent; border-bottom: 1px solid var(--line); }
.mdc-content .mdc-vipt td { padding: 13px 14px; text-align: center; font-weight: 700; border-bottom: 1px solid var(--line); }
.mdc-content .mdc-vipt tbody tr:last-child > * { border-bottom: 0; }
.mdc-content .mdc-vipt th.gc { background: rgba(227,181,98,.12); }
.mdc-content .mdc-vipt td.gc { color: #ffe2a8; background: rgba(227,181,98,.06); }
/* Info data tables (reset cost, party exp, map ladder, chaos machine): scroll sideways on narrow screens. */
.mdc-dtgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin-top: 8px; }
.mdc-dtw { border-radius: 12px; border: 1px solid var(--line); background: var(--surface); overflow-x: auto; }
.mdc-content .mdc-dtab { width: 100%; margin: 0; border-collapse: collapse; font: 500 14px/20px var(--font-body); }
.mdc-content .mdc-dtab th, .mdc-content .mdc-dtab td { padding: 10px 14px; text-align: center; white-space: nowrap; border-bottom: 1px solid var(--line); }
.mdc-content .mdc-dtab thead th { font: 800 11px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-raised); }
.mdc-content .mdc-dtab tbody th { text-align: left; font-weight: 600; letter-spacing: 0; text-transform: none; color: #d6ccbf; background: transparent; white-space: normal; }
.mdc-content .mdc-dtab td { font-weight: 700; }
.mdc-content .mdc-dtab td.wrap { white-space: normal; }
.mdc-content .mdc-dtab td.gc { color: #ffe2a8; background: rgba(227,181,98,.06); }
.mdc-content .mdc-dtab tbody tr:last-child > * { border-bottom: 0; }
@media (max-width: 900px) { .mdc-dtgrid { grid-template-columns: minmax(0, 1fr); } }
.mdc-vipcta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 16px; padding: 18px 22px; border-radius: var(--radius-md); background: rgba(227,181,98,.07); border: 1px solid rgba(227,181,98,.3); }
.mdc-vipcta p { margin: 0; font: 600 15px/22px var(--font-body); color: #e9d3a6; }

/* Items showcase */
.mdc-invw { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: center; }
.mdc-invw p { margin: 12px 0 24px; color: var(--ink-muted); font: 500 16px/26px var(--font-body); }
.mdc-showcase { display: grid; grid-template-columns: repeat(auto-fill, 56px); grid-auto-rows: 56px; grid-auto-flow: dense; justify-content: center; gap: 4px; padding: 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: linear-gradient(180deg, #120f16, #0a080d); }

@keyframes mdc-panel { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@media (max-width: 1180px) {
  .mdc-ratestats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdc-cal { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mdc-daily { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdc-show__word { font-size: 100px; }
}
@media (max-width: 960px) {
  /* Phones/tablets: the bar sticks flush under the status bar on a solid background (the old 8 px gap and the
     translucent glass let scrolled text show above and behind it); the upward ground-coloured shadow also hides the
     rounded corners' gaps. Edge fades (is-l / is-r, set by JS) show that more tabs scroll in from that side. */
  .mdc-tabs { justify-content: flex-start; top: env(safe-area-inset-top, 0px); background: #0d0b10; backdrop-filter: none; box-shadow: 0 -12px 0 0 var(--ground), 0 16px 40px rgba(0,0,0,.45); scroll-padding-inline: 32px; }
  .mdc-tabs::before, .mdc-tabs::after { content: ""; position: sticky; z-index: 1; flex: none; width: 28px; opacity: 0; pointer-events: none; transition: opacity 160ms ease; }
  .mdc-tabs::before { left: -6px; margin-right: -32px; background: linear-gradient(90deg, #0d0b10 20%, rgba(13,11,16,0)); }
  .mdc-tabs::after { right: -6px; margin-left: -32px; background: linear-gradient(270deg, #0d0b10 20%, rgba(13,11,16,0)); }
  .mdc-tabs.is-l::before, .mdc-tabs.is-r::after { opacity: 1; }
  .mdc-tips, .mdc-sys, .mdc-kinds, .mdc-groups, .mdc-invw { grid-template-columns: minmax(0, 1fr); }
  .mdc-ptitle { flex-direction: column; align-items: flex-start; }
  .mdc-show { grid-template-columns: minmax(0, 1fr); padding: 22px; min-height: 0; }
  .mdc-show__art { height: 300px; order: -1; }
  .mdc-content .mdc-show__info h3 { font-size: 38px; }
  .mdc-cpick { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .mdc-cal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mdc-day { min-height: 0; }
}
@media (max-width: 600px) {
  .mdc-ratestats, .mdc-daily { grid-template-columns: minmax(0, 1fr); }
  .mdc-cal { grid-template-columns: minmax(0, 1fr); }
  .mdc-content .mdc-ptitle h2, .mdc-content .mdc-invw h2 { font-size: 30px; }
  .mdc-show__word { font-size: 64px; }
  /* The command keeps whole words (no "/offatt|ack" split); the cost/requirement wraps on the right instead. */
  .mdc-cmd { grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; padding: 11px 14px; }
  .mdc-cmd code { max-width: 100%; white-space: normal; overflow-wrap: break-word; }
  .mdc-cmd .k { min-width: 0; overflow-wrap: break-word; }
  .mdc-cmd .d { grid-column: 1 / -1; order: 3; }
  .mdc-vipcta { flex-direction: column; align-items: flex-start; }
  .mdc-showcase { grid-template-columns: repeat(auto-fill, 46px); grid-auto-rows: 46px; }
  /* VIP table → one card per benefit */
  .mdc-content .mdc-vipt thead { display: none; }
  .mdc-content .mdc-vipt, .mdc-content .mdc-vipt tbody, .mdc-content .mdc-vipt tr { display: block; width: 100%; }
  .mdc-content .mdc-vipt tr { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
  .mdc-content .mdc-vipt tbody th { grid-column: 1 / -1; padding: 12px 14px 4px; border: 0; }
  .mdc-content .mdc-vipt td { display: grid; gap: 2px; padding: 4px 6px 12px; border: 0; font-size: 14px; }
  .mdc-content .mdc-vipt td::before { content: attr(data-l); font: 800 9px/12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
  .mdc-content .mdc-vipt td.gc::before { color: var(--gold); }
}
@media (prefers-reduced-motion: reduce) {
  .mdc-js .mdc-panel:not([hidden]) { animation: none; }
}

/* ================================================================== */
/* Module refinements (skin pass)                                      */
/* ================================================================== */
/* Only the first .page-title duplicates the banner; later ones are section headings (myaccount). */
.mdc-content .page-title ~ .page-title, .mdc-content .page-title ~ * .page-title { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; margin: 32px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); font: 600 22px/1.2 var(--font-display); text-transform: uppercase; color: var(--ink); }
.mdc-content .page-title:empty, .mdc-content .page-title span:empty { display: none; }

/* Tables whose first row holds the column names in <td> (general-table-ui, rankings) */
.mdc-content .general-table-ui { border-collapse: separate; border-spacing: 0; background: var(--surface); }
.mdc-content .general-table-ui tr:first-child td { padding: 14px 16px; font: 800 11px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); background: var(--surface-raised); border-bottom: 1px solid var(--line-strong); }
.mdc-content .general-table-ui tr:last-child td { border-bottom: 0; }
.mdc-content img.tables-character-class-img, .mdc-content .character-avatar img { width: 56px; height: 56px; max-width: none; border-radius: var(--radius-sm); object-fit: cover; object-position: 50% 20%; border: 1px solid var(--line); background: var(--surface-raised); }
.mdc-content .module-requirements { display: grid; gap: 4px; margin: 4px 0 0; padding: 16px 18px; border-radius: var(--radius-sm); border: 1px solid rgba(227,181,98,.3); background: rgba(227,181,98,.06); }
.mdc-content .module-requirements:empty { display: none; }
.mdc-content .module-requirements p { margin: 0; color: #eadfcf; font: 600 14px/22px var(--font-body); }

/* Online empty state (only the header row) */
.mdc-content .rankings-table:has(tr:only-child) + .rankings-update-time::before { content: "No hay personajes en este ranking por ahora."; display: block; margin: -8px 0 12px; padding: 28px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); font: 600 15px/22px var(--font-body); color: var(--ink-muted); }

/* My account: character cards */
.mdc-content .myaccount-table + .page-title + .row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0; }
.mdc-content .row.text-center > .col-xs-3 { position: relative; float: none; width: 168px; padding: 14px 12px 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); transition: border-color 220ms ease, transform 260ms cubic-bezier(.16,1,.3,1); }
.mdc-content .row.text-center > .col-xs-3:hover { border-color: rgba(227,181,98,.5); transform: translateY(-3px); }
.mdc-content .myaccount-character-name { font: 700 15px/20px var(--font-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mdc-content .myaccount-character-block { margin: 10px auto; width: 96px; height: 96px; border-radius: var(--radius-sm); overflow: hidden; border: 1px solid var(--line); }
.mdc-content .myaccount-character-block img { width: 100%; height: 100%; object-fit: cover; }
.mdc-content .myaccount-character-block-location { font: 600 12px/17px var(--font-body); color: var(--ink-muted); }
.mdc-content .myaccount-character-block-level { position: absolute; top: 10px; right: 10px; padding: 2px 7px; border-radius: var(--radius-tip); background: var(--gold); color: var(--on-gold); font: 800 11px/16px var(--font-body); }

/* Add stats */
.mdc-content .panel-addstats .panel-body { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; }
.mdc-content .panel-addstats .panel-body > [class*="col-"] { float: none; width: auto; padding: 0; }
.mdc-content .panel-addstats .character-avatar img { width: 112px; height: 112px; }
.mdc-content .panel-addstats .character-name { float: none; margin-bottom: 12px; font: 600 24px/1.2 var(--font-display); text-transform: uppercase; color: var(--ink); }
.mdc-content .panel-addstats .col-sm-10 { width: 100%; max-width: 560px; padding: 0; }
.mdc-content .panel-addstats .form-horizontal { padding: 0; border: 0; background: none; }
/* Links from My account / the player profile land on one character: keep it clear of the top edge and mark it. */
.mdc-content .panel-addstats[id] { scroll-margin-top: 24px; }
.mdc-content .panel-addstats:target { border-color: rgba(227,181,98,.6); box-shadow: 0 0 0 1px rgba(227,181,98,.35), 0 12px 32px rgba(0,0,0,.35); }
.ucp-note { margin: 0 0 14px; font: 600 13px/20px var(--font-body); color: var(--ink-muted); }
.mdc .ucp-char__act { display: inline-flex; align-items: center; justify-self: start; gap: 6px; margin-top: 8px; padding: 6px 12px; border-radius: var(--radius-pill); border: 1px solid rgba(227,181,98,.45); font: 700 12px/16px var(--font-body); letter-spacing: .04em; color: var(--gold); text-decoration: none; transition: background-color 200ms ease, color 200ms ease; }
.mdc .ucp-char__act:hover, .mdc .ucp-char__act:focus-visible { background: rgba(227,181,98,.14); color: var(--ink); }
.ucp-char__act svg { width: 14px; height: 14px; flex: none; }
.mdc-prof__own { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 16px 0 0; }

/* Buy zen */
.mdc-content .panel-general .row { display: flex; flex-wrap: wrap; align-items: end; row-gap: 8px; margin: 0 -8px; }
.mdc-content .panel-general .row > [class*="col-"] { float: none; padding: 0 8px; }
.mdc-content .panel-general .row:first-child > [class*="col-"] { font: 800 11px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-muted); }

/* PayPal / Mercado Pago gateways */
.mdc-content .paypal-gateway-container { margin-bottom: 16px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); overflow: hidden; }
.mdc-content .paypal-gateway-content { display: grid; justify-items: center; gap: 18px; margin: 0; padding: 28px 22px; background: none; border: 0; }
.mdc-content .paypal-gateway-logo, .mdc-content .mercadopago-gateway-logo { width: 220px; height: 84px; border-radius: var(--radius-sm); padding: 10px; background: #fff url(../img/donation/paypal.png) no-repeat center / contain; background-origin: content-box; }
.mdc-content .mercadopago-gateway-logo { background-image: url(../img/donation/mercadopago.png); background-size: contain; background-color: #fff; }
.mdc-content .paypal-gateway-form, .mdc-content .paypal-gateway-form div { color: var(--ink); font: 700 18px/28px var(--font-body); text-align: center; }
.mdc-content .paypal-gateway-form input[type="text"] { display: inline-block; width: 90px; min-height: 44px; margin: 0 6px; text-align: center; }
.mdc-content .paypal-gateway-form #result { color: var(--gold); }
.mdc-content .paypal-gateway-continue input[type="submit"] { width: 240px; height: 52px; border-radius: var(--radius-sm); border: 1px solid #f6d79b; cursor: pointer;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='52'%3E%3Ctext x='120' y='31' fill='%23170f02' font-family='Barlow,Arial,sans-serif' font-weight='800' font-size='13' letter-spacing='1.8' text-anchor='middle'%3ECONTINUAR A PAYPAL%3C/text%3E%3C/svg%3E") center no-repeat, linear-gradient(180deg, #f6d491 0%, var(--gold) 46%, var(--gold-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }
.mdc-content .paypal-gateway-continue input[type="submit"]:hover { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-gold); }
.mdc-content .page-content > br { display: none; }


/* VIP shop (module prints its own <style>) */
.mdc-content .vipshop-wrap { max-width: none; margin: 0; padding: 0; font-family: var(--font-body); }
.mdc-content .vipshop-title, .mdc-content .vipshop-section-title { font: 600 32px/1.1 var(--font-display); text-transform: uppercase; color: var(--ink); }
.mdc-content .vipshop-section-title { font-size: 24px; }
.mdc-content .vipshop-sub, .mdc-content .vipshop-section-sub { color: var(--ink-muted); }
.mdc-content .vipshop-grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.mdc-content .vip-card { border-radius: var(--radius-md); background: linear-gradient(180deg, #141018, #0b090e); border: 1px solid var(--line); box-shadow: none; }
.mdc-content .vip-card:hover { border-color: rgba(227,181,98,.55); box-shadow: var(--shadow-gold); }
.mdc-content .vip-logo img { width: 140px; padding: 8px; border-radius: var(--radius-sm); background: #fff; }
.mdc-content .vip-plan { font: 600 24px/1.1 var(--font-display); text-transform: uppercase; color: var(--ink); }
.mdc-content .vip-days { color: var(--ink-muted); }
.mdc-content .vip-price { color: var(--gold); font: 800 32px/1 var(--font-body); }
.mdc-content .vip-price span { color: var(--ink-muted); }
.mdc-content .vip-btn { border-radius: var(--radius-sm); border: 1px solid #f6d79b; background: linear-gradient(180deg, #f6d491 0%, var(--gold) 46%, var(--gold-deep) 100%); color: var(--on-gold) !important; font: 800 13px/18px var(--font-body); letter-spacing: .12em; text-transform: uppercase; }
.mdc-content .vip-btn-paypal { background: #ffc439; border-color: #ffd56b; color: #003087 !important; }
.mdc-content .vipshop-section { border-top-color: var(--line); }
.mdc-content .vip-foot { color: var(--ink-muted); }

/* Events module (inline blue card styles from the module are neutralised) */
.mdc-content .nk-decorated-h-2 { margin: 0; }
.mdc-content .nk-decorated-h-2 .page-title { position: absolute; }
.mdc-content > br, .mdc-content .nk-decorated-h-2 + br { display: none; }
.mdc-content .title-events { display: flex; justify-content: center; }
.mdc-content .row > .col { flex: 1; }
.mdc-content .row:has(> .col) { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; }
.mdc-content .title-events > div { width: 100%; padding: 12px 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); text-align: center; font: 800 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink); }
.mdc-content .card-group { margin-bottom: 16px; }
.mdc-content .card-group > .card { width: auto !important; height: auto !important; margin: 0 !important; background: var(--surface) !important; border: 1px solid var(--line) !important; transition: border-color 220ms ease, transform 260ms cubic-bezier(.16,1,.3,1); }
.mdc-content .card-group > .card:hover { border-color: rgba(227,181,98,.5) !important; transform: translateY(-3px); }
.mdc-content .card-img-top { display: block; aspect-ratio: 16 / 7; object-fit: cover; background: linear-gradient(180deg, #1a1420, #0d0b10); color: transparent; font-size: 0; }
.mdc-content .card-footer { border-top: 1px solid var(--line) !important; font-size: 15px !important; }
.mdc-content .card-footer .text-muted { color: var(--ink-muted); font: 700 13px/18px var(--font-body); }
.mdc-content .card-footer span[id] { color: var(--gold) !important; font: 800 18px/22px var(--font-body); font-variant-numeric: tabular-nums; }
.mdc-content .eventstimer { font: 600 20px/1.2 var(--font-display); text-transform: uppercase; }
.mdc-content .fas, .mdc-content .far { display: none; }

/* Verify email wrapper */
.mdc-content .page-container .page-content { max-width: 620px; margin: 0 auto; }

/* Castle Siege module */
.mdc-content .castle-owner-panel .panel-body { padding: 24px; }
.mdc-content .castle-owner-panel .col-xs-4.text-center img, .mdc-content .castle-owner-panel .col-xs-4.text-center svg { display: block; margin: 0 auto 6px; border-radius: var(--radius-sm); border: 1px solid rgba(227,181,98,.4); image-rendering: pixelated; }
.mdc-content .castle-owner-ally img { image-rendering: pixelated; border-radius: 2px; }

/* Stacked cards for wide tables on phones (JS tags cells: rk-place, rk-av, rk-name, rk-stat, rk-act, rk-flag) */
@media (max-width: 600px) {
  .mdc-content table.mdc-cards { display: block; overflow: visible; border-radius: var(--radius-md); }
  .mdc-content table.mdc-cards > tbody { display: block; }
  .mdc-content table.mdc-cards tr:first-child { display: none; }
  .mdc-content table.mdc-cards tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: min-content; grid-auto-flow: row dense; align-items: center; gap: 0 10px; padding: 12px; border-bottom: 1px solid var(--line); }
  .mdc-content table.mdc-cards.has-place tr { grid-template-columns: 34px minmax(0, 1fr) minmax(0, 1fr); }
  .mdc-content table.mdc-cards.has-av tr { grid-template-columns: 48px minmax(0, 1fr) minmax(0, 1fr); }
  .mdc-content table.mdc-cards.has-place.has-av tr { grid-template-columns: 34px 48px minmax(0, 1fr) minmax(0, 1fr); }
  .mdc-content table.mdc-cards tr:last-child { border-bottom: 0; }
  .mdc-content table.mdc-cards td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; }
  .mdc-content table.mdc-cards td.rk-flag { display: none; }
  .mdc-content table.mdc-cards td.rk-place { grid-column: 1; grid-row: 1 / span 8; align-self: start; width: auto; padding-top: 12px !important; font-size: 18px; }
  .mdc-content table.mdc-cards td.rk-av { grid-row: 1 / span 8; align-self: start; grid-column: 1; }
  .mdc-content table.mdc-cards.has-place td.rk-av { grid-column: 2; }
  .mdc-content table.mdc-cards td.rk-av img { width: 48px; height: 48px; }
  .mdc-content table.mdc-cards td.rk-name { grid-column: 1 / -1; margin-bottom: 4px; font: 700 15px/20px var(--font-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .mdc-content table.mdc-cards.has-place td.rk-name, .mdc-content table.mdc-cards.has-av td.rk-name { grid-column: 2 / -1; }
  .mdc-content table.mdc-cards.has-place.has-av td.rk-name { grid-column: 3 / -1; }
  .mdc-content table.mdc-cards td.rk-stat { margin-bottom: 6px; font: 700 14px/18px var(--font-body); color: var(--ink); }
  .mdc-content table.mdc-cards td.rk-stat::before { content: attr(data-l); display: block; font: 800 9px/12px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
  .mdc-content table.mdc-cards td.rk-act { grid-column: 1 / -1; margin-top: 8px; }
  .mdc-content table.mdc-cards td.rk-act .btn { width: 100%; }
  /* Downloads: title on its own row, size + button below */
  .mdc-content .panel-downloads table { display: block; overflow: visible; }
  .mdc-content .panel-downloads tbody { display: block; }
  .mdc-content .panel-downloads tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
  .mdc-content .panel-downloads td { width: auto !important; padding: 0 !important; border: 0 !important; text-align: left !important; }
  .mdc-content .panel-downloads td:first-child { grid-column: 1 / -1; }
  /* Castle Siege owner block stacks */
  .mdc-content .castle-owner-panel .panel-body > .row > [class*="col-xs-"] { float: none; width: 100%; }
  .mdc-content .castle-owner-panel .col-xs-8 { margin-top: 16px; }
  /* Donation tiles stack */
  .mdc-page-donation .mdc-content .row > .col-xs-4 { float: none; width: 100%; }
  .mdc-content .panel-addstats .panel-body { grid-template-columns: minmax(0, 1fr); }
  .mdc-content .panel-addstats .character-name { text-align: center; }
  .mdc-content .panel-general .row > [class*="col-"] { width: 100%; }
  .mdc-content .panel-general .row:first-child { display: none; }
  .mdc-content .row.text-center > .col-xs-3 { width: calc(50% - 7px); }
  .mdc-content .card-group { grid-template-columns: minmax(0, 1fr); }
}
/* Bootstrap clearfix pseudo-elements would become grid/flex items */
.mdc-content .panel-addstats .panel-body::before, .mdc-content .panel-addstats .panel-body::after,
.mdc-content .panel-general .row::before, .mdc-content .panel-general .row::after,
.mdc-content .myaccount-table + .page-title + .row::before, .mdc-content .myaccount-table + .page-title + .row::after,
.mdc-content .row:has(> .col)::before, .mdc-content .row:has(> .col)::after { content: none; display: none; }

/* Phone data tables: compact cells. Cells may wrap so text tables (event guide, /move, skills) fit the screen instead of
   hiding columns past the edge; narrow numeric tables (reset zen) still lay out on one line because they fit. */
@media (max-width: 600px) {
  .mdc-content .mdc-dtab { font-size: 13px; line-height: 18px; }
  .mdc-content .mdc-dtab th, .mdc-content .mdc-dtab td { padding: 9px 8px; }
  .mdc-content .mdc-dtab thead th { letter-spacing: .06em; }
  .mdc-content .mdc-dtab th, .mdc-content .mdc-dtab td, .mdc-dtab .mdc-sk, .mdc-dtab code { white-space: normal; overflow-wrap: break-word; }
  .mdc-dtab .mdc-sk { margin-right: 8px; }
}
@media (max-width: 380px) {
  .mdc-content .mdc-dtab th, .mdc-content .mdc-dtab td { padding: 8px 6px; }
  .mdc-content .mdc-dtab thead th { font-size: 10px; letter-spacing: .02em; }
  .mdc-content .mdc-dtab code { padding: 3px 5px; overflow-wrap: anywhere; }
}

/* ================================================================== */
/* Roadmap (/fases) and the home teaser                                */
/* ================================================================== */
.fz { display: grid; gap: 72px; padding-block: 24px 88px; }
.fz-sec { display: grid; gap: 4px; }
.fz-note { margin: 18px 0 0; max-width: 70ch; font: 500 14px/22px var(--font-body); color: var(--ink-muted); }
.fz-foot { font-size: 13px; }
.fz-box { display: grid; gap: 10px; justify-items: start; padding: 26px; }
.mdc .fz-box h2 { margin: 0; font: 600 30px/34px var(--font-display); text-transform: uppercase; color: var(--ink); }
.fz-box p { margin: 0; font: 600 16px/24px var(--font-body); color: var(--ink); }
.fz-box__date small { margin-left: 6px; padding: 2px 8px; border-radius: var(--radius-pill); font: 800 10px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink-muted); }
.fz-box__date small.is-firm { color: var(--excellent); border-color: rgba(82,232,148,.45); }
.fz-box__imm { display: grid; gap: 6px; font-weight: 500 !important; color: var(--ink-muted) !important; }
.fz-box__imm b { font: 800 13px/16px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--ember); }
.fz .clk, .fz-box .clk, .fz-teaser .clk { display: flex; gap: 8px; margin-top: 6px; }
.fz-box .clk span, .fz-teaser .clk span { display: grid; justify-items: center; min-width: 62px; padding: 10px 6px; border-radius: var(--radius-sm); background: var(--glass); border: 1px solid rgba(227,181,98,.28); }
.fz-box .clk b, .fz-teaser .clk b { font: 800 26px/1 var(--font-body); font-variant-numeric: tabular-nums; color: var(--gold); }
.fz-box .clk small, .fz-teaser .clk small { margin-top: 6px; font: 800 9px/10px var(--font-body); letter-spacing: .14em; color: var(--ink-muted); }

/* Timeline: vertical rail on phones, horizontal from 900px */
.fz-line { position: relative; display: grid; gap: 18px; margin: 8px 0 0; padding: 0; list-style: none; }
.fz-line::before { content: ""; position: absolute; left: 21px; top: 8px; bottom: 8px; width: 2px; background: linear-gradient(180deg, var(--gold), var(--line) 40%, var(--line)); }
.fz-node { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 14px; align-items: center; }
.fz-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: var(--surface); }
.fz-dot i { font: 700 16px/1 var(--font-display); font-style: normal; color: var(--ink-muted); }
.fz-node__t { display: grid; gap: 2px; text-decoration: none; color: inherit; }
.mdc a.fz-node__t:hover b { color: var(--gold); }
.fz-node__t b { font: 600 18px/22px var(--font-display); text-transform: uppercase; color: var(--ink); transition: color 160ms ease; }
.fz-node__t small { font: 600 12px/16px var(--font-body); color: var(--ink-muted); }
.fz-node__t small.fz-st { font-weight: 800; letter-spacing: .14em; text-transform: uppercase; font-size: 10px; }
.fz-node.is-done .fz-dot { border-color: rgba(227,181,98,.5); background: rgba(227,181,98,.12); }
.fz-node.is-done .fz-dot i { color: var(--gold); }
.fz-node.is-current .fz-dot { border-color: #f6d79b; background: linear-gradient(180deg, #f6d491, var(--gold) 50%, var(--gold-deep)); box-shadow: var(--shadow-gold); animation: md-pulse 2.6s ease-out infinite; }
.fz-node.is-current .fz-dot i { color: var(--on-gold); }
.fz-node.is-current .fz-st, .fz-node.is-next .fz-st { color: var(--gold); }
.fz-node.is-imminent .fz-st { color: var(--ember); }
.fz-node.is-sealed .fz-dot { border-style: dashed; opacity: .75; }
@media (min-width: 900px) {
  .fz-line { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
  .fz-line::before { left: 8%; right: 8%; top: 21px; bottom: auto; width: auto; height: 2px; background: linear-gradient(90deg, var(--gold), var(--line) 45%, var(--line)); }
  .fz-node { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; gap: 12px; }
}

/* Phase cards */
.fz-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 20px; margin-top: 8px; }
.fz-card { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 12px; padding: 24px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-raise); scroll-margin-top: 96px; }
.fz-card__art { position: absolute; inset: 0 0 auto 0; z-index: -1; height: 170px; }
.fz-card__art img { width: 100%; height: 100%; object-fit: cover; opacity: .3; }
.fz-card__art::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13,11,16,.2), var(--surface)); }
.fz-card__h { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 2px 12px; padding-top: 34px; }
.fz-card__h .sx-kick { grid-column: 1 / -1; }
.mdc .fz-card h3 { margin: 0; font: 600 30px/34px var(--font-display); text-transform: uppercase; color: var(--ink); }
.fz-pill { padding: 4px 10px; border-radius: var(--radius-pill); font: 800 10px/14px var(--font-body); letter-spacing: .14em; text-transform: uppercase; border: 1px solid var(--line-strong); color: var(--ink-muted); background: rgba(6,5,9,.6); white-space: nowrap; }
.fz-card.is-current { border-color: rgba(227,181,98,.6); box-shadow: var(--shadow-raise), 0 0 0 1px rgba(227,181,98,.25), 0 0 48px rgba(227,181,98,.18); }
.fz-card.is-current .fz-pill { color: var(--on-gold); border-color: #f6d79b; background: linear-gradient(180deg, #f6d491, var(--gold) 50%, var(--gold-deep)); }
.fz-card.is-next .fz-pill { color: var(--gold); border-color: rgba(227,181,98,.5); }
.fz-card.is-imminent .fz-pill { color: var(--ember); border-color: rgba(255,122,69,.5); }
.fz-card.is-done .fz-pill { color: var(--excellent); border-color: rgba(82,232,148,.45); }
.fz-card__when { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font: 700 13px/18px var(--font-body); color: var(--ink); }
.fz-card__when > span { display: inline-flex; align-items: center; gap: 6px; }
.fz-card__when svg { width: 16px; height: 16px; color: var(--gold); }
.fz-card__when em { font-style: normal; color: var(--ember); }
.fz-card__when > span + span { color: var(--ink-muted); }
.fz-card__flavour { margin: 0; font: 500 15px/23px var(--font-body); color: var(--ink-muted); }
.mdc .fz-card h4 { display: flex; align-items: center; gap: 8px; margin: 6px 0 0; font: 800 11px/14px var(--font-body); letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.fz-card h4 svg { width: 16px; height: 16px; }
.fz-maps, .fz-tiers, .fz-ev { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fz-maps li { display: flex; justify-content: space-between; gap: 12px; padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(255,255,255,.03); font: 600 14px/20px var(--font-body); color: var(--ink); }
.fz-maps b { flex: none; font: 700 12px/20px var(--font-body); color: var(--ink-muted); font-variant-numeric: tabular-nums; }
.fz-tiers { grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); }
.fz-tiers li { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: radial-gradient(circle at 20% 50%, #1c1622, #0e0b11); font: 600 13px/17px var(--font-body); color: var(--ink); }
.fz-tiers .mdc-ico { width: 44px; height: 44px; }
.fz-ev li { position: relative; padding-left: 18px; font: 500 14px/21px var(--font-body); color: var(--ink-muted); }
.fz-ev li::before { content: ""; position: absolute; left: 3px; top: 8px; width: 6px; height: 6px; transform: rotate(45deg); background: var(--gold); }

/* Pledges, how it opens, FAQ, CTA */
.fz-pledges { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.fz-pledges li { display: grid; gap: 8px; align-content: start; padding: 22px; border-radius: var(--radius-md); border: 1px solid rgba(227,181,98,.28); background: linear-gradient(180deg, rgba(40,29,12,.5), rgba(14,10,6,.8)); }
.fz-pledge__i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); border: 1px solid rgba(227,181,98,.35); background: rgba(227,181,98,.08); color: var(--gold); }
.fz-pledge__i svg { width: 22px; height: 22px; }
.fz-pledges b { font: 600 19px/24px var(--font-display); text-transform: uppercase; color: var(--ink); }
.fz-pledges span { font: 500 14px/22px var(--font-body); color: var(--ink-muted); }
.fz-how { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; margin: 8px 0 0; padding: 0; list-style: none; }
.fz-how li { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px; border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.fz-how i { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid rgba(227,181,98,.5); font: 700 16px/1 var(--font-display); font-style: normal; color: var(--gold); }
.fz-how div { display: grid; gap: 4px; }
.fz-how b { font: 700 16px/22px var(--font-body); color: var(--ink); }
.fz-how span { font: 500 14px/22px var(--font-body); color: var(--ink-muted); }
.fz-faq { display: grid; gap: 10px; margin-top: 8px; max-width: 900px; }
.fz-faq details { border-radius: var(--radius-md); border: 1px solid var(--line); background: var(--surface); }
.fz-faq summary { cursor: pointer; padding: 16px 20px; font: 700 16px/22px var(--font-body); color: var(--ink); list-style-position: inside; }
.fz-faq summary:hover, .fz-faq details[open] summary { color: var(--gold); }
.fz-faq summary:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-md); }
.fz-faq p { margin: 0; padding: 0 20px 18px; font: 500 15px/24px var(--font-body); color: var(--ink-muted); }
.fz-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px; padding: 28px; }
.mdc .fz-cta h2 { margin: 0; font: 600 32px/36px var(--font-display); text-transform: uppercase; color: var(--ink); }
.fz-cta p { margin: 6px 0 0; font: 500 15px/23px var(--font-body); color: var(--ink-muted); }
.fz-cta__a { display: flex; flex-wrap: wrap; gap: 10px; }

/* Home teaser */
.fz-teaser { margin-top: 28px; }
.fz-teaser__in { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 24px 28px; }
.fz-teaser__t { display: grid; gap: 8px; justify-items: start; min-width: 0; }
.mdc .fz-teaser h2 { margin: 0; font: 600 28px/32px var(--font-display); text-transform: uppercase; color: var(--ink); }
.fz-teaser p { margin: 0; font: 500 15px/22px var(--font-body); color: var(--ink-muted); }
.fz-dots { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 4px 0 0; padding: 0; list-style: none; }
.fz-dots li { display: inline-flex; align-items: center; gap: 6px; font: 700 12px/16px var(--font-body); color: var(--ink-muted); }
.fz-dots i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--line-strong); font: 700 11px/1 var(--font-display); font-style: normal; }
.fz-dots li.is-done i { border-color: rgba(227,181,98,.5); color: var(--gold); }
.fz-dots li.is-current { color: var(--ink); }
.fz-dots li.is-current i { border-color: #f6d79b; background: var(--gold); color: var(--on-gold); box-shadow: var(--shadow-gold); }
.fz-dots li.is-sealed i { border-style: dashed; }
.mdc .fz-teaser__go { font: 800 12px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-decoration: none; }
.mdc .fz-teaser__go:hover { color: #ffe9bd; }
.mdc-info__phases a { color: var(--gold); }

@media (max-width: 600px) {
  .fz { gap: 56px; padding-bottom: 64px; }
  .fz-box { padding: 20px; }
  .fz-box .clk span, .fz-teaser .clk span { min-width: 0; flex: 1; }
  .fz-box .clk, .fz-teaser .clk, .fz-teaser__cd { width: 100%; }
  .fz-box .clk b, .fz-teaser .clk b { font-size: 22px; }
  .fz-card { padding: 20px; }
  .mdc .fz-card h3 { font-size: 26px; line-height: 30px; }
  .fz-teaser__in { padding: 20px; }
  .mdc .fz-teaser h2, .mdc .fz-cta h2 { font-size: 24px; line-height: 28px; }
  .fz-cta__a, .fz-cta__a .md-btn { width: 100%; }
}
@media (prefers-reduced-motion: reduce) { .fz-node.is-current .fz-dot { animation: none; } }