@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600;700;800&family=Barlow:wght@400;500;600;700;800&display=swap");

/* MU Dito — cinematic component layer. Tokens come from tokens.css. */
.md-root, .md-root * { box-sizing: border-box; }
.md-root { font-family: var(--font-body); color: var(--ink); background: var(--ground); -webkit-font-smoothing: antialiased; font-variant-numeric: tabular-nums; }
.md-root ::selection { background: var(--gold); color: var(--on-gold); }
.md-root :focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.md-root img { max-width: 100%; }

/* ---------- Film grain + vignette (use once per full-bleed scene) ---------- */
.md-grain { position: absolute; inset: -50%; pointer-events: none; z-index: 1; opacity: .07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: md-grain 900ms steps(6) infinite; }
@keyframes md-grain { 0%{transform:translate(0,0)} 25%{transform:translate(-3%,2%)} 50%{transform:translate(2%,-3%)} 75%{transform:translate(-2%,-1%)} 100%{transform:translate(0,0)} }

/* ---------- Embers (pure CSS particles: render 30–40 spans with --x --d --s --t) ---------- */
.md-embers { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.md-ember { position: absolute; bottom: -12px; left: var(--x, 50%); width: var(--s, 3px); height: var(--s, 3px); border-radius: 50%;
  background: radial-gradient(circle, #ffd6a0 0%, var(--ember) 45%, rgba(255,122,69,0) 70%);
  box-shadow: 0 0 8px 2px rgba(255,122,69,.55); opacity: 0;
  animation: md-ember var(--t, 9s) linear var(--d, 0s) infinite; }
@keyframes md-ember { 0%{transform:translate3d(0,0,0) scale(1);opacity:0} 10%{opacity:.95} 60%{opacity:.8} 100%{transform:translate3d(var(--dx,40px),-105vh,0) scale(.4);opacity:0} }

/* ---------- Buttons ---------- */
.md-btn { --_fg: var(--ink); position: relative; isolation: isolate; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 52px; padding: 14px 28px; border-radius: var(--radius-sm); border: 1px solid rgba(255,255,255,.18); background: rgba(13,11,16,.35); color: var(--_fg);
  font: 800 13px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; cursor: pointer; backdrop-filter: blur(8px);
  transition: transform 180ms cubic-bezier(.16,1,.3,1), box-shadow 260ms ease, border-color 200ms ease, background-color 200ms ease; -webkit-tap-highlight-color: transparent; }
.md-btn svg { width: 18px; height: 18px; flex: none; }
.md-btn:hover { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.06); }
.md-btn:active { transform: translateY(1px) scale(.985); }
.md-btn--gold { --_fg: var(--on-gold); border-color: #f6d79b; background: linear-gradient(180deg, #f6d491 0%, var(--gold) 46%, var(--gold-deep) 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -2px 0 rgba(0,0,0,.18), 0 6px 18px rgba(0,0,0,.4); }
.md-btn--gold::after { content: ""; position: absolute; top: -10%; bottom: -10%; left: -45%; width: 28%; z-index: -1; opacity: 0; transform: skewX(-20deg);
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.75), transparent); }
.md-btn--gold:hover, .md-btn--gold:focus-visible { box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--shadow-gold); background: linear-gradient(180deg, #f9dca4 0%, #ebc072 46%, var(--gold-deep) 100%); }
.md-btn--gold:hover::after, .md-btn--gold:focus-visible::after { animation: md-sheen 760ms cubic-bezier(.16,1,.3,1); }
.md-btn--lg { min-height: 60px; padding: 18px 36px; font-size: 14px; }
.md-btn--block { width: 100%; }
.md-btn[disabled], .md-btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; box-shadow: none; }
@keyframes md-sheen { 0%{left:-45%;opacity:0} 15%{opacity:1} 100%{left:130%;opacity:0} }

/* Play (trailer) */
.md-play { position: relative; display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: var(--radius-pill); border: 1px solid rgba(255,255,255,.5);
  background: rgba(13,11,16,.4); color: var(--ink); cursor: pointer; backdrop-filter: blur(8px); transition: transform 220ms cubic-bezier(.16,1,.3,1), background-color 200ms ease; }
.md-play::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; border: 1px solid var(--gold); animation: md-ring 2.4s cubic-bezier(.16,1,.3,1) infinite; }
.md-play svg { width: 22px; height: 22px; margin-left: 3px; }
.md-play:hover { transform: scale(1.06); background: rgba(227,181,98,.18); }
@keyframes md-ring { 0%{transform:scale(1);opacity:.9} 100%{transform:scale(1.7);opacity:0} }

