.boom-story-player {
  width: min(1760px, 100%);
  margin: 0 auto;
  padding: 18px;
  color: #edf6ff;
}

.boom-story-player__header {
  min-height: 76px;
  margin-bottom: 12px;
  padding: 12px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 18px;
  background:
    linear-gradient(
      135deg,
      rgba(8,16,32,.98),
      rgba(13,19,31,.98)
    );
}

.boom-story-player__brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.boom-story-player__back {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: #fff;
  text-decoration: none;
  font-size: 28px;
}

.boom-story-player__brand small {
  color: #72dcff;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .16em;
}

.boom-story-player__brand h1 {
  margin: 2px 0 0;
  font-size: 22px;
  line-height: 1;
}

.boom-story-player__brand h1 span {
  color: #ffd83d;
}

.boom-story-player__network {
  display: flex;
  align-items: center;
  gap: 12px;
}

.boom-story-player__network span {
  padding: 8px 11px;
  border: 1px solid rgba(88,239,178,.25);
  border-radius: 999px;
  color: #73f2bd;
  font-size: 11px;
  font-weight: 900;
}

.boom-story-player__network span i,
.boom-story-player__chat header span i {
  width: 7px;
  height: 7px;
  display: inline-block;
  margin-right: 6px;
  border-radius: 50%;
  background: #56efaa;
  box-shadow: 0 0 12px #56efaa;
}

.boom-story-player__network b {
  color: #aabbd4;
  font-size: 12px;
}

.boom-story-player__layout {
  display: grid;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(300px, 360px);
  gap: 12px;
  align-items: stretch;
}

.boom-story-player__game-card {
  position: relative;
  overflow: hidden;
  min-width: 0;
  height:
    clamp(520px, 67vh, 820px);
  border: 1px solid rgba(255,216,61,.22);
  border-radius: 20px;
  background: #05070b;
  box-shadow:
    0 24px 80px rgba(0,0,0,.28);
}

.boom-story-player__frame {
  width: 100%;
  height: 100%;
  display: block;
  border: 0;
  background: #05070b;
}

.boom-story-player__loading {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  background:
    radial-gradient(
      circle at center,
      rgba(255,215,56,.08),
      transparent 38%
    ),
    #050911;
  text-align: center;
}

.boom-story-player__loading strong {
  letter-spacing: .12em;
}

.boom-story-player__loading small {
  color: #94a6c3;
}

.boom-story-player__loading a {
  margin-top: 10px;
  color: #ffdb48;
}

.boom-story-player__game-badge {
  position: absolute;
  z-index: 3;
  left: 12px;
  top: 12px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  background: rgba(4,8,15,.82);
  backdrop-filter: blur(12px);
  pointer-events: none;
}

.boom-story-player__game-badge span {
  font-size: 22px;
}

.boom-story-player__game-badge b,
.boom-story-player__game-badge small {
  display: block;
}

.boom-story-player__game-badge b {
  font-size: 11px;
}

.boom-story-player__game-badge small {
  margin-top: 2px;
  color: #8fa3c2;
  font-size: 8px;
  letter-spacing: .1em;
}

.boom-story-player__game-actions {
  position: absolute;
  z-index: 3;
  right: 12px;
  top: 12px;
  display: flex;
  gap: 6px;
}

.boom-story-player__game-actions button {
  padding: 8px 10px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  background: rgba(4,8,15,.82);
  color: #dceaff;
  font: inherit;
  font-size: 9px;
  font-weight: 900;
  cursor: pointer;
  backdrop-filter: blur(12px);
}

.boom-story-player__chat {
  min-height: 0;
  display: grid;
  grid-template-rows:
    auto minmax(0,1fr) auto auto;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background:
    linear-gradient(
      180deg,
      #091321,
      #070d18
    );
  overflow: hidden;
}

.boom-story-player__chat header {
  padding: 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.boom-story-player__chat header small,
.boom-story-player__chat header b {
  display: block;
}

.boom-story-player__chat header small {
  margin-bottom: 3px;
  color: #7185a5;
  font-size: 8px;
  letter-spacing: .12em;
}

.boom-story-player__chat header b {
  font-size: 13px;
}

.boom-story-player__chat header span {
  color: #66efb4;
  font-size: 9px;
  font-weight: 900;
}

.boom-story-player__messages {
  min-height: 0;
  overflow-y: auto;
  padding: 12px;
}

.boom-story-player__chat-empty {
  padding: 30px 12px;
  color: #7285a4;
  text-align: center;
  font-size: 12px;
}

.boom-story-player__message {
  margin-bottom: 9px;
  display: grid;
  grid-template-columns: 30px 1fr;
  gap: 8px;
  align-items: start;
}

.boom-story-player__avatar {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #16243b;
  color: #9fdcff;
  font-size: 10px;
  font-weight: 950;
}

.boom-story-player__message.is-me
.boom-story-player__avatar {
  background: #332e10;
  color: #ffe169;
}

.boom-story-player__message b {
  color: #82dfff;
  font-size: 10px;
}

.boom-story-player__message.is-me b {
  color: #ffe169;
}

.boom-story-player__message p {
  margin: 3px 0 0;
  color: #d5dfed;
  font-size: 12px;
  line-height: 1.4;
  word-break: break-word;
}

.boom-story-player__compose {
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 7px;
  border-top: 1px solid rgba(255,255,255,.07);
}

.boom-story-player__compose input {
  min-width: 0;
  height: 40px;
  padding: 0 11px;
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 10px;
  outline: none;
  background: #060c16;
  color: #fff;
}

.boom-story-player__compose input:focus {
  border-color: rgba(84,220,255,.5);
}

.boom-story-player__compose button {
  min-width: 74px;
  border: 0;
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      #4bdcff,
      #6b8cff
    );
  color: #07101d;
  font-weight: 950;
  cursor: pointer;
}

.boom-story-player__chat-hint {
  padding: 0 12px 11px;
  color: #61728f;
  font-size: 9px;
  text-align: center;
}

.boom-story-player__controls {
  margin-top: 12px;
  padding: 18px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  background:
    linear-gradient(
      135deg,
      #08111e,
      #090d17
    );
}

.boom-story-player__controls > header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  margin-bottom: 14px;
}

.boom-story-player__controls small {
  color: #7387a7;
}

.boom-story-player__controls h2 {
  margin: 3px 0 0;
  font-size: 18px;
}

.boom-story-player__controls > header > span {
  color: #6f829f;
  font-size: 9px;
  letter-spacing: .1em;
}

.boom-story-player__control-grid {
  display: grid;
  grid-template-columns:
    repeat(6, minmax(0,1fr));
  gap: 8px;
}

.boom-story-player__control-grid article {
  min-width: 0;
  padding: 11px;
  display: flex;
  gap: 10px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.07);
  border-radius: 13px;
  background: rgba(255,255,255,.025);
}

.boom-story-player__control-grid kbd {
  flex: 0 0 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,222,70,.28);
  border-radius: 10px;
  background: #191809;
  color: #ffe14c;
  font: inherit;
  font-weight: 950;
  box-shadow:
    inset 0 -3px 0 rgba(0,0,0,.32);
}

.boom-story-player__control-grid b,
.boom-story-player__control-grid small {
  display: block;
}

.boom-story-player__control-grid b {
  font-size: 10px;
}

.boom-story-player__control-grid small {
  margin-top: 2px;
  font-size: 8px;
  line-height: 1.3;
}

.boom-story-player__toast {
  position: fixed;
  z-index: 99999;
  left: 50%;
  bottom: 20px;
  transform: translateX(-50%);
  padding: 10px 14px;
  border: 1px solid rgba(87,235,178,.3);
  border-radius: 10px;
  background: #08131e;
  color: #7bf0bc;
}

.boom-story-player__toast.is-bad {
  border-color: rgba(255,94,94,.3);
  color: #ff8e8e;
}

@media (max-width: 1180px) {
  .boom-story-player__layout {
    grid-template-columns: 1fr;
  }

  .boom-story-player__chat {
    min-height: 420px;
  }

  .boom-story-player__control-grid {
    grid-template-columns:
      repeat(3, minmax(0,1fr));
  }
}

@media (max-width: 720px) {
  .boom-story-player {
    padding: 8px;
  }

  .boom-story-player__header {
    align-items: flex-start;
    flex-direction: column;
  }

  .boom-story-player__network {
    width: 100%;
    justify-content: space-between;
  }

  .boom-story-player__game-card {
    height: min(68vh, 620px);
  }

  .boom-story-player__control-grid {
    grid-template-columns:
      repeat(2, minmax(0,1fr));
  }
}


/* ============================================================
   BOOM STORY COMPACT PLAYER V16
   Desktop rule:
   - Story fills remaining Trainer OS viewport
   - page itself does not grow with chat
   - game and chat always stay beside each other
   - only the message list scrolls
   ============================================================ */

@media (min-width: 1181px) {

  html.portal-story-player-active,
  body.portal-story-player-active {
    overflow: hidden !important;
  }

  .boom-story-player {
    height:
      var(
        --boom-story-height,
        calc(100dvh - 150px)
      );

    min-height: 520px;
    max-height: none;

    display: grid;

    grid-template-rows:
      auto
      minmax(0, 1fr)
      auto;

    gap: 8px;

    overflow: hidden;

    padding:
      8px 14px 10px;
  }


  /* ------------------------------------------
     Small Story title row
     ------------------------------------------ */

  .boom-story-player__header {
    min-height: 48px;

    margin: 0;

    padding:
      7px 12px;

    flex: 0 0 auto;
  }

  .boom-story-player__brand h1 {
    font-size: 15px;
  }

  .boom-story-player__brand small {
    font-size: 7px;
  }

  .boom-story-player__back {
    width: 32px;
    height: 32px;

    font-size: 20px;
  }


  /* ------------------------------------------
     GAME + CHAT owns remaining space
     ------------------------------------------ */

  .boom-story-player__layout {
    min-height: 0;
    height: 100%;

    align-items: stretch;

    grid-template-columns:
      minmax(0, 1fr)
      clamp(285px, 22vw, 350px);

    gap: 10px;

    overflow: hidden;
  }


  /* ------------------------------------------
     Game cannot push page height
     ------------------------------------------ */

  .boom-story-player__game-card {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    max-height: none;

    overflow: hidden;
  }

  .boom-story-player__frame {
    width: 100%;
    height: 100%;

    min-height: 0;
  }


  /* ------------------------------------------
     Chat exactly follows game height
     ------------------------------------------ */

  .boom-story-player__chat {
    width: 100%;
    height: 100%;

    min-width: 0;
    min-height: 0;

    max-height: 100%;

    overflow: hidden;

    display: grid;

    grid-template-rows:
      auto
      minmax(0, 1fr)
      auto
      auto;
  }


  /* ------------------------------------------
     THIS is the scrolling area
     ------------------------------------------ */

  .boom-story-player__messages {
    min-height: 0;
    max-height: none;

    overflow-x: hidden;
    overflow-y: auto;

    overscroll-behavior: contain;

    scrollbar-gutter: stable;

    padding: 9px 10px;
  }


  /* ------------------------------------------
     Chat header + input always visible
     ------------------------------------------ */

  .boom-story-player__chat header {
    flex: 0 0 auto;

    padding: 11px 12px;
  }

  .boom-story-player__compose {
    flex: 0 0 auto;

    padding: 8px;
  }

  .boom-story-player__compose input {
    height: 35px;
  }

  .boom-story-player__chat-hint {
    padding:
      0 8px 7px;
  }


  /* ------------------------------------------
     Compact controls
     ------------------------------------------ */

  .boom-story-player__controls {
    flex: 0 0 auto;

    margin: 0;

    padding:
      8px 10px;

    border-radius: 14px;
  }

  .boom-story-player__controls > header {
    margin-bottom: 6px;

    align-items: center;
  }

  .boom-story-player__controls h2 {
    margin: 0;

    font-size: 12px;
  }

  .boom-story-player__controls
  > header
  > div
  > small {
    display: none;
  }

  .boom-story-player__controls
  > header
  > span {
    font-size: 7px;
  }

  .boom-story-player__control-grid {
    grid-template-columns:
      repeat(6, minmax(0, 1fr));

    gap: 6px;
  }

  .boom-story-player__control-grid article {
    min-height: 42px;

    padding: 6px 8px;

    border-radius: 9px;
  }

  .boom-story-player__control-grid kbd {
    flex-basis: 30px;

    width: 30px;
    height: 30px;

    border-radius: 7px;
  }

  .boom-story-player__control-grid b {
    font-size: 8px;
  }

  .boom-story-player__control-grid small {
    margin-top: 1px;

    font-size: 7px;
  }


  /* ------------------------------------------
     Prevent Portal outlet from creating
     another vertical scroll layer
     ------------------------------------------ */

  body.portal-story-player-active
  .portal-main,

  body.portal-story-player-active
  .portal-content,

  body.portal-story-player-active
  .portal-outlet {

    min-height: 0;
  }

}


