#portal {
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  color: var(--ink);
  width: min(1120px, 100%);
  margin: 0 auto;
  overflow-wrap: anywhere;
}

#portal.is-arriving {
  position: fixed;
  z-index: 6;
  inset: 0;
  width: auto;
  max-width: none;
  margin: 0;
  overflow: auto;
  background: var(--cream);
  opacity: 0;
  transition: opacity 0.4s ease;
}

#portal.is-arriving.is-in {
  opacity: 1;
}

/* The club layout sets display: flex, which would beat the hidden attribute
   while the page is between the lane and the club. Hidden must always win. */
#portal[hidden] {
  display: none !important;
}

/* Built while the camera flies to the sign; invisible until the fade, so it
   must not catch clicks meant for the lane. */
#portal.is-arriving:not(.is-in) {
  pointer-events: none;
}

#portal.is-leaving {
  pointer-events: none;
}

body.is-club {
  overflow-x: hidden;
}

.head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin: 0 0 16px;
}

.titles {
  flex: 1 1 12rem;
  min-width: 0;
}

#portal h1 {
  margin: 0;
  color: var(--navy);
  font-size: clamp(2rem, 8vw, 3.5rem);
  line-height: 0.95;
  letter-spacing: -0.03em;
}

.lede {
  margin: 6px 0 0;
  color: var(--navy);
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.35;
}

.ball {
  width: 64px;
  height: 64px;
  flex: 0 0 auto;
}

.ball .skin {
  fill: var(--teal);
  stroke: var(--navy);
  stroke-width: 2;
}

.ball .hole {
  fill: var(--navy);
}

.lane-stripe {
  flex: 1 0 100%;
  height: 14px;
  border-radius: 999px;
  border: 2px solid var(--navy);
  background: repeating-linear-gradient(
    90deg,
    var(--navy) 0 10px,
    var(--lane) 10px 28px,
    var(--cream) 28px 36px,
    var(--lane) 36px 54px
  );
}

.replay {
  flex: 1 1 100%;
}

.lane-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  flex: 1 1 100%;
}

.lane-actions .replay,
.lane-actions .resume {
  flex: 1 1 8rem;
  width: auto;
}

.banner {
  margin: 0 0 14px;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--red);
  color: var(--cream);
  font-weight: 800;
}

.online-btn {
  width: auto;
  white-space: nowrap;
}

.online-panel {
  position: fixed;
  z-index: 40;
  margin: 0;
  padding: 10px;
  overflow: auto;
  border: 2px solid var(--navy);
  border-radius: 18px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.online-panel[hidden] { display: none; }

.online-panel ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.online-row {
  display: grid;
  gap: 2px;
  padding: 8px 10px;
  border: 2px solid var(--navy);
  border-radius: 14px;
  background: #fff;
}

.online-row .nick {
  font-weight: 800;
  color: var(--navy);
}

.online-scores {
  display: flex;
  flex-wrap: wrap;
  gap: 2px 12px;
  font-size: 0.92rem;
  font-weight: 700;
}

#portal h2 {
  margin: 0 0 8px;
  font-size: 1.25rem;
  color: var(--navy);
}

.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.chip {
  max-width: 100%;
  padding: 6px 12px;
  border: 2px solid var(--navy);
  border-radius: 999px;
  background: var(--cream);
  color: var(--navy);
  font-weight: 800;
}

.muted {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
}

.leaders {
  display: grid;
  gap: 8px;
  margin: 0 0 14px;
}

.leaders ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.leader {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 10px 12px;
  border: 2px solid var(--navy);
  border-radius: 16px;
  background: var(--cream);
  box-shadow: var(--shadow);
}

.leader .nick {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 800;
  color: var(--navy);
}

.leader .time {
  font-weight: 800;
  color: var(--red);
  font-variant-numeric: tabular-nums;
}

.leader .finds {
  color: var(--navy);
}

.split {
  display: grid;
  gap: 16px;
  min-width: 0;
}

.chat,
.gallery {
  min-width: 0;
  padding: 12px;
  border: 2px solid var(--navy);
  border-radius: 24px;
  background: var(--cream);
  box-shadow: var(--shadow);
}

.log {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-height: min(52dvh, 520px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px;
  border-radius: 18px;
  background: #24162e;
  color: #f7f1ea;
}

.empty {
  margin: 0;
  color: var(--navy);
  font-weight: 700;
}

.log .empty {
  color: #f7f1ea;
}

.bubble {
  max-width: 88%;
  padding: 8px 12px;
  border: 2px solid #6d3c82;
  border-radius: 18px 18px 18px 6px;
  background: #fffdf8;
  color: var(--ink);
  cursor: context-menu;
}

.bubble.mine {
  align-self: flex-end;
  border-radius: 18px 18px 6px 18px;
  background: #f3e9f8;
  color: var(--ink);
  cursor: auto;
}

.bubble .meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: baseline;
  column-gap: 10px;
  row-gap: 2px;
  font-size: 0.78rem;
  font-weight: 800;
}

.bubble .who {
  color: var(--navy);
}

.bubble .when {
  margin-left: auto;
  color: #5c4568;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  white-space: nowrap;
}

.bubble.mine .who,
.bubble.mine .text {
  color: var(--ink);
}

.bubble.mine .when {
  color: #5c4568;
}

.bubble .text {
  margin: 4px 0 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.composer,
.photo-tools {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.composer {
  display: flex;
  flex-direction: column;
}

.composer-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.composer-tools button {
  width: auto;
  flex: 1 1 6rem;
}

.emoji-pop {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.emoji-pop[hidden],
.attach[hidden] {
  display: none;
}

#portal .emoji,
#portal .emoji-toggle {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  flex: 0 0 auto;
  background: var(--cream);
  color: var(--ink);
}

.attach {
  display: flex;
  align-items: center;
  gap: 8px;
}

.attach img,
.chat-photo {
  display: block;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid #6d3c82;
  background: #f3e9f8;
}

.attach img {
  width: 64px;
  height: 64px;
}

.chat-photo {
  width: min(100%, 240px);
  max-height: 180px;
  margin-top: 6px;
  cursor: zoom-in;
}

.reacts {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}

.reacts:empty {
  display: none;
}

#portal .react {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 36px;
  padding: 2px 8px;
  border: 2px solid #6d3c82;
  border-radius: 999px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 0.95rem;
}

#portal span.react {
  cursor: default;
}

#portal .react.is-on {
  background: var(--navy);
  color: var(--cream);
}

.react-menu {
  position: fixed;
  z-index: 45;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  width: max-content;
  max-width: min(280px, calc(100vw - 16px));
  margin: 0;
  padding: 8px;
  border: 2px solid #6d3c82;
  border-radius: 16px;
  background: #fffdf8;
  box-shadow: 0 10px 28px rgba(22, 8, 30, 0.28);
}

.react-menu[hidden] {
  display: none;
}

