@import url("../mmd-dialogue-stage/loading-background.css?v=20261006-artdeco-v4");

:root {
  color-scheme: light;
  --ink: #242126;
  --soft-ink: #5f5b66;
  --muted: #8b8794;
  --white: #fffefd;
  --glass: rgba(255, 255, 255, 0.82);
  --line: rgba(41, 35, 44, 0.14);
  --shadow: 0 18px 48px rgba(30, 26, 38, 0.22);
  --pink: #ff4f9a;
  --blue: #26a9f4;
  --yellow: #ffca35;
  --green: #20dfad;
  --orange: #ff783f;
  --violet: #8c73ff;
  --radius: 8px;
  --font-sans: "Inter", "Noto Sans SC", "Source Han Sans SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --font-ui: var(--font-sans);
  --font-display: "DIN Alternate", "Bahnschrift", "Arial Rounded MT Bold", var(--font-sans);
  --font-mono: "Fira Code", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: #101016;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: var(--font-sans);
  overflow-x: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 79, 154, 0.18), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(38, 169, 244, 0.2), transparent 30%),
    linear-gradient(135deg, #fff7f0 0%, #f2f7ff 48%, #fff6dd 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 62%);
}

button,
textarea {
  font: inherit;
}

button {
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(32, 223, 173, 0.72);
  outline-offset: 3px;
}

svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.produce-app {
  width: min(100vw, 1180px);
  min-height: 100vh;
  margin: 0 auto;
}

.ui-kicker {
  margin: 0 0 4px;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0;
}

h1,
h2,
p {
  margin-top: 0;
}

.select-screen {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(340px, 430px);
  gap: 18px;
  align-items: stretch;
  min-height: 100vh;
  padding: clamp(18px, 3vw, 34px);
}

.launch-screen {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 420px);
  gap: 18px;
  align-items: stretch;
  min-height: 100vh;
  padding: clamp(18px, 3vw, 34px);
}

.launch-secret-trigger {
  position: absolute;
  left: max(6px, env(safe-area-inset-left));
  bottom: max(6px, env(safe-area-inset-bottom));
  display: grid;
  width: 44px;
  height: 44px;
  padding: 0;
  place-items: center;
  border: 0;
  background: transparent;
  cursor: pointer;
  opacity: 0.34;
}

.launch-mode-card[hidden],
.launch-secret-trigger[hidden] {
  display: none;
}

.launch-secret-trigger span {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(74, 80, 96, 0.5);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.35);
  transition: opacity 0.18s ease, transform 0.18s ease;
}

.launch-secret-trigger:hover span,
.launch-secret-trigger:focus-visible span {
  opacity: 0.78;
  transform: scale(1.25);
}

.launch-secret-trigger:active span {
  opacity: 0.9;
  transform: scale(0.8);
}

.launch-secret-trigger:focus-visible {
  outline: 2px solid rgba(74, 183, 255, 0.6);
  outline-offset: -8px;
  border-radius: 50%;
}

.launch-visual,
.launch-mode-list {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.launch-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 620px;
  padding: clamp(28px, 5vw, 60px);
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(20, 22, 30, 0.18), rgba(20, 22, 30, 0.76)),
    linear-gradient(130deg, #ff8ab9, #4ab7ff 46%, #ffd24f);
}

.launch-visual h1 {
  margin-bottom: 12px;
  font-size: clamp(34px, 5vw, 52px);
  line-height: 1.05;
}

.launch-visual p:last-child {
  max-width: 42ch;
  color: rgba(255, 255, 255, 0.88);
  line-height: 1.6;
}

.launch-mode-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  background: rgba(255, 255, 255, 0.92);
}

.launch-resume-note {
  margin: 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(38, 169, 244, 0.1);
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.5;
}

.launch-mode-card.is-resume {
  border-color: rgba(38, 169, 244, 0.34);
  background: linear-gradient(180deg, rgba(240, 249, 255, 0.98), rgba(255, 255, 255, 0.96));
}

.launch-mode-card.is-resume:hover,
.launch-mode-card.is-resume:focus-visible {
  border-color: rgba(38, 169, 244, 0.55);
}

.launch-mode-card.is-backup {
  border-color: rgba(111, 102, 128, 0.22);
  background: rgba(255, 255, 255, 0.96);
}

.launch-mode-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  width: 100%;
  padding: 18px 18px 16px;
  border: 1px solid rgba(111, 102, 128, 0.16);
  border-radius: 16px;
  background: #fff;
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.launch-mode-card:hover,
.launch-mode-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(38, 169, 244, 0.45);
  box-shadow: 0 12px 28px rgba(38, 169, 244, 0.14);
}

.launch-mode-card.is-sandbox:hover,
.launch-mode-card.is-sandbox:focus-visible {
  border-color: rgba(255, 79, 154, 0.45);
  box-shadow: 0 12px 28px rgba(255, 79, 154, 0.14);
}

.launch-mode-card.is-nsfw-test {
  border-color: rgba(196, 92, 196, 0.22);
  background: linear-gradient(180deg, rgba(255, 246, 252, 0.98), rgba(255, 255, 255, 0.96));
}

.launch-mode-card.is-nsfw-test:hover,
.launch-mode-card.is-nsfw-test:focus-visible {
  border-color: rgba(196, 92, 196, 0.5);
  box-shadow: 0 12px 28px rgba(196, 92, 196, 0.16);
}

.launch-mode-kicker {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.launch-mode-card strong {
  font-size: 22px;
}

.launch-mode-desc {
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.select-launch-back-btn {
  align-self: flex-start;
  margin-bottom: 10px;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(255, 255, 255, 0.82);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.select-screen.is-hidden,
.launch-screen.is-hidden,
.select-panel.is-hidden,
.game-stage.is-hidden,
.free-mode-stage.is-hidden,
.producer-apartment-stage.is-hidden {
  display: none;
}

.select-visual,
.select-panel {
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 18px;
  box-shadow: var(--shadow);
}

.select-visual {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 620px;
  padding: clamp(28px, 5vw, 60px);
  overflow: hidden;
  color: #fff;
  background:
    linear-gradient(180deg, rgba(20, 22, 30, 0.18), rgba(20, 22, 30, 0.76)),
    linear-gradient(130deg, #ff8ab9, #4ab7ff 46%, #ffd24f);
}

.select-visual::before {
  content: "";
  position: absolute;
  inset: 20px 8% auto auto;
  width: min(360px, 45vw);
  aspect-ratio: 0.62;
  background: url("./assets/select-bg/bg_logo.png") center / contain no-repeat;
  opacity: 0.55;
  filter: drop-shadow(0 20px 60px rgba(21, 29, 54, 0.35));
  transform: rotate(-2deg);
  transition: opacity 0.4s ease;
}

.select-visual.has-hover-bg::before {
  opacity: 0;
}

.select-visual.is-scenario-preview::before {
  opacity: 0;
}

.select-visual > .select-visual-bg {
  position: absolute;
  z-index: 0;
}

.select-visual-bg {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.4s ease, background-image 0.2s ease;
}

.select-visual-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(20, 22, 30, 0.12), rgba(20, 22, 30, 0.85));
}

.select-visual.is-scenario-preview .select-visual-bg::after {
  background: linear-gradient(180deg, rgba(18, 20, 28, 0.02), rgba(18, 20, 28, 0.22));
}

.select-visual-bg.has-image {
  opacity: 1;
}

.scenario-preview {
  display: flex;
  flex: 1;
  min-height: 0;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 22px;
  padding-top: clamp(8px, 3vh, 32px);
  text-align: center;
}

.scenario-preview[hidden] {
  display: none;
}

.scenario-preview-logo {
  display: block;
  flex: 0 0 auto;
  width: min(840px, 145%);
  max-width: none;
  max-height: 480px;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 12px 30px rgba(12, 18, 35, 0.3));
}

.select-visual.is-scenario-nia .scenario-preview-logo {
  width: min(1000px, 160%);
  max-height: 380px;
}

.select-visual .scenario-slogan {
  max-width: 640px;
  margin: 0 auto;
  color: #fff;
  font-size: clamp(16px, 1.7vw, 22px);
  font-weight: 650;
  line-height: 1.8;
  white-space: pre-line;
  text-shadow: 0 2px 12px rgba(8, 14, 31, 0.55);
}

.scenario-confirm-container {
  margin-top: 24px;
}

.scenario-confirm-btn {
  min-width: min(320px, 100%);
  background: #ec5b96;
}

.select-visual::after {
  content: "";
  position: absolute;
  inset: 26px;
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
}

.select-visual > * {
  position: relative;
  z-index: 1;
}

.select-visual h1 {
  max-width: 620px;
  margin-bottom: 12px;
  font-size: clamp(46px, 8vw, 92px);
  line-height: 0.98;
  letter-spacing: 0;
}

.select-visual p:not(.ui-kicker) {
  max-width: 560px;
  margin-bottom: 20px;
  color: rgba(255, 255, 255, 0.84);
  font-size: 17px;
  line-height: 1.8;
}

.select-rules {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.select-rules span {
  min-height: 34px;
  border: 1px solid rgba(255, 255, 255, 0.45);
  border-radius: 999px;
  padding: 7px 12px;
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  backdrop-filter: blur(12px);
}

.select-panel {
  padding: 18px;
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(18px);
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.panel-head h2 {
  margin: 0;
  font-size: 24px;
}

.panel-head svg {
  color: var(--pink);
}

.idol-list {
  display: grid;
  gap: 10px;
}

.scenario-idol-label {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.scenario-list {
  display: grid;
  gap: 12px;
}

.scenario-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) 22px;
  align-items: center;
  gap: 14px;
  min-height: 96px;
  width: 100%;
  padding: 16px;
  border: 2px solid rgba(255, 255, 255, 0.78);
  border-radius: var(--radius);
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), rgba(246, 247, 252, 0.84));
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(37, 32, 52, 0.08);
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.scenario-card:hover,
.scenario-card:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 79, 154, 0.48);
  box-shadow: 0 12px 25px rgba(255, 79, 154, 0.12);
}

.scenario-card.is-active {
  border-color: var(--pink);
  box-shadow: 0 0 0 3px rgba(255, 79, 154, 0.11), 0 12px 25px rgba(46, 39, 68, 0.12);
}

.scenario-card[data-scenario="nia"].is-active {
  border-color: #16a4b3;
  box-shadow: 0 0 0 3px rgba(22, 164, 179, 0.11), 0 12px 25px rgba(46, 39, 68, 0.12);
}

.scenario-card.is-locked {
  opacity: .46;
  cursor: not-allowed;
  filter: saturate(.45);
}

.scenario-card.is-locked .scenario-card-arrow {
  opacity: .35;
}

.scenario-card-index {
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 12px;
}

.scenario-card strong,
.scenario-card small {
  display: block;
  letter-spacing: 0;
}

.scenario-card strong {
  font-size: 24px;
}

.scenario-card small {
  margin-top: 5px;
  color: var(--muted);
  font-size: 11px;
}

.scenario-card-arrow {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.scenario-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 44px;
  margin-top: 18px;
  padding: 9px 14px;
  border: 1px solid rgba(111, 102, 128, 0.2);
  border-radius: 7px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--soft-ink);
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  transition: border-color 180ms ease, background-color 180ms ease;
}

.scenario-back-btn:hover,
.scenario-back-btn:focus-visible {
  border-color: rgba(38, 169, 244, 0.42);
  background: #fff;
}

.scenario-back-btn svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.idol-card {
  position: relative;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  align-items: center;
  gap: 13px;
  width: 100%;
  min-height: 84px;
  border: 2px solid rgba(255, 255, 255, 0.76);
  border-radius: var(--radius);
  padding: 12px 38px 12px 12px;
  text-align: left;
  color: var(--ink);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.94), rgba(249, 247, 255, 0.76));
  box-shadow: 0 8px 18px rgba(37, 32, 52, 0.08);
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}

.idol-card::after {
  content: "";
  position: absolute;
  inset: 11px 12px auto auto;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 0 5px rgba(32, 223, 173, 0.14);
}

.idol-card:hover {
  transform: translateY(-2px) scale(1.01);
  border-color: rgba(255, 79, 154, 0.54);
  box-shadow: 0 16px 30px rgba(37, 32, 52, 0.14);
}

.idol-card.is-selected {
  transform: translateY(-2px) scale(1.02);
  border-width: 2px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(255, 245, 250, 0.95));
}

.select-confirm-container {
  margin-top: clamp(20px, 4vw, 36px);
  display: flex;
  opacity: 0;
  transform: translateY(15px);
  transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.select-boot-actions {
  margin-top: clamp(16px, 3vw, 28px);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.select-boot-actions[hidden] {
  display: none !important;
}

.select-confirm-container.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.confirm-idol-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 36px;
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-ui);
  color: #fff;
  background-color: var(--accent, #ff4f9a);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(255, 79, 154, 0.4);
  transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, filter 0.2s ease;
}

.confirm-idol-btn:hover {
  transform: translateY(-3px) scale(1.02);
  filter: brightness(1.05);
}

.confirm-idol-btn:active {
  transform: translateY(-1px) scale(0.99);
}

.confirm-idol-btn svg {
  transition: transform 0.2s ease;
}

.confirm-idol-btn:hover svg {
  transform: translateX(4px);
}

.idol-card-copy,
.idol-card-copy strong,
.idol-card-copy span {
  display: block;
}

.idol-card-copy strong {
  font-size: 18px;
}

.idol-card-copy span {
  margin-top: 4px;
  color: var(--soft-ink);
  font-size: 13px;
}

.idol-avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  overflow: hidden;
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  color: #fff;
  background: linear-gradient(145deg, var(--avatar-color), #8c73ff);
  box-shadow: 0 8px 18px color-mix(in srgb, var(--avatar-color) 30%, transparent);
}

.idol-avatar b {
  font-size: 20px;
  font-weight: 900;
}

.idol-avatar img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.idol-avatar img.is-missing {
  display: none;
}

.game-stage {
  --stage-top-crop: 100px;
  position: relative;
  width: min(100vw, 600px);
  min-height: calc(100svh + var(--stage-top-crop));
  margin: 0 auto calc(-1 * var(--stage-top-crop));
  overflow: hidden;
  color: var(--ink);
  background: #dde5e2;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 80px rgba(0, 0, 0, 0.26);
  transform: translateY(calc(-1 * var(--stage-top-crop)));
  isolation: isolate;
}

.scene-backdrop {
  position: absolute;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  background:
    linear-gradient(rgba(255, 255, 255, 0.08), rgba(0, 0, 0, 0.06)),
    linear-gradient(90deg, #d7c99f 0 18%, #efe0b6 18% 26%, #a66a3e 26% 27%, #eadbb1 27% 50%, #a66a3e 50% 51%, #eadbb1 51% 76%, #8b5e42 76% 100%);
}

.game-stage.has-idol-background .scene-backdrop {
  background-image:
    linear-gradient(180deg, rgba(18, 18, 24, 0.08) 0%, transparent 42%, rgba(18, 18, 24, 0.22) 100%),
    var(--idol-scene-image);
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
}

.game-stage.has-idol-background .scene-backdrop::before,
.game-stage.has-idol-background .scene-backdrop::after,
.game-stage.has-idol-background .window-grid,
.game-stage.has-idol-background .classroom-desk,
.game-stage.has-idol-background .idol-standee {
  display: none;
}

.scene-backdrop::before {
  content: "";
  position: absolute;
  inset: 9% -12% auto 7%;
  height: 34%;
  border-radius: 12px;
  background:
    linear-gradient(90deg, rgba(89, 120, 136, 0.52) 0 8%, transparent 8% 12%, rgba(96, 154, 191, 0.52) 12% 22%, transparent 22% 27%, rgba(102, 166, 204, 0.58) 27% 38%, transparent 38% 43%, rgba(90, 137, 168, 0.5) 43% 54%, transparent 54% 60%, rgba(101, 157, 193, 0.52) 60% 72%, transparent 72%),
    linear-gradient(#5b3e2e, #5b3e2e);
  box-shadow: inset 0 0 0 8px rgba(83, 53, 34, 0.72), 0 18px 48px rgba(73, 52, 33, 0.24);
}

.scene-backdrop::after {
  content: "";
  position: absolute;
  inset: auto -12% -3% -8%;
  height: 27%;
  background:
    linear-gradient(11deg, rgba(110, 63, 35, 0.92), rgba(165, 92, 51, 0.98)),
    repeating-linear-gradient(90deg, transparent 0 42px, rgba(255, 255, 255, 0.12) 43px 45px);
  transform: skewY(-4deg);
  box-shadow: 0 -22px 42px rgba(70, 41, 25, 0.2);
}

.window-grid {
  position: absolute;
  inset: 10% 13% auto 16%;
  height: 31%;
  background:
    linear-gradient(90deg, transparent 24%, rgba(73, 50, 34, 0.68) 25% 27%, transparent 28% 49%, rgba(73, 50, 34, 0.68) 50% 52%, transparent 53% 74%, rgba(73, 50, 34, 0.68) 75% 77%, transparent 78%),
    linear-gradient(180deg, transparent 31%, rgba(73, 50, 34, 0.68) 32% 35%, transparent 36% 66%, rgba(73, 50, 34, 0.68) 67% 70%, transparent 71%);
}

.classroom-desk {
  position: absolute;
  left: -18%;
  right: 24%;
  bottom: 14%;
  height: 12%;
  border-radius: 18px;
  background: linear-gradient(180deg, #b56b3e, #7f452b);
  transform: rotate(-3deg);
  box-shadow: 0 14px 34px rgba(67, 38, 24, 0.26);
}

.game-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent 48%, rgba(0, 0, 0, 0.24));
  pointer-events: none;
}

.top-hud {
  position: relative;
  top: 100px;
  display: grid;
  grid-template-columns: 1fr 1.1fr 1fr;
  gap: 12px;
  align-items: start;
  padding: max(16px, env(safe-area-inset-top)) 18px 0;
}

.hud-card {
  position: relative;
  min-height: 86px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 14px;
  padding: 13px 14px 11px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 10px 26px rgba(32, 28, 38, 0.18);
}

.hud-card span {
  display: block;
  color: #45404a;
  font-weight: 800;
  font-size: 13px;
}

.hud-card strong {
  display: block;
  margin-top: 4px;
  font-family: var(--font-display);
  font-size: 32px;
  line-height: 1;
}

.day-card::after {
  content: "";
  display: block;
  width: 74%;
  height: 3px;
  margin-top: 8px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--pink), #ff9ed1);
}

.info-dot {
  position: absolute;
  top: -12px;
  right: -9px;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: 50%;
  color: #fff;
  background: rgba(54, 55, 62, 0.58);
  backdrop-filter: blur(10px);
}

.info-dot svg {
  width: 16px;
  height: 16px;
}

.center-hud {
  display: grid;
  grid-template-columns: repeat(2, 118px);
  gap: 8px;
  justify-content: center;
  justify-items: center;
  padding-top: 2px;
}

.point-pill {
  position: relative;
  min-height: 34px;
  border: 6px solid rgba(47, 45, 48, 0.58);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(38, 37, 40, 0.72);
  box-shadow: 0 9px 20px rgba(20, 18, 24, 0.22);
}

.stamina-pill {
  position: relative;
  grid-column: 1 / -1;
  width: 240px;
  max-width: 100%;
  height: 108px;
  min-height: 108px;
  overflow: hidden;
  background: transparent;
}

.stamina-art {
  position: absolute;
  top: -86px;
  left: 50%;
  width: 280px;
  max-width: none;
  height: auto;
  transform: translateX(-50%);
  pointer-events: none;
  user-select: none;
}

.stamina-track {
  position: absolute;
  top: 13px;
  left: 13px;
  width: 214px;
  height: 21px;
  overflow: hidden;
  border-radius: 999px;
  background: #34363a;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.32);
}

.stamina-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 70%;
  border-radius: inherit;
  background: linear-gradient(90deg, #e8ff2d, var(--green), #20d3ff);
  transition: width 260ms ease-out;
}

.point-pill {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: white;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.32);
}

.stamina-value {
  position: absolute;
  top: 52px;
  right: 0;
  left: 0;
  z-index: 2;
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 3px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 27px;
  font-weight: 900;
  line-height: 1;
  -webkit-text-stroke: 2px #17171a;
  paint-order: stroke fill;
  text-shadow: 0 2px 0 #17171a;
}

.stamina-value small {
  font-size: 18px;
  font-weight: 900;
  -webkit-text-stroke-width: 1.5px;
}

.point-pill {
  min-width: 118px;
  border-width: 4px;
  font-size: 24px;
}

.point-pill svg {
  color: #ff5f9e;
  fill: currentColor;
  stroke: rgba(255, 255, 255, 0.86);
}

.stress-pill-emoji {
  font-size: 20px;
  line-height: 1;
  flex-shrink: 0;
}

.exam-card {
  text-align: right;
}

.nia-review-stack {
  display: grid;
  justify-items: end;
  gap: 8px;
}

.exam-thresholds {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin-top: 5px;
  font-family: var(--font-display);
}

.threshold-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.15;
}

.threshold-icon {
  display: block;
  width: 25px;
  height: 16px;
  object-fit: contain;
  flex: 0 0 25px;
}

.threshold-icon-crop {
  display: block;
  width: 34px;
  height: 24px;
  overflow: hidden;
  position: relative;
  flex: 0 0 34px;
}

.threshold-item.vo .threshold-icon,
.threshold-item.da .threshold-icon,
.threshold-item.vi .threshold-icon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220px;
  height: 220px;
  max-width: none;
  transform: translate(-50%, -50%);
}

.threshold-item .val {
  font-size: 14px;
  color: var(--ink);
}

.nia-only[hidden] {
  display: none !important;
}

body.is-nia-training .nia-only {
  display: flex;
}

.nia-fan-progress {
  align-items: flex-start;
  gap: 7px;
  min-width: 168px;
  padding: 2px 4px;
  color: var(--ink);
}

.nia-fan-badge {
  width: 30px;
  height: 30px;
  object-fit: contain;
  filter: drop-shadow(0 2px 2px rgba(82, 50, 22, 0.18));
}

.nia-fan-meter {
  display: grid;
  justify-items: center;
  gap: 2px;
  padding-top: 3px;
}

.nia-fan-track {
  position: relative;
  width: 92px;
  height: 15px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(55, 50, 45, 0.48);
  box-shadow: inset 0 1px 3px rgba(30, 24, 18, 0.24), 0 1px 0 rgba(255, 255, 255, 0.3);
}

.nia-fan-fill {
  position: absolute;
  inset: 2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff8a2b 0%, #ffbd3e 100%);
  box-shadow: 0 0 6px rgba(255, 159, 45, 0.5);
  transform: scaleX(var(--nia-fan-scale, 0));
  transform-origin: left center;
  transition: transform 260ms ease;
}

.nia-fan-value {
  font: 900 14px/1 var(--font-display);
  color: #fff;
  letter-spacing: 0.02em;
  text-shadow: 0 1px 2px rgba(26, 20, 15, 0.8), 1px 0 0 rgba(26, 20, 15, 0.45);
}

.nia-fan-rank {
  width: 28px;
  height: 30px;
  margin-top: -1px;
  background-image: var(--rank-image);
  background-repeat: no-repeat;
  background-size: 400% 400%;
  background-position: var(--rank-x) var(--rank-y);
  transform: translate(var(--rank-shift-x), var(--rank-shift-y));
  filter: drop-shadow(0 1px 1px rgba(15, 20, 30, 0.35));
}