/* ============================================================
   Smaller laptops
   ============================================================ */

@media
  (min-width: 1181px)
  and (max-height: 760px) {

  .boom-story-player__header {
    min-height: 42px;
  }

  .boom-story-player__controls {
    padding: 6px 8px;
  }

  .boom-story-player__control-grid article {
    min-height: 36px;
  }

  .boom-story-player__control-grid kbd {
    width: 26px;
    height: 26px;

    flex-basis: 26px;
  }

  .boom-story-player__control-grid small {
    display: none;
  }

}


/* ============================================================
   Mobile/tablet remains normal scrolling layout
   ============================================================ */

@media (max-width: 1180px) {

  html.portal-story-player-active,
  body.portal-story-player-active {
    overflow-y: auto !important;
  }

  .boom-story-player {
    height: auto !important;
    overflow: visible;
  }

  .boom-story-player__layout {
    overflow: visible;
  }

  .boom-story-player__chat {
    height: 360px;
    max-height: 360px;
  }

  .boom-story-player__messages {
    overflow-y: auto;
    min-height: 0;
  }

}



/* ============================================================
   BOOM STORY YELLOW V17
   Visual target:
   colourful Pokemon adventure presentation
   ============================================================ */


@media (min-width: 1181px) {


  /* ----------------------------------------------------------
     PAGE ATMOSPHERE
     ---------------------------------------------------------- */

  body.portal-story-player-active {
    background:
      radial-gradient(
        circle at 10% 65%,
        rgba(22,113,255,.25),
        transparent 28%
      ),
      radial-gradient(
        circle at 93% 40%,
        rgba(27,130,255,.20),
        transparent 26%
      ),
      radial-gradient(
        circle at 50% 100%,
        rgba(44,0,85,.35),
        transparent 46%
      ),
      linear-gradient(
        180deg,
        #031327 0%,
        #041325 42%,
        #07172b 100%
      ) !important;
  }


  body.portal-story-player-active::before {

    content:"";

    position:fixed;

    inset:
      94px 0 0;

    z-index:-1;

    pointer-events:none;

    opacity:.55;

    background:

      radial-gradient(
        circle at 7% 69%,
        transparent 0 54px,
        rgba(67,166,255,.36) 55px 57px,
        transparent 58px
      ),

      radial-gradient(
        circle at 7% 69%,
        transparent 0 91px,
        rgba(47,126,255,.18) 92px 95px,
        transparent 96px
      ),

      linear-gradient(
        90deg,
        rgba(0,87,177,.17),
        transparent 16%,
        transparent 84%,
        rgba(0,107,219,.16)
      );

  }


  .boom-story-player {

    width:
      min(
        1600px,
        calc(100vw - 28px)
      );

    max-width:1600px;

    margin:
      0 auto;

    padding:
      0 12px 12px;

    gap:8px;

  }


  /* ----------------------------------------------------------
     SCENIC BOOM STORY HEADER
     ---------------------------------------------------------- */

  .boom-story-player__hero {

    position:relative;

    overflow:hidden;

    height:118px;

    min-height:118px;

    border-left:
      1px solid rgba(37,168,255,.35);

    border-right:
      1px solid rgba(37,168,255,.35);

    border-bottom:
      2px solid rgba(24,178,255,.62);

    background:

      linear-gradient(
        180deg,
        rgba(2,27,65,.18),
        rgba(0,28,72,.46)
      ),

      radial-gradient(
        ellipse at 50% 115%,
        #0b6694 0,
        #084063 20%,
        transparent 42%
      ),

      linear-gradient(
        180deg,
        #053a70 0%,
        #082f5e 44%,
        #04162f 100%
      );

    box-shadow:

      0 12px 30px
      rgba(0,0,0,.42),

      inset 0 -24px 60px
      rgba(0,0,0,.30);

  }


  .boom-story-player__hero::before {

    content:"";

    position:absolute;

    inset:0;

    opacity:.45;

    background-image:

      radial-gradient(
        circle at 8% 55%,
        #0b1730 0 3px,
        transparent 4px
      ),

      radial-gradient(
        circle at 13% 40%,
        #0b1730 0 4px,
        transparent 5px
      ),

      radial-gradient(
        circle at 88% 34%,
        #0b1730 0 4px,
        transparent 5px
      );

    background-size:
      60px 40px;

  }


  .boom-story-player__hero-glow {

    position:absolute;

    inset:auto 0 0;

    height:4px;

    background:
      linear-gradient(
        90deg,
        transparent,
        #00b9ff,
        #7eefff,
        #00a1ff,
        transparent
      );

    box-shadow:
      0 0 18px #00aaff;

  }


  .boom-story-player__hero-copy {

    position:absolute;

    z-index:5;

    left:46px;
    top:20px;

  }


  .boom-story-player__hero-logo {

    display:flex;

    align-items:center;

    gap:12px;

    font-weight:1000;

    font-style:italic;

    letter-spacing:-.05em;

    transform:
      skewX(-7deg);

  }


  .boom-story-player__hero-logo span,
  .boom-story-player__hero-logo b {

    display:block;

    font-size:
      clamp(
        28px,
        2.6vw,
        43px
      );

    line-height:.9;

    color:#f9fdff;

    text-shadow:

      0 3px 0 #285c94,
      0 6px 0 #122a55,
      0 0 14px rgba(71,191,255,.72);

  }


  .boom-story-player__hero-logo b {

    color:
      #e7f5ff;

  }


  .boom-story-player__hero-logo span::after {

    content:"";

    display:inline-block;

    width:18px;
    height:18px;

    margin:
      0 -4px 1px 2px;

    vertical-align:middle;

    border:
      3px solid white;

    border-radius:50%;

    background:
      linear-gradient(
        #ff4051 0 45%,
        #10151d 45% 56%,
        #f7ffff 56%
      );

    box-shadow:
      0 0 0 2px #1c4a7b;

  }


  .boom-story-player__hero-sub {

    margin:
      9px 0 0 32px;

    display:flex;

    align-items:center;

    gap:9px;

    color:#d5ebff;

    font-size:8px;

    font-weight:950;

    letter-spacing:.36em;

  }


  .boom-story-player__hero-sub i {

    width:4px;
    height:4px;

    border-radius:50%;

    background:#fff;

    opacity:.7;

  }


  /* ----------------------------------------------------------
     SIMPLE NIGHT WORLD ART
     ---------------------------------------------------------- */

  .boom-story-player__hero-world {

    position:absolute;

    z-index:2;

    left:360px;
    right:250px;

    bottom:0;

    height:100%;

  }


  .boom-story-player__moon {

    position:absolute;

    top:18px;
    left:48%;

    width:26px;
    height:26px;

    border-radius:50%;

    background:#f2f2cb;

    box-shadow:
      0 0 25px
      rgba(255,252,188,.52);

  }


  .boom-story-player__mountains {

    position:absolute;

    left:0;
    right:0;

    bottom:15px;

    height:50px;

    clip-path:
      polygon(
        0 100%,
        0 75%,
        10% 42%,
        18% 71%,
        30% 30%,
        42% 72%,
        54% 40%,
        67% 69%,
        78% 32%,
        91% 71%,
        100% 48%,
        100% 100%
      );

    background:
      linear-gradient(
        #17356b,
        #071b3d
      );

    opacity:.82;

  }


  .boom-story-player__houses {

    position:absolute;

    left:0;
    right:0;

    bottom:6px;

    display:flex;

    justify-content:center;

    align-items:flex-end;

    gap:24px;

  }


  .boom-story-player__houses i {

    position:relative;

    width:50px;
    height:30px;

    border-radius:
      3px 3px 0 0;

    background:#0c2142;

    box-shadow:
      inset 12px -8px 0
      rgba(23,67,111,.5);

  }


  .boom-story-player__houses i::before {

    content:"";

    position:absolute;

    left:-6px;
    right:-6px;

    top:-13px;

    height:17px;

    clip-path:
      polygon(
        50% 0,
        100% 100%,
        0 100%
      );

    background:#172a52;

  }


  .boom-story-player__houses i::after {

    content:"";

    position:absolute;

    width:8px;
    height:7px;

    left:11px;
    top:12px;

    background:#ffd43f;

    box-shadow:
      20px 0 #ffb52e;

    filter:
      drop-shadow(
        0 0 5px
        #ffcf36
      );

  }


  /* ----------------------------------------------------------
     SLOGAN
     ---------------------------------------------------------- */

  .boom-story-player__hero-slogan {

    position:absolute;

    z-index:7;

    right:185px;

    top:18px;

    color:#ffcf32;

    font-size:20px;

    font-weight:900;

    font-style:italic;

    line-height:1;

    transform:
      rotate(-7deg);

    text-shadow:
      0 0 12px
      rgba(255,210,44,.55);

  }


  .boom-story-player__hero-slogan strong {

    display:block;

    margin-left:20px;

    font-size:25px;

    font-weight:1000;

  }


  /* ----------------------------------------------------------
     PIKACHU
     ---------------------------------------------------------- */

  .boom-story-player__hero-pikachu {

    position:absolute;

    z-index:10;

    right:30px;

    bottom:-18px;

    width:148px;
    height:148px;

    display:grid;

    place-items:center;

  }


  .boom-story-player__hero-pikachu::before {

    content:"";

    position:absolute;

    inset:8px;

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        rgba(255,232,64,.44),
        rgba(255,193,24,.10) 55%,
        transparent 70%
      );

    box-shadow:
      0 0 40px
      rgba(255,225,41,.34);

  }


  .boom-story-player__hero-pikachu img {

    position:relative;

    z-index:3;

    width:112px;

    image-rendering:pixelated;

    transform:
      scale(1.14);

    filter:

      drop-shadow(
        0 5px 0
        rgba(0,0,0,.2)
      )

      drop-shadow(
        0 0 16px
        rgba(255,218,42,.65)
      );

  }


  .boom-story-player__bolt {

    position:absolute;

    z-index:1;

    right:-14px;

    top:12px;

    color:#fff330;

    font-size:70px;

    font-weight:1000;

    transform:
      rotate(12deg);

    text-shadow:
      0 0 12px #ffeb20,
      0 0 30px #ffad00;

  }


  /* ----------------------------------------------------------
     NEW GRID SIZING
     ---------------------------------------------------------- */

  .boom-story-player {

    grid-template-rows:
      118px
      50px
      minmax(0,1fr)
      108px !important;

  }


  .boom-story-player__header {

    border:

      1px solid
      rgba(36,158,255,.28);

    background:

      linear-gradient(
        90deg,
        #07162b,
        #0c1830
      );

    box-shadow:
      inset 0 -1px 0
      rgba(0,132,255,.20);

  }


  .boom-story-player__brand h1 {

    color:#fff;

    font-size:17px;

    letter-spacing:-.02em;

  }


  .boom-story-player__brand h1 span {

    color:#ffd83b;

    text-shadow:
      0 0 12px
      rgba(255,218,59,.25);

  }


  /* ----------------------------------------------------------
     GAME + CHAT
     ---------------------------------------------------------- */

  .boom-story-player__layout {

    grid-template-columns:
      minmax(0,1fr)
      clamp(
        300px,
        21vw,
        350px
      );

    gap:12px;

  }


  .boom-story-player__game-card {

    border:
      2px solid #ffd83c !important;

    border-radius:18px;

    background:
      radial-gradient(
        circle at center,
        #061422,
        #030912 70%
      );

    box-shadow:

      0 0 0 1px
      rgba(255,218,60,.18),

      0 0 18px
      rgba(255,213,46,.34),

      inset 0 0 50px
      rgba(0,33,68,.22);

  }


  .boom-story-player__game-badge {

    border-color:
      rgba(255,218,60,.42);

    color:#fff;

    background:
      rgba(5,13,25,.90);

  }


  .boom-story-player__chat {

    border:
      2px solid #039eff !important;

    border-radius:18px;

    background:
      linear-gradient(
        180deg,
        #071a2d,
        #061221
      );

    box-shadow:

      0 0 18px
      rgba(0,145,255,.27),

      inset 0 0 35px
      rgba(0,92,176,.11);

  }


  .boom-story-player__chat header {

    background:
      linear-gradient(
        90deg,
        rgba(0,125,221,.15),
        transparent
      );

    border-bottom:
      1px solid
      rgba(39,151,255,.25);

  }


  .boom-story-player__chat header b {

    font-size:13px;

    color:white;

  }


  .boom-story-player__message {

    padding:
      2px 4px;

    border-radius:7px;

  }


  .boom-story-player__message:hover {

    background:
      rgba(30,121,220,.08);

  }


  .boom-story-player__compose {

    background:
      rgba(1,9,18,.82);

  }


  .boom-story-player__compose input {

    border-color:
      rgba(29,143,244,.30);

    background:
      #03101d;

  }


  .boom-story-player__compose button {

    background:
      linear-gradient(
        135deg,
        #43d3ff,
        #52a7ff
      );

    box-shadow:
      0 0 16px
      rgba(45,190,255,.30);

  }


  /* ----------------------------------------------------------
     CONTROLS WRAPPER
     ---------------------------------------------------------- */

  .boom-story-player__controls {

    position:relative;

    overflow:hidden;

    padding:
      10px 12px 12px !important;

    border:
      2px solid #0ab5ff;

    border-radius:17px;

    background:
      linear-gradient(
        180deg,
        #071b2f,
        #061322
      );

    box-shadow:

      0 0 18px
      rgba(0,151,255,.24),

      inset 0 0 35px
      rgba(15,102,183,.08);

  }


  .boom-story-player__controls > header {

    margin-bottom:7px;

  }


  .boom-story-player__controls h2 {

    font-size:13px !important;

    color:#f5fbff;

  }


  .boom-story-player__controls h2::before {

    content:"🎮 ";

  }


  .boom-story-player__controls
  > header
  > div::after {

    content:
      "Quick keys for an even better adventure";

    margin-left:10px;

    color:#53d7ff;

    font-size:8px;

  }


  /* ----------------------------------------------------------
     BIG COLOURFUL CONTROL CARDS
     ---------------------------------------------------------- */

  .boom-story-player__control-grid {

    height:70px;

    gap:9px !important;

  }


  .boom-story-player__control-grid article {

    position:relative;

    overflow:hidden;

    height:70px;

    min-height:70px !important;

    padding:
      8px 10px !important;

    border:
      2px solid
      var(--key-colour);

    border-radius:11px;

    background:

      radial-gradient(
        circle at 10% 50%,
        color-mix(
          in srgb,
          var(--key-colour) 24%,
          transparent
        ),
        transparent 50%
      ),

      linear-gradient(
        135deg,
        #0a1625,
        #08111d
      );

    box-shadow:

      0 0 12px
      color-mix(
        in srgb,
        var(--key-colour) 45%,
        transparent
      ),

      inset 0 0 18px
      color-mix(
        in srgb,
        var(--key-colour) 10%,
        transparent
      );

  }


  .boom-story-player__control-grid article:nth-child(1) {

    --key-colour:#ffd72f;

  }


  .boom-story-player__control-grid article:nth-child(2) {

    --key-colour:#159bff;

  }


  .boom-story-player__control-grid article:nth-child(3) {

    --key-colour:#27e66f;

  }


  .boom-story-player__control-grid article:nth-child(4) {

    --key-colour:#9b48ff;

  }


  .boom-story-player__control-grid article:nth-child(5) {

    --key-colour:#ff951f;

  }


  .boom-story-player__control-grid article:nth-child(6) {

    --key-colour:#0edaff;

  }


  .boom-story-player__control-grid kbd {

    position:relative;

    z-index:2;

    flex-basis:48px !important;

    width:48px !important;
    height:48px !important;

    border:
      2px solid
      rgba(255,255,255,.55);

    border-radius:10px;

    background:
      linear-gradient(
        145deg,
        color-mix(
          in srgb,
          var(--key-colour) 90%,
          white 10%
        ),
        var(--key-colour)
      );

    color:
      #06101b;

    font-size:22px;

    font-weight:1000;

    box-shadow:

      inset 0 -5px 0
      rgba(0,0,0,.20),

      0 0 15px
      color-mix(
        in srgb,
        var(--key-colour) 55%,
        transparent
      );

  }


  .boom-story-player__control-grid b {

    font-size:
      11px !important;

    color:#fff;

  }


  .boom-story-player__control-grid small {

    display:block !important;

    margin-top:4px !important;

    font-size:
      8px !important;

    color:#a9bed5;

    line-height:1.2;

  }


  .boom-story-player__control-grid article::after {

    position:absolute;

    right:11px;

    color:
      var(--key-colour);

    font-size:25px;

    opacity:.95;

    filter:
      drop-shadow(
        0 0 7px
        var(--key-colour)
      );

  }


  .boom-story-player__control-grid article:nth-child(1)::after {

    content:"»";

  }


  .boom-story-player__control-grid article:nth-child(2)::after {

    content:"◆";

  }


  .boom-story-player__control-grid article:nth-child(3)::after {

    content:"▦";

  }


  .boom-story-player__control-grid article:nth-child(4)::after {

    content:"»";

  }


  .boom-story-player__control-grid article:nth-child(5)::after {

    content:"∿";

  }


  .boom-story-player__control-grid article:nth-child(6)::after {

    content:"●";

  }


  /* ----------------------------------------------------------
     AUTO ONLINE CARD
     ---------------------------------------------------------- */

  .boom-story-player__control-grid article:nth-child(6) {

    padding-right:54px !important;

  }


  .boom-story-player__control-grid article:nth-child(6)::before {

    content:"";

    position:absolute;

    right:11px;

    bottom:10px;

    width:38px;
    height:19px;

    border-radius:999px;

    background:#18d77b;

    box-shadow:
      0 0 12px
      rgba(20,228,127,.48);

  }


  /* ----------------------------------------------------------
     DECORATIVE SIDE GLOWS
     ---------------------------------------------------------- */

  .boom-story-player::before {

    content:"";

    position:absolute;

    pointer-events:none;

    left:-100px;
    bottom:90px;

    width:180px;
    height:300px;

    opacity:.35;

    border-radius:50%;

    background:
      radial-gradient(
        circle,
        transparent 35%,
        #1d8dff 36% 38%,
        transparent 39% 52%,
        #136ac7 53% 55%,
        transparent 56%
      );

    filter:
      blur(.2px);

  }


}