.react-menu button {
  width: 44px;
  min-width: 44px;
  min-height: 44px;
  padding: 0;
  border: 2px solid #6d3c82;
  border-radius: 12px;
  background: #fffdf8;
  color: var(--ink);
  font-size: 1.25rem;
  line-height: 1;
  cursor: pointer;
}

.react-menu button.is-on {
  background: var(--navy);
  color: var(--cream);
}

.chat.is-drop {
  outline: 3px dashed var(--teal);
  outline-offset: -6px;
}

.photo-tools {
  position: relative;
  margin-top: 0;
  margin-bottom: 12px;
}

.photo-tools .trend {
  grid-column: 1 / -1;
}

#portal button.trend[aria-pressed="true"] {
  background: var(--teal);
  color: var(--navy);
}

#portal input {
  font-size: 16px;
  min-height: 48px;
  border-radius: 14px;
  border: 2px solid var(--navy);
  width: 100%;
  padding: 12px 14px;
  background: var(--cream);
  color: var(--ink);
}

#portal input::placeholder {
  color: rgba(93, 12, 110, 0.55);
}

#portal input.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  pointer-events: none;
}

#portal button {
  min-height: 44px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 1rem;
  padding: 10px 18px;
  border: 2px solid var(--navy);
  cursor: pointer;
  color: var(--cream);
  user-select: none;
}

#portal button.primary {
  background: var(--teal);
  color: var(--navy);
}

#portal button.secondary {
  background: var(--navy);
}

#portal button:disabled {
  opacity: 0.6;
  cursor: default;
}

.composer button,
.photo-tools button,
.replay,
.locked button {
  width: 100%;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  min-width: 0;
}

.shot {
  margin: 0;
  min-width: 0;
}

.grid img {
  display: block;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid var(--navy);
  background: var(--lane);
  cursor: zoom-in;
}

.shot figcaption {
  display: grid;
  gap: 2px;
  padding-top: 6px;
  color: var(--navy);
  font-size: 0.92rem;
}

.shot .who {
  font-weight: 800;
}

.shot .cap {
  color: var(--ink);
  overflow-wrap: anywhere;
}

.lightbox {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: max(64px, calc(env(safe-area-inset-top) + 56px)) 16px 16px;
  background: rgba(18, 16, 28, 0.9);
}

.lightbox .close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: max(12px, env(safe-area-inset-right));
  width: auto;
}

.lightbox img {
  width: auto;
  height: auto;
  max-width: 90vw;
  max-height: 80dvh;
  aspect-ratio: auto;
  object-fit: contain;
  border-radius: 16px;
  border: 0;
  background: var(--navy);
  box-shadow: var(--shadow);
  cursor: default;
}

.locked {
  max-width: 28rem;
  margin: 10vh auto 0;
  padding: 28px 22px 22px;
  text-align: center;
  border: 3px solid var(--navy);
  border-radius: 28px;
  background: var(--cream);
  box-shadow: var(--shadow);
}

.locked .ball {
  width: 72px;
  height: 72px;
  margin: 0 auto 8px;
}

.locked p {
  margin: 8px 0 16px;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--navy);
}

#portal button:focus-visible,
#portal input:focus-visible,
#portal img:focus-visible {
  outline: 3px solid var(--teal);
  outline-offset: 2px;
}

@media (hover: hover) {
  #portal button:hover {
    filter: brightness(1.08);
  }
}

#portal button:active {
  transform: translateY(1px);
}

@media (min-width: 720px) {
  .replay {
    flex: 0 0 auto;
    width: auto;
  }

  .composer {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .composer button {
    width: auto;
    min-width: 9.5rem;
  }
}

@media (min-width: 800px) {
  .grid {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media (min-width: 880px) {
  .split {
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    align-items: start;
  }
}

.lightbox[hidden],
.leaders[hidden],
.banner[hidden],
.empty[hidden] {
  display: none;
}

body:is(.is-club, .is-joining) #portal.fit {
  position: fixed;
  z-index: 7;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  flex-direction: column;
  width: min(1180px, 100%);
  height: auto;
  min-height: 0;
  margin: 0 auto;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  gap: 8px;
  overflow: hidden;
}

.fit .head {
  margin: 0;
  gap: 8px;
  flex: 0 0 auto;
}

.fit h1 {
  font-size: clamp(1.15rem, 2.6vw, 1.7rem);
}

.fit .lede {
  margin: 0;
  font-size: 0.82rem;
}

.fit .ball {
  width: 36px;
  height: 36px;
}

.fit .lane-stripe { display: none; }

.fit .replay,
.fit .resume,
.fit .music-toggle {
  flex: 0 0 auto;
  width: auto;
}

.fit .lane-actions {
  flex: 1 1 100%;
  width: 100%;
}

@media (min-width: 720px) {
  .fit .lane-actions {
    flex: 0 1 auto;
    width: auto;
  }
}

#portal button.music-toggle[aria-pressed="true"] {
  background: #b9b4be;
  color: #5e5966;
  border-color: #8e8896;
}

.fit .banner {
  margin: 0;
  flex: 0 0 auto;
}

.fit h2 {
  margin: 0 0 4px;
  font-size: 0.92rem;
}

.fit .shelf {
  display: flex;
  gap: 8px;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 78px;
  overflow: auto;
}

.fit .online,
.fit .leaders {
  margin: 0;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 10px;
}

.fit .leaders ol {
  display: flex;
  gap: 6px;
  overflow: auto;
}

.fit .leader {
  flex: 0 0 auto;
  padding: 6px 8px;
}

.tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  flex: 0 0 auto;
}

#portal .tabs button.is-on {
  background: var(--teal);
  color: var(--navy);
}

.fit .split {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
  grid-template-rows: minmax(0, 1fr);
}

.fit .chat,
.fit .gallery {
  display: none;
  min-height: 0;
  height: 100%;
  flex-direction: column;
  overflow: hidden;
  padding: 8px;
}

.fit .chat.is-on,
.fit .gallery.is-on {
  display: flex;
}

.fit .log,
.fit .grid {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

.fit .grid {
  align-content: start;
  grid-template-columns: 1fr 1fr;
}

.fit .composer,
.fit .photo-tools {
  flex: 0 0 auto;
}

.like {
  width: 100%;
  margin-top: 4px;
}

#portal .like.is-on {
  background: var(--teal);
  color: var(--navy);
}

.player {
  flex: 0 0 auto;
  min-height: 0;
  display: grid;
  grid-template-rows: auto;
  gap: 8px;
  padding: 8px 10px;
  border: 2px solid var(--lane);
  border-radius: 12px;
  background: var(--navy);
  color: var(--cream);
  overflow: hidden;
}

.player.is-open {
  flex: 0 0 auto;
  max-height: 62%;
  overflow: auto;
  grid-template-rows: auto minmax(0, 1fr);
}

.now-line {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  align-items: center;
  min-width: 0;
  max-width: 100%;
}

.points {
  margin: 0;
  font-weight: 800;
}

