/* OEC brand theme: logo watermark background, logo palette, Recent Results ribbon polish.
   Palette sampled from the OEC "O" mark. */
:root{
  --oec-pearl:#f6f2fc;      /* logo highlight */
  --oec-silver:#dcd7e3;     /* logo body */
  --oec-violet:#8942ff;     /* outer blade */
  --oec-violet-deep:#6035c4;/* outer blade shadow */
  --oec-indigo:#371e7c;     /* inner rim */
  --oec-navy:#241a49;       /* outline */
  --oec-ink:#0f0c23;        /* deepest outline */
  --oec-night:#08061a;
}

.oec-admin-preview{min-width:0}
.oec-preview-heading{display:flex;align-items:center;justify-content:space-between;gap:18px}
.oec-preview-heading p{color:var(--oec-silver);font-size:11px;line-height:1.6;margin:8px 0 16px}
.oec-preview-heading .smallbtn{flex-shrink:0}
.oec-preview-toolbar{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}
.oec-preview-toolbar label{font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--oec-silver)}
.oec-preview-toolbar select{background:var(--oec-night);color:var(--oec-pearl);border:1px solid var(--oec-navy);padding:10px;max-width:100%}
.oec-preview-toolbar select:focus-visible{outline:2px solid var(--oec-violet);outline-offset:3px}
.oec-preview-badge{font-size:8px;letter-spacing:1px;color:var(--oec-silver);margin-left:auto}
#oecLivePreview{display:block;width:100%;height:640px;border:1px solid var(--oec-navy);background:var(--oec-night)}
@media(max-width:780px){.oec-preview-heading{align-items:flex-start;flex-direction:column;gap:4px}.oec-preview-heading .smallbtn{margin-bottom:14px}.oec-preview-badge{width:100%;margin-left:0}#oecLivePreview{height:540px}}

/* ===== Logo watermark background (fixed, behind all content) ===== */
.ambient .fx-logo{
  position:absolute;left:50%;top:50%;
  width:min(78vmin,760px);aspect-ratio:699/900;
  transform:translate3d(-50%,-50%,0);
  background:url("oec-bg-logo.webp") center/contain no-repeat;
  opacity:.075;
  filter:drop-shadow(0 0 60px rgba(137,66,255,.35));
  animation:oecLogoBreathe 14s ease-in-out infinite alternate;
  will-change:opacity;
}
.ambient .fx-logo:after{
  content:"";position:absolute;inset:-18%;
  background:radial-gradient(closest-side,rgba(96,53,196,.16),transparent 72%);
  z-index:-1;
}
@keyframes oecLogoBreathe{from{opacity:.06}to{opacity:.095}}
@media(max-width:780px){.ambient .fx-logo{width:92vmin;opacity:.07;filter:none;animation:none}}

/* ===== Recent Results ribbon: smooth, seamless, no flicker ===== */
.results-ticker{
  background:linear-gradient(90deg,var(--oec-ink),#120c2a 45%,var(--oec-night))!important;
  border-bottom:1px solid rgba(137,66,255,.24)!important;
  contain:layout paint;
}
.results-ticker-label{background:linear-gradient(135deg,var(--oec-violet),var(--oec-violet-deep))!important}
.results-ticker-label:after{border-left-color:var(--oec-violet-deep)!important}
.results-ticker-window{
  position:relative;overflow:hidden!important;contain:layout paint;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 48px),transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 28px,#000 calc(100% - 48px),transparent 100%);
}
.results-ticker-track{
  height:100%;backface-visibility:hidden;transform:translate3d(0,0,0);
  transition:opacity .45s ease;
}
.results-ticker.oec-ticker-loading .results-ticker-track{opacity:0}
.results-team-logo{flex:none;aspect-ratio:1}
.results-ticker-item:after{background:var(--oec-violet)!important}
.results-week{color:#b48cff!important}

/* ===== Staff dashboard: logo palette ===== */
#oecAuthGate{background:radial-gradient(circle at 70% 15%,rgba(137,66,255,.18),transparent 30%),radial-gradient(circle at 20% 90%,rgba(55,30,124,.35),transparent 40%),var(--oec-night)!important}
.authbox{border-color:var(--oec-indigo)!important;background:linear-gradient(145deg,#171036,var(--oec-ink))!important;box-shadow:0 30px 90px rgba(0,0,0,.45),inset 0 1px 0 rgba(246,242,252,.06)!important}

.admin-shell .admin-top h1{
  background:linear-gradient(180deg,var(--oec-pearl),var(--oec-silver) 60%,#b9b0cc);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.admin-shell .eyebrow{color:#a77bff}
.admin-shell .notice{border-left-color:var(--oec-violet)!important;background:linear-gradient(90deg,rgba(55,30,124,.35),rgba(15,12,35,.85))!important;color:#bdb4cf!important}
.admin-shell .admin-card{
  border-color:rgba(96,53,196,.38)!important;
  background:linear-gradient(160deg,rgba(36,26,73,.72),rgba(15,12,35,.9) 55%,rgba(8,6,26,.94))!important;
  box-shadow:inset 0 1px 0 rgba(246,242,252,.05),0 18px 40px rgba(0,0,0,.25);
}
.admin-shell .admin-card h2{color:var(--oec-pearl)}
.admin-shell .admin-card h2:after{content:"";display:block;width:42px;height:2px;margin-top:8px;background:linear-gradient(90deg,var(--oec-violet),var(--oec-violet-deep))}
.admin-shell .editor-item,.admin-shell .queue-item{border-color:rgba(96,53,196,.3)!important;background:rgba(15,12,35,.82)!important}
.admin-shell .field input,.admin-shell .field textarea,.admin-shell .field select,.admin-shell .input,
.authbox .field input{
  background:var(--oec-night)!important;border-color:var(--oec-navy)!important;color:var(--oec-pearl)!important;
  transition:border-color .2s ease,box-shadow .2s ease;
}
.admin-shell .field input:focus,.admin-shell .field textarea:focus,.admin-shell .field select:focus,.admin-shell .input:focus,
.authbox .field input:focus{border-color:var(--oec-violet)!important;box-shadow:0 0 0 3px rgba(137,66,255,.2)}
.admin-shell .logo-upload{border-color:var(--oec-indigo)!important;background:rgba(15,12,35,.8)!important}
.admin-shell .smallbtn:not(.approve):not(.reject):not(.danger){border-color:var(--oec-indigo);background:#140f2c;color:var(--oec-silver);transition:border-color .2s ease,background .2s ease,color .2s ease}
.admin-shell .smallbtn:not(.approve):not(.reject):not(.danger):hover{border-color:var(--oec-violet);background:#1d1442;color:var(--oec-pearl)}
.admin-shell .btn.primary,.authbox .btn.primary,#saveAll{background:linear-gradient(135deg,var(--oec-violet),var(--oec-violet-deep))!important;box-shadow:0 14px 34px rgba(137,66,255,.22)!important;color:#fff}
.admin-shell .btn.ghost{border-color:var(--oec-indigo)!important;color:var(--oec-silver)}
.admin-shell .btn.ghost:hover{border-color:var(--oec-violet)!important;color:var(--oec-pearl)}
.admin-shell .toggle{color:var(--oec-silver)}
.admin-shell input[type=checkbox],.admin-shell input[type=radio]{accent-color:var(--oec-violet)}

/* ===== 3D layer (oec-3d.js) ===== */
/* Receding floor grid */
.fx3d-floor{
  position:absolute;left:-30%;right:-30%;bottom:-2%;height:46vh;
  perspective:380px;perspective-origin:50% 0%;overflow:hidden;
  -webkit-mask-image:linear-gradient(to top,#000 10%,rgba(0,0,0,.55) 55%,transparent 100%);
  mask-image:linear-gradient(to top,#000 10%,rgba(0,0,0,.55) 55%,transparent 100%);
  opacity:.5;
}
.fx3d-floor-plane{
  position:absolute;left:0;right:0;top:0;height:220%;
  transform-origin:50% 0%;
  background-image:
    linear-gradient(rgba(137,66,255,.55) 1px,transparent 1px),
    linear-gradient(90deg,rgba(137,66,255,.45) 1px,transparent 1px);
  background-size:64px 64px;
  transform:rotateX(74deg) translate3d(0,0,0);
  animation:fx3dFloor 6s linear infinite;
  will-change:transform;
}
@keyframes fx3dFloor{to{transform:rotateX(74deg) translate3d(0,64px,0)}}

/* Extruded, slowly turning logo */
.fx3d-logo{
  position:absolute;left:50%;top:50%;
  width:min(70vmin,680px);aspect-ratio:699/900;
  transform:translate3d(-50%,-50%,0);
  perspective:1400px;opacity:.11;
}
.fx3d-logo:after{
  content:"";position:absolute;inset:-20%;z-index:-1;
  background:radial-gradient(closest-side,rgba(96,53,196,.22),transparent 72%);
}
.fx3d-logo-spin{
  position:absolute;inset:0;transform-style:preserve-3d;
  animation:fx3dLogoTurn 22s ease-in-out infinite alternate;will-change:transform;
}
.fx3d-logo-layer{
  position:absolute;inset:0;
  background:url("oec-bg-logo.webp") center/contain no-repeat;
  filter:brightness(.28) saturate(1.4);
  backface-visibility:visible;
}
.fx3d-logo-layer.is-face{filter:drop-shadow(0 0 40px rgba(137,66,255,.45))}
@keyframes fx3dLogoTurn{
  0%{transform:rotateX(8deg) scale(.98)}
  100%{transform:rotateX(-8deg) scale(1.02)}
}
}

/* Floating wireframe cubes */
.fx3d-shape{position:absolute;perspective:700px;opacity:.5}
.fx3d-shape--a{width:70px;height:70px;left:7%;top:24%;animation:fx3dDrift 16s ease-in-out infinite alternate}
.fx3d-shape--b{width:46px;height:46px;right:9%;top:58%;animation:fx3dDrift 19s ease-in-out -6s infinite alternate}
.fx3d-shape--c{width:30px;height:30px;left:62%;top:14%;animation:fx3dDrift 13s ease-in-out -3s infinite alternate;opacity:.35}
.fx3d-cube{position:absolute;inset:0;transform-style:preserve-3d;animation:fx3dSpin 18s linear infinite;will-change:transform}
.fx3d-shape--b .fx3d-cube{animation-duration:24s;animation-direction:reverse}
.fx3d-face{
  position:absolute;inset:0;border:1px solid rgba(180,140,255,.75);
  background:linear-gradient(135deg,rgba(137,66,255,.14),rgba(55,30,124,.05));
  box-shadow:inset 0 0 14px rgba(137,66,255,.35);
}
.fx3d-shape .fx3d-face--0,.fx3d-brand-cube .fx3d-face--0{transform:translateZ(var(--h))}
.fx3d-shape .fx3d-face--1,.fx3d-brand-cube .fx3d-face--1{transform:rotateY(180deg) translateZ(var(--h))}
.fx3d-shape .fx3d-face--2,.fx3d-brand-cube .fx3d-face--2{transform:rotateY(90deg) translateZ(var(--h))}
.fx3d-shape .fx3d-face--3,.fx3d-brand-cube .fx3d-face--3{transform:rotateY(-90deg) translateZ(var(--h))}
.fx3d-shape .fx3d-face--4,.fx3d-brand-cube .fx3d-face--4{transform:rotateX(90deg) translateZ(var(--h))}
.fx3d-shape .fx3d-face--5,.fx3d-brand-cube .fx3d-face--5{transform:rotateX(-90deg) translateZ(var(--h))}
.fx3d-shape--a{--h:35px}.fx3d-shape--b{--h:23px}.fx3d-shape--c{--h:15px}
@keyframes fx3dSpin{from{transform:rotateX(0) rotateY(0) rotateZ(0)}to{transform:rotateX(360deg) rotateY(720deg) rotateZ(360deg)}}
@keyframes fx3dDrift{from{transform:translate3d(0,0,0)}to{transform:translate3d(18px,-34px,0)}}

/* Home hero: mirrored, symmetrical 3D stage behind the badge (oec-3d.js) */
.fx3d-hero{perspective:1000px;perspective-origin:50% 50%}
.fx3d-orbit{
  position:absolute;left:50%;top:50%;width:min(560px,96vw);aspect-ratio:1;
  transform:translate(-50%,-50%);pointer-events:none;
}
.fx3d-orbit--back{z-index:0}
.fx3d-orbit--front{z-index:2}
/* Extruded emblem: faces straight ahead and only tilts top-to-bottom, so it stays mirror-symmetric */
.fx3d-emblem{position:absolute;left:50%;top:50%;width:92%;aspect-ratio:699/900;transform:translate(-50%,-50%);perspective:1200px;opacity:.32}
.fx3d-emblem:after{content:"";position:absolute;inset:-12%;z-index:-1;background:radial-gradient(closest-side,rgba(137,66,255,.28),transparent 70%)}
.fx3d-emblem-spin{position:absolute;inset:0;transform-style:preserve-3d;animation:fx3dEmblem 9s ease-in-out infinite alternate;will-change:transform}
@keyframes fx3dEmblem{from{transform:rotateX(9deg) scale(.97)}to{transform:rotateX(-9deg) scale(1.03)}}
/* Rings: a left-tilted and right-tilted pair that mirror each other, plus a level outer ring */
.fx3d-ring{position:absolute;inset:4%;border-radius:50%;border:1px solid rgba(180,140,255,.55);box-shadow:0 0 18px rgba(137,66,255,.3),inset 0 0 18px rgba(137,66,255,.18)}
.fx3d-ring--l{transform:rotateZ(-16deg) rotateX(74deg)}
.fx3d-ring--r{transform:rotateZ(16deg) rotateX(74deg)}
.fx3d-ring--o{inset:-3%;border:1px dashed rgba(137,66,255,.35);box-shadow:none;transform:rotateX(78deg)}
.fx3d-ring.is-front{clip-path:inset(50% -20px -20px -20px)}
.fx3d-ring-spin{position:absolute;inset:0;border-radius:50%}
.fx3d-ring-spin:before,.fx3d-ring-spin:after{
  content:"";position:absolute;left:50%;width:9px;height:9px;margin-left:-4.5px;border-radius:50%;
  background:var(--oec-pearl);box-shadow:0 0 12px 3px rgba(137,66,255,.9);
}
.fx3d-ring-spin:before{top:-5px}
.fx3d-ring-spin:after{bottom:-5px}
.fx3d-ring--l .fx3d-ring-spin{animation:fx3dSpinCW 12s linear infinite}
.fx3d-ring--r .fx3d-ring-spin{animation:fx3dSpinCCW 12s linear infinite}
.fx3d-ring--o .fx3d-ring-spin{display:none}
@keyframes fx3dSpinCW{to{transform:rotate(360deg)}}
@keyframes fx3dSpinCCW{to{transform:rotate(-360deg)}}

/* Pointer-tilt cards */
.fx3d-tilting{
  transition:transform .12s ease-out,border-color .18s ease,box-shadow .18s ease!important;
  box-shadow:0 26px 50px rgba(0,0,0,.35),0 0 30px rgba(137,66,255,.14)!important;
  z-index:1;
}
.oecp-match{transition:transform .35s ease,box-shadow .2s ease}

@media(max-width:780px){
  .fx3d-floor{height:34vh;opacity:.35}
  .fx3d-logo{width:88vmin;opacity:.09}
  .fx3d-logo-spin{animation-duration:30s}
  .fx3d-orbit{width:min(400px,96vw)}
  .fx3d-ring--o{display:none}
}
@media(prefers-reduced-motion:reduce){
  .fx3d-floor-plane,.fx3d-logo-spin,.fx3d-emblem-spin,.fx3d-cube,.fx3d-shape,.fx3d-ring-spin{animation:none!important}
}

/* ===== Playoff bracket editor inside the staff dashboard ===== */
.admin-shell .oecp-admin,.admin-shell .oecp-preview{
  --oecp-card:#120d2c;--oecp-card-2:#1a1340;--oecp-line:#2f2266;
  --oecp-text:var(--oec-pearl);--oecp-muted:#a69cc0;--oecp-accent:#a77bff;
  margin-top:12px;font-size:12px;
}
.admin-shell .oecp-intro{color:#bdb4cf;font-size:10px;line-height:1.6;margin:8px 0 0}
.admin-shell .oecp-admin input,.admin-shell .oecp-admin select{background:var(--oec-night);border-color:var(--oec-navy);color:var(--oec-pearl)}
.admin-shell .oecp-admin input:focus,.admin-shell .oecp-admin select:focus{border-color:var(--oec-violet);box-shadow:0 0 0 3px rgba(137,66,255,.2);outline:none}

/* ===== Staff dashboard: Page Headers editor ===== */
.admin-shell .oec-intro-note{color:#bdb4cf;font-size:9px;line-height:1.6;margin:8px 0 12px}
.admin-shell .oec-intro-preview{margin-top:14px;padding:18px 20px;border:1px dashed rgba(137,66,255,.4);background:rgba(8,6,26,.7)}
.admin-shell .oec-intro-preview-k{display:block;font-size:7px;letter-spacing:1.4px;text-transform:uppercase;color:#7f75a0;margin-bottom:10px}
.admin-shell .oec-intro-preview-title{font-family:"Arial Black","Segoe UI Black",system-ui,sans-serif;font-size:34px;line-height:1;letter-spacing:-1px;text-transform:uppercase;margin:6px 0 10px;color:var(--oec-pearl)}
.admin-shell .oec-intro-preview p{color:#b0a7b8;font-size:11px;line-height:1.6;margin:0;max-width:760px}

/* Header: wireframe cube to the left of the brand logo */
.fx3d-brand-cube{
  --h:14px;position:relative;flex:none;display:block;width:28px;height:28px;margin-right:4px;
  perspective:300px;filter:drop-shadow(0 0 8px rgba(137,66,255,.55));
}
.fx3d-brand-cube .fx3d-cube{animation-duration:14s}
.fx3d-brand-cube .fx3d-face{border-color:rgba(190,160,255,.9)}
@media(max-width:780px){.fx3d-brand-cube{--h:11px;width:22px;height:22px;margin-right:2px}}