.genreButton {
  align-items: center;
  justify-content: center;
  padding: 29px 26px 10px;
  text-align: center;
}


.selectorPanel .genreButton,
.selectorPanel .categoryButton {
  min-height: 78px;
}

.genreButton strong,
.categoryButton strong {
  font-size: clamp(12px, 1.1vw, 15px);
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.genreButton small,
.categoryButton small {
  font-size: 9px;
  min-height: 11px;
  max-width: 100%;
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.genreButton small:empty,
.categoryButton small:empty {
  visibility: hidden;
}

.genreLamp.genreLampOn {
  border-color: #a8d8bfbd;
  background: #79c69f;
  box-shadow: 0 0 3px #79c69fc7, 0 0 9px #79c69f75, inset 0 0 2px #ffffffd9;
}

.categoryLamp.categoryLampOn {
  border-color: #a8c5d8bd;
  background: #79a6c6;
  box-shadow: 0 0 3px #79a6c6c7, 0 0 9px #79a6c675, inset 0 0 2px #ffffffd9;
}

.ciEqualizerTitle {
  align-items: flex-end;
  justify-content: center;
  min-height: clamp(42px, 4.2vw, 62px);
  display: flex;
  letter-spacing: 0;
  white-space: nowrap;
}

.ciPlacard {
  min-height: 130px;
}

.ciTitleLetter,
.ciTitleSpace {
  display: inline-block;
}

.ciTitleLetter {
  color: #121518;
  margin-inline: 0.04em;
  transition: color 420ms ease, text-shadow 520ms ease;
  will-change: color, text-shadow;
}

.ciTitleLetter.startupLit {
  color: var(--startup-color);
  text-shadow:
    -1px -1px 1px #000000d9,
    1px 1px 1px #ffffff3d,
    0 0 13px var(--startup-glow);
}

.titleEqualizerActive .ciTitleLetter {
  transition: color 45ms linear, text-shadow 45ms linear;
}

.ciTitleSpace {
  width: 0.34em;
}

.frequencyTitle span {
  width: auto;
  max-width: 100%;
  padding: 3px 0.1em 4px;
  color: #f7f9ff;
  background: linear-gradient(90deg, #0c3fa8, #0a328d);
  box-shadow: inset 0 1px #397bff99, inset 0 -1px #051d59;
  text-shadow: 0 1px 1px #020b22;
}

.titleModeLabel {
  z-index: 3;
  position: absolute;
  top: 14px;
  right: 18px;
  color: #f4fbff;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-shadow: 0 0 8px #00d9ffb8;
}

.titleModeLabel[hidden] {
  display: none;
}

.systemLightTest .hardwareButton strong,
.systemLightTest .hardwareButton small,
.systemLightTest .transportKey small,
.systemLightTest .sessionKey,
.systemLightTest .displayCell small,
.systemLightTest .displayCell strong,
.systemLightTest .panelHeading strong,
.systemLightTest .panelHeading small,
.systemLightTest .assemblyHeader strong,
.systemLightTest .assemblyHeader span,
.systemLightTest .selectionReadout,
.systemLightTest .frequencyWindow,
.systemLightTest .frequencyTitle span,
.systemLightTest .sessionReadout,
.systemLightTest .playlistRow,
.systemLightTest .playlistRow .listTitle,
.systemLightTest .storyWindow,
.systemLightTest .storyWindow > strong,
.systemLightTest .storyWindow p,
.systemLightTest .communityPanel,
.systemLightTest .copyrightLine {
  color: #f4fbff !important;
  opacity: 1 !important;
  text-shadow: 0 0 5px #f4fbffe8, 0 0 12px #00d9ff8f !important;
}

.systemLightTest .hardwareButton:disabled,
.systemLightTest .categoryButton:disabled {
  opacity: 1 !important;
}

.systemLightTest .buttonLamp {
  border-color: #f4fbff !important;
  background: #f4fbff !important;
  box-shadow: 0 0 6px #f4fbff, 0 0 15px #f4fbffcc, inset 0 0 2px #fff !important;
}

.systemLightTest .genreButton .buttonLamp {
  background: #397bff !important;
  box-shadow: 0 0 6px #397bff, 0 0 15px #397bffdb, inset 0 0 2px #fff !important;
}

.systemLightTest #category-row .buttonLamp {
  background: #00d9ff !important;
  box-shadow: 0 0 6px #00d9ff, 0 0 15px #00d9ffdb, inset 0 0 2px #fff !important;
}

.systemLightTest #type-row .buttonLamp {
  background: #37e39f !important;
  box-shadow: 0 0 6px #37e39f, 0 0 15px #37e39fdb, inset 0 0 2px #fff !important;
}

.systemLightTest .appDownloadButton .buttonLamp,
.systemLightTest .transportIcon {
  color: #ffd84d !important;
  filter: drop-shadow(0 0 6px #ffd84ddd);
}

.systemLightTest .appDownloadButton .buttonLamp {
  background: #ffd84d !important;
}

.systemLightTest .sessionKey::before,
.systemLightTest .sourceLamp,
.systemLightTest .activeLamp {
  border-color: #ffb4dc !important;
  background: #ff3e9e !important;
  box-shadow: 0 0 6px #ff3e9e, 0 0 15px #ff3e9edb, inset 0 0 2px #fff !important;
}

.systemLightTest input[type="range"] {
  filter: brightness(1.8) drop-shadow(0 0 5px #f4fbffad);
}

@media (prefers-reduced-motion: reduce) {
  .ciTitleLetter {
    transition: none;
    will-change: auto;
  }
}

.typeLamp.activeLamp {
  border-color: #ffffffd9;
  background: #fff;
  box-shadow: 0 0 4px #fff, 0 0 10px #e2f0fac2, inset 0 0 2px #fff;
}

.selectorPanel .hardwareButton.selected {
  outline: 0;
  color: #f1f4f7;
  border-color: #14171a #4b535c #4b535c #14171a;
  background: #252a30;
  transform: translateY(3px);
  box-shadow:
    0 2px #0b0d0f,
    inset 2px 2px 7px #000000a3,
    inset -1px -1px 1px #ffffff0e;
}

.selectorPanel .threeButtonRow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.selectorPanel .selectionReadout {
  flex: 0 0 auto;
  margin-top: 28px;
}

.selectorPanel .hardwareButton.selected strong {
  color: #f4f7f9;
  text-shadow: none;
}

.topDeck {
  grid-template-columns: minmax(0, 1fr) clamp(300px, 25vw, 450px);
}

.topControls {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-items: stretch;
  position: relative;
  min-width: 0;
}

.mobileHeaderSideFasteners {
  display: none;
}

.languageControl {
  height: 100%;
  position: relative;
  z-index: 25;
}

.languageControl > .compactButton,
.topControls > .headerAccountButton,
.topControls > .appDownloadButton {
  height: 100%;
  width: 100%;
  min-width: 0;
}

.headerAccountButton {
  overflow: hidden;
}

.headerAccountButton strong,
.headerAccountButton small {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.headerAccountButton .accountLamp {
  border-color: #080a0b;
  background: #090b0d;
  box-shadow: inset 0 1px 2px #000;
}

.headerAccountButton.signedIn .accountLamp {
  border-color: #b0ffdab8;
  background: var(--green);
  box-shadow: 0 0 5px var(--green), 0 0 12px #74f0b5a0, inset 0 0 2px #fff;
}

.languageButton.selected {
  border-color: #14171a #4b535c #4b535c #14171a;
  background: #252a30;
  transform: translateY(3px);
  box-shadow:
    0 2px #0b0d0f,
    inset 2px 2px 7px #000000a3,
    inset -1px -1px 1px #ffffff0e;
}

.appDownloadButton .appDownloadLamp {
  border-color: #080a0b;
  background: #090b0d;
  box-shadow: inset 0 1px 2px #000;
}

.appDownloadButton.appActive .appDownloadLamp {
  border-color: #b0ffdab8;
  background: var(--green);
  box-shadow: 0 0 5px var(--green), 0 0 12px #74f0b5a0, inset 0 0 2px #fff;
}

.languageMenu {
  position: absolute;
  top: calc(100% + 9px);
  right: 0;
  z-index: 40;
  width: min(258px, 82vw);
  padding: 8px;
  border: 2px solid #101316;
  border-color: #59616a #101316 #101316 #59616a;
  border-radius: 6px;
  background: linear-gradient(#2c3238, #20252a);
  box-shadow: 0 18px 32px #000b;
}

.languageMenu[hidden] {
  display: none;
}

.languageOption {
  width: 100%;
  min-height: 39px;
  padding: 8px 11px;
  border: 0;
  border-bottom: 1px solid #111519;
  color: #c8cdd2;
  background: #1b2025;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-align: left;
}

.languageOption:last-child {
  border-bottom: 0;
}

.languageOption:hover,
.languageOption.selected {
  color: var(--cyan);
  background: #293038;
  box-shadow: inset 3px 0 0 var(--cyan-strong);
}

.repeatAllSvg {
  width: 37px;
  height: 37px;
  overflow: visible;
  display: block;
  color: #e2e6e9;
  transform: translateY(-1px);
}

.repeatAllSvg .repeatContinuousUse {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.2;
  stroke-linejoin: round;
}

.repeatAllSvg .repeatContinuousArrowheadUse {
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 0.2;
  stroke-linejoin: round;
}

#repeat-button .transportIcon {
  flex-basis: 35px;
  width: 37px;
  height: 35px;
}

#repeat-button.engaged .repeatAllSvg {
  color: var(--cyan);
  filter: drop-shadow(0 0 4px #55cfffc7);
}

#repeat-button.engaged {
  box-shadow:
    0 1px #0b0d0f,
    inset 2px 2px 6px #00000094;
}

.playKey small {
  transform: none;
}

#repeat-button small {
  transform: translateY(-5px);
}

.playKey {
  color: #c9ced3;
  background: #30353b;
  border-color: #4b535b #0b0d0f #0b0d0f #4b535b;
  box-shadow:
    0 4px #0b0d0f,
    0 7px 9px #00000052;
}

.playKey .transportIcon {
  color: #d7dbe0;
  filter: none;
}

.playKey small {
  color: #767e86;
}

.playKey:active .transportIcon,
.playKey.engaged .transportIcon,
.playKey.pending .transportIcon {
  color: #8ee5ff;
  filter: drop-shadow(0 0 5px #55cfffc2);
}

.playKey:active small,
.playKey.engaged small,
.playKey.pending small {
  color: #a9dbea;
}

.sessionPanel {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(132px, 1.15fr) repeat(3, minmax(68px, 86px));
  align-items: center;
  gap: 10px;
  margin-top: 11px;
  padding: 10px;
  border: 1px solid #14171a;
  border-radius: 5px;
  background: #1c2025;
  box-shadow: inset 2px 2px 6px #0008, 1px 1px #ffffff0a;
}

.sessionReadout {
  min-width: 0;
  padding: 3px 7px;
  font-family: var(--mono);
}

.sessionReadout small {
  display: block;
  margin-bottom: 3px;
  color: #707881;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.12em;
}

.sessionReadout strong {
  display: block;
  overflow: hidden;
  color: var(--cyan);
  font-size: 12px;
  letter-spacing: 0.055em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.sessionKey {
  min-height: 56px;
  border: 2px solid #0b0d0f;
  border-color: #4b535b #0b0d0f #0b0d0f #4b535b;
  border-radius: 4px;
  color: #8f979f;
  background: #30353b;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.08em;
  box-shadow: 0 3px #0b0d0f;
  position: relative;
  white-space: nowrap;
}

.sessionKey::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 24px;
  height: 3px;
  border: 1px solid #080a0b;
  border-radius: 1px;
  background: #090b0d;
  transform: translateX(-50%);
  box-shadow: inset 0 1px 2px #000;
}

.sessionKey.continuousKey {
  font-size: 10px;
  letter-spacing: 0.045em;
}

.sessionContinuousGlyph {
  display: block;
  flex: 0 0 14px;
  width: 14px;
  height: 9px;
  overflow: visible;
}

.sessionContinuousGlyph path {
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sessionKey.selected {
  color: #f1f4f7;
  border-color: #101316 #485059 #485059 #101316;
  background: #252a30;
  transform: translateY(2px);
  box-shadow:
    0 1px #0b0d0f,
    inset 2px 2px 6px #0009,
    inset -1px -1px 1px #ffffff0e;
}

.sessionKey.selected::before {
  border-color: #c8f4ff66;
  background: var(--cyan);
  box-shadow: 0 0 4px #5ccdf5e6, 0 0 9px #5ccdf57d, inset 0 0 2px #fff;
}

.betaCell strong {
  color: #81e8b8;
  text-shadow: 0 0 8px #81e8b84f;
}

.systemMessage:empty {
  display: none;
}

.systemMessage .retryButton {
  margin-left: 12px;
  padding: 5px 9px;
  border: 1px solid #5e6872;
  border-radius: 3px;
  color: #d5dbe0;
  background: #30363c;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 800;
}

.playlistRow {
  grid-template-columns: 10px 26px minmax(0, 1fr);
}

.playlistAssembly {
  min-height: 0;
  overflow: hidden;
}

@media (min-width: 661px) {
  .sessionKey.continuousKey .sessionDesktopText {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    line-height: 1;
  }

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

.playlistAssembly,
.storyAssembly {
  border: 2px solid #41464c;
  border-color: #080a0b #41464c #41464c #080a0b;
  background: #050809;
  box-shadow: inset 0 0 24px #000, 1px 1px #ffffff09;
}

.playlistAssembly .playlistRows {
  border-top: 1px solid #050708;
  background: radial-gradient(circle at 50% 18%, #58dbff06, transparent 58%), #050809;
  box-shadow: inset 0 0 24px #000, inset 0 0 34px #00d9ff06;
}

.playlistAssembly .playlistRow {
  background: #080c0e;
  border-bottom-color: #172027;
}

.playlistAssembly .playlistRow:hover,
.playlistAssembly .playlistRow.current {
  background: #121b20;
}

.playlistRows {
  height: clamp(180px, 34dvh, 318px);
  max-height: 318px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  contain: content;
}

.storyWindow[lang="ja"] p {
  word-break: normal;
  overflow-wrap: anywhere;
  white-space: normal;
}

.storyWindow[lang="ko"] p {
  word-break: keep-all;
  overflow-wrap: break-word;
  white-space: normal;
}

.storyWindow[lang="es"] p,
.storyWindow[lang="pt-BR"] p,
.storyWindow[lang="en"] p {
  word-break: normal;
  overflow-wrap: break-word;
  white-space: normal;
}

.storyAssembly.communityEnabled .storyWindow {
  height: 150px;
  border-bottom: 1px solid #0c0f11;
}

.storyAssembly .storyWindow {
  border: 2px solid #41464c;
  border-color: #080a0b #41464c #41464c #080a0b;
  border-radius: 4px 4px 0 0;
  color: #aebbc4;
  background: radial-gradient(circle at 50% 22%, #58dbff08, transparent 58%), #050809;
  box-shadow: inset 0 0 24px #000, inset 0 0 34px #00d9ff08;
}

.storyAssembly .storyWindow > strong {
  color: var(--cyan);
  text-shadow: 0 0 8px #5ccdf53d;
}

.storyAssembly .storyWindow .storyTeaser {
  border-bottom-color: #263238;
  color: #d6e0e5;
}

.storyAssembly .storyWindow p:not(.storyTeaser) {
  color: #aebbc4;
}

.communityPanel {
  box-sizing: border-box;
  height: 168px;
  min-height: 0;
  padding: 8px 10px 7px;
  display: grid;
  grid-template-rows: auto minmax(42px, 1fr) auto auto;
  gap: 6px;
  overflow: hidden;
  color: #aeb6bd;
  border-top: 1px solid #263238;
  background: radial-gradient(circle at 50% 0, #58dbff06, transparent 48%), #080b0d;
  box-shadow: inset 0 10px 18px #0008;
  font-family: var(--mono);
}

.communityPanel[hidden] {
  display: none;
}

.communityPanel:not(.communitySignedIn) {
  grid-template-rows: auto minmax(42px, 1fr) auto;
}

@media (min-width: 901px) {
  .consoleGrid > .selectorPanel,
  .consoleGrid > .playerPanel {
    display: flex;
    flex-direction: column;
  }

  .selectorPanel .selectionReadout {
    margin-top: 28px;
  }

  .playerPanel > .informationGrid {
    flex: 1 1 0;
    height: auto;
    min-height: 470px;
  }

  .informationGrid {
    align-items: stretch;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .playlistAssembly,
  .storyAssembly {
    height: 100%;
    min-height: 0;
    overflow: hidden;
  }

  .playlistAssembly {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .storyAssembly.communityEnabled {
    display: grid;
    grid-template-rows: auto minmax(185px, 0.85fr) minmax(233px, 1.15fr);
  }

  .playlistRows,
  .storyAssembly.communityEnabled .storyWindow,
  .communityPanel {
    height: auto;
    max-height: none;
  }
}

.communityTopline,
.communityTopline > div,
.commentRow footer,
.commentComposer > div,
.reactionButtons,
.commentOwnerActions {
  display: flex;
  align-items: center;
}

.communityTopline {
  justify-content: flex-start;
  gap: 8px;
  min-width: 0;
}

.communityTopline > div {
  gap: 8px;
  min-width: 0;
}

.communityTopline strong {
  flex: 0 0 auto;
  color: #e8eef2;
  font-size: 8px;
  letter-spacing: 0.09em;
}

.reactionButtons {
  gap: 4px;
}

.reactionButton,
.commentOwnerActions button,
.commentComposer button {
  border: 1px solid #0a0c0e;
  border-color: #46515a #0a0c0e #0a0c0e #46515a;
  border-radius: 3px;
  color: #9ca8b1;
  background: #252b30;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 7px;
  font-weight: 900;
  letter-spacing: 0.06em;
}

.reactionButton {
  min-width: 30px;
  height: 21px;
  padding: 2px 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.reactionButton svg {
  width: 10px;
  height: 10px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.reactionButton.selected {
  border-color: #7fe8ff #12333b #12333b #7fe8ff;
  color: #f4fbff;
  background: #16404b;
  box-shadow: 0 0 7px #00d9ff75, inset 0 0 7px #00d9ff1f;
}

.reactionButton:nth-child(2).selected {
  border-color: #ff9dce #40152c #40152c #ff9dce;
  background: #4a1831;
  box-shadow: 0 0 7px #ff3e9e75, inset 0 0 7px #ff3e9e1f;
}

.reactionButton:nth-child(3).selected {
  border-color: #ffe991 #433817 #433817 #ffe991;
  background: #4c3e18;
  box-shadow: 0 0 7px #ffd84d75, inset 0 0 7px #ffd84d1f;
}

.communitySetupPending .reactionButton {
  opacity: 0.52;
}

.commentList {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #4b555e #111519;
  scrollbar-width: thin;
}

.commentRow {
  padding: 6px 1px 5px;
  border-top: 1px solid #293036;
}

.commentRow:first-child {
  border-top: 0;
}

.commentRow header {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}

.commentRow header strong {
  color: #dde6eb;
  font-size: 8px;
  letter-spacing: 0.05em;
}

.commentRow header span {
  color: #68757e;
  font-size: 7px;
}

.commentRow p {
  margin: 4px 0 5px;
  color: #b9c0c5;
  font-family: system-ui, sans-serif;
  font-size: 10px;
  line-height: 1.35;
  word-break: break-word;
}

.commentRow footer {
  justify-content: space-between;
  gap: 8px;
}

.commentOwnerActions {
  gap: 4px;
}

.commentOwnerActions button,
.commentComposer button {
  min-height: 21px;
  padding: 3px 7px;
}

.commentComposer {
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 6px;
  display: grid;
}

.commentComposer textarea {
  box-sizing: border-box;
  width: 100%;
  height: 36px;
  resize: none;
  border: 1px solid #39434b;
  border-radius: 3px;
  outline: 0;
  padding: 6px 7px;
  color: #e5edf1;
  background: #0d1113;
  font-family: system-ui, sans-serif;
  font-size: 10px;
}

.commentComposer textarea:focus {
  border-color: #00d9ff;
  box-shadow: 0 0 6px #00d9ff45;
}

.commentComposer > div {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px;
  width: 98px;
}

.commentComposer > div span {
  width: 100%;
  color: #71808a;
  text-align: right;
  font-size: 7px;
}

.communityState,
.communityOwnNotice,
.communityMessage {
  margin: 0;
  color: #73808a;
  font-size: 7px;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.communityLoginState {
  align-self: center;
  color: #8ca0ad;
}

.communityOwnNotice {
  align-self: center;
  color: #91a0aa;
}

.communityMessage:empty {
  display: none;
}

.communityLoginDialog .providerGrid {
  margin: 0 0 20px;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  display: grid;
}

.communityLoginDialog .providerGrid button {
  min-width: 0;
  color: #f4fbff;
}

.communityLoginDialog .providerGrid button[data-provider="google"] {
  box-shadow: 0 4px #0b0d0f, inset 3px 0 #397bff;
}

.communityLoginDialog .providerGrid button[data-provider="kakao"] {
  box-shadow: 0 4px #0b0d0f, inset 3px 0 #ffd84d;
}

.communityLoginDialog.loginReady .installDialogLamp {
  background: #7df0bd;
  box-shadow: 0 0 8px #37e39fcc;
}

.loginConnectionStatus {
  margin: -8px 0 14px !important;
  color: #ffd978;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: 0.08em;
}

.installDialog p {
  white-space: pre-line;
}

.appDownloadDialog {
  box-sizing: border-box;
  width: min(760px, calc(100vw - 28px));
  padding-inline: clamp(16px, 6vw, 30px);
}

.appDownloadDialog.singlePlatform {
  width: min(440px, calc(100vw - 28px));
}

.appDownloadGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin: 0 0 14px;
}

.appDownloadDialog.singlePlatform .appDownloadGrid {
  grid-template-columns: minmax(0, 1fr);
}

.appDownloadChoice {
  min-width: 0;
  min-height: 304px;
  padding: 24px 16px 14px;
  position: relative;
  display: grid;
  justify-items: center;
  align-content: start;
  gap: 9px;
  border: 1px solid #65717a;
  border-radius: 4px;
  background: linear-gradient(180deg, #252b30 0%, #151a1e 100%);
  box-shadow: 0 4px #0b0d0f, inset 0 1px #aab4bb28;
}

.appDownloadChoice > strong,
.appDownloadChoice > small {
  display: block;
  font-family: var(--mono);
}

.appDownloadChoice > strong {
  color: #f4fbff;
  font-size: 11px;
  letter-spacing: .08em;
}

.appDownloadChoice > small {
  margin-top: 1px;
  color: #89949c;
  font-size: 7px;
  font-weight: 900;
  letter-spacing: .08em;
}

.appDownloadChoice.android {
  border-left: 3px solid #4285f4;
}

.appDownloadChoice.apple {
  border-left: 3px solid #f4fbff;
}

.storeBadgeButton,
.storeQrButton {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

.storeBadgeButton {
  width: 100%;
  min-height: 72px;
  display: grid;
  place-items: center;
}

.storeBadgeButton img {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.appDownloadChoice.apple .storeBadgeButton img {
  height: 48px;
}

.appDownloadChoice.android .storeBadgeButton img {
  height: 70px;
}

.storeBadgeButton[aria-disabled="true"],
.appDownloadChoice.unavailable .storeQrPending {
  cursor: default;
}

.storeQrButton,
.storeQrPending {
  width: 132px;
  height: 132px;
  display: grid;
  place-items: center;
}

.storeQrButton {
  cursor: pointer;
}

.storeQrSvg {
  display: block;
  width: 132px;
  height: 132px;
  border: 1px solid #f4fbff;
}

.storeQrPending {
  box-sizing: border-box;
  border: 1px dashed #69747d;
  color: #ffd978;
  background: repeating-linear-gradient(45deg, #11161a, #11161a 7px, #171d21 7px, #171d21 14px);
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  text-align: center;
}

.storeTrademarkNotice {
  margin: -3px 0 12px !important;
  color: #77838b !important;
  font-size: 6px !important;
  line-height: 1.45 !important;
  letter-spacing: .02em;
}

.installDialog .appDownloadStatus {
  min-height: 29px;
  margin: 0 0 12px;
  color: #ffd978;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .06em;
  line-height: 1.5;
}

.installDialog .appDownloadClose {
  min-height: 42px;
}

.copyrightLine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 4px 14px;
  color: #e5ebef;
  font-size: clamp(10px, 0.95vw, 12px);
  font-weight: 900;
  letter-spacing: 0.11em;
  text-shadow: 0 1px 2px #000, 0 0 10px #66d9ff21;
}

.copyrightLine a {
  color: #8edfff;
  text-decoration: none;
  text-underline-offset: 0.22em;
}

.copyrightLine a:hover,
.copyrightLine a:focus-visible {
  color: #d7f7ff;
  text-decoration: underline;
}

@media (max-width: 660px) {
  .appDownloadDialog,
  .appDownloadDialog.singlePlatform {
    width: min(440px, calc(100vw - 20px));
    padding-inline: 16px;
  }

  .appDownloadGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .appDownloadChoice {
    min-height: 294px;
  }

  .ciPlacard {
    min-height: 112px;
  }

  .genreButton {
    padding-inline: 22px;
  }

  .selectorPanel .genreButton,
  .selectorPanel .categoryButton {
    min-height: 73px;
  }

  .selectorPanel .genreButton strong,
  .selectorPanel .categoryButton strong {
    font-size: 11px;
  }

  .selectorPanel .genreButton small,
  .selectorPanel .categoryButton small {
    font-size: 7px;
  }

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

  .playlistRows {
    height: clamp(210px, 44dvh, 300px);
    max-height: 300px;
  }

  .storyAssembly.communityEnabled .storyWindow {
    height: 200px;
  }

  .communityPanel {
    height: 230px;
    grid-template-rows: auto minmax(74px, 1fr) auto auto;
  }

  .sessionReadout {
    grid-column: 1 / -1;
  }

  .sessionKey {
    min-height: 52px;
  }

  .languageMenu {
    right: auto;
    left: 0;
  }
}

/* v4.2.6 · responsive FCU order, title movement and mobile information drawers */
.genreLamp.genreLampOn,
.categoryLamp.categoryLampOn {
  border-color: #a7c5d8bd;
  background: #79a6c6;
  box-shadow: 0 0 3px #79a6c6c7, 0 0 9px #79a6c675, inset 0 0 2px #ffffffd9;
}

.frequencyTitle {
  position: relative;
}

.frequencyTitle .frequencyTitleText {
  flex: 0 0 auto;
  width: max-content;
  max-width: none;
  overflow: visible;
  text-overflow: clip;
  transform: translateX(0);
  will-change: transform;
}

.frequencyTitle .frequencyTitleText.titleMarqueeActive {
  animation: frequencyTitleMarquee var(--title-duration) ease-in-out infinite alternate;
}

.playingText {
  color: var(--green);
}

.pausedText {
  color: var(--amber);
}

.startingText {
  color: var(--cyan);
}

.frequencySelectionSummary {
  min-width: 0;
  display: inline-flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 7px;
}

.frequencySelectionSummary small {
  flex: 0 0 auto;
  color: #68727a;
  font: inherit;
  letter-spacing: .1em;
}

.frequencySelectionSummary strong {
  min-width: 0;
  overflow: hidden;
  color: var(--cyan);
  font: inherit;
  text-overflow: ellipsis;
  white-space: nowrap;
}

@keyframes frequencyTitleMarquee {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--title-shift)); }
}

.mobileInfoToggles {
  display: none;
}

.sessionMobileText {
  display: none;
}

@media (max-width: 660px) {
  .topDeck {
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    margin-bottom: 34px;
  }

  .ciPlacard {
    min-height: 78px;
    padding: 14px 22px 11px;
  }

  .ciPlacard .ciEqualizerTitle {
    min-height: 25px;
    font-size: clamp(22px, 7vw, 28px);
    letter-spacing: .075em;
  }

  .ciPlacard p {
    margin-top: 4px;
    font-size: clamp(7px, 2vw, 9px);
    letter-spacing: .24em;
    line-height: 1;
  }

  .topControls {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .compactButton {
    min-height: 46px;
    padding: 17px 3px 6px;
  }

  .compactButton strong {
    font-size: 8px;
  }

  .compactButton small {
    margin-top: 3px;
    font-size: 5px;
  }

  .buttonLamp {
    width: 23px;
  }

  .systemStrip {
    display: none;
  }

  .consoleGrid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .consoleGrid > .playerPanel {
    order: 1;
  }

  .consoleGrid > .selectorPanel {
    order: 2;
  }

  .metalPanel {
    padding: 16px 13px;
  }

  .panelHeading {
    margin-bottom: 10px;
    padding-bottom: 8px;
  }

  .frequencyWindow {
    padding: 10px 11px 11px;
  }

  .frequencyTitle {
    min-height: 58px;
  }

  .frequencyTitle .frequencyTitleText {
    padding-block: 5px 6px;
    font-size: clamp(20px, 7vw, 30px);
  }

  .transportPanel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .transportPanel .transportKey:nth-child(4),
  .volumeControl {
    display: none;
  }

  .transportKey {
    min-height: 48px;
  }

  .playKey small {
    font-size: 7px;
  }

  .sessionPanel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .sessionReadout {
    grid-column: 1 / -1;
    min-height: 49px;
    padding: 8px;
  }

  .sessionReadout small {
    font-size: 6px;
  }

  .sessionReadout strong {
    font-size: 8px;
  }

  .sessionKey {
    min-height: 49px;
    padding-inline: 4px;
    font-size: 8px;
  }

  .sessionKey[data-session="1"] {
    display: none;
  }

  .mobileInfoToggles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    margin: 14px 0 0;
    display: grid;
  }

  .mobileInfoToggle {
    min-height: 48px;
    height: 48px;
    padding: 18px 3px 5px;
  }

  .mobileInfoToggle strong {
    overflow: hidden;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .08em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .informationGrid {
    display: none;
    margin-top: 9px;
  }

  .informationGrid[data-mobile-panel="playlist"],
  .informationGrid[data-mobile-panel="story"],
  .informationGrid[data-mobile-panel="comment"] {
    display: block;
  }

  .informationGrid[data-mobile-panel="playlist"] .storyAssembly,
  .informationGrid[data-mobile-panel="story"] .playlistAssembly,
  .informationGrid[data-mobile-panel="comment"] .playlistAssembly {
    display: none;
  }

  .informationGrid[data-mobile-panel="story"] .communityPanel,
  .informationGrid[data-mobile-panel="comment"] .storyAssembly > .assemblyHeader,
  .informationGrid[data-mobile-panel="comment"] .storyWindow {
    display: none;
  }

  .informationGrid[data-mobile-panel="story"] .storyWindow {
    border-bottom: 2px solid #41464c;
    border-radius: 4px;
  }

  .informationGrid[data-mobile-panel="comment"] .communityPanel:not([hidden]) {
    height: min(48dvh, 330px);
    max-height: 330px;
    border: 2px solid #41464c;
    border-color: #080a0b #41464c #41464c #080a0b;
    border-radius: 4px;
  }

  .playlistRows,
  .storyAssembly .storyWindow,
  .storyAssembly.communityEnabled .storyWindow {
    height: min(48dvh, 330px);
    max-height: 330px;
  }

  .selectorPanel .panelHeading:first-of-type {
    margin-top: 1px;
  }

  .genreGrid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
  }

  .selectorPanel .genreButton {
    min-height: 59px;
    padding: 22px 3px 7px;
  }

  .selectorPanel .genreButton .buttonNumber,
  .selectorPanel .genreButton small:empty,
  html[lang="en"] .selectorPanel .genreButton small,
  html[lang="en"] .selectorPanel .categoryButton small {
    display: none;
  }

  html:not([lang="en"]) .selectorPanel .genreButton strong,
  html:not([lang="en"]) .selectorPanel .categoryButton strong {
    display: none;
  }

  html:not([lang="en"]) .selectorPanel .genreButton small,
  html:not([lang="en"]) .selectorPanel .categoryButton small {
    min-height: 0;
    margin: 0;
    display: block;
    visibility: visible;
    color: #d3d9de;
    font-size: 9px;
    font-weight: 900;
  }

  .selectorPanel .genreButton strong {
    font-size: 8px;
    letter-spacing: 0;
  }

  .selectorPanel .threeButtonRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
  }

  .selectorPanel .categoryButton {
    min-height: 57px;
    padding: 22px 5px 7px;
  }

  .selectorPanel .selectionReadout {
    margin-top: 14px;
    padding: 11px 12px;
  }

  .selectionReadout span,
  .selectionReadout small {
    font-size: 7px;
  }

  .selectionReadout strong {
    display: inline !important;
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .frequencyTitle .frequencyTitleText.titleMarqueeActive {
    animation: none;
    transform: translateX(0);
  }
}

/* v4.2.6 PATCH1 · calibrated header EQ and precision smartphone FCU layout */
@media (max-width: 660px) {
  .cockpitShell {
    --mobile-control-gap: 6px;
    --mobile-control-height: 48px;
    --mobile-player-content-inset: 12px;
    padding:
      max(7px, env(safe-area-inset-top))
      max(7px, env(safe-area-inset-right))
      max(9px, env(safe-area-inset-bottom))
      max(7px, env(safe-area-inset-left));
  }

  .topDeck {
    box-sizing: border-box;
    position: static;
    isolation: auto;
    grid-template-columns: minmax(0, 1fr);
    gap: 7px;
    min-width: 0;
    margin-bottom: 7px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .topDeck::before {
    content: none;
  }

  .topDeck::after {
    content: none;
  }

  .mobileHeaderSideFasteners {
    position: absolute;
    z-index: 3;
    inset: 0;
    pointer-events: none;
    display: block;
  }

  .ciPlacard {
    grid-column: 1 / -1;
    box-sizing: border-box;
    min-width: 0;
    min-height: 62px;
    height: 62px;
    max-height: 62px;
    margin: 0;
    padding: 10px 13px 8px;
    border: 1px solid;
    border-color: #515b65 #090b0d #090b0d #515b65;
    border-radius: 8px;
    background:
      linear-gradient(135deg, #ffffff08, #0000 34%),
      linear-gradient(#30363d, #22272d);
    overflow: hidden;
    box-shadow: 0 7px 12px #0009, inset 1px 1px #ffffff0d;
  }

  .ciPlacard::after {
    content: "";
    position: absolute;
    inset: 6px;
    z-index: 0;
    pointer-events: none;
    border: 1px solid #080a0ca0;
    border-radius: 5px;
  }

  .ciPlacard > .screw {
    display: none;
  }

  .mobileHeaderSideFasteners .screwMl {
    top: 50%;
    left: 11px;
    transform: translateY(-50%);
  }

  .mobileHeaderSideFasteners .screwMr {
    top: 50%;
    right: 11px;
    transform: translateY(-50%);
  }

  .ciPlacard .ciEqualizerTitle {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-height: 22px;
    margin-inline: auto;
    justify-content: center;
    overflow: visible;
    font-size: clamp(22px, 7vw, 28px);
    letter-spacing: .075em;
    line-height: 1;
  }

  .ciPlacard .ciTitleLetter {
    flex: 0 0 auto;
    margin-inline: 0;
  }

  .ciPlacard .ciTitleSpace {
    flex: 0 0 auto;
    width: .36em;
  }

  .ciPlacard p {
    margin-top: 4px;
    font-size: clamp(7px, 2vw, 9px);
    letter-spacing: .24em;
    line-height: 1;
  }

  .titleModeLabel {
    top: 8px;
    right: 10px;
    font-size: 5px;
  }

  .topControls {
    grid-column: 1 / -1;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mobile-control-gap);
    padding-inline: 12px;
    min-width: 0;
  }

  .topControls::before {
    content: none;
  }

  .topControls::after {
    content: none;
  }

  .languageControl,
  .topControls > .headerAccountButton,
  .topControls > .appDownloadButton {
    min-width: 0;
  }

  .compactButton {
    box-sizing: border-box;
    min-height: var(--mobile-control-height);
    height: var(--mobile-control-height);
    padding: 17px 3px 6px;
  }

  .compactButton strong {
    font-size: 8px;
    letter-spacing: .035em;
  }

  .compactButton small {
    margin-top: 3px;
    font-size: 5px;
    letter-spacing: .08em;
  }

  .buttonLamp {
    top: 6px;
    width: 20px;
    height: 3px;
  }

  .consoleGrid {
    gap: 7px;
  }

  .playerPanel {
    padding: 10px 10px 38px;
  }

  .playerPanel > .panelHeading {
    min-height: 21px;
    margin: 1px 0 7px;
    padding: 0 17px 6px;
  }

  .playerPanel > .panelHeading b,
  .playerPanel > .panelHeading strong {
    font-size: 9px;
  }

  .playerPanel > .panelHeading small {
    font-size: 7px;
  }

  .frequencyWindow {
    padding: 7px 9px 8px;
  }

  .frequencyWindow header,
  .frequencyWindow footer {
    font-size: 6px;
  }

  .frequencyWindow footer {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
    justify-content: stretch;
    gap: 2px;
    display: grid;
  }

  .frequencyWindow footer span.frequencySelectionSummary {
    min-width: 0;
    display: flex;
    align-items: baseline;
    justify-content: flex-start;
    gap: 5px;
    color: var(--cyan);
    font-size: clamp(5px, 1.75vw, 7px);
    letter-spacing: .045em;
  }

  .frequencySelectionSummary small {
    color: #68727a;
    font-size: .88em;
    letter-spacing: .09em;
  }

  .frequencySelectionSummary strong {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .frequencyTitle {
    min-height: 42px;
  }

  .frequencyTitle .frequencyTitleText {
    padding-block: 4px 5px;
    font-size: clamp(18px, 6.4vw, 25px);
  }

  .transportPanel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mobile-control-gap);
    margin-top: 7px;
  }

  .transportKey {
    box-sizing: border-box;
    min-height: var(--mobile-control-height);
    height: var(--mobile-control-height);
    gap: 2px;
  }

  .transportIcon {
    flex-basis: 22px;
    height: 22px;
    transform: scale(.86);
  }

  .transportKey small,
  .playKey small {
    font-size: 7px;
    transform: none;
  }

  .progressAssembly {
    grid-template-columns: 36px minmax(0, 1fr) 36px;
    gap: 6px;
    min-height: 26px;
    margin-top: 8px;
    padding: 4px 7px;
  }

  .progressAssembly span {
    font-size: 7px;
  }

  .sessionPanel {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mobile-control-gap);
    width: calc(100% + 2px);
    margin-top: 8px;
    margin-inline: -1px;
    padding: 5px 0;
  }

  .sessionReadout {
    box-sizing: border-box;
    grid-column: 1 / -1;
    min-height: 25px;
    padding: 4px 7px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .sessionReadout small {
    margin-bottom: 0;
    font-size: 6px;
  }

  .sessionReadout strong {
    font-size: 8px;
    letter-spacing: .025em;
  }

  .sessionKey {
    box-sizing: border-box;
    min-height: var(--mobile-control-height);
    height: var(--mobile-control-height);
    padding: 13px 2px 3px;
    font-size: 9px;
    letter-spacing: .02em;
  }

  .sessionKey[data-session="1"] {
    display: none;
  }

  .sessionKey::before {
    top: 5px;
    width: 18px;
    height: 2px;
  }

  .sessionKey.continuousKey {
    font-size: 18px;
  }

  .sessionDesktopText {
    display: none;
  }

  .sessionMobileText {
    display: inline;
  }

  .systemMessage {
    margin-top: 8px;
    padding: 7px 9px;
    font-size: 8px;
  }

  .mobileInfoToggles {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--mobile-control-gap);
    margin: 8px 0 0;
  }

  .mobileInfoToggle {
    box-sizing: border-box;
    min-height: var(--mobile-control-height);
    height: var(--mobile-control-height);
    padding: 18px 3px 5px;
    display: grid;
    place-items: center;
  }

  .mobileInfoToggle strong {
    font-size: 9px;
    line-height: 1;
    letter-spacing: .055em;
    transform: translateY(1px);
  }

  .mobileInfoToggle .buttonLamp {
    top: 5px;
    width: 18px;
  }

  .informationGrid {
    margin-top: 9px;
  }

  .copyrightLine {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    padding: 8px 1px max(6px, env(safe-area-inset-bottom));
    font-size: clamp(7px, 2.05vw, 9px);
    letter-spacing: .04em;
    line-height: 1.2;
    white-space: normal;
  }

  .selectorPanel {
    padding: 11px 10px 30px;
  }

  .selectorPanel > .panelHeading,
  #category-heading .panelHeading,
  #type-heading .panelHeading {
    min-height: 21px;
    margin-bottom: 8px;
    padding: 0 15px 7px;
  }

  .playerPanel > .panelHeading > b,
  .selectorPanel > .panelHeading > b,
  #category-heading .panelHeading > b,
  #type-heading .panelHeading > b {
    display: none;
  }

  .selectorPanel > .panelHeading b,
  .selectorPanel > .panelHeading strong,
  #category-heading .panelHeading b,
  #category-heading .panelHeading strong,
  #type-heading .panelHeading b,
  #type-heading .panelHeading strong {
    font-size: 9px;
  }

  .selectorPanel > .panelHeading small,
  #category-heading .panelHeading small,
  #type-heading .panelHeading small {
    font-size: 7px;
  }

  .genreGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .selectorPanel .genreButton {
    min-height: 52px;
    padding: 18px 4px 6px;
  }

  .selectorPanel .genreButton strong {
    font-size: 9px;
  }

  html:not([lang="en"]) .selectorPanel .genreButton small {
    font-size: 8px;
  }

  #category-heading,
  #type-heading {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #111519;
    box-shadow: inset 0 1px #ffffff09;
  }

  #category-heading .panelHeading,
  #type-heading .panelHeading {
    margin-top: 0;
    margin-bottom: 10px;
    padding-bottom: 7px;
    border-bottom: 1px solid #111519;
    box-shadow: inset 0 -1px #ffffff08;
  }

  .selectorPanel .threeButtonRow {
    gap: 6px;
  }

  .selectorPanel .categoryButton {
    min-height: 51px;
    padding: 18px 5px 6px;
  }

  .selectorPanel .selectionReadout {
    display: none;
  }
}

@media (max-width: 380px) {
  .topDeck {
    gap: 6px;
  }

  .compactButton {
    padding-inline: 1px;
  }

  .compactButton strong {
    font-size: 7px;
  }

  .playerPanel {
    padding-inline: 10px;
  }

  .frequencyTitle .frequencyTitleText {
    font-size: clamp(17px, 6vw, 22px);
  }

  .mobileInfoToggles { margin-inline: 0; }
}

/* 20260817k · every modal panel is centered by the fixed viewport itself. */
#modal-root {
  position: static;
}

#modal-root .installDialogBackdrop {
  inset: 0;
  width: auto;
  height: auto;
  max-width: none;
  box-sizing: border-box;
  overflow: auto;
  padding: 20px 0;
}

.communityLoginDialog,
.communityAccountDialog {
  position: relative;
  box-sizing: border-box;
  width: min(548px, calc(100% - 28px));
  margin-inline: auto;
  justify-self: center;
  padding: 38px 38px 28px;
}

#modal-root .appDownloadDialog {
  width: min(760px, calc(100% - 28px));
  margin-inline: auto;
  justify-self: center;
}

#modal-root .appDownloadDialog.singlePlatform {
  width: min(440px, calc(100% - 28px));
}

.communityLoginDialog .providerGrid {
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-bottom: 14px;
}

.communityLoginDialog .providerButton {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 56px;
  padding: 9px 14px;
  color: #f4fbff;
  font-family: var(--mono);
}

.communityLoginDialog .providerButton[data-provider="apple"] {
  color: #fff;
  box-shadow: 0 4px #0b0d0f, inset 3px 0 #f4fbff;
}

.communityLoginDialog .providerButton[data-provider="google"] {
  box-shadow: 0 4px #0b0d0f, inset 3px 0 #4285f4;
}

.communityLoginDialog .providerButton[data-provider-style="naver"] {
  box-shadow: 0 4px #0b0d0f, inset 3px 0 #03c75a;
}

.communityLoginDialog .providerButton[data-provider="kakao"] {
  box-shadow: 0 4px #0b0d0f, inset 3px 0 #fee500;
}

.communityLoginDialog .providerButton[aria-disabled="true"] {
  color: #9ca6ad;
}

.communityLoginDialog .providerButton > span {
  position: absolute;
  left: 50%;
  top: 50%;
  max-width: calc(100% - 144px);
  overflow: hidden;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.communityLoginDialog .providerButton small {
  position: absolute;
  right: 14px;
  top: 50%;
  color: #ffd978;
  font-size: 7px;
  letter-spacing: .08em;
  white-space: nowrap;
  transform: translateY(-50%);
}

.providerIcon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 22px;
  height: 22px;
}

.accountLegalLinks {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 14px;
  margin: 8px 0;
}

.accountLegalLinks a,
.loginSupportEmail {
  color: #9fdff2;
  font-family: var(--mono);
  font-size: 8px;
  letter-spacing: .04em;
}

.loginSupportEmail {
  display: block;
  margin: 0 0 16px;
  text-align: center;
}

.accountActionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}

.accountIdentityCard {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 7px 12px;
  margin: 4px 0 12px;
  padding: 14px;
  border: 1px solid #40515a;
  border-left: 3px solid #55d0ef;
  border-radius: 3px;
  background: linear-gradient(135deg, #111b20, #080c0e);
  box-shadow: inset 0 0 18px #0008;
}

.accountIdentityCard small {
  grid-column: 1 / -1;
  color: #65d5f2;
  font: 700 7px/1 var(--mono);
  letter-spacing: .18em;
}

.accountIdentityCard strong {
  min-width: 0;
  overflow: hidden;
  color: #eefaff;
  font: 700 16px/1.2 var(--mono);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountProviderLine {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 16px;
  color: #71858f;
  font: 400 8px/1.4 var(--mono);
}

.accountProviderLine b {
  color: #b8c8cf;
  letter-spacing: .1em;
}

.accountProviderLine span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.accountActionGrid .dangerAction {
  color: #ffc2c2;
  box-shadow: 0 4px #0b0d0f, inset 3px 0 #d75f5f;
}

@media (max-width: 440px) {
  .communityLoginDialog,
  .communityAccountDialog {
    padding: 34px 18px 24px;
  }

  .communityLoginDialog .providerGrid,
  .accountActionGrid {
    gap: 8px;
  }

  .communityLoginDialog .providerButton {
    padding-inline: 9px;
  }

  .communityLoginDialog .providerButton > span {
    max-width: calc(100% - 124px);
  }

  .communityLoginDialog .providerButton small {
    right: 9px;
  }
}

@media (max-width: 660px) {
  #modal-root .appDownloadDialog,
  #modal-root .appDownloadDialog.singlePlatform {
    width: min(440px, calc(100% - 20px));
  }
}

/* 20260817o · One store-button geometry and one center axis across PC, iPad, iPhone, and Android. */
#modal-root .appDownloadDialog .storeBadgeButton {
  box-sizing: border-box;
  width: 100%;
  height: 74px;
  min-width: 0;
  min-height: 74px;
  max-height: 74px;
  padding: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: #343b42;
  border: 2px solid #0b0d0f;
  border-color: #59636c #0b0d0f #0b0d0f #59636c;
  border-radius: 5px;
  box-shadow: 0 4px #0b0d0f;
}

#modal-root .appDownloadDialog .storeBadgeButton img {
  display: block;
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

#modal-root .appDownloadDialog .appDownloadChoice.apple {
  border-left-color: #f4fbff !important;
}