.action-button.nia-plan-action-button {
  min-height: 178px;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.action-button.nia-plan-action-button::before {
  content: none;
}

.nia-plan-action-visual {
  position: relative;
  display: block;
  width: min(100%, 178px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
}

.action-button .nia-plan-action-image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 175%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.action-button .nia-plan-action-label {
  position: absolute;
  right: 12%;
  bottom: 13%;
  left: 12%;
  display: block;
  width: auto;
  color: #3b3840;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  pointer-events: none;
}

.action-button.nia-plan-action-button:hover {
  box-shadow: none;
  filter: saturate(1.08) drop-shadow(0 14px 16px rgba(24, 20, 32, 0.26));
}

.action-button.nia-plan-action-button .cost-badge {
  top: 12%;
  right: calc(50% - 75px);
}

.nia-plan-complete {
  display: grid;
  place-items: center;
  min-height: 110px;
  padding: 18px 28px;
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.82);
  color: #5a438e;
  font: 900 18px/1.35 var(--font-display);
  box-shadow: var(--shadow-soft);
}

@media (prefers-reduced-motion: reduce) {
  .nia-fan-fill { transition: none; }
}

.side-items {
  position: absolute;
  z-index: 5;
  top: 20%;
  right: 10px;
  display: grid;
  gap: 10px;
}

.side-token {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border: 3px solid rgba(255, 255, 255, 0.78);
  border-radius: 12px;
  color: #fff;
  background: linear-gradient(145deg, var(--violet), var(--blue));
  box-shadow: 0 8px 18px rgba(20, 18, 24, 0.2);
  transform: rotate(-8deg);
  transition: transform 180ms ease, filter 180ms ease;
}

.side-token:nth-child(2n) {
  transform: rotate(9deg);
  background: linear-gradient(145deg, var(--pink), var(--yellow));
}

.side-token:hover {
  transform: rotate(0deg) scale(1.08);
  filter: saturate(1.12);
}

.side-token span {
  position: absolute;
  top: -8px;
  right: -8px;
  display: grid;
  place-items: center;
  min-width: 22px;
  height: 22px;
  border-radius: 999px;
  color: #fff;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  background: rgba(42, 42, 48, 0.76);
}

.idol-stage {
  position: relative;
  min-height: 52svh;
  padding-top: 72px;
}

.advisor-bubble {
  position: absolute;
  top: 17px;
  left: 23%;
  right: 72px;
  z-index: 7;
  min-height: 56px;
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 28px;
  padding: 12px 58px 12px 18px;
  color: #4b4650;
  font-weight: 800;
  line-height: 1.45;
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 9px 24px rgba(30, 26, 38, 0.16);
  backdrop-filter: blur(12px);
}

.advisor-bubble i {
  position: absolute;
  top: 7px;
  right: 8px;
  width: 40px;
  height: 40px;
  border: 3px solid #73e8b6;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 40%, #ffe1dd 0 18%, transparent 19%),
    linear-gradient(#7b68ba 0 42%, #fff 43% 100%);
}

.advisor-bubble.is-hidden {
  display: none;
}

.idol-card-name {
  position: absolute;
  z-index: 4;
  top: 18%;
  left: 22px;
  width: 190px;
  border: 3px solid rgba(255, 255, 255, 0.84);
  border-radius: 14px;
  padding: 12px 14px;
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 28px rgba(30, 26, 38, 0.13);
}

.idol-card-name p {
  margin: 0 0 3px;
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 700;
}

.idol-card-name h2 {
  margin: 0;
  font-size: 21px;
}

.idol-card-name span {
  display: inline-block;
  margin-top: 7px;
  border-radius: 999px;
  padding: 4px 9px;
  color: #fff;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  font-size: 12px;
  font-weight: 800;
}

.idol-standee {
  position: absolute;
  left: 50%;
  bottom: 0;
  z-index: 2;
  width: min(64vw, 315px);
  height: min(66svh, 560px);
  transform: translateX(-48%);
  filter: drop-shadow(0 24px 28px rgba(38, 32, 42, 0.32));
  animation: standeeBreathe 4.8s ease-in-out infinite;
}

.idol-standee .hair {
  position: absolute;
  top: 8%;
  left: 26%;
  width: 48%;
  height: 30%;
  border-radius: 48% 48% 42% 42%;
  background:
    radial-gradient(circle at 30% 22%, rgba(255, 255, 255, 0.28), transparent 20%),
    linear-gradient(145deg, #c57b68, #8e4f5a);
}

.idol-standee .face {
  position: absolute;
  top: 17%;
  left: 34%;
  width: 32%;
  height: 17%;
  border-radius: 46% 46% 52% 52%;
  background:
    radial-gradient(circle at 36% 44%, #6152d1 0 5%, transparent 6%),
    radial-gradient(circle at 64% 44%, #6152d1 0 5%, transparent 6%),
    radial-gradient(circle at 50% 70%, #ef8b8b 0 4%, transparent 5%),
    #ffd8c8;
  box-shadow: inset 0 -7px 0 rgba(228, 118, 116, 0.18);
}

.idol-standee .body {
  position: absolute;
  top: 33%;
  left: 25%;
  width: 50%;
  height: 38%;
  border-radius: 24% 24% 18% 18%;
  background:
    linear-gradient(90deg, transparent 47%, rgba(255, 255, 255, 0.22) 48% 52%, transparent 53%),
    linear-gradient(145deg, #1f2e59, #1b2448);
}

.idol-standee .body::before {
  content: "";
  position: absolute;
  inset: 10% 32% auto;
  height: 35%;
  border-radius: 0 0 999px 999px;
  background: linear-gradient(#f7ead4 0 45%, #75c3ff 46% 100%);
}

.idol-standee .skirt {
  position: absolute;
  top: 66%;
  left: 20%;
  width: 60%;
  height: 18%;
  clip-path: polygon(12% 0, 88% 0, 100% 100%, 0 100%);
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.26) 0 2px, transparent 2px 22px),
    linear-gradient(135deg, #84c9ff, #3d83d7);
}

.score-band {
  position: relative;
  z-index: 8;
  display: grid;
  grid-template-columns: 70px 1fr 76px;
  gap: 8px;
  align-items: end;
  margin-top: -36px;
  padding: 0 14px;
}

.phone-launch-btn {
  display: grid;
  gap: 4px;
  justify-items: center;
  align-self: end;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.phone-launch-icon {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 16px;
  background: linear-gradient(165deg, #4fc3ff 0%, #26a9f4 100%);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.28),
    0 8px 18px rgba(38, 169, 244, 0.28);
  color: #fff;
  transition: transform 160ms ease, box-shadow 160ms ease;
  position: relative;
}

.phone-unread-badge {
  position: absolute;
  top: -6px;
  right: -7px;
  min-width: 20px;
  height: 20px;
  padding: 0 5px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 10px;
  background: #e53935;
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0;
  box-sizing: border-box;
}

.phone-unread-badge[hidden] {
  display: none;
}

.phone-launch-icon svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.phone-launch-label {
  font-size: 11px;
  font-weight: 700;
  color: rgba(36, 33, 38, 0.72);
  letter-spacing: 0.06em;
}

.phone-launch-btn:hover .phone-launch-icon,
.phone-launch-btn:focus-visible .phone-launch-icon {
  transform: translateY(-1px);
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.34),
    0 10px 22px rgba(38, 169, 244, 0.34);
  outline: none;
}

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

.meter-card {
  position: relative;
  min-width: 0;
  min-height: 142px;
  text-align: center;
  color: white;
}

.meter-arc {
  position: relative;
  width: min(100%, 112px);
  aspect-ratio: 1;
  margin: 0 auto -15px;
}

.meter-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 7px 8px rgba(30, 26, 38, 0.28));
  transform-origin: center;
  transform: rotate(135deg);
}

.meter-ring-outline,
.meter-ring-track,
.meter-ring-progress {
  fill: none;
  stroke-linecap: round;
}

.meter-ring-outline {
  stroke: rgba(255, 255, 255, 0.9);
  stroke-width: 20;
  stroke-dasharray: 75 25;
}

.meter-ring-track {
  stroke: rgba(57, 56, 60, 0.9);
  stroke-width: 16;
  stroke-dasharray: 75 25;
}

.meter-ring-progress {
  stroke: var(--meter-color);
  stroke-width: 11;
  stroke-dasharray: var(--meter-progress) 100;
}

.meter-rank {
  position: absolute;
  inset: 10px;
  z-index: 1;
  background-image: var(--rank-image);
  background-repeat: no-repeat;
  background-position: var(--rank-x) var(--rank-y);
  background-size: 400% 400%;
  transform: translate(var(--rank-shift-x), var(--rank-shift-y));
}

.meter-value {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border-radius: 999px;
  padding: 3px 8px 4px 5px;
  background: rgba(38, 37, 43, 0.82);
  font-family: var(--font-display);
  font-weight: 900;
  box-shadow: 0 6px 12px rgba(30, 26, 38, 0.24);
}

.meter-mini-icon {
  position: relative;
  display: block;
  flex: 0 0 25px;
  width: 25px;
  height: 25px;
  overflow: hidden;
}

.meter-mini-icon img {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 800%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.meter-value b {
  color: #fff;
  font-size: 25px;
  line-height: 1;
  -webkit-text-stroke: 1.5px rgba(31, 30, 34, 0.9);
  paint-order: stroke fill;
}

.meter-value small {
  align-self: flex-end;
  padding-bottom: 1px;
  color: #fff;
  font-size: 11px;
  line-height: 1;
  opacity: 0.92;
}

.meter-growth {
  position: relative;
  z-index: 1;
  display: inline-flex;
  gap: 4px;
  margin-top: 3px;
  border-radius: 999px;
  padding: 3px 7px;
  color: white;
  background: rgba(51, 49, 57, 0.82);
  font-size: 12px;
  font-weight: 900;
}

.meter-growth::before {
  content: "⌃";
  color: var(--meter-color);
}

.notebook-button {
  display: grid;
  justify-items: center;
  align-content: center;
  gap: 4px;
  width: 72px;
  height: 88px;
  border: 4px solid white;
  border-radius: 50% 50% 18px 18px;
  color: #fff;
  background: linear-gradient(145deg, #ffb2d0, #f76aa7);
  box-shadow: 0 10px 24px rgba(30, 26, 38, 0.24);
  transition: transform 180ms ease;
}

.notebook-button:hover {
  transform: translateY(-3px) rotate(2deg);
}

.notebook-button span {
  border-radius: 999px;
  padding: 2px 8px;
  color: #6f3e55;
  background: white;
  font-weight: 900;
  font-size: 12px;
}

.action-zone {
  position: relative;
  z-index: 9;
  padding: 8px 18px 94px;
  text-align: center;
}

.action-zone > p {
  margin: 0 0 10px;
  color: white;
  font-weight: 900;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.44);
}

.action-buttons {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

@media (min-width: 461px) {
  .action-buttons:has(.training-action-button),
  .action-buttons:has(.lesson-action-button) {
    grid-template-columns: repeat(3, 178px);
    justify-content: center;
    gap: 4px;
  }
}

.action-button {
  position: relative;
  min-height: 126px;
  border: 4px solid white;
  border-radius: 14px;
  padding: 10px 7px 9px;
  overflow: hidden;
  color: #605b65;
  background: linear-gradient(180deg, #fff, #f3f8ff);
  box-shadow: 0 12px 26px rgba(24, 20, 32, 0.28);
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.action-button::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 58%;
  background: linear-gradient(135deg, var(--violet), var(--action-color));
}

.action-button:hover {
  transform: translateY(-5px) scale(1.025);
  box-shadow: 0 18px 34px rgba(24, 20, 32, 0.34);
  filter: saturate(1.08);
}

.action-button svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 44px;
  height: 44px;
  margin: 12px auto 19px;
  color: white;
}

.action-button span {
  position: relative;
  z-index: 1;
  display: block;
  color: #625e67;
  font-size: 17px;
  font-weight: 900;
}

.action-button .cost-badge,
.action-button .sp-badge {
  position: absolute;
  z-index: 2;
  top: 6px;
  right: 7px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  border-radius: 999px;
  padding: 2px 7px;
  color: white;
  background: rgba(55, 52, 60, 0.82);
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
}

.action-button .sp-badge {
  left: -8px;
  right: auto;
  top: -8px;
  width: 52px;
  min-width: 0;
  height: 52px;
  justify-content: center;
  padding: 0;
  overflow: hidden;
  border: 0;
  color: transparent;
  background: transparent;
  border-radius: 0;
  pointer-events: none;
}

.action-button .sp-badge-image {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  width: 500%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  user-select: none;
}

.action-button.training-action-button,
.action-button.lesson-action-button {
  min-height: 178px;
  padding: 0;
  border: 0;
  overflow: visible;
  background: transparent;
  box-shadow: none;
}

.action-button.training-action-button::before,
.action-button.lesson-action-button::before {
  content: none;
}

.training-action-visual,
.lesson-action-visual {
  position: relative;
  display: block;
  width: min(100%, 178px);
  aspect-ratio: 1;
  margin: 0 auto;
  overflow: hidden;
  color: #fff;
}

.action-button .training-action-image,
.action-button .lesson-action-image {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 0;
  display: block;
  width: 175%;
  max-width: none;
  height: auto;
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.action-button .training-action-cost,
.action-button .training-action-label {
  position: absolute;
  z-index: 1;
  display: block;
  width: auto;
  margin: 0;
  color: inherit;
  font-family: var(--font-display);
  font-weight: 900;
  line-height: 1;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.action-button .training-action-cost {
  top: 10%;
  right: 18%;
  color: #fff;
  font-size: 18px;
}

.action-button .training-action-label {
  right: 12%;
  bottom: 13%;
  left: 12%;
  color: #3b3840;
  font-size: 17px;
  text-align: center;
  text-shadow: none;
}

.action-button .lesson-action-label {
  position: absolute;
  right: 12%;
  bottom: 13%;
  left: 12%;
  z-index: 1;
  display: block;
  width: auto;
  margin: 0;
  color: #3b3840;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 900;
  line-height: 1;
  text-align: center;
  text-shadow: none;
  pointer-events: none;
}

.action-button.training-action-button .sp-badge {
  top: -1px;
  left: calc(50% - 96px);
}

.action-button.training-action-button:hover,
.action-button.lesson-action-button:hover {
  box-shadow: none;
  filter: saturate(1.08) drop-shadow(0 14px 16px rgba(24, 20, 32, 0.26));
}

.action-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  filter: grayscale(0.55);
  transform: none;
}

.action-zone.is-summary-round .action-buttons {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.action-zone.is-summary-round .action-button[data-action="next_day"] {
  box-shadow: 0 10px 24px rgba(255, 79, 154, 0.22);
}

.summary-placeholder-panel {
  max-width: 520px;
}

.day-summary-overlay {
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
  background:
    radial-gradient(circle at 50% 12%, rgba(255, 255, 255, 0.14), transparent 38%),
    rgba(16, 16, 22, 0.62);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.day-summary-tablet {
  position: relative;
  display: flex;
  flex-direction: column;
  width: min(100%, 630px);
  max-height: calc(var(--hatsu-viewport-height, 100dvh) - 32px);
  margin: 0 auto;
  overflow: hidden;
  border-radius: 26px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(248, 250, 255, 0.96) 100%);
  box-shadow:
    0 28px 64px rgba(18, 18, 24, 0.26),
    0 0 0 1px rgba(255, 255, 255, 0.72),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  font-family: "Noto Sans SC", "Noto Sans JP", var(--font-sans);
  color: var(--ink);
}

.day-summary-statusbar {
  flex: 0 0 auto;
  height: 8px;
  background: linear-gradient(90deg, #ffb347 0%, #ff9347 52%, #ff7f45 100%);
}

.day-summary-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 102, 128, 0.16) transparent;
}

.day-summary-scroll::-webkit-scrollbar {
  width: 5px;
}

.day-summary-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.day-summary-scroll::-webkit-scrollbar-thumb {
  background: rgba(111, 102, 128, 0.14);
  border-radius: 999px;
}

.day-summary-scroll:hover::-webkit-scrollbar-thumb {
  background: rgba(111, 102, 128, 0.24);
}

.day-summary-head {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr) 108px;
  gap: 16px 18px;
  padding: 18px 24px 10px;
  align-items: start;
}

.day-summary-avatar {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 6px;
  background: linear-gradient(135deg, #fff7f0, #eef4ff);
  box-shadow:
    inset 0 0 0 1px rgba(111, 102, 128, 0.1),
    0 8px 18px rgba(18, 18, 24, 0.06);
}

.day-summary-meta {
  display: grid;
  gap: 0;
  padding-top: 2px;
}

.day-summary-field {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid rgba(111, 102, 128, 0.12);
}

.day-summary-label {
  font-size: 13px;
  color: rgba(36, 33, 38, 0.5);
  letter-spacing: 0.08em;
}

.day-summary-value {
  font-size: clamp(19px, 2.2vw, 24px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #242126;
}

.day-summary-day-chip {
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: 0.06em;
  color: rgba(36, 33, 38, 0.48);
}

.day-summary-day-chip span {
  color: rgba(36, 33, 38, 0.72);
  font-weight: 600;
}

.day-summary-logo-wrap {
  display: flex;
  align-items: flex-start;
  justify-content: flex-end;
  padding-top: 2px;
}

.day-summary-logo {
  width: 100%;
  max-width: 92px;
  height: auto;
  object-fit: contain;
  opacity: 0.88;
  filter: drop-shadow(0 4px 10px rgba(18, 18, 24, 0.06));
}

.day-summary-chart {
  margin: 4px 20px 0;
  padding: 18px 12px 10px;
  border-radius: 18px;
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(245, 248, 255, 0.88));
  box-shadow: inset 0 0 0 1px rgba(111, 102, 128, 0.08);
}

.day-summary-radar {
  display: block;
  width: min(100%, 440px);
  height: auto;
  margin: 0 auto;
}

.day-summary-radar-grid {
  fill: none;
  stroke: rgba(111, 102, 128, 0.14);
  stroke-width: 1;
}

.day-summary-radar-shape {
  fill: url(#daySummaryRadarFill);
  stroke: #58aef0;
  stroke-width: 1.4;
  stroke-linejoin: round;
  filter: drop-shadow(0 8px 16px rgba(79, 167, 239, 0.16));
}

.day-summary-radar-labels text {
  font-size: 12.5px;
  font-weight: 500;
  fill: rgba(36, 33, 38, 0.72);
  font-family: "Noto Sans SC", "Noto Sans JP", var(--font-sans);
  letter-spacing: 0.03em;
}

.day-summary-notes-wrap {
  padding: 14px 24px 8px;
}

.day-summary-notes {
  display: grid;
  gap: 0;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(111, 102, 128, 0.08);
}

.day-summary-line {
  margin: 0;
  padding: 14px 16px;
  border-bottom: 1px solid rgba(111, 102, 128, 0.1);
  font-size: 14.5px;
  line-height: 1.82;
  letter-spacing: 0.015em;
  color: rgba(36, 33, 38, 0.82);
  text-align: justify;
  font-weight: 400;
}

.day-summary-line:last-child {
  border-bottom: 0;
}

.day-summary-footer {
  flex: 0 0 auto;
  padding: 12px 20px 18px;
  background: linear-gradient(180deg, rgba(248, 250, 255, 0), rgba(248, 250, 255, 0.96) 28%);
  box-shadow: inset 0 1px 0 rgba(111, 102, 128, 0.08);
}

.day-summary-back-btn {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(111, 102, 128, 0.14);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: rgba(36, 33, 38, 0.78);
  font: 600 14px/1 var(--font-sans);
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease, color 160ms ease;
  box-shadow: 0 8px 18px rgba(18, 18, 24, 0.05);
}

.day-summary-back-btn:hover {
  transform: translateY(-1px);
  border-color: rgba(255, 79, 154, 0.22);
  color: #242126;
  box-shadow: 0 10px 22px rgba(255, 79, 154, 0.1);
}

.day-summary-back-btn:active {
  transform: translateY(0);
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

@media (max-width: 560px) {
  .day-summary-tablet {
    width: 100%;
    border-radius: 20px;
  }

  .day-summary-head {
    grid-template-columns: 78px minmax(0, 1fr) 76px;
    gap: 12px;
    padding: 14px 16px 8px;
  }

  .day-summary-avatar {
    width: 78px;
    height: 78px;
  }

  .day-summary-logo {
    max-width: 72px;
  }

  .day-summary-chart {
    margin-inline: 12px;
    padding-inline: 8px;
  }

  .day-summary-notes-wrap {
    padding: 12px 16px 6px;
  }

  .day-summary-line {
    padding-inline: 12px;
    font-size: 14px;
  }

  .day-summary-footer {
    padding: 10px 14px 14px;
  }
}

.summary-placeholder-note {
  margin: 0 0 16px;
  line-height: 1.65;
  color: rgba(36, 33, 38, 0.82);
}

.summary-placeholder-card {
  padding: 16px 18px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 247, 240, 0.95), rgba(242, 247, 255, 0.95));
  border: 1px solid rgba(111, 102, 128, 0.12);
  margin-bottom: 18px;
}

.summary-placeholder-kicker {
  margin: 0 0 10px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(36, 33, 38, 0.55);
}

.summary-placeholder-list {
  margin: 0;
  padding-left: 18px;
  line-height: 1.7;
  color: rgba(36, 33, 38, 0.78);
}

.phone-placeholder-shell {
  display: grid;
  place-items: center;
  margin-bottom: 16px;
}

/* ── Mini Phone / LINE Chat ── */

.event-overlay.phone-overlay {
  align-items: center;
  justify-content: center;
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  background: rgba(12, 10, 18, 0.72);
  --phone-max-h: min(calc(100dvh - 56px), 960px);
  --phone-max-w: min(96vw, 540px);
  --phone-shell-height: min(var(--phone-max-h), calc(var(--phone-max-w) * 19.2 / 9));
  --phone-shell-width: calc(var(--phone-shell-height) * 9 / 19.2);
}

.mini-phone-frame {
  display: grid;
  gap: 10px;
  justify-items: center;
  width: var(--phone-shell-width);
}

.mini-phone-bezel {
  width: 100%;
  height: var(--phone-shell-height);
  border-radius: clamp(28px, 4vw, 42px);
  padding: clamp(10px, 1.4vw, 14px);
  background: linear-gradient(165deg, #2a2633 0%, #15121a 100%);
  border: 2px solid rgba(255, 255, 255, 0.14);
  box-shadow:
    0 28px 60px rgba(8, 6, 14, 0.45),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06);
  position: relative;
  display: flex;
  flex-direction: column;
}

.mini-phone-notch {
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%);
  width: 92px;
  height: 22px;
  border-radius: 0 0 16px 16px;
  background: #0f0d14;
  z-index: 3;
}

.mini-phone-screen {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-radius: 26px;
  overflow: hidden;
  background: #f5f5f5;
}

.mini-phone-statusbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 28px;
  padding: 8px 16px 0;
  font-size: 11px;
  font-weight: 600;
  transition: background 0.2s ease, color 0.2s ease;
}

.mini-phone-statusbar.is-home {
  color: #111;
  background: transparent;
}

.mini-phone-statusbar.is-line {
  color: #111;
  background: var(--line-green, #06c755);
}

.mini-phone-statusbar.is-home .mini-phone-signal,
.mini-phone-statusbar.is-home .mini-phone-wifi,
.mini-phone-statusbar.is-home .mini-phone-battery,
.mini-phone-statusbar.is-home .mini-phone-battery::after {
  background: #111;
}

.phone-home-view {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.phone-home-view[hidden] {
  display: none !important;
}

.phone-home-wallpaper {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.72), transparent 34%),
    radial-gradient(circle at 82% 20%, rgba(255, 200, 220, 0.42), transparent 28%),
    radial-gradient(circle at 50% 100%, rgba(143, 211, 255, 0.38), transparent 42%),
    linear-gradient(165deg, #f7f2ff 0%, #eef6ff 42%, #fff6ef 100%);
}

.phone-home-content {
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 10px 18px 8px;
}

.phone-home-head {
  padding: 6px 2px 14px;
}

.phone-home-date {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: rgba(17, 17, 17, 0.72);
}

.phone-home-greeting {
  margin: 4px 0 0;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(17, 17, 17, 0.88);
}

.phone-app-grid,
.phone-dock-apps {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 10px;
}

.phone-app-grid {
  align-content: start;
}

.phone-app-icon,
.phone-app-slot {
  position: relative;
  display: grid;
  gap: 6px;
  justify-items: center;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.phone-app-icon-badge,
.phone-app-slot-badge {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--app-color, #06c755);
  color: #fff;
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, 0.22),
    0 8px 18px rgba(17, 17, 17, 0.12);
}

.phone-app-icon-label {
  font-size: 11px;
  color: rgba(17, 17, 17, 0.82);
  text-align: center;
  line-height: 1.2;
}

.phone-app-slot-empty {
  cursor: default;
  opacity: 0.72;
}

.phone-app-slot-badge {
  background: rgba(255, 255, 255, 0.58);
  color: rgba(17, 17, 17, 0.42);
  font-size: 24px;
  font-weight: 500;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.phone-home-dock {
  position: relative;
  z-index: 1;
  margin: 0 12px 10px;
  padding: 10px 12px;
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.52);
}

.phone-navbar {
  flex: 0 0 auto;
  z-index: 6;
  display: flex;
  align-items: stretch;
  justify-content: space-around;
  gap: 4px;
  padding: 6px 16px calc(7px + env(safe-area-inset-bottom, 0px));
  background: rgba(11, 11, 16, 0.92);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

.phone-navbar[hidden] {
  display: none !important;
}

.phone-nav-btn {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 4px 0;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.12s ease;
}

.phone-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}

.phone-nav-btn:active {
  transform: scale(0.93);
}

.phone-nav-btn svg {
  width: 21px;
  height: 21px;
}

.phone-nav-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.3px;
}

.mini-phone-signal,
.mini-phone-wifi,
.mini-phone-battery {
  display: inline-block;
  background: #111;
  opacity: 0.82;
}

.mini-phone-signal {
  width: 14px;
  height: 8px;
  clip-path: polygon(0 100%, 25% 40%, 50% 70%, 75% 20%, 100% 100%);
}

.mini-phone-wifi {
  width: 10px;
  height: 8px;
  border-radius: 8px 8px 0 0;
  border: 2px solid #111;
  border-bottom: none;
  opacity: 0.7;
}

.mini-phone-battery {
  width: 18px;
  height: 8px;
  border: 1.5px solid #111;
  border-radius: 2px;
  position: relative;
}

.mini-phone-battery::after {
  content: "";
  position: absolute;
  inset: 1.5px 4px 1.5px 1.5px;
  border-radius: 1px;
  background: #111;
}

.line-app[hidden] {
  display: none !important;
}

.line-app {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  --line-green: #06c755;
  --line-green-dark: #05b34c;
  --line-chat-bg: #8da8b8;
  --line-bubble-out: #8de979;
  --line-bubble-in: #ffffff;
  --line-list-bg: #ffffff;
  --line-text: #111111;
  --line-muted: rgba(17, 17, 17, 0.52);
}

.mini-phone-status-icons {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.line-view {
  position: absolute;
  inset: 0;
  z-index: 1;
  display: flex;
  flex-direction: column;
  background: var(--line-list-bg);
}

.line-view[hidden] {
  display: none !important;
}

.line-view-chat {
  z-index: 2;
  background: var(--line-chat-bg);
}

.line-topbar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 12px;
  background: var(--line-green);
  color: #fff;
}

.line-topbar-main {
  padding-top: 2px;
}

.line-topbar-title {
  margin: 0;
  flex: 1 1 auto;
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.line-topbar-subtitle {
  margin: 2px 0 0;
  font-size: 11px;
  opacity: 0.88;
}

.line-topbar-chat-meta {
  flex: 1 1 auto;
  min-width: 0;
}

.line-topbar-chat-meta .line-topbar-title {
  font-size: 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-topbar-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.line-icon-btn,
.line-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  cursor: pointer;
}

.line-icon-btn svg,
.line-back-btn svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.line-back-btn {
  margin-left: -4px;
}

.line-list-search {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 12px 4px;
  padding: 8px 12px;
  border-radius: 8px;
  background: #efefef;
  color: var(--line-muted);
  font-size: 13px;
}

.line-list-search-icon svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.line-chat-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.line-thread {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 10px;
  width: 100%;
  padding: 12px 14px;
  border: 0;
  border-bottom: 1px solid rgba(17, 17, 17, 0.06);
  background: #fff;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease;
}

.line-thread:hover,
.line-thread:focus-visible {
  background: #f7fbf8;
  outline: none;
}

.line-thread-avatar {
  width: 52px;
  height: 52px;
  border-radius: 999px;
  object-fit: cover;
  background: linear-gradient(135deg, #dff6e7, #c9ead4);
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.line-thread-avatar.is-group {
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #7bc99a, #06c755);
}

.line-thread-avatar.is-official {
  background: linear-gradient(135deg, #ffd978, #ffb347);
  color: #fff;
}

.line-thread-body {
  min-width: 0;
  display: grid;
  gap: 4px;
  align-content: center;
}

.line-thread-head,
.line-thread-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.line-thread-name {
  font-size: 15px;
  font-weight: 700;
  color: var(--line-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-thread-time {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--line-muted);
}

.line-thread-text {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  color: var(--line-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.line-thread-badge {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 999px;
  background: var(--line-green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.line-tabbar {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid rgba(17, 17, 17, 0.08);
  background: #fff;
}

.line-tab {
  display: grid;
  gap: 2px;
  justify-items: center;
  padding: 4px 0;
  border: 0;
  background: transparent;
  color: var(--line-muted);
  font-size: 10px;
  cursor: default;
}

.line-tab-active {
  color: var(--line-green);
}

.line-tab-icon {
  width: 22px;
  height: 22px;
  position: relative;
}

.line-tab-icon-home::before,
.line-tab-icon-chat::before,
.line-tab-icon-call::before,
.line-tab-icon-wallet::before,
.line-tab-icon-more::before {
  content: "";
  position: absolute;
  inset: 3px;
  border: 2px solid currentColor;
  border-radius: 4px;
}

.line-tab-icon-chat::before {
  border-radius: 6px 6px 6px 2px;
}

.line-tab-icon-call::before {
  border-radius: 999px;
  inset: 4px 6px;
}

.line-tab-icon-wallet::before {
  border-radius: 3px;
  inset: 5px 4px 4px;
}

.line-tab-icon-more::before {
  border: 0;
  box-shadow: -6px 0 0 currentColor, 0 0 0 currentColor, 6px 0 0 currentColor;
  width: 4px;
  height: 4px;
  border-radius: 999px;
  inset: 9px auto auto 9px;
}

.line-message-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: 14px 10px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.line-date-chip {
  align-self: center;
  padding: 4px 12px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(17, 17, 17, 0.72);
  font-size: 11px;
}

.line-msg {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 6px;
  align-items: end;
  max-width: 92%;
}

.line-msg-in {
  align-self: flex-start;
  grid-template-columns: 34px minmax(0, 1fr) auto;
}

.line-msg-out {
  align-self: flex-end;
  grid-template-columns: auto minmax(0, 1fr) auto;
}

.line-msg-avatar {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  object-fit: cover;
  background: #fff;
  box-shadow: inset 0 0 0 1px rgba(17, 17, 17, 0.08);
}

.line-msg-bubble {
  padding: 9px 12px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.45;
  word-break: break-word;
  box-shadow: 0 1px 2px rgba(17, 17, 17, 0.08);
}

.line-msg-in .line-msg-bubble {
  background: var(--line-bubble-in);
  color: var(--line-text);
  border-top-left-radius: 4px;
}

.line-msg-out .line-msg-bubble {
  background: var(--line-bubble-out);
  color: var(--line-text);
  border-top-right-radius: 4px;
}

.line-msg-time {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.82);
  white-space: nowrap;
  padding-bottom: 2px;
}

.line-msg-read {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.72);
  white-space: nowrap;
  padding-bottom: 2px;
}

.line-composer {
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px calc(8px + env(safe-area-inset-bottom, 0px));
  background: #f3f3f3;
  border-top: 1px solid rgba(17, 17, 17, 0.06);
}

.line-composer-addon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: rgba(17, 17, 17, 0.55);
}

.line-composer-addon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.line-composer-input {
  width: 100%;
  min-height: 36px;
  padding: 8px 12px;
  border: 0;
  border-radius: 18px;
  background: #fff;
  font: inherit;
  font-size: 14px;
  color: var(--line-text);
}

.line-composer-input:focus {
  outline: 2px solid rgba(6, 199, 85, 0.35);
  outline-offset: 0;
}

.line-send-btn {
  min-width: 52px;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 999px;
  background: var(--line-green);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.line-send-btn:disabled {
  opacity: 0.45;
  cursor: default;
}

.line-msg-typing {
  align-self: flex-start;
}

.line-typing-bubble {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 96px;
  padding: 10px 14px;
}

.line-typing-label {
  font-size: 12px;
  color: rgba(17, 17, 17, 0.58);
}

.line-typing-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.line-typing-dots span {
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: rgba(17, 17, 17, 0.34);
  animation: lineTypingDot 1.2s infinite ease-in-out;
}

.line-typing-dots span:nth-child(2) {
  animation-delay: 0.15s;
}

.line-typing-dots span:nth-child(3) {
  animation-delay: 0.3s;
}

.line-typing-retry {
  display: block;
  margin-top: 4px;
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(17, 17, 17, 0.46);
  font: inherit;
  font-size: 11px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.line-typing-retry:hover,
.line-typing-retry:focus-visible {
  color: rgba(17, 17, 17, 0.72);
  outline: none;
}

.line-chat-retry-hint {
  flex: 0 0 auto;
  display: flex;
  justify-content: center;
  padding: 4px 12px 0;
  background: #f3f3f3;
}

.line-chat-retry-btn {
  padding: 0;
  border: 0;
  background: transparent;
  color: rgba(17, 17, 17, 0.5);
  font: inherit;
  font-size: 12px;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}

.line-chat-retry-btn:hover,
.line-chat-retry-btn:focus-visible {
  color: rgba(17, 17, 17, 0.72);
  outline: none;
}

@keyframes lineTypingDot {
  0%, 80%, 100% {
    transform: translateY(0);
    opacity: 0.35;
  }
  40% {
    transform: translateY(-3px);
    opacity: 0.9;
  }
}

.line-readonly-note {
  flex: 0 0 auto;
  margin: 0;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom, 0px));
  background: #ececec;
  color: rgba(17, 17, 17, 0.62);
  font-size: 12px;
  text-align: center;
}

.mini-phone-exit-btn {
  min-width: 180px;
  padding: 10px 18px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff7f0;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}

.mini-phone-exit-btn:hover,
.mini-phone-exit-btn:focus-visible {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.32);
  outline: none;
}

.line-view-add-friend {
  background: #fff;
}

.line-add-friend-form {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 18px 16px 24px;
  display: grid;
  gap: 12px;
  align-content: start;
}

.line-add-friend-label {
  font-size: 13px;
  color: rgba(17, 17, 17, 0.58);
}

.line-add-friend-input {
  width: 100%;
  min-height: 42px;
  padding: 10px 14px;
  border: 1px solid rgba(17, 17, 17, 0.12);
  border-radius: 12px;
  font: inherit;
  font-size: 15px;
  color: var(--line-text, #111);
  background: #fafafa;
}

.line-add-friend-input:focus {
  outline: 2px solid rgba(6, 199, 85, 0.35);
  outline-offset: 0;
  border-color: rgba(6, 199, 85, 0.45);
  background: #fff;
}

.line-add-friend-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(17, 17, 17, 0.58);
}

.line-add-friend-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.line-add-friend-chip {
  padding: 8px 12px;
  border: 1px solid rgba(6, 199, 85, 0.22);
  border-radius: 999px;
  background: rgba(6, 199, 85, 0.08);
  color: #067a36;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.line-add-friend-chip:hover,
.line-add-friend-chip:focus-visible {
  background: rgba(6, 199, 85, 0.16);
  outline: none;
}

.line-add-friend-submit {
  margin-top: 4px;
  min-height: 44px;
  border: 0;
  border-radius: 12px;
  background: var(--line-green, #06c755);
  color: #fff;
  font: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
}

.line-add-friend-submit:disabled {
  opacity: 0.45;
  cursor: default;
}

.phone-placeholder-screen {
  width: min(100%, 240px);
  aspect-ratio: 9 / 18;
  border-radius: 28px;
  padding: 18px 16px;
  background: linear-gradient(180deg, #1d1b24 0%, #2d2640 100%);
  border: 2px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 18px 40px rgba(18, 18, 24, 0.28);
  color: #fff7f0;
}

.phone-placeholder-status {
  margin: 0 0 18px;
  font-size: 12px;
  opacity: 0.72;
}

.phone-placeholder-title {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 700;
}

.phone-placeholder-desc {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  opacity: 0.78;
}

.bottom-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 15;
  display: flex;
  justify-content: space-around;
  gap: 10px;
  padding: 0 16px;
}

.dock-button {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  color: white;
  background: rgba(33, 32, 38, 0.78);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.22);
  backdrop-filter: blur(12px);
  transition: transform 180ms ease, background 180ms ease;
}

.dock-button.muted {
  background: rgba(255, 255, 255, 0.36);
}

.dock-button.primary:hover,
.dock-button.muted:hover {
  transform: translateY(-4px);
}

.toast-stack {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 80;
  display: grid;
  gap: 10px;
  width: min(360px, calc(100vw - 36px));
}

.toast {
  border: 2px solid rgba(255, 255, 255, 0.84);
  border-radius: 12px;
  padding: 12px 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  box-shadow: 0 16px 38px rgba(25, 22, 34, 0.22);
  backdrop-filter: blur(16px);
  animation: toastIn 220ms ease-out both;
}

.toast strong {
  display: block;
  margin-bottom: 3px;
}

.toast p {
  margin: 0;
  color: var(--soft-ink);
  line-height: 1.5;
  font-size: 13px;
}

.event-overlay,
.notebook-drawer,
.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 70;
  display: grid;
  place-items: end center;
  padding: 16px;
  background: rgba(17, 15, 22, 0.42);
  backdrop-filter: blur(14px);
  animation: fadeIn 220ms ease-out both;
}

.notebook-drawer[hidden],
.event-overlay[hidden],
.modal-backdrop[hidden],
.live-theater-overlay[hidden],
.live-play-prompt[hidden] {
  display: none !important;
}

.event-overlay {
  z-index: 68;
  place-items: center;
  padding: 18px;
  background:
    radial-gradient(circle at 50% 18%, rgba(255, 255, 255, 0.22), transparent 34%),
    rgba(17, 15, 22, 0.56);
}

.event-overlay.phone-overlay {
  padding: max(8px, env(safe-area-inset-top)) 10px max(8px, env(safe-area-inset-bottom));
  background: rgba(12, 10, 18, 0.72);
}

.event-panel {
  position: relative;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  width: min(520px, 100%);
  max-height: min(760px, calc(100svh - 36px));
  border: 3px solid rgba(255, 255, 255, 0.88);
  border-radius: 20px;
  padding: 18px;
  overflow: hidden;
  color: var(--ink);
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(246, 249, 255, 0.9)),
    radial-gradient(circle at 82% 0, rgba(255, 79, 154, 0.14), transparent 35%);
  box-shadow: 0 30px 88px rgba(0, 0, 0, 0.38);
  animation: drawerIn 220ms ease-out both;
}

.event-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 7px;
  background: linear-gradient(90deg, var(--pink), var(--violet), var(--blue), var(--green));
}

.event-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
  padding-top: 5px;
}

.event-head h2 {
  margin: 0;
  font-size: 24px;
}

.event-phase {
  flex: 0 0 auto;
  border-radius: 999px;
  padding: 6px 10px;
  color: #fff;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  font-size: 12px;
  font-weight: 900;
}

.event-result {
  border: 2px solid rgba(111, 102, 128, 0.12);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--soft-ink);
  background: rgba(255, 255, 255, 0.72);
  font-size: 13px;
  font-weight: 800;
  line-height: 1.55;
}

.event-story {
  margin-top: 12px;
  overflow: auto;
  border-radius: 14px;
  padding: 16px;
  color: #36313d;
  background:
    linear-gradient(rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0.72)),
    repeating-linear-gradient(0deg, transparent 0 31px, rgba(117, 110, 130, 0.09) 32px 33px);
  font-size: 16px;
  font-weight: 700;
  line-height: 1.9;
  white-space: pre-wrap;
}

.ai-prompt-panel {
  width: min(620px, 100%);
}

.interaction-panel {
  width: min(680px, 100%);
  max-height: min(860px, calc(100svh - 36px));
  overflow-y: auto;
}

.interaction-mode {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  padding: 5px;
  border-radius: 12px;
  background: rgba(111, 102, 128, 0.1);
}

.interaction-mode-button {
  min-height: 42px;
  border: 0;
  border-radius: 9px;
  color: var(--soft-ink);
  background: transparent;
  font: 900 14px/1 var(--font-ui);
  cursor: pointer;
}

.interaction-mode-button.active {
  color: #fff;
  background: linear-gradient(90deg, var(--pink), var(--violet));
  box-shadow: 0 8px 18px rgba(140, 115, 255, 0.24);
}

.interaction-character-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-top: 12px;
}

.interaction-character-list.is-disabled {
  opacity: 0.45;
}

.interaction-character-button {
  min-height: 46px;
  border: 2px solid rgba(111, 102, 128, 0.14);
  border-radius: 10px;
  padding: 8px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.8);
  font: 800 13px/1.25 var(--font-ui);
  cursor: pointer;
  transition: transform 160ms ease, border-color 160ms ease, background 160ms ease;
}

.interaction-character-button.selected {
  border-color: var(--idol-theme);
  color: #fff;
  background: linear-gradient(135deg, var(--idol-theme), var(--violet));
  transform: translateY(-1px);
}

.interaction-character-button:disabled {
  cursor: default;
}

.interaction-validation {
  min-height: 20px;
  margin: 8px 0 0;
  color: var(--green-dark);
  font-size: 12px;
  font-weight: 900;
}

.interaction-validation.is-warning {
  color: #c04a64;
}

.interaction-plot-field {
  display: grid;
  gap: 7px;
  margin-top: 10px;
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 900;
}

.interaction-plot-field textarea {
  width: 100%;
  min-height: 116px;
  resize: vertical;
  border: 2px solid rgba(111, 102, 128, 0.16);
  border-radius: 12px;
  padding: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.84);
  font: 700 14px/1.6 var(--font-ui);
}

@media screen and (max-width: 560px) {
  .interaction-character-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .interaction-panel {
    max-height: calc(100svh - 20px);
    padding: 14px;
  }
}

.ai-prompt-note {
  margin: 0 0 10px;
  color: var(--soft-ink);
  font-weight: 800;
  line-height: 1.65;
}

.ai-prompt-textarea {
  width: 100%;
  min-height: min(430px, 52svh);
  resize: vertical;
  border: 2px solid rgba(111, 102, 128, 0.16);
  border-radius: 14px;
  padding: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  box-shadow: inset 0 2px 12px rgba(30, 26, 38, 0.05);
}

.event-choices {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.choice-button {
  display: block;
  width: 100%;
  min-height: 48px;
  padding: 12px 18px;
  border: 2px solid rgba(140, 115, 255, 0.28);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.88);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 13.5px;
  font-weight: 800;
  text-align: left;
  line-height: 1.5;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(30, 26, 38, 0.04);
  transition: all 180ms ease;
}

.choice-button:hover {
  border-color: var(--violet);
  background: linear-gradient(135deg, rgba(255, 79, 154, 0.05) 0%, rgba(38, 169, 244, 0.05) 100%);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(140, 115, 255, 0.14);
}

.choice-button:active {
  transform: translateY(0);
}

.choice-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

.event-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1.2fr;
  gap: 8px;
  margin-top: 14px;
}

.event-button {
  min-height: 50px;
  border: 3px solid rgba(255, 255, 255, 0.86);
  border-radius: 14px;
  font-weight: 900;
  box-shadow: 0 10px 22px rgba(30, 26, 38, 0.16);
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.event-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(30, 26, 38, 0.22);
}

.event-button.secondary {
  color: var(--soft-ink);
  background: rgba(246, 248, 255, 0.92);
}

.event-button.primary {
  color: #fff;
  background: linear-gradient(135deg, var(--pink), var(--violet));
}

.drawer-panel,
.modal-panel {
  width: min(900px, 100%);
  max-height: min(760px, calc(100vh - 32px));
  overflow: auto;
  border: 2px solid rgba(255, 255, 255, 0.82);
  border-radius: 18px;
  padding: 16px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.32);
  animation: drawerIn 220ms ease-out both;
}

.drawer-head,
.modal-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.drawer-head h2,
.modal-head h2 {
  margin: 0;
}

.icon-button {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  color: #fff;
  background: rgba(33, 32, 38, 0.84);
}

.drawer-tabs,
.modal-tabs {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 12px;
}

.tab-button,
.modal-tab {
  min-height: 40px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  border-radius: var(--radius);
  color: var(--soft-ink);
  background: rgba(244, 246, 255, 0.82);
  font-weight: 900;
  transition: transform 180ms ease, background 180ms ease;
}

.tab-button.active,
.modal-tab.active {
  color: white;
  background: linear-gradient(135deg, var(--pink), var(--violet));
  box-shadow: 0 10px 20px rgba(148, 82, 190, 0.22);
}

.tab-button:hover,
.modal-tab:hover {
  transform: translateY(-1px);
}

.tab-panel {
  display: none;
}

.tab-panel.active {
  display: block;
}

#promptText {
  width: 100%;
  min-height: 410px;
  resize: vertical;
  border: 2px solid rgba(111, 102, 128, 0.14);
  border-radius: var(--radius);
  padding: 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.78);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
}

.log-list {
  display: grid;
  gap: 10px;
  max-height: 450px;
  overflow: auto;
  padding-right: 3px;
}

.log-item,
.modal-card,
.debug-panel {
  border: 2px solid rgba(111, 102, 128, 0.12);
  border-radius: var(--radius);
  padding: 12px;
  background: rgba(255, 255, 255, 0.74);
}

.log-item strong,
.modal-card strong {
  display: block;
  margin-bottom: 5px;
}

.log-item p,
.modal-card p {
  margin: 0;
  color: var(--soft-ink);
  line-height: 1.65;
  font-size: 13px;
}

.affinity-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.affinity-card {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 9px;
}

.affinity-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  background: linear-gradient(90deg, var(--idol-theme), #24d9c4);
  opacity: 0.22;
}

.affinity-card.unlocked::before {
  opacity: 1;
}

.affinity-card.pending {
  box-shadow: 0 20px 42px rgba(255, 79, 154, 0.2), inset 0 0 0 2px rgba(255, 79, 154, 0.24);
}

.affinity-card small {
  display: block;
  color: rgba(55, 55, 65, 0.56);
  font-size: 12px;
  line-height: 1.5;
}

.affinity-trigger {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 14px;
  color: #fff;
  font: 800 14px/1 var(--font-ui);
  background: linear-gradient(135deg, var(--idol-theme), #27d7c5);
  box-shadow: 0 12px 24px rgba(40, 40, 55, 0.18);
  cursor: pointer;
  transition: transform 180ms ease, box-shadow 180ms ease, filter 180ms ease;
}

.affinity-trigger:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 30px rgba(40, 40, 55, 0.24);
}

.affinity-trigger:disabled {
  color: rgba(55, 55, 65, 0.42);
  background: rgba(130, 130, 145, 0.16);
  box-shadow: none;
  cursor: not-allowed;
}

.outing-panel {
  display: flex;
  flex-direction: column;
  grid-template-rows: unset;
  width: min(560px, 100%);
  max-height: min(92svh, 820px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

#freeModeOutingOverlay .outing-panel {
  width: min(720px, 100%);
}

.companion-panel {
  max-height: min(90svh, 680px);
  overflow-y: auto;
}

.outing-destination-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 12px;
}

.outing-destination-button {
  min-height: 108px;
  border: 2px solid rgba(111, 102, 128, 0.14);
  border-radius: var(--radius);
  padding: 13px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 22px rgba(40, 35, 50, 0.1);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.outing-destination-button:hover {
  transform: translateY(-2px);
  border-color: var(--idol-theme);
  box-shadow: 0 14px 28px rgba(40, 35, 50, 0.16);
}

.outing-destination-button strong,
.outing-destination-button span {
  display: block;
}

.outing-destination-button strong {
  margin-bottom: 6px;
  font-size: 16px;
}

.outing-destination-button span {
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.5;
}

.outing-destination-button em {
  display: block;
  margin-top: 8px;
  font-style: normal;
  color: color-mix(in srgb, var(--idol-theme) 72%, #374151);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.45;
}

.off-campus-transit {
  margin: 16px 0 6px;
}

.off-campus-map-card {
  position: relative;
  overflow: hidden;
  border: 1px solid rgba(120, 90, 160, 0.16);
  border-radius: 26px;
  background:
    radial-gradient(120% 90% at 12% 6%, rgba(255, 138, 182, 0.16), transparent 46%),
    radial-gradient(120% 90% at 92% 10%, rgba(96, 165, 250, 0.16), transparent 48%),
    linear-gradient(160deg, #fbfcff 0%, #fdf4fa 58%, #f6f8ff 100%);
  box-shadow: 0 22px 52px rgba(48, 40, 78, 0.16);
}

.off-campus-map-card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(108, 92, 160, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(108, 92, 160, 0.045) 1px, transparent 1px);
  background-size: 22px 22px;
  mask-image: radial-gradient(140% 120% at 50% 30%, rgba(0, 0, 0, 0.85), transparent 82%);
}

.off-campus-map-head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px 0;
}

.off-campus-map-head strong,
.off-campus-map-kicker,
.off-campus-map-chip {
  display: block;
}

.off-campus-map-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #d6457f;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.off-campus-map-kicker::before {
  content: "";
  width: 16px;
  height: 3px;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7ab0, #6aa8ff);
}

