/* ── OCTOPONG · cinematic interface layer ────────────────────
   Loaded LAST. Adds motion and light to the shell without changing
   a single layout rule: everything here is a pseudo-element, a
   background, a transform or an opacity, so it cannot move a button
   or clip a label, and it all stops for reduced motion.

     1. SURFACE LIGHT on every menu screen — the same caustic web the
        arena floor throws, drifting over the wallpaper in two layers
        that slide against each other (assets/ui/bg/caustics.webp is
        a seamless 512 tile generated for this).
     2. A SHEEN that sweeps across every gold call to action every
        few seconds, and faster while it is hovered.
     3. The menu logo floats, the hero PLAY button breathes.
   ─────────────────────────────────────────────────────────── */

/* ── 1. surface light ───────────────────────────────────────
   ::after at z-index -1 inside the screen's own stacking context
   (theme.css gives these screens isolation) paints above the
   wallpaper and its scrim but below every piece of content. */
:is(.modes, .sel, .custom, .lobby, .cup, .series, .chal, .boards, .settings, .howto)::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background-image:url('../../assets/ui/bg/caustics.webp'), url('../../assets/ui/bg/caustics.webp');
  background-size:560px 560px, 820px 820px;
  background-position:0 0, 130px 90px;
  mix-blend-mode:screen;
  opacity:.085;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.12) 100%);
          mask-image:radial-gradient(120% 90% at 50% 0%, #000 0%, rgba(0,0,0,.55) 50%, rgba(0,0,0,.12) 100%);
  /* opacity only: sliding the background repainted a full 4K layer
     every frame. An opacity shimmer is done by the compositor. */
  animation:opSurfaceLight 7s ease-in-out infinite alternate;
}
@keyframes opSurfaceLight{
  from{ opacity:.06; }
  to  { opacity:.11; }
}

/* ── 2. the sheen on gold ─────────────────────────────────── */
:is(.btn.play, .btn.primary, .screen.menu .mn-btn.is-hero){ position:relative; }
:is(.btn.play, .btn.primary, .screen.menu .mn-btn.is-hero)::before{
  content:""; position:absolute; inset:0; z-index:2; pointer-events:none;
  border-radius:inherit;
  background:linear-gradient(105deg, rgba(255,255,255,0) 38%, rgba(255,255,255,.62) 49%, rgba(255,246,214,.18) 54%, rgba(255,255,255,0) 62%) no-repeat;
  background-size:260% 100%;
  background-position:190% 0;
  mix-blend-mode:soft-light;
  animation:opSheen 5.6s cubic-bezier(.45,.05,.25,1) infinite;
}
:is(.btn.play, .btn.primary, .screen.menu .mn-btn.is-hero):is(:hover, :focus-visible)::before{
  animation-duration:1.25s;
}
@keyframes opSheen{
  0%, 66% { background-position:190% 0; }
  100%    { background-position:-90% 0; }
}