/* ---------- Live ticker ---------- */
.md-ticker { display: flex; align-items: center; height: 36px; overflow: hidden; background: rgba(6,5,9,.86); border-bottom: 1px solid var(--line); font: 700 12px/16px var(--font-body); letter-spacing: .08em; text-transform: uppercase; color: var(--ink-muted); }
.md-ticker__live { flex: none; display: flex; align-items: center; gap: 8px; height: 100%; padding: 0 16px; background: var(--blood); color: #fff; }
.md-ticker__live i { width: 7px; height: 7px; border-radius: 50%; background: #fff; animation: md-blink 1.4s ease-in-out infinite; }
.md-ticker__track { display: flex; gap: 48px; padding-left: 24px; white-space: nowrap; animation: md-marquee 38s linear infinite; }
.md-ticker__track b { color: var(--ink); font-weight: 800; }
.md-ticker__track em { font-style: normal; color: var(--ember); }
.md-ticker:hover .md-ticker__track { animation-play-state: paused; }
@keyframes md-marquee { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes md-blink { 50%{opacity:.25} }

/* ---------- Navigation ---------- */
.md-nav { display: flex; align-items: center; gap: 32px; padding: 14px 32px; }
.md-nav__logo { width: 64px; height: 64px; filter: drop-shadow(0 6px 18px rgba(0,0,0,.6)); }
.md-nav__links { display: flex; gap: 28px; margin-right: auto; }
.md-nav__links a { position: relative; padding: 8px 0; color: var(--ink); opacity: .78; font: 800 13px/16px var(--font-body); letter-spacing: .14em; text-transform: uppercase; text-decoration: none; transition: opacity 160ms ease; }
.md-nav__links a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 320ms cubic-bezier(.16,1,.3,1); }
.md-nav__links a:hover, .md-nav__links a[aria-current="page"] { opacity: 1; }
.md-nav__links a:hover::after, .md-nav__links a[aria-current="page"]::after { transform: scaleX(1); }
.md-nav--solid { background: var(--glass); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); }

/* ---------- Ornamental heading ---------- */
.md-heading { display: grid; gap: 16px; justify-items: var(--align, center); text-align: var(--talign, center); }
.md-heading__title { margin: 0; font: 600 64px/1 var(--font-display); text-transform: uppercase; letter-spacing: .01em; color: var(--ink); text-wrap: balance; }
.md-heading__orn { display: flex; align-items: center; gap: 12px; width: min(280px, 70%); color: var(--gold); }
.md-heading__orn::before, .md-heading__orn::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong)); }
.md-heading__orn::after { background: linear-gradient(90deg, var(--line-strong), transparent); }
.md-heading__orn i { width: 9px; height: 9px; transform: rotate(45deg); border: 1px solid var(--gold); background: rgba(227,181,98,.25); }
.md-heading__lead { margin: 0; max-width: 60ch; font: 500 18px/29px var(--font-body); color: var(--ink-muted); }

/* ---------- Item tooltip (MU) ---------- */
.md-tip { display: grid; justify-items: center; gap: 2px; min-width: 220px; max-width: 320px; padding: 16px 24px; background: var(--tooltip); color: var(--tip-ink);
  border: 1px solid rgba(255,255,255,.08); border-radius: var(--radius-tip); box-shadow: var(--shadow-tip); text-align: center; font: 600 14px/20px var(--font-body); backdrop-filter: blur(6px); }
.md-tip__name { font: 600 18px/24px var(--font-display); margin-bottom: 8px; }
.md-tip__name--excellent, .md-tip__line--excellent { color: var(--tip-excellent); }
.md-tip__name--ancient, .md-tip__line--ancient { color: var(--tip-ancient); }
.md-tip__line--level { color: var(--tip-level); }
.md-tip__line--danger { color: var(--tip-danger); }
.md-tip__gap { height: 8px; }