.off-campus-map-head strong {
  margin-top: 6px;
  color: #221733;
  font-size: 20px;
  letter-spacing: 0.01em;
}

.off-campus-map-chip {
  flex: 0 0 auto;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.78);
  border: 1px solid rgba(120, 90, 160, 0.14);
  color: rgba(34, 23, 51, 0.66);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 18px rgba(120, 90, 160, 0.12);
}

.off-campus-map-canvas {
  position: relative;
  height: min(360px, 50svh);
  min-height: 300px;
  margin: 10px 18px 4px;
}

.off-campus-lines {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

.off-campus-line {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 3.4;
}

.off-campus-line-glow {
  filter: drop-shadow(0 6px 12px rgba(120, 90, 160, 0.2));
}

.off-campus-line-main {
  stroke: #ff5c93;
}

.off-campus-line-sports {
  stroke: #4a93ff;
}

.off-campus-line-home {
  stroke: #f4a83b;
  stroke-dasharray: 0.6 5.2;
  stroke-width: 3;
  opacity: 0.8;
}

.off-campus-line-media {
  stroke: #9b6cff;
  stroke-width: 3.2;
}

.off-campus-station-media .off-campus-station-dot {
  background: #9b6cff;
  box-shadow: 0 10px 20px rgba(155, 108, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.off-campus-station {
  position: absolute;
  z-index: 2;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 60px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #221733;
  font: inherit;
  font-size: 11px;
  font-weight: 800;
  cursor: pointer;
  transform: translate(-50%, -50%);
}

.off-campus-station-dot {
  display: grid;
  place-items: center;
  min-width: 42px;
  height: 42px;
  padding: 0 9px;
  border: 3px solid #fff;
  border-radius: 999px;
  background: #ff5c93;
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 20px rgba(255, 92, 147, 0.32), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
  transition: transform 200ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 200ms ease;
}

.off-campus-station-sports .off-campus-station-dot {
  background: #4a93ff;
  box-shadow: 0 10px 20px rgba(74, 147, 255, 0.3), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.off-campus-station-home .off-campus-station-dot {
  background: #f4a83b;
  box-shadow: 0 10px 20px rgba(244, 168, 59, 0.28), inset 0 0 0 1px rgba(255, 255, 255, 0.4);
}

.off-campus-station.is-hub .off-campus-station-dot {
  min-width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #ff7ab0, #6aa8ff);
  box-shadow: 0 14px 26px rgba(150, 110, 200, 0.36), inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

.off-campus-station.is-locked {
  opacity: 0.78;
}

.off-campus-station.is-locked .off-campus-station-dot {
  background: #fff;
  color: #9aa0b4;
  border-color: #fff;
  border-style: dashed;
  border-color: #c3c8d6;
  box-shadow: 0 8px 16px rgba(120, 90, 160, 0.16);
}

.off-campus-station-name {
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(120, 90, 160, 0.1);
  box-shadow: 0 8px 16px rgba(120, 90, 160, 0.12);
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.off-campus-station.is-locked .off-campus-station-name::after {
  content: "（预留）";
  color: #aab0c0;
  font-weight: 700;
}

.off-campus-station:hover .off-campus-station-dot,
.off-campus-station:focus-visible .off-campus-station-dot,
.off-campus-station.is-selected .off-campus-station-dot {
  transform: translateY(-3px) scale(1.1);
}

.off-campus-station.is-selected .off-campus-station-dot {
  box-shadow: 0 16px 30px rgba(255, 92, 147, 0.42), inset 0 0 0 2px rgba(255, 255, 255, 0.65);
}

.off-campus-station.is-selected .off-campus-station-name {
  color: #d6457f;
  border-color: rgba(214, 69, 127, 0.32);
}

.off-campus-station:focus-visible {
  outline: 2px solid #ff7ab0;
  outline-offset: 8px;
  border-radius: 999px;
}

.off-campus-legend {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 18px 16px;
  color: rgba(34, 23, 51, 0.6);
  font-size: 11px;
  font-weight: 800;
}

.off-campus-legend span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.74);
  border: 1px solid rgba(120, 90, 160, 0.1);
}

.off-campus-legend b {
  display: inline-block;
  width: 18px;
  height: 4px;
  border-radius: 999px;
}

.legend-main {
  background: #ff5c93;
}

.legend-sports {
  background: #4a93ff;
}

.legend-home {
  background: #f4a83b;
}

.legend-media {
  background: #9b6cff;
}

@media (max-width: 520px) {
  .outing-destination-list {
    grid-template-columns: 1fr;
  }

  .off-campus-map-canvas {
    height: min(320px, 46svh);
    min-height: 280px;
    margin-inline: 6px;
  }

  .off-campus-station {
    min-width: 52px;
    font-size: 10px;
  }

  .off-campus-station-dot {
    min-width: 38px;
    height: 38px;
    padding-inline: 7px;
  }

  .off-campus-station.is-hub .off-campus-station-dot {
    min-width: 42px;
    height: 42px;
  }
}

.outing-custom-field {
  display: grid;
  gap: 7px;
  margin-top: 14px;
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 800;
}

.outing-custom-field input {
  width: 100%;
  min-height: 46px;
  border: 2px solid rgba(111, 102, 128, 0.16);
  border-radius: 14px;
  padding: 0 14px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.9);
  font: 700 14px/1 var(--font-ui);
  outline: none;
}

.outing-custom-field input:focus {
  border-color: var(--idol-theme);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--idol-theme) 18%, transparent);
}

.intimacy-panel {
  max-height: min(90svh, 720px);
  overflow-y: auto;
}

.intimacy-mode-list {
  display: grid;
  gap: 10px;
}

.intimacy-mode-button {
  position: relative;
  min-height: 108px;
  border: 2px solid rgba(111, 102, 128, 0.14);
  border-radius: var(--radius);
  padding: 14px 96px 14px 14px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 22px rgba(40, 35, 50, 0.1);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.intimacy-mode-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: #f58ab5;
  box-shadow: 0 14px 28px rgba(40, 35, 50, 0.16);
}

.intimacy-mode-button:disabled {
  opacity: 0.58;
  cursor: not-allowed;
}

.intimacy-mode-button strong,
.intimacy-mode-button span {
  display: block;
}

.intimacy-mode-button strong {
  margin-bottom: 6px;
  font-size: 16px;
}

.intimacy-mode-button span {
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.55;
}

.intimacy-mode-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  min-width: 72px;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(245, 138, 181, 0.14);
  color: #d65f96;
  font: 800 11px/1.2 var(--font-ui);
  font-style: normal;
  text-align: center;
}

.intimacy-mode-badge.is-ready {
  background: rgba(32, 223, 173, 0.16);
  color: #0f9a78;
}

.intimacy-mode-badge.is-locked {
  background: rgba(111, 102, 128, 0.12);
  color: var(--soft-ink);
}

@media (max-width: 430px) {
  .outing-destination-list {
    grid-template-columns: 1fr;
  }
}

.debug-panel {
  white-space: pre-wrap;
  color: var(--soft-ink);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.65;
}

.modal-body {
  display: grid;
  gap: 12px;
}

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

@keyframes standeeBreathe {
  0%, 100% { transform: translateX(-48%) translateY(0); }
  50% { transform: translateX(-48%) translateY(-5px); }
}

@keyframes toastIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes drawerIn {
  from { opacity: 0; transform: translateY(18px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (min-width: 900px) {
  .game-stage {
    margin-top: 18px;
    margin-bottom: calc(18px - var(--stage-top-crop));
    border-radius: 28px;
    min-height: min(1040px, calc(100vh + 64px));
  }
}

@media (max-width: 760px) {
  .select-screen,
  .launch-screen {
    grid-template-columns: 1fr;
  }

  .select-visual,
  .launch-visual {
    min-height: 420px;
  }

  .select-visual h1,
  .launch-visual h1 {
    font-size: 48px;
  }
}

@media (max-width: 460px) {
  html,
  body {
    width: 100%;
    min-height: 100dvh;
    overflow-x: hidden;
  }

  .produce-app {
    width: 100%;
    min-height: 100dvh;
  }

  .select-screen {
    display: block;
    min-height: 100dvh;
    padding: 10px;
    overflow-y: auto;
  }

  .select-visual {
    min-height: auto;
    margin-bottom: 10px;
    padding: 18px;
    border-radius: 14px;
  }

  .select-visual::before,
  .select-visual::after,
  .select-rules,
  #selectDesc {
    display: none;
  }

  .select-visual h1 {
    margin: 0;
    font-size: 28px;
    line-height: 1.1;
  }

  .select-visual.is-scenario-preview {
    min-height: 390px;
  }

  .select-visual.is-scenario-preview #selectKicker,
  .select-visual.is-scenario-preview #selectTitle,
  .select-visual.is-scenario-preview #selectDesc,
  .select-visual.is-scenario-preview #selectRules,
  .select-visual.is-scenario-preview #selectBootActions {
    display: none;
  }

  .scenario-preview-logo,
  .select-visual.is-scenario-nia .scenario-preview-logo {
    width: min(760px, 145%);
    max-height: 310px;
  }

  .select-visual.is-scenario-nia .scenario-preview-logo {
    width: min(800px, 165%);
  }

  .select-visual .scenario-slogan {
    font-size: 14px;
    line-height: 1.65;
  }

  .select-panel {
    max-height: none;
    border-radius: 14px;
    padding: 10px;
  }

  .game-stage {
    width: 100%;
    min-height: calc(100dvh + var(--stage-top-crop));
    min-height: calc(var(--hatsu-viewport-height, 100dvh) + var(--stage-top-crop));
    max-width: none;
    margin: 0 0 calc(-1 * var(--stage-top-crop));
    border-radius: 0;
    overflow-y: auto;
    overflow-x: hidden;
  }

  .top-hud {
    gap: 8px;
    padding-inline: 10px;
  }

  .hud-card {
    min-height: 78px;
    padding: 11px 10px 9px;
  }

  .hud-card span {
    font-size: 11px;
  }

  .hud-card strong {
    font-size: 27px;
  }

  .advisor-bubble {
    left: 18px;
    right: 54px;
    font-size: 13px;
    max-height: 96px;
    overflow: hidden;
  }

  .idol-card-name {
    width: 164px;
    left: 12px;
  }

  .score-band {
    grid-template-columns: 58px 1fr 64px;
    padding-inline: 8px;
    margin-top: -22px;
  }

  .meter-arc::after {
    inset: 14px;
    font-size: 26px;
  }

  .action-zone {
    padding-inline: 10px;
    padding-bottom: max(86px, calc(env(safe-area-inset-bottom) + 76px));
  }

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

  .action-button {
    min-height: 92px;
    border-width: 3px;
    border-radius: 12px;
    padding: 8px 6px;
  }

  .action-button svg {
    width: 34px;
    height: 34px;
    margin: 8px auto 12px;
  }

  .action-button span {
    font-size: 15px;
  }

  .action-button.training-action-button,
  .action-button.lesson-action-button {
    min-height: 142px;
  }

  .training-action-visual,
  .lesson-action-visual {
    width: min(100%, 142px);
  }

  .action-button .training-action-cost {
    font-size: 15px;
  }

  .action-button .training-action-label {
    font-size: 14px;
  }

  .action-button .lesson-action-label {
    font-size: 14px;
  }

  .action-button.training-action-button .sp-badge {
    width: 44px;
    height: 44px;
    left: calc(50% - 78px);
  }

  .bottom-dock {
    padding-inline: 8px;
  }

  .dock-button {
    width: 52px;
    height: 52px;
  }

  .modal-grid,
  .drawer-tabs,
  .modal-tabs {
    grid-template-columns: 1fr;
  }

  .event-overlay,
  .modal-backdrop,
  .drawer-backdrop {
    padding: 8px;
    align-items: stretch;
  }

  .event-panel,
  .drawer-panel,
  .modal-panel,
  .interaction-panel,
  .outing-panel,
  .intimacy-panel,
  .ai-prompt-panel {
    width: 100%;
    max-height: calc(var(--hatsu-viewport-height, 100dvh) - 16px);
    border-radius: 16px;
    padding: 14px;
  }

  .event-head h2 {
    font-size: 20px;
  }

  .event-actions {
    grid-template-columns: 1fr;
  }

  .event-button {
    min-height: 44px;
  }
}

/* Live Theater Overlay */
.live-theater-overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  justify-content: center;
  align-items: center;
  background-color: #0b090f;
  opacity: 0;
  transition: opacity 500ms cubic-bezier(0.22, 1, 0.36, 1);
}

.live-theater-overlay:not([hidden]) {
  display: flex;
}

.live-theater-window {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}

.live-video {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  z-index: 1;
}

/* Glassmorphism Controls HUD */
.live-theater-hud {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  z-index: 10;
  pointer-events: none;
}

.live-hud-btn {
  pointer-events: auto;
  background: rgba(25, 20, 35, 0.45);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 50px;
  color: rgba(255, 255, 255, 0.85);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 200ms ease;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  font-family: inherit;
}

.live-hud-btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.45);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 6px 30px rgba(255, 79, 154, 0.2);
}

.live-hud-btn:active {
  transform: translateY(0);
}

/* Position skip button in the top right corner */
.live-hud-btn.skip-btn {
  align-self: flex-end;
  color: #ff4f9a;
  border-color: rgba(255, 79, 154, 0.25);
}

.live-hud-btn.skip-btn:hover {
  background: rgba(255, 79, 154, 0.15);
  border-color: rgba(255, 79, 154, 0.6);
  color: #fff;
}

/* Position volume/mute button in bottom right */
.live-hud-btn.volume-btn {
  align-self: flex-end;
  margin-top: auto;
  width: 44px;
  height: 44px;
  padding: 0;
  border-radius: 50%;
  color: rgba(255, 255, 255, 0.7);
}

.live-hud-btn.volume-btn.muted {
  color: rgba(255, 255, 255, 0.4);
  border-color: rgba(255, 255, 255, 0.08);
}

/* Play/Pause indicator when autoplay is blocked */
.live-play-prompt {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 16px;
  background: rgba(11, 9, 15, 0.6);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 5;
  cursor: pointer;
  animation: fadeIn 300ms ease;
}

.play-icon-ring {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 79, 154, 0.15);
  border: 2px solid rgba(255, 79, 154, 0.6);
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 0 30px rgba(255, 79, 154, 0.3);
  animation: pulseGlow 2s infinite ease-in-out;
}

.play-arrow {
  font-size: 32px;
  color: #ff4f9a;
  margin-left: 6px;
  text-shadow: 0 0 10px rgba(255, 79, 154, 0.5);
}

.live-play-prompt p {
  color: rgba(255, 255, 255, 0.9);
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  letter-spacing: 2px;
  animation: textBlink 1.5s infinite ease-in-out;
}

/* Animations */
@keyframes pulseGlow {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 0 20px rgba(255, 79, 154, 0.2);
    border-color: rgba(255, 79, 154, 0.4);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 0 0 40px rgba(255, 79, 154, 0.5);
    border-color: rgba(255, 79, 154, 0.8);
  }
}

@keyframes textBlink {
  0%, 100% {
    opacity: 0.6;
  }
  50% {
    opacity: 1;
  }
}

/* ── Splash Screen ── */
.splash-screen {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  animation: splashFadeOut 0.8s ease 3.2s forwards;
}

.splash-bg {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 45%, rgba(255, 220, 230, 0.35), transparent 70%),
    linear-gradient(160deg, #fdf6f0 0%, #fce8e2 30%, #fdeef5 55%, #eaf2fb 100%);
}

.splash-logo {
  position: relative;
  z-index: 2;
  width: min(580px, 72vw);
  max-width: 90%;
  opacity: 0;
  transform: scale(0.88) translateY(12px);
  animation: splashLogoIn 1s cubic-bezier(0.23, 1, 0.32, 1) 0.3s forwards;
  filter: drop-shadow(0 8px 40px rgba(240, 145, 160, 0.25));
}

.splash-shimmer {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 255, 255, 0.55) 44%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.55) 56%,
    transparent 62%
  );
  transform: translateX(-120%);
  animation: splashShimmer 1.1s ease 1.4s forwards;
  pointer-events: none;
}

/* ── Sakura Petals ── */
.splash-petals {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}

