/* Festival Maker — Y2K visual skin. No layout, state, or API behavior lives here. */
:root {
  --ink: #17132d;
  --paper: #fafafa;
  --yellow: #fff09b;
  --pink: #ff4db8;
  --green: #8fffd4;
  --blue: #245bff;
  --purple: #7a5cff;
  --red: #e43283;
  --line: #245bff;
  --glass: #fff;
  --shadow: 4px 4px 0 #2448ba;
  --radius: 5px;
}

html { background: #f0f2ff; }
body {
  background: #fafafa;
  color: var(--ink);
  font-family: "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}
.app {
  width: min(100%, 540px);
  background-color: #fff;
  background-image:
    radial-gradient(#245bff16 .7px, transparent .7px),
    linear-gradient(90deg, #245bff07 1px, transparent 1px),
    linear-gradient(#245bff07 1px, transparent 1px);
  background-size: 13px 13px, 32px 32px, 32px 32px;
  box-shadow: 0 0 0 1px #abc1ff, 0 22px 70px #2448ba18;
  border-radius: 0;
}
.app::before { display: none; }
.app > * { position: relative; }
button, input, select { border-radius: 3px; }
button { transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
button:active { transform: translate(2px, 2px) !important; box-shadow: 1px 1px 0 #2448ba !important; }
button:focus-visible, input:focus-visible, select:focus-visible { outline: 3px solid #ff4db8; outline-offset: 2px; }

/* Windows chrome and utility controls */
.marquee {
  height: 29px;
  background: repeating-linear-gradient(0deg, #245bff, #245bff 2px, #326dfd 2px, #326dfd 3px);
  border-bottom: 2px solid #162d98;
  color: #fff;
  font: 800 11px/27px ui-monospace, SFMono-Regular, Menlo, monospace;
  text-shadow: 1px 1px #193eab;
}
.home, .panel, .final-story-screen {
  background-color: #fff !important;
  background-image:
    radial-gradient(#245bff17 1px, transparent 1px),
    linear-gradient(90deg, #245bff08 1px, transparent 1px),
    linear-gradient(#245bff08 1px, transparent 1px) !important;
  background-size: 12px 12px, 40px 40px, 40px 40px !important;
}
.home { overflow: hidden; }
.home::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  top: 82px;
  right: -37px;
  width: 155px;
  height: 155px;
  border: 1px solid #6398ff;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fff 0 11px, #d5deff 12px 14px, #fff 15px 20px, transparent 21px), conic-gradient(from 27deg, #cbd8ff, #fff, #86dbed, #ffbae5, #fff, #afbfff, #cbd8ff);
  box-shadow: 0 0 0 6px #fff9, 0 5px 18px #245bff33;
  transform: rotate(-20deg);
}
.home::after {
  content: "✦  ♡  ✦";
  position: absolute;
  top: 113px;
  left: 9px;
  color: #245bff;
  font: 900 24px ui-monospace, monospace;
  letter-spacing: 20px;
  pointer-events: none;
}
.home-nav { height: 83px; padding: 0 21px; position: relative; z-index: 1; }
.logo {
  font: 900 18px/1.1 "PingFang SC", "Microsoft YaHei", sans-serif;
  color: #10102d;
  letter-spacing: .08em;
  white-space: nowrap;
}
.logo i { color: #ff4db8; text-shadow: 2px 2px #513ad2; }
.sound, .back {
  color: #1836aa;
  background: linear-gradient(#fff, #e4efff);
  border: 2px solid #245bff;
  border-radius: 2px !important;
  box-shadow: 3px 3px 0 #142b8c, inset 1px 1px #fff;
}
.sound {
  width: auto;
  min-width: 88px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  font-size: 10px;
  font-weight: 900;
  white-space: nowrap;
}
.sound span { letter-spacing: .08em; }
.sound b { color: #d92a9e; font-size: 19px; line-height: 1; }

/* Home: a CD-era splash page inside an application window. */
.hero {
  margin: 58px 18px 88px;
  min-height: 560px;
  padding: 66px 23px 132px;
  background-color: #fff;
  background-image:
    radial-gradient(#245bff1a 1px, transparent 1px),
    radial-gradient(circle at 84% 33%, #ff4db820, transparent 29%),
    radial-gradient(circle at 13% 72%, #85dfff21, transparent 25%);
  background-size: 10px 10px, 100% 100%, 100% 100%;
  border: 3px solid #1438bc;
  border-radius: 1px;
  box-shadow: 5px 5px 0 #6894ff, 9px 9px 0 #102974, 0 0 0 5px #d4e5ff;
}
.hero::before {
  content: "▣  MUSIC_FESTIVAL_MAKER.EXE                      ▬ □ ×";
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 29px;
  padding: 0 8px;
  background: repeating-linear-gradient(0deg, #1f56e8, #1f56e8 2px, #3984ff 2px, #3984ff 3px);
  border-bottom: 2px solid #1337a7;
  color: #fff;
  font: 800 10px/27px ui-monospace, Menlo, monospace;
  letter-spacing: .035em;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.hero::after {
  content: "PRESS PLAY · MAKE IT YOURS ✦";
  white-space: nowrap;
  position: absolute;
  right: 20px;
  bottom: 82px;
  color: #e536a4;
  font: 900 italic 10px/1 ui-monospace, Menlo, monospace;
  letter-spacing: .035em;
  transform: rotate(-5deg);
  pointer-events: none;
}
.hero > small {
  display: block;
  color: #1e2470;
  font: 800 9px/1.4 ui-monospace, Menlo, monospace;
  letter-spacing: .12em;
  white-space: normal;
}
.hero h1 {
  position: relative;
  z-index: 1;
  margin: 50px -11px 39px;
  font: 1000 clamp(54px, 15.5vw, 78px)/.9 "Arial Black", Impact, sans-serif;
  letter-spacing: -.052em;
  transform: rotate(-3deg);
  color: #245bff;
  -webkit-text-stroke: 1.5px #1238b4;
  text-shadow: 1px 1px #fff, 2px 2px #9be8ff, 3px 3px #1c45c7, 5px 5px #082374, 7px 7px #d5dcff;
}
.hero h1::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 4%;
  right: 3%;
  top: -13%;
  height: 126%;
  border: 2px solid #245bff7d;
  border-radius: 50%;
  transform: rotate(-12deg);
  pointer-events: none;
}
.hero h1 .home-title-pink {
  color: #ff4db8;
  -webkit-text-stroke: 1.5px #ba1e91;
  text-shadow: 1px 1px #fff, 2px 2px #ffc9ed, 3px 3px #db35a3, 5px 5px #742078, 7px 7px #e5d8ff;
}
.hero h1 .home-title-blue {
  color: #245bff;
  -webkit-text-stroke: 1.5px #1238b4;
  text-shadow: 1px 1px #fff, 2px 2px #9be8ff, 3px 3px #1c45c7, 5px 5px #082374, 7px 7px #d5dcff;
}
.hero p {
  max-width: 400px;
  margin: 0 auto;
  color: #18224e;
  font-size: 13px;
  line-height: 1.85;
  letter-spacing: .04em;
}
.hero p span {
  display: block;
  white-space: nowrap;
  font-size: clamp(9px, 2.6vw, 12px);
  letter-spacing: 0;
}
.hero p::after {
  content: "★  MUSIC / PEOPLE / STORIES  ☺";
  position: absolute;
  left: 27px;
  bottom: 28px;
  padding: 5px 6px;
  background: #fff7bc;
  border: 1px solid #245bff;
  color: #243cab;
  box-shadow: 2px 2px 0 #ff4db8;
  font: 900 8px ui-monospace, Menlo, monospace;
  transform: rotate(-5deg);
  pointer-events: none;
}
.hero .star { top: 46px; left: 17px; z-index: 2; color: #ff4db8; text-shadow: 2px 2px #2859e9; }
.ticket-stub {
  top: -36px;
  right: -7px;
  z-index: 2;
  border: 2px solid #245bff;
  border-radius: 0;
  background: #fff;
  color: #19255a;
  box-shadow: 3px 3px 0 #89acff;
}
.ticket-stub b { color: #d632ac; }
.primary {
  position: relative;
  border: 2px solid #12329e;
  border-radius: 3px;
  background: linear-gradient(100deg, #245bff, #7a5cff 49%, #ff4db8);
  color: #fff;
  box-shadow: 4px 4px 0 #102d90, inset 2px 2px #ffffffbd, inset -2px -2px #d7259d;
  text-shadow: 1px 1px #253482;
  letter-spacing: .05em;
  min-height: 55px;
}
.primary::before, .primary::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border: 1px solid #fff9;
  pointer-events: none;
}
.primary::before { top: 5px; left: 5px; }
.primary::after { bottom: 5px; right: 5px; }
.primary:disabled { background: #a8a9b9; box-shadow: 2px 2px 0 #63687d; }
.hero .primary { margin-top: 42px; }
.crowd {
  background: linear-gradient(90deg, #a5b8ff, #c8e8ff, #ffbfe6);
  color: #1633a8;
  clip-path: polygon(0 43%, 7% 49%, 13% 14%, 17% 41%, 25% 31%, 31% 45%, 37% 12%, 43% 41%, 50% 26%, 57% 46%, 63% 13%, 70% 47%, 76% 25%, 83% 43%, 89% 8%, 95% 41%, 100% 24%, 100% 100%, 0 100%);
  opacity: .72;
  font-size: 17px;
}

/* Home guide: the supplied turn-of-the-century media player becomes the frame. */
.home-guide-overlay {
  position: fixed;
  inset: 0;
  z-index: 10040;
  display: grid;
  place-items: center;
  padding: max(10px, env(safe-area-inset-top)) 8px max(10px, env(safe-area-inset-bottom));
  background: #07133bc9;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}
.home-guide-player {
  position: relative;
  width: min(94vw, calc(88dvh * .967), 430px);
  aspect-ratio: 735 / 760;
  background: url("assets/y2k-player-guide-transparent.png") center / 100% 100% no-repeat;
  filter: drop-shadow(8px 10px 0 #132b78aa) drop-shadow(0 12px 28px #0007);
  animation: guidePlayerIn .2s ease-out;
}
@keyframes guidePlayerIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
}
.home-guide-close {
  position: absolute;
  z-index: 3;
  top: 4.1%;
  right: 4.1%;
  width: 34px;
  height: 31px;
  padding: 0;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #243b72;
  font: 900 27px/30px Arial, sans-serif;
  text-shadow: 1px 1px #fff;
}
.home-guide-close:active { transform: scale(.9) !important; box-shadow: none !important; }
.home-guide-screen {
  position: absolute;
  z-index: 1;
  top: 12.1%;
  right: 6.35%;
  bottom: 26.3%;
  left: 9.45%;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 13px 16px 12px;
  background: #fff;
  color: #15204d;
  scrollbar-width: thin;
  scrollbar-color: #7893d0 #edf2ff;
}
.home-guide-screen > small {
  display: block;
  color: #245bff;
  font: 900 8px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .14em;
}
.home-guide-screen h2 {
  margin: 8px 0 7px;
  color: #17235d;
  font: 900 22px/1.12 "PingFang SC", "Microsoft YaHei", sans-serif;
  letter-spacing: -.03em;
}
.home-guide-notice {
  margin: 0;
  padding: 7px 8px;
  border: 1px solid #ff4db8;
  background: #fff0fa;
  color: #352153;
  font-size: 10px;
  font-weight: 700;
  line-height: 1.55;
}
.home-guide-source {
  margin: 6px 0 0;
  padding: 5px 7px;
  border-left: 3px solid #245bff;
  background: #edf4ff;
  color: #263a79;
  font-size: 8px;
  font-weight: 750;
  line-height: 1.45;
}
.home-guide-screen ol {
  display: grid;
  gap: 5px;
  margin: 8px 0;
  padding-left: 20px;
}
.home-guide-screen li {
  padding-left: 1px;
  color: #34416a;
  font-size: 9px;
  font-weight: 650;
  line-height: 1.45;
}
.home-guide-screen li::marker {
  color: #ff3daa;
  font: 900 9px ui-monospace, Menlo, monospace;
}
.home-guide-screen li b { color: #153ab0; font-size: 10px; }
.home-guide-screen > strong {
  display: block;
  padding-top: 6px;
  border-top: 1px dashed #8aa0d8;
  color: #d72d9b;
  font-size: 9px;
  line-height: 1.45;
}

/* Top bar and CRT-like financial information panels. */
.top {
  height: 103px !important;
  padding: 12px 12px !important;
  gap: 8px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M0 15h16M15 0v16' stroke='%23245bff' stroke-opacity='.08'/%3E%3C/svg%3E") !important;
  border-bottom: 2px solid #245bff !important;
}
.top .back {
  width: 43px !important;
  height: 43px !important;
  flex: 0 0 43px;
  border: 2px solid #245bff !important;
  border-radius: 2px !important;
  background: linear-gradient(#fff, #dce8ff) !important;
  box-shadow: 3px 3px 0 #1436aa !important;
  font-size: 25px;
}
.top-title b {
  font: 900 clamp(8px, 2.45vw, 14px)/1 "Arial Black", Arial, sans-serif !important;
  letter-spacing: .035em;
  white-space: nowrap;
}
.top-title b::after { content: "★"; color: #ff4db8; margin-left: 2px; }
.top-title small { margin-top: 6px; color: #26398a; font: 750 8px ui-monospace, Menlo, monospace !important; }
.balance, .balance.negative {
  min-width: 137px;
  padding: 30px 7px 5px !important;
  border: 2px solid #2355d8;
  border-radius: 1px;
  background: #fff;
  box-shadow: 3px 3px 0 #99baff, inset 2px 2px #fff;
  color: #17132d;
}
.balance::before {
  content: "★  BUDGET.EXE        ▬ □ ×";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  width: auto;
  height: 20px;
  border-radius: 0;
  background: linear-gradient(90deg, #194bd0, #288dff);
  color: #fff;
  filter: none;
  opacity: 1;
  padding: 0 4px;
  font: 800 7px/20px ui-monospace, Menlo, monospace;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.balance small { color: #22347f !important; font-size: 7px !important; }
.balance b, .balance.negative b {
  color: #df269d !important;
  margin-top: 4px;
  font: 900 clamp(14px, 3.8vw, 21px)/1 ui-monospace, Menlo, monospace !important;
  letter-spacing: -.06em;
}
.balance em { color: #263876; font-size: 6px; }
.progress { height: 6px !important; background: #d6e4ff !important; border-bottom: 1px solid #245bff; }
.progress i { background: linear-gradient(90deg, #245bff, #7a5cff, #ff4db8) !important; border-radius: 0; }
.finance-ribbon {
  gap: 7px;
  padding: 10px 12px 13px;
  background: #fff;
  border-bottom: 1px solid #a5b9ff;
  box-shadow: none;
}
.finance-ribbon > div {
  min-width: 0;
  padding: 8px 6px 7px;
  border: 2px solid #245bff;
  border-radius: 1px;
  background: #fff;
  box-shadow: 3px 3px 0 #9bb8ff, inset 1px 1px #fff;
}
.finance-ribbon > div::before { content: "▣"; display: block; color: #245bff; text-align: right; font: 900 8px ui-monospace, monospace; }
.finance-ribbon .finance-focus { background: linear-gradient(120deg, #f3fbff, #fff0f9); }
.finance-ribbon small { color: #263978; font-size: 7px; font-weight: 800; }
.finance-ribbon b { color: #d82f9a; font: 900 clamp(10px, 2.8vw, 15px)/1.1 ui-monospace, Menlo, monospace; }
.finance-ribbon .finance-gain, .finance-ribbon .gain { color: #087d60; }
.finance-ribbon .finance-cost, .finance-ribbon .cost { color: #d82f9a; }

/* Step window, typography and selectable panels. */
.panel { color: #17132d; }
.panel > h2 { color: #17132d; font-family: Georgia, "Songti SC", "STSong", serif; }
.sticker {
  border: 2px solid #245bff;
  border-radius: 2px;
  background: #d9fcf0;
  color: #1c3d9f;
  box-shadow: 2px 2px 0 #7a5cff;
}
.foundation-panel {
  position: relative;
  margin: 17px 13px 20px;
  padding: 49px 16px 35px !important;
  min-height: 0 !important;
  border: 2px solid #245bff;
  border-radius: 2px;
  box-shadow: 4px 4px 0 #93b0ff;
}
.foundation-panel::before {
  content: "✦  STEP_01  •  FOUNDATION                       ▬ □ ×";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 27px;
  padding: 0 8px;
  border-bottom: 2px solid #1647bc;
  background: repeating-linear-gradient(0deg, #245bff, #245bff 2px, #4494ff 2px, #4494ff 3px);
  color: #fff;
  font: 800 10px/25px ui-monospace, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.foundation-panel::after {
  content: "✦";
  position: absolute;
  top: 95px;
  right: 16px;
  color: #ff4db8;
  font-size: 23px;
  text-shadow: 2px 2px #245bff;
  pointer-events: none;
}
.foundation-panel .sticker {
  padding: 4px 8px;
  color: #1f3ba5;
  background: #d9fcf0;
  border: 1px solid #245bff;
  border-radius: 2px;
  box-shadow: 2px 2px 0 #7a5cff;
  font: 900 8px ui-monospace, Menlo, monospace;
}
.foundation-panel h2 {
  max-width: 91%;
  margin: 17px 0 11px !important;
  font: 900 clamp(28px, 8vw, 42px)/1.14 Georgia, "Songti SC", "STSong", serif !important;
  letter-spacing: -.06em;
  text-shadow: 2px 2px #dbe6ff;
}
.foundation-panel > .lead { color: #3c4771; font-size: 11px; line-height: 1.65; margin-bottom: 15px; }
.foundation-section { margin-top: 17px; }
.foundation-section .section-label { margin-bottom: 8px; }
.section-label b { color: #172255; font: 850 13px "PingFang SC", sans-serif; }
.section-label small { color: #3549a5; font: 900 8px ui-monospace, Menlo, monospace; letter-spacing: .1em; }
.choice-grid { gap: 7px; }
.choice, .compact-choice-grid .choice, .compact-venue-types .choice {
  position: relative;
  border: 2px solid #245bff;
  border-radius: 3px;
  background: #fff;
  box-shadow: 2px 2px 0 #a8c1ff, inset 1px 1px #fff;
  color: #17132d;
}
.compact-choice-grid .choice { min-height: 58px; padding: 7px 4px; }
.choice b, .compact-choice-grid .choice b { font: 900 19px/1.1 ui-monospace, Menlo, monospace; }
.choice small, .compact-choice-grid .choice small { color: #293e9b; font: 800 8px ui-monospace, Menlo, monospace; }
.choice::after {
  content: "□";
  position: absolute;
  top: 2px;
  right: 3px;
  color: #245bff;
  font: 900 10px ui-monospace, Menlo, monospace;
  pointer-events: none;
}
.choice.active, .compact-choice-grid .choice.active, .compact-venue-types .choice.active {
  border-color: #e33eab;
  background: linear-gradient(135deg, #d4f6ff, #f6eaff 55%, #ffd5ef);
  box-shadow: 2px 2px 0 #245bff, inset 2px 2px 0 #a0c9ff;
  transform: none;
}
.choice.active::after { content: "☑"; color: #245bff; }
.venue-types { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.compact-venue-types .choice { min-height: 70px; padding: 8px 2px 5px; }
.compact-venue-types .choice b { font-size: 24px; line-height: 1; }
.compact-venue-types .choice strong { margin-top: 6px; font-size: 9px; line-height: 1.2; overflow-wrap: anywhere; }

/* Capacity and actual cost details remain readable, with no duplicate fees. */
.venue-capacity-slider, .money-card, .card {
  background: #fff !important;
  border: 2px solid #245bff !important;
  border-radius: 2px !important;
  box-shadow: 3px 3px 0 #a8c1ff !important;
}
.venue-capacity-slider { margin-top: 9px !important; padding: 14px !important; }
.venue-capacity-slider > span { color: #2351b7; font: 850 9px ui-monospace, Menlo, monospace; }
.venue-capacity-slider > b { color: #d42da2; font: 900 clamp(24px, 6vw, 31px) ui-monospace, Menlo, monospace !important; }
.venue-capacity-slider input { accent-color: #245bff; }
.venue-capacity-slider .scale-labels small { color: #374787; font-size: 9px; }
.venue-capacity-slider p { color: #4a5482; font-size: 10px; }
.cost-card, .foundation-panel .cost-card {
  position: relative;
  margin: 18px 0 0;
  padding: 43px 13px 13px;
  background: #fff;
  color: #17132d;
  border: 2px solid #245bff;
  border-radius: 2px;
  box-shadow: 4px 4px 0 #8faeff;
}
.cost-card::before {
  content: "▣  COST_DETAIL.EXE                               ▬ □ ×";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 25px;
  padding: 0 7px;
  border-bottom: 2px solid #1b49ba;
  background: linear-gradient(90deg, #245bff, #459cff);
  color: #fff;
  font: 850 9px/23px ui-monospace, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.cost-card header { border-bottom: 1px dashed #8aa8ff; align-items: center; }
.cost-card header small { color: #314da2; font: 800 9px ui-monospace, Menlo, monospace; }
.cost-card header b, .foundation-panel .cost-card header b { color: #cf2999; font: 900 21px ui-monospace, Menlo, monospace; }
.cost-lines { gap: 5px; }
.cost-lines span { color: #2d417f; font: 750 8px ui-monospace, Menlo, monospace; }
.cost-lines b { color: #172b7a; font: 850 11px ui-monospace, Menlo, monospace; }
.cost-why { border-top: 1px dashed #9ab4f6; }
.cost-why > small { color: #164ad4; font-size: 10px; }
.cost-why li, .foundation-panel .cost-why li { color: #344478; font-size: 10px; line-height: 1.65; }
.cost-why li b { color: #19275c; }
.cost-why li::before { color: #ff4db8; }
.cost-why .no-double-charge { background: #f0faff; border: 1px solid #245bff; border-radius: 2px; color: #284082; font-size: 9px; }

/* Shared controls across the rest of the game: one coherent skin. */
.search, .song-search, .custom-venue-field, .ticket-row, .schedule-card, .artist,
.zone-card, .open-stock, .event, .village-card, .selected-setlist,
.track-recommendations, .artist-roster-board, .ticket-guidance, .theme-card,
.chance, .inventory, .stats > div, .setlist-meter, .song, .manual-song,
.api-state, .day-modal, .ticket-finale, .day-end-story, .story {
  border-radius: 3px !important;
}
.search, .song-search, .custom-venue-field, .ticket-row, .schedule-card, .artist,
.zone-card, .open-stock, .event, .village-card, .selected-setlist,
.track-recommendations, .artist-roster-board, .ticket-guidance, .chance,
.stats > div, .setlist-meter, .song, .manual-song, .api-state {
  border: 2px solid #245bff !important;
  background: #fff !important;
  box-shadow: 3px 3px 0 #a8c1ff !important;
  color: #17132d;
}
.artist-roster-day {
  border: 1px solid #245bff;
  border-radius: 2px;
  background: #fff;
  box-shadow: 2px 2px 0 #b7c9ff;
  cursor: pointer;
}
.artist-roster-day:focus-visible { outline: 3px solid #ff4db8; outline-offset: 2px; }
.artist-roster-day.active { background: linear-gradient(120deg, #effbff, #fff0f9); outline: 1px solid #ff4db8; }
.search button, .song-search button, .add, .toggle.on,
.schedule-tabs button.active, .artist-tabs button.active,
.artist-day-tabs button.active, .genre-row button.active {
  border-radius: 2px !important;
  background: linear-gradient(120deg, #bceeff, #ffc8ec) !important;
  color: #17328b;
}
.genre-row button, .schedule-tabs button, .stage-tabs button, .artist-tabs button,
.artist-day-tabs button, .theme-actions button, .yesno button, .choices button,
.recommendation-toggle, .share, .artifact-save, .ghost, .secondary-row button {
  border: 2px solid #245bff;
  border-radius: 2px;
  background: #fff;
  box-shadow: 2px 2px 0 #a8c1ff;
  color: #17132d;
}
.ticket-head, .inventory, .sticky-summary, .ticket-head, .live-status {
  border-radius: 1px;
  background: #245bff;
  color: #fff;
}
.ticket-head { background: repeating-linear-gradient(0deg, #245bff, #245bff 2px, #3979f7 2px, #3979f7 3px); }
.ticket-head h2, .ticket-head p, .ticket-head small,
.sticky-summary b, .inventory header b { color: #fff; }
.live h2 { color: #17132d; }
.live .event { color: #17132d; }
.festival-arrival {
  background: radial-gradient(circle at 83% 17%, #ff4db880, transparent 24%), linear-gradient(145deg, #142d9f, #3d4ab2 55%, #111d50);
}
.day-transition .next-day-card { border: 2px solid #9fbaff; border-radius: 2px; background: #ffffff17; box-shadow: 4px 4px 0 #ff4db8; }
.day-modal-top { border-bottom: 2px solid #245bff; }
.theme-card {
  height: 390px;
  margin: 22px 0 18px;
  padding: 50px 22px 22px;
  border: 2px solid #245bff;
  border-radius: 2px;
  background-color: #fff;
  background-image: radial-gradient(#245bff20 1px, transparent 1px), linear-gradient(145deg, transparent 65%, #d6f8ff 65%, #ffd8ef);
  background-size: 11px 11px, 100% 100%;
  box-shadow: 4px 4px 0 #7a5cff;
  color: #17132d;
}
.theme-card::before {
  content: "▣  FESTIVAL_NAME.TXT                           ▬ □ ×";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 27px;
  padding: 0 8px;
  border-bottom: 2px solid #1647bc;
  background: repeating-linear-gradient(0deg, #245bff, #245bff 2px, #4494ff 2px, #4494ff 3px);
  color: #fff;
  font: 800 9px/25px ui-monospace, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.theme-card::after {
  content: "★";
  position: absolute;
  inset: auto 18px 14px auto;
  width: auto;
  height: auto;
  border: 0;
  border-radius: 0;
  color: #ff4db8;
  font-size: 47px;
  text-shadow: 3px 3px #245bff;
  pointer-events: none;
}
.theme-card small { color: #1a3d9b; font: 850 10px ui-monospace, Menlo, monospace; }
.theme-card label { margin-top: 87px; color: #254391; font: 800 11px "PingFang SC", sans-serif; }
.theme-card input { border-bottom: 2px solid #245bff; color: #17132d; background: transparent; font-size: 38px; }
.theme-preview-title { color: #26418d; font: 800 11px ui-monospace, Menlo, monospace; }
.theme-actions button { border: 2px solid #245bff; border-radius: 2px; box-shadow: 3px 3px 0 #95b4ff; }
.theme-actions button.green { background: linear-gradient(90deg, #245bff, #7a5cff, #ff4db8); color: #fff; }
.poster-render-frame { border: 2px solid #245bff; border-radius: 2px; box-shadow: 4px 4px 0 #7a5cff; }
.build-badge { border-radius: 2px; background: #245bffea; font-size: 7px; }
.day-modal-overlay { background: #10184aaa; }
.day-modal, .ticket-finale, .day-end-story { border: 2px solid #245bff; box-shadow: 6px 6px 0 #102e94; }
.final-story-screen { color: #17132d; }
.unified-story-card {
  position: relative;
  margin: 0 !important;
  padding: 50px 18px 20px !important;
  border: 2px solid #245bff !important;
  border-radius: 2px !important;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12'%3E%3Ccircle cx='1' cy='1' r='.8' fill='%23245bff' fill-opacity='.09'/%3E%3C/svg%3E") !important;
  color: #17132d;
  box-shadow: 5px 5px 0 #245bff !important;
}
.unified-story-card::before {
  content: "★  FESTIVAL_STORY.EXE                          ▬ □ ×";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 28px;
  padding: 0 8px;
  border-bottom: 2px solid #1647bc;
  background: repeating-linear-gradient(0deg, #245bff, #245bff 2px, #4494ff 2px, #4494ff 3px);
  color: #fff;
  font: 850 9px/26px ui-monospace, Menlo, monospace;
  white-space: nowrap;
  overflow: hidden;
  pointer-events: none;
}
.unified-story-card > small { color: #245bff; font: 850 9px ui-monospace, Menlo, monospace; }
.unified-story-card h2 { color: #1b3fae; text-shadow: 2px 2px #b8d8ff, 4px 4px #ffbde8; overflow-wrap: anywhere; }
.unified-story-card .moment { color: #ff4db8; text-shadow: 2px 2px #245bff; }
.unified-story-card > p { color: #303d70; line-height: 1.8; }
.unified-story-card > strong { color: #245bff; }
.unified-story-card > strong b { color: #17132d; }
.unified-story-card .final-stats { border-top: 2px solid #245bff; gap: 7px; }
.unified-story-card .final-stats span {
  min-width: 0;
  padding: 10px 9px;
  border: 1px solid #245bff;
  background: #fff;
  color: #263e89;
  box-shadow: 2px 2px 0 #aac2ff;
}
.unified-story-card .final-stats b { color: #d62fa2; overflow-wrap: anywhere; }
.unified-story-card .lineup-review { border-top: 2px solid #245bff; }
.unified-story-card .lineup-review > header small { color: #245bff; }
.unified-story-card .lineup-review > header b { color: #17132d; }
.unified-story-card .recap-day { border: 1px solid #245bff; border-radius: 2px; background: #f5faff; }
.unified-story-card .recap-day h3 { color: #1e4fd5; }
.unified-story-card .recap-day h3 small { color: #47578c; }
.unified-story-card .recap-stage { border-top: 1px dashed #9cb5ff; }
.unified-story-card .recap-stage span { color: #d42a9a; }
.unified-story-card .recap-stage p { color: #26365f; }
.unified-story-card .story-ending { border-top: 2px solid #245bff; color: #1a368b; }
.unified-story-card .story-ending small { color: #5369a6 !important; }
.final-story-screen .artifact-save {
  border: 2px solid #245bff;
  border-radius: 2px;
  background: #fff;
  box-shadow: 3px 3px 0 #9cb7ff;
}
.final-story-screen .artifact-save span { border-radius: 2px; background: #245bff; }
.final-story-screen > .primary { background: linear-gradient(100deg, #245bff, #7a5cff 49%, #ff4db8) !important; color: #fff; }

/* Remaining story, ticket and setlist surfaces share the same application chrome. */
.artist-day-tabs button.active, .artist-day-summary span.active,
.stage-tabs button.active, .yesno button.active, .ticket-tier.active {
  border-color: #245bff !important;
  background: linear-gradient(115deg, #d5f5ff, #ffe2f5) !important;
  color: #1c358a !important;
  outline: 1px solid #ff4db8;
  box-shadow: inset 2px 2px 0 #acc9ff, 2px 2px 0 #245bff !important;
}
.artist-day-summary span, .artist-suggestions button, .roster-person,
.ticket-income-live span, .market-movement > div, .story-inline-result,
.daily-story-flow .story-question, .day-context, .selected-setlist {
  border: 1px solid #245bff !important;
  border-radius: 2px !important;
  background: #f7fbff !important;
  color: #17132d;
  box-shadow: 2px 2px 0 #b4c8ff;
}
.selected-setlist { border-width: 2px !important; }
.selected-setlist > header {
  padding: 7px 8px;
  border-bottom: 2px solid #245bff;
  background: #e7f5ff;
  color: #1643bc;
}
.selected-setlist .song { box-shadow: none !important; }
.song:has(.song-artwork) { grid-template-columns:30px 44px minmax(0,1fr) auto; }
.song-artwork { display:block; width:44px; height:44px; object-fit:cover; border:1px solid #245bff; background:#f4f6ff; }
.song strong { min-width:0; overflow-wrap:anywhere; }
.song strong small { display:block; margin-top:3px; line-height:1.4; }
.manual-artist-offer { margin:15px 0; padding:14px; border:2px dashed #245bff; background:#fff; display:grid; gap:9px; }
.manual-artist-offer b { font-size:12px; }
.manual-artist-offer button { border:2px solid #17132d; background:#ff4db8; padding:10px; font-weight:900; box-shadow:3px 3px 0 #245bff; }
.manual-artist-overlay { position:fixed; inset:0; z-index:10020; background:#17132dcc; display:grid; place-items:center; padding:18px; }
.manual-artist-window { width:min(100%,440px); border:3px solid #245bff; background:#fff; box-shadow:7px 7px 0 #17132d; }
.manual-artist-window>header { background:#245bff; color:#fff; display:flex; justify-content:space-between; align-items:center; padding:8px 10px; font:900 12px ui-monospace,monospace; }
.manual-artist-window>header button { border:1px solid #fff; background:#fff; color:#17132d; min-width:28px; min-height:28px; font-weight:900; }
.manual-artist-content { padding:18px; display:grid; gap:14px; }
.manual-artist-content h3 { margin:0; font-size:21px; }
.manual-artist-content label { display:grid; gap:6px; font-size:12px; font-weight:800; }
.manual-artist-content input { width:100%; min-height:42px; border:2px solid #245bff; background:#fafafa; padding:9px; }
.album-recommendations,.album-detail { margin-top:12px; border:2px solid #245bff; background:#fff; padding:11px; }
.album-recommendations>header { margin-bottom:9px; font:900 12px ui-monospace,monospace; }
.album-result { width:100%; display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:10px; align-items:center; text-align:left; padding:8px; margin-top:7px; border:2px solid #245bff; background:#fafafa; }
.album-result img,.album-cover-placeholder { width:52px; height:52px; object-fit:cover; border:1px solid #17132d; display:grid; place-items:center; background:#e7efff; }
.album-result span:nth-child(2) { min-width:0; display:grid; gap:3px; }
.album-result small { color:#7a5cff; font:900 9px ui-monospace,monospace; }
.album-result strong { overflow-wrap:anywhere; font-size:13px; }
.album-result em { font-size:10px; font-style:normal; color:#5d5872; }
.album-detail>header { display:flex; align-items:center; gap:11px; margin:13px 0; }
.album-detail>header img { width:76px; height:76px; object-fit:cover; border:2px solid #245bff; }
.album-detail h3 { margin:4px 0; font-size:17px; }
.album-detail p { margin:3px 0; font-size:11px; }
.album-track { display:grid; grid-template-columns:28px minmax(0,1fr); align-items:center; gap:6px; margin-top:6px; }
.album-track>span { font:800 11px ui-monospace,monospace; color:#7a5cff; }
.inline-album-tracks { padding:9px; border:1px solid #245bff; border-top:0; }
.inline-album-tracks>small { display:block; margin:3px 0 8px; font:800 9px ui-monospace,monospace; }
.ticket-guidance b, .ticket-income-live b { color: #d42da2; font-family: ui-monospace, Menlo, monospace; }
.ticket-guidance small, .ticket-guidance em, .ticket-guidance span { color: #34477f; }
.ticket-guidance em { border-top-color: #a8c1ff; }
.ticket-income-live span { background: #f2fff9 !important; }
.ticket-income-live b { color: #078064; }
.daily-story-modal, .day-modal, .ticket-finale, .day-end-story {
  border: 2px solid #245bff !important;
  border-radius: 2px !important;
  background: #fff !important;
  color: #17132d;
  box-shadow: 5px 5px 0 #1742a3 !important;
}
.ticket-finale.is-risk { background: #fff7fa !important; }
.ticket-finale > small, .day-end-story > small { color: #245bff !important; }
.ticket-finale > p, .day-end-story > p { color: #344777 !important; }
.ticket-finale h3, .day-end-story h3 { color: #17132d !important; }
.ticket-finale .finale-symbol {
  border: 2px solid #245bff;
  border-radius: 2px;
  background: #f1f8ff;
  color: #d62fa2;
  box-shadow: 3px 3px 0 #a8c1ff;
}
.ticket-finale.is-risk .finale-symbol { color: #b62059; box-shadow: 3px 3px 0 #ff9dcb; }
.ticket-finale .finale-numbers span, .day-end-story .story-ledger span {
  border: 1px solid #245bff;
  border-radius: 2px;
  background: #f7fbff;
  color: #344777;
}
.ticket-finale .finale-numbers b, .day-end-story .story-ledger b { color: #173b9b; }
.ticket-finale .finale-warning { background: #fff0f6; color: #77234c; }
.ticket-finale .finale-choices button { background: #fff; color: #17132d; border-color: #245bff; }
.ticket-finale .finale-choices button span small { color: #465684 !important; }
.daily-story-modal .day-modal-top { background: #eaf2ff !important; }
.daily-story-modal::after { border-radius: 2px; background: #245bff; }
.day-modal-top, .ticket-finale > header, .day-end-story > header { color: #1b3da2; }
.modal-result, .story-inline-result { border-radius: 2px !important; background: #eefcff !important; }
.choices button, .modal-result button, .recommendation-toggle {
  border: 2px solid #245bff;
  border-radius: 2px !important;
  background: #fff;
  color: #17132d;
  box-shadow: 2px 2px 0 #a8c1ff;
}
.festival-arrival.day-transition {
  background: radial-gradient(circle at 85% 16%, #ff4db865, transparent 26%), linear-gradient(145deg, #132b90, #395ad3 65%, #14256c) !important;
}
.day-transition .day-complete { border-left: 3px solid #8fffd4; }
.day-transition .day-complete small, .day-transition .next-day-card small { color: #b6ffea; }
.day-transition .next-day-card { background: #fff !important; color: #17132d; }
.day-transition .next-day-card b { color: #173ca5; }
.day-transition .next-day-card p { color: #344777; }
.final-story-screen .artifact-save small { color: #394884; }
.final-story-screen .artifact-save b { color: #172b75; }

/* Compact scheduling: one glance, one native picker, and a short drag distance. */
.schedule-panel .lead { margin-bottom: 12px; }
.schedule-panel .schedule-tabs { margin: 10px 0 7px; }
.schedule-panel .stage-tabs { margin: 0 0 9px; }
.schedule-panel .stage-start { margin-bottom: 10px; padding: 7px 9px; }
.schedule-panel .stage-start input { min-height: 36px; padding: 5px 7px; }
.schedule-panel .schedule-list { gap: 7px; }
.compact-schedule-card {
  padding: 8px 9px 7px !important;
  box-shadow: 2px 2px 0 #a8c1ff !important;
}
.compact-schedule-card::before {
  left: -7px;
  top: 12px;
  width: 10px;
  height: 10px;
}
.compact-schedule-card .schedule-top {
  grid-template-columns: 31px minmax(0, 1fr) auto;
  gap: 7px;
  margin-bottom: 6px;
}
.compact-schedule-card .drag-handle {
  width: 31px;
  height: 31px;
  min-height: 31px;
  padding: 0;
  border: 1.5px solid #245bff;
  border-radius: 2px;
  background: #fff09b;
  box-shadow: 1px 1px 0 #7d96da;
  color: #16338f;
  font-size: 15px;
  touch-action: none;
}
.compact-schedule-card h3 {
  min-width: 0;
  margin: 0;
  overflow: hidden;
  font: 900 13px/1.2 "PingFang SC", "Microsoft YaHei", sans-serif;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.compact-schedule-card .slot-time b {
  color: #1b3ca3;
  font: 850 10px/1.1 ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.compact-schedule-card .slot-time small {
  margin-top: 2px;
  color: #6c75a0;
  font-size: 6px;
}
.compact-schedule-fields {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 5px;
}
.compact-schedule-fields label { min-width: 0; }
.compact-schedule-fields label > span {
  display: block;
  margin: 0 0 2px;
  color: #4d598b;
  font: 800 7px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
}
.compact-schedule-fields select {
  width: 100%;
  min-height: 34px;
  margin: 0 !important;
  padding: 4px 16px 4px 5px !important;
  border: 1.5px solid #245bff !important;
  border-radius: 2px !important;
  background-color: #f7faff !important;
  color: #17265e;
  font: 800 10px/1 "PingFang SC", "Microsoft YaHei", sans-serif !important;
}
.compact-schedule-card footer {
  min-height: 29px;
  margin-top: 6px;
  align-items: center;
  color: #586287;
  font-size: 7px;
}
.compact-schedule-card footer span b { color: #d32a90; font-size: 8px; }
.compact-schedule-card .move-buttons { gap: 4px; }
.compact-schedule-card .move-buttons button {
  width: 27px;
  height: 27px;
  min-height: 27px;
  padding: 0;
  border: 1.5px solid #245bff;
  border-radius: 2px;
  background: #fff;
  color: #17348e;
  box-shadow: 1px 1px 0 #a8c1ff;
  font-size: 12px;
}
.schedule-panel .changeover { padding: 0; font-size: 6px; line-height: 1.2; }

.collaboration-builder {
  margin-top: 14px;
  padding: 12px;
  border: 2px solid #245bff;
  background: #f7faff;
  box-shadow: 3px 3px 0 #ff4db8;
}
.collaboration-pair {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr);
  gap: 6px;
  align-items: end;
}
.collaboration-pair > b {
  padding-bottom: 10px;
  color: #ff3daa;
  font: 900 18px/1 ui-monospace, Menlo, monospace;
  text-align: center;
}
.collaboration-builder label {
  display: block;
  color: #33467f;
  font: 800 8px/1.3 ui-monospace, Menlo, monospace;
}
.collaboration-builder select,
.collaboration-builder input {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 39px;
  margin-top: 5px;
  padding: 7px;
  border: 2px solid #245bff;
  border-radius: 2px;
  background: #fff;
  color: #17132d;
  font: 800 10px "PingFang SC", "Microsoft YaHei", sans-serif;
}
.collaboration-song { margin-top: 10px; }
.collaboration-builder > small {
  display: block;
  margin-top: 7px;
  color: #66709a;
  font: 700 7px/1.5 ui-monospace, Menlo, monospace;
}
.collaboration-error {
  min-height: 14px;
  margin: 4px 0;
  color: #d6228d !important;
  font: 800 8px/1.4 ui-monospace, Menlo, monospace;
}
.collaboration-confirm {
  width: 100%;
  min-height: 43px;
  padding: 9px 11px;
  border: 2px solid #142d91;
  border-radius: 2px;
  background: linear-gradient(90deg, #245bff, #7a5cff, #ff4db8);
  box-shadow: 3px 3px 0 #112a83;
  color: #fff;
  font-weight: 900;
  text-align: left;
}
.collaboration-confirm b { float: right; font-size: 16px; }

@media (max-width: 390px) {
  .top { height: 98px !important; padding: 10px 8px !important; }
  .top .back { width: 38px !important; height: 38px !important; flex-basis: 38px; }
  .top-title b { font-size: 8px !important; }
  .top-title small { font-size: 7px !important; }
  .balance { min-width: 130px; padding: 27px 5px 5px !important; }
  .balance b { font-size: 14px !important; }
  .finance-ribbon { gap: 5px; padding: 9px 7px 11px; }
  .finance-ribbon > div { padding: 6px 4px; }
  .finance-ribbon small { font-size: 7px; }
  .finance-ribbon b { font-size: 11px; }
  .foundation-panel { margin-left: 10px; margin-right: 10px; padding-left: 12px !important; padding-right: 12px !important; }
  .compact-venue-types .choice strong { font-size: 8px; }
  .hero { margin-left: 16px; margin-right: 16px; padding-left: 14px; padding-right: 14px; padding-bottom: 128px; }
  .sound { min-width: 82px; padding: 0 7px; gap: 5px; font-size: 9px; }
  .sound b { font-size: 17px; }
  .hero h1 { font-size: clamp(54px, 15.5vw, 62px); line-height: .9; margin-top: 46px; margin-bottom: 34px; }
  .hero::after { right: 14px; bottom: 78px; font-size: 8px; }
  .hero p::after { left: 16px; bottom: 27px; font-size: 7px; }
  .home-guide-player { width: min(96vw, calc(91dvh * .967), 374px); }
  .home-guide-screen { padding: 8px 10px 9px; }
  .home-guide-screen > small { font-size: 7px; }
  .home-guide-screen h2 { margin: 6px 0; font-size: 17px; }
  .home-guide-notice { padding: 5px 6px; font-size: 8px; line-height: 1.45; }
  .home-guide-source { margin-top: 4px; padding: 4px 5px; font-size: 6.8px; line-height: 1.35; }
  .home-guide-screen ol { gap: 2px; margin: 5px 0; padding-left: 17px; }
  .home-guide-screen li { font-size: 7.5px; line-height: 1.35; }
  .home-guide-screen li::marker { font-size: 8px; }
  .home-guide-screen li b { font-size: 8.5px; }
  .home-guide-screen > strong { padding-top: 4px; font-size: 7.5px; }
  .compact-schedule-card .schedule-top { grid-template-columns: 29px minmax(0, 1fr) auto; gap: 5px; }
  .compact-schedule-card .drag-handle { width: 29px; height: 29px; min-height: 29px; }
  .compact-schedule-card h3 { font-size: 12px; }
  .compact-schedule-card .slot-time b { font-size: 8px; }
  .compact-schedule-fields select { min-height: 32px; padding-right: 12px !important; font-size: 9px !important; }
}
@media (min-width: 700px) {
  body { padding: 22px; }
  .app { border: 2px solid #245bff; border-radius: 2px; }
}