.lcd {
  flex: 1 1 16rem;
  min-width: 0;
  max-width: 100%;
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 8px;
  padding: 4px 10px;
  border-radius: 8px;
  background: var(--sky);
  border: 2px solid rgba(214, 255, 74, 0.55);
  box-shadow: inset 0 0 12px rgba(214, 255, 74, 0.12);
}

.lcd-title,
.lcd-time {
  margin: 0;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lcd-title {
  flex: 1 1 0;
  width: 0;
}

.lcd-time {
  flex: 0 0 auto;
}

.lcd .music-volume,
.lcd .music-bg {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 0 0 auto;
  width: auto;
  max-width: none;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  color: var(--lane);
  white-space: nowrap;
}

#portal .lcd .music-bg input {
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  flex: 0 0 auto;
  accent-color: var(--lane);
}

#portal .lcd .music-volume input[type="range"] {
  width: 7.5rem;
  min-width: 7.5rem;
  max-width: 7.5rem;
  min-height: 0;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  font-size: 16px;
  flex: 0 0 7.5rem;
}

.lcd-title {
  color: var(--lane);
  font-weight: 800;
  cursor: pointer;
}

.lcd-time {
  color: var(--lane);
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

.spoil {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(93, 12, 110, 0.5);
}

.spoil[hidden] { display: none; }

.spoil-card {
  width: min(420px, 100%);
  padding: 18px;
  border: 2px solid var(--navy);
  border-radius: 18px;
  background: var(--cream);
  color: var(--ink);
  box-shadow: var(--shadow);
}

.spoil-card p {
  margin: 0 0 12px;
  font-weight: 800;
  font-size: 1.15rem;
  line-height: 1.35;
}

.spoil-card button {
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  padding: 10px 18px;
  border: 2px solid var(--navy);
  cursor: pointer;
}

.spoil-card button.primary {
  background: var(--teal);
  color: var(--navy);
}

.spoil-card button.secondary {
  margin-bottom: 8px;
  background: var(--navy);
  color: var(--cream);
}

#portal button.points {
  min-height: 0;
  height: auto;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--cream);
  font: inherit;
  font-weight: 800;
  font-size: 0.95rem;
  line-height: 1.2;
  padding: 2px 0;
  cursor: help;
  text-align: left;
  text-decoration: underline dotted;
  text-underline-offset: 3px;
}

#portal button.points:active {
  transform: none;
}

.points-tip {
  position: fixed;
  z-index: 40;
  margin: 0;
  padding: 10px 12px;
  border: 2px solid var(--navy);
  border-radius: 16px;
  background: var(--cream);
  color: var(--ink);
  font-size: 0.82rem;
  font-weight: 700;
  line-height: 1.35;
  text-align: left;
  box-shadow: var(--shadow);
}

.points-tip[hidden] { display: none; }



.player-toggle {
  width: auto;
}

#portal .player h2 {
  margin: 0;
  color: var(--lane);
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

#portal .player .fine,
#portal .player .muted {
  color: var(--cream);
}

.fine {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 700;
}

.player-body {
  display: none;
  gap: 8px;
  min-height: 0;
}

.player.is-open .player-body {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  min-height: 0;
}

.pl-col {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  gap: 4px;
  min-height: 0;
  min-width: 0;
}

.playlist {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  align-content: start;
  min-height: 0;
  overflow: auto;
  color: var(--lane);
}

.pl-item {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto auto auto;
  gap: 6px;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--cream);
  font-weight: 800;
  font-size: 0.82rem;
}

.pl-num {
  color: var(--lane);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.pl-item.is-current .pl-num {
  color: var(--navy);
}

.pl-item.is-current {
  background: var(--lane);
  color: var(--navy);
}

.playlist .pl-item.is-current::marker {
  color: var(--navy);
}

.pl-title,
.pl-who,
.pl-dur {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pl-who {
  font-weight: 700;
}

.pl-dur {
  font-family: ui-monospace, "Cascadia Mono", "Segoe UI Mono", monospace;
  font-variant-numeric: tabular-nums;
}

.pl-empty {
  list-style: none;
  margin-left: 0;
  color: var(--cream);
  font-weight: 700;
}

.pl-actions {
  display: grid;
  gap: 6px;
}

.pl-actions button {
  width: 100%;
}

.pl-hint {
  margin: 0;
  color: var(--cream);
  font-size: 0.78rem;
  font-weight: 700;
  line-height: 1.35;
}

#portal .player button.pl-play {
  min-height: 32px;
  height: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--lane);
  background: var(--lane);
  color: var(--navy);
  font-size: 0.78rem;
  line-height: 1.1;
  white-space: nowrap;
}

#portal select {
  font-size: 16px;
  min-height: 48px;
  border-radius: 14px;
  border: 2px solid var(--navy);
  width: 100%;
  padding: 8px 12px;
  background: var(--cream);
  color: var(--ink);
}

@media (min-width: 880px) {
  .tabs { display: none; }

  .fit .split {
    align-items: stretch;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    grid-template-rows: minmax(0, 1fr);
  }

  .fit .chat,
  .fit .gallery {
    display: flex;
  }

  .player-toggle { display: none; }

  .player {
    flex: 0 0 auto;
    max-height: 320px;
    overflow: hidden;
    grid-template-rows: auto minmax(0, 1fr);
  }

  #portal .player button:not(.pl-play):not(.pl-queue):not(.points) {
    min-height: 40px;
    padding: 6px 10px;
  }

  .player-body {
    display: grid;
    grid-template-rows: minmax(0, 1fr) auto;
    min-height: 0;
  }

  .fit .photo-tools {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .fit .photo-tools button { width: auto; }

  .fit .photo-tools button.trend { width: 100%; }
}

@media (max-width: 879px) {
  .player.is-open { max-height: 62%; }

  .now-line .lcd { flex: 1 1 100%; }

  .lcd .music-volume > span,
  .lcd .music-bg > span {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  #portal .lcd .music-volume input[type="range"] {
    width: 5.5rem;
    min-width: 5.5rem;
    max-width: 5.5rem;
    flex-basis: 5.5rem;
  }

  .pl-item {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto;
    grid-template-areas:
      "num title play"
      "num who dur";
  }

  .pl-num { grid-area: num; align-self: center; }
  .pl-title { grid-area: title; }
  .pl-who { grid-area: who; }
  .pl-dur { grid-area: dur; justify-self: end; }
  .pl-btns { grid-area: play; }
}

#portal button.points,
#portal .player button.points {
  min-height: 0;
  height: auto;
  padding: 2px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}

/* ---------------------------------------------------------------------------
   Club in the hall's look: the dark room, neon tubes in pink and lime, glass
   panels, the СТРАЙК! sign lettering. Everything below overrides the light
   theme above, and packs the header into as few rows as the width allows.
--------------------------------------------------------------------------- */