.petal {
  position: absolute;
  display: block;
  width: 14px;
  height: 10px;
  background: radial-gradient(ellipse, #f8b4c0 0%, #fcd4d8 60%, transparent 100%);
  border-radius: 50% 0 50% 0;
  opacity: 0;
  /* distribute across viewport using the --i custom property */
  left: calc(8% + (var(--i) * 8%));
  top: calc(-10px - (var(--i) * 6px));
  animation: petalFall calc(2.6s + var(--i) * 0.15s) ease-in calc(0.4s + var(--i) * 0.18s) forwards;
}

.petal:nth-child(even) {
  width: 11px;
  height: 8px;
  background: radial-gradient(ellipse, #fcc5c0 0%, #fde4e0 60%, transparent 100%);
  border-radius: 0 50% 0 50%;
}

/* ── Splash Keyframes ── */
@keyframes splashLogoIn {
  0% {
    opacity: 0;
    transform: scale(0.88) translateY(12px);
  }
  100% {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

@keyframes splashShimmer {
  0% { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

@keyframes splashFadeOut {
  0% {
    opacity: 1;
    filter: blur(0);
  }
  100% {
    opacity: 0;
    filter: blur(6px);
    visibility: hidden;
  }
}

@keyframes petalFall {
  0% {
    opacity: 0;
    transform: translateY(0) rotate(0deg) scale(0.7);
  }
  12% {
    opacity: 0.85;
  }
  100% {
    opacity: 0;
    transform: translateY(calc(100vh + 30px)) rotate(calc(220deg + var(--i) * 35deg)) scale(1);
  }
}

.splash-screen.is-dismissed {
  animation: splashFadeOut 0.6s ease forwards !important;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

/* Producer Setup Screen Styles */
.producer-form {
  display: grid;
  gap: 16px;
  margin-top: 16px;
  width: 100%;
}

.form-group {
  display: grid;
  gap: 6px;
}

.form-group label {
  color: var(--soft-ink);
  font-size: 13px;
  font-weight: 800;
}

.form-group .input-wrapper input {
  width: 100%;
  min-height: 44px;
  border: 2px solid rgba(111, 102, 128, 0.14);
  border-radius: 12px;
  padding: 0 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  font: 700 14px var(--font-ui);
  outline: none;
  transition: all 0.2s ease;
}

.form-group .input-wrapper input:focus,
.form-group .textarea-wrapper textarea:focus {
  border-color: var(--idol-theme, #ff8ab9);
  background: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--idol-theme, #ff8ab9) 15%, transparent);
}

.form-group .textarea-wrapper textarea {
  width: 100%;
  min-height: 80px;
  resize: vertical;
  border: 2px solid rgba(111, 102, 128, 0.14);
  border-radius: 12px;
  padding: 10px 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.85);
  font: 700 14px/1.5 var(--font-ui);
  outline: none;
  transition: all 0.2s ease;
}

.quick-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.quick-tag-btn {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(111, 102, 128, 0.2);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s ease;
}

.quick-tag-btn:hover {
  background: var(--idol-theme, #ff8ab9);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 4px 10px color-mix(in srgb, var(--idol-theme, #ff8ab9) 30%, transparent);
}

.producer-form-actions {
  display: flex;
  gap: 12px;
  margin-top: 12px;
}

.producer-form-actions button {
  flex: 1;
}

.producer-form-actions .secondary-action:hover {
  background: rgba(0, 0, 0, 0.05) !important;
}

.nia-inheritance-form {
  gap: 14px;
}

.nia-inheritance-summary {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.nia-inheritance-summary > div {
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px;
  border: 1px solid color-mix(in srgb, var(--idol-theme, #ff8ab9) 28%, transparent);
  border-radius: 8px;
  background: color-mix(in srgb, var(--idol-theme, #ff8ab9) 8%, rgba(255, 255, 255, 0.82));
}

.nia-inheritance-summary span {
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 700;
}

.nia-inheritance-summary strong {
  overflow-wrap: anywhere;
  color: var(--ink);
  font-size: 15px;
}

.nia-inheritance-lead {
  margin: 0;
  color: var(--soft-ink);
  font-size: 13px;
  line-height: 1.6;
}

@media (max-width: 620px) {
  .nia-inheritance-summary { grid-template-columns: 1fr; }
  .nia-inheritance-form .producer-form-actions { flex-direction: column-reverse; }
}

.line-msg-schedule { max-width: 96%; }
.line-schedule-card { width: min(272px, 72vw); overflow: hidden; border: 1px solid rgba(17,17,17,.12); border-radius: 8px; background: #fff; color: #202124; box-shadow: 0 2px 8px rgba(17,17,17,.12); }
.line-schedule-head { display: flex; gap: 10px; align-items: center; padding: 12px; border-bottom: 1px solid #eceef0; }
.line-schedule-head > span:last-child { display: grid; gap: 2px; min-width: 0; }
.line-schedule-head strong { font-size: 13px; }
.line-schedule-head small { color: #6b7078; font-size: 10px; }
.line-schedule-icon { display: grid; place-items: center; width: 34px; height: 34px; flex: 0 0 34px; border-radius: 6px; background: #e94e61; color: #fff; }
.line-schedule-icon svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 2; }
.line-schedule-days { display: grid; }
.line-schedule-day { display: grid; grid-template-columns: 43px minmax(0,1fr); gap: 8px; padding: 8px 10px; border-bottom: 1px solid #f0f1f2; }
.line-schedule-day:last-child { border-bottom: 0; }
.line-schedule-day > b { color: #e3485b; font-size: 10px; padding-top: 2px; }
.line-schedule-day > span { display: grid; min-width: 0; }
.line-schedule-day em { color: #777d85; font-size: 9px; font-style: normal; }
.line-schedule-day strong { font-size: 11px; overflow-wrap: anywhere; }
.line-schedule-day small { color: #777d85; font-size: 9px; line-height: 1.35; }
.line-schedule-actions { padding: 8px 10px; background: #f3f3f3; border-top: 1px solid rgba(17,17,17,.06); }
.line-schedule-action { width: 100%; min-height: 40px; border: 0; border-radius: 6px; font-weight: 700; cursor: pointer; }
.line-schedule-action.is-retry { background: #fff; color: #35383c; border: 1px solid #d7dadd; }
.line-schedule-action.is-start { background: #06c755; color: #fff; }

.sandbox-api-form {
  align-content: start;
}

.sandbox-api-form .world-engine-field,
.sandbox-api-form .world-engine-toggle {
  margin: 0;
}

.sandbox-api-form .world-engine-settings-status {
  min-height: 32px;
  margin: 2px 0 0;
}

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

.sandbox-api-actions .confirm-idol-btn {
  min-width: 0;
  margin: 0;
  padding: 12px 10px;
}

.sandbox-api-actions #sandboxApiContinueBtn {
  grid-column: 1 / -1;
}

.sandbox-api-actions .secondary-action {
  border: 1px solid rgba(111, 102, 128, 0.22);
  background: rgba(255, 255, 255, 0.72);
  color: var(--ink);
}

@media (max-width: 620px) {
  .sandbox-api-actions {
    grid-template-columns: 1fr;
  }

  .sandbox-api-actions #sandboxApiContinueBtn {
    grid-column: auto;
  }
}

/* Wipe Transition Styles */
.wipe-transition {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
  display: flex;
  flex-direction: column;
}

.wipe-transition[hidden] {
  display: none !important;
}

.wipe-stripe {
  position: absolute;
  left: 0;
  width: 100%;
  height: calc(100% / 6 + 2px);
  top: calc(var(--i) * (100% / 6));
  background-color: var(--wipe-color, #ff4f9a);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.wipe-transition.animating .wipe-stripe {
  animation: stripeWipe 1.0s cubic-bezier(0.76, 0, 0.24, 1) forwards;
  animation-delay: calc(var(--i) * 0.06s);
}

@keyframes stripeWipe {
  0% {
    transform: scaleX(0);
    transform-origin: left;
  }
  30% {
    transform: scaleX(1);
    transform-origin: left;
  }
  70% {
    transform: scaleX(1);
    transform-origin: left;
  }
  70.1% {
    transform: scaleX(1);
    transform-origin: right;
  }
  100% {
    transform: scaleX(0);
    transform-origin: right;
  }
}

/* ── Event Story Formatting ── */
.story-action {
  font-style: italic;
  color: var(--soft-ink);
  opacity: 0.85;
}

.story-dialogue {
  color: var(--orange);
  font-weight: 700;
}

.vn-log-overlay {
  position: absolute;
  inset: 0;
  z-index: 34;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(0, 0, 0, 0.72);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.vn-log-overlay[hidden] {
  display: none !important;
}

.vn-log-panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  width: min(720px, 100%);
  max-height: min(760px, calc(100svh - 40px));
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 16px;
  overflow: hidden;
  color: rgba(255, 255, 255, 0.92);
  background: rgba(12, 10, 16, 0.9);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.5);
}

.vn-log-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.vn-log-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-size: 24px;
}

.vn-log-content {
  min-height: 0;
  overflow: auto;
  padding: 16px 18px 20px;
  -webkit-overflow-scrolling: touch;
}

.vn-log-entry {
  padding: 13px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.vn-log-entry:last-child {
  border-bottom: 0;
}

.vn-log-entry strong {
  display: block;
  margin-bottom: 7px;
  color: #fff;
  font-size: 14px;
}

.vn-log-entry .vn-log-text {
  color: rgba(255, 255, 255, 0.84);
  font-size: 14px;
  line-height: 1.75;
}

.vn-log-empty {
  padding: 28px 12px;
  color: rgba(255, 255, 255, 0.68);
  text-align: center;
}

.story-h2 {
  display: block;
  font-size: 1.35em;
  font-weight: 800;
  color: var(--violet);
  font-family: var(--font-display);
  border-bottom: 2px solid var(--line);
  padding-bottom: 4px;
  margin-top: 12px;
  margin-bottom: 6px;
}

.story-h3 {
  display: block;
  font-size: 1.2em;
  font-weight: 800;
  color: var(--pink);
  margin-top: 10px;
  margin-bottom: 4px;
}

.story-h4 {
  display: block;
  font-size: 1.1em;
  font-weight: 800;
  margin-top: 8px;
  margin-bottom: 3px;
}

/* ==========================================================================
   Galgame Visual Novel Player Styles
   ========================================================================== */
.vn-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 10;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-family: var(--font-main);
  background: #0d0d12;
}

.vn-beat-host {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 10%, rgba(255, 79, 154, 0.18), transparent 28%),
    radial-gradient(circle at 84% 6%, rgba(38, 169, 244, 0.2), transparent 30%),
    linear-gradient(135deg, #fff7f0 0%, #f2f7ff 48%, #fff6dd 100%);
}
.vn-beat-host::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.32) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.24) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), transparent 62%);
}
.vn-beat-host[hidden] { display: none !important; }
.produce-loading-screen {
  position: absolute;
  inset: 0;
  z-index: 40;
  overflow: hidden;
  background: #fff8f6;
  pointer-events: auto;
}
.produce-loading-screen[hidden] { display: none !important; }
.produce-loading-background {
  position: absolute;
  inset: 0;
}
.produce-loading-label {
  position: absolute;
  z-index: 2;
  left: max(28px, env(safe-area-inset-left));
  bottom: max(28px, env(safe-area-inset-bottom));
  margin: 0;
  color: #6d5c5b;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 650;
  letter-spacing: 0.34em;
  line-height: 1;
  text-indent: 0.34em;
  pointer-events: none;
}
.produce-loading-idol {
  position: absolute;
  z-index: 2;
  right: max(8px, env(safe-area-inset-right));
  bottom: 0;
  width: min(46vw, 280px);
  aspect-ratio: 1;
  pointer-events: none;
}
.produce-loading-idol[hidden] { display: none !important; }
.produce-loading-idol img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: right bottom;
}
.produce-loading-idol img:last-child {
  opacity: 0;
  animation: produce-loading-blink 3.6s linear infinite;
}
@keyframes produce-loading-blink {
  0%, 88%, 100% { opacity: 0; }
  90%, 94% { opacity: 1; }
}
.vn-beat-host.is-beat-finished .speaker-plate { display: none; }
.vn-beat-host.is-beat-finished .dialogue-card { cursor: pointer; }
.vn-beat-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.vn-beat-host .beat-stage {
  position: relative;
  z-index: 1;
  width: min(100%, calc(100% * 9 / 16));
  height: min(100%, calc(100% * 16 / 9));
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: #d7e4e6;
  isolation: isolate;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.16), 0 18px 80px rgba(0, 0, 0, 0.26);
}
.vn-beat-host .beat-background { position: absolute; z-index: 0; inset: 0; background-position: center; background-size: cover; background-repeat: no-repeat; }
.vn-beat-host .beat-scene-wipe { position: absolute; z-index: 20; inset: 0; pointer-events: none; }
.vn-beat-host .beat-scene-wipe[hidden] { display: none !important; }
.vn-beat-host .beat-scene-wipe-stripe { position: absolute; left: 0; width: 100%; height: calc(100% / 6 + 2px); top: calc(var(--i) * (100% / 6)); background: var(--wipe-color, #ff4f9a); transform: scaleX(0); transform-origin: left; will-change: transform; }
.vn-beat-host .beat-scene-wipe.is-covering .beat-scene-wipe-stripe { animation: beatSceneWipeCover .42s cubic-bezier(.76, 0, .24, 1) forwards; animation-delay: calc(var(--i) * .05s); }
.vn-beat-host .beat-scene-wipe.is-holding .beat-scene-wipe-stripe { animation: none; transform: scaleX(1); transform-origin: left; }
.vn-beat-host .beat-scene-wipe.is-revealing .beat-scene-wipe-stripe { animation: beatSceneWipeReveal .4s cubic-bezier(.76, 0, .24, 1) forwards; animation-delay: calc(var(--i) * .04s); }
@keyframes beatSceneWipeCover { from { transform: scaleX(0); transform-origin: left; } to { transform: scaleX(1); transform-origin: left; } }
@keyframes beatSceneWipeReveal { from { transform: scaleX(1); transform-origin: right; } to { transform: scaleX(0); transform-origin: right; } }
.vn-beat-host .story-chrome { position: absolute; z-index: 8; right: 0; bottom: 0; left: 0; padding: 0 14px 12px; pointer-events: none; }
.vn-beat-host .story-chrome button, .vn-beat-host .story-chrome label { pointer-events: auto; }
.vn-beat-host .beat-map-controls { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 8px; pointer-events: auto; }
.vn-beat-host .beat-map-controls[hidden] { display: none !important; }
.vn-beat-host .beat-map-return { display: inline-flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 9px 16px; border: 1px solid rgba(255,255,255,.65); border-radius: 10px; background: rgba(31,39,46,.8); color: #fff; font: inherit; font-size: 13px; font-weight: 750; cursor: pointer; }
.vn-beat-host .beat-map-return[hidden] { display: none !important; }
.vn-beat-host .beat-map-custom { flex-basis: 100%; }
.vn-beat-host .beat-map-return-direct { background: rgba(31,39,46,.48); }
.vn-beat-host .beat-map-return svg { width: 18px; height: 18px; flex: none; }
.vn-beat-host .beat-map-return:hover { background: rgba(47,60,70,.95); }
.vn-beat-host .beat-map-return:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.vn-beat-host .beat-map-return:disabled { opacity: .5; cursor: wait; }
.vn-beat-host .beat-custom-choice-panel { display: grid; gap: 10px; padding: 16px; border: 1px solid rgba(255,255,255,.7); border-radius: 14px; background: rgba(246,251,252,.94); color: #243036; pointer-events: auto; }
.vn-beat-host .beat-custom-choice-panel[hidden], .vn-beat-host .beat-choice-list[hidden] { display: none !important; }
.vn-beat-host .beat-custom-choice-panel label { font-size: 14px; font-weight: 750; }
.vn-beat-host .beat-custom-choice-panel textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 90px; max-height: 180px; padding: 12px; border: 1px solid #bed2d7; border-radius: 10px; background: #fff; color: #243036; font: inherit; font-size: 16px; line-height: 1.5; }
.vn-beat-host .beat-custom-choice-panel textarea:focus-visible { outline: 2px solid #267d88; outline-offset: 2px; }
.vn-beat-host .beat-custom-choice-actions { display: flex; gap: 8px; }
.vn-beat-host .dialogue-card { position: relative; margin: 18px 0 0; padding: 34px 28px 36px; background: none; pointer-events: auto; }
.vn-beat-host .dialogue-card::before, .vn-beat-host .dialogue-card::after { content: ""; position: absolute; inset: 0; box-sizing: border-box; pointer-events: none; border-style: solid; border-color: transparent; }
.vn-beat-host .dialogue-card::before { z-index: 0; border-width: 28px; border-image: url("/mmd-dialogue-stage/ui/message-bg.png") 40 fill / 28px / 0 stretch; opacity: .72; }
.vn-beat-host .dialogue-card::after { z-index: 1; border-width: 28px; border-image: url("/mmd-dialogue-stage/ui/frame-message-bg.png") 40 fill / 28px / 0 stretch; }
.vn-beat-host .speaker-plate { position: absolute; z-index: 2; top: 0; left: 0; display: inline-flex; align-items: center; height: 28px; padding: 0 16px; transform: translateY(-100%); color: var(--speaker-text-color, #fff); font-size: 15px; font-weight: 800; }
.vn-beat-host .speaker-plate::before { content: ""; position: absolute; z-index: -1; inset: 0; box-sizing: border-box; border-style: solid; border-width: 0 14px; border-color: transparent; background: var(--speaker-theme-color, #978c83); -webkit-mask-box-image: url("/mmd-dialogue-stage/ui/name-bg.png") 0 32 fill / 0 14px / 0 stretch; }
.vn-beat-host .speaker-plate strong { position: relative; }
.vn-beat-host #beatText { position: relative; z-index: 2; min-height: 4.2em; margin: 0; color: #243036; font-size: 15px; font-weight: 700; line-height: 1.7; }
.vn-beat-host .dialogue-advance { position: absolute; z-index: 2; right: 18px; bottom: 14px; width: 26px; height: 16px; padding: 0; border: 0; background: #e3a31a; -webkit-mask: url("/mmd-dialogue-stage/ui/arrow-down.png") center / contain no-repeat; mask: url("/mmd-dialogue-stage/ui/arrow-down.png") center / contain no-repeat; }
.vn-beat-host .beat-choices { margin: 8px 0 0; pointer-events: auto; }
.vn-beat-host .beat-choices[hidden] { display: none; }
.vn-beat-host .beat-choice-list { display: flex; flex-direction: column; gap: 8px; }
.vn-beat-host .beat-choice-button { position: relative; width: 100%; border: 0; padding: 12px 16px; color: #243036; background: transparent; font: inherit; font-size: 14px; font-weight: 700; line-height: 1.45; text-align: left; }
.vn-beat-host .beat-choice-label { position: relative; z-index: 1; }
.vn-beat-host .beat-choice-button::before { content: ""; position: absolute; z-index: 0; inset: 0; box-sizing: border-box; border-style: solid; border-width: 14px; border-color: transparent; border-image: url("/mmd-dialogue-stage/ui/message-bg.png") 40 fill / 14px / 0 stretch; opacity: .9; pointer-events: none; }
.vn-beat-host .player-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 10px 2px 0; }
.vn-beat-host .toolbar-button, .vn-beat-host .auto-toggle { border: 0; padding: 0; color: #fff; background: transparent; font-size: 12px; font-weight: 800; text-shadow: 0 1px 3px rgba(20, 28, 36, .55); }

.vn-free-mode-clock {
  position: absolute;
  top: calc(10px + env(safe-area-inset-top));
  right: max(14px, env(safe-area-inset-right));
  z-index: 12;
  backdrop-filter: blur(8px);
}

.vn-backdrop {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  transition: background-image 0.5s ease-in-out;
  background-color: #0d0d12;
}

.vn-hcg-layer {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(8, 8, 12, 0.42);
  opacity: 0;
  transition: opacity 0.35s ease;
}

.vn-hcg-layer.is-active {
  opacity: 1;
}

.vn-hcg-layer.is-mode-only {
  background: rgba(8, 8, 12, 0.55);
}

.vn-hcg-layer.is-mode-only .vn-hcg-image {
  display: none;
}

.vn-hcg-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  filter: drop-shadow(0 18px 40px rgba(0, 0, 0, 0.35));
}

.vn-stage {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  pointer-events: none;
  padding-bottom: 0;
}

.vn-live-portrait {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 145%;
  z-index: 2;
  pointer-events: none;
  opacity: 0;
  transform: translateY(4%);
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.vn-live-portrait.is-active {
  opacity: 1;
  transform: translateY(8%);
}

.vn-live-portrait canvas {
  width: 100%;
  height: 100%;
  display: block;
}

.vn-standee {
  height: 145%;
  max-height: none;
  width: auto;
  object-fit: contain;
  transition: opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1), transform 0.35s cubic-bezier(0.25, 1, 0.5, 1);
  transform-origin: bottom center;
  will-change: transform, opacity;
  opacity: 0;
  transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(42%) scale(calc(var(--portrait-scale, 1) * 0.95));
}

.vn-standee.active {
  opacity: 1;
  transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(38%) scale(var(--portrait-scale, 1));
}

.vn-standee.fade-out {
  opacity: 0;
  transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(42%) scale(calc(var(--portrait-scale, 1) * 0.98));
}

.vn-dialogue-box {
  position: relative;
  z-index: 4;
  margin: 0 auto max(20px, env(safe-area-inset-bottom));
  width: min(720px, 94%);
  min-height: 140px;
  padding: 24px 28px;
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  box-shadow: 
    0 15px 35px rgba(0, 0, 0, 0.25),
    inset 0 1px 0 rgba(255, 255, 255, 0.4);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.chronicle-load-panel {
  width: min(720px, 94vw);
}

.chronicle-load-body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.chronicle-checkpoint-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: min(58vh, 520px);
  overflow-y: auto;
}

.chronicle-checkpoint-btn {
  display: grid;
  grid-template-columns: 1fr;
  gap: 6px;
  width: 100%;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(36, 33, 38, 0.1);
  background: rgba(255, 255, 255, 0.92);
  text-align: left;
  color: #242126;
}

.chronicle-checkpoint-btn strong {
  font-size: 14px;
}

.chronicle-checkpoint-btn span {
  font-size: 13px;
  line-height: 1.55;
  color: rgba(36, 33, 38, 0.78);
}

.chronicle-checkpoint-btn em {
  font-style: normal;
  font-size: 12px;
  color: rgba(36, 33, 38, 0.52);
}


.chronicle-confirm-panel {
  display: grid;
  gap: 12px;
  padding: 18px 16px;
  border-radius: 16px;
  border: 1px solid rgba(214, 122, 148, 0.28);
  background: rgba(255, 255, 255, 0.94);
  color: #242126;
}

.chronicle-confirm-panel strong {
  font-size: 15px;
}

.chronicle-confirm-panel p {
  margin: 0;
  color: rgba(36, 33, 38, 0.68);
  line-height: 1.55;
}

.chronicle-confirm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.chronicle-confirm-btn {
  min-height: 38px;
  padding: 0 16px;
  border-radius: 999px;
  border: 1px solid rgba(36, 33, 38, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: #242126;
  font-weight: 700;
}

.chronicle-confirm-btn.primary {
  border-color: rgba(214, 122, 148, 0.4);
  background: linear-gradient(135deg, #ff8cac, #ffd36e);
  color: #fff;
}

.chronicle-load-empty {
  margin: 0;
  padding: 18px 12px;
  text-align: center;
  color: rgba(36, 33, 38, 0.62);
  line-height: 1.6;
}

.vn-nameplate {
  position: absolute;
  top: -16px;
  left: 28px;
  padding: 5px 22px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 15px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  background: var(--speaker-theme-color, #7e57c2);
  border: 1.5px solid rgba(255, 255, 255, 0.4);
  transition: background 0.3s ease;
}

.vn-text {
  font-size: 18px;
  line-height: 1.6;
  font-weight: 600;
  color: #242126;
  white-space: pre-wrap;
  flex: 1;
  margin-bottom: 12px;
  letter-spacing: 0.03em;
}

.vn-text .story-action {
  font-style: normal;
  color: #555259;
}

.vn-text .story-dialogue {
  color: #242126;
}

.vn-controls {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-top: 1px solid rgba(0, 0, 0, 0.08);
  padding-top: 8px;
}

.vn-btn {
  background: transparent;
  border: none;
  font-size: 11px;
  font-weight: 700;
  color: #6d6b73;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.vn-btn:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #111;
}

.vn-btn.active {
  background: rgba(255, 79, 154, 0.15);
  color: var(--pink);
}

.vn-debug-overlay {
  position: fixed;
  inset: 0;
  z-index: 72;
  display: grid;
  place-items: center;
  padding: max(18px, env(safe-area-inset-top)) 18px max(18px, env(safe-area-inset-bottom));
  background: rgba(0, 0, 0, 0.68);
  backdrop-filter: blur(6px);
}

.vn-debug-overlay[hidden] {
  display: none !important;
}

.vn-debug-panel {
  width: min(820px, calc(100vw - 28px));
  max-height: min(82vh, 720px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 14px;
  background: rgba(16, 17, 22, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.52);
  color: rgba(255, 255, 255, 0.92);
}

.vn-debug-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.vn-debug-kicker {
  margin: 0 0 4px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.56);
}

.vn-debug-head h2 {
  margin: 0;
  color: #fff;
  font-size: 22px;
  line-height: 1.2;
  font-weight: 900;
}

.vn-debug-close {
  width: 38px;
  height: 38px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
}

.vn-debug-content {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 14px 16px 18px;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.88);
}

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

.vn-debug-card {
  min-width: 0;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.vn-debug-card h3 {
  margin: 0 0 8px;
  font-size: 13px;
  color: #fff;
}

.vn-debug-card dl {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr);
  gap: 5px 8px;
  margin: 0;
}

.vn-debug-card dt {
  color: rgba(255, 255, 255, 0.56);
}

.vn-debug-card dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: rgba(255, 255, 255, 0.9);
}

.vn-debug-pre {
  margin: 10px 0 0;
  padding: 10px;
  max-height: 180px;
  overflow: auto;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  border-radius: 8px;
  background: rgba(0, 0, 0, 0.42);
  color: rgba(255, 255, 255, 0.86);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
}

.vn-debug-card-full {
  grid-column: 1 / -1;
}

.vn-debug-diagnosis {
  margin-bottom: 4px;
}

.vn-debug-alert-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 8px;
}

.vn-debug-alert {
  padding: 10px 12px;
  border-radius: 10px;
  line-height: 1.55;
  font-size: 13px;
  border: 1px solid transparent;
}

.vn-debug-alert-ok {
  background: rgba(72, 187, 120, 0.14);
  border-color: rgba(72, 187, 120, 0.35);
  color: rgba(220, 255, 232, 0.95);
}

.vn-debug-actions {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  display: grid;
  gap: 10px;
}

.vn-debug-actions-hint {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.68);
}

.vn-debug-force-skip-btn {
  width: 100%;
  min-height: 40px;
  border: 0;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffb347, #ff7a18);
  color: #1a1008;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.vn-debug-force-skip-btn:disabled {
  opacity: 0.38;
  cursor: not-allowed;
}

.vn-debug-alert-info {
  background: rgba(99, 179, 237, 0.14);
  border-color: rgba(99, 179, 237, 0.35);
  color: rgba(224, 242, 255, 0.95);
}

.vn-debug-alert-warn {
  background: rgba(236, 201, 75, 0.14);
  border-color: rgba(236, 201, 75, 0.35);
  color: rgba(255, 244, 214, 0.96);
}

.vn-debug-alert-error {
  background: rgba(245, 101, 101, 0.16);
  border-color: rgba(245, 101, 101, 0.38);
  color: rgba(255, 230, 230, 0.96);
}

.vn-debug-history {
  display: grid;
  gap: 10px;
}

.vn-debug-history-item {
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
}

.vn-debug-history-head {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: baseline;
  margin-bottom: 6px;
  font-size: 13px;
}

.vn-debug-history-head strong {
  color: rgba(255, 255, 255, 0.92);
}

.vn-debug-history-head span {
  color: rgba(255, 255, 255, 0.58);
  font-size: 12px;
  white-space: nowrap;
}

.vn-debug-empty {
  margin: 0;
  color: rgba(255, 255, 255, 0.62);
  font-size: 13px;
}

@media (max-width: 680px) {
  .vn-debug-grid {
    grid-template-columns: 1fr;
  }

  .vn-debug-card dl {
    grid-template-columns: 88px minmax(0, 1fr);
  }
}
.vn-choices-overlay {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: rgba(13, 13, 18, 0.6);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 24px;
}

.vn-choices-title {
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  margin-bottom: 24px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.vn-choices-container {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(540px, 94%);
}

.vn-choice-btn {
  background: rgba(255, 255, 255, 0.92);
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 14px;
  padding: 16px 24px;
  font-size: 16px;
  font-weight: 700;
  color: #242126;
  text-align: left;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
}

.vn-choice-btn:hover {
  transform: scale(1.02);
  background: #fff;
  border-color: var(--pink);
  box-shadow: 0 6px 20px rgba(255, 79, 154, 0.3);
}

.vn-choice-btn:disabled,
.vn-choice-btn.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1);
}

.vn-choice-btn-muted {
  background: rgba(255, 255, 255, 0.72);
  color: #5f5868;
}

.vn-choice-btn-accent {
  background: linear-gradient(135deg, #ff8fbf 0%, #ff4f9a 100%);
  border-color: rgba(255, 255, 255, 0.72);
  color: #fff;
}

.vn-choice-btn-end {
  background: rgba(36, 33, 38, 0.88);
  border-color: rgba(255, 255, 255, 0.28);
  color: #fff;
}

.vn-choice-btn-end:hover {
  background: rgba(52, 48, 56, 0.94);
  border-color: rgba(255, 255, 255, 0.42);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
}

.vn-choice-btn-custom {
  background: rgba(255, 255, 255, 0.84);
  border-style: dashed;
  border-color: rgba(255, 79, 154, 0.42);
}

.vn-custom-choice-panel {
  display: grid;
  gap: 10px;
  width: min(540px, 94%);
  margin-top: 4px;
}

.vn-custom-choice-label {
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.45);
}

.vn-custom-choice-input {
  width: 100%;
  min-height: 92px;
  border: 2px solid rgba(255, 255, 255, 0.72);
  border-radius: 14px;
  padding: 12px 14px;
  color: #242126;
  background: rgba(255, 255, 255, 0.96);
  font: 700 14px/1.55 var(--font-ui);
  resize: vertical;
  outline: none;
}

.vn-custom-choice-input:focus {
  border-color: var(--pink);
  box-shadow: 0 0 0 4px rgba(255, 79, 154, 0.22);
}

.vn-custom-choice-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

@media (max-width: 460px) {
  .vn-container {
    min-height: var(--hatsu-viewport-height, 100dvh);
  }

  .vn-standee {
    height: 118%;
    transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(34%) scale(calc(var(--portrait-scale, 1) * 0.92));
  }

  .vn-standee.active {
    transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(31%) scale(calc(var(--portrait-scale, 1) * 0.95));
  }

  .vn-dialogue-box {
    width: calc(100% - 18px);
    min-height: 132px;
    max-height: min(44svh, 280px);
    margin-bottom: max(10px, env(safe-area-inset-bottom));
    padding: 18px 16px 12px;
    border-radius: 16px;
    overflow: hidden;
  }

  .vn-nameplate {
    top: -13px;
    left: 16px;
    padding: 4px 14px;
    font-size: 13px;
  }

  .vn-text {
    max-height: 184px;
    overflow-y: auto;
    font-size: 15px;
    line-height: 1.55;
    letter-spacing: 0;
    margin-bottom: 8px;
    -webkit-overflow-scrolling: touch;
  }

  .vn-controls {
    gap: 4px;
    justify-content: space-between;
    overflow-x: auto;
    padding-top: 6px;
  }

  .vn-btn {
    flex: 0 0 auto;
    padding: 5px 7px;
    font-size: 10px;
  }

    .vn-choices-overlay {
    justify-content: flex-end;
    padding: 12px 10px max(12px, env(safe-area-inset-bottom));
  }

  .vn-choices-title {
    margin-bottom: 10px;
    font-size: 16px;
  }

  .vn-choices-container {
    width: 100%;
    gap: 8px;
  }

  .vn-choice-btn {
    min-height: 46px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.45;
  }

  .vn-custom-choice-panel,
  .vn-custom-choice-actions {
    width: 100%;
  }
}

.free-mode-stage,
.producer-apartment-stage {
  position: fixed;
  inset: 0;
  z-index: 56;
  overflow: hidden;
  background: #10141c;
}

.producer-apartment-stage.is-hidden {
  display: none;
}

.producer-apartment-bg {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(12, 14, 22, 0.18), rgba(12, 14, 22, 0.72)),
    center center / cover no-repeat url("./assets/scenes/Producer_Apartment.png");
  transition: background-image 0.35s ease;
}

.producer-apartment-stage.is-morning .producer-apartment-bg {
  background:
    linear-gradient(180deg, rgba(255, 247, 236, 0.08), rgba(42, 52, 74, 0.42)),
    center center / cover no-repeat url("./assets/scenes/Producer_Room_Day.png");
}

.producer-apartment-stage.is-evening .producer-apartment-bg {
  background:
    linear-gradient(180deg, rgba(8, 10, 18, 0.28), rgba(8, 10, 18, 0.82)),
    center center / cover no-repeat url("./assets/scenes/Producer_Apartment.png");
}

.producer-apartment-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 12px;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(16, 20, 28, 0.82), rgba(16, 20, 28, 0.42));
  backdrop-filter: blur(10px);
  color: #fff;
}

.producer-apartment-head .ui-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.producer-apartment-head h2 {
  margin: 0;
  font-size: 22px;
  color: #fff;
}

.producer-apartment-hint {
  position: absolute;
  left: 14px;
  right: 14px;
  top: calc(78px + env(safe-area-inset-top));
  z-index: 2;
  margin: 0;
  padding: 12px 14px;
  border-radius: 14px;
  background: rgba(16, 20, 28, 0.58);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.9);
  font-size: 13px;
  line-height: 1.55;
  backdrop-filter: blur(8px);
}

.producer-apartment-hotspots {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}

.apartment-hotspot {
  position: absolute;
  pointer-events: auto;
  display: grid;
  gap: 1px;
  justify-items: center;
  padding: 8px 16px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(16, 20, 28, 0.62);
  color: #fff;
  text-align: center;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.32);
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.apartment-hotspot:hover,
.apartment-hotspot:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(38, 169, 244, 0.6);
  background: rgba(16, 20, 28, 0.78);
  box-shadow: 0 12px 26px rgba(38, 169, 244, 0.24);
}

.apartment-hotspot.is-primary {
  border-color: rgba(255, 79, 154, 0.55);
  background: linear-gradient(180deg, rgba(255, 79, 154, 0.78), rgba(214, 51, 122, 0.72));
}

.apartment-hotspot.is-primary:hover,
.apartment-hotspot.is-primary:focus-visible {
  border-color: rgba(255, 79, 154, 0.85);
  box-shadow: 0 12px 26px rgba(255, 79, 154, 0.32);
}

.apartment-hotspot.is-accent {
  border-color: rgba(196, 92, 196, 0.55);
  background: linear-gradient(180deg, rgba(196, 92, 196, 0.78), rgba(146, 64, 168, 0.72));
}

.apartment-hotspot.is-accent:hover,
.apartment-hotspot.is-accent:focus-visible {
  border-color: rgba(196, 92, 196, 0.85);
  box-shadow: 0 12px 26px rgba(196, 92, 196, 0.32);
}

.apartment-hotspot:disabled {
  opacity: 0.42;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.apartment-hotspot-kicker {
  font-family: var(--font-mono);
  font-size: 9px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
}

.apartment-hotspot strong {
  font-size: 14px;
  line-height: 1.2;
}

#apartmentSleepBtn {
  left: 9%;
  bottom: calc(20% + env(safe-area-inset-bottom));
}

#apartmentInviteBtn {
  left: 63%;
  top: 48%;
}

.audition-ranking-hud {
  position: absolute;
  top: max(24px, env(safe-area-inset-top));
  right: max(26px, env(safe-area-inset-right));
  z-index: 12;
  width: min(410px, calc(100% - 420px));
  min-width: 360px;
  padding: 7px 8px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  color: #fff;
  background: rgba(26, 25, 31, 0.82);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  pointer-events: none;
}

.audition-ranking-hud[hidden] {
  display: none;
}

.audition-ranking-head,
.audition-ranking-summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.audition-ranking-head {
  padding: 1px 2px 7px;
}

.audition-ranking-head span {
  color: #ffd17a;
  font-size: 10px;
  font-weight: 900;
}

.audition-ranking-head small,
.audition-ranking-summary {
  color: rgba(255, 255, 255, 0.7);
  font-size: 9px;
  font-weight: 700;
}

.audition-ranking-strip {
  display: grid;
  grid-template-columns: 1.22fr repeat(5, 1fr);
  gap: 3px;
}

.audition-rank-card {
  position: relative;
  min-width: 0;
  height: 82px;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.32);
  border-radius: 3px;
  color: #fff;
  background: rgba(72, 71, 78, 0.82);
}

.audition-rank-card.is-leader {
  border-color: #ffd363;
  box-shadow: 0 0 0 1px rgba(255, 211, 99, 0.3), 0 5px 15px rgba(0, 0, 0, 0.22);
}

.audition-rank-card.is-self {
  border-color: var(--orange);
  background: rgba(99, 53, 39, 0.92);
  box-shadow: 0 0 0 1px rgba(255, 120, 63, 0.42), 0 7px 18px rgba(0, 0, 0, 0.3);
}

.audition-rank-position {
  position: absolute;
  top: 2px;
  left: 4px;
  z-index: 3;
  font: 950 18px/1 var(--font-display);
  text-shadow: 0 2px 3px rgba(0, 0, 0, 0.75);
}

.is-leader .audition-rank-position {
  color: #ffd363;
}

.audition-rank-avatar,
.audition-rank-silhouette {
  position: absolute;
  inset: 0 0 20px;
  width: 100%;
  height: calc(100% - 20px);
}

.audition-rank-avatar {
  object-fit: cover;
  object-position: center 20%;
  filter: saturate(0.8) brightness(0.88);
}

.is-self .audition-rank-avatar {
  filter: none;
}

.audition-rank-silhouette {
  background: linear-gradient(155deg, #9a9da6, #4c5059);
}

.audition-rank-silhouette::before {
  content: "";
  position: absolute;
  top: 17px;
  left: 50%;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: #30343c;
  box-shadow: 0 27px 0 13px #30343c;
  opacity: 0.84;
  transform: translateX(-50%);
}

.audition-rank-name,
.audition-rank-score,
.audition-rank-qualified {
  position: absolute;
  z-index: 3;
}

.audition-rank-name {
  bottom: 3px;
  left: 4px;
  max-width: calc(100% - 34px);
  overflow: hidden;
  color: rgba(255, 255, 255, 0.76);
  font-size: 8px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.audition-rank-score {
  right: 4px;
  bottom: 1px;
  font: 900 14px/1 var(--font-display);
  font-variant-numeric: tabular-nums;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
}

.audition-rank-qualified {
  top: 3px;
  right: 3px;
  padding: 2px 4px;
  border-radius: 3px;
  color: #4b3810;
  background: #ffd363;
  font-size: 8px;
  font-weight: 900;
}

.audition-ranking-summary {
  padding: 5px 2px 0;
}

.audition-ranking-summary strong {
  color: #ffd17a;
}

@media (max-width: 800px) {
  .audition-ranking-hud {
    top: max(12px, env(safe-area-inset-top));
    right: max(10px, env(safe-area-inset-right));
    width: min(410px, calc(100% - 20px));
    min-width: 0;
  }

  .audition-rank-card {
    height: 68px;
  }

  .audition-rank-avatar,
  .audition-rank-silhouette {
    inset-bottom: 18px;
    height: calc(100% - 18px);
  }

  .audition-rank-position {
    font-size: 14px;
  }

  .audition-rank-name {
    display: none;
  }

  .audition-rank-score {
    font-size: 11px;
  }
}

/* N.I.A home-entry logo reveal */
.nia-entry-transition {
  position: fixed;
  inset: 0;
  z-index: 2147483500;
  overflow: hidden;
  pointer-events: auto;
  background: #fff;
}

.nia-entry-transition[hidden] {
  display: none !important;
}

.nia-entry-stage {
  display: block;
  width: 100%;
  height: 100%;
  stroke: none;
  stroke-width: 0;
  stroke-linecap: initial;
  stroke-linejoin: initial;
  font-family: Inter, "Arial Black", Arial, sans-serif;
}

.nia-entry-camera {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  will-change: transform;
}

.nia-entry-fragments text {
  fill: #ded9ec;
  font-size: 220px;
  font-weight: 950;
  letter-spacing: -14px;
}

.nia-entry-slider {
  opacity: 0;
  will-change: transform, opacity;
}

.nia-entry-slider text {
  fill: #fff;
  font-size: 44px;
  font-weight: 900;
  letter-spacing: 5px;
}

.nia-entry-slider-one { transform: translate(-900px, 195px) rotate(-4deg); }
.nia-entry-slider-two { transform: translate(1780px, 405px) rotate(3deg); }
.nia-entry-slider-three { transform: translate(390px, 1040px) rotate(-2deg); }

.nia-entry-final { opacity: 0; }
.nia-entry-logo text:first-child {
  fill: #fff;
  font-size: 310px;
  font-weight: 950;
  letter-spacing: -28px;
}

.nia-entry-logo-sub {
  fill: #fff;
  font-size: 48px;
  font-weight: 900;
  letter-spacing: 12px;
}

.nia-entry-spark { fill: #ecff35; transform-box: fill-box; transform-origin: center; }
.nia-entry-spark-left { fill: #fff; }
.nia-entry-spark-right { fill: #ecff35; }
.nia-entry-exit-mask { transform: translateX(-125%); will-change: transform; }

.nia-entry-transition.is-playing {
  animation: niaEntryBackdrop 2.1s linear both;
}

.nia-entry-transition.is-playing .nia-entry-camera {
  animation: niaEntryCameraPullback 2.1s cubic-bezier(.2, .8, .2, 1) both;
}

.nia-entry-transition.is-playing .nia-entry-slider-one { animation: niaEntrySliderOne 2.1s cubic-bezier(.16, 1, .3, 1) both; }
.nia-entry-transition.is-playing .nia-entry-slider-two { animation: niaEntrySliderTwo 2.1s cubic-bezier(.16, 1, .3, 1) both; }
.nia-entry-transition.is-playing .nia-entry-slider-three { animation: niaEntrySliderThree 2.1s cubic-bezier(.16, 1, .3, 1) both; }
.nia-entry-transition.is-playing .nia-entry-fragments { animation: niaEntryFragments 2.1s ease both; }
.nia-entry-transition.is-playing .nia-entry-final { animation: niaEntryFinal 2.1s ease both; }
.nia-entry-transition.is-playing .nia-entry-logo { animation: niaEntryLogo 2.1s cubic-bezier(.16, 1, .3, 1) both; transform-box: fill-box; transform-origin: center; }
.nia-entry-transition.is-playing .nia-entry-spark { animation: niaEntrySpark 2.1s cubic-bezier(.34, 1.56, .64, 1) both; }
.nia-entry-transition.is-playing .nia-entry-exit-mask { animation: niaEntryExitMask 2.1s cubic-bezier(.76, 0, .24, 1) both; }

@keyframes niaEntryBackdrop {
  0% { opacity: 0; }
  4%, 100% { opacity: 1; }
}

@keyframes niaEntryCameraPullback {
  0%, 27% { transform: scale(3.5) translate3d(-4%, 3%, 0); }
  67%, 100% { transform: scale(1) translate3d(0, 0, 0); }
}

@keyframes niaEntrySliderOne {
  0% { opacity: 0; transform: translate(-900px, 195px) rotate(-4deg); }
  11%, 35% { opacity: 1; transform: translate(250px, 195px) rotate(-4deg); }
  52%, 100% { opacity: 0; transform: translate(350px, 165px) rotate(-4deg); }
}

@keyframes niaEntrySliderTwo {
  0%, 7% { opacity: 0; transform: translate(1780px, 405px) rotate(3deg); }
  18%, 38% { opacity: 1; transform: translate(620px, 405px) rotate(3deg); }
  54%, 100% { opacity: 0; transform: translate(520px, 385px) rotate(3deg); }
}

@keyframes niaEntrySliderThree {
  0%, 14% { opacity: 0; transform: translate(390px, 1040px) rotate(-2deg); }
  25%, 42% { opacity: 1; transform: translate(390px, 585px) rotate(-2deg); }
  56%, 100% { opacity: 0; transform: translate(340px, 555px) rotate(-2deg); }
}

@keyframes niaEntryFragments { 0%, 38% { opacity: 1; } 61%, 100% { opacity: 0; } }
@keyframes niaEntryFinal { 0%, 34% { opacity: 0; } 58%, 100% { opacity: 1; } }
@keyframes niaEntryLogo {
  0%, 46% { opacity: 0; transform: scale(1.2); }
  67%, 100% { opacity: 1; transform: scale(1); }
}
@keyframes niaEntrySpark {
  0%, 49% { opacity: 0; transform: rotate(-25deg) scale(0); }
  68%, 91% { opacity: 1; transform: rotate(0) scale(1); }
  100% { opacity: .7; transform: rotate(8deg) scale(.92); }
}
@keyframes niaEntryExitMask {
  0%, 82% { transform: translateX(-125%); }
  100% { transform: translateX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .nia-entry-transition.is-playing { animation: niaEntryReduced .18s ease both; }
  .nia-entry-transition.is-playing .nia-entry-camera,
  .nia-entry-transition.is-playing .nia-entry-slider,
  .nia-entry-transition.is-playing .nia-entry-fragments,
  .nia-entry-transition.is-playing .nia-entry-final,
  .nia-entry-transition.is-playing .nia-entry-logo,
  .nia-entry-transition.is-playing .nia-entry-spark,
  .nia-entry-transition.is-playing .nia-entry-exit-mask { animation: none; }
  .nia-entry-transition.is-playing .nia-entry-camera { transform: scale(1); }
  .nia-entry-transition.is-playing .nia-entry-slider,
  .nia-entry-transition.is-playing .nia-entry-fragments { opacity: 0; }
  .nia-entry-transition.is-playing .nia-entry-final,
  .nia-entry-transition.is-playing .nia-entry-logo,
  .nia-entry-transition.is-playing .nia-entry-spark { opacity: 1; }
  @keyframes niaEntryReduced { 0%, 100% { opacity: 0; } 45%, 60% { opacity: 1; } }
}

#apartmentDoorbellBtn {
  left: 63%;
  top: 37%;
  border-color: rgba(229, 57, 53, 0.72);
  background: rgba(126, 28, 34, 0.86);
}

#apartmentDaySummaryBtn {
  right: 4%;
  bottom: calc(30% + env(safe-area-inset-bottom));
}

#apartmentPhoneBtn {
  right: 4%;
  bottom: calc(20% + env(safe-area-inset-bottom));
}

.apartment-invite-list {
  display: grid;
  gap: 10px;
  max-height: min(52vh, 420px);
  overflow-y: auto;
  padding: 2px 0;
}

.apartment-invite-item {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 12px 14px;
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.apartment-invite-item:hover,
.apartment-invite-item:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(196, 92, 196, 0.42);
  box-shadow: 0 8px 20px rgba(196, 92, 196, 0.12);
}

.apartment-invite-avatar {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.06);
  display: grid;
  place-items: center;
  font-weight: 800;
  color: #fff;
}

.apartment-invite-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.apartment-invite-main {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.apartment-invite-main strong {
  font-size: 15px;
}

.apartment-invite-main span {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.apartment-invite-score {
  display: grid;
  justify-items: end;
  gap: 2px;
  font-size: 12px;
  color: var(--muted);
}

.apartment-invite-score b {
  font-size: 18px;
  color: var(--pink);
}

.nsfw-cg-test-panel {
  width: min(720px, 100%);
  max-height: min(92vh, 900px);
  overflow: auto;
}

.nsfw-cg-test-grid {
  display: grid;
  gap: 14px;
}

.nsfw-cg-test-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--muted);
}

.nsfw-cg-test-chip-list,
.nsfw-cg-test-pose-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.nsfw-cg-test-pose-list {
  max-height: min(36vh, 320px);
  overflow-y: auto;
  padding: 2px;
}

.nsfw-cg-test-chip {
  appearance: none;
  border: 1px solid rgba(111, 102, 128, 0.18);
  border-radius: 999px;
  padding: 8px 12px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  cursor: pointer;
}

.nsfw-cg-test-chip.is-active {
  border-color: rgba(196, 92, 196, 0.55);
  background: rgba(196, 92, 196, 0.12);
  color: #8a2a8a;
  font-weight: 700;
}

.nsfw-cg-test-pose {
  appearance: none;
  border: 1px solid rgba(111, 102, 128, 0.16);
  border-radius: 12px;
  padding: 10px 12px;
  min-width: 140px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
}

.nsfw-cg-test-pose strong {
  display: block;
  font-size: 13px;
}

.nsfw-cg-test-pose span {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: 11px;
  font-family: var(--font-mono);
}

.nsfw-cg-test-pose.is-active {
  border-color: rgba(196, 92, 196, 0.5);
  box-shadow: 0 8px 18px rgba(196, 92, 196, 0.12);
  background: rgba(255, 246, 252, 0.98);
}

.nsfw-cg-test-summary {
  margin: 12px 0 0;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(196, 92, 196, 0.08);
  color: var(--soft-ink);
  font-size: 13px;
  line-height: 1.5;
}

.apartment-go-home-panel,
.apartment-companion-action-panel {
  width: min(460px, 100%);
}

.apartment-go-home-actions {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.apartment-go-home-btn {
  display: grid;
  gap: 4px;
  width: 100%;
  padding: 14px 16px;
  border: 1px solid rgba(111, 102, 128, 0.16);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.94);
  color: var(--ink);
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

.apartment-go-home-btn strong {
  font-size: 15px;
}

.apartment-go-home-btn span {
  font-size: 12px;
  line-height: 1.5;
  color: rgba(36, 33, 38, 0.72);
}

.apartment-go-home-btn:hover,
.apartment-go-home-btn:focus-visible {
  transform: translateY(-1px);
  border-color: rgba(38, 169, 244, 0.42);
  box-shadow: 0 10px 22px rgba(38, 169, 244, 0.12);
}

.apartment-go-home-btn.is-accent {
  border-color: rgba(196, 92, 196, 0.35);
  background: linear-gradient(180deg, rgba(255, 247, 255, 0.98), rgba(244, 236, 255, 0.92));
}

.apartment-companion-standee {
  position: absolute;
  left: 50%;
  bottom: calc(84px + env(safe-area-inset-bottom));
  z-index: 3;
  width: min(90vw, 500px);
  height: min(68vh, 720px);
  padding: 0 0 6px;
  border: 0;
  background: transparent;
  cursor: pointer;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  overflow: hidden;
  filter: drop-shadow(0 16px 28px rgba(0, 0, 0, 0.34));
  transition: transform 0.2s ease, filter 0.2s ease;
}

.apartment-companion-standee:hover,
.apartment-companion-standee:focus-visible {
  transform: translateX(-50%) translateY(-4px);
  filter: drop-shadow(0 20px 34px rgba(0, 0, 0, 0.42));
}

.apartment-companion-standee img {
  display: block;
  width: auto;
  height: 148%;
  max-width: none;
  flex: 0 0 auto;
  object-fit: contain;
  object-position: center bottom;
  transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(38%) scale(var(--portrait-scale, 1));
  transform-origin: bottom center;
  transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
  pointer-events: none;
}

.apartment-companion-standee:hover img,
.apartment-companion-standee:focus-visible img {
  transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(35%) scale(calc(var(--portrait-scale, 1) * 1.02));
}

.apartment-companion-standee-label {
  position: relative;
  z-index: 2;
  margin-top: -4px;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  background: rgba(16, 20, 28, 0.72);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  backdrop-filter: blur(8px);
}

.apartment-companion-standee[hidden] {
  display: none !important;
}

@media (max-width: 460px) {
  .apartment-companion-standee {
    width: min(94vw, 420px);
    height: min(62vh, 640px);
    bottom: calc(76px + env(safe-area-inset-bottom));
  }

  .apartment-companion-standee img {
    height: 122%;
    transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(34%) scale(calc(var(--portrait-scale, 1) * 0.94));
  }

  .apartment-companion-standee:hover img,
  .apartment-companion-standee:focus-visible img {
    transform: translate(var(--portrait-x, 0px), var(--portrait-y, 0px)) translateY(31%) scale(calc(var(--portrait-scale, 1) * 0.97));
  }
}

.day-summary-overlay.is-evening-mode .day-summary-chart,
.day-summary-overlay.is-evening-mode .day-summary-logo-wrap {
  display: none;
}

.day-summary-overlay.is-evening-mode .day-summary-head {
  margin-bottom: 8px;
}

.day-summary-overlay.is-evening-mode .day-summary-line.is-section-title {
  margin-top: 10px;
  font-weight: 800;
  color: var(--ink);
}

.day-summary-overlay.is-evening-mode .day-summary-line.is-muted {
  color: var(--soft-ink);
}

body.is-free-mode-active {
  overflow: hidden;
}

.world-map-frame {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.world-map-canvas {
  position: absolute;
  inset: 0;
}

.world-map-bg {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: opacity 0.35s ease;
}

.world-map-hotspots {
  position: absolute;
  inset: 0;
}

.free-mode-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 12px;
  align-items: center;
  padding: calc(10px + env(safe-area-inset-top)) 14px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  background: linear-gradient(180deg, rgba(16, 20, 28, 0.82), rgba(16, 20, 28, 0.42));
  backdrop-filter: blur(10px);
  color: #fff;
}

.free-mode-head .ui-kicker {
  color: rgba(255, 255, 255, 0.72);
}

.free-mode-head-copy h2 {
  margin: 0;
  font-size: 22px;
  color: #fff;
}

.free-mode-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: inherit;
  cursor: pointer;
}

.free-mode-back-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.free-mode-idol-label {
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255, 79, 154, 0.24);
  color: #ffd9ea;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.free-mode-status-badge {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.free-mode-status-badge.is-day-ended {
  border-color: rgba(255, 196, 53, 0.45);
  background: rgba(255, 196, 53, 0.16);
  color: #ffe7a3;
}

.free-mode-exit-btn {
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  padding: 8px 12px;
  cursor: pointer;
  white-space: nowrap;
}

.free-mode-time-panel {
  width: min(420px, 100%);
}

.free-mode-time-current {
  margin: 0 0 8px;
  font-size: 18px;
  font-weight: 800;
}

.free-mode-time-label {
  display: block;
  margin: 12px 0 6px;
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 700;
}

.free-mode-time-input {
  width: 100%;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(111, 102, 128, 0.18);
  border-radius: 12px;
  font: inherit;
  font-size: 16px;
}

.free-mode-time-quick {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.free-mode-time-quick-btn {
  min-height: 38px;
  border: 1px solid rgba(111, 102, 128, 0.16);
  border-radius: 999px;
  background: rgba(246, 248, 255, 0.92);
  color: var(--ink);
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.free-mode-time-quick-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.free-mode-time-actions {
  grid-template-columns: 1fr 1fr;
}

.free-mode-advance-day-btn {
  grid-column: 1 / -1;
}

.free-mode-phone-btn {
  position: absolute;
  right: 14px;
  top: calc(50% + 104px);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  min-height: 56px;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 20, 28, 0.78);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.free-mode-phone-btn svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
}

.free-mode-side-quest-btn {
  position: absolute;
  right: 14px;
  top: calc(50% - 28px);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 20, 28, 0.78);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.free-mode-side-quest-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 214, 120, 0.22);
  color: #ffe7a8;
  font-size: 10px;
  line-height: 1.2;
}

.free-mode-affinity-btn {
  position: absolute;
  right: 14px;
  top: calc(50% - 160px);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  min-height: 56px;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 20, 28, 0.78);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.free-mode-affinity-btn svg {
  width: 20px;
  height: 20px;
  fill: #ff8ab9;
}

.free-mode-task-panel-btn {
  position: absolute;
  right: 14px;
  top: calc(50% - 94px);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 56px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 20, 28, 0.78);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

/* ── 担当好感度档案 ── */

.affinity-overlay {
  padding: max(10px, env(safe-area-inset-top)) 12px max(10px, env(safe-area-inset-bottom));
  background: rgba(10, 12, 20, 0.62);
}

.affinity-panel {
  --affinity-theme: #ff7bb0;
  position: relative;
  width: min(560px, 100%);
  max-width: 100%;
  box-sizing: border-box;
  height: min(900px, calc(var(--hatsu-viewport-height, 100dvh) - 24px));
  border-radius: 26px;
  overflow: hidden;
  color: #242126;
  box-shadow: 0 30px 70px rgba(15, 18, 38, 0.45);
  border: 1px solid rgba(255, 255, 255, 0.4);
}

.affinity-bg {
  position: absolute;
  inset: 0;
  background-position: center top;
  background-size: cover;
  background-repeat: no-repeat;
  background-color: #cdd8ee;
}

.affinity-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 22% 14%, rgba(255, 255, 255, 0.28), transparent 36%),
    linear-gradient(180deg, rgba(245, 248, 255, 0) 0%, rgba(244, 247, 255, 0.08) 32%, rgba(243, 246, 255, 0.62) 56%, rgba(243, 246, 255, 0.94) 100%);
}

.affinity-head {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
}

.affinity-back-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(255, 255, 255, 0.6);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.8);
  color: #2c3550;
  cursor: pointer;
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px rgba(28, 34, 60, 0.18);
}

.affinity-back-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.affinity-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 18px rgba(28, 34, 60, 0.16);
}

.affinity-head-kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--affinity-theme);
}

.affinity-head-label {
  font-size: 14px;
  font-weight: 800;
  color: #2c3550;
}

.affinity-body {
  position: relative;
  z-index: 2;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  padding: 46% 16px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.affinity-identity {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* Simple N.I.A page fade; overrides the retired logo-reveal animation above. */
.nia-entry-transition.is-playing {
  animation: niaEntryLogoCard 1.6s ease both;
}

.nia-entry-camera {
  position: absolute;
  inset: 0;
  transform-origin: 55% 45.5%;
  will-change: transform;
}

.nia-entry-transition.is-playing .nia-entry-camera {
  animation: niaEntryCameraPullback 1.6s cubic-bezier(.16, 1, .3, 1) both;
}

.nia-entry-logo-card {
  position: absolute;
  inset: -8vh -5vw;
  display: grid;
  place-content: center;
  justify-items: center;
  padding-inline: clamp(44px, 8vw, 132px);
  overflow: hidden;
  color: #fff;
  background: linear-gradient(90deg, #d47ce9 0%, #c971e4 18%, #7542c7 34%, #3b158e 58%, #1c124b 100%);
  clip-path: polygon(0 15%, 100% 0, 100% 84%, 0 100%);
}

.nia-entry-logo {
  position: relative;
  width: clamp(310px, 48vw, 610px);
  aspect-ratio: 379 / 129;
  overflow: hidden;
  transform: scaleX(1.08);
  transform-origin: center;
}

.nia-entry-logo-image,
.nia-entry-logo-shimmer {
  position: absolute;
  top: -165.9%;
  left: -15.83%;
  display: block;
  width: 135.1%;
  max-width: none;
  height: 396.9%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
}

.nia-entry-logo-shimmer {
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  filter: sepia(1) saturate(4.2) hue-rotate(354deg) brightness(1.22);
}

.nia-entry-logo-subtitle {
  width: clamp(430px, 68vw, 980px);
  max-width: calc(100vw - 48px);
  margin-top: clamp(18px, 3vw, 38px);
}

.nia-entry-subtitle-art {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

.nia-entry-subtitle-char {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.nia-entry-logo-star {
  position: absolute;
  left: 55%;
  top: 45.5%;
  width: clamp(210px, 23vw, 340px);
  height: clamp(210px, 23vw, 340px);
  transform: translate(-50%, -50%);
  pointer-events: none;
  user-select: none;
}

.nia-entry-star-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}

.nia-entry-star-trail,
.nia-entry-star-white,
.nia-entry-star-gold {
  opacity: 0;
}

.nia-entry-star-trail {
  filter: brightness(0) invert(1);
}

.nia-entry-star-white {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
  filter: brightness(0) invert(1);
}

.nia-entry-star-gold {
  clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
}

.nia-entry-transition.is-playing .nia-entry-logo {
  animation: niaEntryLogoAppear 1.6s ease both;
}

.nia-entry-transition.is-playing .nia-entry-logo-shimmer {
  animation: niaEntryGoldShimmer 1.6s cubic-bezier(.22, .7, .2, 1) both;
}

.nia-entry-transition.is-playing .nia-entry-logo-subtitle {
  animation: niaEntrySubtitleGroup 1.6s ease both;
}

.nia-entry-transition.is-playing .nia-entry-subtitle-char {
  animation: niaEntrySubtitleChar .32s cubic-bezier(.16, 1, .3, 1) both;
  animation-delay: calc(.38s + var(--char-index) * 25ms);
}

.nia-entry-transition.is-playing .nia-entry-logo-star {
  animation: niaEntryStarFrames 1.6s linear both;
}

.nia-entry-transition.is-playing .nia-entry-star-trail-one {
  animation: niaEntryStarTrailOne 1.6s linear both;
}

.nia-entry-transition.is-playing .nia-entry-star-trail-two {
  animation: niaEntryStarTrailTwo 1.6s linear both;
}

.nia-entry-transition.is-playing .nia-entry-star-white {
  animation: niaEntryStarWhiteWipe 1.6s linear both;
}

.nia-entry-transition.is-playing .nia-entry-star-gold {
  animation: niaEntryStarGoldWipe 1.6s linear both;
}

@keyframes niaEntryLogoCard {
  0% { opacity: 0; }
  22%, 68% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes niaEntryCameraPullback {
  0%, 11.25% {
    transform: translate(-2.5vw, 1.5vh) rotate(-1.2deg) scale(1.5);
  }
  42.5%, 100% {
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
}

@keyframes niaEntryLogoAppear {
  0%, 10% { opacity: 0; transform: translateY(10px) scale(.97) scaleX(1.08); }
  22%, 76% { opacity: 1; transform: translateY(0) scale(1) scaleX(1.08); }
  100% { opacity: 0; transform: translateY(-4px) scale(1.01) scaleX(1.08); }
}

@keyframes niaEntryGoldShimmer {
  0%, 32.5% { opacity: 0; clip-path: inset(0 100% 0 0); }
  38% { opacity: 1; clip-path: inset(0 72% 0 0); }
  45% { opacity: 1; clip-path: inset(0 35% 0 35%); }
  55% { opacity: 1; clip-path: inset(0 0 0 72%); }
  55.1%, 100% { opacity: 0; clip-path: inset(0 0 0 100%); }
}

@keyframes niaEntrySubtitleGroup {
  0%, 78% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes niaEntrySubtitleChar {
  0% { opacity: 0; transform: translateY(12px); filter: blur(4px); }
  100% { opacity: 1; transform: translateY(0); filter: blur(0); }
}

@keyframes niaEntryStarFrames {
  0%, 9.374% {
    opacity: 0;
    transform: translate(calc(-50% + 16vw), calc(-50% - 46vh)) scaleX(.72) scaleY(1.8);
  }
  9.375% {
    opacity: 1;
    transform: translate(calc(-50% + 16vw), calc(-50% - 46vh)) scaleX(.72) scaleY(1.8);
  }
  11.46% {
    opacity: 1;
    transform: translate(calc(-50% + 1.5vw), calc(-50% - 4vh)) scaleX(.16) scaleY(.2);
  }
  13.54% {
    opacity: 1;
    transform: translate(-50%, -50%) scaleX(1.08) scaleY(1.04);
  }
  15.62% {
    opacity: .04;
    transform: translate(-50%, -50%) scale(.05);
  }
  17.7% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  19.78% {
    opacity: .32;
    transform: translate(-50%, -50%) scale(.96);
  }
  21.86%, 23.94%, 78% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.96);
  }
}

@keyframes niaEntryStarTrailOne {
  0%, 9.374%, 13.54%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
  10.42% { opacity: .28; transform: translate(58%, -58%) scaleX(1.65) scaleY(.1); }
  11.46% { opacity: .5; transform: translate(34%, -34%) scaleX(1.35) scaleY(.12); }
}

@keyframes niaEntryStarTrailTwo {
  0%, 9.374%, 13.54%, 100% { opacity: 0; transform: translate(0, 0) scale(1); }
  10.42% { opacity: .16; transform: translate(82%, -82%) scaleX(2) scaleY(.06); }
  11.46% { opacity: .3; transform: translate(54%, -54%) scaleX(1.65) scaleY(.08); }
}

@keyframes niaEntryStarWhiteWipe {
  0%, 23.94% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  24% { opacity: 1; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  28% { opacity: 1; clip-path: polygon(0 0, 62% 0, 37% 100%, 0 100%); }
  32.5%, 100% { opacity: 1; clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%); }
}

@keyframes niaEntryStarGoldWipe {
  0%, 32.5% { opacity: 0; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  32.6% { opacity: 1; clip-path: polygon(0 0, 0 0, 0 100%, 0 100%); }
  44% { opacity: 1; clip-path: polygon(0 0, 62% 0, 37% 100%, 0 100%); }
  55%, 100% { opacity: 1; clip-path: polygon(0 0, 125% 0, 100% 100%, 0 100%); }
}

@keyframes niaEntryStarReduced {
  0% { opacity: 0; transform: translate(-50%, -50%); }
  100% { opacity: 1; transform: translate(-50%, -50%); }
}

@media (prefers-reduced-motion: reduce) {
  .nia-entry-transition.is-playing,
  .nia-entry-transition.is-playing .nia-entry-logo,
  .nia-entry-transition.is-playing .nia-entry-logo-shimmer,
  .nia-entry-transition.is-playing .nia-entry-logo-subtitle,
  .nia-entry-transition.is-playing .nia-entry-subtitle-char,
  .nia-entry-transition.is-playing .nia-entry-logo-star { animation-duration: .12s; }

  .nia-entry-transition.is-playing .nia-entry-camera {
    animation: none;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }

  .nia-entry-transition.is-playing .nia-entry-subtitle-char {
    animation-delay: 0s;
  }

  .nia-entry-transition.is-playing .nia-entry-logo-star {
    animation-name: niaEntryStarReduced;
  }

  .nia-entry-transition.is-playing .nia-entry-star-trail,
  .nia-entry-transition.is-playing .nia-entry-star-white,
  .nia-entry-transition.is-playing .nia-entry-star-gold {
    animation: none;
    opacity: 0;
  }
}

.free-mode-event-btn {
  position: absolute;
  right: 14px;
  top: calc(50% + 38px);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  min-height: 56px;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 20, 28, 0.78);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.free-mode-event-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.free-mode-event-badge {
  position: absolute;
  top: 5px;
  right: 5px;
  width: 9px;
  height: 9px;
  border: 2px solid rgba(16, 20, 28, 0.94);
  border-radius: 50%;
  background: #ff4058;
  box-shadow: 0 0 0 2px rgba(255, 64, 88, 0.2);
}

.free-mode-event-btn[hidden],
.free-mode-event-badge[hidden] {
  display: none !important;
}

.affinity-identity-copy {
  display: flex;
  flex: 1 1 auto;
  min-width: 0;
  flex-direction: column;
  gap: 4px;
}

.affinity-idol-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  min-height: 40px;
}

.affinity-idol-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.84);
  color: #2c3550;
  box-shadow: 0 8px 18px rgba(28, 34, 60, 0.14);
  cursor: pointer;
}

.affinity-idol-page-btn:disabled {
  opacity: 0.42;
  cursor: default;
}

.affinity-idol-page-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.affinity-idol-counter {
  min-width: 52px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  color: #2c3550;
  font-variant-numeric: tabular-nums;
}

.affinity-responsibility-controls {
  display: flex;
  flex: 0 1 auto;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
}

.affinity-responsible-badge,
.affinity-set-responsible-btn {
  min-height: 34px;
  padding: 7px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.affinity-responsible-badge {
  display: inline-flex;
  align-items: center;
  background: color-mix(in srgb, var(--affinity-theme) 22%, white);
  color: #2c3550;
}

.affinity-responsible-badge[hidden] {
  display: none;
}

.affinity-set-responsible-btn {
  border: 1px solid color-mix(in srgb, var(--affinity-theme) 54%, white);
  background: rgba(255, 255, 255, 0.88);
  color: #2c3550;
  cursor: pointer;
}

.affinity-set-responsible-btn:disabled {
  opacity: 0.52;
  cursor: not-allowed;
}

.affinity-idol-name {
  margin: 0;
  font-size: 34px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #20283f;
  text-shadow: 0 2px 14px rgba(255, 255, 255, 0.6);
}

.affinity-idol-romaji {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(44, 53, 80, 0.66);
}

.affinity-idol-tag {
  align-self: flex-start;
  margin-top: 4px;
  padding: 3px 12px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--affinity-theme) 24%, white);
  color: #2c3550;
  font-size: 11px;
  font-weight: 700;
  max-width: 100%;
  overflow-wrap: anywhere;
}

.affinity-card {
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.84);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: 0 12px 26px rgba(28, 34, 60, 0.12);
  backdrop-filter: blur(14px);
}

.affinity-card-title {
  margin: 0 0 10px;
  font-size: 13px;
  font-weight: 800;
  color: var(--affinity-theme);
  display: flex;
  align-items: center;
  gap: 6px;
}

.affinity-card-title::before {
  content: "";
  width: 14px;
  height: 14px;
  border-radius: 5px;
  background: var(--affinity-theme);
  opacity: 0.85;
}

.affinity-hearts {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}

.affinity-heart svg {
  width: 26px;
  height: 26px;
  fill: rgba(120, 128, 150, 0.28);
  transition: fill 0.2s ease, transform 0.2s ease;
}

.affinity-heart.is-filled svg {
  fill: var(--affinity-theme);
  filter: drop-shadow(0 3px 6px color-mix(in srgb, var(--affinity-theme) 50%, transparent));
}

.affinity-score-bar {
  position: relative;
  height: 24px;
  border-radius: 999px;
  background: rgba(120, 128, 150, 0.2);
  overflow: hidden;
}

.affinity-score-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--affinity-theme) 70%, white), var(--affinity-theme));
  transition: width 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}

.affinity-score-value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 1px 3px rgba(28, 34, 60, 0.55);
}

.affinity-stage-label {
  margin: 10px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: rgba(44, 53, 80, 0.74);
}

.affinity-card-grid {
  display: grid;
  gap: 14px;
}

.affinity-bio {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: rgba(40, 46, 66, 0.86);
}

.affinity-status-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
}

.affinity-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid rgba(120, 128, 150, 0.16);
}

.affinity-status-row:last-child {
  border-bottom: none;
}

.affinity-status-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(44, 53, 80, 0.7);
}