#modal-root .appDownloadDialog .appDownloadChoice.android {
  border-left-color: #4285f4 !important;
}

@media (max-width: 660px) {
  #modal-root .installDialogBackdrop {
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    min-height: 100dvh;
    padding: max(12px, env(safe-area-inset-top)) 0 max(12px, env(safe-area-inset-bottom));
  }

  #modal-root .appDownloadDialog.singlePlatform {
    box-sizing: border-box;
    width: min(440px, calc(100% - 24px));
    max-width: 440px;
    margin-right: auto;
    margin-left: auto;
    padding-right: clamp(16px, 5vw, 22px);
    padding-left: clamp(16px, 5vw, 22px);
    justify-self: center;
    left: auto;
    right: auto;
    transform: none;
  }

  #modal-root .appDownloadDialog.singlePlatform .appDownloadGrid {
    box-sizing: border-box;
    width: 100%;
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
    gap: 0;
  }

  #modal-root .appDownloadDialog.singlePlatform .appDownloadChoice {
    box-sizing: border-box;
    width: 100%;
    min-width: 0;
    max-width: none;
    margin: 0;
    justify-self: stretch;
  }

  #modal-root .appDownloadDialog.singlePlatform .appDownloadChoice.apple {
    border-left: 3px solid #f4fbff !important;
  }

  #modal-root .appDownloadDialog.singlePlatform .appDownloadChoice.android {
    border-left: 3px solid #4285f4 !important;
  }

  #modal-root .appDownloadDialog.singlePlatform .storeBadgeButton,
  #modal-root .appDownloadDialog.singlePlatform .appDownloadStatus,
  #modal-root .appDownloadDialog.singlePlatform .storeTrademarkNotice {
    box-sizing: border-box;
    width: 100%;
    margin-right: auto !important;
    margin-left: auto !important;
    text-align: center;
  }

  #modal-root .appDownloadDialog.singlePlatform .storeQrButton,
  #modal-root .appDownloadDialog.singlePlatform .storeQrPending,
  #modal-root .appDownloadDialog.singlePlatform .appDownloadClose {
    margin-right: auto;
    margin-left: auto;
  }
}