/* ── 3. the menu breathes ─────────────────────────────────── */
.screen.menu .mn-logo{ animation:opFloat 7s ease-in-out infinite; transform-origin:50% 60%; }
@keyframes opFloat{
  0%, 100% { transform:translateY(0) rotate(0deg); }
  50%      { transform:translateY(-6px) rotate(-.6deg); }
}
.screen.menu .mn-btn.is-hero{ animation:opBreathe 3.2s ease-in-out infinite; }
@keyframes opBreathe{
  0%, 100% { box-shadow:inset 0 2px 0 #fff4c4, inset 0 -5px 0 #b67519, 0 8px 25px #02071480, 0 0 0 rgba(255,207,60,0); }
  50%      { box-shadow:inset 0 2px 0 #fff4c4, inset 0 -5px 0 #b67519, 0 8px 25px #02071480, 0 0 34px rgba(255,207,60,.42); }
}

/* ── the ink canvas (ui/ink.js) never takes a pointer unless
      it is mid-cover, and never prints ── */
@media print{ .op-ink{ display:none !important; } }

/* ── reduced motion: light stays, nothing moves ─────────────── */
html.op-a11y-still :is(.modes, .sel, .custom, .lobby, .cup, .series, .chal, .boards, .settings, .howto)::after,
html.op-a11y-still :is(.btn.play, .btn.primary, .screen.menu .mn-btn.is-hero)::before,
html.op-a11y-still .screen.menu .mn-logo,
html.op-a11y-still .screen.menu .mn-btn.is-hero{ animation:none; }
@media (prefers-reduced-motion:reduce){
  :is(.modes, .sel, .custom, .lobby, .cup, .series, .chal, .boards, .settings, .howto)::after,
  :is(.btn.play, .btn.primary, .screen.menu .mn-btn.is-hero)::before,
  .screen.menu .mn-logo,
  .screen.menu .mn-btn.is-hero{ animation:none; }
}
/* battery saver: no continuous repaint behind the menus */
html[data-saver="1"] :is(.modes, .sel, .custom, .lobby, .cup, .series, .chal, .boards, .settings, .howto)::after{ animation:none; }

/* ── 4. the victory stage ────────────────────────────────────
   Win only, and deliberately softer than the old pinwheel (which an
   earlier pass hid for competing with the ball): a few broad, blurred
   beams of warm light turning slowly behind the champion, a scatter
   of twinkling motes, and a sheen that runs across VICTORY itself.
   All inside .res-fx, which results.js already clips to the stage. */
.screen.res[data-mood="win"] .res-fx::before{
  content:""; position:absolute; left:50%; top:60%; width:175%; aspect-ratio:1;
  transform:translate(-50%,-50%); pointer-events:none;
  background:conic-gradient(from 0deg,
    rgba(255,214,120,0) 0deg,   rgba(255,214,120,.32) 11deg, rgba(255,214,120,0) 27deg,
    rgba(120,230,255,0) 62deg,  rgba(120,230,255,.13) 74deg, rgba(120,230,255,0) 92deg,
    rgba(255,214,120,0) 128deg, rgba(255,214,120,.28) 141deg, rgba(255,214,120,0) 158deg,
    rgba(255,160,220,0) 198deg, rgba(255,160,220,.12) 213deg, rgba(255,160,220,0) 232deg,
    rgba(255,214,120,0) 268deg, rgba(255,214,120,.30) 283deg, rgba(255,214,120,0) 301deg,
    rgba(255,214,120,0) 360deg);
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,.5) 22%, transparent 47%);
          mask-image:radial-gradient(circle at 50% 50%, #000 6%, rgba(0,0,0,.5) 22%, transparent 47%);
  filter:blur(9px);
  opacity:0;
  animation:opBeams 70s linear infinite, opFadeIn 1.4s ease .35s forwards;
}
@keyframes opBeams{ to{ transform:translate(-50%,-50%) rotate(360deg); } }
@keyframes opFadeIn{ to{ opacity:1; } }
.screen.res[data-mood="win"] .res-fx::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(2.5px 2.5px at 16% 34%, #fff6d0 40%, transparent 70%),
    radial-gradient(3.5px 3.5px at 27% 18%, #ffe38a 40%, transparent 70%),
    radial-gradient(2px 2px   at 38% 62%, #ffffff 40%, transparent 70%),
    radial-gradient(3px 3px   at 64% 26%, #ffe9a8 40%, transparent 70%),
    radial-gradient(2px 2px   at 74% 57%, #bff4ff 40%, transparent 70%),
    radial-gradient(3.5px 3.5px at 83% 36%, #fff3c4 40%, transparent 70%),
    radial-gradient(2px 2px   at 57% 12%, #ffffff 40%, transparent 70%),
    radial-gradient(2.5px 2.5px at 44% 80%, #ffd9f1 40%, transparent 70%),
    radial-gradient(2px 2px   at 9% 72%,  #ffe38a 40%, transparent 70%),
    radial-gradient(3px 3px   at 91% 78%, #fff6d0 40%, transparent 70%);
  animation:opTwinkle 2.6s ease-in-out infinite alternate, opDrift 18s ease-in-out infinite alternate;
}
@keyframes opTwinkle{ 0%{ opacity:.25; } 50%{ opacity:.95; } 100%{ opacity:.45; } }
@keyframes opDrift{ from{ transform:translateY(6px); } to{ transform:translateY(-10px); } }
.screen.res[data-mood="win"] .res-word{ position:relative; }
.screen.res[data-mood="win"] .res-word::after{
  content:"VICTORY"; position:absolute; inset:0; pointer-events:none;
  color:transparent; -webkit-text-fill-color:transparent; text-shadow:none;
  background:linear-gradient(105deg, rgba(255,255,255,0) 40%, rgba(255,255,255,.95) 49%, rgba(255,250,220,.35) 53%, rgba(255,255,255,0) 60%) no-repeat;
  background-size:300% 100%; background-position:180% 0;
  -webkit-background-clip:text; background-clip:text;
  animation:opWordSheen 4.2s cubic-bezier(.45,.05,.25,1) .6s infinite;
}
@keyframes opWordSheen{ 0%{ background-position:180% 0; } 45%, 100%{ background-position:-80% 0; } }
html.op-a11y-still .screen.res .res-fx::before, html.op-a11y-still .screen.res .res-fx::after,
html.op-a11y-still .screen.res .res-word::after{ animation:none; opacity:.6; }
@media (prefers-reduced-motion:reduce){
  .screen.res .res-fx::before, .screen.res .res-fx::after, .screen.res .res-word::after{ animation:none; opacity:.6; }
}

/* ── narrow windows: the pause chip takes its glyph, as it does on
      touch (theme.css), so the HUD row fits a 390px window instead of
      running 23px off the right edge ── */
@media (max-width:560px){
  .hud-pause-t{ display:none; }
  .hud-pause-i{ display:block; }
}

/* ── results: YOUR MATCH is one row of six on desktop, two rows of
      three on a phone. Tiles go compact so six fit the panel. ── */
html .screen.res .res-grid .stat-grid{
  grid-template-columns:repeat(6,minmax(0,1fr)); gap:6px; padding:10px;
}
html .screen.res .res-grid .stat{ padding:9px 3px 8px; gap:3px; min-height:0; }
html .screen.res .res-grid .stat .i{ width:22px; height:22px; }
html .screen.res .res-grid .stat .i svg{ width:15px; height:15px; }
html .screen.res .res-grid .stat .v{ font-size:clamp(17px,1.35vw,22px); min-width:0; }
html .screen.res .res-grid .stat .k{ font-size:9px; letter-spacing:.02em; line-height:1.25; }
@media (max-width:640px){
  html .screen.res .res-grid .stat-grid{ grid-template-columns:repeat(3,minmax(0,1fr)); }
  html .screen.res .res-grid .stat .v{ font-size:20px; }
}

/* ── character select: no arena picker. The arena is chosen on the
      Modes screen (modes.js writes it to the loadout, and this screen
      still carries it into the match); showing it twice was noise. ── */
.screen.sel .sel-rail{ display:none; }
@media (min-width:761px){
  .screen.sel .sel-body{ grid-template-columns:minmax(250px,25vw) minmax(0,1fr); }
}
/* twenty paddles: four across on a wide window instead of a long scroll */
@media (min-width:1181px){
  html .screen.sel .sel-paddle-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); }
}

/* Mode screen: the cards and the detail panel read as one block — the
   card grid stretches to the panel's height and every gutter matches. */
@media (min-width: 1051px) {
  .screen.modes .mode-layout { align-items: stretch; gap: 14px; }
  .screen.modes .mode-grid { grid-auto-rows: 1fr; align-content: stretch; gap: 14px; }
  .screen.modes .modecard { min-height: 0; height: 100%; align-content: center; }
}

/* Character select → Finishers: a live preview of your knockout finisher
   and one tile per finisher, each a real frame of its animation. */
.sel-finisher-pane { flex: 1; min-height: 0; overflow: auto; padding: 2px 4px 8px; scrollbar-color: #3c8fab #142251; }
.sel-finisher-stage { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border: 1px solid #559bb3; border-radius: 16px; background: radial-gradient(ellipse at 30% 40%, #1c5b7c, #0b2240); }
.sel-finisher-stage canvas { display: block; width: 100%; height: auto; border-radius: 12px; box-shadow: 0 4px 0 #05101f; }
.sf-copy span { font: 800 10px var(--ui); letter-spacing: .14em; color: #85f5df; }
.sf-copy h3 { font: 800 26px/1.05 var(--display); color: #ffdf79; margin: 6px 0 8px; }
.sf-copy p { font: 600 13px/1.45 var(--ui); color: #d1e8f9; margin: 0; }
.sel-finisher-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.sel-finisher { position: relative; display: grid; gap: 5px; min-width: 0; padding: 5px 5px 8px; border: 2px solid #427ab0; border-radius: 12px; background: linear-gradient(150deg, #224f86, #293366); color: #e9faff; cursor: pointer; text-align: center; }
.sel-finisher img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 8px; background: #0b2240; }
.sel-finisher b { font: 800 12px/1.15 var(--display); }
.sel-finisher small { position: absolute; top: 9px; left: 9px; padding: 3px 6px; border-radius: 6px; background: #ff5f8f; color: #fff; font: 900 9px/1 var(--ui); letter-spacing: .08em; }
.sel-finisher.is-epic { border-color: #e7a33e; }
.sel-finisher:hover { border-color: #8fdcff; }
.sel-finisher.on { border-color: #ffe16b; box-shadow: 0 0 0 2px #ffe16b44, 0 0 18px #ffcf4a33; }
.sel-finisher.on .sel-paddle-tick { display: flex; }
/* finisher sections, locks and the unlock box */
.sel-fin-head { grid-column: 1 / -1; margin: 10px 2px 0; font: 800 12px var(--display); letter-spacing: .08em; color: #85f5df; }
.sel-fin-head:first-child { margin-top: 0; }
.sel-finisher.is-locked { border-color: #53708f; background: linear-gradient(150deg, #1b3a5f, #232a4e); }
.sel-finisher.is-locked img { filter: saturate(.55) brightness(.72); }
.sel-finisher.is-locked b { color: #b9cde0; }
.sel-finisher .sel-paddle-lock { position: absolute; top: 9px; right: 9px; left: auto; padding: 3px 6px; border-radius: 6px; background: #0b1a33e6; color: #ffdf87; font: 900 9px/1 var(--ui); letter-spacing: .06em; }
.sf-unlock { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
.sf-unlock[hidden] { display: none; }
.sf-unlock .sf-src { display: inline-flex; align-items: center; gap: 6px; font: 700 12px var(--ui); letter-spacing: 0; color: #ffdf87; }

@media (min-width: 1181px) { html .screen.sel .sel-finisher-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 760px) { .sel-finisher-stage { grid-template-columns: 1fr; } .sel-finisher-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Dashboard → Content Library → Game Features: UI for switched-off features */
.op-off-clip .hud-clip,
.op-off-report .screen [data-go="report"],
.op-off-news .mn-feed:not(.mn-feed-tip),
.op-off-tips .mn-feed-tip,
.op-off-promo .mn-season,
.op-off-goal .pinned-goal,
.op-off-chat .lb-chat { display: none !important; }

/* ── the Inbox (src/ui/inbox.js) ─────────────────────────────── */
.op-inbox { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; padding: 16px; background: rgba(2, 8, 22, 0.72); backdrop-filter: blur(4px); }
.op-inbox[hidden] { display: none; }
.ibx-sheet { width: min(760px, 100%); max-height: min(86vh, 900px); display: grid; grid-template-rows: auto 1fr; border: 1px solid #3f86a6; border-radius: 18px; background: linear-gradient(160deg, #143a60, #0b1d38); box-shadow: 0 8px 0 #040c1c, 0 30px 80px #000a; overflow: hidden; }
.ibx-head { display: flex; align-items: center; gap: 10px; padding: 16px 18px; border-bottom: 1px solid #2c5f80; background: linear-gradient(180deg, #1a4a74, #13365a); }
.ibx-head h2 { margin: 0; font: 900 26px/1 var(--display, 'Baloo 2', sans-serif); color: #ffdf79; letter-spacing: .02em; }
.ibx-ico { color: #7ff0e2; display: flex; }
.ibx-count { padding: 4px 9px; border-radius: 999px; background: #ff5f8f; color: #fff; font: 900 11px/1 var(--ui, sans-serif); letter-spacing: .06em; }
.ibx-grow { flex: 1; }
.ibx-list { overflow: auto; padding: 14px 16px 18px; display: grid; gap: 12px; align-content: start; scrollbar-color: #3c8fab #102a4a; }
.ibx-msg { padding: 14px 16px 12px; border: 1px solid #2f6690; border-radius: 14px; background: #0e2848; }
.ibx-msg.is-new { border-color: #5fd6ff; background: linear-gradient(160deg, #13365e, #0e2848); box-shadow: 0 0 0 1px #5fd6ff33; }
.ibx-msg.is-pinned { border-color: #ffd35a; }
.ibx-top { display: flex; align-items: baseline; gap: 8px; }
.ibx-top h3 { flex: 1; margin: 0; font: 800 18px/1.2 var(--display, 'Baloo 2', sans-serif); color: #eaf6ff; }
.ibx-top time { font: 700 11px/1 var(--ui, sans-serif); color: #86a8c8; white-space: nowrap; }
.ibx-dot { width: 10px; height: 10px; flex: none; align-self: center; border-radius: 50%; background: #ff5f8f; box-shadow: 0 0 8px #ff5f8f; }
.ibx-msg p { margin: 8px 0 10px; font: 600 14px/1.55 var(--ui, sans-serif); color: #cfe3f5; }
.ibx-msg footer { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ibx-exp { display: inline-flex; align-items: center; gap: 5px; font: 700 11px/1 var(--ui, sans-serif); color: #86a8c8; }
.ibx-actions { display: flex; gap: 8px; }
.ibx-gift { display: inline-flex; align-items: center; gap: 6px; }
.ibx-empty { display: grid; justify-items: center; gap: 6px; padding: 40px 10px 50px; text-align: center; color: #9fc0dd; }
.ibx-empty h3 { margin: 6px 0 0; font: 900 18px/1 var(--display, 'Baloo 2', sans-serif); color: #eaf6ff; }
.ibx-empty p { margin: 0; font: 600 13px/1.4 var(--ui, sans-serif); }
.mn-tool { position: relative; }
.mn-badge { position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px; display: grid; place-items: center; border-radius: 999px; background: #ff5f8f; color: #fff; font: 900 10px/1 var(--ui, sans-serif); box-shadow: 0 0 0 2px #0b1d38; }
.mn-badge[hidden] { display: none; }
@media (max-width: 600px) { .ibx-head h2 { font-size: 22px; } .ibx-list { padding: 10px; } }

.sel-finisher.is-event { border-color: #ffcf4a; }
.sel-finisher.is-event .sel-paddle-lock { color: #0c1d3d; background: #ffcf4a; }