.affinity-status-label svg {
  width: 16px;
  height: 16px;
  fill: var(--affinity-theme);
}

.affinity-status-value {
  font-size: 13px;
  font-weight: 800;
  color: #20283f;
  text-align: right;
}

.affinity-bond-theme {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 600;
  color: #20283f;
}

.affinity-route-seed {
  margin: 10px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: rgba(40, 46, 66, 0.7);
  max-height: 160px;
  overflow-y: auto;
}

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

.affinity-tab {
  min-height: 36px;
  border: 1px solid rgba(255, 255, 255, 0.72);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: rgba(44, 53, 80, 0.72);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 8px 18px rgba(28, 34, 60, 0.1);
  backdrop-filter: blur(10px);
}

.affinity-tab.is-active {
  background: color-mix(in srgb, var(--affinity-theme) 18%, white);
  border-color: color-mix(in srgb, var(--affinity-theme) 36%, white);
  color: #20283f;
}

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

#affinitySecondaryPanel,
#affinityNetworkPanel {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}

#affinitySecondaryPanel[hidden],
#affinityNetworkPanel[hidden] {
  display: none;
}

.affinity-relation-list,
.affinity-network-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-right: 4px;
}

.affinity-relation-item {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(120, 128, 150, 0.14);
}

.affinity-relation-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--relation-theme, var(--affinity-theme)) 22%, white);
  color: #20283f;
  font-weight: 900;
}

.affinity-relation-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.affinity-relation-main {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.affinity-relation-main strong {
  font-size: 13px;
  color: #20283f;
}

.affinity-relation-main span {
  font-size: 11px;
  line-height: 1.35;
  color: rgba(44, 53, 80, 0.62);
}

.affinity-relation-bar {
  position: relative;
  height: 6px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(120, 128, 150, 0.18);
}

.affinity-relation-fill {
  position: absolute;
  inset: 0 auto 0 0;
  border-radius: inherit;
  background: var(--relation-theme, var(--affinity-theme));
}

.affinity-relation-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 42px;
}

.affinity-relation-score b {
  font-size: 18px;
  color: #20283f;
}

.affinity-relation-score span {
  font-size: 10px;
  font-weight: 800;
  color: rgba(44, 53, 80, 0.58);
}

.affinity-network-edge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.68);
  border: 1px solid rgba(120, 128, 150, 0.14);
}

.affinity-network-node {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 12px;
  font-weight: 800;
  color: #20283f;
}

.affinity-network-node:last-child {
  text-align: right;
}

.affinity-network-link {
  padding: 4px 8px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--affinity-theme) 18%, white);
  color: rgba(44, 53, 80, 0.76);
  font-size: 10px;
  font-weight: 800;
  white-space: nowrap;
}
@media (min-width: 520px) {
  .affinity-card-grid {
    grid-template-columns: 1fr 1fr;
    align-items: start;
  }
}

.task-panel {
  --task-ink: #253049;
  --task-muted: rgba(47, 55, 78, 0.68);
  --task-line: rgba(87, 98, 132, 0.16);
  --task-blue: #4f8ff7;
  --task-pink: #f15ea8;
  --task-mint: #2fbf91;
  --task-gold: #d99b25;
  display: flex;
  flex-direction: column;
  width: min(1120px, calc(100vw - 28px));
  min-height: min(680px, calc(100svh - 34px));
  max-height: min(94svh, calc(100svh - 20px));
  overflow: hidden;
  border-radius: 24px;
  background:
    radial-gradient(circle at 14% 0%, rgba(241, 94, 168, 0.16), transparent 34%),
    linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(244, 249, 255, 0.86));
  box-shadow: 0 28px 76px rgba(24, 31, 48, 0.34);
}

.task-panel::before {
  content: "";
  position: absolute;
  right: -88px;
  bottom: -118px;
  width: 420px;
  height: 420px;
  background: url("./assets/select-bg/bg_logo.png") center / contain no-repeat;
  opacity: 0.08;
  pointer-events: none;
  transform: rotate(-8deg);
}

.task-panel-head {
  position: relative;
  z-index: 2;
  padding: 18px 20px 10px;
  border-bottom: 0;
}

.task-panel-head h2 {
  margin: 0;
  color: var(--task-ink);
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.08;
  letter-spacing: 0;
}

.task-panel-body {
  position: relative;
  z-index: 1;
  padding: 0 18px 18px;
}

.task-panel-main-stage {
  min-height: 0;
}

.task-panel-workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 330px);
  gap: 16px;
  min-height: 0;
}

.task-panel-board {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.task-panel-summary {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: var(--task-muted);
}

.task-panel-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.task-panel-metric {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 10px;
  border: 1px solid var(--task-line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--task-ink);
  font-size: 12px;
  font-weight: 800;
  box-shadow: 0 8px 18px rgba(40, 55, 80, 0.08);
}

.task-panel-metric b {
  color: var(--task-blue);
  font-size: 11px;
}

.task-panel-sections {
  flex: 1 1 auto;
  min-height: 180px;
  display: grid;
  gap: 10px;
  overflow-y: auto;
  padding-right: 4px;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 102, 128, 0.38) rgba(111, 102, 128, 0.1);
}

.task-panel-section,
.task-panel-group {
  border: 1px solid var(--task-line);
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.78);
  box-shadow: 0 14px 30px rgba(40, 55, 80, 0.1);
  backdrop-filter: blur(14px);
}

.task-panel-group {
  overflow: hidden;
}

.task-panel-group-summary {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 12px;
  cursor: pointer;
  list-style: none;
}

.task-panel-group-summary::-webkit-details-marker {
  display: none;
}

.task-panel-group-summary:hover {
  background: rgba(79, 143, 247, 0.06);
}

.task-panel-group-index {
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(79, 143, 247, 0.13);
  color: var(--task-blue);
  font-weight: 900;
  font-size: 12px;
}

.task-panel-group.is-pink .task-panel-group-index { background: rgba(241, 94, 168, 0.14); color: #c93d82; }
.task-panel-group.is-violet .task-panel-group-index { background: rgba(125, 102, 230, 0.14); color: #6250c8; }
.task-panel-group.is-mint .task-panel-group-index { background: rgba(47, 191, 145, 0.14); color: #1f896a; }
.task-panel-group.is-gold .task-panel-group-index { background: rgba(217, 155, 37, 0.16); color: #9a6a10; }
.task-panel-group.is-red .task-panel-group-index { background: rgba(230, 85, 78, 0.14); color: #be423d; }

.task-panel-group-text {
  min-width: 0;
}

.task-panel-group-text strong {
  display: block;
  color: var(--task-ink);
  font-size: 14px;
  line-height: 1.25;
}

.task-panel-group-text span {
  display: block;
  margin-top: 3px;
  color: var(--task-muted);
  font-size: 11px;
  line-height: 1.35;
}

.task-panel-group-count {
  padding: 5px 8px;
  border-radius: 999px;
  background: rgba(79, 143, 247, 0.12);
  color: #2763bd;
  font-size: 12px;
}

.task-panel-group-list,
.task-panel-main-list,
.task-panel-side-list {
  display: grid;
  gap: 8px;
}

.task-panel-group-list {
  padding: 0 12px 12px;
}

.task-panel-section {
  padding: 12px 14px;
}

.task-panel-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.task-panel-section-head h3 {
  margin: 0;
  color: var(--task-ink);
  font-size: 15px;
}

.task-panel-section-meta {
  font-size: 12px;
  font-weight: 800;
  color: var(--task-blue);
}

.task-panel-main-item,
.task-panel-side-item {
  position: relative;
  overflow: hidden;
  padding: 11px 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(111, 102, 128, 0.12);
}

.task-panel-main-item strong,
.task-panel-side-item strong {
  display: block;
  margin-bottom: 5px;
  color: var(--task-ink);
  font-size: 14px;
  line-height: 1.32;
}

.task-panel-main-item span,
.task-panel-side-item span {
  display: block;
  font-size: 12px;
  line-height: 1.5;
  color: rgba(55, 55, 65, 0.76);
}

.task-panel-progress-hint {
  margin-top: 3px;
  font-weight: 700;
}

.task-panel-progress-bar {
  height: 7px;
  margin-top: 9px;
  border-radius: 999px;
  overflow: hidden;
  background: rgba(88, 99, 132, 0.14);
}

.task-panel-progress-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--task-blue), var(--task-pink));
}

.task-panel-main-item.is-completed .task-panel-progress-bar i {
  background: var(--task-mint);
}

.task-panel-status {
  display: inline-block;
  width: fit-content;
  margin-bottom: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
}

.task-panel-status.is-locked {
  background: rgba(130, 130, 145, 0.16);
  color: rgba(55, 55, 65, 0.62);
}

.task-panel-status.is-active {
  background: rgba(79, 167, 239, 0.18);
  color: #2b6ea8;
}

.task-panel-status.is-completed {
  background: rgba(88, 196, 132, 0.2);
  color: #2f7a4f;
}

.task-panel-hint {
  margin: 0;
  font-size: 13px;
  line-height: 1.5;
  color: rgba(55, 55, 65, 0.76);
}

.task-panel-action {
  margin-top: 10px;
  width: 100%;
}

.task-panel-teacher {
  position: relative;
  min-height: 0;
  display: grid;
  grid-template-rows: minmax(430px, 1fr) auto;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.76);
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(240, 248, 255, 0.94), rgba(255, 255, 255, 0.7)),
    radial-gradient(circle at 70% 12%, rgba(241, 94, 168, 0.16), transparent 42%);
}

.task-panel-teacher-art {
  position: relative;
  display: grid;
  place-items: end center;
  min-height: 470px;
  overflow: hidden;
  padding-top: 18px;
}

.task-panel-teacher-art::before {
  content: "";
  position: absolute;
  inset: 5% -8% auto;
  height: 360px;
  background: url("./assets/select-bg/bg_logo.png") center / contain no-repeat;
  opacity: 0.12;
}

.task-panel-teacher-art img {
  position: relative;
  z-index: 1;
  width: min(390px, 118%);
  max-height: 610px;
  object-fit: contain;
  filter: drop-shadow(0 24px 28px rgba(30, 42, 68, 0.28));
}

.task-panel-advice {
  position: relative;
  z-index: 2;
  margin: 0 14px 14px;
  padding: 14px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 30px rgba(40, 55, 80, 0.12);
}

.task-panel-advice b {
  display: block;
  margin-bottom: 6px;
  color: var(--task-pink);
  font-size: 12px;
  letter-spacing: 0.08em;
}

.task-panel-advice p {
  margin: 0;
  color: var(--task-ink);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 800;
}

@media (max-width: 920px) {
  .task-panel {
    width: min(680px, calc(100vw - 18px));
    min-height: min(620px, calc(100svh - 18px));
    border-radius: 20px;
  }

  .task-panel-workspace {
    grid-template-columns: 1fr;
  }

  .task-panel-teacher {
    grid-template-columns: minmax(0, 1fr) 168px;
    grid-template-rows: auto;
    min-height: 210px;
  }

  .task-panel-teacher-art {
    grid-column: 2;
    min-height: 220px;
    padding-top: 4px;
  }

  .task-panel-teacher-art img {
    width: 230px;
    max-height: 260px;
  }

  .task-panel-advice {
    grid-column: 1;
    align-self: end;
  }
}
.side-quest-panel {
  display: flex;
  flex-direction: column;
  min-height: min(520px, calc(100svh - 48px));
  max-height: min(92svh, calc(100svh - 36px));
  overflow: hidden;
}

.event-panel.side-quest-panel,
.event-panel.task-panel {
  display: flex;
  flex-direction: column;
  grid-template-rows: unset;
  min-height: min(520px, calc(100svh - 48px));
}

.task-panel.event-panel {
  min-height: min(680px, calc(100svh - 34px));
}

@media (max-width: 920px) {
  .task-panel.event-panel {
    min-height: min(620px, calc(100svh - 18px));
  }
}

.event-panel-body {
  flex: 1 1 auto;
  min-height: 280px;
  overflow-x: hidden;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(111, 102, 128, 0.38) rgba(111, 102, 128, 0.1);
  padding-right: 4px;
  padding-bottom: 8px;
}

.task-panel-body .task-panel-sections,
.side-quest-body .side-quest-slot-list {
  flex: 1 1 auto;
  min-height: 180px;
  overflow-y: auto;
}

.event-panel-body::-webkit-scrollbar {
  width: 6px;
}

.event-panel-body::-webkit-scrollbar-track {
  margin: 4px 0;
  background: rgba(111, 102, 128, 0.08);
  border-radius: 999px;
}

.event-panel-body::-webkit-scrollbar-thumb {
  background: rgba(111, 102, 128, 0.34);
  border-radius: 999px;
}

.event-panel-body::-webkit-scrollbar-thumb:hover {
  background: rgba(111, 102, 128, 0.5);
}

.event-panel-close-btn.icon-button {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border: 1px solid rgba(111, 102, 128, 0.18);
  border-radius: 12px;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
}

.side-quest-head,
.task-panel-head {
  flex-shrink: 0;
  margin-bottom: 0;
}

.side-quest-hint {
  margin: 0;
}

.side-quest-body {
  margin-top: 10px;
}

.side-quest-slot-list {
  display: grid;
  gap: 10px;
}

.side-quest-slot-button {
  border: 2px solid rgba(111, 102, 128, 0.14);
  border-radius: var(--radius);
  padding: 13px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.82);
  box-shadow: 0 10px 22px rgba(40, 35, 50, 0.1);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.side-quest-slot-button:hover:not(:disabled) {
  transform: translateY(-2px);
  border-color: var(--idol-theme);
  box-shadow: 0 14px 28px rgba(40, 35, 50, 0.16);
}

.side-quest-slot-button:disabled {
  opacity: 0.72;
  cursor: default;
}

.side-quest-slot-button strong,
.side-quest-slot-button span {
  display: block;
}

.side-quest-slot-button strong {
  margin-bottom: 4px;
  font-size: 16px;
}

.side-quest-slot-tag {
  margin-bottom: 4px;
  font-size: 12px;
  color: rgba(55, 55, 65, 0.62);
}

.side-quest-slot-status {
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--idol-theme);
}

.side-quest-slot-desc {
  font-size: 13px;
  line-height: 1.45;
  color: rgba(55, 55, 65, 0.78);
}

.side-quest-tier-panel {
  display: grid;
  gap: 12px;
}

.side-quest-tier-panel[hidden] {
  display: none !important;
}

.side-quest-tier-title {
  font-size: 18px;
}

.side-quest-tier-desc {
  font-size: 14px;
  line-height: 1.5;
  color: rgba(55, 55, 65, 0.78);
}

.side-quest-tier-buttons {
  display: grid;
  gap: 10px;
}

.side-quest-tier-button {
  border: 2px solid rgba(111, 102, 128, 0.14);
  border-radius: var(--radius);
  padding: 12px 14px;
  text-align: left;
  color: var(--ink);
  background: rgba(255, 255, 255, 0.88);
  cursor: pointer;
  transition: transform 180ms ease, border-color 180ms ease;
}

.side-quest-tier-button:hover {
  transform: translateY(-1px);
  border-color: var(--idol-theme);
}

.side-quest-tier-button strong,
.side-quest-tier-button span {
  display: block;
}

.side-quest-tier-button strong {
  margin-bottom: 4px;
  font-size: 15px;
}

.side-quest-tier-reward {
  margin-top: 6px;
  font-size: 12px;
  font-weight: 700;
  color: rgba(55, 55, 65, 0.72);
}

.side-quest-tier-back {
  width: 100%;
}

.side-quest-api-panel {
  margin-top: 4px;
  padding: 0;
  border: 1px solid rgba(111, 102, 128, 0.16);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.96);
  overflow: hidden;
}

.side-quest-api-panel-body {
  padding: 0 12px 14px;
}

.side-quest-api-panel summary {
  padding: 12px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  color: rgba(55, 55, 65, 0.82);
  list-style: none;
  user-select: none;
}

.side-quest-api-panel summary::-webkit-details-marker {
  display: none;
}

.side-quest-api-panel summary::before {
  content: "▸ ";
  color: var(--idol-theme);
}

.side-quest-api-panel[open] summary::before {
  content: "▾ ";
}

.side-quest-api-field {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  font-size: 12px;
}

.side-quest-api-field input[type="text"],
.side-quest-api-field input[type="password"] {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(111, 102, 128, 0.2);
  border-radius: 10px;
  font: inherit;
  box-sizing: border-box;
}

.side-quest-api-status {
  margin: 10px 0 0;
  font-size: 12px;
  color: rgba(55, 55, 65, 0.68);
  line-height: 1.45;
}

.side-quest-api-save {
  margin-top: 10px;
  width: 100%;
}

.side-quest-api-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}

.side-quest-api-actions .event-button {
  margin-top: 0;
  flex: 1;
}

.side-quest-api-regen {
  margin-top: 8px;
  width: 100%;
}

.side-quest-api-debug {
  margin-top: 12px;
  border: 1px solid rgba(108, 92, 160, 0.22);
  border-radius: 10px;
  background: rgba(245, 244, 250, 0.7);
  padding: 8px 10px;
}

.side-quest-api-debug summary {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: rgba(70, 60, 110, 0.9);
}

.side-quest-api-debug-summary {
  margin: 8px 0 6px;
  font-size: 12px;
  color: rgba(55, 55, 65, 0.78);
  line-height: 1.45;
}

.side-quest-api-debug-log {
  margin: 0;
  max-height: 220px;
  overflow: auto;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 11px;
  line-height: 1.5;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color: rgba(40, 42, 58, 0.92);
  background: rgba(255, 255, 255, 0.66);
  border-radius: 8px;
  padding: 8px 10px;
}

.world-map-idol-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.world-map-idol-marker {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 34px;
  height: 34px;
  min-width: 34px;
  min-height: 34px;
  border-width: 2px;
  box-shadow: 0 8px 18px color-mix(in srgb, var(--avatar-color, #624aff) 38%, transparent);
}

.world-map-hotspot.is-locked .world-map-hotspot-marker {
  background: linear-gradient(180deg, rgba(120, 120, 130, 0.92), rgba(90, 90, 100, 0.92));
  box-shadow: none;
  animation: none;
}

.vn-choice-btn-map-back {
  border-color: rgba(255, 255, 255, 0.28) !important;
  background: rgba(255, 255, 255, 0.08) !important;
}

.vn-choice-btn-map-back-direct {
  opacity: 0.72;
  font-size: 13px;
}

.free-mode-location-badge {
  position: absolute;
  left: 50%;
  top: calc(72px + env(safe-area-inset-top));
  z-index: 3;
  transform: translateX(-50%);
  margin: 0;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(16, 20, 28, 0.72);
  color: rgba(255, 255, 255, 0.92);
  font-size: 12px;
  text-align: center;
  white-space: nowrap;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.28);
  pointer-events: none;
}

.world-map-hotspot {
  position: absolute;
  transform: translate(-50%, -50%);
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
  z-index: 2;
}

.world-map-hotspot-marker {
  display: grid;
  place-items: center;
  min-width: 42px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255, 122, 176, 0.96), rgba(255, 79, 154, 0.96));
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: 0 10px 24px rgba(255, 79, 154, 0.38);
  animation: mapHotspotPulse 2.4s ease-in-out infinite;
}

.world-map-hotspot-label {
  position: absolute;
  top: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  padding: 5px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.96);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(17, 15, 22, 0.12);
  pointer-events: none;
}

.world-map-hotspot:focus-visible .world-map-hotspot-marker,
.world-map-hotspot:hover .world-map-hotspot-marker {
  transform: scale(1.06);
}

.world-map-hotspot.is-off-campus-exit .world-map-hotspot-marker {
  background: linear-gradient(180deg, rgba(72, 196, 255, 0.96), rgba(36, 148, 255, 0.96));
  box-shadow: 0 10px 24px rgba(36, 148, 255, 0.38);
  animation: mapOffCampusExitPulse 2.4s ease-in-out infinite;
}

.world-map-hotspot.is-off-campus-exit .world-map-hotspot-label {
  color: #0f5f9c;
}

@keyframes mapOffCampusExitPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(36, 148, 255, 0.38); }
  50% { box-shadow: 0 12px 28px rgba(36, 148, 255, 0.58); }
}

@keyframes mapHotspotPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(255, 79, 154, 0.38); }
  50% { box-shadow: 0 14px 28px rgba(255, 79, 154, 0.56); }
}

.free-mode-entry-panel {
  width: min(520px, 100%);
}

.free-mode-entry-points {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.free-mode-entry-points span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(38, 169, 244, 0.12);
  color: #1677b3;
  font-size: 12px;
  font-weight: 700;
}

.map-location-panel {
  width: min(520px, 100%);
  display: flex;
  flex-direction: column;
  max-height: min(760px, calc(100svh - 36px));
  overflow: hidden;
}

.map-location-panel > :not(.map-location-entry-actions) {
  flex-shrink: 0;
}

.map-location-panel .map-location-presence-list.is-scrollable {
  flex-shrink: 1;
  min-height: 0;
}

.map-location-panel .map-location-entry-actions {
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 14px;
}

.map-location-visual {
  margin-bottom: 12px;
  overflow: hidden;
  border-radius: 16px;
  border: 1px solid rgba(111, 102, 128, 0.12);
}

.map-location-visual img {
  display: block;
  width: 100%;
  height: min(220px, 38svh);
  object-fit: cover;
}

.map-location-presence {
  margin-bottom: 12px;
}

.map-location-presence-label {
  margin: 0 0 8px;
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 700;
}

.map-location-presence-avatars {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.map-location-presence-avatar {
  width: 44px;
  height: 44px;
  border-width: 2px;
}

.map-location-presence-avatar.is-interactable {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.92), 0 0 0 4px var(--pink);
}

.map-location-presence-avatar.is-background {
  opacity: 0.72;
  filter: saturate(0.82);
}

.map-location-presence-toggle {
  width: 100%;
  margin-top: 8px;
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(111, 102, 128, 0.18);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease;
}

.map-location-presence-toggle:hover {
  background: rgba(255, 241, 246, 0.95);
  border-color: rgba(236, 64, 122, 0.28);
  color: var(--ink);
}

.map-location-presence-list {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}

.map-location-presence-list.is-scrollable {
  max-height: min(200px, 30svh);
  overflow-y: auto;
  padding-right: 2px;
}

