/* Live ops pages (events, leaderboard, profile) in the Arceus look.
   Everything is scoped under main.ops and prefixed o- so it never touches the old
   .ops rules in brand.css that other markup may still use. Mobile first.
   Needs arceus.css (tokens, a- components) and body class="arc". */

/* ── hero: art, vignette, a creature on the right, cream title ─────────── */
.ops{--o-gap:clamp(18px,2.4vw,26px)}
.ops .o-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(40px,7vw,96px) 0 clamp(34px,5vw,64px);
  background:var(--a-night)}
.ops .o-hero__art{position:absolute;inset:0;z-index:-3}
.ops .o-hero__art img{width:100%;height:100%;object-fit:cover;object-position:50% 40%;opacity:.5;filter:saturate(1.05)}
.ops .o-hero::before{content:"";position:absolute;inset:0;z-index:-2;
  background:linear-gradient(90deg,rgba(11,13,20,.96) 0%,rgba(11,13,20,.82) 45%,rgba(11,13,20,.35) 100%),
             linear-gradient(0deg,var(--a-night) 0%,transparent 45%)}
.ops .o-hero .a-vignette{z-index:-1}
.ops .o-hero{min-height:clamp(0px,34vw,470px)}
.ops .o-hero__mate{position:absolute;right:max(-40px,calc((100vw - var(--a-maxw))/2));bottom:-4%;height:min(112%,520px);width:auto;max-width:44vw;object-fit:contain;object-position:50% 100%;z-index:-1;
  pointer-events:none;opacity:.95;filter:drop-shadow(0 30px 40px rgba(0,0,0,.55));animation:oFloat 7s ease-in-out infinite}
.ops .o-hero__in{position:relative;max-width:var(--a-maxw)}
.ops .o-hero .a-h1{font-size:clamp(40px,6vw,78px);margin:14px 0 14px;max-width:14ch;overflow-wrap:anywhere}
.ops .o-hero .a-lead{max-width:56ch}
.ops .o-kicker{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px}
.ops .o-kicker .a-rulehead{width:auto}
@media(max-width:760px){
  .ops .o-hero__mate{height:240px;max-width:60vw;right:-10vw;bottom:auto;top:10px;opacity:.3}
}
@keyframes oFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* ── HUD pills (status, time, players) ────────────────────────────────── */
.ops .o-hud{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ops .o-pill{display:inline-flex;flex-direction:column;justify-content:center;min-height:58px;min-width:108px;padding:8px 18px;
  border-radius:16px;background:var(--a-smoke-hi);box-shadow:var(--a-rim);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ops .o-pill .k{font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--a-dim)}
.ops .o-pill .v{font-family:var(--a-display);font-size:22px;line-height:1.15;color:var(--a-cream);font-variant-numeric:tabular-nums}
.ops .o-pill--time .v{color:var(--a-gold-hi)}

/* ── state tag (live, scheduled, settled) ─────────────────────────────── */
.ops .o-state{display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 11px;border-radius:var(--a-r-pill);
  font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
  color:var(--a-soft);background:rgba(255,255,255,.07);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14)}