/* ============================================================
   1440 / smaller desktop
   ============================================================ */

@media
  (min-width:1181px)
  and (max-width:1450px) {

  .boom-story-player__hero {

    height:100px;
    min-height:100px;

  }

  .boom-story-player {

    grid-template-rows:
      100px
      46px
      minmax(0,1fr)
      98px !important;

  }

  .boom-story-player__hero-pikachu {

    width:125px;
    height:125px;

  }

  .boom-story-player__hero-pikachu img {

    width:92px;

  }

  .boom-story-player__hero-slogan {

    right:155px;

  }

  .boom-story-player__control-grid article {

    height:61px;
    min-height:61px !important;

  }

  .boom-story-player__control-grid {

    height:61px;

  }

  .boom-story-player__control-grid kbd {

    width:40px !important;
    height:40px !important;

    flex-basis:40px !important;

    font-size:18px;

  }

}


/* ============================================================
   MOBILE / TABLET
   Decorative hero remains but stacks normally.
   ============================================================ */

@media (max-width:1180px) {

  .boom-story-player__hero {

    position:relative;

    min-height:110px;

    margin-bottom:8px;

    overflow:hidden;

    border:
      1px solid
      rgba(23,145,255,.35);

    border-radius:16px;

    background:
      linear-gradient(
        135deg,
        #06396d,
        #041731
      );

  }

  .boom-story-player__hero-copy {

    position:absolute;

    left:18px;
    top:20px;

    z-index:3;

  }

  .boom-story-player__hero-logo {

    display:flex;

    gap:7px;

    color:white;

    font-size:27px;

    font-weight:1000;

  }

  .boom-story-player__hero-sub {

    margin-top:5px;

    color:#a5dcff;

    font-size:8px;

    letter-spacing:.14em;

  }

  .boom-story-player__hero-pikachu {

    position:absolute;

    right:10px;
    bottom:-8px;

  }

  .boom-story-player__hero-pikachu img {

    width:90px;

    image-rendering:pixelated;

  }

  .boom-story-player__hero-world,
  .boom-story-player__hero-slogan {

    display:none;

  }

  .boom-story-player__control-grid article {

    --key-colour:#38cfff;

  }

}



/* ============================================================
   BOOM STORY YELLOW BACKGROUND UI V18
   Reference-driven Story gameplay design.
   ============================================================ */