body.is-club,
#portal.is-arriving {
  --club-bg: #120418;
  --panel: rgba(34, 8, 46, 0.86);
  --panel-deep: rgba(18, 4, 26, 0.72);
  --pink: #ff4ad8;
  --lime: #d6ff4a;
  --text: #f6ffe6;
  --soft: #c9b8d4;
  --glow-pink: 0 0 0 1px rgba(255, 74, 216, 0.55), 0 0 22px rgba(255, 74, 216, 0.22);
  --glow-lime: 0 0 0 1px rgba(214, 255, 74, 0.5), 0 0 22px rgba(214, 255, 74, 0.18);
  color: var(--text);
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(214, 255, 74, 0.12), transparent 62%),
    radial-gradient(700px 560px at -6% 108%, rgba(255, 74, 216, 0.2), transparent 60%),
    radial-gradient(700px 560px at 106% 108%, rgba(214, 255, 74, 0.13), transparent 60%),
    repeating-linear-gradient(90deg, rgba(240, 194, 122, 0.035) 0 1px, transparent 1px 26px),
    var(--club-bg);
}

/* The club's full-screen backdrop: the dark room and the two neon tubes down
   the screen edges. It belongs to #portal (a fixed layer under its content),
   so it fades in and out together with the panels instead of the page
   background switching on or off after the fade. */
body:is(.is-club, .is-joining) #portal.fit::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(900px 420px at 50% -8%, rgba(214, 255, 74, 0.12), transparent 62%),
    radial-gradient(700px 560px at -6% 108%, rgba(255, 74, 216, 0.2), transparent 60%),
    radial-gradient(700px 560px at 106% 108%, rgba(214, 255, 74, 0.13), transparent 60%),
    repeating-linear-gradient(90deg, rgba(240, 194, 122, 0.035) 0 1px, transparent 1px 26px),
    #120418;
  box-shadow:
    inset 3px 0 0 #ff4ad8,
    inset -3px 0 0 #d6ff4a,
    inset 22px 0 34px -18px rgba(255, 74, 216, 0.75),
    inset -22px 0 34px -18px rgba(214, 255, 74, 0.6);
}

#portal.is-arriving {
  background: var(--club-bg);
}

body:is(.is-club, .is-joining) #portal {
  color: var(--text);
}

body:is(.is-club, .is-joining) #portal.fit {
  width: min(1280px, 100%);
  padding: max(8px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  gap: 8px;
}

/* Header: ball, sign, then the controls. Narrow screens get two rows:
   the sign with music and online, then the chat/photo switch with the way back. */
.fit .head {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  grid-template-areas:
    "ball title title title music online"
    "tabs tabs help help back back";
  align-items: center;
  gap: 6px 8px;
}

.fit .lane-actions { display: contents; }
.fit .head .ball { grid-area: ball; width: 30px; height: 30px; }
.fit .titles { grid-area: title; min-width: 0; }
.fit .head .music-toggle { grid-area: music; }
.fit .head .online-btn { grid-area: online; }
.fit .head .resume { grid-area: back; }
.fit .head .tabs { grid-area: tabs; }
.fit .head .help-btn { grid-area: help; }
.fit .head .account-btn { grid-area: acct; }

body:is(.is-club, .is-joining) #portal .head .account-btn {
  width: 36px;
  min-width: 36px;
  padding: 0;
  font-size: 1rem;
}

body:is(.is-club, .is-joining) #portal .head .help-btn {
  width: auto;
  min-width: 0;
  padding: 0 12px;
  font-size: 0.82rem;
  border-color: rgba(214, 255, 74, 0.5);
  color: #d6ff4a;
  font-weight: 900;
  text-shadow: 0 0 8px rgba(214, 255, 74, 0.7);
}

.fit .ball .skin { fill: var(--lime); stroke: none; }
.fit .ball .hole { fill: #2a0634; }

body:is(.is-club, .is-joining) #portal h1 {
  margin: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  color: #eaff9a;
  font-size: clamp(1.15rem, 5.2vw, 1.75rem);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: 0;
  text-shadow:
    0 0 2px #fff,
    0 0 8px rgba(255, 74, 216, 0.95),
    0 0 22px rgba(255, 74, 216, 0.6);
}

.fit .lede {
  display: none;
}

body:is(.is-club, .is-joining) #portal .tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 3px;
  border-radius: 999px;
  background: var(--panel-deep);
  box-shadow: inset 0 0 0 1px rgba(246, 255, 230, 0.12);
}

body:is(.is-club, .is-joining) #portal .tabs button {
  min-height: 36px;
  padding: 4px 10px;
  border: 0;
  background: transparent;
  color: var(--soft);
}

body:is(.is-club, .is-joining) #portal .tabs button.is-on {
  background: var(--lime);
  color: #2a0634;
  box-shadow: 0 0 14px rgba(214, 255, 74, 0.45);
}

/* Buttons and fields */
body:is(.is-club, .is-joining) #portal button {
  min-height: 40px;
  padding: 8px 14px;
  border: 1px solid rgba(255, 74, 216, 0.55);
  background: rgba(93, 12, 110, 0.85);
  color: var(--text);
  font-size: 0.95rem;
  box-shadow: none;
}

body:is(.is-club, .is-joining) #portal button.primary {
  border-color: transparent;
  background: var(--lime);
  color: #2a0634;
  box-shadow: 0 0 16px rgba(214, 255, 74, 0.35);
}

body:is(.is-club, .is-joining) #portal button.music-toggle[aria-pressed="true"] {
  border-color: rgba(201, 184, 212, 0.35);
  background: rgba(60, 40, 70, 0.8);
  color: #8e8896;
}

body:is(.is-club, .is-joining) #portal button.points {
  min-height: 0;
  padding: 2px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  color: var(--lime);
}

body:is(.is-club, .is-joining) #portal .head button {
  min-height: 36px;
  padding: 6px 12px;
  white-space: nowrap;
}

body:is(.is-club, .is-joining) #portal input:not([type="range"]):not([type="checkbox"]):not(.visually-hidden),
body:is(.is-club, .is-joining) #portal select {
  min-height: 42px;
  padding: 9px 14px;
  border: 1px solid rgba(214, 255, 74, 0.28);
  border-radius: 999px;
  background: rgba(14, 3, 20, 0.85);
  color: var(--text);
}

body:is(.is-club, .is-joining) #portal input::placeholder {
  color: rgba(201, 184, 212, 0.6);
}

body:is(.is-club, .is-joining) #portal input:focus-visible,
body:is(.is-club, .is-joining) #portal button:focus-visible {
  outline: 2px solid var(--lime);
  outline-offset: 2px;
}

/* Panels: chat in a pink tube, photos in a lime one. */
body:is(.is-club, .is-joining) #portal .chat,
body:is(.is-club, .is-joining) #portal .gallery {
  padding: 8px;
  border: 0;
  border-radius: 18px;
  background: var(--panel);
  backdrop-filter: blur(6px);
}

body:is(.is-club, .is-joining) #portal .chat { box-shadow: var(--glow-pink); }
body:is(.is-club, .is-joining) #portal .gallery { box-shadow: var(--glow-lime); }

body:is(.is-club, .is-joining) #portal .chat.is-drop {
  outline: 2px dashed var(--lime);
  outline-offset: -6px;
}