.map-location-presence-item {
  display: grid;
  gap: 2px;
  padding: 10px 12px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(0, 0, 0, 0.06);
}

.map-location-presence-item.is-interactable {
  border-color: rgba(236, 64, 122, 0.28);
  background: linear-gradient(135deg, rgba(255, 241, 246, 0.95), rgba(255, 255, 255, 0.88));
}

.map-location-presence-item.is-background {
  opacity: 0.84;
}

.map-location-presence-name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
}

.map-location-presence-copy {
  font-size: 12px;
  line-height: 1.45;
  color: var(--soft-ink);
}

.map-location-presence-status {
  font-size: 11px;
  font-weight: 700;
  color: var(--violet);
}

.map-location-presence-item.is-interactable .map-location-presence-status {
  color: var(--pink);
}

.map-location-enter-options.is-scout-mode {
  grid-template-columns: 1fr;
}

.map-location-entry-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 14px;
}

.map-location-enter-options {
  display: grid;
  grid-template-columns: minmax(0, 1.65fr) minmax(88px, 1fr);
  gap: 8px;
}

.map-location-enter-options.has-facility-option .map-location-facility-btn {
  grid-column: 1 / -1;
}

.map-location-enter-options .event-button {
  min-height: 50px;
  padding-inline: 14px;
  font-size: 14px;
  white-space: nowrap;
}

#mapLocationEnterWithIdolBtn {
  font-size: 15px;
}

.map-location-outing-btn {
  min-height: 46px;
}

.map-location-shop-btn {
  min-height: 46px;
}

.free-mode-apartment-btn,
.producer-apartment-campus-btn {
  position: absolute;
  right: 14px;
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 56px;
  min-height: 56px;
  padding: 8px 6px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 20, 28, 0.78);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.free-mode-apartment-btn {
  top: calc(50% + 236px);
}

.free-mode-apartment-btn svg,
.producer-apartment-campus-btn svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
}

.producer-apartment-campus-btn {
  top: calc(50% - 28px);
}

.producer-apartment-campus-btn[hidden] {
  display: none !important;
}

.free-mode-bag-btn {
  position: absolute;
  right: 14px;
  top: calc(50% + 170px);
  z-index: 4;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  min-width: 72px;
  min-height: 56px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 18px;
  background: rgba(16, 20, 28, 0.78);
  color: #fff;
  font: inherit;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.24);
}

.free-mode-bag-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: rgba(255, 196, 120, 0.92);
  color: #2a1608;
  font-size: 10px;
  line-height: 1.2;
}

@media (max-height: 640px) {
  #freeModeAffinityBtn,
  #freeModeTaskPanelBtn,
  #freeModeSideQuestBtn,
  #freeModeEventBtn,
  #freeModePhoneBtn,
  #freeModeBagBtn,
  #freeModeApartmentBtn {
    width: 50px;
    min-width: 50px;
    min-height: 48px;
    padding: 5px 4px;
    gap: 2px;
    border-radius: 14px;
    font-size: 10px;
  }

  #freeModeAffinityBtn { top: calc(50% - 186px); }
  #freeModeTaskPanelBtn { top: calc(50% - 134px); }
  #freeModeSideQuestBtn { top: calc(50% - 82px); }
  #freeModeEventBtn { top: calc(50% - 30px); }
  #freeModePhoneBtn { top: calc(50% + 22px); }
  #freeModeBagBtn { top: calc(50% + 74px); }
  #freeModeApartmentBtn { top: calc(50% + 126px); }

  #worldMapLayoutEditBtn {
    display: none !important;
  }
}

.gift-shop-panel {
  display: flex;
  flex-direction: column;
  min-height: min(560px, calc(100svh - 48px));
  max-height: min(92svh, calc(100svh - 36px));
  overflow: hidden;
}

.gift-shop-head {
  align-items: flex-start;
}

.gift-shop-head-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.gift-shop-wallet-badge {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(255, 196, 120, 0.16);
  border: 1px solid rgba(255, 196, 120, 0.34);
  color: #8a4d12;
  font-size: 13px;
  font-weight: 700;
}

.gift-shop-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 0 16px 12px;
}

.gift-shop-tab {
  min-height: 40px;
  border: 1px solid rgba(111, 102, 128, 0.18);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.72);
  color: #4d4658;
  font: inherit;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.gift-shop-tab.is-active {
  border-color: rgba(255, 143, 176, 0.42);
  background: linear-gradient(135deg, rgba(255, 143, 176, 0.18), rgba(255, 214, 170, 0.28));
  color: #8d3158;
}

.gift-shop-hint {
  margin-top: 0;
}

.gift-shop-catalog,
.gift-shop-bag,
.gift-shop-recipient-list {
  display: grid;
  gap: 10px;
}

.gift-shop-card,
.gift-shop-bag-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 12px;
  border-radius: 16px;
  border: 1px solid rgba(111, 102, 128, 0.14);
  background: rgba(255, 255, 255, 0.82);
}

.gift-shop-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.02em;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.28);
}

.gift-shop-card-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gift-shop-card-copy strong {
  font-size: 15px;
  color: #2f2738;
}

.gift-shop-card-desc,
.gift-shop-card-meta {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(47, 39, 56, 0.72);
}

.gift-shop-buy-btn,
.gift-shop-give-btn {
  min-width: 72px;
  min-height: 38px;
  padding-inline: 12px;
}

.gift-shop-empty {
  margin: 0;
  padding: 18px 12px;
  text-align: center;
  color: rgba(47, 39, 56, 0.62);
  font-size: 14px;
}

.gift-shop-give-panel {
  display: grid;
  gap: 12px;
}

.gift-shop-give-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.gift-shop-give-back {
  border: 0;
  background: transparent;
  color: #7b4ea8;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.gift-shop-recipient-btn {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid rgba(111, 102, 128, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  text-align: left;
  cursor: pointer;
}

.gift-shop-recipient-btn:hover {
  border-color: rgba(255, 143, 176, 0.42);
  background: rgba(255, 245, 249, 0.96);
}

.gift-shop-recipient-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12);
}

.gift-shop-recipient-copy {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.gift-shop-recipient-copy strong {
  font-size: 14px;
  color: #2f2738;
}

.gift-shop-recipient-copy span {
  font-size: 12px;
  line-height: 1.45;
  color: rgba(47, 39, 56, 0.68);
}

@media (max-width: 420px) {
  .gift-shop-card,
  .gift-shop-bag-item {
    grid-template-columns: auto 1fr;
  }

  .gift-shop-buy-btn,
  .gift-shop-give-btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 420px) {
  .map-location-enter-options {
    grid-template-columns: 1fr;
  }

  .map-location-enter-options .event-button {
    white-space: normal;
  }
}

.world-map-layout-edit-toggle {
  position: absolute;
  right: 14px;
  bottom: calc(14px + env(safe-area-inset-bottom));
  z-index: 4;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(16, 20, 28, 0.72);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.world-map-layout-editor {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 5;
  display: grid;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 16px;
  background: rgba(16, 20, 28, 0.88);
  color: #fff;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.28);
}

.world-map-layout-editor.is-hidden {
  display: none !important;
}

.world-map-layout-editor-head {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  font-size: 13px;
}

.world-map-layout-editor-head strong {
  font-size: 14px;
}

.world-map-layout-editor-head span,
.world-map-layout-editor-coord {
  margin: 0;
  color: rgba(255, 255, 255, 0.76);
  font-size: 12px;
}

.world-map-layout-editor-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.world-map-layout-action {
  min-height: 36px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.world-map-layout-action.primary {
  border-color: rgba(255, 79, 154, 0.5);
  background: rgba(255, 79, 154, 0.28);
}

.free-mode-stage.is-layout-editing .free-mode-location-badge {
  top: calc(72px + env(safe-area-inset-top));
}

.free-mode-stage.is-layout-editing .world-map-hotspot-marker {
  animation: none;
  outline: 2px solid rgba(255, 255, 255, 0.92);
  outline-offset: 2px;
}

.free-mode-stage.is-layout-editing .world-map-hotspot {
  cursor: grab;
  touch-action: none;
}

.free-mode-stage.is-layout-editing .world-map-hotspot:active {
  cursor: grabbing;
}

.world-map-canvas[data-map-fit="contain"] .world-map-bg {
  object-fit: contain;
}

/* Dark mode dialogue box fallback for high-contrast */
@media (prefers-color-scheme: dark) {
  .vn-dialogue-box {
    background: rgba(20, 20, 28, 0.76);
    border: 2px solid rgba(255, 255, 255, 0.2);
  }
  .vn-text {
    color: #f1eff4;
  }
  .vn-btn {
    color: #a09eab;
  }
  .vn-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
  }
}

/* ============================================================
   小手机 · 音乐 App（Spotify 风格，作用域限定在 .music-app）
   ============================================================ */
.mini-phone-statusbar.is-music { color: #fff; background: #0b0b0f; }
.mini-phone-statusbar.is-music .mini-phone-signal,
.mini-phone-statusbar.is-music .mini-phone-wifi,
.mini-phone-statusbar.is-music .mini-phone-battery,
.mini-phone-statusbar.is-music .mini-phone-battery::after { background: #fff; }

.music-app {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
  --sp-green: #1db954;
  --sp-green-bright: #1ed760;
  --sp-surface-3: #2a2a2a;
  --sp-text-dim: #b3b3b3;
  --sp-text-faint: #7a7a7a;
  color: #fff;
}
.music-app[hidden] { display: none !important; }

.music-library {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #1f1430 0%, #0b0b0f 38%);
}

.music-lib-head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 16px 10px;
}
.music-lib-title { font-size: 20px; font-weight: 700; }
.music-icon-btn {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  border-radius: 50%; transition: background 0.2s ease;
}
.music-icon-btn:hover { background: rgba(255,255,255,0.1); }
.music-icon-btn svg { width: 20px; height: 20px; }

.music-scroll {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.music-scroll::-webkit-scrollbar { width: 0; }

.music-quick-grid {
  padding: 0 16px 6px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.music-quick-card {
  display: flex; align-items: center; gap: 8px;
  height: 48px; border-radius: 6px;
  background: var(--sp-surface-3); overflow: hidden; cursor: pointer;
  transition: background 0.2s ease;
}
.music-quick-card:hover { background: #3a3a3a; }
.music-qc-cover { width: 48px; height: 48px; flex: 0 0 auto; }
.music-qc-name {
  font-size: 12px; font-weight: 600; line-height: 1.2; padding-right: 6px;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.music-quick-card.liked-tile .music-qc-cover {
  background: linear-gradient(135deg, #4f24c9, #8a5bff 60%, #c08bff);
  display: grid; place-items: center; color: #fff;
}
.music-quick-card.liked-tile .music-qc-cover svg { width: 22px; height: 22px; }

.music-tabs { display: flex; gap: 8px; padding: 8px 16px; }
.music-tab {
  border: 0; cursor: pointer; padding: 6px 13px; border-radius: 999px;
  font-size: 12px; font-weight: 600; color: #fff; background: var(--sp-surface-3);
  transition: background 0.2s ease, color 0.2s ease;
}
.music-tab:hover { background: #3a3a3a; }
.music-tab.music-tab-active { background: var(--sp-green); color: #04130a; }

.music-empty {
  padding: 36px 24px; text-align: center;
  color: var(--sp-text-faint); font-size: 13px; line-height: 1.7;
}

.music-liked-actions { display: flex; gap: 10px; padding: 2px 16px 10px; }
.music-liked-play, .music-liked-shuffle {
  display: inline-flex; align-items: center; gap: 6px;
  border: 0; cursor: pointer; border-radius: 999px;
  font-size: 13px; font-weight: 700; padding: 9px 18px;
  transition: transform 0.15s ease, background 0.2s ease;
}
.music-liked-play { background: var(--sp-green); color: #04130a; }
.music-liked-play:hover { background: var(--sp-green-bright); transform: scale(1.03); }
.music-liked-shuffle { background: var(--sp-surface-3); color: #fff; }
.music-liked-shuffle:hover { background: #3a3a3a; transform: scale(1.03); }
.music-liked-actions svg { width: 17px; height: 17px; }

.music-track-list { padding: 0 0 14px; }
.music-track-row {
  display: flex; align-items: center; gap: 11px;
  padding: 7px 16px; cursor: pointer; transition: background 0.15s ease;
}
.music-track-row:hover { background: rgba(255,255,255,0.06); }
.music-track-row.is-playing .music-tr-title { color: var(--sp-green-bright); }
.music-tr-cover { width: 46px; height: 46px; flex: 0 0 auto; border-radius: 4px; }
.music-tr-meta { flex: 1 1 auto; min-width: 0; }
.music-tr-title {
  font-size: 14px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-tr-artist {
  font-size: 12px; color: var(--sp-text-dim); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.music-tr-eq {
  flex: 0 0 auto; display: none; align-items: flex-end; gap: 2px; height: 13px;
}
.music-track-row.is-playing .music-tr-eq { display: flex; }
.music-tr-eq span {
  width: 3px; background: var(--sp-green-bright); border-radius: 2px;
  animation: musicEq 0.9s ease-in-out infinite;
}
.music-tr-eq span:nth-child(2) { animation-delay: 0.2s; }
.music-tr-eq span:nth-child(3) { animation-delay: 0.4s; }
@keyframes musicEq { 0%,100% { height: 4px; } 50% { height: 13px; } }
.music-tr-like {
  flex: 0 0 auto; border: 0; background: transparent; cursor: pointer;
  color: var(--sp-text-faint); display: grid; place-items: center;
  width: 30px; height: 30px; transition: color 0.2s ease, transform 0.15s ease;
}
.music-tr-like svg { width: 19px; height: 19px; }
.music-tr-like:hover { transform: scale(1.12); color: #fff; }
.music-tr-like.liked { color: var(--sp-green-bright); }

/* 封面（图片，渐变兜底由内联 style 提供） */
.music-cover {
  position: relative; display: grid; place-items: center;
  border-radius: 4px; overflow: hidden;
  color: rgba(255,255,255,0.92); font-weight: 800;
}
.music-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.music-cover span { font-size: 1.05em; text-shadow: 0 1px 4px rgba(0,0,0,0.3); }

/* 迷你播放条 */
.music-mini {
  flex: 0 0 auto; margin: 0 8px 6px; border-radius: 8px;
  background: linear-gradient(90deg, #3b1d4d, #2a2440);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 10px; cursor: pointer; position: relative; overflow: hidden;
}
.music-mini[hidden] { display: none !important; }
.music-mini::after {
  content: ""; position: absolute; left: 8px; right: 8px; bottom: 3px;
  height: 2px; border-radius: 2px; background: rgba(255,255,255,0.25);
}
.music-mini-prog {
  position: absolute; left: 8px; bottom: 3px; height: 2px; width: 0;
  border-radius: 2px; background: #fff; z-index: 1;
}
.music-mini-cover { width: 38px; height: 38px; border-radius: 4px; flex: 0 0 auto; }
.music-mini-meta { flex: 1 1 auto; min-width: 0; }
.music-mini-title { font-size: 13px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-mini-artist { font-size: 11px; color: var(--sp-text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-mini-play {
  width: 32px; height: 32px; flex: 0 0 auto; border: 0; background: transparent;
  color: #fff; cursor: pointer; display: grid; place-items: center;
}
.music-mini-play svg { width: 22px; height: 22px; }

/* 全屏播放页 */
.music-now {
  position: absolute; inset: 0; z-index: 5;
  background: linear-gradient(180deg, var(--np-accent, #5d2a6e) 0%, #1a1320 52%, #0b0b0f 100%);
  display: flex; flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.music-now.open { transform: translateY(0); }
.music-now-top {
  flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px 4px;
}
.music-now-label { font-size: 12px; font-weight: 700; letter-spacing: 0.5px; }
.music-now-icon {
  border: 0; background: transparent; color: #fff; cursor: pointer;
  display: grid; place-items: center; width: 32px; height: 32px;
}
.music-now-icon svg { width: 22px; height: 22px; }

.music-now-body {
  flex: 1 1 auto; min-height: 0;
  display: flex; flex-direction: column; justify-content: center;
  padding: 4px 24px 18px; gap: 16px;
}
.music-now-cover {
  width: 100%; aspect-ratio: 1; border-radius: 10px; font-size: 56px;
  box-shadow: 0 22px 46px rgba(0,0,0,0.5);
}
.music-now-info { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.music-now-info-text { min-width: 0; }
.music-now-song { font-size: 20px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-now-singer { font-size: 13px; color: var(--sp-text-dim); margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.music-now-like { border: 0; background: transparent; color: var(--sp-text-faint); cursor: pointer; padding: 4px; }
.music-now-like svg { width: 26px; height: 26px; }
.music-now-like.liked { color: var(--sp-green-bright); }

.music-now-progress { display: flex; flex-direction: column; gap: 6px; }
.music-now-track { height: 4px; border-radius: 4px; background: rgba(255,255,255,0.28); position: relative; cursor: pointer; }
.music-now-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: #fff; border-radius: 4px; }
.music-now-knob {
  position: absolute; top: 50%; left: 0; width: 12px; height: 12px; border-radius: 50%;
  background: #fff; transform: translate(-50%, -50%); box-shadow: 0 1px 4px rgba(0,0,0,0.4);
}
.music-now-track:hover .music-now-fill { background: var(--sp-green-bright); }
.music-now-time { display: flex; justify-content: space-between; font-size: 11px; color: var(--sp-text-dim); font-variant-numeric: tabular-nums; }

.music-now-controls { display: flex; align-items: center; justify-content: space-between; }
.music-ctrl {
  border: 0; background: transparent; color: #fff; cursor: pointer;
  display: grid; place-items: center; transition: transform 0.15s ease, color 0.2s ease;
}
.music-ctrl:hover { transform: scale(1.08); }
.music-ctrl-sec { color: var(--sp-text-dim); }
.music-ctrl-sec.active { color: var(--sp-green-bright); }
.music-ctrl-sec svg { width: 22px; height: 22px; }
.music-ctrl-step svg { width: 32px; height: 32px; }
.music-now-play {
  width: 60px; height: 60px; border-radius: 50%;
  background: #fff; color: #000; box-shadow: 0 8px 20px rgba(0,0,0,0.4);
}
.music-now-play:hover { transform: scale(1.05); }
.music-now-play svg { width: 28px; height: 28px; }

/* 小手机 · 初星广播部（学园偶像大师风格） */
.broadcast-app {
  --bc-pink: #ff4f9a;
  --bc-blue: #26a9f4;
  --bc-yellow: #ffca35;
  --bc-violet: #8c73ff;
  --bc-orange: #ff783f;
  --bc-ink: #2a2430;
  --bc-muted: rgba(42, 36, 48, 0.62);
  --bc-glass: rgba(255, 255, 255, 0.88);
  --bc-line: rgba(42, 36, 48, 0.08);
  display: flex;
  flex-direction: column;
  height: 100%;
  background: linear-gradient(165deg, #fff8fb 0%, #f3f8ff 42%, #fff9e8 100%);
  color: var(--bc-ink);
  font-family: var(--font-sans);
}

.broadcast-app[hidden] { display: none !important; }

.broadcast-hero {
  position: relative;
  flex: 0 0 auto;
  padding: 10px 14px 12px;
  overflow: hidden;
}

.broadcast-hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 79, 154, 0.22), transparent 42%),
    radial-gradient(circle at 88% 12%, rgba(38, 169, 244, 0.2), transparent 38%),
    radial-gradient(circle at 50% 100%, rgba(255, 202, 53, 0.16), transparent 48%);
}

.broadcast-hero-bg::before,
.broadcast-hero-bg::after {
  content: "";
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 202, 53, 0.55);
}

.broadcast-hero-bg::before { top: 18px; right: 28%; }
.broadcast-hero-bg::after { top: 42px; left: 18%; background: rgba(255, 79, 154, 0.4); }

.broadcast-hero-strip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.broadcast-onair {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px 4px 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(255, 79, 154, 0.22);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--bc-pink);
}

.broadcast-onair-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--bc-pink);
  box-shadow: 0 0 0 0 rgba(255, 79, 154, 0.55);
  animation: broadcast-onair-pulse 1.8s ease infinite;
}

@keyframes broadcast-onair-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 79, 154, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(255, 79, 154, 0); }
}

@media (prefers-reduced-motion: reduce) {
  .broadcast-onair-dot { animation: none; }
}

.broadcast-dept-en {
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--bc-muted);
}

.broadcast-cast-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: start;
  gap: 6px;
  margin-bottom: 12px;
}

.broadcast-cast-slot {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  min-width: 0;
}

.broadcast-cast-host { align-items: flex-start; text-align: left; }
.broadcast-cast-guests { align-items: flex-end; text-align: right; }

.broadcast-cast-bridge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-top: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--bc-pink), var(--bc-blue));
  color: #fff;
  box-shadow: 0 4px 12px rgba(255, 79, 154, 0.28);
}

.broadcast-cast-bridge svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.broadcast-avatar-frame {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  padding: 3px;
  background: linear-gradient(135deg, var(--bc-pink), var(--bc-yellow), var(--bc-blue));
  box-shadow: 0 8px 20px rgba(255, 79, 154, 0.18);
  overflow: hidden;
}

.broadcast-avatar-frame.is-host {
  width: 72px;
  height: 72px;
  border-radius: 20px;
}

.broadcast-avatar-frame.is-guest {
  width: 52px;
  height: 52px;
  border-radius: 16px;
  margin-left: -10px;
  box-shadow: 0 6px 14px rgba(38, 169, 244, 0.16);
}

.broadcast-avatar-frame.is-guest:first-child { margin-left: 0; }

.broadcast-avatar-frame.is-empty {
  opacity: 0.55;
  background: linear-gradient(135deg, rgba(42, 36, 48, 0.12), rgba(42, 36, 48, 0.06));
}

.broadcast-guest-avatars {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: center;
  min-height: 52px;
}

.broadcast-avatar-img {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  object-fit: cover;
  background: #fff;
}

.broadcast-avatar-frame.is-host .broadcast-avatar-img { border-radius: 17px; }
.broadcast-avatar-frame.is-guest .broadcast-avatar-img { border-radius: 13px; }

.broadcast-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 15px;
  background: linear-gradient(145deg, #fff, #f7f2ff);
  color: var(--bc-violet);
  font-size: 1.35rem;
  font-weight: 800;
  font-family: var(--font-display);
}

.broadcast-avatar-frame.is-host .broadcast-avatar-fallback { font-size: 1.5rem; }
.broadcast-avatar-frame.is-guest .broadcast-avatar-fallback { font-size: 1.1rem; }

.broadcast-cast-name {
  margin: 6px 0 0;
  font-size: 0.92rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--bc-ink);
}

.broadcast-cast-roman {
  margin: 1px 0 0;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--bc-muted);
  text-transform: none;
}

.broadcast-cast-role,
.broadcast-cast-guest-label {
  margin: 2px 0 0;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--bc-pink);
}

.broadcast-cast-guest-label { color: var(--bc-blue); }

.broadcast-cast-guest-names {
  margin: 2px 0 0;
  max-width: 100%;
  font-size: 0.72rem;
  line-height: 1.35;
  color: var(--bc-muted);
  word-break: break-word;
}

.broadcast-episode-card {
  position: relative;
  padding: 12px 14px;
  border-radius: 16px;
  background: var(--bc-glass);
  border: 1px solid rgba(255, 255, 255, 0.85);
  box-shadow: 0 10px 24px rgba(42, 36, 48, 0.08);
  backdrop-filter: blur(8px);
}

.broadcast-category-chip {
  display: inline-block;
  margin-bottom: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(255, 79, 154, 0.14), rgba(38, 169, 244, 0.14));
  border: 1px solid rgba(255, 79, 154, 0.18);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--bc-violet);
}

.broadcast-title {
  margin: 0;
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--bc-ink);
}

.broadcast-meta {
  margin: 6px 0 0;
  font-size: 0.72rem;
  color: var(--bc-muted);
}

.broadcast-tabs {
  display: flex;
  gap: 6px;
  padding: 0 12px 8px;
  flex: 0 0 auto;
}

.broadcast-tab {
  flex: 1;
  min-height: 36px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  color: var(--bc-muted);
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}

.broadcast-tab.is-active {
  background: linear-gradient(135deg, var(--bc-pink), var(--bc-orange));
  color: #fff;
  box-shadow: 0 6px 16px rgba(255, 79, 154, 0.28);
}

.broadcast-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0 12px 8px;
  overscroll-behavior: contain;
}

.broadcast-panel[hidden] { display: none !important; }

.broadcast-outline {
  margin: 0;
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--bc-line);
  white-space: pre-wrap;
  font: inherit;
  font-size: 0.8rem;
  line-height: 1.6;
  color: var(--bc-ink);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.broadcast-script {
  padding: 14px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.82);
  border: 1px solid var(--bc-line);
  font-size: 0.8rem;
  line-height: 1.65;
  white-space: pre-wrap;
  min-height: 120px;
  color: var(--bc-ink);
}

.broadcast-script.is-empty {
  color: var(--bc-muted);
  font-style: italic;
}

.broadcast-history {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.broadcast-history-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  width: 100%;
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--bc-line);
  background: rgba(255, 255, 255, 0.78);
  color: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 120ms ease, box-shadow 120ms ease;
}

.broadcast-history-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(38, 169, 244, 0.12);
}

.broadcast-history-title {
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--bc-ink);
}

.broadcast-history-meta {
  font-size: 0.72rem;
  color: var(--bc-muted);
}

.broadcast-empty {
  margin: 0;
  padding: 20px;
  text-align: center;
  font-size: 0.8rem;
  color: var(--bc-muted);
}

.broadcast-footer {
  flex: 0 0 auto;
  padding: 10px 14px 14px;
  border-top: 1px solid var(--bc-line);
  background: rgba(255, 255, 255, 0.72);
  backdrop-filter: blur(8px);
}

.broadcast-status {
  margin: 0 0 10px;
  font-size: 0.72rem;
  color: var(--bc-muted);
  line-height: 1.45;
}

.broadcast-generate-btn {
  width: 100%;
  min-height: 42px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--bc-pink), var(--bc-orange));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 20px rgba(255, 79, 154, 0.28);
}

.broadcast-generate-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  box-shadow: none;
}

.mini-phone-statusbar.is-broadcast {
  background: rgba(255, 248, 251, 0.95);
  color: var(--bc-ink);
}

.mini-phone-statusbar.is-broadcast .mini-phone-signal,
.mini-phone-statusbar.is-broadcast .mini-phone-wifi,
.mini-phone-statusbar.is-broadcast .mini-phone-battery,
.mini-phone-statusbar.is-broadcast .mini-phone-battery::after {
  background: var(--bc-ink);
}

/* 小手机 · 初星圈 SNS（X / 推特式布局） */
.sns-app {
  --sns-x-blue: #1d9bf0;
  --sns-x-green: #00ba7c;
  --sns-x-pink: #f91880;
  --sns-x-text: #0f1419;
  --sns-x-muted: #536471;
  --sns-x-border: #eff3f4;
  --sns-x-hover: rgba(29, 155, 240, 0.1);
  --sns-star: #F9C584;
  --sns-official: #6366F1;
  --sns-deleted: #536471;
  --sns-heat-high: #f4212e;
  --sns-transition: 180ms ease;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  color: var(--sns-x-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Noto Sans JP", system-ui, sans-serif;
}

.sns-app[hidden] { display: none !important; }

.sns-topbar {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
  min-height: 48px;
  padding: 0 8px;
  border-bottom: 1px solid var(--sns-x-border);
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
}

.sns-topbar-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-left: 4px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b8a, var(--sns-star));
  color: #fff;
}

.sns-topbar-logo svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.sns-title {
  margin: 0;
  text-align: center;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.sns-refresh-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: auto;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--sns-x-blue);
  cursor: pointer;
  transition: background var(--sns-transition);
}

.sns-refresh-btn svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sns-refresh-btn:hover { background: var(--sns-x-hover); }

.sns-refresh-btn.is-spinning svg {
  animation: sns-spin 600ms linear;
}

@keyframes sns-spin {
  to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .sns-refresh-btn.is-spinning svg { animation: none; }
}

.sns-tabs {
  display: flex;
  min-height: 44px;
  border-bottom: 1px solid var(--sns-x-border);
  background: #fff;
}

.sns-tab {
  flex: 1;
  position: relative;
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--sns-x-muted);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
  transition: color var(--sns-transition), background var(--sns-transition);
}

.sns-tab:hover {
  background: rgba(15, 20, 25, 0.03);
}

.sns-tab.is-active {
  color: var(--sns-x-text);
}

.sns-tab.is-active::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 56px;
  height: 4px;
  border-radius: 999px;
  background: var(--sns-x-blue);
  transform: translateX(-50%);
}

.sns-scroll {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
}

.sns-trending {
  padding: 12px 16px;
  border-bottom: 1px solid var(--sns-x-border);
  background: #fff;
}

.sns-trending[hidden] { display: none !important; }

.sns-trending-label {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--sns-x-muted);
  letter-spacing: 0.02em;
}

.sns-trending-topic {
  margin: 4px 0 0;
  font-size: 0.92rem;
  font-weight: 700;
  line-height: 1.35;
  color: var(--sns-x-text);
}

.sns-feed {
  display: flex;
  flex-direction: column;
}

.sns-empty,
.sns-locked {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 180px;
  padding: 24px 20px;
  text-align: center;
  color: var(--sns-x-muted);
  font-size: 0.88rem;
  line-height: 1.55;
}

.sns-empty[hidden],
.sns-locked[hidden] { display: none !important; }

.sns-post {
  border-bottom: 1px solid var(--sns-x-border);
  padding: 12px 16px 10px;
  background: #fff;
  transition: background var(--sns-transition);
}

.sns-post:hover { background: rgba(0, 0, 0, 0.015); }

.sns-post-layout {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 12px;
  align-items: start;
}

.sns-post-avatar-col { width: 40px; }

.sns-post-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.sns-post-avatar-fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b8a, var(--sns-star));
  color: #fff;
  font-size: 0.88rem;
  font-weight: 700;
}

.sns-post-main { min-width: 0; }

.sns-post-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 2px;
}

.sns-post-names {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0 4px;
  min-width: 0;
}

.sns-post-author {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--sns-x-text);
}

.sns-post.is-official .sns-post-author { color: var(--sns-official); }

.sns-post-handle,
.sns-post-time {
  font-size: 0.82rem;
  color: var(--sns-x-muted);
}

.sns-post-dot {
  font-size: 0.82rem;
  color: var(--sns-x-muted);
}

.sns-post-more {
  flex-shrink: 0;
  color: var(--sns-x-muted);
}

.sns-post-more svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  stroke: none;
}

.sns-post-context {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 4px;
}

.sns-post-context-line {
  font-size: 0.72rem;
  color: var(--sns-x-muted);
}

.sns-post-scope-net { color: var(--sns-x-blue); }
.sns-post-scope-fanclub { color: var(--sns-x-pink); }

.sns-post-badge { color: var(--sns-official); font-weight: 700; }
.sns-post-deleted-badge { color: var(--sns-deleted); }

.sns-post-body {
  margin: 0 0 10px;
  font-size: 0.92rem;
  line-height: 1.45;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--sns-x-text);
}

.sns-post.is-deleted .sns-post-body {
  color: var(--sns-deleted);
  text-decoration: line-through;
}

.sns-post-actions {
  display: flex;
  justify-content: space-between;
  max-width: 280px;
  margin-top: 2px;
}

.sns-action {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-width: 36px;
  color: var(--sns-x-muted);
  font-size: 0.72rem;
  line-height: 1;
}

.sns-action svg {
  width: 17px;
  height: 17px;
}

.sns-action-reply svg,
.sns-action-like svg,
.sns-action-view svg {
  fill: currentColor;
  stroke: none;
}

.sns-action-repost svg {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sns-action-count {
  min-width: 0;
  font-variant-numeric: tabular-nums;
}

.sns-post.is-hot .sns-action-repost.is-hot,
.sns-post.is-hot .sns-action-like.is-hot {
  color: var(--sns-heat-high);
}

.sns-post.is-hot .sns-action-like.is-hot svg {
  fill: rgba(244, 33, 46, 0.12);
  stroke: var(--sns-heat-high);
}

/* 初星圈营业：嵌入信息流的三段式状态卡 */
.sns-business-card {
  border-bottom: 1px solid var(--sns-x-border);
  background: #fff;
}

.sns-business-card[hidden],
.sns-business-panel[hidden],
.sns-business-input-group[hidden] { display: none !important; }

.sns-business-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--sns-x-border);
}

.sns-business-kicker {
  display: block;
  color: var(--sns-x-blue);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
}

.sns-business-title {
  margin: 3px 0 0;
  color: var(--sns-x-text);
  font-size: 0.98rem;
  line-height: 1.3;
}

.sns-business-progress {
  flex: 0 0 auto;
  padding: 4px 8px;
  border-radius: 999px;
  background: rgba(29, 155, 240, 0.1);
  color: var(--sns-x-blue);
  font-size: 0.72rem;
  font-weight: 800;
}

.sns-business-panel { padding: 12px 16px 16px; }

.sns-business-fieldset {
  min-width: 0;
  margin: 0 0 14px;
  padding: 0;
  border: 0;
}

.sns-business-fieldset legend,
.sns-business-input-group > span {
  display: block;
  margin-bottom: 7px;
  color: var(--sns-x-muted);
  font-size: 0.72rem;
  font-weight: 700;
}

.sns-business-mode-list { display: grid; gap: 7px; }

.sns-business-mode {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 10px;
  border: 1px solid var(--sns-x-border);
  border-radius: 8px;
  cursor: pointer;
}

.sns-business-mode:has(input:checked) {
  border-color: rgba(29, 155, 240, 0.65);
  background: rgba(29, 155, 240, 0.06);
}

.sns-business-mode input { margin-top: 3px; accent-color: var(--sns-x-blue); }
.sns-business-mode strong { display: block; font-size: 0.82rem; }
.sns-business-mode small { display: block; margin-top: 2px; color: var(--sns-x-muted); font-size: 0.72rem; line-height: 1.35; }

.sns-business-image-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
}

.sns-business-image-option {
  display: grid;
  gap: 5px;
  min-width: 0;
  padding: 0 0 6px;
  border: 1px solid var(--sns-x-border);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  color: var(--sns-x-text);
  font: inherit;
  font-size: 0.7rem;
  text-align: left;
  cursor: pointer;
}

.sns-business-image-option.is-selected {
  border-color: var(--sns-x-blue);
  box-shadow: 0 0 0 1px var(--sns-x-blue);
}

.sns-business-image-placeholder,
.sns-business-result-image {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 68px;
  color: rgba(15, 20, 25, 0.68);
  font-size: 0.72rem;
  font-weight: 800;
}

