/* OBEINSON FREQUENCY X — phone player colour layer.
 *
 * Loaded after np-phone.css, which owns the phone player's LAYOUT. This file
 * owns only its COLOUR. The split is deliberate and worth keeping: np-phone.css
 * was tuned against a real device for where things sit, and nothing here moves
 * anything. No width, height, margin, padding, font-size, gap, flex, order or
 * position appears below — only colour, gradient, shadow and border-colour. A
 * vendor drop can therefore collide with np-phone.css but not with this.
 *
 * The brief was "more vibrant and colourful, the current screen is too dark".
 * The screen was not dark because it lacked accents; it had cyan, magenta,
 * amber and violet already. It was dark because every one of them sat at
 * .06-.18 alpha over a near-black navy, so the hue was there and the
 * saturation was not. Two changes follow from that, and they are the whole
 * idea here:
 *
 *   1. The base stops being near-black. A deep indigo field carries colour;
 *      #0a0d16 cannot, whatever you lay on top of it.
 *   2. The accents stop being washes. Chips and transport controls are filled,
 *      not outlined, because a 10% tint on a small bright screen in daylight
 *      is indistinguishable from no tint at all.
 *
 * The warm/cool split is the other deliberate choice. The field is cool
 * (indigo, cyan, violet) and the controls a person actually presses are warm
 * (amber play, amber clock). Warm advances and cool recedes, so the play
 * button comes forward off the backdrop without needing to be bigger — which
 * matters, because this file is not allowed to change its size.
 */

/* ------------------------------------------------------------- the backdrop
 * Five layers: cyan overhead, magenta and amber rising off the floor, a violet
 * core to stop the middle going grey, and a linear base so there is no black
 * anywhere. These are 2-3x the alpha of the originals, over a lifted base.
 */
html.obn-phone .nowFab.full {
  background-color: #10143a !important;
  background-image:
    radial-gradient(135% 65% at 50% -8%,  rgba(0,225,255,.55), transparent 70%),
    radial-gradient(100% 55% at 8%  104%, rgba(255,45,160,.45), transparent 72%),
    radial-gradient(105% 58% at 95% 110%, rgba(255,135,0,.38),  transparent 70%),
    radial-gradient(120% 80% at 50% 50%,  rgba(109,40,217,.40), transparent 75%),
    linear-gradient(175deg, #141a4e 0%, #0d1134 55%, #160f33 100%) !important;
}

/* ------------------------------------------------------------------ the disc
 * The halo runs cyan -> violet -> magenta -> amber, so it bridges the cool
 * field to the warm controls below instead of sitting apart from both.
 */
html.obn-phone .nowFab.full .obnNpDisc::before {
  background: radial-gradient(circle at 50% 42%,
    rgba(0,240,255,.70)   0%,
    rgba(0,200,255,.52)  20%,
    rgba(168,85,247,.46) 40%,
    rgba(255,45,160,.40) 56%,
    rgba(255,135,0,.30)  68%,
    rgba(255,135,0,.10)  76%,
    transparent 84%) !important;
}
/* A warm gold rim on the cool halo. This is the one place the two temperatures
   touch, and it is what keeps the artwork from dissolving into the glow. */
html.obn-phone .nowFab.full .obnNpDisc #mpArt {
  box-shadow:
    0 0 0 2px rgba(255,200,90,.80),
    0 0 30px rgba(0,225,255,.50),
    0 0 72px rgba(168,85,247,.38),
    0 14px 40px rgba(0,0,0,.60) !important;
}
html.obn-phone .nowFab.full .obnNpDisc #mpArt:not(.hasNpLogo):not(.hasLogo) {
  background: linear-gradient(145deg, #1b3f78 0%, #2a1a6b 55%, #3d1250 100%) !important;
}
/* The initials are the largest text on the screen, so they carry the gradient
   rather than sitting flat. Light-on-dark throughout; the lightest stop is the
   one that lands on the darkest part of the disc. */