body:is(.is-club, .is-joining) #portal .log {
  gap: 6px;
  padding: 4px 4px 8px;
  border-radius: 12px;
  background: transparent;
  color: var(--text);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 74, 216, 0.5) transparent;
}

body:is(.is-club, .is-joining) #portal .grid {
  scrollbar-width: thin;
  scrollbar-color: rgba(214, 255, 74, 0.45) transparent;
}

body:is(.is-club, .is-joining) #portal .empty {
  margin: auto;
  color: var(--soft);
}

/* Bubbles: the others in the dark, yours lit up in lime. */
body:is(.is-club, .is-joining) #portal .bubble {
  max-width: min(86%, 560px);
  padding: 6px 10px 7px;
  border: 1px solid rgba(255, 74, 216, 0.35);
  border-radius: 16px 16px 16px 4px;
  background: rgba(58, 14, 76, 0.9);
  color: var(--text);
}

body:is(.is-club, .is-joining) #portal .bubble.mine {
  border-color: transparent;
  border-radius: 16px 16px 4px 16px;
  background: linear-gradient(180deg, #e2ff7a, #d6ff4a);
  color: #2a0634;
  box-shadow: 0 0 14px rgba(214, 255, 74, 0.18);
}

body:is(.is-club, .is-joining) #portal .bubble .meta {
  font-size: 0.74rem;
  column-gap: 8px;
}

body:is(.is-club, .is-joining) #portal .bubble .who { color: #ff8be6; }
body:is(.is-club, .is-joining) #portal .bubble .when { color: rgba(201, 184, 212, 0.8); }
body:is(.is-club, .is-joining) #portal .bubble.mine .who { color: #5d0c6e; }
body:is(.is-club, .is-joining) #portal .bubble.mine .when { color: rgba(42, 6, 52, 0.6); }
body:is(.is-club, .is-joining) #portal .bubble.mine .text { color: #2a0634; }

body:is(.is-club, .is-joining) #portal .bubble .text {
  margin-top: 2px;
  line-height: 1.32;
}

body:is(.is-club, .is-joining) #portal .chat-photo,
body:is(.is-club, .is-joining) #portal .attach img {
  border: 1px solid rgba(214, 255, 74, 0.4);
  background: #1a0624;
}

body:is(.is-club, .is-joining) #portal .react {
  min-height: 30px;
  padding: 1px 8px;
  border: 1px solid rgba(255, 74, 216, 0.45);
  background: rgba(18, 4, 26, 0.6);
  color: var(--text);
}

body:is(.is-club, .is-joining) #portal .bubble.mine .react {
  border-color: rgba(93, 12, 110, 0.45);
  background: rgba(255, 255, 255, 0.45);
  color: #2a0634;
}

body:is(.is-club, .is-joining) #portal .react.is-on {
  border-color: transparent;
  background: var(--pink);
  color: #2a0634;
}

/* Quiz: «Викторина» glows gold, a breathing halo while the question is open. */
body:is(.is-club, .is-joining) #portal .bubble.quiz {
  max-width: min(92%, 560px);
  border-color: rgba(255, 200, 64, 0.8);
  background:
    radial-gradient(120% 140% at 0% 0%, rgba(255, 196, 46, 0.2), transparent 60%),
    rgba(52, 22, 46, 0.94);
  box-shadow: 0 0 14px rgba(255, 190, 40, 0.38), inset 0 0 12px rgba(255, 196, 46, 0.12);
  animation: quiz-glow 2.6s ease-in-out infinite;
}

body:is(.is-club, .is-joining) #portal .bubble.quiz.is-solved {
  animation: none;
  border-color: rgba(255, 200, 64, 0.45);
  box-shadow: 0 0 8px rgba(255, 190, 40, 0.18);
}

@keyframes quiz-glow {
  50% { box-shadow: 0 0 24px rgba(255, 190, 40, 0.6), inset 0 0 16px rgba(255, 196, 46, 0.2); }
}

body:is(.is-club, .is-joining) #portal .bubble.quiz .who {
  color: #ffd45a;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-shadow: 0 0 6px rgba(255, 196, 46, 0.9), 0 0 14px rgba(255, 160, 20, 0.6);
}

body:is(.is-club, .is-joining) #portal .bubble.quiz .who::before { content: "★ "; }

body:is(.is-club, .is-joining) #portal .bubble.quiz .text {
  font-weight: 700;
  color: #fff4d6;
}

#portal .quiz-box {
  display: grid;
  gap: 6px;
  margin-top: 7px;
}

#portal .quiz-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
}

#portal .quiz-opt {
  display: flex;
  align-items: center;
  gap: 7px;
  min-height: 40px;
  padding: 6px 10px;
  border: 1px solid rgba(255, 200, 64, 0.6);
  border-radius: 10px;
  background: rgba(26, 8, 30, 0.75);
  color: #fff4d6;
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, border-color 0.15s;
}

#portal .quiz-opt b {
  flex: none;
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ffc83e;
  color: #2a0634;
  font-size: 0.75rem;
}

#portal .quiz-opt:not(:disabled):hover,
#portal .quiz-opt:not(:disabled):focus-visible {
  background: rgba(255, 200, 64, 0.18);
  box-shadow: 0 0 12px rgba(255, 190, 40, 0.45);
  outline: none;
}

#portal .quiz-opt:disabled { cursor: default; opacity: 0.55; }

#portal .quiz-opt.is-right {
  opacity: 1;
  border-color: #d6ff4a;
  background: rgba(214, 255, 74, 0.2);
  box-shadow: 0 0 12px rgba(214, 255, 74, 0.4);
}

#portal .quiz-opt.is-right b { background: #d6ff4a; }

#portal .quiz-opt.is-wrong {
  opacity: 1;
  border-color: #ff5a7a;
  background: rgba(255, 74, 110, 0.18);
}

#portal .quiz-opt.is-wrong b { background: #ff5a7a; }

#portal .quiz-status {
  margin: 0;
  color: #ffd45a;
  font-size: 0.78rem;
}

@media (max-width: 420px) {
  #portal .quiz-options { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  body:is(.is-club, .is-joining) #portal .bubble.quiz { animation: none; }
}

/* Composer: one row, emoji · field · photo · send. */
body:is(.is-club, .is-joining) #portal .composer {
  align-items: stretch;
  gap: 6px;
  margin-top: 6px;
}

.composer-row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto;
  gap: 6px;
  align-items: center;
}

body:is(.is-club, .is-joining) #portal .composer-row button {
  width: auto;
  min-width: 42px;
  min-height: 42px;
  padding: 0 12px;
}

body:is(.is-club, .is-joining) #portal .emoji-toggle,
body:is(.is-club, .is-joining) #portal .attach-btn {
  width: 42px;
  padding: 0;
  border-color: rgba(246, 255, 230, 0.16);
  background: rgba(14, 3, 20, 0.85);
  font-size: 1.1rem;
}

.send-icon { display: none; }

