:root {
  --ink: #f8fbff;
  --muted: rgba(248, 251, 255, 0.72);
  --glass: rgba(20, 24, 44, 0.62);
  --glass-strong: rgba(18, 20, 36, 0.82);
  --line: rgba(255, 255, 255, 0.22);
  --gold: #ffd18b;
  --blue: #91b9ff;
  --pink: #ff9bc9;
  font-family: "Noto Sans SC", "Microsoft YaHei", system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; height: 100%; overflow: hidden; background: #101322; color: var(--ink); }
button { font: inherit; color: inherit; }
.game-root { position: relative; width: 100vw; height: 100dvh; min-height: 100svh; overflow: hidden; overscroll-behavior: none; background: radial-gradient(circle at 50% 10%, #4b5b8d 0, #1a1831 45%, #0b0d18 100%); }
.screen { position: absolute; inset: 0; display: none; }
.screen.active { display: block; }

.title-screen { isolation: isolate; }
.title-art { position: absolute; inset: 0; background-image: linear-gradient(90deg, rgba(10,12,24,.78) 0%, rgba(10,12,24,.24) 46%, rgba(10,12,24,.78) 100%), url("runtime/images/keyvisual-four-heroines-rooftop-dusk-menu-9x16.png"); background-size: cover; background-position: center 32%; filter: saturate(1.08); transform: scale(1.02); }
.title-art::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 18%, transparent 0 28%, rgba(5, 7, 18, .72) 82%), linear-gradient(0deg, rgba(8,10,20,.9), transparent 45%); }
.title-panel { position: absolute; left: clamp(20px, 7vw, 86px); bottom: clamp(28px, 10vh, 110px); width: min(580px, calc(100vw - 40px)); padding: clamp(22px, 4vw, 38px); background: linear-gradient(135deg, rgba(21,24,45,.78), rgba(48,35,62,.55)); border: 1px solid var(--line); box-shadow: 0 24px 80px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.12); backdrop-filter: blur(18px); }
.eyebrow { margin: 0 0 8px; color: var(--gold); letter-spacing: .14em; font-size: 13px; }
h1 { margin: 0; font-size: clamp(48px, 8vw, 92px); letter-spacing: .04em; line-height: .98; text-shadow: 0 0 28px rgba(255, 180, 119, .48); }
.subtitle { margin: 18px 0 24px; color: var(--muted); font-size: clamp(16px, 2vw, 20px); }
.progress-card { display: inline-flex; gap: 14px; align-items: center; padding: 10px 14px; border: 1px solid var(--line); background: rgba(255,255,255,.08); margin-bottom: 18px; }
.progress-card span { color: var(--muted); }
.title-actions { display: flex; flex-wrap: wrap; gap: 12px; }
button { min-height: 44px; border: 1px solid var(--line); background: rgba(255,255,255,.11); padding: 11px 18px; cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease; touch-action: manipulation; }
button:hover, button:focus-visible { transform: translateY(-1px); background: rgba(255,255,255,.18); border-color: rgba(255,255,255,.44); outline: none; }
button.primary { background: linear-gradient(135deg, #ffb86f, #ff77b5); color: #211426; border-color: transparent; font-weight: 800; }
button.ghost { color: var(--muted); }
.small-btn { min-height: 38px; padding: 8px 12px; font-size: 13px; }

.play-screen { touch-action: manipulation; user-select: none; }
.background { position: absolute; inset: 0; background-size: cover; background-position: center; transition: filter .35s ease, background .35s ease; }
.background::after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, rgba(7,9,18,.9) 0%, rgba(7,9,18,.28) 42%, rgba(255,146,80,.12) 100%), radial-gradient(circle at 65% 20%, rgba(255,203,134,.28), transparent 36%); }
.bg-classroom { background: linear-gradient(135deg, #f4a36f 0%, #6274aa 52%, #20243e 100%); }
.bg-club { background: linear-gradient(135deg, #3c4566 0%, #9e694e 46%, #161b2f 100%); }
.bg-rooftop { background: linear-gradient(160deg, #ffb16e 0%, #b26ca2 42%, #1b2143 100%); }
.bg-archive { background: linear-gradient(135deg, #1d263e 0%, #32486e 48%, #11131f 100%); }
.bg-festival { background: radial-gradient(circle at 30% 20%, #ffd37c, transparent 18%), linear-gradient(135deg, #fe9a68, #6f386f 52%, #17152c); }
.bg-artroom { background: linear-gradient(135deg, #dab98d, #80709d 48%, #252238 100%); }
.bg-station { background: linear-gradient(135deg, #e78963, #5e6298 46%, #151827 100%); }
.memory-orbit { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.memory-orbit span { position: absolute; width: 150px; height: 92px; border: 1px solid rgba(255,255,255,.28); background: rgba(255,255,255,.08); box-shadow: 0 12px 38px rgba(0,0,0,.22); transform: rotate(var(--r)); animation: drift 12s ease-in-out infinite alternate; }
.memory-orbit span:nth-child(1){ left: 8%; top: 16%; --r:-9deg; }
.memory-orbit span:nth-child(2){ right: 12%; top: 20%; --r:7deg; animation-delay: -4s; }
.memory-orbit span:nth-child(3){ left: 18%; bottom: 28%; --r:4deg; animation-delay: -8s; }
.memory-orbit span:nth-child(4){ right: 22%; bottom: 24%; --r:-6deg; animation-delay: -2s; }
@keyframes drift { from { translate: 0 0; opacity: .18; } to { translate: 0 -22px; opacity: .36; } }
.character { position: absolute; right: clamp(6px, 8vw, 140px); bottom: clamp(142px, 18vh, 174px); max-height: min(74vh, 760px); max-width: min(46vw, 520px); object-fit: contain; filter: drop-shadow(0 30px 42px rgba(0,0,0,.48)); transition: opacity .2s ease, transform .25s ease; }
.route-panel { position: absolute; top: max(14px, env(safe-area-inset-top)); left: max(14px, env(safe-area-inset-left)); z-index: 3; display: grid; gap: 10px; width: min(250px, 42vw); }
.clock { width: max-content; padding: 12px 16px; background: rgba(9,12,25,.72); border: 1px solid var(--line); color: var(--gold); letter-spacing: .14em; font-weight: 900; font-size: clamp(20px, 4vw, 34px); box-shadow: 0 14px 44px rgba(0,0,0,.32); }
.route-badges { display: grid; gap: 7px; }
.badge { display: flex; justify-content: space-between; gap: 8px; align-items: center; min-height: 34px; padding: 7px 10px; background: rgba(10,12,25,.52); border: 1px solid rgba(255,255,255,.14); color: rgba(255,255,255,.58); font-size: 12px; }
.badge.done { color: #fff; border-color: var(--accent, var(--gold)); box-shadow: inset 3px 0 0 var(--accent, var(--gold)); background: rgba(255,255,255,.12); }
.dialogue-box { position: absolute; z-index: 4; left: max(18px, env(safe-area-inset-left)); right: max(18px, env(safe-area-inset-right)); bottom: max(16px, env(safe-area-inset-bottom)); min-height: clamp(190px, 26vh, 260px); padding: clamp(16px, 2.3vw, 26px); background: linear-gradient(135deg, rgba(14,17,32,.88), rgba(43,34,61,.78)); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 -16px 70px rgba(0,0,0,.42), inset 0 1px rgba(255,255,255,.14); backdrop-filter: blur(18px); }
.speaker-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
#speaker { color: var(--gold); font-size: clamp(18px, 2.6vw, 25px); }
#sceneTag { color: var(--muted); border-left: 1px solid var(--line); padding-left: 12px; font-size: 13px; }
#dialogueText { margin: 0 0 16px; font-size: clamp(16px, 2.2vw, 22px); line-height: 1.65; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); gap: 10px; }
.choice { text-align: left; background: rgba(255,255,255,.1); }
.choice.primary-choice { border-color: rgba(255, 209, 139, .8); }
.choice.locked { opacity: .7; }
.flash { animation: flash .52s ease; }
@keyframes flash { 0%{filter: brightness(1)} 40%{filter: brightness(1.8) saturate(1.4)} 100%{filter: brightness(1)} }

@media (max-width: 760px) {
  .title-panel { left: 14px; right: 14px; bottom: 16px; width: auto; }
  .title-art { background-position: center top; }
  .route-panel { width: calc(100vw - 28px); grid-template-columns: auto 1fr auto; align-items: start; }
  .route-badges { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .badge { font-size: 0; padding: 7px 6px; justify-content: center; }
  .badge::before { content: attr(data-short); font-size: 12px; }
  .badge span, .badge em { display: none; }
  .character { right: 50%; transform: translateX(50%); bottom: clamp(255px, 35vh, 300px); max-height: 46vh; max-width: 86vw; }
  .dialogue-box { min-height: 248px; padding: 16px; }
  .choices { grid-template-columns: 1fr; }
}

@media (orientation: landscape) and (max-height: 520px) {
  .character { right: 6vw; bottom: 118px; max-height: 68vh; max-width: 36vw; }
  .dialogue-box { min-height: 112px; max-height: 42vh; overflow: auto; padding: 12px 16px; }
  #dialogueText { font-size: 15px; line-height: 1.45; margin-bottom: 8px; }
  .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .route-badges { display: none; }
}