@media (min-width: 1181px) {


  /* ========================================================
     FULL STORY SCENE
     ======================================================== */

  body.portal-story-player-active {
    background:#020812 !important;
  }


  .boom-story-player {

    position:relative;

    isolation:isolate;

    width:100% !important;
    max-width:none !important;

    height:
      var(
        --boom-story-height,
        calc(100dvh - 94px)
      ) !important;

    min-height:0 !important;

    margin:0 !important;

    padding:
      0 0 12px !important;

    display:grid !important;

    grid-template-rows:
      118px
      54px
      minmax(0,1fr)
      126px !important;

    gap:8px !important;

    overflow:hidden !important;

    background-image:

      linear-gradient(
        180deg,
        rgba(2,10,25,.05) 0%,
        rgba(1,8,20,.10) 55%,
        rgba(1,7,18,.40) 100%
      ),

      url(
        "/portal/assets/story/yellow/story-yellow-bg.png"
      );

    background-size:
      cover;

    background-position:
      center center;

    background-repeat:
      no-repeat;

    box-shadow:
      inset 0 0 100px
      rgba(0,0,0,.18);

  }


  /*
   * Remove decorative experiments from previous versions.
   * The real image is the scenery now.
   */

  .boom-story-player::before,
  .boom-story-player::after {

    display:none !important;

  }


  /* ========================================================
     HERO IS NOW JUST CLEAR SPACE FOR THE BACKGROUND ART
     ======================================================== */

  .boom-story-player__hero {

    width:100% !important;

    height:118px !important;
    min-height:118px !important;

    margin:0 !important;

    border:0 !important;

    border-radius:0 !important;

    background:
      linear-gradient(
        180deg,
        rgba(1,7,17,.02),
        rgba(1,7,17,.04)
      ) !important;

    box-shadow:none !important;

    overflow:hidden;

    pointer-events:none;

  }


  .boom-story-player__hero > * {

    display:none !important;

  }


  /* ========================================================
     SHARED CONTENT WIDTH
     Leaves scenery visible at the sides.
     ======================================================== */

  .boom-story-player__header,
  .boom-story-player__layout,
  .boom-story-player__controls {

    width:
      min(
        1480px,
        calc(100% - 120px)
      ) !important;

    margin-left:auto !important;
    margin-right:auto !important;

  }


  /* ========================================================
     POKEMON YELLOW TITLE BAR
     ======================================================== */

  .boom-story-player__header {

    position:relative;

    min-height:0 !important;

    height:54px !important;

    margin-top:0 !important;
    margin-bottom:0 !important;

    padding:
      7px 18px !important;

    overflow:visible;

    border:
      1px solid
      rgba(60,176,255,.42) !important;

    border-radius:
      18px 18px 10px 10px !important;

    background:

      linear-gradient(
        90deg,
        rgba(3,17,34,.96),
        rgba(6,25,49,.93) 65%,
        rgba(4,18,36,.96)
      ) !important;

    box-shadow:

      0 0 20px
      rgba(0,144,255,.17),

      inset 0 -1px 0
      rgba(0,155,255,.18) !important;

    backdrop-filter:
      blur(12px);

  }


  /*
   * Small Pokémon mascot in the gameplay chrome.
   * Uses the Pokémon asset already present on your site.
   */

  .boom-story-player__header::after {

    content:"";

    position:absolute;

    z-index:4;

    right:170px;
    bottom:-7px;

    width:72px;
    height:72px;

    background-image:
      url("/pokeimg/normal/25.png");

    background-repeat:
      no-repeat;

    background-position:
      center;

    background-size:
      contain;

    image-rendering:
      pixelated;

    filter:

      drop-shadow(
        0 0 9px
        rgba(255,224,52,.72)
      )

      drop-shadow(
        0 5px 5px
        rgba(0,0,0,.35)
      );

    pointer-events:none;

  }


  .boom-story-player__brand {

    gap:10px !important;

  }


  .boom-story-player__brand h1 {

    margin:0 !important;

    color:#f6fbff !important;

    font-size:
      19px !important;

    font-weight:
      1000 !important;

    letter-spacing:
      -.025em !important;

  }


  .boom-story-player__brand h1 span {

    color:#ffdc37 !important;

    text-shadow:
      0 0 14px
      rgba(255,220,55,.35);

  }


  .boom-story-player__brand small {

    color:#49d9ff !important;

    font-size:
      8px !important;

    font-weight:
      950 !important;

    letter-spacing:
      .15em !important;

  }


  .boom-story-player__back {

    width:36px !important;
    height:36px !important;

    border:
      1px solid
      rgba(95,186,255,.25) !important;

    border-radius:
      11px !important;

    background:
      rgba(2,12,25,.60) !important;

  }


  .boom-story-player__network span {

    padding:
      8px 14px !important;

    border:
      1px solid
      rgba(36,244,164,.46) !important;

    background:
      rgba(8,49,46,.66) !important;

    color:
      #68ffc0 !important;

    box-shadow:
      0 0 15px
      rgba(26,229,147,.15);

  }


  /* ========================================================
     GAME + CHAT ROW
     ======================================================== */

  .boom-story-player__layout {

    height:100% !important;

    min-height:0 !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      clamp(
        300px,
        21vw,
        355px
      ) !important;

    gap:12px !important;

    align-items:stretch !important;

    overflow:hidden !important;

  }


  /* ========================================================
     GAME FRAME
     ======================================================== */

  .boom-story-player__game-card {

    position:relative;

    width:100% !important;
    height:100% !important;

    min-width:0 !important;
    min-height:0 !important;

    overflow:hidden !important;

    border:
      2px solid
      #ffdd39 !important;

    border-radius:
      19px !important;

    background:

      radial-gradient(
        circle at 50% 45%,
        #061525 0,
        #020711 67%
      ) !important;

    box-shadow:

      0 0 4px
      rgba(255,230,63,.95),

      0 0 24px
      rgba(255,205,30,.30),

      0 14px 45px
      rgba(0,0,0,.42),

      inset 0 0 55px
      rgba(0,45,86,.18) !important;

  }


  .boom-story-player__game-card::after {

    content:"";

    position:absolute;

    inset:0;

    pointer-events:none;

    border-radius:17px;

    box-shadow:
      inset 0 0 30px
      rgba(20,115,200,.08);

  }


  .boom-story-player__frame {

    width:100% !important;
    height:100% !important;

    min-height:0 !important;

  }


  .boom-story-player__loading {

    background:

      radial-gradient(
        circle at center,
        rgba(12,55,91,.24),
        transparent 35%
      ),

      rgba(1,7,15,.97) !important;

  }


  .boom-story-player__loading strong {

    color:#f7fbff;

    font-size:15px;

    letter-spacing:.12em;

  }


  .boom-story-player__loading small {

    color:#8ea6be;

  }


  /* ========================================================
     WORLD CHAT
     ======================================================== */

  .boom-story-player__chat {

    width:100% !important;
    height:100% !important;

    min-height:0 !important;
    max-height:100% !important;

    overflow:hidden !important;

    display:grid !important;

    grid-template-rows:
      62px
      minmax(0,1fr)
      53px
      23px !important;

    border:
      2px solid
      #00a6ff !important;

    border-radius:
      19px !important;

    background:

      radial-gradient(
        circle at 20% 0,
        rgba(0,118,214,.18),
        transparent 42%
      ),

      linear-gradient(
        180deg,
        rgba(3,26,47,.97),
        rgba(2,14,27,.98)
      ) !important;

    box-shadow:

      0 0 4px
      rgba(0,170,255,.9),

      0 0 22px
      rgba(0,133,255,.23),

      0 14px 45px
      rgba(0,0,0,.34) !important;

  }


  .boom-story-player__chat header {

    height:62px;

    padding:
      11px 14px !important;

    border-bottom:
      1px solid
      rgba(37,159,255,.26) !important;

    background:

      linear-gradient(
        90deg,
        rgba(0,108,203,.14),
        transparent
      ) !important;

  }


  .boom-story-player__chat header small {

    color:#50cfff !important;

    font-size:8px !important;

  }


  .boom-story-player__chat header b {

    color:#f3faff !important;

    font-size:14px !important;

  }


  .boom-story-player__messages {

    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    padding:
      9px 11px !important;

    overscroll-behavior:
      contain;

    scrollbar-width:
      thin;

    scrollbar-color:
      #5f738a
      rgba(0,0,0,.12);

  }


  .boom-story-player__message {

    margin-bottom:
      7px !important;

    padding:
      4px !important;

    border-radius:
      8px;

  }


  .boom-story-player__message:hover {

    background:
      rgba(50,151,240,.08);

  }


  .boom-story-player__avatar {

    background:
      linear-gradient(
        135deg,
        #104c7c,
        #0b2947
      ) !important;

    color:#7fe0ff !important;

  }


  .boom-story-player__message.is-me
  .boom-story-player__avatar {

    background:
      linear-gradient(
        135deg,
        #9d8305,
        #4e4205
      ) !important;

    color:#ffe65c !important;

  }


  .boom-story-player__message b {

    color:#5edcff !important;

  }


  .boom-story-player__message.is-me b {

    color:#ffe047 !important;

  }


  .boom-story-player__compose {

    height:53px;

    padding:
      8px !important;

    background:
      rgba(0,7,16,.88) !important;

    border-top:
      1px solid
      rgba(38,145,229,.20) !important;

  }


  .boom-story-player__compose input {

    height:37px !important;

    border:
      1px solid
      rgba(36,148,235,.32) !important;

    background:
      rgba(2,12,24,.92) !important;

  }


  .boom-story-player__compose button {

    min-width:72px !important;

    border:
      1px solid
      rgba(116,218,255,.45) !important;

    background:

      linear-gradient(
        135deg,
        #37d4ff,
        #4ba8ff
      ) !important;

    color:
      #03101d !important;

    box-shadow:
      0 0 14px
      rgba(37,184,255,.26);

  }


  /* ========================================================
     CONTROLS
     ======================================================== */

  .boom-story-player__controls {

    height:126px !important;

    margin-top:0 !important;

    padding:
      10px 13px 12px !important;

    overflow:hidden;

    border:
      2px solid
      #05aeff !important;

    border-radius:
      18px !important;

    background:

      linear-gradient(
        180deg,
        rgba(3,27,48,.96),
        rgba(2,14,28,.97)
      ) !important;

    box-shadow:

      0 0 5px
      rgba(0,175,255,.80),

      0 0 24px
      rgba(0,123,255,.22),

      0 14px 40px
      rgba(0,0,0,.25) !important;

  }


  .boom-story-player__controls > header {

    height:25px;

    margin:
      0 0 8px !important;

    align-items:center !important;

  }


  .boom-story-player__controls h2 {

    margin:0 !important;

    color:#f8fcff !important;

    font-size:
      13px !important;

  }


  .boom-story-player__controls h2::before {

    content:"🎮 ";

  }


  .boom-story-player__controls
  > header
  > div::after {

    content:
      "Quick keys for an even better adventure";

    margin-left:
      12px;

    color:
      #52d7ff;

    font-size:
      8px;

  }


  .boom-story-player__control-grid {

    height:78px !important;

    display:grid !important;

    grid-template-columns:
      repeat(
        6,
        minmax(0,1fr)
      ) !important;

    gap:9px !important;

  }


  .boom-story-player__control-grid article {

    --story-key:
      #00c6ff;

    position:relative;

    overflow:hidden;

    height:78px !important;

    min-height:78px !important;

    padding:
      10px 12px !important;

    display:flex !important;

    align-items:center !important;

    gap:11px !important;

    border:
      2px solid
      var(--story-key) !important;

    border-radius:
      12px !important;

    background:

      radial-gradient(
        circle at 8% 50%,
        color-mix(
          in srgb,
          var(--story-key) 25%,
          transparent
        ),
        transparent 47%
      ),

      linear-gradient(
        135deg,
        rgba(10,25,41,.98),
        rgba(4,13,25,.98)
      ) !important;

    box-shadow:

      0 0 14px
      color-mix(
        in srgb,
        var(--story-key) 38%,
        transparent
      ),

      inset 0 0 20px
      color-mix(
        in srgb,
        var(--story-key) 9%,
        transparent
      ) !important;

  }


  .boom-story-player__control-grid
  article:nth-child(1) {

    --story-key:#ffd62f;

  }


  .boom-story-player__control-grid
  article:nth-child(2) {

    --story-key:#179eff;

  }


  .boom-story-player__control-grid
  article:nth-child(3) {

    --story-key:#29e96d;

  }


  .boom-story-player__control-grid
  article:nth-child(4) {

    --story-key:#994cff;

  }


  .boom-story-player__control-grid
  article:nth-child(5) {

    --story-key:#ff9525;

  }


  .boom-story-player__control-grid
  article:nth-child(6) {

    --story-key:#12d8ff;

  }


  .boom-story-player__control-grid kbd {

    flex:
      0 0 51px !important;

    width:
      51px !important;

    height:
      51px !important;

    display:grid;

    place-items:center;

    border:
      2px solid
      rgba(255,255,255,.68) !important;

    border-radius:
      11px !important;

    background:

      linear-gradient(
        145deg,
        color-mix(
          in srgb,
          var(--story-key) 83%,
          white 17%
        ),
        var(--story-key)
      ) !important;

    color:
      #06101a !important;

    font-size:
      23px !important;

    font-weight:
      1000 !important;

    box-shadow:

      inset 0 -5px 0
      rgba(0,0,0,.19),

      0 0 14px
      color-mix(
        in srgb,
        var(--story-key) 52%,
        transparent
      ) !important;

  }


  .boom-story-player__control-grid b {

    display:block;

    color:
      #f8fbff !important;

    font-size:
      11px !important;

    line-height:1.1;

  }


  .boom-story-player__control-grid small {

    display:block !important;

    margin-top:
      5px !important;

    color:
      #9bb0c8 !important;

    font-size:
      8px !important;

    line-height:1.2;

  }


  .boom-story-player__control-grid
  article::after {

    position:absolute;

    right:
      12px;

    color:
      var(--story-key);

    font-size:
      26px;

    font-weight:1000;

    filter:
      drop-shadow(
        0 0 8px
        var(--story-key)
      );

  }


  .boom-story-player__control-grid
  article:nth-child(1)::after {

    content:"»";

  }


  .boom-story-player__control-grid
  article:nth-child(2)::after {

    content:"◆";

  }


  .boom-story-player__control-grid
  article:nth-child(3)::after {

    content:"▦";

  }


  .boom-story-player__control-grid
  article:nth-child(4)::after {

    content:"»";

  }


  .boom-story-player__control-grid
  article:nth-child(5)::after {

    content:"∿";

  }


  .boom-story-player__control-grid
  article:nth-child(6)::after {

    content:"●";

  }


}