/* ---------- Inventory (MU slots) ---------- */
.md-inv { display: grid; grid-template-columns: repeat(var(--cols, 8), minmax(0, 1fr)); gap: 4px; padding: 12px; background: linear-gradient(180deg, #120f16, #0a080d); border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.6), var(--shadow-raise); }
.md-slot { position: relative; aspect-ratio: 1; display: grid; place-items: center; background: radial-gradient(circle at 50% 40%, #1d1823, #0e0b11); border: 1px solid #2c2532; border-radius: var(--radius-tip);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04), inset 0 -2px 6px rgba(0,0,0,.6); cursor: pointer; transition: border-color 160ms ease, transform 200ms cubic-bezier(.16,1,.3,1); }
.md-slot img { width: 78%; height: 78%; 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); }
.md-slot--wide { grid-column: span 2; aspect-ratio: 2 / 1; }
.md-slot--tall { grid-row: span 2; aspect-ratio: auto; }
.md-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); }
.md-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); }
.md-slot:hover, .md-slot:focus-visible { border-color: var(--gold); z-index: 5; }
.md-slot:hover img, .md-slot:focus-visible img { transform: scale(1.12) translateY(-2px); }
.md-slot .md-tip { position: absolute; left: 50%; bottom: calc(100% + 10px); transform: translate(-50%, 6px); opacity: 0; pointer-events: none; z-index: 10; min-width: 200px;
  transition: opacity 160ms ease, transform 220ms cubic-bezier(.16,1,.3,1); }
.md-slot:hover .md-tip, .md-slot:focus-visible .md-tip { opacity: 1; transform: translate(-50%, 0); }

/* ---------- Class showcase ---------- */
.md-class-tab { display: grid; gap: 4px; justify-items: center; min-width: 88px; padding: 10px 8px; border: 1px solid transparent; border-radius: var(--radius-sm); background: none; color: var(--ink-muted); cursor: pointer;
  font: 800 11px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; transition: color 160ms ease, border-color 200ms ease, background-color 200ms ease; }