html.obn-phone .nowFab.full .obnNpIni {
  background: linear-gradient(135deg, #5ef3ff 0%, #8f7bff 55%, #ff6ec7 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
/* Warm, because it belongs with the transport rather than with the field. */
html.obn-phone .nowFab.full .obnNpDisc .obnNpTime {
  color: #fff0b8 !important; -webkit-text-fill-color: #fff0b8 !important;
  background: rgba(255,120,0,.30) !important;
  border-color: rgba(255,200,90,.85) !important;
  box-shadow: 0 0 22px rgba(255,150,30,.45) !important;
}

/* -------------------------------------------------------------------- title */
html.obn-phone .nowFab.full .obnNpNow {
  background: linear-gradient(100deg, #ffffff 0%, #b7e9ff 45%, #ffb3e6 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  color: transparent !important;
}
html.obn-phone .nowFab.full .obnNpStn {
  color: #6ff0ff !important; -webkit-text-fill-color: #6ff0ff !important;
}

/* ----------------------------------------------------------------- the chips
 * Filled pills. Each fill is bright enough that the ink has to go dark to stay
 * readable, and it does: #2a1800 on amber and #052630 on cyan both clear 4.5:1,
 * where the old white-on-10%-wash did not clear it against the field behind.
 * The purple and red fills keep white ink, which clears it the other way.
 */
html.obn-phone .nowFab.full .mpMeta em {
  background: linear-gradient(135deg, #a855f7, #7c3aed) !important;
  border-color: rgba(214,170,255,.95) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 2px 16px rgba(150,70,250,.50) !important;
}
html.obn-phone .nowFab.full .mpMeta em.obnNpG {
  background: linear-gradient(135deg, #ff5f6d, #ff2d55) !important;
  border-color: rgba(255,170,180,.95) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
  box-shadow: 0 2px 16px rgba(255,50,90,.50) !important;
}
html.obn-phone .nowFab.full .mpMeta em.obnNpB {
  background: linear-gradient(135deg, #ffd93d, #ff9a00) !important;
  border-color: rgba(255,232,150,.95) !important;
  color: #33210a !important; -webkit-text-fill-color: #33210a !important;
  box-shadow: 0 2px 16px rgba(255,170,0,.50) !important;
}
html.obn-phone .nowFab.full .mpMeta em.obnNpC {
  background: linear-gradient(135deg, #22d3ee, #0ea5e9) !important;
  border-color: rgba(150,240,255,.95) !important;
  color: #052630 !important; -webkit-text-fill-color: #052630 !important;
  box-shadow: 0 2px 16px rgba(20,190,235,.50) !important;
}

/* ------------------------------------------------------ favourite and share */
html.obn-phone .nowFab.full .obnNpActs > button,
html.obn-phone .nowFab.full .obnNpActs > #mpFav {
  background: linear-gradient(135deg, rgba(255,150,40,.34), rgba(255,60,120,.34)) !important;
  border-color: rgba(255,185,120,.90) !important;
  color: #fff0dd !important; -webkit-text-fill-color: #fff0dd !important;
  box-shadow: 0 0 20px rgba(255,120,40,.40) !important;
}
html.obn-phone .nowFab.full .obnNpActs > #mpFav.on {
  background: linear-gradient(135deg, #ff5f6d, #ff2d55) !important;
  color: #ffffff !important; -webkit-text-fill-color: #ffffff !important;
}

/* ------------------------------------------------------------ status strip */
html.obn-phone .nowFab.full .obnNpLive {
  background: linear-gradient(100deg, rgba(34,211,238,.26), rgba(168,85,247,.26)) !important;
  border-color: rgba(150,230,255,.70) !important;
}
html.obn-phone .nowFab.full .obnNpLive.is-paused,
html.obn-phone .nowFab.full .obnNpLive.is-wait {
  background: linear-gradient(100deg, rgba(255,160,0,.34), rgba(255,60,120,.28)) !important;
  border-color: rgba(255,200,110,.85) !important;
}

/* ---------------------------------------------------------------- transport
 * Filled, not outlined. Violet skip buttons sit in the field's own hue family;
 * the play button is amber and is the only large warm mass on the screen, so
 * it reads first without this file touching its size.
 */
html.obn-phone .nowFab.full #rpPrev,
html.obn-phone .nowFab.full #rpNext {
  background: linear-gradient(145deg, rgba(190,100,255,.46), rgba(110,60,230,.40)) !important;
  border-color: rgba(220,175,255,.95) !important;
  color: #f6e9ff !important; -webkit-text-fill-color: #f6e9ff !important;
  box-shadow: 0 0 26px rgba(170,80,255,.55), 0 6px 18px rgba(0,0,0,.35) !important;
}
html.obn-phone .nowFab.full #nowPause {
  background: linear-gradient(145deg, #ffd93d, #ff8a00) !important;
  border-color: rgba(255,235,160,.95) !important;
  color: #33210a !important; -webkit-text-fill-color: #33210a !important;
  box-shadow: 0 0 38px rgba(255,165,0,.65), 0 8px 22px rgba(0,0,0,.40) !important;
}
html.obn-phone .nowFab.full #rpScan {
  background: linear-gradient(135deg, #22d3ee, #0ea5e9) !important;
  border-color: rgba(160,240,255,.95) !important;
  color: #052630 !important; -webkit-text-fill-color: #052630 !important;
  box-shadow: 0 0 22px rgba(20,190,235,.50) !important;
}

/* ------------------------------------------------------------------ header */
html.obn-phone .nowFab.full .rpHead .t {
  color: #9dfbff !important; -webkit-text-fill-color: #9dfbff !important;
  background: rgba(0,225,255,.20) !important;
  border-color: rgba(120,235,255,.70) !important;
}
/* paused goes warm, matching the status strip and the clock */
html.obn-phone .nowFab.full.obnNpOff .rpHead .t {
  color: #fff0b8 !important; -webkit-text-fill-color: #fff0b8 !important;
  background: rgba(255,120,0,.30) !important;
  border-color: rgba(255,200,100,.85) !important;
}
html.obn-phone .nowFab.full .obnNpBack {
  background: rgba(0,225,255,.22) !important;
  border-color: rgba(120,235,255,.70) !important;
}
html.obn-phone .nowFab.full .mpClose {
  background: rgba(255,95,109,.24) !important;
  border-color: rgba(255,160,170,.72) !important;
}

/* The result rows are deliberately NOT tinted. `.mpRow` turned out to be the
   player's own meta wrapper rather than a list row, and tinting it drew a pale
   panel across the whole disc area. The rows below read fine as dark cards
   against the lit field, which is the contrast that makes the field look lit. */


/* ====================================================== SKIN: LAGOON (DEFAULT)
 * Turquoise and sky blue, and the skin the app ships on: index.html carries
 * data-np-skin="lagoon" on <html>, so these rules are live from the first
 * paint and the Electric rules above are what you get by choosing the other
 * one in the player header.
 *
 * The Electric rules are left unscoped rather than moved under an attribute of
 * their own, on purpose: they are the fallback if the attribute is ever absent
 * — an older cached index.html, say — and a player in the wrong palette is a
 * much better failure than a player with no colour rules at all.
 *
 * Lagoon is a single-hue palette, so it cannot separate the chips by hue the
 * way Electric does. It separates them by lightness instead and puts dark ink
 * on all four, because every fill here is too light to carry light text.
 */

html[data-np-skin="lagoon"].obn-phone .nowFab.full {
  background-color: #06293f !important;
  background-image:
    radial-gradient(135% 65% at 50% -8%,  rgba(125,211,252,.58), transparent 70%),
    radial-gradient(105% 55% at 5%  104%, rgba(45,212,191,.50),  transparent 72%),
    radial-gradient(105% 58% at 98% 108%, rgba(56,189,248,.44),  transparent 70%),
    radial-gradient(120% 80% at 50% 48%,  rgba(14,165,233,.34),  transparent 75%),
    linear-gradient(175deg, #0b3a57 0%, #072d47 55%, #06283c 100%) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpDisc::before {
  background: radial-gradient(circle at 50% 42%,
    rgba(167,243,208,.62)  0%,
    rgba(94,234,212,.56)  18%,
    rgba(45,212,191,.48)  38%,
    rgba(56,189,248,.44)  56%,
    rgba(125,211,252,.30) 70%,
    rgba(125,211,252,.10) 78%,
    transparent 86%) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpDisc #mpArt {
  box-shadow:
    0 0 0 2px rgba(153,246,228,.90),
    0 0 32px rgba(45,212,191,.55),
    0 0 74px rgba(56,189,248,.40),
    0 14px 40px rgba(0,0,0,.50) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpDisc #mpArt:not(.hasNpLogo):not(.hasLogo) {
  background: linear-gradient(145deg, #0e4f6b 0%, #0a3f5e 55%, #0d3b52 100%) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpIni {
  background: linear-gradient(135deg, #a7f3d0 0%, #5eead4 50%, #7dd3fc 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpDisc .obnNpTime {
  color: #042f2e !important; -webkit-text-fill-color: #042f2e !important;
  background: linear-gradient(135deg, #5eead4, #2dd4bf) !important;
  border-color: rgba(167,243,208,.95) !important;
  box-shadow: 0 0 22px rgba(45,212,191,.50) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpNow {
  background: linear-gradient(100deg, #ffffff 0%, #ccfbf1 45%, #bae6fd 100%) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  -webkit-text-fill-color: transparent !important; color: transparent !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpStn {
  color: #99f6e4 !important; -webkit-text-fill-color: #99f6e4 !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .mpMeta em {
  background: linear-gradient(135deg, #7dd3fc, #38bdf8) !important;
  border-color: rgba(186,230,253,.95) !important;
  color: #052a3d !important; -webkit-text-fill-color: #052a3d !important;
  box-shadow: 0 2px 16px rgba(56,189,248,.50) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .mpMeta em.obnNpG {
  background: linear-gradient(135deg, #5eead4, #14b8a6) !important;
  border-color: rgba(153,246,228,.95) !important;
  color: #042f2e !important; -webkit-text-fill-color: #042f2e !important;
  box-shadow: 0 2px 16px rgba(20,184,166,.50) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .mpMeta em.obnNpB {
  background: linear-gradient(135deg, #a7f3d0, #6ee7b7) !important;
  border-color: rgba(209,250,229,.95) !important;
  color: #053b2d !important; -webkit-text-fill-color: #053b2d !important;
  box-shadow: 0 2px 16px rgba(110,231,183,.45) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .mpMeta em.obnNpC {
  background: linear-gradient(135deg, #bae6fd, #7dd3fc) !important;
  border-color: rgba(224,242,254,.95) !important;
  color: #04293c !important; -webkit-text-fill-color: #04293c !important;
  box-shadow: 0 2px 16px rgba(125,211,252,.45) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpActs > button,
html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpActs > #mpFav {
  background: linear-gradient(135deg, rgba(94,234,212,.32), rgba(56,189,248,.32)) !important;
  border-color: rgba(153,246,228,.90) !important;
  color: #e0fbf7 !important; -webkit-text-fill-color: #e0fbf7 !important;
  box-shadow: 0 0 20px rgba(45,212,191,.40) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpActs > #mpFav.on {
  background: linear-gradient(135deg, #2dd4bf, #0ea5e9) !important;
  color: #042f2e !important; -webkit-text-fill-color: #042f2e !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpLive {
  background: linear-gradient(100deg, rgba(94,234,212,.28), rgba(56,189,248,.28)) !important;
  border-color: rgba(153,246,228,.75) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpLive.is-paused,
html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpLive.is-wait {
  background: linear-gradient(100deg, rgba(125,211,252,.30), rgba(45,212,191,.24)) !important;
  border-color: rgba(186,230,253,.80) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full #rpPrev,
html[data-np-skin="lagoon"].obn-phone .nowFab.full #rpNext {
  background: linear-gradient(145deg, rgba(56,189,248,.46), rgba(14,165,233,.40)) !important;
  border-color: rgba(186,230,253,.95) !important;
  color: #ecfeff !important; -webkit-text-fill-color: #ecfeff !important;
  box-shadow: 0 0 26px rgba(56,189,248,.55), 0 6px 18px rgba(0,0,0,.30) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full #nowPause {
  background: linear-gradient(145deg, #5eead4, #14b8a6) !important;
  border-color: rgba(190,250,240,.95) !important;
  color: #042f2e !important; -webkit-text-fill-color: #042f2e !important;
  box-shadow: 0 0 38px rgba(45,212,191,.65), 0 8px 22px rgba(0,0,0,.35) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full #rpScan {
  background: linear-gradient(135deg, #bae6fd, #7dd3fc) !important;
  border-color: rgba(224,242,254,.95) !important;
  color: #04293c !important; -webkit-text-fill-color: #04293c !important;
  box-shadow: 0 0 22px rgba(125,211,252,.45) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .rpHead .t {
  color: #042f2e !important; -webkit-text-fill-color: #042f2e !important;
  background: linear-gradient(135deg, #5eead4, #2dd4bf) !important;
  border-color: rgba(167,243,208,.95) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full.obnNpOff .rpHead .t {
  color: #04293c !important; -webkit-text-fill-color: #04293c !important;
  background: linear-gradient(135deg, #bae6fd, #7dd3fc) !important;
  border-color: rgba(224,242,254,.95) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpBack {
  background: rgba(94,234,212,.26) !important;
  border-color: rgba(153,246,228,.78) !important;
}html[data-np-skin="lagoon"].obn-phone .nowFab.full .mpClose {
  background: rgba(125,211,252,.26) !important;
  border-color: rgba(186,230,253,.78) !important;
}


/* -------------------------------------------------------------- skin button
 * Declared once outside both skins, then recoloured per skin. This is the only
 * place this file sets geometry, and it has to: the element does not exist in
 * np-phone.css, so there is nothing to inherit from.
 */
html.obn-phone .nowFab.full .obnNpSkin {
  width: 38px; height: 38px;
  flex: 0 0 auto;
  /* No margin-left:auto. .obnNpSleep already owns the auto margin that pushes
     the right-hand group over, and .mpClose is position:absolute at right:14px
     — a second auto margin here shoved this button underneath the close
     button, which then swallowed every tap. */
  margin-left: 10px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 17px;
  line-height: 1;
  cursor: pointer;
  background: rgba(0,225,255,.20);
  border: 1px solid rgba(120,235,255,.70);
  color: #d8f7ff;
  -webkit-text-fill-color: #d8f7ff;
}
html[data-np-skin="lagoon"].obn-phone .nowFab.full .obnNpSkin {
  background: rgba(94,234,212,.26);
  border-color: rgba(153,246,228,.80);
  color: #e0fbf7;
  -webkit-text-fill-color: #e0fbf7;
}
html.obn-phone .nowFab.full .obnNpSkin:focus-visible {
  outline: 2px solid var(--cyan, #4fd1e8);
  outline-offset: 2px;
}