/* ============================================================
   MID-SIZE DESKTOP
   ============================================================ */

@media
  (min-width:1181px)
  and (max-width:1500px) {

  .boom-story-player__header,
  .boom-story-player__layout,
  .boom-story-player__controls {

    width:
      calc(100% - 28px)
      !important;

  }


  .boom-story-player {

    grid-template-rows:
      100px
      50px
      minmax(0,1fr)
      116px !important;

  }


  .boom-story-player__hero {

    height:
      100px !important;

    min-height:
      100px !important;

  }


  .boom-story-player__controls {

    height:
      116px !important;

  }


  .boom-story-player__control-grid {

    height:
      70px !important;

  }


  .boom-story-player__control-grid article {

    height:
      70px !important;

    min-height:
      70px !important;

  }


  .boom-story-player__control-grid kbd {

    flex-basis:
      44px !important;

    width:
      44px !important;

    height:
      44px !important;

    font-size:
      20px !important;

  }

}


/* ============================================================
   SHORT DESKTOP SCREENS
   ============================================================ */

@media
  (min-width:1181px)
  and (max-height:780px) {

  .boom-story-player {

    grid-template-rows:
      78px
      44px
      minmax(0,1fr)
      100px !important;

  }


  .boom-story-player__hero {

    height:
      78px !important;

    min-height:
      78px !important;

  }


  .boom-story-player__controls {

    height:
      100px !important;

    padding:
      7px 10px
      !important;

  }


  .boom-story-player__control-grid {

    height:
      60px !important;

  }


  .boom-story-player__control-grid article {

    height:
      60px !important;

    min-height:
      60px !important;

  }


  .boom-story-player__control-grid kbd {

    width:
      38px !important;

    height:
      38px !important;

    flex-basis:
      38px !important;

    font-size:
      18px !important;

  }


  .boom-story-player__control-grid small {

    font-size:
      7px !important;

  }

}


/* ============================================================
   MOBILE
   Keep background but allow normal page flow.
   ============================================================ */

@media (max-width:1180px) {

  .boom-story-player {

    background-image:

      linear-gradient(
        rgba(2,10,24,.20),
        rgba(1,7,18,.55)
      ),

      url(
        "/portal/assets/story/yellow/story-yellow-bg.png"
      ) !important;

    background-size:
      cover !important;

    background-position:
      center top !important;

  }

}



/* ============================================================
   BOOM STORY YELLOW CLEAN V19
   ============================================================ */

@media (min-width:1181px) {


  /* ========================================================
     REMOVE PORTAL QUICK COMMAND ROW
     Only while Story player is active.
     ======================================================== */

  body.portal-story-player-active
  #portal-command-dock {

    display:none !important;

  }


  /* ========================================================
     REMOVE OLD CSS ART / DOTS / DECORATION
     ======================================================== */

  body.portal-story-player-active::before,
  body.portal-story-player-active::after,
  .boom-story-player::before,
  .boom-story-player::after,
  .boom-story-player__hero::before,
  .boom-story-player__hero::after,
  .boom-story-player__hero-glow,
  .boom-story-player__hero-world,
  .boom-story-player__hero-copy,
  .boom-story-player__hero-slogan,
  .boom-story-player__hero-pikachu {

    display:none !important;

    content:none !important;

    background:none !important;

  }


  /* ========================================================
     ROOT STORY CANVAS
     Background follows viewport / zoom automatically.
     ======================================================== */

  .boom-story-player {

    position:relative !important;

    width:100% !important;
    max-width:none !important;

    margin:0 !important;

    height:
      var(
        --boom-story-height,
        calc(100dvh - 58px)
      ) !important;

    min-height:600px !important;

    padding:
      0 0 12px !important;

    display:grid !important;

    /*
     * Row 1 is only empty scenic space.
     * It exposes BOOM STORY / moon / scenery
     * from the real background image.
     *
     * No extra banner HTML is visible.
     */

    grid-template-rows:
      clamp(105px, 14vh, 165px)
      minmax(0,1fr)
      126px !important;

    gap:
      9px !important;

    overflow:hidden !important;

    isolation:isolate;

    background:

      linear-gradient(
        180deg,
        rgba(1,6,16,.00) 0%,
        rgba(1,7,17,.03) 35%,
        rgba(1,7,17,.16) 100%
      ),

      url(
        "/portal/assets/story/yellow/story-yellow-bg.png"
      ) !important;

    /*
     * COVER makes it automatically track:
     * - browser zoom
     * - window resize
     * - 16:9 / ultrawide
     * - fullscreen
     */

    background-size:
      cover !important;

    background-position:
      center center !important;

    background-repeat:
      no-repeat !important;

  }


  /* ========================================================
     HERO = INVISIBLE SPACER ONLY
     It exists solely to reveal the artwork above game.
     ======================================================== */

  .boom-story-player__hero {

    display:block !important;

    grid-row:1;

    width:100% !important;
    height:100% !important;

    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;
    border-radius:0 !important;

    background:
      transparent !important;

    box-shadow:
      none !important;

    pointer-events:
      none !important;

  }


  .boom-story-player__hero > * {

    display:none !important;

  }


  /* ========================================================
     REMOVE EXTRA POKEMON YELLOW TITLE BAR
     Includes:
     - back/title banner
     - little Pikachu
     - Global World badge
     - @username
     ======================================================== */

  .boom-story-player__header {

    display:none !important;

  }


  .boom-story-player__header::before,
  .boom-story-player__header::after {

    display:none !important;
    content:none !important;

  }


  /* ========================================================
     GAME + CHAT NOW START DIRECTLY AFTER SCENIC ART
     ======================================================== */

  .boom-story-player__layout {

    grid-row:2;

    width:
      min(
        1480px,
        calc(100% - 120px)
      ) !important;

    height:100% !important;

    min-height:0 !important;

    margin:
      0 auto !important;

    display:grid !important;

    grid-template-columns:
      minmax(0,1fr)
      clamp(
        300px,
        21vw,
        355px
      ) !important;

    gap:
      12px !important;

    align-items:
      stretch !important;

    overflow:
      hidden !important;

  }


  /* ========================================================
     GAME PANEL
     ======================================================== */

  .boom-story-player__game-card {

    height:100% !important;

    min-height:0 !important;

    border:
      2px solid
      #ffdc36 !important;

    border-radius:
      18px !important;

    box-shadow:

      0 0 4px
      rgba(255,223,50,.95),

      0 0 20px
      rgba(255,207,31,.28),

      0 18px 42px
      rgba(0,0,0,.35) !important;

  }


  /* ========================================================
     CHAT
     Never grows page.
     Only message list scrolls.
     ======================================================== */

  .boom-story-player__chat {

    height:100% !important;

    min-height:0 !important;
    max-height:100% !important;

    overflow:hidden !important;

    border:
      2px solid
      #00a9ff !important;

    box-shadow:

      0 0 4px
      rgba(0,174,255,.85),

      0 0 20px
      rgba(0,136,255,.24) !important;

  }


  .boom-story-player__messages {

    min-height:0 !important;

    overflow-y:auto !important;
    overflow-x:hidden !important;

    overscroll-behavior:
      contain !important;

  }


  /* ========================================================
     CONTROLS
     ======================================================== */

  .boom-story-player__controls {

    grid-row:3;

    width:
      min(
        1480px,
        calc(100% - 120px)
      ) !important;

    height:
      126px !important;

    margin:
      0 auto !important;

  }

}


/* ============================================================
   MID WIDTH DESKTOP
   ============================================================ */

@media
  (min-width:1181px)
  and (max-width:1500px) {

  .boom-story-player__layout,
  .boom-story-player__controls {

    width:
      calc(100% - 40px)
      !important;

  }

}


/* ============================================================
   SHORT SCREENS
   ============================================================ */

@media
  (min-width:1181px)
  and (max-height:800px) {

  .boom-story-player {

    grid-template-rows:
      clamp(75px, 11vh, 105px)
      minmax(0,1fr)
      104px !important;

  }

  .boom-story-player__controls {

    height:
      104px !important;

  }

}


/* ============================================================
   MOBILE
   ============================================================ */

@media (max-width:1180px) {

  body.portal-story-player-active
  #portal-command-dock {

    display:none !important;

  }


  .boom-story-player__header {

    display:none !important;

  }


  .boom-story-player__hero::before,
  .boom-story-player__hero::after {

    display:none !important;

    content:none !important;

  }


  .boom-story-player {

    background:

      linear-gradient(
        rgba(2,8,20,.10),
        rgba(2,8,20,.48)
      ),

      url(
        "/portal/assets/story/yellow/story-yellow-bg.png"
      ) !important;

    background-size:
      cover !important;

    background-position:
      center top !important;

    background-repeat:
      no-repeat !important;

  }

}