/* 20260822e · TITLE WINDOW-style SPACE GUIDE: black window + cobalt moving text band */
.selectorPanel {
  container-type: inline-size;
}

.spaceGuideInline {
  display: none;
}

.spaceGuideStrip {
  box-sizing: border-box;
  min-height: 62px;
  margin-top: 10px;
  padding: 7px;
  display: flex;
  align-items: center;
  overflow: hidden;
  color: #f7f9ff;
  background: radial-gradient(circle at 50% 30%, #58dbff06, transparent 58%), #050809;
  border: 2px solid #42484f;
  border-color: #080a0b #41464c #41464c #080a0b;
  border-radius: 5px;
  box-shadow: inset 0 0 24px #000;
  font-family: var(--mono);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .035em;
  line-height: 1.35;
}

.spaceGuideTextBand {
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  padding: 8px 10px;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 5px 12px;
  overflow: hidden;
  color: #f7f9ff;
  background: linear-gradient(90deg, #0c3fa8, #0a328d);
  border-radius: 0;
  box-shadow: inset 0 1px #397bff99, inset 0 -1px #051d59;
  text-shadow: 0 1px 1px #020b22;
}

.spaceGuideLabel {
  flex: 0 0 auto;
  color: #f7f9ff;
  font-size: 12px;
  letter-spacing: .1em;
  text-shadow: 0 1px 1px #020b22;
  white-space: nowrap;
}

.spaceGuideExamplesViewport {
  min-width: 0;
  flex: 1 1 0;
  display: block;
  overflow: hidden;
}

.spaceGuideExamples {
  width: max-content;
  max-width: none;
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 3px 10px;
  font-size: 14px;
  transform: translateX(0);
  will-change: transform;
}

.spaceGuideExamples.spaceGuideMarqueeActive {
  animation: spaceGuideMarquee var(--space-guide-duration, 9.5s) ease-in-out infinite alternate;
}

.spaceGuideExamples > span {
  color: #f7f9ff;
  text-shadow: 0 1px 1px #020b22;
  white-space: nowrap;
}

.spaceGuideExamples > span + span::before {
  content: "·";
  margin-right: 10px;
  color: #72ddff;
}

@keyframes spaceGuideMarquee {
  0%, 15% { transform: translateX(0); }
  85%, 100% { transform: translateX(var(--space-guide-shift)); }
}

.selectorPanel .momentRow {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.selectorPanel .unavailableMoment {
  cursor: not-allowed;
  opacity: .58;
  transform: none;
}

.selectorPanel .unavailableMoment .buttonLamp {
  border-color: #1c2227;
  background: #080a0c;
  box-shadow: inset 0 1px 2px #000;
}

.selectorMessage {
  box-sizing: border-box;
  min-height: 30px;
  margin-top: 8px;
  padding: 8px 10px;
  color: #d4bd7d;
  background: #111519;
  border-left: 2px solid #d4bd7d;
  font-family: var(--mono);
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .08em;
  line-height: 1.35;
}

.selectorMessage[hidden] {
  display: none;
}

.selectorPanel .genreLamp.genreLampOn {
  border-color: #9bdcff;
  background: #397bff;
  box-shadow: 0 0 4px #397bff, 0 0 11px #00d9ff8f, inset 0 0 2px #fff;
}

.selectorPanel .categoryLamp.categoryLampOn {
  border-color: #fff;
  background: #f4fbff;
  box-shadow: 0 0 4px #fff, 0 0 10px #e2f0fac2, inset 0 0 2px #fff;
}

.selectorPanel .typeLamp.activeLamp {
  border-color: #a7ffd8;
  background: #37e39f;
  box-shadow: 0 0 4px #37e39f, 0 0 11px #37e39fa6, inset 0 0 2px #fff;
}

@media (min-width: 1200px) and (hover: hover) and (pointer: fine) {
  @container (min-width: 500px) {
    #genre-heading {
      min-width: 0;
    }

    #genre-heading > div {
      flex: 0 0 auto;
    }

    .spaceGuideInline {
      box-sizing: border-box;
      min-width: 0;
      min-height: 48px;
      max-width: calc(100% - 92px);
      flex: 1 1 0;
      margin-left: auto;
      padding: 4px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
      overflow: hidden;
      color: #f7f9ff;
      background: radial-gradient(circle at 50% 30%, #58dbff06, transparent 58%), #050809;
      border: 1px solid #41464c;
      border-color: #080a0b #41464c #41464c #080a0b;
      border-radius: 5px;
      box-shadow: inset 0 0 24px #000;
      font-family: var(--mono);
      font-size: 14px;
      font-weight: 800;
      letter-spacing: .025em;
      line-height: 1.25;
    }

    .spaceGuideInline .spaceGuideTextBand {
      padding: 7px 9px;
    }

    .spaceGuideInline .spaceGuideExamples {
      flex-wrap: nowrap;
    }

    .spaceGuideStrip {
      display: none;
    }
  }
}

@media (max-width: 900px) {
  .consoleGrid > .playerPanel {
    order: 1;
  }

  .consoleGrid > .selectorPanel {
    order: 2;
  }
}

/* 20260907a · Final SPACE names: selected language is primary, English is secondary. */
.selectorPanel .genreButton strong {
  min-height: 2.2em;
  display: grid;
  place-items: center;
  overflow: visible;
  font-size: clamp(10px, .92vw, 13px);
  line-height: 1.1;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.selectorPanel .genreButton small {
  min-height: 1.15em;
  display: block;
  visibility: visible;
  overflow: visible;
  color: #9ca9b0;
  font-size: clamp(7px, .62vw, 9px);
  font-weight: 700;
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] .selectorPanel .genreButton small,
.selectorPanel .genreButton small:empty {
  display: none;
}

html:not([lang="en"]) .selectorPanel .genreButton strong {
  display: grid;
  color: inherit;
  font-weight: 800;
}

html:not([lang="en"]) .selectorPanel .genreButton small {
  display: block;
  color: #9ca9b0;
  font-weight: 700;
}

.selectorPanel .hardwareButton.selected.genreButton small {
  color: #d5dde1;
}

@media (min-width: 661px) and (max-width: 1199px) {
  .spaceGuideStrip .spaceGuideExamples > span:nth-child(n + 4) {
    display: inline;
  }
}

@media (max-width: 660px) {
  .selectorPanel .genreButton {
    min-height: 68px;
    padding: 20px 5px 6px;
  }

  .selectorPanel .genreButton strong,
  html:not([lang="en"]) .selectorPanel .genreButton strong {
    min-height: 2.2em;
    display: grid;
    font-size: clamp(9px, 2.75vw, 11px);
    line-height: 1.1;
  }

  .selectorPanel .genreButton small,
  html:not([lang="en"]) .selectorPanel .genreButton small {
    min-height: 0;
    margin-top: 3px;
    display: block;
    font-size: clamp(6px, 1.75vw, 7px);
    line-height: 1.1;
  }

  html[lang="en"] .selectorPanel .genreButton small,
  .selectorPanel .genreButton small:empty {
    display: none;
  }
}


@media (max-width: 660px) {
  .spaceGuideStrip {
    min-height: 78px;
    margin-top: 7px;
    padding: 6px;
    align-items: center;
    font-size: 14px;
    line-height: 1.4;
  }

  .spaceGuideStrip .spaceGuideTextBand {
    padding: 8px 9px;
    flex-wrap: wrap;
    gap: 5px 8px;
  }

  .spaceGuideLabel {
    flex-basis: 100%;
    padding-top: 0;
    font-size: 12px;
  }

  .spaceGuideExamples {
    max-height: none;
    gap: 2px 8px;
    font-size: 14px;
  }

  .spaceGuideExamples > span + span::before {
    margin-right: 8px;
  }

  .spaceGuideExamples > span:nth-child(n + 4) {
    display: none;
  }

  .selectorPanel .momentRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 6px;
  }

  .selectorPanel .momentRow .categoryButton {
    min-height: 49px;
    padding-inline: 2px;
  }

  .selectorPanel .momentRow .categoryButton strong,
  .selectorPanel .momentRow .categoryButton small {
    max-width: 100%;
    font-size: 8px;
    letter-spacing: 0;
  }

  .selectorMessage {
    min-height: 28px;
    margin-top: 6px;
    padding: 7px 8px;
    font-size: 7px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spaceGuideExamples.spaceGuideMarqueeActive {
    animation: none;
    transform: translateX(0);
  }
}

/* 20260903a · Community board and composition-safe Korean text entry. */
:root {
  --community-sans: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.storyAssembly.storyBoardEnabled,
.storyAssembly.communityEnabled.storyBoardEnabled {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
}

.storyBoardPanel {
  box-sizing: border-box;
  min-height: 0;
  height: auto;
  padding: 0;
  display: block;
  overflow: hidden;
  border-top: 0;
  background: #06090a;
}

.storyBoard,
.storyPostDialog {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  color: #b9c5cc;
  font-family: var(--mono);
}

.boardNoticeSection {
  padding: 8px 9px;
  border-bottom: 1px solid #2d3940;
  background: linear-gradient(180deg, #10171b, #090d0f);
  box-shadow: inset 0 -8px 18px #0008;
}

.boardNoticeSection > header,
.boardFeedSection > header,
.boardPostCard > header,
.boardCommentRow > header,
.storyPostDialogHeader,
.storyPostDialogHeader > div > p,
.boardItemActions,
.nicknameMeta {
  display: flex;
  align-items: center;
}

.boardNoticeSection > header,
.boardFeedSection > header,
.boardPostCard > header,
.boardCommentRow > header,
.storyPostDialogHeader {
  justify-content: space-between;
  gap: 8px;
}

.boardNoticeSection > header > div,
.boardFeedSection > header > div {
  display: flex;
  align-items: center;
  gap: 7px;
}

.boardNoticeSection > header strong,
.boardFeedSection > header strong {
  color: #eff8fc;
  font-size: 11px;
  letter-spacing: .11em;
}

.boardNoticeSection > header span:not(.crewRoleBadge) {
  color: #7f939f;
  font-size: 7px;
}

.boardNoticeSection > header button,
.boardItemActions button,
.boardJoinButton,
.boardComposer button,
.boardCommentComposer button,
.storyNoticeDialog > button,
.storyPostDialog > button,
.communityNicknameDialog button {
  min-height: 28px;
  padding: 5px 9px;
  border: 1px solid #48565e;
  border-radius: 3px;
  color: #d8e6ed;
  background: linear-gradient(#30383e, #1c2226);
  box-shadow: 0 2px #030506;
  font: 700 7px/1 var(--mono);
  letter-spacing: .06em;
  cursor: pointer;
}

.boardNoticeSection > header button:disabled {
  border-color: #2d363b;
  color: #66747b;
  background: #171c1f;
  box-shadow: none;
  cursor: not-allowed;
}

.boardNoticeList {
  margin-top: 6px;
  display: grid;
  gap: 4px;
}

.boardNoticeRow {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px;
  border-left: 2px solid #ffd66b;
  background: #11171a;
}

.boardNoticeRow > button {
  min-width: 0;
  padding: 6px 7px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.noticeEmptyCell {
  min-width: 0;
  padding: 6px 7px;
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  align-items: center;
  gap: 7px;
}

.noticeSlotNumber {
  color: #80744f;
  font-size: 6px;
  letter-spacing: .08em;
}

.boardNoticeEmpty {
  border-left-color: #4c4633;
  background: #0c1012;
}

.boardNoticeEmpty p {
  color: #5f6d73;
}

.boardNoticeRow p {
  margin: 0;
  overflow: hidden;
  color: #e3e9ec;
  font-family: var(--community-sans);
  font-size: 13px;
  line-height: 1.45;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.crewRoleBadge,
.reportedBadge {
  display: inline-flex;
  align-items: center;
  min-height: 15px;
  padding: 1px 5px;
  border: 1px solid #40515a;
  border-radius: 2px;
  color: #98cfe2;
  background: #111a1f;
  font-size: 6px;
  line-height: 1;
  letter-spacing: .08em;
  white-space: nowrap;
}

.crewRoleBadge.adminBadge {
  border-color: #56c7a0;
  color: #7ff0c0;
  background: #0e211b;
}

.crewRoleBadge.noticeBadge {
  border-color: #b99b4a;
  color: #ffe28a;
  background: #27200d;
}

.reportedBadge {
  border-color: #b45353;
  color: #ffb2b2;
  background: #291313;
}

.boardFeedSection {
  min-height: 0;
  padding: 8px 9px 9px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr);
  gap: 7px;
}

.boardSearchForm {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 6px;
}

.boardSearchForm input {
  min-width: 0;
  min-height: 38px;
  padding: 8px 10px;
  border: 1px solid #394850;
  border-radius: 3px;
  outline: 0;
  color: #e3eef3;
  background: #050809;
  box-shadow: inset 0 0 12px #000;
  font: 400 16px/1.4 var(--community-sans);
}

.boardSearchForm input:focus {
  border-color: #5bc7eb;
  box-shadow: inset 0 0 12px #000, 0 0 8px #35c7ee33;
}

.boardSearchForm button {
  min-height: 38px;
  padding: 7px 10px;
  border: 1px solid #48565e;
  border-radius: 3px;
  color: #d8e6ed;
  background: linear-gradient(#30383e, #1c2226);
  box-shadow: 0 2px #030506;
  font: 700 10px/1 var(--mono);
  cursor: pointer;
}

.boardSearchForm .clearSearchButton {
  color: #9fe9ff;
}

.boardComposer,
.boardCommentComposer,
.communityNicknameDialog form {
  display: grid;
  gap: 5px;
}

.boardComposer textarea,
.boardCommentComposer textarea,
.communityNicknameDialog input {
  box-sizing: border-box;
  width: 100%;
  border: 1px solid #394850;
  border-radius: 3px;
  outline: 0;
  color: #e3eef3;
  background: #050809;
  box-shadow: inset 0 0 12px #000;
  font: 400 16px/1.55 var(--community-sans, var(--sans));
}

.boardComposer textarea,
.boardCommentComposer textarea {
  min-height: 70px;
  padding: 10px 11px;
  resize: vertical;
}

.boardComposer textarea:focus,
.boardCommentComposer textarea:focus,
.communityNicknameDialog input:focus {
  border-color: #5bc7eb;
  box-shadow: inset 0 0 12px #000, 0 0 8px #35c7ee33;
}

.boardComposer > div,
.boardCommentComposer > div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 7px;
}

.boardComposer span,
.boardCommentComposer span,
.nicknameMeta {
  color: #748790;
  font-size: 7px;
}

.boardJoinButton {
  width: 100%;
  min-height: 36px;
  color: #9fe9ff;
  box-shadow: 0 2px #030506, inset 3px 0 #42c8ee;
}

.boardPostList,
.storyCommentList {
  min-height: 0;
  overflow: auto;
  scrollbar-color: #5d6d75 #080b0d;
  scrollbar-width: thin;
}

.boardPostList {
  display: grid;
  align-content: start;
  gap: 6px;
}

.boardPostList.boardPostListScrollable {
  height: var(--board-posts-viewport-height);
  max-height: var(--board-posts-viewport-height);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.boardPostCard {
  padding: 7px 8px;
  border: 1px solid #252f34;
  border-left: 2px solid #54798a;
  border-radius: 2px;
  background: linear-gradient(110deg, #101619, #090c0e);
}

.boardPostCard.ownPost {
  border-left-color: #61e4b0;
  background: linear-gradient(110deg, #10201b, #090d0e);
}

.boardPostCard > header > div {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.boardPostCard header strong,
.boardCommentRow header strong {
  overflow: hidden;
  color: #dff6ff;
  font-family: var(--community-sans);
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.boardPostCard time,
.boardCommentRow time,
.storyPostDialog time {
  color: #71848d;
  font-size: 10px;
  white-space: nowrap;
}

.boardPostOpen {
  width: 100%;
  padding: 5px 0;
  display: block;
  border: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.boardPostOpen p,
.boardCommentRow p,
.storyPostDialogBody {
  margin: 0;
  color: #c4cfd4;
  font-family: var(--community-sans);
  font-size: 14px;
  line-height: 1.65;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.boardPostOpen p {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

.boardPostOpen > span {
  display: block;
  margin-top: 5px;
  color: #73bed7;
  font-size: 10px;
}

.boardItemActions {
  justify-content: flex-end;
  gap: 5px;
  margin-top: 3px;
}

.boardItemActions.compactActions {
  margin: 0 5px 0 0;
}

.boardItemActions button {
  min-height: 22px;
  padding: 4px 6px;
  color: #9fb0b8;
  font-size: 6px;
}

.boardItemActions .heartButton {
  min-width: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  border-color: #704953;
  color: #f1bbc7;
  font-family: var(--community-sans);
  font-size: 12px;
}

.boardItemActions .heartButton span {
  font-size: 16px;
  line-height: 1;
}

.boardItemActions .heartButton b {
  font-size: 10px;
}

.boardItemActions .heartButton.heartSelected {
  border-color: #dc6e86;
  color: #ff8eaa;
  background: linear-gradient(#4a2630, #251318);
  box-shadow: 0 2px #030506, 0 0 8px #ff6d8f2e;
}

.boardEmptyState {
  margin: 8px 0;
  color: #71838c;
  font-size: 7px;
  line-height: 1.45;
  text-align: center;
}

.storyBoard .communityMessage {
  min-height: 12px;
  margin: 0;
  padding: 2px 9px 5px;
  color: #ffd278;
  font-size: 6px;
}

.communityNicknameDialog,
.storyNoticeDialog {
  position: relative;
  box-sizing: border-box;
  width: min(520px, calc(100% - 28px));
  margin-inline: auto;
  justify-self: center;
  padding: 38px 38px 28px;
}

.communityNicknameDialog input {
  min-height: 44px;
  padding: 9px 11px;
  font-family: var(--community-sans, var(--sans));
  font-size: 16px;
  letter-spacing: .05em;
}

.nicknameMeta {
  min-height: 18px;
  justify-content: space-between;
  gap: 8px;
}

#nickname-error {
  color: #ffd278;
  text-align: right;
}

/* Login completion · Google/Naver/Kakao names stay private; CREW uses this nickname only. */
.communityNicknameDialog {
  overflow: hidden;
  border-color: #192126 #53636b #53636b #192126;
  background:
    radial-gradient(circle at 82% 18%, #42c8ee1c, transparent 34%),
    linear-gradient(145deg, #171e22, #080b0d 72%);
}

.communityNicknameDialog::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #fff 4px 4px);
  opacity: .012;
}

.nicknameEyebrow {
  margin: 0 0 7px;
  color: #63d7f6;
  font: 700 7px/1 var(--mono);
  letter-spacing: .22em;
}

.communityNicknameDialog h2 {
  margin-bottom: 10px;
}

.nicknameIntro {
  max-width: 420px;
  margin: 0 0 20px;
  color: #aab9c1;
  font-family: var(--community-sans, var(--sans));
  font-size: 14px;
  line-height: 1.65;
}

.nicknameField {
  display: grid;
  gap: 7px;
  color: #8fa4ae;
  font: 700 7px/1 var(--mono);
  letter-spacing: .1em;
}

.nicknameInputShell {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  min-height: 48px;
  padding-left: 12px;
  border: 1px solid #40525b;
  border-radius: 4px;
  background: #030607;
  box-shadow: inset 0 0 16px #000, 0 0 0 1px #000;
}

.nicknameInputShell:focus-within {
  border-color: #63d7f6;
  box-shadow: inset 0 0 16px #000, 0 0 12px #35c7ee38;
}

.nicknameInputShell b {
  color: #63d7f6;
  font: 700 13px/1 var(--mono);
}

.communityNicknameDialog .nicknameInputShell input {
  min-height: 46px;
  padding: 9px 11px 9px 5px;
  border: 0;
  background: transparent;
  box-shadow: none;
}

.communityNicknameDialog .nicknameInputShell input:focus {
  border: 0;
  box-shadow: none;
}

.nicknameRule {
  margin: 0 0 8px;
  color: #748790;
  font-family: var(--community-sans, var(--sans));
  font-size: 12px;
  line-height: 1.55;
}

.communityNicknameDialog .nicknameSubmitButton {
  min-height: 42px;
  color: #081014;
  background: linear-gradient(#8be8ff, #49c7e8);
  border-color: #a6efff #2489a4 #2489a4 #a6efff;
  box-shadow: 0 3px #071014, inset 0 1px #e8fbff;
  font-size: 8px;
}

.communityNicknameDialog .nicknameSubmitButton:disabled {
  color: #6e7c82;
  background: #242d31;
  border-color: #313c41;
  box-shadow: none;
}

.communityNicknameDialog .nicknameExitButton {
  color: #8b9ba3;
  background: transparent;
  box-shadow: none;
}

.accountActionGrid.threeActions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.storyPostDialog {
  position: relative;
  box-sizing: border-box;
  width: min(680px, calc(100% - 28px));
  max-height: min(88dvh, 760px);
  margin-inline: auto;
  justify-self: center;
  padding: 34px 30px 24px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  gap: 12px;
  overflow: hidden;
}

.storyPostDialogHeader {
  align-items: flex-start;
}

.storyPostDialogHeader h2 {
  margin-bottom: 5px;
}

.storyPostDialogHeader > div > p {
  margin: 0;
  flex-wrap: wrap;
  gap: 6px;
}

.storyPostDialogBody {
  max-height: 140px;
  overflow: auto;
  padding: 10px;
  border: 1px solid #2c373d;
  background: #070a0b;
  font-size: 15px;
}

.storyCommentSection {
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: 7px;
}

.storyCommentSection h3 {
  margin: 0;
  color: #cfdae0;
  font: 700 11px/1 var(--mono);
  letter-spacing: .08em;
}

.storyCommentList {
  display: grid;
  align-content: start;
  gap: 6px;
}

.boardCommentRow {
  padding: 7px 8px;
  border-left: 2px solid #3f6d7f;
  background: #0b1012;
}

.boardCommentRow p {
  margin-top: 5px;
}

@media (min-width: 901px) {
  .storyAssembly.communityEnabled.storyBoardEnabled {
    grid-template-rows: auto minmax(0, 1fr);
  }

  .storyBoardPanel {
    max-height: none;
  }
}

@media (max-width: 660px) {
  .mobileInfoToggles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .informationGrid[data-mobile-panel="story"] .communityPanel.storyBoardPanel {
    display: block !important;
    height: min(62dvh, 520px);
    max-height: 520px;
    border: 2px solid #41464c;
    border-color: #080a0b #41464c #41464c #080a0b;
    border-radius: 4px;
  }

  .informationGrid[data-mobile-panel="story"] .storyAssembly {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .communityLoginDialog,
  .communityAccountDialog,
  .communityNicknameDialog,
  .storyNoticeDialog {
    padding: 34px 18px 24px;
  }

  .accountActionGrid.threeActions {
    grid-template-columns: minmax(0, 1fr);
  }

  .storyPostDialog {
    width: calc(100% - 18px);
    max-height: 92dvh;
    padding: 30px 15px 18px;
  }

  .boardSearchForm {
    grid-template-columns: minmax(0, 1fr) auto;
  }

  .boardSearchForm .clearSearchButton {
    grid-column: 1 / -1;
  }

  .boardSearchForm input,
  .boardSearchForm button {
    min-height: 44px;
  }

  .boardItemActions button {
    min-height: 36px;
    padding: 7px 9px;
    font-size: 10px;
  }

  .boardItemActions .heartButton {
    min-width: 58px;
  }

  .boardComposer textarea,
  .boardCommentComposer textarea,
  .communityNicknameDialog input {
    font-size: 16px;
  }

  .boardNoticeRow p,
  .boardPostOpen p,
  .boardCommentRow p {
    font-size: 15px;
  }

  .boardNoticeRow p {
    font-size: 14px;
  }
}

/* 20260903b · Mobile selector readability and comment-detail corrections. */
@media (max-width: 660px) {
  html[lang="en"] .selectorPanel .genreButton strong,
  html[lang="en"] .selectorPanel .categoryButton strong,
  html:not([lang="en"]) .selectorPanel .genreButton small,
  html:not([lang="en"]) .selectorPanel .categoryButton small,
  .selectorPanel .momentRow .categoryButton strong,
  .selectorPanel .momentRow .categoryButton small {
    max-width: 100%;
    overflow: hidden;
    font-size: 11px;
    line-height: 1.15;
    letter-spacing: 0;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  html[lang="en"] .selectorPanel .genreButton strong,
  html:not([lang="en"]) .selectorPanel .genreButton small {
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}

.storyPostDialog,
.storyPostDialogHeader,
.storyPostDialogHeader > div,
.storyPostDialogHeader > div > p,
.storyPostDialogBody,
.storyCommentSection,
.storyCommentSection h3,
.storyCommentList,
.boardCommentRow,
.boardCommentRow > header,
.boardCommentRow > header strong,
.boardCommentRow > header time,
.boardCommentRow > p,
.storyPostDialog .boardItemActions {
  text-align: left;
}

.storyPostDialog {
  height: auto;
  max-height: min(88dvh, 760px);
  grid-template-rows: auto auto auto auto;
  align-content: start;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.storyCommentSection {
  min-height: auto;
  grid-template-rows: auto auto auto;
}

.storyCommentList {
  min-height: 0;
  max-height: min(38dvh, 340px);
  overflow-x: hidden;
  overflow-y: auto;
}

.boardCommentRow {
  min-height: 0;
}

.boardCommentRow > header {
  align-items: baseline;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 5px 9px;
}

.storyPostDialog .boardItemActions {
  justify-content: flex-start;
  flex-wrap: wrap;
}

.boardItemActions .reactionButton {
  min-width: 54px;
  min-height: 30px;
  padding: 5px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--community-sans);
  font-size: 12px;
}

.boardItemActions .reactionButton span {
  font-size: 16px;
  line-height: 1;
}

.boardItemActions .reactionButton b {
  font-size: 11px;
}

.boardItemActions .likeButton {
  border-color: #496774;
  color: #a9d9ea;
}

.boardItemActions .likeButton.reactionSelected {
  border-color: #62c9eb;
  color: #bceeff;
  background: linear-gradient(#24424d, #13242a);
  box-shadow: 0 2px #030506, 0 0 8px #54d4ff2e;
}

.boardItemActions .heartButton.reactionSelected {
  border-color: #dc6e86;
  color: #ff8eaa;
  background: linear-gradient(#4a2630, #251318);
  box-shadow: 0 2px #030506, 0 0 8px #ff6d8f2e;
}

.boardComposer button,
.boardCommentComposer button,
.storyNoticeDialog > button,
.storyPostDialog > button {
  font-size: 13px;
}

.boardItemActions [data-community-action="report-post"],
.boardItemActions [data-community-action="report-comment"],
.boardItemActions [data-community-action="delete-post"],
.boardItemActions [data-community-action="delete-comment"] {
  font-size: 11px;
}

@media (max-width: 660px) {
  .storyPostDialog {
    width: calc(100% - 18px);
    height: auto;
    max-height: calc(100dvh - 16px);
    padding: 30px 15px 18px;
  }

  .storyPostDialogHeader {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .storyPostDialogHeader > .boardItemActions {
    width: 100%;
    margin-left: 0;
  }

  .storyCommentList {
    max-height: min(30dvh, 280px);
  }

  .boardComposer button,
  .boardCommentComposer button,
  .storyNoticeDialog > button,
  .storyPostDialog > button,
  .storyPostDialog .boardItemActions button {
    min-height: 44px;
  }

  .boardComposer button,
  .boardCommentComposer button,
  .storyNoticeDialog > button,
  .storyPostDialog > button {
    font-size: 14px;
  }

  .boardItemActions [data-community-action="report-post"],
  .boardItemActions [data-community-action="report-comment"],
  .boardItemActions [data-community-action="delete-post"],
  .boardItemActions [data-community-action="delete-comment"] {
    font-size: 12px;
  }

  .boardItemActions .reactionButton {
    min-width: 62px;
    min-height: 44px;
    padding: 8px 10px;
  }
}

/* 20260903c · Unified smartphone menu typography and three-row board view. */
@media (max-width: 660px) {
  .compactButton strong,
  .compactButton small,
  .mobileInfoToggle strong {
    max-width: 100%;
    overflow: visible;
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: 0;
    text-overflow: clip;
    white-space: normal;
    overflow-wrap: anywhere;
    transform: none;
  }

  .compactButton strong,
  .mobileInfoToggle strong {
    color: inherit;
  }

  .compactButton small {
    color: #777f88;
  }

  .compactButton {
    padding: 15px 2px 3px;
  }

  .compactButton small {
    margin-top: 1px;
  }

  .mobileInfoToggle {
    min-height: 52px;
    height: auto;
    padding: 18px 3px 6px;
  }

  html:not([lang="en"]) .selectorPanel .genreButton small,
  html:not([lang="en"]) .selectorPanel .categoryButton small {
    color: inherit;
    font-weight: 700;
    text-shadow: inherit;
  }

  html:not([lang="en"]) .selectorPanel .hardwareButton.selected small {
    color: #f4f7f9;
    text-shadow: none;
  }

  html[lang="ko"] .compactButton strong,
  html[lang="ko"] .compactButton small,
  html[lang="ko"] .mobileInfoToggle strong,
  html[lang="ko"] .selectorPanel .genreButton small,
  html[lang="ko"] .selectorPanel .categoryButton small,
  html[lang="ko"] .sessionReadout {
    font-family: var(--community-sans);
  }

  .sessionReadout small {
    font-size: 7.8px;
  }

  .sessionReadout strong {
    font-size: 10.4px;
  }

  .sessionKey {
    font-size: 11.7px;
  }

  .sessionKey.continuousKey {
    font-size: 23.4px;
  }

  .informationGrid[data-mobile-panel="story"] .communityPanel.storyBoardPanel {
    height: auto;
    max-height: none;
  }

  .informationGrid[data-mobile-panel="story"] .storyBoard {
    height: auto;
    grid-template-rows: auto auto auto;
  }

  .informationGrid[data-mobile-panel="story"] .boardFeedSection {
    grid-template-rows: auto auto auto;
  }

  .informationGrid[data-mobile-panel="story"] .boardPostList {
    max-height: 430px;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
}

/* 20260903g · Full-width two-line composer with a shared action-button column. */
.storyBoard,
.storyPostDialog {
  --board-action-width: 64px;
}

.boardPostComposer {
  grid-template-columns: minmax(0, 1fr) var(--board-action-width);
  align-items: center;
  column-gap: 6px;
  row-gap: 6px;
  margin-inline: 10px 9px;
}

.boardPostInputShell {
  grid-column: 1 / -1;
  min-width: 0;
  display: block;
}

.boardPostComposer textarea {
  box-sizing: border-box;
  width: 100%;
  height: 76px;
  min-height: 76px;
  padding: 9px 10px;
  border: 1px solid #394850;
  border-radius: 3px;
  outline: 0;
  resize: none;
  overflow-y: auto;
  color: #e3eef3;
  background: #050809;
  box-shadow: inset 0 0 12px #000;
  font: 400 16px/1.45 var(--community-sans);
}

.boardPostComposer textarea:focus {
  border-color: #5bc7eb;
  box-shadow: inset 0 0 12px #000, 0 0 8px #35c7ee33;
}

.boardPostComposer > #story-post-counter {
  grid-column: 1;
  grid-row: 2;
  justify-self: start;
  margin: 0;
  pointer-events: none;
}

.boardPostComposer > button[type="submit"] {
  grid-column: 2;
  grid-row: 2;
  justify-self: end;
  box-sizing: border-box;
  width: var(--board-action-width);
  min-width: var(--board-action-width);
  height: 30px;
  min-height: 30px;
  padding: 5px 4px;
  font: 700 11px/1 var(--mono);
  letter-spacing: 0;
}

.boardItemActions [data-community-action="report-post"],
.boardItemActions [data-community-action="report-comment"],
.boardItemActions [data-community-action="delete-post"],
.boardItemActions [data-community-action="delete-comment"] {
  box-sizing: border-box;
  width: var(--board-action-width);
  min-width: var(--board-action-width);
  height: 30px;
  min-height: 30px;
  padding: 5px 4px;
}

@media (max-width: 660px) {
  .storyAssembly .assemblyHeader > div > b {
    display: none;
  }

  .boardPostComposer textarea {
    height: 88px;
    min-height: 88px;
  }

  .boardPostComposer > button[type="submit"],
  .boardItemActions [data-community-action="report-post"],
  .boardItemActions [data-community-action="report-comment"],
  .boardItemActions [data-community-action="block-user"],
  .boardItemActions [data-community-action="delete-post"],
  .boardItemActions [data-community-action="delete-comment"] {
    height: 44px;
    min-height: 44px;
    font-size: 12px;
  }
}

/* 20260903h · Community safety controls and admin report queue. */
.frequencyTitle[data-action="current-playlist"] {
  box-sizing: border-box;
  width: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: inherit;
  background: transparent;
  text-align: left;
  cursor: pointer;
}

.frequencyTitle[data-action="current-playlist"]:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 2px;
}

.frequencyTitle[data-action="current-playlist"]:active {
  filter: brightness(1.12);
}

.boardAdminActions {
  margin-left: auto;
}

.boardAdminActions button,
.storySafetyDialog button {
  min-height: 30px;
  padding: 5px 9px;
  border: 1px solid #48565e;
  border-radius: 3px;
  color: #d8e6ed;
  background: linear-gradient(#30383e, #1c2226);
  box-shadow: 0 2px #030506;
  font: 700 11px/1 var(--mono);
  letter-spacing: .02em;
  cursor: pointer;
}

.boardAdminActions button {
  color: #ffb2b2;
  border-color: #8b4b4b;
}

.boardItemActions [data-community-action="report-post"],
.boardItemActions [data-community-action="report-comment"],
.boardItemActions [data-community-action="block-user"],
.boardItemActions [data-community-action="delete-post"],
.boardItemActions [data-community-action="delete-comment"],
.boardItemActions .reportedAction {
  box-sizing: border-box;
  width: var(--board-action-width);
  min-width: var(--board-action-width);
  height: 30px;
  min-height: 30px;
  padding: 5px 4px;
  font-size: 11px;
}

.boardItemActions .reportedAction:disabled {
  border-color: #6f5252;
  color: #d99a9a;
  background: #24191b;
  box-shadow: none;
  cursor: default;
}

.storySafetyDialog {
  position: relative;
  box-sizing: border-box;
  width: min(620px, calc(100% - 28px));
  max-height: min(88dvh, 760px);
  margin-inline: auto;
  padding: 38px 34px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  color: #c6d2d8;
  font-family: var(--mono);
  text-align: left;
}

.storySafetyDialog > h2 {
  margin: 0 0 10px;
  color: #9fe5f8;
  font: 700 18px/1.2 var(--mono);
  letter-spacing: .08em;
}

.storySafetyDialog > p {
  margin: 0 0 16px;
  color: #93a4ad;
  font: 400 13px/1.55 var(--community-sans);
}

.storySafetyDialog > button {
  width: 100%;
  margin-top: 14px;
}

.storyReportDialog form {
  display: grid;
  gap: 14px;
}

.reportReasonGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}

.reportReasonOption {
  position: relative;
  min-width: 0;
}

.reportReasonOption input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.reportReasonOption span {
  box-sizing: border-box;
  min-height: 40px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  border: 1px solid #394850;
  border-left: 3px solid #50646e;
  border-radius: 3px;
  color: #bac8cf;
  background: #0a0f11;
  font: 700 11px/1.25 var(--mono);
  cursor: pointer;
}

.reportReasonOption input:checked + span {
  border-color: #55c8e9;
  border-left-color: #55c8e9;
  color: #dff8ff;
  background: #11252c;
  box-shadow: 0 0 8px #4fd9ff35;
}

.blockedUsersList,
.adminReportList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.blockedUserRow {
  min-height: 48px;
  padding: 8px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-bottom: 1px solid #39434a;
}

.blockedUserRow strong {
  min-width: 0;
  overflow: hidden;
  color: #e4f2f7;
  font-size: 13px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.adminReportDialog {
  width: min(760px, calc(100% - 28px));
}

.adminReportList {
  display: grid;
  gap: 10px;
}

.adminReportCard {
  padding: 12px;
  border: 1px solid #3d4c54;
  border-left: 3px solid #c05f5f;
  border-radius: 3px;
  background: #080c0e;
}

.adminReportCard > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.adminReportCard > header strong {
  color: #ffb6b6;
  font-size: 11px;
}

.adminReportCard > header time,
.adminReportAuthor {
  color: #7f949e;
  font-size: 9px;
}

.adminReportAuthor,
.adminReportBody {
  margin: 8px 0;
}

.adminReportBody {
  padding: 10px;
  color: #e3ecef;
  background: #020405;
  font: 400 14px/1.5 var(--community-sans);
  overflow-wrap: anywhere;
}

.adminReportCard textarea {
  box-sizing: border-box;
  width: 100%;
  min-height: 60px;
  padding: 9px;
  resize: vertical;
  border: 1px solid #394850;
  border-radius: 3px;
  color: #dceaf0;
  background: #050809;
  font: 400 13px/1.45 var(--community-sans);
}

.adminReportActions {
  margin-top: 8px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.adminReportActions [data-moderation-action="content_deleted"] {
  border-color: #975454;
  color: #ffc1c1;
}

.adminReportActions [data-moderation-action="user_restricted"] {
  border-color: #a78345;
  color: #ffe0a0;
}

@media (max-width: 660px) {
  .boardFeedSection > header {
    align-items: center;
  }

  .boardAdminActions button,
  .storySafetyDialog button,
  .boardItemActions [data-community-action="report-post"],
  .boardItemActions [data-community-action="report-comment"],
  .boardItemActions [data-community-action="block-user"],
  .boardItemActions [data-community-action="delete-post"],
  .boardItemActions [data-community-action="delete-comment"],
  .boardItemActions .reportedAction {
    min-height: 44px;
    height: 44px;
    font-size: 12px;
  }

  .storySafetyDialog,
  .adminReportDialog {
    width: calc(100% - 18px);
    max-height: calc(100dvh - 16px);
    padding: 34px 15px 18px;
  }

  .reportReasonGrid {
    grid-template-columns: minmax(0, 1fr);
  }

  .reportReasonOption span {
    min-height: 44px;
    font-size: 12px;
  }

  .adminReportCard > header {
    align-items: flex-start;
    flex-direction: column;
    gap: 4px;
  }

  .adminReportActions {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* 20260904i · Finalized mobile panels, NEW indicators, and compact account actions. */
.communityAccountDialog .accountActionGrid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* 20260904n · Preserve the cockpit frame while refining current-store states. */
.headerAccountButton.signedIn,
.appDownloadButton.appActive {
  color: #f1f4f7;
  border-color: #14171a #4b535c #4b535c #14171a;
  background: #252a30;
  transform: translateY(3px);
  box-shadow: 0 2px #0b0d0f, inset 2px 2px 7px #000000a3, inset -1px -1px 1px #ffffff0e;
}

.appDownloadButton.appAvailable .appDownloadLamp {
  border-color: #b0ffdab8;
  background: var(--green);
  box-shadow: 0 0 5px var(--green), 0 0 12px #74f0b5a0, inset 0 0 2px #fff;
}

.mobileStoreBar {
  display: none;
}

.storeDisplayCell {
  position: relative;
  padding-right: 38px;
  padding-left: 16px;
  border-top: 0;
  border-bottom: 0;
  border-left: 0;
  border-radius: 0;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.storeDisplayCell:hover,
.storeDisplayCell:focus-visible {
  background: #142027;
}

.storeDisplayCell:focus-visible {
  outline: 1px solid var(--cyan-strong);
  outline-offset: -2px;
}

.storeDisplayCell > b {
  position: absolute;
  top: 50%;
  right: 16px;
  width: 0;
  height: 0;
  border-top: 8px solid #8a9ba4;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
  color: transparent;
  font-size: 0;
  transform: translateY(-35%);
}

.storeDisplayCell.storeWarning strong,
.mobileStoreBar.storeWarning strong {
  color: var(--amber);
  text-shadow: 0 0 7px #e4b96c4f;
}

.storeDisplayCell.storeActive strong,
.mobileStoreBar.storeActive strong {
  color: var(--green);
  text-shadow: 0 0 7px #74f0b570;
}

.storeDisplayCell.storeLoggedOut strong,
.mobileStoreBar.storeLoggedOut strong {
  color: #849097;
  text-shadow: none;
}

#modal-root .storeDialog,
#modal-root .billingDialog {
  position: relative;
  box-sizing: border-box;
  width: min(680px, calc(100% - 28px));
  max-height: min(90dvh, 820px);
  margin-inline: auto;
  padding: 38px 34px 28px;
  overflow-y: auto;
  text-align: left;
}

.storeDialogHeader,
.billingSummaryHeader {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}

.storeDialogHeader small,
.billingSummaryHeader small,
.storeDeviceNote,
.billingLegalNote {
  color: #82949d;
  font: 600 9px/1.45 var(--mono);
  letter-spacing: .04em;
}

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

.storeListItem {
  position: relative;
  box-sizing: border-box;
  width: 100%;
  min-height: 64px;
  padding: 12px 38px 12px 14px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 5px 12px;
  text-align: left;
}

.storeListItem strong,
.storeListItem small {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.storeListItem strong {
  color: #e9f9ff;
  font: 750 14px/1.2 var(--mono);
}

.storeListItem small {
  color: #83959e;
  font: 600 9px/1.2 var(--mono);
}

.storeListItem .storeRole {
  grid-row: 1 / span 2;
  grid-column: 2;
  color: #9fe5f8;
  font: 750 8px/1 var(--mono);
  letter-spacing: .08em;
}

.storeListItem.current {
  border-left-color: var(--green) !important;
  background: #14221d !important;
  box-shadow: 0 3px #050706, inset 3px 0 var(--green) !important;
}

.storeListItem.current::after {
  content: "✓";
  position: absolute;
  right: 13px;
  top: 11px;
  color: var(--green);
  font: 900 12px/1 var(--mono);
}

.storeActionGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 14px 0;
}

.storeActionGrid button {
  min-height: 44px;
  margin: 0 !important;
}

.storeForm {
  display: grid;
  gap: 12px;
}

.storeForm label {
  display: grid;
  gap: 6px;
  color: #8fa2ab;
  font: 700 9px/1.2 var(--mono);
  letter-spacing: .08em;
}

.storeForm input {
  box-sizing: border-box;
  width: 100%;
  min-height: 46px;
  padding: 10px 12px;
  border: 1px solid #3f5058;
  border-radius: 3px;
  color: #edfaff;
  background: #05090b;
  font: 500 14px/1.3 var(--community-sans, var(--sans));
}

.storeForm input:focus {
  border-color: var(--cyan-strong);
  outline: 1px solid #5ccdf54d;
}

.storeFormActions {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, .55fr);
  gap: 9px;
}

.storeFormActions button {
  margin: 0 !important;
}

.billingPlanGrid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin: 12px 0;
}

.billingPlanOption {
  position: relative;
}

.billingPlanOption input {
  position: absolute;
  opacity: 0;
}

.billingPlanOption span {
  min-height: 62px;
  padding: 10px;
  display: grid;
  place-content: center;
  border: 2px solid #252e33;
  border-color: #4d5960 #151a1d #111517 #4d5960;
  border-radius: 4px;
  color: #becbd1;
  background: #20262a;
  box-shadow: 0 4px #060809;
  text-align: center;
  font: 750 11px/1.35 var(--mono);
  cursor: pointer;
}

.billingPlanOption input:checked + span {
  border-color: #14171a #4b535c #4b535c #14171a;
  color: #effcff;
  background: #18252b;
  box-shadow: 0 2px #050708, inset 2px 2px 7px #0009;
  transform: translateY(2px);
}

.billingStoreChoices {
  display: grid;
  gap: 6px;
  margin: 12px 0;
}

.billingStoreChoice {
  min-height: 42px;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  gap: 9px;
  border: 1px solid #344149;
  background: #080c0e;
  color: #cbd9df;
  font: 650 11px/1.2 var(--mono);
}

.billingPriceTable {
  margin: 12px 0;
  padding: 12px;
  border: 1px solid #3c4b52;
  border-left: 3px solid #55d0ef;
  background: #080d10;
}

.billingPriceRow {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 5px 0;
  color: #9fb0b8;
  font: 650 10px/1.3 var(--mono);
}

.billingPriceRow.total {
  margin-top: 5px;
  padding-top: 10px;
  border-top: 1px solid #344149;
  color: #dff8ff;
  font-size: 13px;
}

.billingStatusBadge {
  padding: 5px 8px;
  border: 1px solid #47745f;
  color: var(--green);
  background: #112219;
  font: 750 9px/1 var(--mono);
}

@media (max-width: 660px) {
  .topDeck {
    margin-bottom: 8px;
  }

  .mobileStoreBar {
    box-sizing: border-box;
    width: calc(100% - 24px);
    min-height: 46px;
    margin: 0 12px 9px;
    padding: 7px 16px 7px 14px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 16px;
    align-items: center;
    gap: 9px;
    border: 2px solid;
    border-color: var(--edge-hi) var(--edge-low) var(--edge-low) var(--edge-hi);
    border-radius: 5px;
    color: #bdc7cc;
    background: #262c31;
    box-shadow: 0 4px #0b0d0f, 0 7px 10px #0006;
    text-align: left;
  }

  .mobileStoreBar.selected {
    border-color: #14171a #4b535c #4b535c #14171a;
    background: #20262b;
    transform: translateY(2px);
    box-shadow: 0 2px #0b0d0f, inset 2px 2px 7px #0009;
  }

  .mobileStoreBar > span {
    min-width: 0;
    display: grid;
    gap: 3px;
  }

  .mobileStoreBar small {
    color: #77838a;
    font: 750 6px/1 var(--mono);
    letter-spacing: .15em;
  }

  .mobileStoreBar strong {
    min-width: 0;
    overflow: hidden;
    color: #dff7ff;
    font: 750 10px/1.2 var(--mono);
    letter-spacing: .04em;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobileStoreBar > b {
    width: 0;
    height: 0;
    justify-self: center;
    border-top: 8px solid #8a9ba4;
    border-right: 6px solid transparent;
    border-left: 6px solid transparent;
    color: transparent;
    font-size: 0;
  }

  #modal-root .storeDialog,
  #modal-root .billingDialog {
    width: calc(100% - 18px);
    max-height: calc(100dvh - 16px);
    padding: 34px 15px 18px;
  }

  .storeActionGrid,
  .storeFormActions {
    grid-template-columns: minmax(0, 1fr);
  }

  .storeListItem {
    min-height: 58px;
  }
}

.communityAccountDialog .accountActionGrid button {
  min-width: 0;
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 650;
  line-height: 1.25;
  letter-spacing: .025em;
  text-wrap: balance;
}

.storyCommentList {
  grid-auto-rows: max-content;
}

.storyCommentList.fewComments {
  max-height: none;
  overflow-y: visible;
}

.storyCommentList.manyComments {
  max-height: min(38dvh, 340px);
  overflow-y: auto;
}

.boardCommentRow {
  height: auto;
  min-height: max-content;
  align-self: start;
}

.mobileInfoToggle {
  position: relative;
}

.mobileInfoToggle .menuNewBadge {
  position: absolute;
  z-index: 2;
  top: 5px;
  right: 7px;
  min-width: 24px;
  padding: 2px 4px;
  border: 1px solid #d29d2d;
  border-radius: 2px;
  color: #171107;
  background: #e3b72f;
  box-shadow: 0 0 7px #e3b72f70;
  font: 800 7px/1 var(--mono);
  letter-spacing: .06em;
  pointer-events: none;
  animation: menuNewPulse 2.5s ease-in-out infinite;
}

@keyframes menuNewPulse {
  0%, 100% { opacity: .72; box-shadow: 0 0 4px #e3b72f4d; }
  50% { opacity: 1; box-shadow: 0 0 10px #e3b72fa6; }
}

@media (prefers-reduced-motion: reduce) {
  .mobileInfoToggle .menuNewBadge {
    animation: none;
  }
}

@media (max-width: 660px) {
  .playlistAssembly .assemblyHeader > div > b,
  .storyAssembly .assemblyHeader > div > b {
    display: none;
  }

  .informationGrid[data-mobile-panel="playlist"] .playlistAssembly {
    display: block !important;
  }

  .informationGrid[data-mobile-panel="playlist"] .storyAssembly,
  .informationGrid[data-mobile-panel="story"] .playlistAssembly {
    display: none !important;
  }

  .informationGrid[data-mobile-panel="story"] .storyAssembly.communityEnabled.storyBoardEnabled {
    display: grid !important;
  }

  .storyCommentSection {
    grid-template-rows: max-content max-content max-content;
  }

  .storyCommentList.manyComments {
    max-height: min(38dvh, 320px);
    overscroll-behavior: contain;
  }

  .communityAccountDialog .accountActionGrid button {
    min-height: 44px;
    padding: 8px 7px;
    font-size: clamp(10px, 2.8vw, 11px);
    font-weight: 650;
    line-height: 1.15;
    letter-spacing: 0;
  }

  html[lang="ko"] .communityAccountDialog .accountActionGrid button,
  html[lang="ja"] .communityAccountDialog .accountActionGrid button {
    font-family: var(--community-sans);
    font-weight: 600;
    line-height: 1.25;
  }
}

/* 20260907a final cascade lock for responsive SPACE cards. */
.selectorPanel .genreButton strong,
html:not([lang="en"]) .selectorPanel .genreButton strong {
  min-height: 2.2em;
  display: grid;
  place-items: center;
  overflow: visible;
  color: inherit;
  font-size: clamp(10px, .92vw, 13px);
  font-weight: 800;
  line-height: 1.1;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

.selectorPanel .genreButton small,
html:not([lang="en"]) .selectorPanel .genreButton small {
  min-height: 1.15em;
  display: block;
  visibility: visible;
  overflow: visible;
  color: #9ca9b0;
  font-size: clamp(7px, .62vw, 9px);
  font-weight: 700;
  line-height: 1.15;
  text-overflow: clip;
  white-space: normal;
  overflow-wrap: anywhere;
}

html[lang="en"] .selectorPanel .genreButton small,
.selectorPanel .genreButton small:empty {
  display: none;
}

.selectorPanel .hardwareButton.selected.genreButton small {
  color: #d5dde1;
}

@media (max-width: 660px) {
  .selectorPanel .genreButton {
    min-height: 68px;
    padding: 20px 5px 6px;
  }

  .selectorPanel .genreButton strong,
  html:not([lang="en"]) .selectorPanel .genreButton strong {
    min-height: 2.2em;
    display: grid;
    font-size: clamp(9px, 2.75vw, 11px);
    line-height: 1.1;
  }

  .selectorPanel .genreButton small,
  html:not([lang="en"]) .selectorPanel .genreButton small {
    min-height: 0;
    margin-top: 3px;
    display: block;
    font-size: clamp(6px, 1.75vw, 7px);
    line-height: 1.1;
  }

  html[lang="en"] .selectorPanel .genreButton small,
  .selectorPanel .genreButton small:empty {
    display: none;
  }
}

/* 20260907b final cascade lock: PC bilingual, tablet/mobile selected locale only. */
.selectorPanel .selectorLabelPrimary,
html:not([lang="en"]) .selectorPanel .selectorLabelPrimary {
  min-height: 0 !important;
  margin: 0 !important;
  display: grid !important;
  place-items: center;
  overflow: visible !important;
  color: inherit;
  font-size: clamp(15px, 1.05vw, 18px) !important;
  font-weight: 800;
  line-height: 1.12 !important;
  letter-spacing: 0;
  text-align: center;
  text-overflow: clip !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.selectorPanel .selectorLabelEnglish,
html:not([lang="en"]) .selectorPanel .selectorLabelEnglish {
  min-height: 0 !important;
  margin-top: 5px !important;
  display: block;
  visibility: visible;
  overflow: hidden !important;
  color: #9ca9b0;
  font-size: clamp(8px, .67vw, 10px) !important;
  font-weight: 700;
  line-height: 1.1 !important;
  letter-spacing: .04em;
  text-align: center;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

.selectorPanel .hardwareButton.selected .selectorLabelEnglish {
  color: #d5dde1;
}

.selectorPanel .selectorLabelEnglish:empty,
html[lang="en"] .selectorPanel .selectorLabelEnglish {
  display: none !important;
}

.spaceGuideStrip {
  min-height: 52px !important;
  height: 52px;
}

.spaceGuideTextBand {
  min-width: 0;
  height: 38px;
  flex-wrap: nowrap !important;
  gap: 12px;
  white-space: nowrap;
}

.spaceGuideExamplesViewport {
  min-width: 0;
  overflow: hidden;
}

.spaceGuideExamples {
  box-sizing: border-box;
  width: max-content;
  max-width: none;
  display: block;
  overflow: visible;
  font-size: clamp(14px, 1vw, 16px);
  line-height: 1.2;
  white-space: nowrap;
  animation: none;
  transform: translateX(0);
  will-change: transform;
}

.spaceGuideExamples.spaceGuideMarqueeActive {
  animation: spaceGuideMarquee var(--space-guide-duration, 11s) ease-in-out infinite alternate;
}

@media (max-width: 1199px) {
  .selectorPanel .selectorLabelEnglish,
  html:not([lang="en"]) .selectorPanel .selectorLabelEnglish {
    display: none !important;
  }

  .selectorPanel .selectorLabelPrimary,
  html:not([lang="en"]) .selectorPanel .selectorLabelPrimary {
    font-size: 16px !important;
  }

  .spaceGuideStrip .spaceGuideLabel {
    display: none !important;
  }

  .spaceGuideStrip .spaceGuideExamplesViewport {
    flex: 1 1 100%;
  }
}

@media (max-width: 660px) {
  .selectorPanel .genreButton {
    min-height: 72px;
    padding: 20px 6px 7px;
  }

  .selectorPanel .categoryButton,
  .selectorPanel .momentRow .categoryButton {
    min-height: 58px;
    padding: 20px 5px 7px;
  }

  .selectorPanel .genreButton .selectorLabelPrimary,
  .selectorPanel .categoryButton .selectorLabelPrimary,
  .selectorPanel .momentRow .categoryButton .selectorLabelPrimary,
  html:not([lang="en"]) .selectorPanel .genreButton .selectorLabelPrimary,
  html:not([lang="en"]) .selectorPanel .categoryButton .selectorLabelPrimary {
    font-size: 16px !important;
  }

  .spaceGuideStrip {
    min-height: 50px !important;
    height: 50px;
    margin-top: 7px;
    padding: 6px;
  }

  .spaceGuideStrip .spaceGuideTextBand {
    height: 36px;
    padding: 7px 9px;
    gap: 0;
  }

  .spaceGuideStrip .spaceGuideExamples {
    max-height: none;
    font-size: 15px;
    line-height: 1.15;
  }
}

/* 20260907c · Restore one-line guide movement and rebalance utility labels. */
.sessionReadout small {
  font-size: 10px;
}

.sessionReadout strong {
  font-size: 13px;
}

.assemblyHeader strong {
  font-size: 14px;
}

@media (max-width: 660px) {
  .sessionReadout small {
    font-size: 9px;
  }

  .sessionReadout strong {
    font-size: 11.5px;
  }

  .mobileInfoToggle strong {
    font-size: 13px;
    line-height: 1.1;
  }

  .assemblyHeader strong {
    font-size: 14px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .spaceGuideExamples.spaceGuideMarqueeActive {
    animation: none;
    transform: translateX(0);
  }
}

/* 20260907e · Clear selected states and keep the SPACE GUIDE label fixed. */
.selectorPanel .hardwareButton:not(.selected),
.sessionKey:not(.selected),
.topControls .hardwareButton:not(.selected) {
  color: #b8bec4;
  background: linear-gradient(180deg, #3a4048 0%, #30353d 100%);
  border-color: #5a646e #171b1f #171b1f #5a646e;
}

.selectorPanel .hardwareButton.selected,
.sessionKey.selected,
.topControls .hardwareButton.selected {
  color: #ffffff !important;
  background: linear-gradient(180deg, #182129 0%, #11171d 100%) !important;
  border-color: #151a1f #56616b #56616b #151a1f !important;
  text-shadow: 0 1px 2px #000;
}

#genre-grid .hardwareButton.selected {
  box-shadow: 0 2px #07090b, inset 0 0 0 2px #61cfff, inset 2px 2px 8px #000b, 0 0 10px #35b8ff3d !important;
}

#category-row .hardwareButton.selected {
  box-shadow: 0 2px #07090b, inset 0 0 0 2px #f2f7fb, inset 2px 2px 8px #000b, 0 0 9px #ffffff2e !important;
}

#type-row .hardwareButton.selected {
  box-shadow: 0 2px #07090b, inset 0 0 0 2px #49e3a3, inset 2px 2px 8px #000b, 0 0 10px #37e39f38 !important;
}

.sessionKey.selected {
  box-shadow: 0 1px #07090b, inset 0 0 0 2px #67d8ff, inset 2px 2px 7px #000b, 0 0 9px #5ccdf538 !important;
}

.topControls .hardwareButton.selected {
  box-shadow: 0 2px #07090b, inset 0 0 0 2px #62dba7, inset 2px 2px 8px #000b, 0 0 9px #37e39f33 !important;
}

.topControls .languageButton.selected {
  box-shadow: 0 2px #07090b, inset 0 0 0 2px #67d8ff, inset 2px 2px 8px #000b, 0 0 9px #5ccdf538 !important;
}

.appDownloadButton.installReady .appDownloadLamp {
  border-color: #c8f4ff99;
  background: var(--cyan);
  box-shadow: 0 0 5px #5ccdf5, 0 0 12px #5ccdf58c, inset 0 0 2px #fff;
}

.selectorPanel .hardwareButton.selected .selectorLabelPrimary,
.selectorPanel .hardwareButton.selected .selectorLabelEnglish,
.sessionKey.selected,
.topControls .hardwareButton.selected strong,
.topControls .hardwareButton.selected small {
  color: #ffffff !important;
}

.spaceGuideTextBand {
  display: flex;
  align-items: center;
  gap: 12px;
}

.spaceGuideLabel,
.spaceGuideStrip .spaceGuideLabel,
.spaceGuideInline .spaceGuideLabel {
  flex: 0 0 auto;
  display: inline-flex !important;
  align-items: center;
  white-space: nowrap;
}

.spaceGuideExamplesViewport {
  min-width: 0;
  flex: 1 1 0;
  width: auto;
  overflow: hidden;
}

.spaceGuideExamples {
  display: block;
  width: max-content;
  white-space: nowrap;
}

@media (max-width: 660px) {
  .spaceGuideStrip .spaceGuideTextBand {
    gap: 9px;
  }

  .spaceGuideStrip .spaceGuideLabel {
    padding: 0;
    font-size: 10px;
    letter-spacing: .08em;
  }
}

/* 20260907k · The board defines one shared height; the playlist only scrolls inside it. */
.playlistAssembly {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  contain: size;
}

.playlistAssembly .playlistRows {
  height: auto;
  max-height: none;
}

@media (max-width: 660px) {
  .informationGrid[data-mobile-panel="playlist"],
  .informationGrid[data-mobile-panel="story"] {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .informationGrid[data-mobile-panel="playlist"] .playlistAssembly,
  .informationGrid[data-mobile-panel="playlist"] .storyAssembly,
  .informationGrid[data-mobile-panel="story"] .playlistAssembly,
  .informationGrid[data-mobile-panel="story"] .storyAssembly {
    grid-area: 1 / 1;
    min-width: 0;
    scroll-margin-top: 8px;
  }

  .informationGrid[data-mobile-panel="playlist"] .playlistAssembly,
  .informationGrid[data-mobile-panel="story"] .playlistAssembly {
    z-index: 0;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
    contain: size;
  }

  .informationGrid[data-mobile-panel="playlist"] .storyAssembly,
  .informationGrid[data-mobile-panel="story"] .storyAssembly {
    z-index: 0;
    display: grid !important;
    grid-template-rows: auto minmax(0, 1fr);
  }

  .informationGrid[data-mobile-panel="playlist"] .playlistAssembly,
  .informationGrid[data-mobile-panel="story"] .storyAssembly {
    z-index: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .informationGrid[data-mobile-panel="playlist"] .storyAssembly,
  .informationGrid[data-mobile-panel="story"] .playlistAssembly {
    z-index: 0;
    visibility: hidden;
    pointer-events: none;
  }
}

/* 20260908a · Keep every localized selector label inside its button on all devices. */
.selectorPanel .genreButton,
.selectorPanel .categoryButton,
.selectorPanel .momentRow .categoryButton {
  box-sizing: border-box;
  min-width: 0;
  overflow: hidden;
}

.selectorPanel .selectorLabelPrimary,
html:not([lang="en"]) .selectorPanel .selectorLabelPrimary {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100% !important;
  max-block-size: 2.3em;
  padding-inline: 2px;
  display: grid !important;
  place-items: center;
  overflow: hidden !important;
  line-height: 1.14 !important;
  text-align: center;
  text-overflow: clip !important;
  text-wrap: balance;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  word-break: normal;
  hyphens: auto;
}

.selectorPanel .selectorLabelText {
  box-sizing: border-box;
  display: block;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden;
  text-align: center;
  text-wrap: balance;
  white-space: inherit;
  overflow-wrap: inherit;
  word-break: inherit;
  hyphens: inherit;
}

html[lang="ko"] .selectorPanel .selectorLabelPrimary {
  word-break: keep-all;
}

html[lang="ja"] .selectorPanel .selectorLabelPrimary {
  line-break: strict;
  word-break: normal;
  overflow-wrap: anywhere !important;
}

.selectorPanel .selectorLabelEnglish {
  box-sizing: border-box;
  inline-size: 100%;
  min-inline-size: 0;
  max-inline-size: 100%;
  overflow: hidden !important;
}

@media (min-width: 1200px) {
  .selectorPanel .genreButton {
    min-height: 84px;
    padding-inline: 8px;
  }

  .selectorPanel .selectorLabelPrimary,
  html:not([lang="en"]) .selectorPanel .selectorLabelPrimary {
    font-size: clamp(14px, 1.02vw, 18px) !important;
  }
}

@media (min-width: 661px) and (max-width: 1199px) {
  .selectorPanel .genreButton {
    min-height: 78px;
    padding-inline: 8px;
  }

  .selectorPanel .categoryButton,
  .selectorPanel .momentRow .categoryButton {
    padding-inline: 7px;
  }

  .selectorPanel .selectorLabelPrimary,
  html:not([lang="en"]) .selectorPanel .selectorLabelPrimary {
    font-size: clamp(13px, 1.55vw, 16px) !important;
  }
}

@media (max-width: 660px) {
  .selectorPanel .genreButton {
    min-height: 72px;
    padding-inline: 7px;
  }

  .selectorPanel .categoryButton,
  .selectorPanel .momentRow .categoryButton {
    min-height: 58px;
    padding-inline: 6px;
  }

  .selectorPanel .selectorLabelPrimary,
  html:not([lang="en"]) .selectorPanel .selectorLabelPrimary,
  .selectorPanel .genreButton .selectorLabelPrimary,
  .selectorPanel .categoryButton .selectorLabelPrimary,
  .selectorPanel .momentRow .categoryButton .selectorLabelPrimary {
    font-size: clamp(14px, 4vw, 16px) !important;
  }
}