/* Story area, review mode, menu and settings. Loaded after game.css. */
:root { --txt-scale: 1.16; --txt-font: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --panel-a: .84; --txt-align: left; }

/* ---------- text box ---------- */
.dialog { --spk: #f2c55c; font-family: var(--txt-font); min-height: 10rem; max-height: min(52dvh, 24rem); padding: 1.6rem 1.8rem 1.4rem 1.7rem; background: linear-gradient(180deg, rgba(6,28,40,var(--panel-a)), rgba(2,12,18,var(--panel-a))); border: 1px solid rgba(242,197,92,.5); border-left: 5px solid var(--spk); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.dialog::before { border-color: color-mix(in srgb, var(--spk) 22%, transparent); }
.plate { color: var(--spk); border-color: var(--spk); font-family: var(--txt-font); font-weight: 700; font-size: clamp(.8rem, 1.6vw, .95rem); text-shadow: 0 0 10px color-mix(in srgb, var(--spk) 60%, transparent); }
.line { font-family: var(--txt-font); font-size: calc(clamp(1.05rem, 2.3vw, 1.32rem) * var(--txt-scale)); line-height: 1.7; text-align: var(--txt-align); text-shadow: 0 1px 2px rgba(0,0,0,.6); min-height: 5.2rem; max-height: calc(min(52dvh, 24rem) - 4rem); overflow-y: auto; padding-right: .6rem; scrollbar-width: thin; scrollbar-color: var(--line) transparent; white-space: pre-line; }
.line.narr { font-style: italic; color: #d6ece9; }
.line.sage { color: #b5f1f8; font-style: normal; border-left: 3px solid var(--teal); padding: .25rem .8rem; background: linear-gradient(90deg, rgba(63,214,200,.14), transparent 80%); border-radius: 2px; }
.line.you { color: #9ff0e6; }
.line.you::before { content: "You  "; font-size: .7em; letter-spacing: .2em; text-transform: uppercase; color: var(--teal); }
.line .q { color: #ffe9b5; }
.line .kw { color: var(--gold); font-weight: 700; text-shadow: 0 0 12px rgba(242,197,92,.45); }
.line .em { font-style: italic; color: #c3f3ec; }
.line .b { font-weight: 800; color: #fff; }
.line .loud { font-weight: 800; letter-spacing: .05em; color: #ffb680; text-shadow: 0 0 12px rgba(255,150,80,.4); }
.line .sg { color: #8fe9f6; font-style: italic; }
.line .sgl { display: inline-block; margin-right: .6em; padding: .02em .6em; border: 1px solid var(--teal); border-radius: 2px; background: rgba(63,214,200,.14); color: var(--teal); font-style: normal; font-weight: 800; font-size: .66em; letter-spacing: .2em; text-transform: uppercase; vertical-align: .12em; text-shadow: none; }
.log-entry .sg { color: #8fe9f6; font-style: italic; }
.log-entry .sgl { display: inline-block; margin-right: .5em; padding: 0 .5em; border: 1px solid var(--teal); border-radius: 2px; color: var(--teal); font-size: .7em; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; font-style: normal; }
.more { right: 1.1rem; bottom: .6rem; }
@media (max-width: 66rem) { .more { right: 3.4rem; } }

/* ---------- layout: pictures above, solid black text bar below ---------- */
:root { --dh: clamp(9.5rem, 24vh, 14.5rem); }
#stage { bottom: var(--dh); }
.actor { bottom: .2rem; }
.actor.speaking { transform: translateX(-50%) translateY(-.8vh); }
#dialog, #review { left: 0; right: 0; bottom: 0; width: auto; transform: none; height: var(--dh); min-height: 0; max-height: none; box-sizing: border-box;
  display: block; padding: 1.5rem max(1.6rem, calc((100% - 62rem) / 2)) .8rem; background: #000; border: 0; border-top: 2px solid var(--spk); border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
#dialog::before, #review::before { display: none; }
#review[hidden] { display: none; }
body:has(#game.show) #motes { clip-path: inset(0 0 var(--dh) 0); }
#dialog .plate, #review .plate { left: max(1.4rem, calc((100% - 62rem) / 2)); top: -1.15rem; background: #000; }
#dialog .line, #review .line { min-height: 0; max-height: calc(var(--dh) - 2.4rem); padding-right: 3.2rem; }
#dialog .more { right: 4rem; bottom: .6rem; }
#review { height: auto; min-height: var(--dh); padding-bottom: 4.4rem; border-top-color: var(--teal); }
#review .line { max-height: 40vh; }
#review .rv-bar { left: max(1.5rem, calc((100% - 62rem) / 2)); right: max(1.5rem, calc((100% - 62rem) / 2)); }
@media (max-width: 40rem) {
  :root { --dh: clamp(10.5rem, 30vh, 15rem); }
  #dialog, #review { padding: 1.4rem 1rem .6rem; }
  #dialog .plate, #review .plate { left: 1rem; }
  #dialog .line { padding-right: 1.8rem; }
  #dialog .more { right: 3.4rem; }
  #review .rv-bar { left: .8rem; right: .8rem; }
}

/* Debug button: bottom right of every screen */
#dbg-btn { position: fixed; right: .6rem; bottom: .6rem; z-index: 60; width: 2.3rem; height: 2.3rem; padding: 0; display: grid; place-items: center; border-radius: 50%; border: 1px solid rgba(242,197,92,.55); background: rgba(6,24,34,.82); color: var(--gold); cursor: pointer; opacity: .6; transition: opacity .2s, transform .2s, background .2s; }
#dbg-btn:hover, #dbg-btn:focus-visible, #dbg-btn.done { opacity: 1; transform: scale(1.08); background: rgba(10,44,58,.96); }
#dbg-btn .ico { width: 1.3rem; height: 1.3rem; }
#dbg-btn .dbg-tip { position: absolute; right: 2.8rem; bottom: .3rem; padding: .2rem .6rem; border-radius: 4px; background: var(--teal); color: #04121a; font-size: .78rem; font-weight: 800; letter-spacing: .08em; white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s; }
#dbg-btn.done .dbg-tip { opacity: 1; }
.dbg-fallback { position: fixed; inset: auto .8rem 3.6rem auto; width: min(26rem, calc(100vw - 1.6rem)); z-index: 70; padding: .8rem; background: rgba(4,18,26,.97); border: 1px solid var(--gold); border-radius: 6px; display: grid; gap: .5rem; color: var(--ink); font-size: .85rem; }
.dbg-fallback p { margin: 0; }
.dbg-fallback textarea { width: 100%; height: 10rem; background: #020b10; color: var(--ink); border: 1px solid var(--line); font: .72rem/1.4 ui-monospace, Menlo, Consolas, monospace; }

/* ---------- HUD buttons ---------- */
.chip { display: inline-flex; align-items: center; gap: .4rem; padding: .42rem .95rem; font-size: .9rem; background: rgba(4,18,26,.82); font-family: var(--font-display); }
.ico { width: 1.1rem; height: 1.1rem; flex: none; }
.chip .ico { width: 1.05rem; height: 1.05rem; }
#b-back { border-color: var(--teal); color: var(--teal); }
#b-back:hover, #b-back:focus-visible { background: var(--teal); color: #04121a; }
.chip-menu { background: linear-gradient(100deg, #ffe39a, #f2c55c 55%, #d39a2c); color: #1a1305; border-color: #f2c55c; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: .5rem 1.15rem; box-shadow: 0 0 18px rgba(242,197,92,.35); }
.chip-menu:hover, .chip-menu:focus-visible { color: #1a1305; filter: brightness(1.1); border-color: #fff3c0; }
.hud-btns { gap: .45rem; flex-wrap: wrap; }

/* ---------- review: read earlier lines ---------- */
.review { z-index: 10; cursor: default; padding-bottom: 4.2rem; border-color: var(--teal); border-style: solid; background: linear-gradient(180deg, rgba(5,30,42,.97), rgba(2,12,18,.98)); animation: rise .25s both; }
.review[hidden] { display: none; }
.review::after { content: "EARLIER"; position: absolute; top: -.62rem; right: 1.4rem; background: var(--teal); color: #04121a; font-size: .68rem; font-weight: 800; letter-spacing: .22em; padding: .12rem .6rem; font-family: var(--font-display); }
.rv-count { position: absolute; top: .6rem; right: 1.6rem; font-size: .75rem; letter-spacing: .14em; color: var(--ink-soft); }
.review .line { padding-top: .5rem; }
.rv-bar { position: absolute; left: 1.5rem; right: 1.5rem; bottom: .8rem; display: flex; gap: .5rem; align-items: center; }
.rbtn { background: rgba(10,38,52,.95); color: var(--ink); border: 1px solid var(--line); border-radius: 4px; padding: .5rem 1rem; font-size: .92rem; font-family: var(--font-display); letter-spacing: .05em; }
.rbtn:hover:not(:disabled), .rbtn:focus-visible { border-color: var(--gold); color: var(--gold); }
.rbtn:disabled { opacity: .35; cursor: not-allowed; }
.rbtn.go { margin-left: auto; background: linear-gradient(100deg, #ffe39a, #f2c55c); color: #1a1305; border-color: #f2c55c; font-weight: 700; }
.rbtn.go:hover { color: #1a1305; filter: brightness(1.08); }
.reread { margin-top: .8rem; background: transparent; border: 1px dashed var(--teal); color: var(--teal); padding: .55rem 1.2rem; border-radius: 999px; font-size: .95rem; letter-spacing: .06em; font-family: var(--font-display); }
.reread:hover, .reread:focus-visible { background: var(--teal); color: #04121a; }

/* ---------- overlays ---------- */
.overlay.menu .panel { width: min(30rem, 100%); }
.overlay.settings .panel { width: min(42rem, 100%); }
.overlay.menu .panel-head h2 { letter-spacing: .3em; }
.overlay.menu .panel-body { display: grid; gap: .8rem; }

.m-resume { display: flex; align-items: center; gap: 1rem; padding: 1.1rem 1.3rem; border: 0; border-radius: 4px; background: linear-gradient(100deg, #ffe39a, #f2c55c 50%, #d39a2c); color: #1a1305; text-align: left; box-shadow: 0 0 28px rgba(242,197,92,.3); transition: transform .15s, filter .15s; }
.m-resume:hover, .m-resume:focus-visible { transform: translateY(-2px); filter: brightness(1.08); }
.m-resume .ico { width: 2rem; height: 2rem; }
.m-resume span { display: grid; line-height: 1.15; }
.m-resume strong { font-size: 1.35rem; letter-spacing: .08em; text-transform: uppercase; }
.m-resume small { opacity: .7; letter-spacing: .12em; }
.m-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.m-tile { display: grid; justify-items: start; gap: .15rem; padding: .9rem 1rem; min-height: 5.6rem; text-align: left; color: var(--ink); background: linear-gradient(180deg, #0b2d3d, #071b27); border: 1px solid var(--line); border-radius: 4px; transition: transform .15s, border-color .15s; font-family: var(--font-display); }
.m-tile .ico { width: 1.6rem; height: 1.6rem; color: var(--teal); margin-bottom: .2rem; }
.m-tile strong { font-size: 1.05rem; letter-spacing: .04em; }
.m-tile small { color: var(--ink-soft); font-size: .78rem; }
.m-tile:hover, .m-tile:focus-visible { transform: translateY(-2px); border-color: var(--gold); }
.m-tile:hover .ico { color: var(--gold); }
.m-home { display: flex; align-items: center; justify-content: center; gap: .6rem; padding: .85rem 1rem; background: transparent; border: 1px solid #7a4a52; color: #ffb4b4; border-radius: 4px; letter-spacing: .06em; font-family: var(--font-display); font-size: 1rem; }
.m-home:hover, .m-home:focus-visible { background: rgba(122,40,52,.35); border-color: #ff8f8f; }

.preview { position: relative; left: auto; bottom: auto; transform: none; width: auto; margin: 1rem 0 1.2rem; min-height: 0; cursor: default; max-height: none; }
.preview .line { min-height: 0; }
.set-row { display: grid; gap: .35rem; margin-bottom: .9rem; }
.set-label { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.set-row small { color: var(--ink-soft); }
.seg { display: flex; flex-wrap: wrap; gap: .4rem; }
.seg button { padding: .5rem .95rem; background: #071b27; border: 1px solid var(--line); border-radius: 4px; color: var(--ink); font-family: var(--font-display); font-size: .95rem; }
.seg button:hover { border-color: var(--gold); }
.seg button[aria-pressed="true"] { background: var(--gold); color: #1a1305; border-color: var(--gold); font-weight: 700; }
.set-foot { display: flex; gap: .6rem; margin-top: 1rem; }

.log-entry { border-left: 3px solid var(--spk, var(--line)); padding: .1rem 0 .1rem .8rem; font-size: 1.02rem; }
.log-entry b { color: var(--spk, var(--gold)); }
.log-entry.nar .log-text { font-style: italic; color: #cfe6e4; }
.log-entry.sage .log-text { color: #b5f1f8; }
.log-entry.you { border-left-color: var(--teal); }
.log-entry.you .log-text { color: #9ff0e6; }
.log-entry .q { color: #ffe9b5; } .log-entry .kw { color: var(--gold); font-weight: 700; } .log-entry .em { font-style: italic; } .log-entry .b { font-weight: 800; color: #fff; } .log-entry .loud { color: #ffb680; font-weight: 800; } .log-entry .sg { color: #8fe9f6; font-style: italic; }

@media (max-width: 40rem) {
  .dialog { min-height: 8.8rem; padding: 1.3rem 1rem 1.1rem 1rem; }
  .line { min-height: 4.4rem; max-height: calc(min(52dvh, 24rem) - 3.6rem); }
  .chip { font-size: 0; gap: 0; padding: .45rem .6rem; }
  .chip .ico { width: 1.15rem; height: 1.15rem; }
  .chip-menu { font-size: .8rem; gap: .35rem; padding: .45rem .8rem; }
  .review { padding-bottom: 4rem; }
  .rv-bar { left: .8rem; right: .8rem; }
  .rbtn { padding: .5rem .75rem; font-size: .85rem; }
  .m-tile { min-height: 5rem; }
}