/* ============================================================
   BOOM STORY YELLOW FULLBLEED V20
   Removes all artificial dead space.
   The background is the Story canvas.
   ============================================================ */

@media (min-width:1181px) {


  /* ========================================================
     REMOVE QUICK COMMAND COMPLETELY
     ======================================================== */

  body.portal-story-player-active
  #portal-command-dock {

    display:none !important;

    width:0 !important;
    height:0 !important;

    min-height:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    overflow:hidden !important;

  }


  /* ========================================================
     COLLAPSE PORTAL STAGE
     No invisible padding where Quick Command used to live.
     ======================================================== */

  body.portal-story-player-active
  #portal-content,

  body.portal-story-player-active
  .portal-stage {

    width:100% !important;
    max-width:none !important;

    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    background:
      transparent !important;

  }


  body.portal-story-player-active
  #portal-content::before,

  body.portal-story-player-active
  #portal-content::after,

  body.portal-story-player-active
  .portal-stage::before,

  body.portal-story-player-active
  .portal-stage::after {

    display:none !important;
    content:none !important;

  }


  /* ========================================================
     STORY ROOT
     Entire remaining viewport becomes one responsive scene.
     ======================================================== */

  .boom-story-player {

    position:relative !important;

    width:100% !important;
    max-width:none !important;

    height:
      var(
        --boom-story-height,
        calc(100dvh - 58px)
      ) !important;

    min-height:560px !important;

    margin:0 !important;

    /*
     * The top padding reveals the BOOM STORY artwork.
     * It is NOT a separate element or black block.
     * The same background continues behind everything.
     */

    padding:
      clamp(92px, 13vh, 145px)
      0
      10px
      !important;

    box-sizing:
      border-box !important;

    display:grid !important;

    /*
     * ONLY TWO REAL ROWS:
     *
     * 1. game + chat
     * 2. controls
     *
     * No fake hero row.
     */

    grid-template-rows:
      minmax(0,1fr)
      122px
      !important;

    gap:
      8px !important;

    overflow:
      hidden !important;

    isolation:
      isolate;

    background-color:
      #031020 !important;

    background-image:

      linear-gradient(
        180deg,
        rgba(0,7,20,.00) 0%,
        rgba(0,7,20,.02) 45%,
        rgba(0,7,20,.16) 100%
      ),

      url(
        "/portal/assets/story/yellow/story-yellow-bg.png"
      )

      !important;

    /*
     * COVER fills the whole playable page.
     * Resize/zoom changes recompute automatically.
     */

    background-size:
      cover !important;

    background-position:
      center top !important;

    background-repeat:
      no-repeat !important;

  }


  /* ========================================================
     OLD HERO REMOVED FOR REAL
     Not invisible-but-reserving-space.
     ======================================================== */

  .boom-story-player__hero {

    display:none !important;

    position:absolute !important;

    width:0 !important;
    height:0 !important;

    min-width:0 !important;
    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    overflow:hidden !important;

  }


  .boom-story-player__hero *,
  .boom-story-player__hero::before,
  .boom-story-player__hero::after {

    display:none !important;

    content:none !important;

  }


  /* Old secondary Yellow banner remains removed. */

  .boom-story-player__header {

    display:none !important;

    width:0 !important;
    height:0 !important;

    min-height:0 !important;

    margin:0 !important;
    padding:0 !important;

  }


  /* ========================================================
     GAME + CHAT
     ======================================================== */

  .boom-story-player__layout {

    grid-row:
      1 !important;

    width:
      min(
        1480px,
        calc(100% - 120px)
      )
      !important;

    height:
      100% !important;

    min-height:
      0 !important;

    margin:
      0 auto !important;

    padding:
      0 !important;

    display:
      grid !important;

    grid-template-columns:

      minmax(0,1fr)

      clamp(
        305px,
        21vw,
        360px
      )

      !important;

    gap:
      12px !important;

    align-items:
      stretch !important;

    overflow:
      hidden !important;

  }


  /* ========================================================
     GAME
     ======================================================== */

  .boom-story-player__game-card {

    width:
      100% !important;

    height:
      100% !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

    max-height:
      none !important;

    overflow:
      hidden !important;

    border:
      2px solid
      #ffdc32 !important;

    border-radius:
      17px !important;

    background:
      #020914 !important;

    box-shadow:

      0 0 4px
      rgba(255,223,48,.95),

      0 0 22px
      rgba(255,206,25,.27),

      0 16px 40px
      rgba(0,0,0,.36)

      !important;

  }


  .boom-story-player__frame {

    width:
      100% !important;

    height:
      100% !important;

    min-width:
      0 !important;

    min-height:
      0 !important;

  }


  /* ========================================================
     CHAT
     Exact same height as game.
     ======================================================== */

  .boom-story-player__chat {

    width:
      100% !important;

    height:
      100% !important;

    min-height:
      0 !important;

    max-height:
      100% !important;

    overflow:
      hidden !important;

    display:
      grid !important;

    grid-template-rows:

      auto
      minmax(0,1fr)
      auto
      auto

      !important;

    border:
      2px solid
      #00a8ff !important;

    border-radius:
      17px !important;

    box-shadow:

      0 0 4px
      rgba(0,170,255,.9),

      0 0 22px
      rgba(0,126,255,.24)

      !important;

  }


  .boom-story-player__messages {

    min-height:
      0 !important;

    max-height:
      none !important;

    overflow-x:
      hidden !important;

    overflow-y:
      auto !important;

    overscroll-behavior:
      contain !important;

  }


  /* ========================================================
     CONTROLS
     ======================================================== */

  .boom-story-player__controls {

    grid-row:
      2 !important;

    width:
      min(
        1480px,
        calc(100% - 120px)
      )
      !important;

    height:
      122px !important;

    min-height:
      0 !important;

    margin:
      0 auto !important;

    padding:
      9px 12px 11px
      !important;

    overflow:
      hidden !important;

  }


  .boom-story-player__control-grid {

    height:
      76px !important;

  }


  .boom-story-player__control-grid article {

    height:
      76px !important;

    min-height:
      76px !important;

  }

}


/* ============================================================
   NORMAL DESKTOP
   Wider content on smaller displays.
   ============================================================ */

@media
  (min-width:1181px)
  and (max-width:1540px) {

  .boom-story-player__layout,
  .boom-story-player__controls {

    width:
      calc(100% - 32px)
      !important;

  }

}


/* ============================================================
   SHORTER DESKTOP
   Keep everything on one screen.
   ============================================================ */

@media
  (min-width:1181px)
  and (max-height:850px) {

  .boom-story-player {

    padding-top:
      clamp(
        62px,
        10vh,
        90px
      )
      !important;

    grid-template-rows:
      minmax(0,1fr)
      102px
      !important;

  }


  .boom-story-player__controls {

    height:
      102px !important;

    padding:
      6px 9px 8px
      !important;

  }


  .boom-story-player__control-grid {

    height:
      63px !important;

  }


  .boom-story-player__control-grid article {

    height:
      63px !important;

    min-height:
      63px !important;

  }


  .boom-story-player__control-grid kbd {

    width:
      40px !important;

    height:
      40px !important;

    flex-basis:
      40px !important;

  }

}


/* ============================================================
   VERY LARGE / ULTRAWIDE
   Preserve scenery instead of making game absurdly wide.
   ============================================================ */

@media
  (min-width:1900px) {

  .boom-story-player__layout,
  .boom-story-player__controls {

    width:
      min(
        1580px,
        calc(100% - 180px)
      )
      !important;

  }


  .boom-story-player {

    padding-top:
      clamp(
        115px,
        14vh,
        170px
      )
      !important;

  }

}


/* ============================================================
   MOBILE / TABLET
   ============================================================ */

@media (max-width:1180px) {

  body.portal-story-player-active
  #portal-command-dock {

    display:none !important;

  }


  body.portal-story-player-active
  #portal-content,

  body.portal-story-player-active
  .portal-stage {

    margin:0 !important;
    padding:0 !important;

  }


  .boom-story-player__hero,
  .boom-story-player__header {

    display:none !important;

  }


  .boom-story-player {

    padding-top:
      85px !important;

    background-image:

      linear-gradient(
        rgba(0,7,18,.04),
        rgba(0,7,18,.44)
      ),

      url(
        "/portal/assets/story/yellow/story-yellow-bg.png"
      )

      !important;

    background-size:
      cover !important;

    background-position:
      center top !important;

    background-repeat:
      no-repeat !important;

  }

}



/* ============================================================
   BOOM STORY V21
   Collapse the Portal row previously occupied by Quick Command.
   DOM:
     row 1 = portal-topbar
     row 2 = portal-command-dock
     row 3 = portal-content
   ============================================================ */

@media (min-width:1181px) {

  /*
   * IMPORTANT:
   * Hiding the child does not necessarily remove an explicitly
   * sized CSS Grid track. Collapse track #2 itself.
   */

  body.portal-story-player-active
  #portal-root.portal-shell {

    grid-template-rows:
      auto
      0
      minmax(0, 1fr)
      !important;

    row-gap:
      0 !important;

    gap:
      0 !important;

  }


  body.portal-story-player-active
  #portal-command-dock {

    display:none !important;

    grid-row:2 !important;

    height:0 !important;
    min-height:0 !important;
    max-height:0 !important;

    margin:0 !important;
    padding:0 !important;

    border:0 !important;

    overflow:hidden !important;

  }


  /*
   * Story content now begins immediately after Trainer OS.
   */

  body.portal-story-player-active
  #portal-content {

    grid-row:3 !important;

    margin-top:0 !important;
    padding-top:0 !important;

    align-self:stretch !important;

  }


  /*
   * No leftover separators belonging to the old command row.
   */

  body.portal-story-player-active
  #portal-command-dock::before,

  body.portal-story-player-active
  #portal-command-dock::after {

    display:none !important;
    content:none !important;

  }


  /*
   * Let the Story artwork touch the bottom edge of Trainer OS.
   */

  body.portal-story-player-active
  .boom-story-player {

    margin-top:0 !important;

  }

}



/* ============================================================
   BOOM STORY LOADING HIDDEN V22

   `hidden` must always win over older Story styling.
   ============================================================ */

.boom-story-player__loading[hidden],
.boom-story-player__loading[data-booted="1"] {

  display:none !important;

  visibility:hidden !important;

  opacity:0 !important;

  pointer-events:none !important;

}


/* ============================================================
   BOOM STORY V29 INTERACTIVE CONTROLS + MOBILE GAMEPAD
   ============================================================ */

.boom-story-player__game-badge {
  display: none !important;
}

.boom-story-player__control-grid {
  grid-template-columns:
    repeat(8, minmax(0, 1fr)) !important;
}

.boom-story-player__control {
  min-width: 0;
  min-height: 54px;

  padding: 8px 9px;

  display: flex;
  align-items: center;
  gap: 8px;

  border:
    1px solid
    rgba(255,255,255,.08);

  border-radius: 12px;

  background:
    rgba(255,255,255,.03);

  color: inherit;

  font: inherit;

  text-align: left;

  transition:
    transform .12s ease,
    border-color .12s ease,
    background .12s ease,
    box-shadow .12s ease;
}

button.boom-story-player__control {
  cursor: pointer;
  touch-action: manipulation;
}

button.boom-story-player__control:hover {
  border-color:
    rgba(255,220,65,.42);

  background:
    rgba(255,216,61,.07);
}