.sns-business-image-option > span:last-child { padding: 0 7px; }
.sns-image-practice {
  background-image: url("./assets/Selfies/gakumas_00310_.png");
  background-position: center 24%;
  background-size: cover;
}
.sns-image-meal { background: linear-gradient(135deg, #f6d9c3, #c9e6cb); }
.sns-image-school { background: linear-gradient(135deg, #e7d8f4, #cde9ef); }

.sns-business-input-group { display: block; margin-bottom: 12px; }
.sns-business-input-group input,
.sns-business-input-group textarea {
  display: block;
  box-sizing: border-box;
  width: 100%;
  padding: 9px 10px;
  border: 1px solid #cfd9de;
  border-radius: 7px;
  background: #fff;
  color: var(--sns-x-text);
  font: inherit;
  font-size: 0.84rem;
}

.sns-business-input-group textarea { resize: vertical; line-height: 1.45; }
.sns-business-input-group input:focus,
.sns-business-input-group textarea:focus { outline: 2px solid rgba(29, 155, 240, 0.3); border-color: var(--sns-x-blue); }
.sns-business-status { min-height: 1.2em; margin: 0 0 8px; color: var(--sns-x-muted); font-size: 0.75rem; }

.sns-business-actions { display: flex; gap: 8px; align-items: center; }
.sns-business-actions button { min-height: 40px; padding: 8px 12px; border-radius: 999px; font: inherit; font-size: 0.78rem; font-weight: 700; cursor: pointer; }
.sns-business-primary { border: 0; background: var(--sns-x-blue); color: #fff; }
.sns-business-secondary { border: 1px solid #cfd9de; background: #fff; color: var(--sns-x-text); }
.sns-business-quiet { border: 0; background: transparent; color: var(--sns-x-muted); }
.sns-business-actions button:focus-visible,
.sns-business-image-option:focus-visible { outline: 2px solid var(--sns-x-blue); outline-offset: 2px; }

.sns-business-post { margin: -12px -16px 0; border-bottom: 1px solid var(--sns-x-border); }
.sns-business-post-image {
  width: 100%;
  margin-top: 10px;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--sns-x-border);
  border-radius: 8px;
  background-color: #eff3f4;
  background-position: center;
  background-size: cover;
}
.sns-business-post-image.sns-image-practice { background-position: center 30%; }
.sns-business-comments { padding-top: 12px; }
.sns-business-comments h3 { margin: 0 0 7px; font-size: 0.8rem; }
.sns-business-comment-list { display: grid; gap: 7px; }
.sns-business-comment { padding: 8px 10px; border-left: 3px solid var(--sns-x-border); background: #f7f9f9; font-size: 0.78rem; line-height: 1.4; }
.sns-business-comment.is-featured { border-left-color: var(--sns-x-blue); background: rgba(29, 155, 240, 0.06); }
.sns-business-comment.is-selected { border-left-color: var(--sns-x-pink); box-shadow: 0 0 0 1px rgba(249, 24, 128, 0.28); }
.sns-business-comment-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.sns-business-comment-head strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.72rem; }
.sns-business-comment p { margin: 0; }
.sns-business-comment-reply { flex: 0 0 auto; min-height: 28px; padding: 3px 8px; border: 1px solid var(--sns-x-border); border-radius: 999px; background: #fff; color: var(--sns-x-blue); font: inherit; font-size: 0.68rem; font-weight: 700; cursor: pointer; }
.sns-business-comment-reply:focus-visible { outline: 2px solid var(--sns-x-blue); outline-offset: 2px; }
.sns-business-interaction { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--sns-x-border); }
.sns-business-interaction-prompt { margin: 0 0 8px; font-size: 0.78rem; line-height: 1.45; }
.sns-business-interaction-actions { flex-wrap: wrap; }

.sns-business-result { display: grid; gap: 12px; }
.sns-business-result-image { min-height: 112px; border-radius: 8px; background: linear-gradient(135deg, #d8eafb, #f6d9c3); }
.sns-business-result-image.sns-image-practice {
  aspect-ratio: 4 / 3;
  background-image: url("./assets/Selfies/gakumas_00310_.png");
  background-position: center 28%;
  background-size: cover;
}
.sns-business-result-copy h3 { margin: 3px 0 5px; font-size: 0.94rem; }
.sns-business-result-copy p { margin: 0; color: var(--sns-x-muted); font-size: 0.8rem; line-height: 1.45; }
.sns-business-result-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; }
.sns-business-result-meta div { min-width: 0; padding: 7px; border: 1px solid var(--sns-x-border); border-radius: 6px; }
.sns-business-result-meta dt { color: var(--sns-x-muted); font-size: 0.65rem; }
.sns-business-result-meta dd { margin: 3px 0 0; font-size: 0.76rem; font-weight: 800; }
.sns-business-result-reason { margin: 0; color: var(--sns-x-muted); font-size: 0.75rem; line-height: 1.45; }
.sns-business-result-confirm { min-height: 42px; font: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer; }

@media (max-width: 360px) {
  .sns-business-image-list { gap: 5px; }
  .sns-business-image-placeholder { min-height: 58px; }
  .sns-business-result-meta { grid-template-columns: 1fr; }
}

.mini-phone-statusbar.is-sns {
  background: #fff;
  color: var(--sns-x-text);
}

.mini-phone-statusbar.is-sns .mini-phone-signal,
.mini-phone-statusbar.is-sns .mini-phone-wifi,
.mini-phone-statusbar.is-sns .mini-phone-battery,
.mini-phone-statusbar.is-sns .mini-phone-battery::after {
  background: var(--sns-x-text);
}

@media (max-width: 480px) {
  .affinity-body {
    padding-inline: 12px;
  }

  .affinity-identity {
    align-items: flex-start;
    flex-direction: column;
  }

  .affinity-idol-name {
    overflow-wrap: anywhere;
  }

  .affinity-responsibility-controls,
  .affinity-set-responsible-btn {
    width: 100%;
  }
}

.phone-app-notification-dot {
  position: absolute;
  top: -2px;
  right: 8px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #e94c67;
  border: 2px solid #fff;
}

.world-engine-event-inbox {
  padding: 14px;
  border: 1px solid rgba(22, 124, 128, 0.22);
  background: rgba(255, 255, 255, 0.9);
}

.world-engine-event-inbox h2 { margin: 10px 0 6px; font-size: 17px; }
.world-engine-event-inbox p { margin: 6px 0; font-size: 13px; line-height: 1.55; }
.world-engine-event-confirmation { padding: 9px 10px; border-left: 3px solid #d95668; background: #fff1f3; color: #71333d; }
.world-engine-event-modifiers { color: #596b70; }
.world-engine-event-actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-top: 14px; }
.world-engine-event-actions button { min-width: 0; padding: 9px 4px; border: 0; background: #e8f3f2; color: #174d50; font: inherit; }
.world-engine-event-actions button:first-child { background: #167c80; color: #fff; }

.world-engine-event-budget,
.world-engine-attach-audit,
.world-engine-attach-empty {
  padding: 14px 0;
  border-bottom: 1px solid var(--we-line);
}

.world-engine-event-budget-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.world-engine-event-budget-grid > div {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 9px;
  border: 1px solid var(--we-line);
  background: #fff;
}

.world-engine-event-budget-grid span {
  color: var(--we-muted);
  font-size: 9px;
}

.world-engine-event-budget-grid strong {
  color: var(--we-ink);
  font: 850 14px var(--font-mono);
}

.world-engine-event-inbox.is-empty {
  margin-top: 12px;
  border-style: dashed;
  background: transparent;
}

.world-engine-attach-list {
  display: grid;
  gap: 8px;
}

.world-engine-attach-row {
  min-width: 0;
  padding: 11px 0;
  border-bottom: 1px solid var(--we-line);
}

.world-engine-attach-row:last-child {
  border-bottom: 0;
}

.world-engine-attach-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  color: var(--we-muted);
  font: 700 9px var(--font-mono);
}

.world-engine-attach-meta strong {
  color: var(--we-teal);
}

.world-engine-attach-row h2 {
  margin: 7px 0 5px;
  color: var(--we-ink);
  font-size: 13px;
  line-height: 1.45;
}

.world-engine-attach-row p,
.world-engine-attach-empty p {
  margin: 4px 0 0;
  color: var(--we-muted);
  font-size: 10px;
  line-height: 1.55;
}

.storyteller-major-confirmation {
  z-index: 48;
}

.storyteller-major-confirmation-panel {
  width: min(440px, calc(100vw - 28px));
}

.storyteller-major-confirmation-copy {
  min-height: 0;
  color: #3e3235;
  line-height: 1.7;
}

/* 小手机 · 初星世界引擎 */
.world-engine-app {
  --we-ink: #18262b;
  --we-muted: #66747a;
  --we-line: #d9e0e1;
  --we-surface: #ffffff;
  --we-bg: #f2f5f5;
  --we-teal: #167c80;
  --we-coral: #d95668;
  --we-gold: #d89c29;
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  overflow: hidden;
  background: var(--we-bg);
  color: var(--we-ink);
  letter-spacing: 0;
}

.world-engine-app[hidden] {
  display: none !important;
}

.world-engine-head {
  display: flex;
  flex: 0 0 58px;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--we-line);
  background: rgba(255, 255, 255, 0.96);
}

.world-engine-brand {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 9px;
}

.world-engine-mark {
  display: grid;
  flex: 0 0 34px;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 6px;
  background: var(--we-teal);
  color: #fff;
  font-size: 16px;
  font-weight: 900;
}

.world-engine-title,
.world-engine-subtitle {
  overflow-wrap: anywhere;
}

.world-engine-title {
  margin: 0;
  color: var(--we-ink);
  font-size: 15px;
  font-weight: 900;
  line-height: 1.2;
}

.world-engine-subtitle {
  margin: 2px 0 0;
  color: var(--we-muted);
  font-size: 8px;
  font-weight: 800;
  line-height: 1.2;
}

.world-engine-head-actions {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 2px;
}

.world-engine-icon-btn {
  display: grid;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--we-teal);
}

.world-engine-icon-btn:hover,
.world-engine-icon-btn:focus-visible {
  background: rgba(22, 124, 128, 0.1);
}

.world-engine-icon-btn svg {
  width: 19px;
  height: 19px;
}

.world-engine-view {
  display: flex;
  flex: 1 1 auto;
  min-height: 0;
  flex-direction: column;
}

.world-engine-view[hidden] {
  display: none !important;
}

.world-engine-settings-titlebar {
  display: flex;
  flex: 0 0 48px;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-bottom: 1px solid var(--we-line);
  background: var(--we-surface);
}

.world-engine-settings-titlebar div {
  display: grid;
  gap: 1px;
}

.world-engine-settings-titlebar strong {
  font-size: 13px;
}

.world-engine-settings-titlebar span {
  color: var(--we-muted);
  font-size: 8px;
  font-weight: 800;
}

.world-engine-settings-back {
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border-radius: 50%;
  background: transparent;
  color: var(--we-teal);
}

.world-engine-settings-back svg {
  width: 18px;
  height: 18px;
}

.world-engine-settings-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 0 12px 24px;
}

.world-engine-settings-section {
  padding: 16px 0;
  border-bottom: 1px solid var(--we-line);
}

.world-engine-settings-section h2 {
  margin: 0 0 12px;
  font-size: 13px;
  line-height: 1.3;
}

.world-engine-field,
.world-engine-toggle,
.world-engine-range-field {
  display: grid;
  gap: 6px;
  margin: 0 0 12px;
  color: var(--we-muted);
  font-size: 11px;
  font-weight: 750;
}

.world-engine-range-field {
  grid-template-columns: minmax(0, 1fr) 110px;
  align-items: center;
}

.world-engine-range-field span,
.world-engine-style-disabled span {
  display: grid;
  gap: 2px;
}

.world-engine-range-field strong,
.world-engine-style-disabled strong {
  color: var(--we-ink);
  font-size: 12px;
}

.world-engine-range-field small,
.world-engine-style-disabled small {
  color: var(--we-muted);
  font-size: 9px;
  font-weight: 600;
}

.world-engine-range-field input {
  width: 100%;
  accent-color: var(--we-teal);
}

.world-engine-style-disabled {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 12px;
  color: var(--we-muted);
}

.world-engine-style-disabled b {
  color: var(--we-muted);
  font: 800 12px var(--font-mono);
}

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

.world-engine-toggle span {
  display: grid;
  gap: 2px;
}

.world-engine-toggle strong {
  color: var(--we-ink);
  font-size: 12px;
}

.world-engine-toggle small {
  color: var(--we-muted);
  font-size: 9px;
  font-weight: 600;
}

.world-engine-toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--we-teal);
}

.world-engine-field input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 10px;
  border: 1px solid var(--we-line);
  border-radius: 6px;
  background: #fff;
  color: var(--we-ink);
  font-size: 11px;
}

.world-engine-settings-status,
.world-engine-settings-note,
.world-engine-debug-summary {
  margin: 8px 0 12px;
  color: var(--we-muted);
  font-size: 10px;
  line-height: 1.6;
}

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

.world-engine-density-modes {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 4px;
  margin-bottom: 12px;
}

.world-engine-density-modes button {
  min-width: 0;
  height: 32px;
  border: 1px solid var(--we-line);
  border-radius: 5px;
  background: #fff;
  color: var(--we-muted);
  font-size: 10px;
  font-weight: 800;
  cursor: pointer;
}

.world-engine-density-modes button.is-active {
  border-color: var(--we-teal);
  background: var(--we-teal);
  color: #fff;
}

.world-engine-density-custom {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 10px;
}

.world-engine-density-custom[hidden] {
  display: none;
}

.world-engine-density-custom label {
  display: grid;
  gap: 4px;
  color: var(--we-muted);
  font-size: 9px;
  font-weight: 750;
}

.world-engine-density-custom input {
  width: 100%;
  min-width: 0;
  height: 34px;
  border: 1px solid var(--we-line);
  border-radius: 5px;
  background: #fff;
  color: var(--we-ink);
  text-align: center;
  font: 800 11px var(--font-mono);
}

.world-engine-settings-primary,
.world-engine-settings-secondary,
.world-engine-settings-command,
.world-engine-settings-danger {
  min-height: 40px;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
}

.world-engine-settings-primary {
  background: var(--we-teal);
  color: #fff;
}

.world-engine-settings-secondary,
.world-engine-settings-command {
  border: 1px solid var(--we-line);
  background: #fff;
  color: var(--we-ink);
}

.world-engine-settings-danger {
  width: 100%;
  margin-top: 8px;
  border: 1px solid var(--we-coral);
  background: #fff;
  color: var(--we-coral);
}

.world-engine-settings-danger[hidden] {
  display: none !important;
}

.world-engine-settings-command {
  width: 100%;
  text-align: left;
}

.world-engine-debug-log {
  max-height: 220px;
  margin: 0;
  overflow: auto;
  padding: 10px;
  border: 1px solid var(--we-line);
  border-radius: 6px;
  background: #18262b;
  color: #dce8e8;
  font: 9px/1.55 ui-monospace, SFMono-Regular, Consolas, monospace;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.world-engine-tabs {
  display: grid;
  flex: 0 0 42px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-bottom: 1px solid var(--we-line);
  background: var(--we-surface);
}

.world-engine-tab {
  position: relative;
  min-width: 0;
  padding: 0 6px;
  background: transparent;
  color: var(--we-muted);
  font-size: 12px;
  font-weight: 800;
}

.world-engine-tab::after {
  content: "";
  position: absolute;
  right: 20%;
  bottom: 0;
  left: 20%;
  height: 3px;
  border-radius: 3px 3px 0 0;
  background: transparent;
}

.world-engine-tab.is-active {
  color: var(--we-teal);
}

.world-engine-tab.is-active::after {
  background: var(--we-teal);
}

.world-engine-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 14px 12px 22px;
  scrollbar-width: thin;
  scrollbar-color: rgba(22, 124, 128, 0.34) transparent;
}

.world-engine-action-bar {
  flex: 0 0 auto;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--we-line);
  background: var(--we-surface);
}

.world-engine-manual-run {
  width: 100%;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--we-teal);
  border-radius: 6px;
  background: var(--we-teal);
  color: #fff;
  font-size: 12px;
  font-weight: 850;
}

.world-engine-manual-run:hover,
.world-engine-manual-run:focus-visible {
  background: #105f62;
}

.world-engine-manual-run:disabled {
  border-color: #aebbbc;
  background: #d8dfe0;
  color: #687779;
  cursor: not-allowed;
}

.world-engine-notice {
  margin-bottom: 12px;
  padding: 9px 10px;
  border-left: 3px solid var(--we-gold);
  background: #fff8e7;
  color: #6c5420;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.45;
}

.world-engine-notice.is-muted {
  border-left-color: #899397;
  background: #e9edee;
  color: #505d62;
}

.world-engine-storyteller-plan {
  margin-bottom: 12px;
  padding: 12px;
  border: 1px solid var(--we-line);
  border-left: 4px solid var(--we-teal);
  border-radius: 6px;
  background: var(--we-surface);
}

.world-engine-storyteller-plan.is-empty {
  border-left-color: #a0aaad;
}

.world-engine-plan-budget,
.world-engine-plan-categories {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}

.world-engine-plan-budget span,
.world-engine-plan-categories span {
  padding: 5px;
  border: 1px solid var(--we-line);
  border-radius: 4px;
  color: #4e5e64;
  font-size: 9px;
  text-align: center;
  overflow-wrap: anywhere;
}

.world-engine-storyteller-plan p {
  margin: 8px 0 0;
  color: var(--we-muted);
  font-size: 10px;
  line-height: 1.45;
}

.world-engine-storyteller-style {
  margin-top: 10px;
  padding-top: 9px;
  border-top: 1px solid var(--we-line);
}

.world-engine-storyteller-plan .world-engine-plan-error {
  color: #a44747;
}

.world-engine-direction {
  padding: 15px 14px 17px;
  border: 1px solid var(--we-line);
  border-left: 4px solid var(--we-coral);
  border-radius: 6px;
  background: var(--we-surface);
  box-shadow: 0 8px 22px rgba(32, 54, 60, 0.08);
}

.world-engine-kicker-row,
.world-engine-section-head,
.world-engine-pressure-head,
.world-engine-runtime-lead,
.world-engine-receipt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.world-engine-kicker-row {
  color: var(--we-muted);
  font-size: 10px;
  font-weight: 850;
}

.world-engine-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--we-muted);
  white-space: nowrap;
}

.world-engine-status-dot::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #a0aaad;
}

.world-engine-status-dot.is-ready::before {
  background: var(--we-teal);
}

.world-engine-status-dot.is-stale::before {
  background: var(--we-gold);
}

.world-engine-direction h2 {
  margin: 18px 0 7px;
  color: var(--we-ink);
  font-size: 23px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.world-engine-direction p {
  margin: 0;
  color: #4e5e64;
  font-size: 13px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.world-engine-day-key {
  margin-top: 16px;
  color: #879296;
  font: 750 9px var(--font-mono);
  overflow-wrap: anywhere;
}

.world-engine-empty {
  display: grid;
  min-height: 260px;
  place-items: center;
  align-content: center;
  padding: 28px 20px;
  text-align: center;
}

.world-engine-empty-mark {
  display: grid;
  width: 48px;
  height: 48px;
  margin-bottom: 14px;
  place-items: center;
  border: 1px solid rgba(22, 124, 128, 0.28);
  border-radius: 50%;
  background: #fff;
  color: var(--we-teal);
  font-size: 16px;
  font-weight: 900;
}

.world-engine-empty h2 {
  margin: 0;
  color: var(--we-ink);
  font-size: 17px;
}

.world-engine-empty p {
  max-width: 24em;
  margin: 8px 0 0;
  color: var(--we-muted);
  font-size: 12px;
  line-height: 1.55;
}

.world-engine-section-head {
  min-height: 28px;
  margin-bottom: 8px;
  color: var(--we-muted);
  font-size: 10px;
  font-weight: 850;
}

.world-engine-section-head strong {
  color: var(--we-ink);
  font-size: 11px;
}

.world-engine-pressure-list {
  display: grid;
  gap: 9px;
}

.world-engine-pressure {
  padding: 12px;
  border: 1px solid var(--we-line);
  border-radius: 6px;
  background: var(--we-surface);
}

.world-engine-pressure-head > div {
  min-width: 0;
}

.world-engine-pressure-head strong,
.world-engine-pressure-head span {
  display: block;
  overflow-wrap: anywhere;
}

.world-engine-pressure-head strong {
  color: var(--we-ink);
  font-size: 13px;
}

.world-engine-pressure-head > div > span {
  margin-top: 2px;
  color: var(--we-coral);
  font-size: 10px;
  font-weight: 800;
}

.world-engine-pressure-stage {
  flex: 0 0 auto;
  padding: 4px 7px;
  border: 1px solid rgba(217, 86, 104, 0.2);
  border-radius: 4px;
  background: rgba(217, 86, 104, 0.08);
  color: #9d3d4c;
  font-size: 9px;
  font-weight: 850;
}

.world-engine-pressure p {
  margin: 9px 0 10px;
  color: #5b686d;
  font-size: 11px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.world-engine-pressure-meter {
  overflow: hidden;
  width: 100%;
  height: 4px;
  border-radius: 4px;
  background: #e5eaeb;
}

.world-engine-pressure-meter span {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--we-coral);
}

.world-engine-runtime-lead {
  min-height: 54px;
  margin-bottom: 10px;
  padding: 0 12px;
  border-left: 4px solid var(--we-teal);
  background: var(--we-surface);
}

.world-engine-runtime-lead span {
  color: var(--we-muted);
  font-size: 10px;
  font-weight: 800;
}

.world-engine-runtime-lead strong {
  color: var(--we-teal);
  font-size: 13px;
}

.world-engine-runtime-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 0 10px;
  border-top: 1px solid var(--we-line);
  border-left: 1px solid var(--we-line);
  background: var(--we-surface);
}

.world-engine-runtime-grid > div {
  min-width: 0;
  padding: 10px;
  border-right: 1px solid var(--we-line);
  border-bottom: 1px solid var(--we-line);
}

.world-engine-runtime-grid dt {
  color: var(--we-muted);
  font-size: 9px;
  font-weight: 750;
  overflow-wrap: anywhere;
}

.world-engine-runtime-grid dd {
  margin: 4px 0 0;
  color: var(--we-ink);
  font-size: 13px;
  font-weight: 900;
  overflow-wrap: anywhere;
}

.world-engine-runtime-time,
.world-engine-runtime-empty {
  margin: 0 0 12px;
  color: var(--we-muted);
  font-size: 10px;
  line-height: 1.45;
}

.world-engine-failure {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid rgba(217, 86, 104, 0.24);
  border-radius: 6px;
  background: #fff3f4;
  color: #74303a;
}

.world-engine-failure strong,
.world-engine-failure span {
  display: block;
  font-size: 10px;
}

.world-engine-failure p {
  margin: 5px 0;
  font-size: 11px;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.world-engine-receipts {
  border-top: 1px solid var(--we-line);
  background: var(--we-surface);
}

.world-engine-receipt {
  min-height: 38px;
  padding: 7px 9px;
  border-bottom: 1px solid var(--we-line);
  font-size: 10px;
}

.world-engine-receipt time {
  flex: 0 0 42px;
  color: var(--we-muted);
  font-variant-numeric: tabular-nums;
}

.world-engine-receipt span {
  min-width: 0;
  flex: 1 1 auto;
  color: #556469;
  overflow-wrap: anywhere;
}

.world-engine-receipt strong {
  flex: 0 0 auto;
  color: var(--we-teal);
  overflow-wrap: anywhere;
}

.mini-phone-statusbar.is-world-engine {
  background: #fff;
  color: var(--we-ink, #18262b);
}

.mini-phone-statusbar.is-world-engine .mini-phone-signal,
.mini-phone-statusbar.is-world-engine .mini-phone-wifi,
.mini-phone-statusbar.is-world-engine .mini-phone-battery,
.mini-phone-statusbar.is-world-engine .mini-phone-battery::after {
  background: var(--we-ink, #18262b);
}

.free-mode-outing-scene-overlay {
  place-items: stretch;
  padding: 0;
  background: #080b14;
  backdrop-filter: none;
}

.free-mode-outing-scene-panel {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100svh;
  border: 0;
  border-radius: 0;
  background: #111827;
  box-shadow: none;
}

.free-mode-outing-scene-bg,
.free-mode-outing-scene-shade {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.free-mode-outing-scene-bg {
  object-fit: cover;
}

.free-mode-outing-scene-shade {
  background: linear-gradient(180deg, rgba(20, 18, 34, 0.18), rgba(20, 18, 34, 0.34));
  pointer-events: none;
}

.free-mode-outing-scene-head {
  position: absolute;
  z-index: 5;
  inset: 16px 16px auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  pointer-events: none;
}

.free-mode-outing-scene-titlebox,
.outing-facility-guide-hotspot,
.outing-idol-action-menu,
.outing-facility-guide-card {
  border: 1px solid rgba(255, 255, 255, 0.48);
  background: rgba(255, 255, 255, 0.88);
  box-shadow: 0 14px 34px rgba(30, 25, 50, 0.22);
  backdrop-filter: blur(14px);
}

.free-mode-outing-scene-titlebox {
  max-width: min(380px, 56vw);
  padding: 14px 16px;
  border-radius: 8px;
}

.free-mode-outing-scene-titlebox h2,
.outing-facility-guide-head h3 {
  margin: 0;
  color: var(--ink);
  letter-spacing: 0;
}

.free-mode-outing-scene-titlebox h2 {
  font-size: 24px;
}

.free-mode-outing-scene-titlebox p:last-child,
.outing-facility-guide-head p {
  margin: 5px 0 0;
  color: var(--soft-ink);
  font-size: 13px;
  line-height: 1.45;
}

.free-mode-outing-scene-actions {
  display: flex;
  gap: 8px;
  pointer-events: auto;
}

.outing-facility-guide-hotspot {
  position: absolute;
  z-index: 6;
  top: 190px;
  right: 46px;
  display: grid;
  gap: 8px;
  width: 154px;
  min-height: 118px;
  padding: 12px;
  border-radius: 8px;
  color: var(--ink);
  text-align: left;
}

.outing-facility-guide-mini {
  width: 100%;
  height: 42px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e94e87 0 32%, transparent 32% 36%, #7b8cff 36% 66%, transparent 66% 70%, #f0ad3f 70%), #fff;
  box-shadow: inset 0 0 0 1px rgba(70, 60, 100, 0.14);
}

.outing-facility-guide-hotspot strong,
.outing-facility-guide-hotspot span:last-child {
  display: block;
}

.outing-facility-guide-hotspot strong {
  font-size: 15px;
}

.outing-facility-guide-hotspot span:last-child {
  color: var(--soft-ink);
  font-size: 12px;
  line-height: 1.35;
}

.free-mode-outing-scene-idols {
  position: absolute;
  z-index: 3;
  inset: 110px 32px -310px;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 28px;
  pointer-events: none;
}

.outing-scene-idol {
  position: relative;
  width: min(620px, 52vw);
  height: min(1120px, 122svh);
  border: 0;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  filter: drop-shadow(0 22px 26px rgba(20, 18, 38, 0.32));
}

.outing-scene-idol img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transition: transform 180ms ease, filter 180ms ease;
}

.outing-scene-idol:hover img,
.outing-scene-idol:focus-visible img,
.outing-scene-idol.is-selected img {
  transform: translateY(-4px) scale(1.025);
  filter: drop-shadow(0 0 0 rgba(255, 255, 255, 0.8));
}

.outing-scene-idol span {
  position: absolute;
  left: 50%;
  bottom: 316px;
  transform: translateX(-50%);
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
  white-space: nowrap;
  box-shadow: 0 8px 18px rgba(30, 25, 50, 0.16);
}

.outing-scene-speech-bubble {
  position: absolute;
  z-index: 7;
  left: calc(50% + min(220px, 18vw));
  bottom: min(58svh, 520px);
  width: min(360px, 30vw);
  padding: 14px 16px;
  border: 1px solid rgba(255, 255, 255, 0.64);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.92);
  color: var(--ink);
  box-shadow: 0 18px 42px rgba(28, 24, 42, 0.24);
  backdrop-filter: blur(16px);
}

.outing-scene-speech-bubble[hidden] {
  display: none;
}

.outing-scene-speech-bubble::before {
  content: "";
  position: absolute;
  left: -12px;
  bottom: 28px;
  width: 22px;
  height: 22px;
  transform: rotate(45deg);
  border-left: 1px solid rgba(255, 255, 255, 0.64);
  border-bottom: 1px solid rgba(255, 255, 255, 0.64);
  background: rgba(255, 255, 255, 0.92);
}

.outing-scene-speech-bubble strong {
  position: relative;
  display: block;
  color: var(--ink);
  font-size: 13px;
  font-weight: 900;
}

.outing-scene-speech-bubble p {
  position: relative;
  margin: 6px 0 0;
  color: var(--ink);
  font-size: 15px;
  font-weight: 800;
  line-height: 1.55;
}

.outing-scene-dialogue-bar {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 22px;
  display: grid;
  gap: 10px;
  width: min(920px, calc(100% - 48px));
  transform: translateX(-50%);
  padding: 14px;
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 8px;
  background: rgba(20, 18, 30, 0.72);
  color: #fff;
  box-shadow: 0 22px 56px rgba(16, 14, 28, 0.32);
  backdrop-filter: blur(18px);
}

.outing-scene-dialogue-bar[hidden] {
  display: none;
}

.outing-scene-dialogue-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.outing-scene-dialogue-head span {
  color: rgba(255, 255, 255, 0.74);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.outing-scene-dialogue-body {
  display: grid;
  gap: 6px;
}

.outing-scene-dialogue-body p {
  margin: 0;
  line-height: 1.55;
}

.outing-scene-narration {
  color: rgba(255, 255, 255, 0.78);
  font-size: 13px;
  font-weight: 700;
}

.outing-scene-producer {
  color: #fff;
  font-size: 15px;
  font-weight: 850;
}

.outing-scene-dialogue-custom {
  display: flex;
  align-items: center;
  gap: 8px;
}

.outing-scene-dialogue-input {
  min-width: 0;
  flex: 1 1 260px;
  height: 40px;
  padding: 0 12px;
  border: 1px solid rgba(255, 255, 255, 0.34);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.13);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 750;
  outline: none;
}

.outing-scene-dialogue-input::placeholder {
  color: rgba(255, 255, 255, 0.58);
}

.outing-scene-dialogue-input:focus {
  border-color: rgba(255, 126, 215, 0.86);
  box-shadow: 0 0 0 3px rgba(255, 126, 215, 0.18);
}
.outing-scene-dialogue-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.outing-scene-dialogue-actions .event-button {
  min-height: 40px;
}

.outing-idol-action-menu {
  position: absolute;
  z-index: 8;
  left: 50%;
  bottom: 26px;
  width: min(520px, calc(100% - 36px));
  transform: translateX(-50%);
  display: grid;
  gap: 10px;
  padding: 12px;
  border-radius: 8px;
}

.outing-idol-action-menu[hidden] {
  display: none;
}

.outing-idol-action-head,
.outing-facility-guide-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
}

.outing-idol-action-head strong {
  color: var(--ink);
  font-size: 16px;
}

.outing-idol-action-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}

.outing-idol-action-grid .event-button {
  min-height: 52px;
  border-radius: 8px;
  white-space: nowrap;
}

.outing-idol-scout-talk {
  grid-column: 1 / -1;
}

.outing-idol-action-grid .event-button[hidden] {
  display: none;
}

.outing-facility-guide-modal {
  position: absolute;
  z-index: 12;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(20, 18, 35, 0.34);
}

.outing-facility-guide-modal[hidden] {
  display: none;
}

.outing-facility-guide-card {
  width: min(820px, 100%);
  padding: 18px;
  border-radius: 8px;
}

.outing-facility-guide-map {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr 1fr;
  grid-template-rows: 82px 82px 82px;
  gap: 10px;
  margin-top: 14px;
  padding: 12px;
  border-radius: 8px;
  background: linear-gradient(rgba(70, 60, 100, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(70, 60, 100, 0.05) 1px, transparent 1px), rgba(255, 255, 255, 0.7);
  background-size: 18px 18px;
  box-shadow: inset 0 0 0 1px rgba(70, 60, 100, 0.12);
}

.outing-facility-card {
  display: grid;
  place-items: center;
  border: 1px solid rgba(70, 60, 100, 0.14);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  line-height: 1.25;
  text-align: center;
  box-shadow: 0 8px 18px rgba(30, 25, 50, 0.08);
  cursor: pointer;
}

.outing-facility-card span,
.outing-facility-card em {
  color: var(--soft-ink);
  font-size: 12px;
  font-style: normal;
  font-weight: 800;
}

.outing-facility-card strong {
  display: block;
  font-size: 16px;
}

.outing-facility-card.is-current {
  background: #302942;
  color: #fff;
}

.outing-facility-card.is-current span,
.outing-facility-card.is-current em {
  color: rgba(255, 255, 255, 0.74);
}

.outing-facility-game_center { grid-column: 1; grid-row: 1 / span 2; }
.outing-facility-karaoke { grid-column: 2; grid-row: 1; }
.outing-facility-cinema { grid-column: 3; grid-row: 1 / span 2; }
.outing-facility-anime_shop { grid-column: 2; grid-row: 2; }
.outing-facility-entrance { grid-column: 1 / span 2; grid-row: 3; }
.outing-facility-food_court { grid-column: 3; grid-row: 3; }

.outing-facility-guide-hints {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  color: var(--soft-ink);
  font-size: 12px;
  font-weight: 800;
}

.outing-facility-guide-hints span {
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
}

@media (max-width: 760px) {
  .free-mode-outing-scene-overlay { padding: 0; }
  .free-mode-outing-scene-panel { height: 100svh; }
  .free-mode-outing-scene-head { inset: 10px 10px auto; }
  .free-mode-outing-scene-titlebox { max-width: calc(100% - 132px); padding: 11px 12px; }
  .free-mode-outing-scene-titlebox h2 { font-size: 19px; }
  .free-mode-outing-scene-actions { flex-direction: column; }
  .outing-facility-guide-hotspot { top: 150px; right: 10px; width: 126px; min-height: 104px; }
  .free-mode-outing-scene-idols { inset: 130px 10px -210px; gap: 8px; }
  .outing-scene-idol { width: min(92vw, 420px); height: min(860px, 116svh); }
  .outing-scene-idol span { bottom: 216px; }
  .outing-scene-speech-bubble { left: 12px; right: 12px; bottom: 42svh; width: auto; }
  .outing-scene-speech-bubble::before { left: 48%; bottom: -10px; border: 0; border-right: 1px solid rgba(255, 255, 255, 0.64); border-bottom: 1px solid rgba(255, 255, 255, 0.64); }
  .outing-scene-dialogue-bar { bottom: 10px; width: calc(100% - 20px); padding: 12px; }
  .outing-scene-dialogue-custom { flex-wrap: wrap; }
  .outing-scene-dialogue-custom .event-button { flex: 0 0 auto; }
  .outing-scene-dialogue-input { flex: 1 1 190px; }
  .outing-scene-dialogue-actions .event-button { flex: 1 1 120px; }
  .outing-idol-action-menu { bottom: 12px; }
  .outing-idol-action-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .outing-facility-guide-modal { padding: 12px; }
  .outing-facility-guide-map { grid-template-columns: 1fr; grid-template-rows: repeat(6, 68px); }
  .outing-facility-game_center,
  .outing-facility-karaoke,
  .outing-facility-cinema,
  .outing-facility-anime_shop,
  .outing-facility-entrance,
  .outing-facility-food_court { grid-column: auto; grid-row: auto; }
}

.portrait-wardrobe-overlay {
  position: fixed;
  z-index: 1400;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(19, 19, 24, 0.78);
  backdrop-filter: blur(10px);
}

.portrait-wardrobe-overlay[hidden] { display: none; }

.portrait-wardrobe-shell {
  overflow: hidden;
  width: min(1180px, 100%);
  max-height: calc(100svh - 36px);
  border: 1px solid rgba(255, 255, 255, 0.46);
  border-radius: 8px;
  background: #f7f6f3;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.38);
}

.portrait-wardrobe-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 72px;
  padding: 13px 18px;
  border-bottom: 1px solid rgba(31, 31, 37, 0.12);
  background: #fff;
}

.portrait-wardrobe-head h2 {
  margin: 2px 0 0;
  color: #242329;
  font-size: 22px;
  letter-spacing: 0;
}

.portrait-wardrobe-workspace {
  display: grid;
  grid-template-columns: 112px minmax(420px, 1fr) minmax(300px, 342px);
  min-height: 560px;
  max-height: calc(100svh - 110px);
}

.portrait-wardrobe-characters {
  overflow-y: auto;
  padding: 12px 10px;
  border-right: 1px solid rgba(31, 31, 37, 0.12);
  background: #27262c;
}

.portrait-wardrobe-character {
  display: grid;
  place-items: center;
  width: 100%;
  min-height: 68px;
  margin-bottom: 8px;
  padding: 8px 6px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.25;
  text-align: center;
}

.portrait-wardrobe-character:hover,
.portrait-wardrobe-character:focus-visible {
  border-color: rgba(255, 255, 255, 0.35);
  color: #fff;
}

.portrait-wardrobe-character.is-active {
  border-color: #f49a34;
  background: #fff;
  color: #27262c;
}

.portrait-wardrobe-stage {
  --portrait-scale: 1;
  --portrait-x: 0px;
  --portrait-y: 0px;
  position: relative;
  overflow: hidden;
  min-height: 455px;
  background-color: #c8c2bc;
  background-image: url("./assets/scenes/Wardrobe_Fitting_Room.png");
  background-position: center 48%;
  background-size: cover;
}

.portrait-wardrobe-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(24, 22, 20, 0.08);
  pointer-events: none;
}

.portrait-wardrobe-stage-mark {
  position: absolute;
  z-index: 3;
  top: 16px;
  left: 16px;
  padding: 6px 9px;
  border-left: 3px solid #e04f78;
  background: rgba(255, 255, 255, 0.9);
  color: #28272c;
  font-size: 11px;
  font-weight: 900;
}

.portrait-wardrobe-preview {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: -7%;
  width: min(84%, 520px);
  height: 108%;
  object-fit: contain;
  object-position: center bottom;
  transform: translate(calc(-50% + var(--portrait-x)), var(--portrait-y)) scale(var(--portrait-scale));
  transform-origin: center bottom;
  filter: drop-shadow(0 18px 22px rgba(0, 0, 0, 0.28));
}