body:is(.is-club, .is-joining) #portal .emoji-pop {
  padding: 6px;
  border-radius: 14px;
  background: var(--panel-deep);
}

body:is(.is-club, .is-joining) #portal .emoji {
  width: 40px;
  min-width: 40px;
  min-height: 40px;
  border-color: rgba(246, 255, 230, 0.12);
  background: rgba(58, 14, 76, 0.7);
}

/* Photos */
body:is(.is-club, .is-joining) #portal .photo-tools {
  gap: 6px;
  margin-bottom: 8px;
}

body:is(.is-club, .is-joining) #portal.fit .photo-tools {
  grid-template-columns: 1fr 1fr;
  align-items: center;
}

body:is(.is-club, .is-joining) #portal.fit .photo-tools input:not(.visually-hidden) {
  grid-column: 1 / -1;
}

body:is(.is-club, .is-joining) #portal.fit .photo-tools button,
body:is(.is-club, .is-joining) #portal.fit .photo-tools button.trend {
  grid-column: auto;
  width: 100%;
}

body:is(.is-club, .is-joining) #portal .grid {
  gap: 8px;
}

body:is(.is-club, .is-joining) #portal .grid img {
  border: 1px solid rgba(214, 255, 74, 0.35);
  border-radius: 12px;
  background: #1a0624;
}

body:is(.is-club, .is-joining) #portal .shot figcaption {
  padding-top: 4px;
  color: var(--soft);
  font-size: 0.82rem;
}

body:is(.is-club, .is-joining) #portal .shot .who { color: var(--lime); }
body:is(.is-club, .is-joining) #portal .shot .cap { color: var(--text); }

body:is(.is-club, .is-joining) #portal button.trend[aria-pressed="true"],
body:is(.is-club, .is-joining) #portal .like.is-on {
  border-color: transparent;
  background: var(--lime);
  color: #2a0634;
}

body:is(.is-club, .is-joining) #portal .like {
  min-height: 34px;
  padding: 4px 10px;
}

/* Player bar */
body:is(.is-club, .is-joining) #portal .player {
  padding: 6px 8px;
  border: 0;
  border-radius: 16px;
  background: var(--panel);
  box-shadow: var(--glow-lime);
}

body:is(.is-club, .is-joining) #portal .lcd {
  border: 1px solid rgba(214, 255, 74, 0.4);
  border-radius: 10px;
  background: #0c0312;
}

body:is(.is-club, .is-joining) #portal .playlist .pl-item:not(.is-current) {
  color: var(--text);
}

body:is(.is-club, .is-joining) #portal .banner {
  padding: 8px 12px;
  border-radius: 12px;
  background: var(--pink);
  color: #2a0634;
  box-shadow: 0 0 18px rgba(255, 74, 216, 0.4);
}

/* Floating layers: online list, reactions, tooltip, confirm, viewer, lock card. */
body:is(.is-club, .is-joining) .online-panel,
body:is(.is-club, .is-joining) .react-menu,
body:is(.is-club, .is-joining) .points-tip,
body:is(.is-club, .is-joining) .spoil-card,
body:is(.is-club, .is-joining) #portal .locked {
  border: 0;
  background: #1f0629;
  color: var(--text);
  box-shadow: var(--glow-pink), 0 18px 40px rgba(0, 0, 0, 0.5);
}

body:is(.is-club, .is-joining) .online-row {
  border: 1px solid rgba(214, 255, 74, 0.25);
  background: rgba(58, 14, 76, 0.7);
}

body:is(.is-club, .is-joining) .online-row .nick { color: var(--lime); }

body:is(.is-club, .is-joining) .react-menu button {
  border: 1px solid rgba(255, 74, 216, 0.4);
  background: rgba(58, 14, 76, 0.85);
  color: var(--text);
}

body:is(.is-club, .is-joining) .react-menu button.is-on {
  background: var(--pink);
  color: #2a0634;
}

body:is(.is-club, .is-joining) .spoil { background: rgba(10, 2, 14, 0.7); }
body:is(.is-club, .is-joining) .spoil-card p { color: var(--text); }

body:is(.is-club, .is-joining) .spoil-card button {
  border: 1px solid rgba(255, 74, 216, 0.55);
}

body:is(.is-club, .is-joining) .spoil-card button.secondary {
  background: rgba(93, 12, 110, 0.85);
  color: var(--text);
}

body:is(.is-club, .is-joining) .spoil-card button.primary {
  border-color: transparent;
  background: var(--lime);
  color: #2a0634;
}

body:is(.is-club, .is-joining) #portal .locked p { color: #eaff9a; }
body:is(.is-club, .is-joining) .lightbox { background: rgba(10, 2, 14, 0.92); }

/* Wide screens: one header row, the lede back under the sign, chat and
   photos side by side, a slimmer player. */
@media (min-width: 880px) {
  .fit .head {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
    grid-template-areas: "ball title help online music back";
  }

  body:is(.is-club, .is-joining) #portal .head .tabs { display: none; }

  .fit .lede {
    display: block;
    margin: 1px 0 0;
    color: var(--soft);
    font-size: 0.8rem;
    font-weight: 700;
  }

  .fit .head .ball { width: 38px; height: 38px; }

  body:is(.is-club, .is-joining) #portal .fit .split,
  body:is(.is-club, .is-joining) #portal.fit .split {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr);
    gap: 10px;
  }

  body:is(.is-club, .is-joining) #portal .bubble { max-width: min(72%, 560px); }

  body:is(.is-club, .is-joining) #portal.fit .photo-tools {
    grid-template-columns: 1fr 1fr;
  }

  body:is(.is-club, .is-joining) #portal.fit .photo-tools input:not(.visually-hidden) {
    grid-column: auto;
  }

  body:is(.is-club, .is-joining) #portal.fit .photo-tools button,
  body:is(.is-club, .is-joining) #portal.fit .photo-tools button.trend {
    width: auto;
  }

  body:is(.is-club, .is-joining) #portal.fit .grid { grid-template-columns: 1fr 1fr; }

  body:is(.is-club, .is-joining) #portal .player { max-height: 220px; }

  /* The open player on a wide screen: the list on the left, upload on the right. */
  body:is(.is-club, .is-joining) #portal .player-body {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 300px);
    grid-template-rows: minmax(0, 1fr);
    align-items: start;
    gap: 12px;
  }

  body:is(.is-club, .is-joining) #portal .pl-actions button { width: 100%; }

  /* The player's height is only a max-height, so its grid rows never get a
     definite size and the list would be clipped instead of scrolling. The list
     takes its own height: the player cap minus the now-line and the heading. */
  body:is(.is-club, .is-joining) #portal .player.is-open .playlist,
  body:is(.is-club, .is-joining) #portal .player .playlist {
    max-height: 120px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(214, 255, 74, 0.45) transparent;
  }

  body:is(.is-club, .is-joining) #portal.fit .photo-tools input:not(.visually-hidden) { min-width: 7rem; }
}