button.boom-story-player__control:active,
button.boom-story-player__control.is-pressed {
  transform:
    translateY(2px)
    scale(.985);

  border-color:
    rgba(255,221,62,.78);

  background:
    rgba(255,216,61,.13);

  box-shadow:
    inset 0 2px 8px
    rgba(0,0,0,.35);
}

.boom-story-player__control.is-info {
  cursor: default;

  border-color:
    rgba(79,239,168,.20);

  background:
    rgba(48,204,139,.055);
}


/* ------------------------------------------------------------
   Mobile Game Boy / WORLD-style controls
   ------------------------------------------------------------ */

.boom-story-player__mobile-pad {
  display: none;
}

@media
  (max-width: 900px),
  (pointer: coarse) {

  html.portal-story-player-active,
  body.portal-story-player-active {
    overflow-y:
      auto !important;
  }

  .boom-story-player {
    width: 100% !important;

    height: auto !important;

    min-height: 0 !important;

    max-height: none !important;

    padding:
      4px !important;

    overflow:
      visible !important;
  }

  .boom-story-player__layout {
    width: 100% !important;

    display: grid !important;

    grid-template-columns:
      minmax(0, 1fr) !important;

    gap:
      7px !important;

    overflow:
      visible !important;
  }

  .boom-story-player__game-card {
    width: 100% !important;

    height:
      min(
        70svh,
        700px
      ) !important;

    min-height:
      400px !important;

    border-radius:
      12px !important;
  }

  .boom-story-player__frame {
    width: 100% !important;
    height: 100% !important;

    touch-action:
      none !important;
  }

  .boom-story-player__game-actions {
    top:
      7px !important;

    right:
      7px !important;
  }

  .boom-story-player__game-actions
  [data-story-focus] {
    display:
      none !important;
  }


  /* ------------------------------------------
     Mobile gamepad
     ------------------------------------------ */

  .boom-story-player__mobile-pad {
    position:
      absolute;

    z-index:
      12;

    left:
      8px;

    right:
      8px;

    bottom:
      10px;

    display:
      grid;

    grid-template-columns:
      132px
      minmax(80px, 1fr)
      132px;

    align-items:
      end;

    gap:
      8px;

    pointer-events:
      none;

    user-select:
      none;

    -webkit-user-select:
      none;
  }

  .boom-story-player__mobile-pad button {
    pointer-events:
      auto;

    -webkit-tap-highlight-color:
      transparent;

    touch-action:
      none;

    color:
      #fff;

    font:
      900 12px/1
      system-ui,
      sans-serif;

    text-shadow:
      0 1px 3px
      #000;

    backdrop-filter:
      blur(7px);

    transition:
      transform .07s ease,
      filter .07s ease,
      opacity .07s ease;
  }

  .boom-story-player__mobile-pad
  button.is-pressed {
    transform:
      translateY(3px)
      scale(.94);

    filter:
      brightness(1.3);
  }


  /* D-PAD */

  .boom-story-player__mobile-dpad {
    width:
      132px;

    height:
      132px;

    display:
      grid;

    grid-template-columns:
      repeat(3, 44px);

    grid-template-rows:
      repeat(3, 44px);
  }

  .boom-story-player__mobile-dpad button {
    border:
      1px solid
      rgba(255,255,255,.28);

    background:
      rgba(5,12,22,.72);

    box-shadow:
      0 4px 12px
      rgba(0,0,0,.32);
  }

  .boom-story-player__mobile-dpad .is-up {
    grid-column: 2;
    grid-row: 1;

    border-radius:
      10px 10px 4px 4px;
  }

  .boom-story-player__mobile-dpad .is-left {
    grid-column: 1;
    grid-row: 2;

    border-radius:
      10px 4px 4px 10px;
  }

  .boom-story-player__mobile-dpad .is-center {
    grid-column: 2;
    grid-row: 2;

    background:
      rgba(5,12,22,.72);
  }

  .boom-story-player__mobile-dpad .is-right {
    grid-column: 3;
    grid-row: 2;

    border-radius:
      4px 10px 10px 4px;
  }

  .boom-story-player__mobile-dpad .is-down {
    grid-column: 2;
    grid-row: 3;

    border-radius:
      4px 4px 10px 10px;
  }


  /* START / SELECT */

  .boom-story-player__mobile-system {
    align-self:
      end;

    display:
      flex;

    justify-content:
      center;

    gap:
      7px;

    padding-bottom:
      9px;
  }

  .boom-story-player__mobile-system button {
    min-width:
      58px;

    min-height:
      30px;

    padding:
      0 9px;

    border:
      1px solid
      rgba(255,255,255,.23);

    border-radius:
      999px;

    background:
      rgba(7,15,27,.72);

    font-size:
      8px;

    letter-spacing:
      .08em;
  }


  /* A / B */

  .boom-story-player__mobile-actions {
    width:
      132px;

    min-height:
      118px;

    position:
      relative;
  }

  .boom-story-player__mobile-actions button {
    position:
      absolute;

    width:
      62px;

    height:
      62px;

    border-radius:
      50%;

    border:
      3px solid
      rgba(255,255,255,.74);

    font-size:
      22px;

    box-shadow:
      0 6px 0
      rgba(0,0,0,.46),
      0 9px 18px
      rgba(0,0,0,.32);
  }

  .boom-story-player__mobile-actions .is-a {
    right:
      0;

    top:
      6px;

    background:
      rgba(255,195,37,.88);

    color:
      #241900;
  }

  .boom-story-player__mobile-actions .is-b {
    left:
      2px;

    bottom:
      3px;

    background:
      rgba(58,185,255,.83);
  }


  /* ------------------------------------------
     Chat below game, not beside it
     ------------------------------------------ */

  .boom-story-player__chat {
    width:
      100% !important;

    height:
      auto !important;

    min-height:
      260px !important;

    max-height:
      38svh !important;

    border-radius:
      12px !important;
  }


  /* ------------------------------------------
     1-7 engine controls: horizontal mobile row
     ------------------------------------------ */

  .boom-story-player__controls {
    width:
      100% !important;

    margin-top:
      7px !important;

    padding:
      8px !important;
  }

  .boom-story-player__controls > header {
    margin-bottom:
      7px !important;
  }

  .boom-story-player__controls
  > header
  > span {
    display:
      none !important;
  }

  .boom-story-player__control-grid {
    display:
      flex !important;

    grid-template-columns:
      none !important;

    gap:
      6px !important;

    overflow-x:
      auto !important;

    overflow-y:
      hidden !important;

    padding-bottom:
      3px;

    overscroll-behavior-x:
      contain;

    scroll-snap-type:
      x proximity;

    -webkit-overflow-scrolling:
      touch;
  }

  .boom-story-player__control {
    flex:
      0 0 118px;

    min-width:
      118px;

    min-height:
      52px;

    scroll-snap-align:
      start;
  }

}


@media
  (orientation: landscape)
  and (pointer: coarse) {

  .boom-story-player__game-card {
    height:
      min(
        84svh,
        760px
      ) !important;

    min-height:
      330px !important;
  }

  .boom-story-player__mobile-pad {
    grid-template-columns:
      118px
      minmax(70px,1fr)
      118px;
  }

  .boom-story-player__mobile-dpad {
    transform:
      scale(.88);

    transform-origin:
      left bottom;
  }

  .boom-story-player__mobile-actions {
    transform:
      scale(.88);

    transform-origin:
      right bottom;
  }

}


/* ============================================================
   BOOM STORY V29.1 CONTROL DECK
   Restore the bold V28 visual language while keeping V29 actions.
   ============================================================ */

.boom-story-player__game-actions {
  display: none !important;
}

.boom-story-player__control-grid {
  display: grid !important;
  grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.boom-story-player__control {
  position: relative;
  min-width: 0;
  min-height: 70px;

  padding: 9px 12px;

  display: flex;
  align-items: center;
  gap: 10px;

  overflow: hidden;

  border-radius: 12px;

  border: 1px solid var(--boom-control-accent, rgba(255,255,255,.20));

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--boom-control-accent, #59dfff) 12%,
        rgba(5,18,31,.96)
      ),
      rgba(4,15,28,.96) 62%
    );

  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.025),
    0 0 16px
      color-mix(
        in srgb,
        var(--boom-control-accent, #59dfff) 22%,
        transparent
      );

  color: #f5fbff;

  text-align: left;

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    filter .12s ease,
    border-color .12s ease;
}

.boom-story-player__control::before {
  content: "";

  position: absolute;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      110deg,
      rgba(255,255,255,.055),
      transparent 34%
    );
}

.boom-story-player__control kbd {
  position: relative;
  z-index: 1;

  flex: 0 0 46px;

  width: 46px;
  height: 46px;

  display: grid;
  place-items: center;

  border-radius: 10px;

  border:
    1px solid
    rgba(255,255,255,.48);

  background:
    var(--boom-control-accent, #59dfff);

  color:
    #07131f;

  font-size:
    19px;

  font-weight:
    1000;

  box-shadow:
    inset 0 1px 0
      rgba(255,255,255,.42),
    0 3px 8px
      rgba(0,0,0,.24);
}

.boom-story-player__control > div {
  position: relative;
  z-index: 1;

  min-width: 0;

  display: flex;
  flex-direction: column;
  gap: 3px;
}

.boom-story-player__control b {
  color: #fff;

  font-size: 11px;

  font-weight: 950;

  letter-spacing: .01em;

  white-space: nowrap;
}

.boom-story-player__control small {
  color:
    rgba(222,238,248,.68);

  font-size:
    8px;

  line-height:
    1.25;
}

button.boom-story-player__control {
  cursor: pointer;
}

button.boom-story-player__control:hover {
  transform:
    translateY(-1px);

  filter:
    brightness(1.12);

  box-shadow:
    inset 0 0 0 1px
      rgba(255,255,255,.045),
    0 0 22px
      color-mix(
        in srgb,
        var(--boom-control-accent, #59dfff) 38%,
        transparent
      );
}

button.boom-story-player__control:active,
button.boom-story-player__control.is-pressed {
  transform:
    translateY(2px)
    scale(.985);

  filter:
    brightness(1.22);
}


/* ------------------------------------------------------------
   Individual V28-style accent colours
   ------------------------------------------------------------ */

.boom-story-player__control[data-story-key="1"] {
  --boom-control-accent: #ffd43b;
}

.boom-story-player__control[data-story-key="2"] {
  --boom-control-accent: #ff6ab6;
}

.boom-story-player__control[data-story-key="3"] {
  --boom-control-accent: #35b7ff;
}

.boom-story-player__control[data-story-key="4"] {
  --boom-control-accent: #6fd3ff;
}

.boom-story-player__control[data-story-key="5"] {
  --boom-control-accent: #39ec8b;
}

.boom-story-player__control[data-story-key="6"] {
  --boom-control-accent: #a95dff;
}

.boom-story-player__control[data-story-key="7"] {
  --boom-control-accent: #ff9f43;
}

.boom-story-player__control.is-online {
  --boom-control-accent: #32dfff;

  padding-right: 34px;
}

.boom-story-player__control.is-online kbd {
  background:
    linear-gradient(
      145deg,
      #61efff,
      #29c6ff
    );
}

.boom-story-player__online-dot {
  position: absolute;

  z-index: 2;

  right: 12px;
  top: 50%;

  width: 12px;
  height: 12px;

  transform:
    translateY(-50%);

  border-radius: 999px;

  background: #32e98d;

  box-shadow:
    0 0 0 4px
      rgba(50,233,141,.12),
    0 0 12px
      rgba(50,233,141,.8);
}


/* ------------------------------------------------------------
   Tablet
   ------------------------------------------------------------ */

@media (max-width: 1250px) {

  .boom-story-player__control-grid {
    grid-template-columns:
      repeat(4, minmax(0,1fr)) !important;
  }

}


/* ------------------------------------------------------------
   Mobile keeps V29 horizontal swipe row
   ------------------------------------------------------------ */

@media
  (max-width: 900px),
  (pointer: coarse) {

  .boom-story-player__control-grid {
    display: flex !important;

    gap: 7px !important;

    overflow-x: auto !important;

    padding:
      2px 2px 5px !important;
  }

  .boom-story-player__control {
    flex:
      0 0 150px;

    min-width:
      150px;

    min-height:
      62px;
  }

  .boom-story-player__control kbd {
    flex-basis:
      42px;

    width:
      42px;

    height:
      42px;

    font-size:
      17px;
  }

}


/* ============================================================
   BOOM STORY V29.2 COLORED CONTROL DECK
   ============================================================ */

.boom-story-player__control {
  border-width: 1px !important;

  background:
    linear-gradient(
      135deg,
      color-mix(
        in srgb,
        var(--boom-control-accent) 19%,
        #061522
      ),
      color-mix(
        in srgb,
        var(--boom-control-accent) 7%,
        #071522
      ) 72%
    ) !important;

  box-shadow:
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--boom-control-accent) 20%,
        transparent
      ),
    0 0 15px
      color-mix(
        in srgb,
        var(--boom-control-accent) 24%,
        transparent
      ) !important;
}