.md-class-tab img { width: 64px; height: 54px; object-fit: cover; object-position: 50% 20%; border-radius: var(--radius-tip); filter: grayscale(.8) brightness(.7); transition: filter 300ms ease, transform 300ms cubic-bezier(.16,1,.3,1); }
.md-class-tab:hover { color: var(--ink); }
.md-class-tab:hover img { filter: grayscale(.2) brightness(.95); }
.md-class-tab[aria-pressed="true"] { color: var(--ink); border-color: rgba(227,181,98,.5); background: rgba(227,181,98,.08); }
.md-class-tab[aria-pressed="true"] img { filter: none; transform: translateY(-2px); }
.md-stat { display: grid; grid-template-columns: 96px 1fr; align-items: center; gap: 12px; font: 700 12px/16px var(--font-body); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-muted); }
.md-stat > span { height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.md-stat > span > i { display: block; height: 100%; width: var(--v, 50%); background: linear-gradient(90deg, var(--gold-deep), var(--gold)); border-radius: inherit; animation: md-fill 900ms cubic-bezier(.16,1,.3,1) both; }
@keyframes md-fill { from{width:0} }

/* ---------- Event schedule ---------- */
.md-event { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 14px; padding: 14px 16px; border-bottom: 1px solid var(--line); transition: background-color 160ms ease; }
.md-event:hover { background: rgba(255,255,255,.03); }
.md-event__icon { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid var(--line); border-radius: var(--radius-tip); background: var(--surface-raised); }
.md-event__icon img { width: 36px; height: 36px; object-fit: contain; image-rendering: pixelated; }
.md-event__name { font: 600 19px/24px var(--font-display); color: var(--ink); }
.md-event__map { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.md-event__time { font: 800 22px/26px var(--font-body); color: var(--ink); text-align: right; }
.md-event__time small { display: block; font: 700 11px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-muted); }
.md-event--soon .md-event__time { color: var(--ember); text-shadow: 0 0 18px rgba(255,122,69,.45); }
.md-event--live .md-event__time { color: var(--excellent); }

/* ---------- Podium ---------- */
.md-podium { display: grid; grid-template-columns: 1fr 1.15fr 1fr; align-items: end; gap: 12px; }
.md-podium__p { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0 12px 20px; border-radius: var(--radius-md); background: linear-gradient(180deg, rgba(255,255,255,.02), var(--surface)); border: 1px solid var(--line); text-align: center; overflow: hidden; }
.md-podium__p img { width: 120%; max-width: none; margin-top: -10%; filter: drop-shadow(0 18px 24px rgba(0,0,0,.6)); }
.md-podium__p--1 { border-color: rgba(227,181,98,.55); box-shadow: var(--shadow-gold); }
.md-podium__rank { position: absolute; top: 10px; left: 12px; font: 600 34px/1 var(--font-display); color: var(--ink-muted); }
.md-podium__p--1 .md-podium__rank { color: var(--gold); }
.md-podium__name { font: 600 22px/26px var(--font-display); color: var(--ink); }
.md-podium__meta { font: 600 13px/18px var(--font-body); color: var(--ink-muted); }
.md-podium__val { font: 800 16px/22px var(--font-body); color: var(--gold); }
.md-rank { display: grid; grid-template-columns: 36px 1fr auto; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-sm); transition: background-color 160ms ease; }
.md-rank:hover { background: var(--surface-raised); }
.md-rank__pos { font: 800 15px/22px var(--font-body); color: var(--ink-muted); text-align: center; }
.md-rank__name { font: 700 15px/22px var(--font-body); color: var(--ink); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.md-rank__name small { display: block; font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.md-rank__value { font: 800 15px/22px var(--font-body); color: var(--ink); }

/* ---------- News card ---------- */
.md-news { position: relative; display: grid; align-content: end; min-height: 320px; padding: 22px; overflow: hidden; border-radius: var(--radius-md); border: 1px solid var(--line); text-decoration: none; color: var(--ink); isolation: isolate; }
.md-news > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transform: scale(1.02); transition: transform 900ms cubic-bezier(.16,1,.3,1), filter 400ms ease; filter: saturate(.85) brightness(.75); }
.md-news::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(6,5,9,0) 30%, rgba(6,5,9,.92) 100%); }
.md-news:hover > img { transform: scale(1.08); filter: saturate(1) brightness(.85); }
.md-news__meta { display: flex; gap: 10px; align-items: center; font: 600 13px/18px var(--font-body); color: var(--ink-muted); }
.md-news__title { margin-top: 8px; font: 600 26px/30px var(--font-display); color: var(--ink); text-wrap: balance; transition: color 200ms ease; }
.md-news:hover .md-news__title { color: var(--gold); }
.md-chip { display: inline-flex; align-items: center; padding: 3px 8px; border-radius: var(--radius-tip); font: 800 11px/14px var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--on-gold); background: var(--gold); }
.md-chip--blood { background: var(--blood); color: #fff; }
.md-chip--azure { background: var(--azure); color: #fff; }

/* ---------- Field ---------- */
.md-field { display: grid; gap: 6px; }
.md-field__label { font: 700 13px/18px var(--font-body); letter-spacing: .06em; color: var(--ink); }
.md-field__input { min-height: 52px; width: 100%; padding: 14px 16px; font: 500 16px/22px var(--font-body); color: var(--ink); background: var(--surface-raised); border: 1px solid var(--line-strong); border-radius: var(--radius-tip); transition: border-color 160ms ease, box-shadow 160ms ease; }
.md-field__input::placeholder { color: var(--ink-muted); }
.md-field__input:focus { outline: none; border-color: var(--focus); box-shadow: 0 0 0 3px rgba(255,217,138,.2); }
.md-field__hint { font: 500 13px/18px var(--font-body); color: var(--ink-muted); }
.md-field--error .md-field__input { border-color: var(--danger); }
.md-field--error .md-field__hint { color: var(--danger); }
.md-field--ok .md-field__hint { color: var(--excellent); }

/* ---------- Mobile dock ---------- */
.md-dock { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px)); background: var(--glass); backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-raise); }
.md-dock a { display: grid; justify-items: center; gap: 2px; padding: 6px 0; color: var(--ink-muted); font: 700 11px/14px var(--font-body); text-decoration: none; }
.md-dock a svg { width: 22px; height: 22px; }
.md-dock a[aria-current="page"] { color: var(--ink); }
.md-dock__main { margin-top: -26px; }
.md-dock__main > span:first-child { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; color: var(--on-gold); background: linear-gradient(180deg, #f6d491, var(--gold) 50%, var(--gold-deep)); box-shadow: var(--shadow-gold); }

/* ---------- Server status ---------- */
.md-status { display: inline-flex; align-items: center; gap: 10px; font: 700 13px/18px var(--font-body); color: var(--ink); }
.md-status i { width: 9px; height: 9px; border-radius: 50%; background: var(--excellent); box-shadow: 0 0 0 0 rgba(82,232,148,.6); animation: md-pulse 2.2s ease-out infinite; }
@keyframes md-pulse { 0%{box-shadow:0 0 0 0 rgba(82,232,148,.55)} 100%{box-shadow:0 0 0 10px rgba(82,232,148,0)} }

@media (prefers-reduced-motion: reduce) {
  .md-grain, .md-ember, .md-play::before, .md-ticker__track, .md-ticker__live i, .md-status i, .md-btn--gold::after, .md-stat > span > i { animation: none !important; }
  .md-ember { display: none; }
}