.portrait-wardrobe-preview:not([src]),
.portrait-wardrobe-preview[src=""] { display: none; }

.portrait-wardrobe-stage-caption {
  position: absolute;
  z-index: 4;
  right: 16px;
  bottom: 16px;
  min-width: 160px;
  padding: 10px 12px;
  border-right: 4px solid #41a785;
  background: rgba(255, 255, 255, 0.92);
  color: #28272c;
  text-align: right;
}

.portrait-wardrobe-stage-caption strong,
.portrait-wardrobe-stage-caption span { display: block; }
.portrait-wardrobe-stage-caption strong { font-size: 16px; }
.portrait-wardrobe-stage-caption span { margin-top: 2px; color: #68666c; font-size: 12px; }

.portrait-wardrobe-controls {
  overflow-y: auto;
  padding: 16px;
  background: #f7f6f3;
  color: #29282e;
}

.portrait-wardrobe-section-head,
.portrait-wardrobe-sliders label,
.portrait-wardrobe-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.portrait-wardrobe-section-head > span {
  font-size: 11px;
  font-weight: 900;
  color: #68666c;
}

.portrait-wardrobe-text-btn {
  border: 0;
  background: transparent;
  color: #346f9f;
  font-size: 12px;
  font-weight: 800;
}

.portrait-wardrobe-assets {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  min-height: 78px;
  margin: 10px 0 12px;
}

.portrait-wardrobe-asset {
  overflow: hidden;
  min-height: 78px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 6px;
  background: #e5e2dd;
}

.portrait-wardrobe-asset img { width: 100%; height: 74px; object-fit: cover; object-position: top center; }
.portrait-wardrobe-asset.is-active { border-color: #e04f78; }

.portrait-wardrobe-upload {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  border: 1px dashed #8b888f;
  border-radius: 6px;
  background: #fff;
  color: #34333a;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
}

.portrait-wardrobe-upload svg { width: 17px; height: 17px; }

.portrait-wardrobe-field { display: grid; gap: 6px; margin-top: 12px; color: #57555d; font-size: 12px; font-weight: 800; }
.portrait-wardrobe-field input {
  width: 100%;
  height: 40px;
  padding: 0 10px;
  border: 1px solid #c9c5bf;
  border-radius: 6px;
  background: #fff;
  color: #28272c;
  font: inherit;
}

.portrait-wardrobe-alias-editor { margin-top: 14px; padding-top: 13px; border-top: 1px solid rgba(55, 52, 62, 0.14); }
.portrait-wardrobe-alias-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 28px; margin-top: 8px; }
.portrait-wardrobe-alias-tag { display: inline-flex; align-items: center; gap: 4px; min-width: 0; padding: 5px 8px; border: 1px solid rgba(224, 79, 120, 0.3); border-radius: 4px; background: rgba(255, 255, 255, 0.74); color: #3d3a43; font-size: 11px; font-weight: 750; }
.portrait-wardrobe-alias-tag.is-default { border-color: rgba(73, 68, 84, 0.16); color: #77727e; }
.portrait-wardrobe-alias-tag button { display: grid; width: 16px; height: 16px; padding: 0; border: 0; background: transparent; color: #a83c5a; cursor: pointer; }
.portrait-wardrobe-alias-tag button svg { width: 16px; height: 16px; }
.portrait-wardrobe-alias-entry { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; margin-top: 8px; padding: 0 6px 0 10px; border: 1px solid rgba(55, 52, 62, 0.18); border-radius: 4px; background: rgba(255, 255, 255, 0.86); }
.portrait-wardrobe-alias-entry input { min-width: 0; height: 36px; border: 0; outline: 0; background: transparent; color: #28272c; font: inherit; }
.portrait-wardrobe-alias-entry button { min-width: 54px; height: 30px; padding: 0 12px; border: 0; border-radius: 4px; background: #e04f78; color: #fff; font: inherit; font-size: 12px; font-weight: 800; cursor: pointer; }
.portrait-wardrobe-alias-entry button:hover, .portrait-wardrobe-alias-entry button:focus-visible { background: #c93f66; }

.portrait-wardrobe-sliders { display: grid; gap: 5px; margin-top: 14px; }
.portrait-wardrobe-sliders label { color: #57555d; font-size: 12px; font-weight: 800; }
.portrait-wardrobe-sliders output { color: #28272c; font-variant-numeric: tabular-nums; }
.portrait-wardrobe-sliders input { width: 100%; accent-color: #e04f78; }

.portrait-wardrobe-status { min-height: 34px; margin: 12px 0 8px; color: #68666c; font-size: 12px; line-height: 1.4; }
.portrait-wardrobe-actions { flex-wrap: wrap; }
.portrait-wardrobe-action {
  min-height: 40px;
  flex: 1 1 86px;
  padding: 8px 10px;
  border: 1px solid #bbb7b1;
  border-radius: 6px;
  background: #fff;
  color: #343239;
  font-weight: 850;
}
.portrait-wardrobe-action.is-danger { color: #b83f53; }
.portrait-wardrobe-action.is-primary { border-color: #e04f78; background: #e04f78; color: #fff; }
.portrait-wardrobe-action:disabled,
.portrait-wardrobe-upload.is-disabled { opacity: 0.48; cursor: not-allowed; }

#apartmentWardrobeBtn {
  right: 4%;
  bottom: calc(10% + env(safe-area-inset-bottom));
  border-color: rgba(65, 167, 133, 0.56);
}

@media (max-width: 700px) {
  .portrait-wardrobe-overlay { padding: 0; place-items: stretch; }
  .portrait-wardrobe-shell { width: 100%; max-height: 100svh; border: 0; border-radius: 0; }
  .portrait-wardrobe-head { min-height: 62px; padding: 10px 12px; }
  .portrait-wardrobe-head h2 { font-size: 19px; }
  .portrait-wardrobe-workspace { grid-template-columns: 1fr; max-height: calc(100svh - 62px); overflow-y: auto; }
  .portrait-wardrobe-characters { display: flex; overflow-x: auto; padding: 8px; border-right: 0; }
  .portrait-wardrobe-character { flex: 0 0 84px; min-height: 48px; margin: 0 6px 0 0; }
  .portrait-wardrobe-stage { min-height: 340px; background-position: 49% center; }
  .portrait-wardrobe-preview { width: min(92%, 430px); height: 110%; }
  .portrait-wardrobe-controls { overflow: visible; padding: 14px 12px 22px; }
}

@media (max-width: 340px) {
  .portrait-wardrobe-assets { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .portrait-wardrobe-actions { display: grid; grid-template-columns: 1fr; }
  .portrait-wardrobe-action { width: 100%; }
  .portrait-wardrobe-stage-caption { right: 8px; bottom: 8px; min-width: 130px; }
}
/* N.I.A dedicated online-live business */
.nia-live-overlay{--live-orange:#f7931e;--live-orange-bright:#ffb52e;--live-cream:#fff8eb;--live-paper:#fffdf9;--live-ink:#17171b;--live-muted:#756f68;--live-line:#e8e1d8;--live-idol-accent:var(--idol-theme,#ef6f91);position:fixed;inset:0;z-index:2147483000;display:grid;width:100vw;height:100dvh;place-items:stretch;padding:0;background:var(--live-paper);color:var(--live-ink);font-family:Inter,"Noto Sans SC",sans-serif;letter-spacing:0;isolation:isolate}
.nia-live-overlay[hidden]{display:none}
.nia-live-shell{position:relative;width:100%;height:100dvh;display:grid;grid-template-rows:64px minmax(0,1fr) 84px;overflow:hidden;background:var(--live-paper);border:0;box-shadow:none}
.nia-live-header{display:flex;align-items:center;justify-content:space-between;padding:0 22px;background:var(--live-orange);color:#fff;border-bottom:1px solid rgba(23,23,27,.18)}
.nia-live-brand,.nia-live-header-status,.nia-live-channel-identity,.nia-live-metrics,.nia-live-controls{display:flex;align-items:center}
.nia-live-brand{gap:12px;min-width:0}.nia-live-crest-box{display:grid;width:44px;height:44px;flex:0 0 44px;place-items:center;background:var(--live-ink)}.nia-live-school-crest{display:block;width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff)}.nia-live-platform-copy{display:grid;min-width:0;gap:1px}.nia-live-platform-name{font-size:15px;line-height:1.1}.nia-live-platform-copy>span{max-width:min(48vw,640px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;color:#fff}
.nia-live-header-status{gap:14px}.nia-live-live-badge{display:flex;align-items:center;gap:7px;min-height:32px;padding:0 11px;background:var(--live-ink);border-left:4px solid var(--live-idol-accent);font-size:12px;font-weight:800}.nia-live-live-badge i{width:8px;height:8px;border-radius:50%;background:#ff385f;box-shadow:0 0 0 4px rgba(255,56,95,.2);animation:nia-live-pulse 1.7s ease-in-out infinite}.nia-live-segment{font-variant-numeric:tabular-nums;font-size:13px;font-weight:700;color:#fff}
.nia-live-main{display:grid;grid-template-columns:minmax(0,68fr) minmax(280px,32fr);min-height:0;border-bottom:1px solid var(--live-line)}
.nia-live-stage{position:relative;overflow:hidden;min-width:0;background:url("./assets/scenes/Saki_Bedroom.png") center center / cover no-repeat}.nia-live-stage::after{content:"";position:absolute;z-index:2;inset:auto 0 0;height:40%;background:linear-gradient(transparent,rgba(23,23,27,.46));pointer-events:none}
.nia-live-program-mark{position:absolute;z-index:3;top:18px;right:20px;display:grid;justify-items:end;gap:2px;color:var(--live-ink);font-size:10px;font-weight:700}.nia-live-program-mark strong{padding:4px 8px;background:var(--live-ink);color:#fff;font-size:12px}
.nia-live-stage-light{position:absolute;z-index:1;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.2),transparent 34%,rgba(255,255,255,.08));pointer-events:none}.nia-live-standee{position:absolute;z-index:2;left:50%;bottom:-58%;height:148%;max-width:96%;object-fit:contain;transform:translate(calc(-50% + var(--portrait-x,0px)),var(--portrait-y,0px)) scale(var(--portrait-scale,1));transform-origin:50% 100%;filter:drop-shadow(0 18px 26px rgba(31,24,16,.24))}.nia-live-status{position:absolute;z-index:4;top:18px;left:18px;padding:8px 12px;background:var(--live-ink);border-left:4px solid var(--live-idol-accent);color:#fff;font-size:13px}.nia-live-caption{position:absolute;z-index:4;left:5%;right:5%;bottom:5%;min-height:68px;padding:14px 18px;background:rgba(23,23,27,.92);border-left:5px solid var(--live-orange-bright);color:#fff;font-size:18px;line-height:1.55;cursor:pointer}.nia-live-caption:empty{display:none}.nia-live-caption strong{display:block;margin-bottom:3px;color:var(--live-orange-bright);font-size:12px}
.nia-live-comments{position:relative;display:grid;grid-template-rows:52px auto minmax(0,1fr);min-height:0;overflow:hidden;background:var(--live-paper);color:var(--live-ink);border-left:1px solid var(--live-line)}.nia-live-comments-watermark{position:absolute;z-index:0;left:50%;top:58%;width:min(76%,300px);height:auto;opacity:.14;transform:translate(-50%,-50%);filter:brightness(0) saturate(100%) invert(62%) sepia(94%) saturate(1700%) hue-rotate(347deg) brightness(103%);pointer-events:none}.nia-live-comments>header,.nia-live-pinned-notice,.nia-live-comment-list{position:relative;z-index:1}.nia-live-comments>header{display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:rgba(255,253,249,.94);border-bottom:3px solid var(--live-orange)}.nia-live-comments>header>div{display:flex;align-items:center;gap:8px}.nia-live-comments>header>span{min-width:28px;font-variant-numeric:tabular-nums;text-align:center;color:var(--live-muted)}.nia-live-chat-mark{width:12px;height:12px;background:var(--live-orange);clip-path:polygon(0 0,100% 0,100% 72%,62% 72%,42% 100%,42% 72%,0 72%)}
.nia-live-pinned-notice{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;padding:10px 14px;background:#fff1d8;border-bottom:1px solid #f0d6aa}.nia-live-pinned-notice>span{align-self:start;padding:3px 6px;background:var(--live-orange);color:#fff;font-size:10px;font-weight:800}.nia-live-pinned-notice p{margin:0;color:#544d45;font-size:12px;line-height:1.5}.nia-live-comment-list{overflow:auto;padding:2px 14px 12px;display:flex;flex-direction:column}.nia-live-comment{--comment-accent:#c3bab0;display:grid;grid-template-columns:34px minmax(0,1fr);gap:10px;padding:12px 0;border-bottom:1px solid var(--live-line);animation:nia-live-comment-in .24s ease-out}.nia-live-comment[data-tone="positive"],.nia-live-comment[data-tone="excited"]{--comment-accent:var(--live-orange)}.nia-live-comment[data-tone="concerned"],.nia-live-comment[data-tone="negative"]{--comment-accent:#e24b62}.nia-live-comment-avatar{display:grid;width:34px;height:34px;place-items:center;background:#fff;border:2px solid var(--comment-accent);border-radius:4px;color:var(--live-ink);font-size:12px;font-weight:800}.nia-live-comment-body{display:grid;min-width:0;gap:3px}.nia-live-comment-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:color-mix(in srgb,var(--comment-accent) 72%,var(--live-ink));font-size:11px}.nia-live-comment-text{overflow-wrap:anywhere;font-size:13px;line-height:1.5;color:#343137}
.nia-live-footer{display:grid;grid-template-columns:minmax(220px,1fr) auto auto;align-items:center;gap:28px;padding:0 20px;background:#fff;color:var(--live-ink);border-top:1px solid var(--live-line)}.nia-live-channel-identity{min-width:0;gap:10px}.nia-live-channel-mark{display:grid;width:48px;height:48px;flex:0 0 48px;place-items:center;background:var(--live-orange);border:3px solid transparent;border-color:var(--live-idol-accent)}.nia-live-channel-mark img{width:36px;height:36px;object-fit:contain;filter:drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff) drop-shadow(0 0 0 #fff)}.nia-live-channel-copy{display:grid;min-width:0;gap:2px}.nia-live-channel-copy strong,.nia-live-channel-copy small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.nia-live-channel-copy strong{font-size:14px}.nia-live-channel-copy small{color:var(--live-muted);font-size:10px}.nia-live-metrics{gap:32px}.nia-live-metrics>span{display:grid;gap:2px;min-width:64px}.nia-live-metrics small{color:var(--live-muted);font-size:10px}.nia-live-metrics strong{font-size:18px;font-variant-numeric:tabular-nums}.nia-live-controls{gap:8px}.nia-live-action{min-height:44px;padding:0 18px;border:1px solid var(--live-ink);border-radius:4px;background:#fff;color:var(--live-ink);cursor:pointer;font:inherit;font-weight:700;transition:background-color .18s ease,color .18s ease,border-color .18s ease}.nia-live-action:hover{background:#fff3dd}.nia-live-action:focus-visible{outline:3px solid color-mix(in srgb,var(--live-idol-accent) 70%,#fff);outline-offset:2px}.nia-live-action.is-primary{border-color:var(--live-orange);background:var(--live-orange);color:#fff}.nia-live-action.is-primary:hover{border-color:#dc7900;background:#dc7900}.nia-live-action:disabled{opacity:.45;cursor:not-allowed}
.nia-live-producer-drawer{position:absolute;z-index:8;left:0;right:32%;bottom:84px;padding:18px 20px;background:rgba(23,23,27,.97);border-top:4px solid var(--live-orange);box-shadow:0 -16px 40px rgba(0,0,0,.28)}.nia-live-producer-head{display:flex;align-items:baseline;gap:16px}.nia-live-producer-head span{color:var(--live-orange-bright);font-size:12px;font-weight:800}.nia-live-producer-head strong{color:#fff}.nia-live-incident{margin:8px 0 12px;color:#e7e1d9}.nia-live-producer-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nia-live-producer-options .nia-live-action{text-align:left;height:auto;padding:10px 12px}.nia-live-producer-form{margin-top:12px}.nia-live-producer-form label{display:block;margin-bottom:5px;color:#c9c0b7;font-size:12px}.nia-live-producer-form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.nia-live-producer-form input{min-width:0;min-height:44px;padding:0 12px;border:1px solid #6e655d;border-radius:4px;background:#0e0e10;color:#fff;font:inherit}
.nia-live-result{position:absolute;z-index:10;inset:auto 6% 6%;padding:24px;background:rgba(23,23,27,.96);border-top:5px solid var(--live-orange);box-shadow:0 18px 60px rgba(0,0,0,.34)}.nia-live-result-kicker{margin:0;color:var(--live-orange-bright);font-size:12px;font-weight:800}.nia-live-result h2{margin:4px 0 14px;color:#fff;font-size:28px}.nia-live-result-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 18px;margin-bottom:16px}.nia-live-result-summary span{color:#d8d0c7}.nia-live-result-summary strong{color:#fff}.nia-live-result .nia-live-action{width:100%}
@keyframes nia-live-pulse{0%,100%{opacity:1}50%{opacity:.45}}@keyframes nia-live-comment-in{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:none}}
@media(max-width:1000px){.nia-live-footer{grid-template-columns:minmax(170px,1fr) auto auto;gap:14px}.nia-live-channel-copy small{display:none}.nia-live-metrics{gap:16px}.nia-live-metrics>span{min-width:52px}}
@media(max-width:760px){.nia-live-overlay{padding:0}.nia-live-shell{height:100dvh;grid-template-rows:56px minmax(0,1fr) 72px;border:0}.nia-live-header{padding:0 10px}.nia-live-crest-box{width:38px;height:38px;flex-basis:38px}.nia-live-school-crest{width:30px;height:30px}.nia-live-platform-name{font-size:13px}.nia-live-platform-copy>span{max-width:40vw;font-size:10px}.nia-live-header-status{gap:8px}.nia-live-live-badge{min-height:30px;padding:0 8px}.nia-live-main{grid-template-columns:1fr;grid-template-rows:minmax(0,58fr) minmax(170px,42fr)}.nia-live-program-mark{top:10px;right:10px}.nia-live-standee{bottom:-46%;height:136%;max-width:98%}.nia-live-status{top:10px;left:10px;max-width:56%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}.nia-live-caption{left:3%;right:3%;bottom:3%;min-height:54px;padding:10px 12px;font-size:15px}.nia-live-comments{border-left:0;border-top:1px solid var(--live-line)}.nia-live-comments-watermark{top:62%;width:min(58%,220px)}.nia-live-comments>header{min-height:42px}.nia-live-pinned-notice{display:none}.nia-live-comment{padding:9px 0}.nia-live-footer{grid-template-columns:1fr auto;gap:10px;padding:0 10px}.nia-live-channel-identity{display:none}.nia-live-metrics{gap:12px}.nia-live-metrics>span{min-width:0}.nia-live-metrics small{font-size:9px}.nia-live-metrics strong{font-size:15px}.nia-live-controls .nia-live-action{padding:0 10px}.nia-live-producer-drawer{right:0;bottom:72px}.nia-live-producer-options{grid-template-columns:1fr}.nia-live-result{inset:auto 3% 3%;padding:18px}.nia-live-result-summary{grid-template-columns:1fr}}
    @media(prefers-reduced-motion:reduce){.nia-live-comment,.nia-live-live-badge i{animation:none}.nia-live-overlay *{scroll-behavior:auto!important;transition-duration:.01ms!important}}

    /* N.I.A school radio: stable studio stage, subtitle desk, and producer cue. */
    .nia-mini-live-overlay{--mini-red:#e84d63;--mini-yellow:#ffd34e;--mini-ink:#17171b;position:fixed;inset:0;z-index:2147483002;display:grid;width:100vw;height:100dvh;background:#111;color:#fff;font-family:Inter,"Noto Sans SC",sans-serif;letter-spacing:0;isolation:isolate}
    .nia-mini-live-overlay[hidden]{display:none}.nia-mini-live-shell{display:grid;width:100%;height:100%;min-height:0;grid-template-rows:64px minmax(0,1fr) 64px;overflow:hidden;background:#17171b}
    .nia-mini-live-header,.nia-mini-live-footer{position:relative;z-index:4;display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 24px;background:#fff;color:var(--mini-ink);border-bottom:1px solid #dedede}
    .nia-mini-live-header>div{display:grid;min-width:0}.nia-mini-live-header span{color:#747078;font-size:11px;font-weight:850}.nia-mini-live-header strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:20px}.nia-mini-live-header>span{flex:0 0 auto;padding-left:16px;border-left:4px solid var(--mini-red);color:var(--mini-red)}
    .nia-mini-live-stage{position:relative;min-height:0;overflow:hidden;background:#25252a center/cover no-repeat;cursor:pointer;outline:none}.nia-mini-live-stage:focus-visible{box-shadow:inset 0 0 0 3px var(--mini-yellow)}
    .nia-mini-live-scrim{position:absolute;inset:0;background:rgba(8,8,12,.2);pointer-events:none}.nia-mini-live-standee{position:absolute;z-index:1;left:50%;bottom:-38%;width:auto;height:132%;max-width:72%;object-fit:contain;transform:translateX(-50%);filter:drop-shadow(0 16px 20px rgba(0,0,0,.32));pointer-events:none}
    .nia-mini-live-venue-panel{position:absolute;z-index:5;inset:50% auto auto 50%;width:min(880px,calc(100% - 40px));padding:22px;background:rgba(255,255,255,.96);color:var(--mini-ink);border:1px solid rgba(255,255,255,.7);border-radius:8px;transform:translate(-50%,-50%);box-shadow:0 24px 60px rgba(0,0,0,.35);cursor:default}
    .nia-mini-live-venue-panel>p,.nia-mini-live-result>p{margin:0;color:var(--mini-red);font-size:11px;font-weight:900}.nia-mini-live-venue-panel h2,.nia-mini-live-result h2{margin:4px 0 18px;font-size:22px}.nia-mini-live-venue-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .nia-mini-live-venue{position:relative;display:grid;min-height:116px;align-content:end;padding:14px;overflow:hidden;border:2px solid transparent;border-radius:6px;background-position:center;background-size:cover;color:#fff;font:inherit;text-align:left;cursor:pointer;isolation:isolate}.nia-mini-live-venue::before{content:"";position:absolute;z-index:-1;inset:0;background:rgba(9,9,14,.54)}.nia-mini-live-venue:hover,.nia-mini-live-venue:focus-visible,.nia-mini-live-venue.is-selected{border-color:var(--mini-yellow);outline:none}.nia-mini-live-venue strong{font-size:17px}.nia-mini-live-venue small{margin-top:3px;font-size:11px;line-height:1.35}
    .nia-mini-live-status{position:absolute;z-index:3;top:18px;left:24px;max-width:min(620px,70%);padding:9px 12px;border-left:4px solid var(--mini-yellow);background:rgba(16,16,20,.8);font-size:13px;font-weight:750}.nia-mini-live-caption{position:absolute;z-index:3;right:7%;bottom:5%;left:7%;min-height:72px;padding:16px 20px;border-top:4px solid var(--mini-yellow);background:rgba(18,18,22,.92);font-size:17px;line-height:1.65;box-shadow:0 15px 36px rgba(0,0,0,.3)}.nia-mini-live-caption strong{display:block;margin-bottom:3px;color:var(--mini-yellow);font-size:13px}
    .nia-mini-live-result{position:absolute;z-index:6;inset:50% auto auto 50%;width:min(620px,calc(100% - 40px));padding:24px;border-radius:8px;background:#fff;color:var(--mini-ink);transform:translate(-50%,-50%);box-shadow:0 24px 60px rgba(0,0,0,.38);cursor:default}.nia-mini-live-result>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:18px}.nia-mini-live-result span{padding:10px;border:1px solid #dedde1;border-radius:4px;font-size:12px}.nia-mini-live-result strong{display:block;margin-top:4px;font-size:14px}
    .nia-mini-live-footer{border-top:1px solid #dedede;border-bottom:0}.nia-mini-live-footer>span{font-size:12px;font-weight:750;color:#666}.nia-mini-live-action{min-width:44px;min-height:44px;padding:0 16px;border:1px solid #c8c6ca;border-radius:6px;background:#fff;color:var(--mini-ink);font:inherit;font-weight:800;cursor:pointer}.nia-mini-live-action.is-primary{border-color:var(--mini-red);background:var(--mini-red);color:#fff}.nia-mini-live-action:focus-visible{outline:3px solid rgba(232,77,99,.28);outline-offset:2px}
    @media(max-width:700px){.nia-mini-live-shell{grid-template-rows:56px minmax(0,1fr) 58px}.nia-mini-live-header,.nia-mini-live-footer{padding:0 12px}.nia-mini-live-header strong{font-size:15px}.nia-mini-live-header>span{font-size:9px}.nia-mini-live-venue-panel{width:calc(100% - 24px);padding:14px}.nia-mini-live-venue-panel h2{font-size:18px}.nia-mini-live-venue-list{grid-template-columns:1fr;max-height:62dvh;overflow-y:auto}.nia-mini-live-venue{min-height:82px}.nia-mini-live-standee{bottom:-25%;height:112%;max-width:96%}.nia-mini-live-caption{right:3%;bottom:3%;left:3%;min-height:60px;padding:12px 14px;font-size:15px}.nia-mini-live-result>div{grid-template-columns:1fr}.nia-mini-live-status{top:10px;left:10px;max-width:calc(100% - 20px)}}
    @media(prefers-reduced-motion:reduce){.nia-mini-live-overlay *{transition:none!important;scroll-behavior:auto!important}}

    .nia-radio-overlay{--radio-orange:#f7931e;--radio-cream:#fff7e9;--radio-ink:#242126;--radio-line:#eadfd1;position:fixed;inset:0;z-index:2147483001;display:grid;background:var(--radio-cream);color:var(--radio-ink);font-family:Inter,"Noto Sans SC",sans-serif;letter-spacing:0;isolation:isolate}
    .nia-radio-overlay[hidden]{display:none}.nia-radio-shell{position:relative;width:100%;height:100dvh;display:grid;grid-template-rows:66px minmax(0,1fr) 72px;overflow:hidden;background:#fffdf9}
    .nia-radio-header{display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:var(--radio-orange);color:#fff}.nia-radio-brand,.nia-radio-header-status,.nia-radio-controls{display:flex;align-items:center}.nia-radio-brand{gap:12px}.nia-radio-brand strong,.nia-radio-brand span{display:block}.nia-radio-brand strong{font-size:18px}.nia-radio-brand div span{margin-top:2px;font-size:11px;opacity:.82}.nia-radio-mic{display:grid!important;width:42px;height:42px;place-items:center;background:var(--radio-ink);font-size:9px!important;font-weight:900;letter-spacing:.08em}.nia-radio-header-status{gap:16px;font-size:13px;font-variant-numeric:tabular-nums}.nia-radio-on-air{display:flex;align-items:center;gap:8px;padding:8px 12px;background:var(--radio-ink);font-size:12px;font-weight:900}.nia-radio-on-air i{width:8px;height:8px;border-radius:50%;background:#ff4165;box-shadow:0 0 0 4px rgba(255,65,101,.2);animation:nia-radio-pulse 1.5s ease-in-out infinite}
    .nia-radio-main{display:grid;grid-template-columns:minmax(0,1fr) 300px;min-height:0}.nia-radio-stage{position:relative;overflow:hidden;isolation:isolate;background:url("./assets/scenes/Recording_Room.png") center center / cover no-repeat}.nia-radio-stage::before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(255,255,255,.7),transparent 48%,rgba(173,105,39,.18));z-index:-1}.nia-radio-stage-sign{position:absolute;top:22px;left:28px;padding:7px 12px;border:1px solid rgba(85,55,30,.22);background:rgba(255,255,255,.72);font-size:11px;font-weight:900;letter-spacing:.12em;color:#7b5128}.nia-radio-booth{display:none;position:absolute;left:50%;bottom:10%;width:min(82%,760px);height:28%;transform:translateX(-50%);border:2px solid rgba(106,67,37,.25);border-radius:50% 50% 8px 8px/25% 25% 8px 8px;background:linear-gradient(#c88c4b,#9b5d2b);box-shadow:0 20px 36px rgba(74,38,12,.22)}.nia-radio-booth span{position:absolute;top:14%;width:16px;height:16px;border-radius:50%;background:#f2c46f;box-shadow:0 0 0 4px rgba(63,37,14,.18)}.nia-radio-booth span:nth-child(1){left:27%}.nia-radio-booth span:nth-child(2){left:49%}.nia-radio-booth span:nth-child(3){left:71%}.nia-radio-standee{position:absolute;z-index:2;bottom:-42%;height:132%;max-width:54%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 16px 18px rgba(55,31,13,.24));transition:opacity .2s ease,filter .2s ease}.nia-radio-standee.is-speaking{z-index:3;opacity:1;filter:drop-shadow(0 14px 20px rgba(247,147,30,.48))}.nia-radio-standee.is-listening{opacity:.72}.nia-radio-host{left:24%;transform:translateX(-50%)}.nia-radio-guest{left:70%;transform:translateX(-50%)}.nia-radio-additional-guest{left:82%;transform:translateX(-50%)}.nia-radio-stage.has-multiple-guests .nia-radio-host{left:17%}.nia-radio-stage.has-multiple-guests .nia-radio-guest{left:55%;height:122%;max-width:39%}.nia-radio-stage.has-multiple-guests .nia-radio-additional-guest{left:79%;height:118%;max-width:37%}.nia-radio-caption{position:absolute;z-index:5;left:8%;right:8%;bottom:5%;min-height:72px;padding:13px 18px;border-left:5px solid var(--radio-orange);background:rgba(36,33,38,.94);color:#fff;font-size:17px;line-height:1.55;cursor:pointer}.nia-radio-caption:empty{display:none}.nia-radio-caption strong{display:block;margin-bottom:3px;color:#ffc36a;font-size:11px}.nia-radio-rail{position:relative;display:grid;grid-template-rows:54px auto minmax(0,1fr) auto;min-height:0;overflow:hidden;border-left:1px solid var(--radio-line);background:#fff}.nia-radio-rail-head{display:flex;align-items:center;justify-content:space-between;padding:0 16px;border-bottom:3px solid var(--radio-orange)}.nia-radio-rail-head span{min-width:26px;text-align:center;color:#8f8274;font-variant-numeric:tabular-nums}.nia-radio-history-toggle{margin:12px 14px}.nia-radio-history{overflow:auto;max-height:50%;padding:0 14px 12px;border-bottom:1px solid var(--radio-line)}.nia-radio-history-entry{padding:8px 0;border-bottom:1px solid var(--radio-line);font-size:12px;line-height:1.5}.nia-radio-history-entry strong{display:block;color:#a85e15;font-size:10px}.nia-radio-rail-note{align-self:end;margin:14px;padding:13px;background:#fff3dc;border-top:3px solid var(--radio-orange)}.nia-radio-rail-note span,.nia-radio-rail-note strong,.nia-radio-rail-note small{display:block}.nia-radio-rail-note span{font-size:10px;font-weight:900;color:#a85e15}.nia-radio-rail-note strong{margin-top:4px;font-size:14px}.nia-radio-rail-note small{margin-top:8px;line-height:1.5;color:#6c6259}.nia-radio-footer{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:0 22px;border-top:1px solid var(--radio-line);background:#fff}.nia-radio-footer>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#73685e;font-size:13px}.nia-radio-action{min-height:44px;padding:0 15px;border:1px solid #5e5146;border-radius:4px;background:#fff;color:var(--radio-ink);font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background-color .18s ease,border-color .18s ease}.nia-radio-action:hover{border-color:var(--radio-orange);background:#fff2d9}.nia-radio-action:focus-visible{outline:3px solid rgba(247,147,30,.55);outline-offset:2px}.nia-radio-action.is-primary{border-color:var(--radio-orange);background:var(--radio-orange);color:#fff}.nia-radio-action:disabled{opacity:.48;cursor:not-allowed}.nia-radio-producer-cue{position:absolute;z-index:12;left:0;right:300px;bottom:72px;padding:18px 22px;background:rgba(36,33,38,.98);border-top:5px solid var(--radio-orange);box-shadow:0 -18px 42px rgba(0,0,0,.28);color:#fff}.nia-radio-producer-cue>div:first-child{display:flex;gap:14px;align-items:baseline}.nia-radio-producer-cue>div:first-child span{color:#ffc36a;font-size:11px;font-weight:900}.nia-radio-producer-cue p{margin:9px 0 12px;color:#f0e9df}.nia-radio-producer-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.nia-radio-producer-options .nia-radio-action{text-align:left;height:auto;white-space:normal}.nia-radio-producer-cue form{margin-top:12px}.nia-radio-producer-cue label{display:block;margin-bottom:5px;color:#cec2b6;font-size:11px}.nia-radio-producer-cue form>div{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}.nia-radio-producer-cue input{min-width:0;min-height:44px;padding:0 12px;border:1px solid #88776a;border-radius:4px;background:#1c191d;color:#fff;font:inherit}.nia-radio-result{position:absolute;z-index:13;inset:auto 7% 7%;padding:24px;background:rgba(36,33,38,.97);border-top:5px solid var(--radio-orange);box-shadow:0 18px 60px rgba(0,0,0,.35);color:#fff}.nia-radio-result>p{margin:0;color:#ffc36a;font-size:11px;font-weight:900}.nia-radio-result h2{margin:5px 0 14px;font-size:26px}.nia-radio-result>div{display:grid;gap:8px;margin-bottom:16px;color:#eee3d6}.nia-radio-result .nia-radio-action{width:100%}
    .nia-radio-stage.nia-tv-mode{background-image:url("./assets/scenes/TV_Studio.png")}.nia-radio-stage.nia-tv-mode::before{background:linear-gradient(115deg,rgba(255,255,255,.2),transparent 48%,rgba(38,174,174,.12))}
    @keyframes nia-radio-pulse{0%,100%{opacity:1}50%{opacity:.45}}
    @media(max-width:760px){.nia-radio-shell{grid-template-rows:58px minmax(0,1fr) 68px}.nia-radio-header{padding:0 10px}.nia-radio-brand strong{font-size:15px}.nia-radio-mic{width:36px;height:36px}.nia-radio-header-status{gap:8px;font-size:11px}.nia-radio-main{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) 190px}.nia-radio-rail{border-top:1px solid var(--radio-line);border-left:0}.nia-radio-history{max-height:110px}.nia-radio-rail-note{display:none}.nia-radio-stage-sign{top:10px;left:12px;font-size:9px}.nia-radio-standee{height:112%;bottom:-32%;max-width:56%}.nia-radio-stage.has-multiple-guests .nia-radio-host{left:14%}.nia-radio-stage.has-multiple-guests .nia-radio-guest{left:51%;height:104%;max-width:41%}.nia-radio-stage.has-multiple-guests .nia-radio-additional-guest{left:80%;height:101%;max-width:39%}.nia-radio-caption{left:4%;right:4%;bottom:4%;min-height:58px;padding:10px 12px;font-size:15px}.nia-radio-footer{padding:0 10px}.nia-radio-footer>span{font-size:11px}.nia-radio-controls{gap:6px}.nia-radio-action{padding:0 10px}.nia-radio-producer-cue{right:0;bottom:68px;padding:14px}.nia-radio-producer-options{grid-template-columns:1fr}.nia-radio-result{inset:auto 4% 4%;padding:18px}}
    @media(prefers-reduced-motion:reduce){.nia-radio-overlay *{scroll-behavior:auto!important;transition-duration:.01ms!important}.nia-radio-on-air i{animation:none}}
/* High-discoverability segment advance control for staged N.I.A. programs. */
.nia-segment-advance-hint {
  position: absolute;
  z-index: 7;
  left: 50%;
  bottom: 18%;
  min-width: 148px;
  min-height: 44px;
  padding: 0 18px;
  transform: translateX(-50%);
  border: 2px solid rgba(255,255,255,.9);
  border-radius: 4px;
  background: rgba(36,33,38,.94);
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: 0;
  cursor: pointer;
  box-shadow: 0 8px 24px rgba(0,0,0,.28), 0 0 0 4px rgba(247,147,30,.28);
  transition: background-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.nia-segment-advance-hint:hover {
  background: #f7931e;
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 10px 28px rgba(0,0,0,.32), 0 0 0 4px rgba(247,147,30,.4);
}
.nia-segment-advance-hint:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}
.nia-segment-advance-hint[hidden] { display: none; }
@media (max-width: 760px) {
  .nia-segment-advance-hint {
    bottom: 20%;
    min-width: 132px;
    padding: 0 14px;
    font-size: 13px;
  }
}