.boom-story-player__control::after {
  content: "";

  position: absolute;
  inset: 0;

  pointer-events: none;

  border-radius: inherit;

  background:
    radial-gradient(
      circle at 12% 50%,
      color-mix(
        in srgb,
        var(--boom-control-accent) 20%,
        transparent
      ),
      transparent 45%
    );
}


/* 1 SPEED */
.boom-story-player__control[data-story-key="1"] {
  --boom-control-accent: #ffd83d !important;
}

/* 2 COLORS */
.boom-story-player__control[data-story-key="2"] {
  --boom-control-accent: #ff66b9 !important;
}

/* 3 3D */
.boom-story-player__control[data-story-key="3"] {
  --boom-control-accent: #27b8ff !important;
}

/* 4 ZOOM */
.boom-story-player__control[data-story-key="4"] {
  --boom-control-accent: #54d9ff !important;
}

/* 5 V-GRID */
.boom-story-player__control[data-story-key="5"] {
  --boom-control-accent: #31ee85 !important;
}

/* 6 T-SHIFT */
.boom-story-player__control[data-story-key="6"] {
  --boom-control-accent: #a45cff !important;
}

/* 7 V-CURVE */
.boom-story-player__control[data-story-key="7"] {
  --boom-control-accent: #ff9d38 !important;
}

/* ONLINE / FULLSCREEN */
.boom-story-player__control.is-online {
  --boom-control-accent: #38dfff !important;

  background:
    linear-gradient(
      135deg,
      rgba(20,184,220,.24),
      rgba(4,30,46,.96) 68%
    ) !important;

  border-color:
    #34dfff !important;

  box-shadow:
    inset 0 0 0 1px
      rgba(87,232,255,.18),
    0 0 20px
      rgba(31,215,255,.25) !important;
}


/* Stronger colored number tiles */

.boom-story-player__control kbd {
  border-color:
    rgba(255,255,255,.72) !important;

  background:
    linear-gradient(
      145deg,
      color-mix(
        in srgb,
        var(--boom-control-accent) 92%,
        white
      ),
      var(--boom-control-accent)
    ) !important;

  box-shadow:
    inset 0 2px 0
      rgba(255,255,255,.45),
    inset 0 -3px 0
      rgba(0,0,0,.15),
    0 0 12px
      color-mix(
        in srgb,
        var(--boom-control-accent) 40%,
        transparent
      ) !important;
}


/* Hover = stronger glow */

button.boom-story-player__control:hover {
  border-color:
    var(--boom-control-accent) !important;

  box-shadow:
    inset 0 0 0 1px
      color-mix(
        in srgb,
        var(--boom-control-accent) 34%,
        transparent
      ),
    0 0 24px
      color-mix(
        in srgb,
        var(--boom-control-accent) 42%,
        transparent
      ) !important;
}


/* Keep ONLINE title readable */

.boom-story-player__control.is-online b {
  white-space: normal !important;

  line-height: 1.05 !important;
}



/* ============================================================
   BOOM STORY PC KEY HELP V1_1
   Desktop keyboard quick-reference.
   Mobile keeps the existing V29 touch gamepad.
   ============================================================ */

.boom-story-player__pc-key-help {
  display: none;
}

@media
  (min-width: 721px)
  and (hover: hover)
  and (pointer: fine) {

  .boom-story-player__controls {
    position: relative !important;
    overflow: visible !important;
  }

  .boom-story-player__controls > header,
  .boom-story-player__controls > header > div {
    overflow: visible !important;
  }

  .boom-story-player__pc-key-help {
    display: block;
    margin-top: 6px;
    width: max-content;
  }

  .boom-story-player__pc-key-help > summary {
    display: inline-flex;
    align-items: center;
    gap: 7px;

    padding: 5px 10px;

    border:
      1px solid rgba(62,220,255,.68);

    border-radius: 8px;

    background:
      linear-gradient(
        135deg,
        rgba(13,122,168,.28),
        rgba(2,27,46,.96)
      );

    color: #e9fbff;

    font-size: 9px;
    font-weight: 900;
    letter-spacing: .065em;

    cursor: pointer;
    list-style: none;
    user-select: none;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.035),
      0 0 14px rgba(41,211,255,.12);

    transition:
      transform .15s ease,
      border-color .15s ease,
      box-shadow .15s ease;
  }

  .boom-story-player__pc-key-help
  > summary::-webkit-details-marker {
    display: none;
  }

  .boom-story-player__pc-key-help
  > summary:hover {
    transform: translateY(-1px);
    border-color: #79ebff;

    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.05),
      0 0 20px rgba(41,211,255,.24);
  }

  .boom-story-player__pc-key-help[open]
  > summary {
    border-color: #91efff;
  }

  .boom-story-player__pc-key-help[open]
  > summary::after {
    content: " ×";
    color: #64e5ff;
    font-size: 12px;
  }

  .boom-story-player__pc-key-popup {
    position: absolute;

    left: 12px;
    bottom: calc(100% + 10px);

    z-index: 500;

    width:
      min(
        500px,
        calc(100% - 24px)
      );

    padding: 14px;

    border:
      1px solid rgba(66,220,255,.88);

    border-radius: 12px;

    background:
      linear-gradient(
        145deg,
        rgba(4,33,55,.985),
        rgba(2,14,28,.995)
      );

    box-shadow:
      0 18px 58px rgba(0,0,0,.62),
      0 0 34px rgba(33,211,255,.18),
      inset 0 0 0 1px rgba(255,255,255,.035);

    color: #eefaff;

    backdrop-filter: blur(12px);
  }

  .boom-story-player__pc-key-popup::after {
    content: "";

    position: absolute;

    left: 34px;
    bottom: -7px;

    width: 12px;
    height: 12px;

    background: #03192c;

    border-right:
      1px solid rgba(66,220,255,.8);

    border-bottom:
      1px solid rgba(66,220,255,.8);

    transform: rotate(45deg);
  }

  .boom-story-player__pc-key-popup > header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;

    margin-bottom: 10px;
    padding-bottom: 9px;

    border-bottom:
      1px solid rgba(88,206,240,.17);
  }

  .boom-story-player__pc-key-popup > header > div {
    display: grid;
    gap: 2px;
  }

  .boom-story-player__pc-key-popup
  > header small {
    color: #4edcff !important;

    font-size: 8px !important;
    font-weight: 900;

    letter-spacing: .14em;
  }

  .boom-story-player__pc-key-popup
  > header strong {
    color: white;

    font-size: 14px;
    font-weight: 950;

    letter-spacing: .04em;
  }

  .boom-story-player__pc-key-popup
  > header > span {
    color:
      rgba(204,235,246,.48) !important;

    font-size: 8px !important;
    font-weight: 850;

    letter-spacing: .12em;
  }

  .boom-story-player__pc-key-list {
    display: grid;
    gap: 6px;
  }

  .boom-story-player__pc-key-row {
    display: grid;

    grid-template-columns:
      minmax(155px,190px)
      minmax(0,1fr);

    align-items: center;

    gap: 12px;

    min-height: 43px;

    padding: 6px 8px;

    border:
      1px solid rgba(255,255,255,.055);

    border-radius: 8px;

    background:
      rgba(255,255,255,.025);
  }

  .boom-story-player__pc-key-row kbd {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: 30px;

    padding: 5px 8px;

    border:
      1px solid rgba(103,226,255,.54) !important;

    border-radius: 7px;

    background:
      linear-gradient(
        180deg,
        rgba(32,131,172,.27),
        rgba(5,35,56,.8)
      ) !important;

    color: #effcff !important;

    font-family: inherit;
    font-size: 10px !important;
    font-weight: 950;

    letter-spacing: .035em;

    box-shadow:
      inset 0 -2px 0 rgba(0,0,0,.25);
  }

  .boom-story-player__pc-key-row > div {
    display: grid;
    gap: 2px;
  }

  .boom-story-player__pc-key-row b {
    color: white;

    font-size: 10px;
    font-weight: 950;

    letter-spacing: .045em;
  }

  .boom-story-player__pc-key-row small {
    color:
      rgba(213,238,247,.67) !important;

    font-size: 9px !important;

    line-height: 1.3;
  }

  .boom-story-player__pc-key-popup > footer {
    margin-top: 10px;
    padding-top: 9px;

    border-top:
      1px solid rgba(88,206,240,.15);

    color:
      rgba(141,220,243,.65);

    font-size: 8px;
    font-weight: 850;

    letter-spacing: .09em;
    text-align: center;
  }
}

/* ==========================================================
   BOOM_STORY_CONTROL_VALUE_SIZE_V1

   Live setting values should visually dominate the label.
   IMPORTANT:
   - Does NOT change card width
   - Does NOT change card height
   - Does NOT change grid sizing
   - Does NOT change gaps
   ========================================================== */

.boom-story-player__control
[data-story-control-value] {
  display: block !important;

  margin-top: 3px !important;

  font-size: 13px !important;
  line-height: 1 !important;

  font-weight: 950 !important;

  letter-spacing: 0.035em !important;

  color: #ffffff !important;

  opacity: 1 !important;

  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;

  max-width: 100% !important;

  text-shadow:
    0 0 4px rgba(255,255,255,0.50),
    0 0 9px rgba(255,255,255,0.24) !important;
}


/*
 * Keep the TITLE smaller than the active value.
 * SPEED / COLORS / 3D MODE etc.
 */

.boom-story-player__control
> div
> b {
  font-size: 9px !important;
  line-height: 1 !important;

  font-weight: 900 !important;

  letter-spacing: 0.035em !important;

  opacity: 0.92 !important;
}


/*
 * Slight extra punch when the live bridge has populated
 * the value.
 */

.boom-story-player__control
[data-story-control-value]:not(:empty) {
  min-height: 13px !important;
}