@media (min-width: 1180px) {
  body:is(.is-club, .is-joining) #portal.fit .grid { grid-template-columns: 1fr 1fr 1fr; }
}

/* Phones: the send button turns into an arrow, the player shows only its bar. */
@media (max-width: 560px) {
  body:is(.is-club, .is-joining) #portal.fit {
    gap: 6px;
    padding-left: max(8px, env(safe-area-inset-left));
    padding-right: max(8px, env(safe-area-inset-right));
  }

  .send-label { display: none; }
  .send-icon { display: inline; font-size: 1.1rem; }

  body:is(.is-club, .is-joining) #portal .head button {
    padding: 6px 10px;
    font-size: 0.88rem;
  }

  body:is(.is-club, .is-joining) #portal .bubble { max-width: 90%; }

  body:is(.is-club, .is-joining) #portal h1 { font-size: 1.08rem; }

  /* Icons instead of words so the sign keeps its room. */
  body:is(.is-club, .is-joining) #portal .head .music-toggle {
    width: 36px;
    min-width: 36px;
    padding: 0;
    font-size: 0;
  }

  body:is(.is-club, .is-joining) #portal .head .music-toggle::before {
    content: "♪";
    font-size: 1.15rem;
  }

  .online-label { display: none; }

  body:is(.is-club, .is-joining) #portal .head .online-btn:not(.people-btn)::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--lime);
    box-shadow: 0 0 8px var(--lime);
    vertical-align: 1px;
  }

  /* The folded player is one line: the song, the points, the toggle. Volume
     and background play wait inside the open player. */
  body:is(.is-club, .is-joining) #portal .now-line {
    flex-wrap: nowrap;
    gap: 8px;
  }

  body:is(.is-club, .is-joining) #portal .now-line .lcd {
    flex: 1 1 0;
    min-width: 0;
  }

  body:is(.is-club, .is-joining) #portal .player:not(.is-open) .lcd .music-volume,
  body:is(.is-club, .is-joining) #portal .player:not(.is-open) .lcd .music-bg,
  body:is(.is-club, .is-joining) #portal .player:not(.is-open) .lcd .lcd-time {
    display: none;
  }

  body:is(.is-club, .is-joining) #portal .player.is-open .now-line {
    flex-wrap: wrap;
  }

  body:is(.is-club, .is-joining) #portal .player.is-open .now-line .lcd {
    flex-basis: 100%;
  }

  body:is(.is-club, .is-joining) #portal .player-toggle {
    min-height: 34px;
    padding: 4px 12px;
  }
}

/* Playlist search: the heading and a slim search field share one row. */
.pl-head {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}

.pl-head h2 { flex: 0 0 auto; }

body:is(.is-club, .is-joining) #portal input.pl-search {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 32px;
  padding: 4px 12px;
  font-size: 16px;
  border-color: rgba(214, 255, 74, 0.35);
}

#portal .pl-item[hidden] { display: none; }

.pl-none {
  list-style: none;
  padding: 6px 4px;
  color: var(--soft, #c9b8d4);
  font-weight: 700;
  font-size: 0.85rem;
}

/* Caption step after a photo is picked: preview, caption, upload or cancel.
   It lives on <body>, outside #portal, so it carries its own button styles. */
.photo-sign {
  position: fixed;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 16px;
  background: rgba(10, 2, 14, 0.7);
  backdrop-filter: blur(3px);
}

.photo-sign-card {
  display: grid;
  gap: 12px;
  width: min(400px, 100%);
  padding: 16px;
  border-radius: 20px;
  background: rgba(31, 6, 41, 0.97);
  color: #f6ffe6;
  box-shadow:
    0 0 0 1px rgba(214, 255, 74, 0.5),
    0 0 24px rgba(214, 255, 74, 0.18),
    0 18px 44px rgba(0, 0, 0, 0.55);
}

.photo-sign-title {
  margin: 0;
  color: #eaff9a;
  font-size: 1.2rem;
  font-weight: 900;
  text-shadow: 0 0 10px rgba(255, 74, 216, 0.7);
}

.photo-sign-preview {
  display: block;
  width: 100%;
  max-height: min(48dvh, 360px);
  object-fit: contain;
  border-radius: 14px;
  background: #0c0312;
  box-shadow: 0 0 0 1px rgba(214, 255, 74, 0.3);
}

.photo-sign-card input {
  min-height: 46px;
  padding: 0 16px;
  border: 1px solid rgba(214, 255, 74, 0.35);
  border-radius: 999px;
  background: rgba(14, 3, 20, 0.88);
  color: #f6ffe6;
  font: inherit;
  font-size: 16px;
}

.photo-sign-card input::placeholder { color: rgba(201, 184, 212, 0.6); }

.photo-sign-card input:focus {
  outline: none;
  border-color: #d6ff4a;
  box-shadow: 0 0 0 2px rgba(214, 255, 74, 0.3);
}

.photo-sign-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.photo-sign-actions button {
  min-height: 46px;
  border-radius: 999px;
  font: inherit;
  font-weight: 800;
  font-size: 1rem;
  cursor: pointer;
}

.photo-sign-actions .secondary {
  border: 1px solid rgba(255, 74, 216, 0.55);
  background: rgba(93, 12, 110, 0.85);
  color: #f6ffe6;
}

.photo-sign-actions .primary {
  border: 0;
  background: #d6ff4a;
  color: #2a0634;
  box-shadow: 0 0 16px rgba(214, 255, 74, 0.4);
}

.photo-sign-actions button:focus-visible {
  outline: 2px solid #f6ffe6;
  outline-offset: 2px;
}

/* Song queue: two buttons per song and a separate list of what plays next. */
.pl-btns {
  display: inline-flex;
  gap: 4px;
  justify-self: end;
}

#portal .player button.pl-queue {
  min-height: 32px;
  height: auto;
  padding: 4px 10px;
  border-radius: 999px;
  border: 2px solid var(--lane);
  background: transparent;
  color: var(--lane);
  font-size: 0.78rem;
  line-height: 1.1;
  white-space: nowrap;
}

body:is(.is-club, .is-joining) #portal .player button.pl-queue {
  border-color: rgba(214, 255, 74, 0.7);
  color: #d6ff4a;
}

body:is(.is-club, .is-joining) #portal .player button.pl-queue.is-queued {
  border-color: rgba(255, 74, 216, 0.6);
  color: #ff8be6;
  opacity: 1;
}

body:is(.is-club, .is-joining) #portal .player button.pl-play {
  border-color: #ff4ad8;
  background: #ff4ad8;
  color: #2a0634;
}

.player.is-open .player-body,
.q-col { min-width: 0; }

.q-count {
  color: #ff8be6;
  font-variant-numeric: tabular-nums;
}

.queue-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
  align-content: start;
  min-height: 0;
  max-height: 120px;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 74, 216, 0.45) transparent;
}