.ops .o-state::before{content:"";width:6px;height:6px;background:currentColor;transform:rotate(45deg)}
.ops .o-state.live{color:var(--a-leaf);background:rgba(111,207,95,.12);box-shadow:inset 0 0 0 1px rgba(111,207,95,.45)}
.ops .o-state.live::before{border-radius:50%;transform:none;animation:aLive 2s infinite}
.ops .o-state.scheduled{color:var(--a-gold-hi);background:rgba(231,182,74,.12);box-shadow:inset 0 0 0 1px rgba(231,182,74,.45)}
.ops .o-state.settled{color:var(--a-dim)}
.ops .a-panel__head .o-state{background:rgba(31,36,48,.08);box-shadow:inset 0 0 0 1px rgba(31,36,48,.22)}
.ops .a-panel__head .o-state.live{color:#2F7D22}
.ops .a-panel__head .o-state.scheduled{color:#8A6200}
.ops .a-panel__head .o-state.settled{color:var(--a-ink-2)}
.ops .o-repeat{font-weight:800;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-ink-2);opacity:.75}

/* ── section heads inside the page ────────────────────────────────────── */
.ops .o-sec{padding:clamp(30px,5vw,60px) 0}
.ops .o-sec+.o-sec{padding-top:0}
.ops .o-h{display:flex;align-items:center;gap:14px;margin:0 0 18px}
.ops .o-h .a-h3{font-size:clamp(22px,2.4vw,30px)}
.ops .o-h::after{content:"";flex:1 1 auto;height:1px;background:linear-gradient(90deg,var(--a-rule),transparent)}
.ops .o-grid{display:grid;grid-template-columns:1fr;gap:var(--o-gap)}
@media(min-width:760px){.ops .o-grid{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1120px){.ops .o-grid--3{grid-template-columns:repeat(3,1fr)}}

/* ── competition panel (cream head, smoky body) ───────────────────────── */
.ops .o-comp{display:flex;flex-direction:column;padding-bottom:0;overflow:hidden;
  transition:transform var(--a-slow) var(--a-ease),box-shadow var(--a-slow) var(--a-ease)}
.ops .o-comp:hover{transform:translateY(-4px);box-shadow:inset 0 0 0 1px rgba(254,214,84,.45),0 26px 50px rgba(0,0,0,.5)}
.ops .o-comp .a-panel__head{flex-wrap:wrap;row-gap:6px}
.ops .o-comp__name{min-width:0;overflow-wrap:anywhere}
.ops .o-comp .a-panel__body{display:flex;flex-direction:column;gap:14px;flex:1 1 auto;padding:18px 20px 20px}
.ops .o-comp__desc{font-size:15px;line-height:1.55;color:var(--a-soft);margin:0}
.ops .o-comp__metric{display:flex;flex-wrap:wrap;gap:8px;align-items:center;font-weight:800;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--a-dim)}
.ops .o-comp__foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px;border-top:1px solid var(--a-rule-2)}
.ops .o-comp__foot .btn{flex:0 0 auto}
.ops .o-when{font-weight:800;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--a-dim);font-variant-numeric:tabular-nums}
.ops .o-when b{color:var(--a-gold-hi);font-family:var(--a-display);font-weight:400;font-size:18px;letter-spacing:.02em;margin-left:4px}

/* the big featured live one */
.ops .o-feature{display:grid;grid-template-columns:1fr;gap:0;overflow:hidden;padding:0}
@media(min-width:900px){.ops .o-feature{grid-template-columns:1.25fr 1fr}}
.ops .o-feature__main{display:flex;flex-direction:column;gap:16px;padding:22px 22px 24px}
.ops .o-feature__side{padding:22px;background:rgba(0,0,0,.22);box-shadow:inset 1px 0 0 var(--a-rule-2)}
@media(max-width:899px){.ops .o-feature__side{box-shadow:inset 0 1px 0 var(--a-rule-2)}}
.ops .o-clock{display:flex;gap:10px;align-items:flex-end;flex-wrap:wrap}
.ops .o-clock__u{display:flex;flex-direction:column;align-items:center;min-width:66px;padding:10px 8px 8px;border-radius:14px;
  background:var(--a-band);box-shadow:var(--a-rim)}
.ops .o-clock__u b{font-family:var(--a-display);font-weight:400;font-size:clamp(30px,4vw,44px);line-height:1;color:var(--a-cream);font-variant-numeric:tabular-nums}
.ops .o-clock__u span{margin-top:6px;font-weight:800;font-size:9.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--a-dim)}
.ops .o-clock{flex-wrap:nowrap}
@media(max-width:520px){.ops .o-clock{gap:6px}.ops .o-clock__u{flex:1 1 0;min-width:0}.ops .o-clock__sep{display:none}}
.ops .o-clock__sep{font-family:var(--a-display);font-size:30px;color:var(--a-gold);padding-bottom:22px}

