/* Immersive Player — matches "Four-pane mapped U_immersive_player.jpg". */
@import url("./ui.css");

.player-wrap { margin: 0 auto; max-width: 98rem; padding: 0 1.4rem 1.6rem; }

/* breadcrumb bar */
.crumb-bar { align-items: center; display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1rem; padding: .5rem .7rem; }
.crumbs { align-items: center; display: flex; flex: 1; flex-wrap: wrap; gap: .45rem; }
.crumb { background: #0b1424; border: 1px solid var(--line-faint); border-radius: .2rem; color: var(--muted); font-size: .9rem; padding: .38rem .7rem; position: relative; }
.crumb.active { border-color: var(--line-strong); color: var(--gold-bright); }
.crumb-sep { color: var(--gold-dim); font-size: .8rem; }
.crumb-actions { display: flex; gap: .45rem; }
.crumb-actions .btn { font-size: .85rem; padding: .45rem .8rem; }
.crumb-actions .btn.icon { width: 2.3rem; }

.voices-notice { align-items: center; background: rgba(61, 47, 17, .35); border: 1px solid #6a5729; border-radius: .3rem; color: var(--gold-bright); display: flex; flex-wrap: wrap; gap: .5rem; justify-content: space-between; margin-bottom: 1rem; padding: .6rem .9rem; }
.voices-notice[hidden] { display: none; }
.voices-notice a { color: inherit; font-weight: 600; text-decoration: underline; white-space: nowrap; }

/* main grid */
.player-grid { display: grid; gap: 1rem; grid-template-columns: 10.5rem minmax(0, 1fr) 26rem; }

/* cast rail */
.cast-rail { align-self: start; display: grid; gap: .8rem; }
.cast-card { background: linear-gradient(180deg, var(--panel-3), var(--panel-2)); border: 1px solid var(--line-faint); border-radius: .3rem; overflow: hidden; text-align: left; cursor: default; padding: 0; }
.cast-card.active { border-color: var(--line-strong); box-shadow: 0 0 0 1px var(--line-strong); }
.cast-card .cast-face { align-items: center; aspect-ratio: 5 / 4.4; background: radial-gradient(circle at 50% 30%, #2c3d5e 0%, #16233c 62%, #0d1626 100%); color: var(--gold); display: flex; font: 600 2.1rem/1 var(--display); justify-content: center; overflow: hidden; }
.cast-card .cast-face img { height: 100%; object-fit: cover; width: 100%; }
.cast-card .cast-meta { padding: .45rem .6rem .55rem; }
.cast-card .cast-name { align-items: center; color: var(--text); display: flex; font-size: 1rem; font-weight: 600; gap: .4rem; }
.cast-card .cast-name::after { background: #58b573; border-radius: 50%; content: ""; display: inline-block; height: .45rem; margin-left: auto; width: .45rem; }
.cast-card .cast-emotion { color: var(--muted); font-size: .88rem; font-style: italic; }

/* stage */
.stage-column { display: grid; gap: .8rem; align-self: start; }
.stage { aspect-ratio: 16 / 10.2; background: #0a1120; border: 1px solid var(--line-strong); border-radius: .3rem; overflow: hidden; position: relative; }
.stage .background { height: 100%; object-fit: cover; position: absolute; width: 100%; }
.stage .atmosphere { inset: 0; pointer-events: none; position: absolute; }
.stage .atmosphere.snow { background-image: radial-gradient(2px 2px at 22% 18%, #e8ecf5cc, transparent 55%), radial-gradient(1.6px 1.6px at 64% 42%, #e8ecf5aa, transparent 55%), radial-gradient(2.2px 2.2px at 84% 12%, #e8ecf5bb, transparent 55%), radial-gradient(1.8px 1.8px at 40% 70%, #e8ecf599, transparent 55%); background-size: 160px 160px; }
.stage .portrait { bottom: 0; filter: drop-shadow(0 8px 18px rgba(3, 6, 12, .6)); height: 86%; object-fit: contain; opacity: 0; position: absolute; transition: opacity .3s ease; }
.stage .portrait.visible { opacity: 1; }
.stage .portrait.left { left: 2%; }
.stage .portrait.right { right: 2%; }

.dialogue-box {
  background: linear-gradient(180deg, rgba(10, 17, 32, .92), rgba(8, 13, 25, .96));
  border: 1px solid var(--line-strong);
  border-radius: .25rem;
  bottom: 4.5%;
  box-shadow: 0 12px 30px rgba(3, 6, 13, .6);
  left: 5%;
  padding: 1.1rem 1.3rem 1rem;
  position: absolute;
  right: 5%;
}
.dialogue-box .speaker-tab {
  background: linear-gradient(180deg, #1b2740, #101b30);
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  border-radius: .25rem .25rem 0 0;
  color: var(--gold-bright);
  font-size: .95rem;
  font-variant: small-caps;
  font-weight: 700;
  left: 2.2rem;
  letter-spacing: .22em;
  padding: .35rem 1.4rem .3rem;
  position: absolute;
  top: -1.75rem;
}
.dialogue-box .line { color: var(--text); font-size: 1.18rem; line-height: 1.5; min-height: 3.4rem; }
.dialogue-box .dlg-plus { border: 1px solid var(--line); border-radius: 50%; bottom: .6rem; color: var(--gold); display: inline-flex; font-size: .8rem; height: 1.3rem; justify-content: center; align-items: center; position: absolute; right: .7rem; width: 1.3rem; }

.choice-row { display: grid; gap: .8rem; grid-template-columns: 1fr 1fr; }
.choice-row.single { grid-template-columns: 1fr; }
.choice-btn {
  background: linear-gradient(180deg, rgba(20, 30, 52, .9), rgba(13, 22, 38, .95));
  border: 1px solid var(--line);
  border-radius: .25rem;
  color: var(--text);
  cursor: pointer;
  font: 500 1.02rem/1.3 var(--serif);
  padding: .8rem 1rem;
}
.choice-btn:hover { border-color: var(--line-strong); color: var(--gold-bright); }
.choice-btn.primary { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(217, 185, 108, .35); color: var(--gold-bright); }
.choice-btn:disabled { cursor: default; opacity: .5; }

/* transport */
.transport { display: flex; flex-direction: column; gap: .5rem; padding: .6rem .8rem; }
.transport-controls { align-items: center; display: flex; flex-wrap: wrap; gap: 1rem; }
.transport .transport-center { display: flex; flex: 0 0 auto; gap: .55rem; align-items: center; }
.transport .t-btn { background: none; border: 1px solid transparent; border-radius: .25rem; color: var(--text); cursor: pointer; font-size: 1.05rem; padding: .45rem .6rem; }
.transport .t-btn:hover { border-color: var(--line); color: var(--gold-bright); }
.transport .t-btn:disabled { cursor: default; opacity: .4; }
.transport .t-btn.round { background: radial-gradient(circle, #21304f, #14203a); border: 1px solid var(--line-strong); border-radius: 50%; color: var(--gold-bright); font-size: 1.1rem; height: 2.9rem; width: 2.9rem; }
.transport .volume { align-items: center; display: flex; flex-wrap: wrap; gap: .5rem 1rem; }
.transport .volume .vol { align-items: center; color: var(--muted-2); display: flex; font-size: .78rem; gap: .4rem; }
.transport .volume input[type="range"] { accent-color: var(--gold); width: 6rem; }
.transport #state-summary { color: var(--muted-2); font-size: .82rem; margin: 0; }
.transport #state-summary:empty { display: none; }

/* right rail */
.context-rail { align-self: start; display: grid; gap: 1rem; }
.source-support blockquote { border: 0; color: #c7cede; font-size: .95rem; font-style: italic; margin: 0; }
.source-support .attribution { color: var(--muted); font-size: .88rem; margin-top: .6rem; }
.source-support .btn { margin-top: .8rem; width: 100%; }
.history-rows { display: grid; gap: .45rem; list-style: none; margin: 0; padding: 0; }
.history-rows li { border: 1px solid transparent; border-radius: .2rem; color: var(--muted); display: flex; font-size: .95rem; gap: .6rem; padding: .35rem .5rem; }
.history-rows li .h-num { color: var(--gold-dim); min-width: 2.2rem; }
.history-rows li.chosen { background: rgba(217, 185, 108, .08); border-color: var(--line); color: var(--gold-bright); }
.history-rows li.next { color: var(--muted-2); font-style: italic; }

.closeup-panel { border-color: var(--line); }
.closeup-panel .panel-title { color: var(--gold-bright); }
.closeup-frame { align-items: center; aspect-ratio: 3 / 4; background: radial-gradient(circle at 50% 34%, #2b3c5c 0%, #141f36 58%, #0b1424 100%); border: 1px solid var(--line); border-radius: .2rem; color: var(--gold-dim); display: flex; flex-direction: column; gap: .6rem; justify-content: center; text-align: center; }
.closeup-frame .cf-glyph { font-size: 2.4rem; }
.closeup-frame .cf-note { color: var(--muted-2); font-size: .85rem; font-style: italic; padding: 0 1.4rem; }
.closeup-caption { color: var(--gold); font-size: .92rem; font-style: italic; margin-top: .7rem; }

/* overlay panels */
dialog.player-panel { background: var(--panel); border: 1px solid var(--line-strong); border-radius: .3rem; color: var(--text); min-width: 22rem; max-width: 34rem; padding: 1.1rem 1.3rem; }
dialog.player-panel::backdrop { background: rgba(4, 8, 16, .65); }
dialog.player-panel ol { margin: 0; padding-left: 1.2rem; }
dialog.player-panel li { color: var(--muted); font-size: .95rem; margin-bottom: .35rem; }
dialog.player-panel label { align-items: center; color: var(--muted); display: flex; font-size: .92rem; gap: .7rem; justify-content: space-between; margin-bottom: .55rem; }
dialog.player-panel input[type="range"] { accent-color: var(--gold); width: 11rem; }
dialog.player-panel .btn { margin-top: .5rem; }

@media (max-width: 1150px) { .player-grid { grid-template-columns: 1fr; } }