.q-item {
  display: grid;
  grid-template-columns: 2.2rem minmax(0, 1fr) auto;
  gap: 6px;
  align-items: center;
  padding: 3px 6px;
  border-radius: 6px;
  color: var(--text, #f6ffe6);
  font-weight: 800;
  font-size: 0.82rem;
}

.q-item.is-next {
  background: rgba(255, 74, 216, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 74, 216, 0.5);
}

.q-item.is-mine .q-by { color: #d6ff4a; }

.q-by {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #ff8be6;
  font-size: 0.74rem;
  font-weight: 700;
}

.q-empty {
  padding: 4px 6px;
  color: var(--soft, #c9b8d4);
  font-size: 0.8rem;
  font-weight: 700;
}

@media (min-width: 880px) {
  body:is(.is-club, .is-joining) #portal .player-body {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(200px, 260px);
  }
}

@media (max-width: 879px) {
  .player.is-open .player-body,
  .player-body { grid-template-rows: minmax(0, 1fr) auto auto; }

  .queue-list { max-height: 92px; }
}

@media (max-width: 879px) {
  /* Phone rows: the title gets the full width, the buttons sit under it. */
  .pl-item {
    grid-template-columns: 2.2rem minmax(0, 1fr) auto auto;
    grid-template-areas:
      "num title title title"
      "num who dur play";
    row-gap: 2px;
    padding-block: 4px;
  }

  .pl-dur { grid-area: dur; }
  .pl-btns { grid-area: play; }

  .q-item {
    grid-template-columns: 2.2rem minmax(0, 1fr);
    grid-template-areas:
      "num title"
      "num by";
    row-gap: 0;
  }

  .q-item .pl-num { grid-area: num; }
  .q-item .pl-title { grid-area: title; }
  .q-item .q-by { grid-area: by; }
}

/* Replies, edits and the message menu. */
#portal .bubble .edited {
  font-size: 0.7rem;
  font-style: italic;
  opacity: 0.7;
}

#portal .bubble .text[hidden] { display: none; }

#portal .reply-quote {
  display: grid;
  gap: 1px;
  width: 100%;
  min-height: 0;
  margin: 3px 0 2px;
  padding: 4px 8px;
  border: 0;
  border-left: 3px solid #ff4ad8;
  border-radius: 8px;
  background: rgba(255, 74, 216, 0.12);
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}

#portal .bubble.mine .reply-quote {
  border-left-color: #5d0c6e;
  background: rgba(93, 12, 110, 0.14);
}

#portal .reply-quote.is-gone { font-style: italic; opacity: 0.7; }

#portal .reply-nick {
  font-size: 0.72rem;
  font-weight: 800;
  color: #ff8be6;
}

#portal .bubble.mine .reply-nick { color: #5d0c6e; }

#portal .reply-text {
  overflow: hidden;
  font-size: 0.8rem;
  text-overflow: ellipsis;
  white-space: nowrap;
  opacity: 0.85;
}

#portal .bubble.is-flash { animation: bubble-flash 1.2s ease; }

@keyframes bubble-flash {
  0%, 40% { box-shadow: 0 0 0 2px #d6ff4a, 0 0 22px rgba(214, 255, 74, 0.6); }
  100% { box-shadow: none; }
}

.react-menu .react-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.react-menu .react-row[hidden],
.react-menu .msg-action[hidden] { display: none; }

.react-menu .msg-actions {
  display: grid;
  gap: 2px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 74, 216, 0.3);
}

.react-menu.is-own .msg-actions {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.react-menu .msg-action {
  min-height: 34px;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #f6ffe6;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.react-menu .msg-action:hover,
.react-menu .msg-action:focus-visible {
  background: rgba(214, 255, 74, 0.16);
  outline: none;
}

#portal .compose-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  padding: 5px 6px 5px 10px;
  border-left: 3px solid #ff4ad8;
  border-radius: 10px;
  background: rgba(255, 74, 216, 0.12);
  color: #f6ffe6;
  font-size: 0.82rem;
  font-weight: 700;
}

#portal .compose-mode.is-edit {
  border-left-color: #d6ff4a;
  background: rgba(214, 255, 74, 0.12);
}

#portal .compose-mode[hidden] { display: none; }

#portal .compose-mode-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#portal .compose-mode-close {
  flex: none;
  min-width: 30px;
  min-height: 30px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  color: #f6ffe6;
  cursor: pointer;
}

.react-menu:not([hidden]) { flex-direction: column; flex-wrap: nowrap; }

.react-menu button.msg-action,
body:is(.is-club, .is-joining) .react-menu button.msg-action {
  width: 100%;
  min-width: 150px;
  min-height: 36px;
  padding: 4px 10px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--text, #f6ffe6);
  font-size: 0.88rem;
  line-height: 1.2;
  text-align: left;
}

body:is(.is-club, .is-joining) .react-menu button.msg-action:hover,
body:is(.is-club, .is-joining) .react-menu button.msg-action:focus-visible {
  background: rgba(214, 255, 74, 0.16);
}

.react-menu { max-width: min(310px, calc(100vw - 16px)); }
.react-menu .react-row { flex-wrap: nowrap; }

/* Cups on your own lime bubbles: dark ink so the count stays readable. */
#portal .bubble.mine .cup {
  color: #5d0c6e;
  text-shadow: none;
}

/* Online list: a «⚔️ Вызов» button on the right of every other player. */
.online-row {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  column-gap: 10px;
}

.online-row .nick,
.online-row .online-scores { grid-column: 1; }

.online-row .online-duel {
  grid-column: 2;
  grid-row: 1 / span 2;
  min-height: 34px;
  padding: 4px 12px;
  border: 1px solid rgba(255, 200, 64, 0.8);
  border-radius: 999px;
  background: rgba(255, 200, 64, 0.12);
  color: #ffd45a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  white-space: nowrap;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255, 190, 40, 0.25);
}

.online-row .online-duel:hover,
.online-row .online-duel:focus-visible {
  background: rgba(255, 200, 64, 0.24);
  outline: none;
}

/* Profile and online: 👤 with the count, the same pill as on the lane. */
body:is(.is-club, .is-joining) #portal .head .people-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 40px;
  padding: 0 12px;
  border-color: rgba(255, 74, 216, 0.55);
}

body:is(.is-club, .is-joining) #portal .head .people-btn .online-count {
  color: #d6ff4a;
  font-weight: 800;
  text-shadow: 0 0 6px rgba(214, 255, 74, 0.6);
}

body:is(.is-club, .is-joining) #portal .head .people-btn[aria-expanded="true"] {
  background: rgba(93, 12, 110, 0.95);
  box-shadow: 0 0 14px rgba(255, 74, 216, 0.45);
}

body:is(.is-club, .is-joining) .online-panel .pp-me { padding-top: 0; }
body:is(.is-club, .is-joining) .online-panel .pp-head { margin-top: 8px; }

body:is(.is-club, .is-joining) .online-panel .pp-account {
  min-height: 32px;
  padding: 4px 14px;
  border: 1px solid rgba(214, 255, 74, 0.6);
  border-radius: 999px;
  background: transparent;
  color: #d6ff4a;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 800;
  cursor: pointer;
}