/* prize ladder: smoky rows, gold rank diamonds */
.ops .o-ladder{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.ops .o-ladder li{display:flex;align-items:center;gap:12px;min-height:46px;padding:8px 14px;border-radius:10px;background:var(--a-band);box-shadow:var(--a-rim)}
.ops .o-ladder .r{flex:1 1 auto;font-weight:700;color:var(--a-text);font-size:14.5px}
.ops .o-ladder .p{font-family:var(--a-display);font-size:18px;color:var(--a-gold-hi);white-space:nowrap}
.ops .o-ladder li:first-child{background:var(--a-cream);box-shadow:none}
.ops .o-ladder li:first-child .r{color:var(--a-ink)}
.ops .o-ladder li:first-child .p{color:var(--a-gold-lo)}
.ops .o-medal{position:relative;display:inline-grid;place-items:center;width:30px;height:30px;flex:0 0 auto;
  font-family:var(--a-display);font-size:13px;color:#2B1E05}
.ops .o-medal::before{content:"";position:absolute;inset:4px;transform:rotate(45deg);border-radius:4px;background:var(--m,#6B7080);
  box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 4px 10px rgba(0,0,0,.35)}
.ops .o-medal i{position:relative;font-style:normal}
.ops .o-medal.m1{--m:linear-gradient(135deg,#FFE58A,#E7B64A 55%,#B8862A)}
.ops .o-medal.m2{--m:linear-gradient(135deg,#F2F4F8,#B9C0CC 55%,#8A93A6)}
.ops .o-medal.m3{--m:linear-gradient(135deg,#F3C9A0,#C98A57 55%,#8E5A33)}
.ops .o-medal.mx{--m:rgba(255,255,255,.1);color:var(--a-soft)}
.ops .o-medal.mx::before{box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}

/* milestone chips */
.ops .o-miles{display:flex;flex-wrap:wrap;gap:8px}
.ops .o-mile{display:inline-flex;align-items:center;gap:8px;height:32px;padding:0 12px;border-radius:var(--a-r-pill);
  background:var(--a-band);box-shadow:var(--a-rim);font-size:13px;font-weight:700;color:var(--a-soft)}
.ops .o-mile b{font-family:var(--a-display);font-weight:400;color:var(--a-gold-hi);font-size:15px}

/* finished and coming up as band rows */
.ops .o-rows{display:flex;flex-direction:column;gap:6px;list-style:none;margin:0;padding:0}
.ops .o-row{position:relative;display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 14px;min-height:58px;padding:10px 16px 10px 32px;
  border-radius:10px;background:var(--a-band);box-shadow:var(--a-rim);color:var(--a-text);text-decoration:none;
  transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease),transform var(--a-dur) var(--a-ease)}
.ops .o-row::before{content:"";position:absolute;left:13px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--a-grad-gold);
  transform:rotate(45deg) scale(0);transition:transform var(--a-dur) var(--a-back)}
.ops .o-row:hover{background:var(--a-band-hi)}
.ops .o-row:hover,.ops .o-row:focus-visible{background:var(--a-cream);color:var(--a-ink);transform:translateX(4px);outline:none}
.ops .o-row:hover::before,.ops .o-row:focus-visible::before{transform:rotate(45deg) scale(1)}
.ops .o-row__t{font-weight:800;min-width:0;overflow-wrap:anywhere}
.ops .o-row__s{display:block;font-weight:600;font-size:13px;color:var(--a-dim);margin-top:2px}
.ops .o-row:hover .o-row__s,.ops .o-row:focus-visible .o-row__s{color:var(--a-ink-2)}
.ops .o-row__go{font-weight:800;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--a-gold-hi);white-space:nowrap}
.ops .o-row:hover .o-row__go,.ops .o-row:focus-visible .o-row__go{color:var(--a-gold-lo)}

/* empty, error, ok, skeleton */
.ops .o-empty{display:flex;flex-direction:column;align-items:center;gap:12px;padding:38px 22px;text-align:center;border-radius:var(--a-r-lg);
  background:var(--a-smoke);box-shadow:var(--a-rim);color:var(--a-soft)}
.ops .o-empty::before{content:"";width:12px;height:12px;background:var(--a-grad-gold);transform:rotate(45deg);box-shadow:0 0 14px rgba(254,214,84,.5)}
.ops .o-empty b{font-family:var(--a-display);font-weight:400;font-size:22px;color:var(--a-cream)}
.ops .o-err{padding:18px 20px;border-radius:14px;background:rgba(255,122,115,.1);box-shadow:inset 0 0 0 1px rgba(255,122,115,.45);color:#FFC1BD;font-weight:600}
.ops .o-ok{display:flex;align-items:center;gap:14px;padding:14px 18px;border-radius:14px;background:var(--a-cream);color:var(--a-ink);font-weight:700;
  box-shadow:0 14px 30px rgba(0,0,0,.3)}
.ops .o-ok::before{content:"";width:10px;height:10px;flex:0 0 auto;background:var(--a-grad-gold);transform:rotate(45deg)}
.ops .o-fine{font-size:13px;color:var(--a-dim);line-height:1.55;margin-top:16px}
.ops .o-skel-card{height:220px;border-radius:var(--a-r-lg);background:var(--a-smoke);box-shadow:var(--a-rim);padding:22px;display:flex;flex-direction:column;gap:14px}

/* ── leaderboard ──────────────────────────────────────────────────────── */
.ops .o-select{position:relative;display:inline-block;width:min(100%,560px);margin-top:18px}
.ops .o-select select{width:100%;height:50px;padding:0 44px 0 18px;border:0;border-radius:14px;appearance:none;-webkit-appearance:none;
  background:var(--a-smoke-hi);box-shadow:var(--a-rim);color:var(--a-cream);font:700 15px var(--a-body);cursor:pointer;text-overflow:ellipsis}
.ops .o-select select:focus-visible{outline:2px solid var(--a-gold-hi);outline-offset:2px}
.ops .o-select select option{background:#161822;color:var(--a-cream)}
.ops .o-select::after{content:"";position:absolute;right:18px;top:50%;width:8px;height:8px;margin-top:-6px;border-right:2px solid var(--a-gold);border-bottom:2px solid var(--a-gold);
  transform:rotate(45deg);pointer-events:none}
.ops .o-board{display:grid;grid-template-columns:1fr;gap:var(--o-gap);align-items:start}
@media(min-width:1000px){.ops .o-board{grid-template-columns:minmax(0,1fr) 340px}}
.ops .o-board__side{display:flex;flex-direction:column;gap:var(--o-gap)}

/* podium */
.ops .o-podium{display:grid;grid-template-columns:1fr;gap:12px;margin-bottom:18px}
@media(min-width:640px){.ops .o-podium{grid-template-columns:1fr 1.12fr 1fr;align-items:end}}
.ops .o-pod{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:26px 14px 18px;border-radius:var(--a-r-lg);text-align:center;
  background:linear-gradient(180deg,rgba(28,29,40,.9),rgba(12,13,20,.92));box-shadow:var(--a-rim),0 16px 34px rgba(0,0,0,.35);min-width:0}
.ops .o-pod .o-medal{width:46px;height:46px;font-size:19px}
.ops .o-pod__n{font-family:var(--a-display);font-size:22px;color:var(--a-cream);max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ops .o-pod__s{font-family:var(--a-display);font-size:30px;line-height:1;color:var(--a-gold-hi)}
.ops .o-pod__r{font-size:12.5px;font-weight:700;color:var(--a-dim)}
.ops .o-pod--1{background:linear-gradient(180deg,#F7F1E1,#EADFC3);box-shadow:0 0 0 1px rgba(254,214,84,.6),0 24px 50px rgba(231,182,74,.22);padding-top:34px}
.ops .o-pod--1 .o-pod__n{color:var(--a-ink)}
.ops .o-pod--1 .o-pod__s{color:var(--a-gold-lo)}
.ops .o-pod--1 .o-pod__r{color:var(--a-ink-2)}
@media(min-width:640px){.ops .o-pod--1{order:2}.ops .o-pod--2{order:1}.ops .o-pod--3{order:3}}

/* the table, as smoky rows */
.ops .o-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.ops table.o-bt{width:100%;border-collapse:separate;border-spacing:0 6px}
.ops .o-bt th{padding:4px 14px;text-align:left;font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--a-dim)}
.ops .o-bt td{padding:12px 14px;background:var(--a-band);color:var(--a-text);vertical-align:middle;font-size:15px;
  transition:background var(--a-dur) var(--a-ease),color var(--a-dur) var(--a-ease)}
.ops .o-bt td:first-child{border-radius:10px 0 0 10px;width:64px}
.ops .o-bt td:last-child{border-radius:0 10px 10px 0}
.ops .o-bt tbody tr:hover td{background:var(--a-band-hi)}
.ops .o-bt tr.me td{background:var(--a-cream);color:var(--a-ink)}
.ops .o-bt tr.me td.o-score{color:var(--a-gold-lo)}
.ops .o-bt td[colspan]{background:transparent;padding:0}
.ops .o-bt .o-name{font-weight:700;min-width:0;overflow-wrap:anywhere}
.ops .o-bt .o-you{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:99px;background:var(--a-ink);color:var(--a-gold-hi);
  font-size:10px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;vertical-align:2px}
.ops .o-bt td.o-score,.ops .o-score{font-family:var(--a-display);font-size:20px;text-align:right;color:var(--a-cream);white-space:nowrap;font-variant-numeric:tabular-nums}
.ops th.o-r{text-align:right}
.ops .o-bt td.o-rew,.ops .o-rew{font-weight:700;font-size:13.5px;color:var(--a-gold-hi);white-space:nowrap}
.ops .o-bt tr.me td.o-rew{color:var(--a-gold-lo)}
.ops .o-bt td.o-at{font-size:13px;color:var(--a-dim);white-space:nowrap}
.ops .o-bt tr.me td.o-at{color:var(--a-ink-2)}
@media(max-width:640px){
  .ops .o-bt .o-hide-s{display:none}
  .ops .o-bt td{padding:11px 10px;font-size:14px}
  .ops .o-bt td:first-child{width:48px}
  .ops .o-bt td.o-rew,.ops .o-rew{white-space:normal;font-size:12.5px}
}

/* ── profile ──────────────────────────────────────────────────────────── */
.ops .o-form{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:24px;padding:10px;border-radius:18px;
  background:var(--a-smoke-hi);box-shadow:var(--a-rim);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);max-width:720px}
.ops .o-input{flex:1 1 220px;min-width:0;height:48px;padding:0 16px;border:0;border-radius:12px;background:rgba(255,255,255,.06);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);color:var(--a-cream);font:700 16px var(--a-body);letter-spacing:.02em}
.ops .o-input::placeholder{color:var(--a-dim);font-weight:600}
.ops .o-input:focus{outline:none;box-shadow:inset 0 0 0 2px var(--a-gold)}
.ops .o-form .btn{flex:0 0 auto}
@media(max-width:520px){.ops .o-form .btn{flex:1 1 auto}}
.ops .o-place{display:flex;align-items:center;gap:16px}
.ops .o-place__rank{font-family:var(--a-display);font-size:clamp(46px,6vw,64px);line-height:.9;color:var(--a-gold-hi)}
.ops .o-place__rank small{font-size:.45em;color:var(--a-dim);margin-right:2px}
.ops .o-place__k{font-weight:800;font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--a-dim)}
.ops .o-place__v{font-family:var(--a-display);font-size:26px;color:var(--a-cream);line-height:1.1}
.ops .o-place__sep{width:1px;align-self:stretch;background:var(--a-rule)}
.ops .o-track{font-size:14px;font-weight:700;color:var(--a-soft)}
.ops .o-track b{color:var(--a-gold-hi)}
.ops .o-how{display:grid;grid-template-columns:1fr;gap:12px}
@media(min-width:760px){.ops .o-how{grid-template-columns:repeat(3,1fr)}}
.ops .o-how__i{display:flex;gap:14px;padding:18px;border-radius:var(--a-r-lg);background:var(--a-smoke);box-shadow:var(--a-rim)}
.ops .o-how__i .n{font-family:var(--a-display);font-size:28px;line-height:1;color:var(--a-gold)}
.ops .o-how__i b{display:block;color:var(--a-cream);margin-bottom:4px}
.ops .o-how__i p{font-size:14px;line-height:1.5;margin:0}

/* reveal for things the scripts add (arceus.js handles .a-reveal on first paint) */
.ops .o-in{animation:oIn var(--a-reveal) var(--a-ease) both;animation-delay:calc(var(--i,0) * 60ms)}
@keyframes oIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion:reduce){
  .ops .o-hero__mate,.ops .o-state.live::before,.ops .o-in{animation:none}
  .ops .o-comp,.ops .o-row{transition:none}
}