/* Adventure Screen.dc.html, adapted to the live adventure DOM. */
html[data-sv-adventure-active="1"], #app-view.sv-adventure {
  --ember:var(--sv-violet-bright); --ember-dk:var(--sv-violet); --ember-deep:var(--sv-violet-deep);
  --ink:var(--sv-text); --ink-soft:var(--sv-text-soft); --ink-mute:var(--sv-text-muted); --ink-dim:var(--sv-text-dim);
  --line:rgba(var(--sv-accent-rgb),.28); --line-soft:rgba(var(--sv-accent-rgb),.18);
  --disp:'Cinzel',Georgia,serif; --serif:'Cormorant Garamond',Georgia,serif;
  --mono:'JetBrains Mono',monospace;
}
#app-view.sv-adventure { position:fixed; inset:0; width:auto; height:auto; min-height:0; padding:0; isolation:isolate; overflow:hidden; color:var(--sv-text); background:var(--sv-bg) radial-gradient(ellipse 90% 70% at 50% -10%,var(--sv-violet-ground),var(--sv-bg) 70%) no-repeat; font-family:var(--serif); }
#app-view.sv-adventure.hidden { display:none; }
#app-view.sv-adventure > .bgfx, #app-view.sv-adventure > .hearth, #app-view.sv-adventure > #embers, #app-view.sv-adventure > .vig, #app-view.sv-adventure > .scan { display:none; }
.sv-adventure-sky { position:absolute; inset:0; opacity:.32; pointer-events:none; }
#app-view.sv-adventure::after { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background:radial-gradient(ellipse at 50% 50%,rgba(var(--sv-ground-rgb),.2) 30%,rgba(var(--sv-ground-rgb),.82) 100%); }
#app-view.sv-adventure .chrome { position:relative; z-index:2; width:100%; height:100%; display:flex; flex-direction:column; min-height:0; overflow:hidden; padding:0; transform-origin:50% 40%; transition:transform .55s cubic-bezier(.22,1,.36,1),filter .55s ease; }
html[data-sv-memory-open="1"] #app-view.sv-adventure .chrome { transform:translateY(-14px) scale(.965); filter:blur(6px) brightness(.55); pointer-events:none; }
#app-view.sv-adventure .topbar { height:64px; min-height:64px; flex:0 0 auto; gap:12px; padding:0 clamp(14px,2.4vw,32px); border-bottom:1px solid var(--line-soft); background:rgba(var(--sv-ground-rgb),.55); backdrop-filter:blur(10px); box-sizing:border-box; }
#app-view.sv-adventure .iconbtn, #app-view.sv-adventure .chipbtn { border-color:var(--line); color:var(--ink-mute); background:rgba(var(--sv-plum-rgb),.35); }
#app-view.sv-adventure .iconbtn.round { width:36px; height:36px; min-width:36px; display:grid; place-items:center; padding:0; }
.sv-adventure-brand { font-family:var(--disp); font-size:14px; font-weight:700; letter-spacing:.24em; white-space:nowrap; }
#app-view.sv-adventure .sv-title-wrap { border-left:1px solid var(--line); padding-left:18px; gap:10px !important; flex:0 1 auto; }
#app-view.sv-adventure #adventure-title { color:var(--ember) !important; font-size:13px !important; letter-spacing:.12em !important; text-shadow:none !important; max-width:22vw !important; }
#app-view.sv-adventure .sv-title-wrap > span:first-child { display:none; }
#app-view.sv-adventure #adv-act-chip { font-size:9px !important; letter-spacing:.1em !important; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
#app-view.sv-adventure .sv-home-link { color:var(--ink-mute); border:1px solid rgba(var(--sv-accent-rgb),.35); border-radius:999px; background:rgba(var(--sv-plum-rgb),.5); padding:9px 16px; white-space:nowrap; font:10px var(--mono); letter-spacing:.2em; text-transform:uppercase; cursor:pointer; }
#app-view.sv-adventure .sv-context-meter { margin-left:auto; }
#app-view.sv-adventure #ctx-meter { font-size:9px !important; letter-spacing:.08em !important; }
#app-view.sv-adventure #adv-tk-fill { background:linear-gradient(90deg,var(--sv-violet-deep),var(--sv-violet-bright)) !important; }
#app-view.sv-adventure #memory-btn { display:inline-flex; align-items:center; justify-content:center; gap:9px; color:var(--ink); padding:9px 12px; border:1px solid rgba(var(--sv-glow-rgb),.55); border-radius:999px; font:10px var(--mono); letter-spacing:.15em; text-transform:uppercase; box-shadow:0 0 20px -10px var(--sv-violet-bright); background:rgba(var(--sv-plum-rgb),.65); }
.sv-memory-count { color:var(--ink-dim); border-left:1px solid var(--line); padding-left:9px; font-size:9px; }
#app-view.sv-adventure #adv-settings-top { display:grid; }
#app-view.sv-adventure #party-btn { display:none; }
#app-view.sv-adventure .sv-account-chip { width:34px; height:34px; flex:0 0 34px; border:0; border-radius:50%; display:grid; place-items:center; background:linear-gradient(180deg,var(--sv-violet-bright),var(--sv-violet-deep)); color:var(--sv-bg); font:700 13px var(--disp); cursor:pointer; padding:0; }
#app-view.sv-adventure .mid { display:grid; grid-template-columns:clamp(220px,20.8vw,300px) minmax(0,1fr) clamp(270px,22.2vw,320px); grid-template-rows:minmax(0,1fr); gap:0; flex:1; min-height:0; padding:0; overflow:hidden; }
#app-view.sv-adventure .chron-col { display:block; position:relative; width:auto; min-width:0; min-height:0; overflow:hidden; margin:0; flex:none; }
#app-view.sv-adventure .chron-col::before { content:""; position:absolute; left:-10%; right:-10%; bottom:-6%; height:60%; background:radial-gradient(ellipse at 50% 90%,rgba(var(--sv-deep-rgb),.28),transparent 65%); pointer-events:none; }
#app-view.sv-adventure #lich-scribe, #app-view.sv-adventure .sv-lich-video { position:absolute; left:50%; bottom:0; right:auto; top:auto; transform:translateX(-50%); width:118%; max-width:420px; height:auto; max-height:95%; object-fit:contain; object-position:bottom; pointer-events:none; filter:saturate(.55) sepia(.6) hue-rotate(212deg) brightness(.72) contrast(1.15); -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.45) 72%,rgba(0,0,0,.1) 88%,transparent 96%); mask-image:linear-gradient(180deg,#000 0%,#000 50%,rgba(0,0,0,.45) 72%,rgba(0,0,0,.1) 88%,transparent 96%); }
#app-view.sv-adventure #lich-scribe { display:block; opacity:.65; }
#app-view.sv-adventure .sv-lich-video { opacity:0; }
#app-view.sv-adventure .sv-lich-video.is-visible { opacity:1; }
#app-view.sv-adventure .sv-video-ready #lich-scribe { opacity:0; }
#app-view.sv-adventure .nameplate { position:absolute; left:22px; right:22px; bottom:18px; width:auto; padding:11px 10px 10px; box-sizing:border-box; background:rgba(var(--sv-night-rgb),.82); border:1px solid rgba(var(--sv-accent-rgb),.4); box-shadow:inset 0 0 0 3px var(--sv-bg),inset 0 0 0 4px rgba(var(--sv-accent-rgb),.14); backdrop-filter:blur(6px); text-align:center; }
#app-view.sv-adventure .nameplate > div:first-of-type { font-size:12px !important; letter-spacing:.17em !important; }
#app-view.sv-adventure .chron-state { font-size:8px !important; letter-spacing:.15em !important; }
#app-view.sv-adventure .np-pip, #app-view.sv-adventure .pip { display:none; }
#app-view.sv-adventure .tale-panel, #app-view.sv-adventure #ledger-panel { position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; width:auto !important; margin:14px 6px !important; background:rgba(var(--sv-night-rgb),.55) !important; border:1px solid rgba(var(--sv-accent-rgb),.28) !important; border-radius:0; box-shadow:inset 0 0 0 4px var(--sv-bg),inset 0 0 0 5px rgba(var(--sv-accent-rgb),.12),0 30px 80px -40px rgba(0,0,0,.9) !important; }
#app-view.sv-adventure #ledger-panel { margin:14px 14px 14px 6px !important; overflow-y:auto; }
#app-view.sv-adventure .panel-h { display:flex; flex:0 0 auto; align-items:center; padding:12px 22px; border-bottom:1px solid rgba(var(--sv-accent-rgb),.2); background:transparent; }
#app-view.sv-adventure .panel-h .t { color:var(--ember-dk); font:700 12px var(--disp); letter-spacing:.3em; }
#app-view.sv-adventure .panel-h .rule { background:linear-gradient(90deg,rgba(var(--sv-accent-rgb),.4),transparent); }
#app-view.sv-adventure .panel-h .meta { color:var(--ink-dim); font:9px var(--mono); letter-spacing:.18em; }
#app-view.sv-adventure .story-body { display:flex; flex:1; min-height:0; min-width:0; overflow:hidden; background:transparent; }
#app-view.sv-adventure #story-log { background:transparent; }
#app-view.sv-adventure #story-log { padding:28px clamp(20px,2.8vw,40px) 24px !important; min-height:0; min-width:0; width:100%; overflow-y:auto; overflow-x:hidden; scrollbar-width:thin; scrollbar-color:rgba(var(--sv-accent-rgb),.3) transparent; box-sizing:border-box; }
#app-view.sv-adventure #story-log .turn { max-width:var(--read-width,760px); margin-left:auto; margin-right:auto; overflow-wrap:anywhere; }
/* Narration. `--read-font` is the player's Settings choice; the fallback is the
   reading face, not Cormorant, so this agrees with .adv2 in styles.css before
   applyReading() has run. The weight lifts a screen serif off a dark ground. */
#app-view.sv-adventure #story-log .turn.assistant, #app-view.sv-adventure #story-log .narr { color:var(--sv-text-soft); font-size:var(--sv-story-size,19px); font-family:var(--read-font,'Literata',Georgia,serif); font-weight:var(--read-weight,430); line-height:var(--read-line,1.8); letter-spacing:.004em; }
#app-view.sv-adventure #story-log .turn.user { color:var(--sv-violet-bright); border-color:var(--line); background:rgba(var(--sv-plum-rgb),.3); }
#app-view.sv-adventure #story-log .turn.assistant:first-child .narr:first-child::first-letter { color:var(--ember); }
#app-view.sv-adventure #story-log .turn-controls { border-color:var(--line-soft); gap:8px; flex-wrap:wrap; }
#app-view.sv-adventure #story-log .turn-controls button { color:var(--ink-dim); background:rgba(var(--sv-accent-rgb),.04); border:1px solid var(--line); border-radius:6px; }
#app-view.sv-adventure .roll-card { background:rgba(var(--sv-plum-rgb),.5); border-color:var(--line); }
#app-view.sv-adventure .sv-tale-tools { display:flex; align-items:center; flex-wrap:wrap; gap:10px; padding:7px 20px 5px; border-top:1px solid rgba(var(--sv-accent-rgb),.15); flex:0 0 auto; }
.sv-narration-status { flex:1; color:var(--ink-dim); font:8px var(--mono); letter-spacing:.09em; }
#app-view.sv-adventure .sv-tale-tools button, #app-view.sv-adventure .sv-link-button { height:auto; width:auto; min-width:0; padding:4px 2px; border:0; border-radius:0; background:none; color:var(--ink-mute); font:9px var(--mono); letter-spacing:.04em; text-transform:none; box-shadow:none; cursor:pointer; }
#app-view.sv-adventure .sv-tale-tools #app-cost-btn svg { width:13px; height:13px; }
#app-view.sv-adventure .cmdbar { display:flex; position:relative; flex:0 0 auto; min-height:0; padding:10px 20px 18px; margin:0; gap:10px; flex-wrap:nowrap; align-items:center; background:none; border:0; box-sizing:border-box; }
#app-view.sv-adventure .cmdbar::after { display:none; }
#app-view.sv-adventure .sv-mode-chooser { position:relative; flex:0 0 auto; order:0; }
#app-view.sv-adventure .sv-mode-toggle { display:flex; align-items:center; gap:10px; height:56px; padding:0 12px; border:1px solid rgba(var(--sv-glow-rgb),.5); border-radius:10px; background:rgba(var(--sv-plum-rgb),.7); color:var(--ink); font:10px var(--mono); letter-spacing:.15em; text-transform:uppercase; cursor:pointer; }
.sv-mode-icon { display:grid; place-items:center; width:26px; height:26px; flex:0 0 26px; border:1px solid rgba(var(--sv-accent-rgb),.4); border-radius:6px; color:var(--ember); font:600 18px var(--serif); }
.sv-mode-toggle > .sv-mode-icon { background:linear-gradient(180deg,var(--sv-violet-bright),var(--sv-violet-deep)); color:var(--sv-bg); border:0; }
.sv-mode-name, .sv-mode-sub { display:block; text-align:left; }
.sv-mode-sub { margin-top:4px; color:var(--ink-dim); font-size:8px; letter-spacing:.08em; }
.sv-mode-chevron { color:var(--ink-dim); }
.sv-mode-menu { position:absolute; bottom:calc(100% + 10px); left:0; z-index:30; width:300px; max-width:calc(100vw - 32px); padding:8px; background:var(--sv-tint-night); border:1px solid rgba(var(--sv-accent-rgb),.45); box-shadow:inset 0 0 0 3px var(--sv-bg),inset 0 0 0 4px rgba(var(--sv-accent-rgb),.12),0 30px 70px -30px #000; }
.sv-mode-menu[hidden] { display:none; }
.sv-mode-menu > p { color:var(--ink-dim); font:8px var(--mono); text-transform:uppercase; letter-spacing:.2em; padding:6px 10px; margin:0 0 4px; }
#app-view.sv-adventure .sv-mode-option { display:flex; align-items:center; gap:10px; width:100%; padding:10px; border:1px solid transparent; border-radius:8px; background:transparent; color:var(--ink); cursor:pointer; text-align:left; }
#app-view.sv-adventure .sv-mode-option:hover, #app-view.sv-adventure .sv-mode-option[aria-checked="true"] { border-color:var(--line); background:rgba(var(--sv-accent-rgb),.12); }
.sv-mode-description { flex:1; }
.sv-mode-description strong { display:block; font:10px var(--mono); letter-spacing:.15em; text-transform:uppercase; }
.sv-mode-description > span { display:block; color:var(--ink-mute); font:italic 15px var(--serif); margin-top:3px; }
.sv-mode-option kbd { color:var(--ink-dim); border:1px solid var(--line); border-radius:4px; padding:2px 5px; font:9px var(--mono); }
/* The two ways to reach a mode sit together at the end of its row: the digit
   (its place in this list) and Shift plus its initial. */
.sv-mode-keys { display:flex; gap:4px; flex:0 0 auto; }
#app-view.sv-adventure #input-box { order:1; flex:1; width:0; min-width:0; height:56px; min-height:56px; max-height:150px; box-sizing:border-box; padding:9px 14px; border:1px solid rgba(var(--sv-accent-rgb),.3); border-radius:10px; background:rgba(var(--sv-ground-rgb),.6); color:var(--ink); font-family:var(--read-font,'Literata',Georgia,serif); font-style:normal; font-size:17px; line-height:1.55; resize:vertical; }
/* Only the PROMPT is italic now; what the player types is upright, because
   italic Cormorant at 17px was the hardest text in the app to read back. */
#app-view.sv-adventure #input-box::placeholder { font-style:italic; opacity:.75; }
/* The die button is the die: a square that matches the send button's height,
   with the wireframe d20 centred in it and no caption. The label is kept in the
   DOM for its accessible name but never drawn. */
#app-view.sv-adventure #roll-btn { order:2; position:relative; display:flex; align-items:center; justify-content:center; gap:0; flex:0 0 56px; width:56px; height:56px; padding:0; border:1px solid rgba(var(--sv-accent-rgb),.45); border-radius:10px; background:rgba(var(--sv-accent-rgb),.05); transition:border-color .16s ease, background .16s ease, box-shadow .16s ease; }
#app-view.sv-adventure #roll-btn:hover:not(:disabled) { border-color:var(--sv-violet-bright); background:var(--sv-fill-hover); box-shadow:0 0 22px -8px rgba(var(--sv-accent-rgb),.65); }
#app-view.sv-adventure #roll-btn > span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
#app-view.sv-adventure #roll-btn > span:first-child,
#app-view.sv-adventure #roll-die,
#app-view.sv-adventure #roll-die canvas { width:40px !important; height:40px !important; }
#app-view.sv-adventure #roll-die { color:var(--sv-violet-bright); }
#app-view.sv-adventure #send-btn { order:3; height:56px; flex:0 0 auto; padding:0 18px; border:1px solid var(--sv-violet-deep); border-radius:10px; color:var(--sv-bg); background:linear-gradient(180deg,var(--sv-violet-bright),var(--sv-violet-deep)); font:10px var(--mono); letter-spacing:.16em; text-transform:uppercase; cursor:pointer; box-shadow:0 8px 24px -10px rgba(var(--sv-accent-rgb),.6); }
#app-view.sv-adventure #roll-required { position:absolute; bottom:100%; left:12px; right:12px; width:auto; max-width:calc(100% - 24px); transform:none; z-index:10; padding:10px 14px; color:var(--ink); background:var(--sv-plum-solid); border:1px solid var(--ember-dk); border-radius:8px; font-size:14px; }
#app-view.sv-adventure #roll-required.hidden { display:none; }
#app-view.sv-adventure .sv-ledger-tabs { display:flex; flex:0 0 auto; gap:4px; padding:8px 14px 0; border-bottom:1px solid var(--line-soft); }
#app-view.sv-adventure .sv-ledger-tabs button { flex:1; padding:10px 4px; border:0; border-bottom:2px solid transparent; background:none; color:var(--ink-dim); font:9px var(--mono); text-transform:uppercase; letter-spacing:.13em; cursor:pointer; }
#app-view.sv-adventure .sv-ledger-tabs button[aria-selected="true"] { border-bottom-color:var(--ember); color:var(--ember); }
#app-view.sv-adventure .led-sec { padding:18px; border-color:var(--line-soft); }
#app-view.sv-adventure .led-sec[hidden] { display:none; }
#app-view.sv-adventure .led-k { color:var(--ink-dim); font:9px var(--mono); letter-spacing:.2em; text-transform:uppercase; margin-bottom:12px; }
#app-view.sv-adventure #led-adv-avatar { background:linear-gradient(180deg,var(--sv-violet-bright),var(--sv-violet-deep)) !important; color:var(--sv-bg) !important; }
#app-view.sv-adventure .sv-plot-note { border:1px solid var(--line); margin-bottom:12px; padding:14px; background:rgba(var(--sv-plum-rgb),.3); }
.sv-plot-note h3 { font:600 13px var(--disp); letter-spacing:.05em; color:var(--ink); margin:0 0 10px; }
.sv-plot-note p { color:var(--ink-mute); white-space:pre-wrap; overflow-wrap:anywhere; font:16px/1.5 var(--serif); margin:0 0 8px; }
.sv-empty { color:var(--ink-dim); font:italic 17px/1.5 var(--serif); }
#app-view.sv-adventure .sv-ledger-close, #app-view.sv-adventure .sv-ledger-backdrop { display:none; }
#app-view.sv-adventure button:focus-visible, #app-view.sv-adventure textarea:focus-visible { outline:2px solid var(--sv-violet-bright); outline-offset:3px; }
#app-view.sv-adventure button:disabled { opacity:.45; cursor:wait; }
#app-view.sv-adventure button:hover:not(:disabled) { filter:brightness(1.12); }
html[data-sv-adventure-active="1"] #fateCheck { background:radial-gradient(circle 58vmax at 50% 46%,rgba(var(--sv-plum-rgb),.9),rgba(var(--sv-tint-abyss-rgb),.97)); }
html[data-sv-adventure-active="1"] #fateCheck .fate-title, html[data-sv-adventure-active="1"] #fateNum { color:var(--sv-violet-bright); text-shadow:0 0 30px rgba(var(--sv-glow-rgb),.5); }
html[data-sv-adventure-active="1"] #fateDie { filter:drop-shadow(0 0 18px rgba(var(--sv-glow-rgb),.35)); }
html[data-sv-adventure-active="1"] #fateDc, html[data-sv-adventure-active="1"] #fateMath { color:var(--sv-text-muted); }
html[data-sv-adventure-active="1"] #fateStatus { color:var(--sv-text-dim); }
html[data-sv-adventure-active="1"] #fateCheck .rule-l { background:linear-gradient(90deg,transparent,rgba(var(--sv-glow-rgb),.55)); }
html[data-sv-adventure-active="1"] #fateCheck .rule-r { background:linear-gradient(90deg,rgba(var(--sv-glow-rgb),.55),transparent); }
html[data-sv-adventure-active="1"] .modal-content { background:var(--sv-tint-plum4); border-color:rgba(var(--sv-accent-rgb),.4); color:var(--sv-text); }
html[data-sv-adventure-active="1"] .modal-content button, html[data-sv-adventure-active="1"] .modal-content input, html[data-sv-adventure-active="1"] .modal-content textarea, html[data-sv-adventure-active="1"] .modal-content select { border-color:rgba(var(--sv-accent-rgb),.35); }
@media (min-width:1500px) { #app-view.sv-adventure .sv-home-link { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); } }
@media (max-width:1200px) {
  #app-view.sv-adventure .mid { grid-template-columns:190px minmax(0,1fr) 260px; }
  #app-view.sv-adventure .sv-title-wrap #adv-act-chip { display:none; }
  #app-view.sv-adventure .sv-title-wrap { padding-left:10px; }
  #app-view.sv-adventure .sv-account-chip { display:none; }
  #app-view.sv-adventure .cmdbar { padding:10px 12px 14px; gap:7px; }
  #app-view.sv-adventure .sv-mode-toggle { padding:0 9px; gap:6px; }
  #app-view.sv-adventure .sv-mode-toggle .sv-mode-sub, #app-view.sv-adventure .sv-mode-toggle .sv-mode-chevron { display:none; }
  #app-view.sv-adventure #send-btn { padding:0 12px; }
  #app-view.sv-adventure .nameplate { left:10px; right:10px; }
  #app-view.sv-adventure .nameplate > div:first-of-type { font-size:10px !important; }
}
@media (max-width:960px) {
  #app-view.sv-adventure .mid { grid-template-columns:minmax(0,1fr); }
  #app-view.sv-adventure .chron-col { display:none; }
  #app-view.sv-adventure #ledger-panel { display:none; }
  #app-view.sv-adventure #party-btn { display:flex !important; align-items:center; justify-content:center; width:36px; height:36px; min-width:36px; padding:0; border-radius:50%; }
  #app-view.sv-adventure #party-btn span { display:none; }
  #app-view.sv-adventure .sv-title-wrap { flex:1; min-width:0; }
  #app-view.sv-adventure #adventure-title { max-width:100% !important; }
  #app-view.sv-adventure .sv-home-link, #app-view.sv-adventure .sv-context-meter { display:none !important; }
  #app-view.sv-adventure .tale-panel { margin:12px !important; }
  #app-view.sv-adventure[data-ledger-open="1"] #ledger-panel { display:flex; position:absolute; z-index:51; top:8px; right:0; bottom:8px; width:min(380px,calc(100% - 24px)) !important; margin:0 12px !important; background:var(--sv-tint-night) !important; }
  #app-view.sv-adventure[data-ledger-open="1"] .sv-ledger-backdrop { display:block; position:absolute; inset:0; z-index:50; background:rgba(var(--sv-ground-rgb),.7); border:0; }
  #app-view.sv-adventure .sv-ledger-close { display:block; margin-left:auto; color:var(--ink-mute); background:none; border:0; width:32px; height:32px; cursor:pointer; }
}
@media (max-width:600px) {
  #app-view.sv-adventure .topbar { height:58px; min-height:58px; padding:0 10px; gap:7px; }
  #app-view.sv-adventure .sv-adventure-brand { font-size:11px; letter-spacing:.16em; }
  #app-view.sv-adventure .sv-title-wrap { display:none !important; }
  #app-view.sv-adventure #memory-btn { width:auto; flex:0 0 auto; margin-left:auto; font-size:9px; gap:6px; padding:8px; }
  #app-view.sv-adventure #memory-btn span { display:inline; }
  #app-view.sv-adventure #memory-btn .sv-memory-count { display:none; }
  #app-view.sv-adventure .tale-panel { margin:7px !important; }
  #app-view.sv-adventure .panel-h { padding:10px 14px; }
  #app-view.sv-adventure .tale-panel .panel-h { display:flex; }
  #app-view.sv-adventure #story-log { padding:20px 18px !important; }
  #app-view.sv-adventure .sv-tale-tools { padding:7px 12px 4px; gap:10px; }
  #app-view.sv-adventure .sv-narration-status { display:none; }
  #app-view.sv-adventure .sv-tale-tools #continue-btn { flex:none; padding:4px 2px; order:0; }
  #app-view.sv-adventure .cmdbar { padding:8px 10px calc(10px + env(safe-area-inset-bottom)); display:grid; grid-template-columns:minmax(0,1fr) 52px 78px; gap:8px; }
  #app-view.sv-adventure #input-box { grid-column:1 / -1; grid-row:1; width:100%; min-height:56px; font-size:18px; order:0; }
  #app-view.sv-adventure .sv-mode-chooser { grid-column:1; grid-row:2; }
  #app-view.sv-adventure .sv-mode-toggle { width:100%; height:44px; justify-content:flex-start; }
  #app-view.sv-adventure .sv-mode-chevron { display:block; margin-left:auto; }
  #app-view.sv-adventure #roll-btn { grid-column:2; grid-row:2; width:52px; height:44px; }
  #app-view.sv-adventure #roll-btn > span:first-child, #app-view.sv-adventure #roll-die, #app-view.sv-adventure #roll-die canvas { width:32px !important; height:32px !important; }
  #app-view.sv-adventure #send-btn { grid-column:3; grid-row:2; height:44px; padding:0 8px; }
}
@media (max-width:360px) { #app-view.sv-adventure .sv-adventure-brand { display:none; } }
@media (max-height:480px) and (max-width:960px) {
  #app-view.sv-adventure .topbar { height:44px; min-height:44px; }
  #app-view.sv-adventure .tale-panel .panel-h { display:none; }
  #app-view.sv-adventure .sv-tale-tools { display:flex; flex-wrap:nowrap; justify-content:flex-end; padding:3px 10px; gap:10px; }
  #app-view.sv-adventure .sv-narration-status { display:none; }
  #app-view.sv-adventure .cmdbar { padding:6px 10px; }
}
@media (prefers-reduced-motion:reduce) { #app-view.sv-adventure *, #app-view.sv-adventure *::before { animation:none !important; transition:none !important; } }
html[data-reduce-motion="1"] #app-view.sv-adventure *, html[data-reduce-motion="1"] #app-view.sv-adventure *::before { animation:none !important; transition:none !important; }

#app-view.sv-adventure #story-log .turn.turn-failure { font:14px/1.5 var(--mono); padding:14px; border:1px solid var(--line); border-radius:8px; background:rgba(var(--sv-plum-rgb),.5); }

/* Lichy's Suggestion, in the violet adventure palette. Kept deliberately
   quiet so it reads as a footnote to the story, not a second panel. */
#app-view .lichy-suggest {
  margin:0 0 8px; padding:7px 11px 6px;
  border:1px solid var(--sv-line-soft); border-radius:var(--sv-r-sm);
  background:color-mix(in srgb, var(--sv-panel-soft) 55%, transparent);
}
#app-view .lichy-suggest .lsug-title {
  font:8.5px var(--sv-font-mono); letter-spacing:.18em;
  text-transform:uppercase; color:var(--sv-text-dim); opacity:.85;
}
#app-view .lichy-suggest .lsug-icon { color:var(--sv-text-dim); background:transparent; }
#app-view .lichy-suggest .lsug-icon:hover:not(:disabled) {
  background:var(--sv-fill-hover); color:var(--sv-violet-bright); opacity:1;
}
#app-view .lichy-suggest .lsug-item:hover { background:var(--sv-fill-hover); }
#app-view .lichy-suggest .lsug-tag { font:8px var(--sv-font-mono); letter-spacing:.14em; color:var(--sv-violet); }
#app-view .lichy-suggest .lsug-item:hover .lsug-tag { color:var(--sv-violet-bright); }
#app-view .lichy-suggest .lsug-text { font-family:var(--sv-font-body); color:var(--sv-text-dim); }
#app-view .lichy-suggest .lsug-item:hover .lsug-text { color:var(--sv-text-muted); }
#app-view .lichy-suggest .lsug-state { font-family:var(--sv-font-body); color:var(--sv-text-dim); }
#app-view .lichy-suggest .lsug-show {
  border:1px solid var(--sv-line-soft); color:var(--sv-text-dim);
  font-family:var(--sv-font-mono); letter-spacing:.16em;
}
#app-view .lichy-suggest .lsug-show:hover {
  color:var(--sv-violet-bright); border-color:var(--sv-line-2); background:var(--sv-fill-hover);
}
#app-view .lichy-suggest .lsug-item:focus-visible,
#app-view .lichy-suggest .lsug-icon:focus-visible,
#app-view .lichy-suggest .lsug-show:focus-visible { outline:2px solid var(--sv-violet-bright); outline-offset:2px; }
@media (max-width:700px) {
  /* 44px rows to match the tap-target standard the rest of the V2 UI uses. */
  #app-view .lichy-suggest .lsug-item { min-height:44px; }
}

/* Opening briefing, in the violet adventure palette. */
#app-view .story-brief {
  border:1px solid var(--sv-line-soft); border-left:2px solid var(--sv-violet);
  border-radius:var(--sv-r-md); background:var(--sv-panel-soft);
}
#app-view .story-brief .sb-title {
  font:var(--sv-label-size) var(--sv-font-mono); letter-spacing:var(--sv-label-tracking); color:var(--sv-violet-bright);
}
#app-view .story-brief .sb-toggle { font-family:var(--sv-font-mono); color:var(--sv-text-dim); }
#app-view .story-brief .sb-toggle:hover { color:var(--sv-violet-bright); }
#app-view .story-brief .sb-toggle:focus-visible { outline:2px solid var(--sv-violet-bright); outline-offset:3px; }
#app-view .story-brief dt { font-family:var(--sv-font-mono); color:var(--sv-text-dim); }
#app-view .story-brief dd { font-family:var(--sv-font-body); color:var(--sv-text-muted); }

/* Turn in progress — the die the reader waits on, in the violet palette. */
#app-view .turn-wait { padding:30px 0 34px; }
#app-view .turn-wait-label {
  font:var(--sv-label-size) var(--sv-font-mono); letter-spacing:var(--sv-label-tracking);
  text-transform:uppercase; color:var(--sv-text-dim);
}

/* ---------- Token meter, violet theme --------------------------------------
   The meter is the legacy modal reused inside the v2 UI, so it arrived carrying
   the amber palette. This restyles it onto the Living Memory design system:
   glass backdrop, gem-inset frame, display numerals, violet gradients. */
html[data-ui-v2] #tokens-modal {
  background: rgba(var(--sv-ground-rgb), .72);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
html[data-ui-v2] #tokens-modal .modal-content {
  width: min(960px, 94vw); max-width: min(960px, 94vw);
  max-height: min(88vh, 900px);
  padding: clamp(20px, 3vw, 30px);
  background: linear-gradient(180deg, rgba(var(--sv-plum-rgb), .92), rgba(var(--sv-ground-rgb), .97));
  border: 1px solid var(--sv-line-strong);
  border-radius: 14px;
  box-shadow: var(--sv-shadow-pop), inset 0 0 0 4px var(--sv-bg), inset 0 0 0 5px rgba(var(--sv-accent-rgb), .14);
  color: var(--sv-text);
}
html[data-ui-v2] #tokens-modal h3 {
  margin: 0 0 18px;
  font-family: var(--sv-font-display); font-weight: 600;
  font-size: clamp(17px, 2vw, 22px); letter-spacing: .02em; color: var(--sv-text);
}

html[data-ui-v2] .tok-eyebrow { font-family: var(--sv-font-mono); letter-spacing: var(--sv-label-tracking); color: var(--sv-violet); }
html[data-ui-v2] .tok-fig-now { font-family: var(--sv-font-display); font-size: clamp(34px, 5vw, 50px); color: var(--sv-text); }
html[data-ui-v2] .tok-fig-max { font-family: var(--sv-font-mono); color: var(--sv-text-dim); }
html[data-ui-v2] .tok-fig-pct {
  font-family: var(--sv-font-mono); font-size: 12px; letter-spacing: .1em;
  padding: 4px 11px; border: 1px solid var(--sv-line-2); border-radius: var(--sv-r-pill, 999px);
  color: var(--sv-violet-bright); background: rgba(var(--sv-accent-rgb), .1);
}
html[data-ui-v2] .tok-bar {
  height: 10px; border-radius: 999px; background: rgba(var(--sv-accent-rgb), .12);
  border: 1px solid var(--sv-line-soft);
}
html[data-ui-v2] .tok-bar-fill {
  background: var(--sv-grad-primary); border-radius: 999px;
  box-shadow: 0 0 18px -4px rgba(var(--sv-glow-rgb), .8);
}

html[data-ui-v2] .tok-tile {
  border: 1px solid var(--sv-line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--sv-plum-rgb), .5), rgba(var(--sv-ground-rgb), .5));
  padding: 12px 14px;
}
html[data-ui-v2] .tok-tile-k { font-family: var(--sv-font-mono); letter-spacing: .18em; color: var(--sv-text-dim); }
html[data-ui-v2] .tok-tile-v { font-family: var(--sv-font-mono); font-size: 20px; color: var(--sv-text); }
html[data-ui-v2] .tok-tile-s { font-family: var(--sv-font-mono); color: var(--sv-text-muted); }
html[data-ui-v2] .tok-tile.cached { border-color: var(--sv-line-2); }
html[data-ui-v2] .tok-tile.uncached { border-color: rgba(224, 179, 78, .4); }
html[data-ui-v2] .tok-tile.uncached .tok-tile-v { color: var(--sv-warning); }
html[data-ui-v2] .tok-tile.cost .tok-tile-v { color: var(--sv-success); }

html[data-ui-v2] .tok-scroll::-webkit-scrollbar-thumb { background: var(--sv-line-strong); }
html[data-ui-v2] .tok-scroll { scrollbar-color: var(--sv-line-strong) transparent; }

html[data-ui-v2] .tok-group {
  display: flex; align-items: center; justify-content: space-between;
  margin: 20px 0 8px; padding-bottom: 7px;
  border-bottom: 1px solid var(--sv-line-soft);
}
html[data-ui-v2] .tok-group-label {
  font-family: var(--sv-font-mono); font-size: 10px; letter-spacing: var(--sv-label-tracking);
  text-transform: uppercase; color: var(--sv-violet);
}
html[data-ui-v2] .tok-group.uncached .tok-group-label { color: var(--sv-warning); }
html[data-ui-v2] .tok-group-sum { font-family: var(--sv-font-mono); font-size: 11.5px; color: var(--sv-text-dim); }

html[data-ui-v2] .tok-cat { font-family: var(--sv-font-body); font-size: 18px; padding: 10px 0 8px; }
html[data-ui-v2] .tok-name { color: var(--sv-text-soft); }
html[data-ui-v2] .tok-cbar { height: 8px; border-radius: 999px; background: rgba(var(--sv-accent-rgb), .1); }
html[data-ui-v2] .tok-cbar-fill { background: var(--sv-grad-primary); border-radius: 999px; opacity: 1; }
html[data-ui-v2] .tok-cats.uncached .tok-cbar-fill { background: linear-gradient(180deg, #e0b34e, #a8761f); }
html[data-ui-v2] .tok-val { font-family: var(--sv-font-mono); color: var(--sv-text); }

html[data-ui-v2] .tok-items { border-left: 1px solid var(--sv-line-soft); margin-left: 12px; padding-left: 16px; }
html[data-ui-v2] .tok-item { font-family: var(--sv-font-mono); font-size: 11.5px; color: var(--sv-text-dim); }
html[data-ui-v2] .tok-iname { color: var(--sv-text-muted); }
html[data-ui-v2] .tok-ibar { height: 5px; border-radius: 999px; background: rgba(var(--sv-accent-rgb), .14); }
html[data-ui-v2] .tok-ibar-fill { background: var(--sv-violet); opacity: .55; }
html[data-ui-v2] .tok-cats.uncached .tok-ibar-fill { background: var(--sv-warning); }
html[data-ui-v2] .tok-note { font-family: var(--sv-font-body); font-size: 14px; color: var(--sv-text-dim); }

html[data-ui-v2] #tokens-modal .modal-actions { margin-top: 18px; }
html[data-ui-v2] #tokens-modal #tokens-close {
  padding: 10px 22px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--sv-line-2); background: rgba(var(--sv-accent-rgb), .12);
  font-family: var(--sv-font-mono); font-size: 10.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--sv-text);
  transition: background .2s, border-color .2s;
}
html[data-ui-v2] #tokens-modal #tokens-close:hover {
  background: rgba(var(--sv-accent-rgb), .22); border-color: var(--sv-line-hover);
}

/* Memory bank strip, violet theme. */
html[data-ui-v2] .mem-bank {
  border: 1px solid var(--sv-line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--sv-plum-rgb),.5), rgba(var(--sv-ground-rgb),.5));
}
html[data-ui-v2] .mem-bank-title { font-family: var(--sv-font-mono); letter-spacing: var(--sv-label-tracking); color: var(--sv-violet); }
html[data-ui-v2] .mem-bank-state { font-family: var(--sv-font-mono); border-color: var(--sv-line-2); color: var(--sv-text-dim); }
html[data-ui-v2] .mem-bank-state.ready { color: var(--sv-success); border-color: rgba(147,181,111,.5); }
html[data-ui-v2] .mem-bank-state.partial { color: var(--sv-warning); border-color: rgba(224,179,78,.5); }
html[data-ui-v2] .mem-bank-row { font-family: var(--sv-font-mono); color: var(--sv-text-dim); }
html[data-ui-v2] .mem-bank-row b { color: var(--sv-text); }

/* Story Memory cards, violet theme. */
html[data-ui-v2] .card-tile {
  border: 1px solid var(--sv-line); border-radius: 10px;
  background: linear-gradient(180deg, rgba(var(--sv-plum-rgb),.5), rgba(var(--sv-ground-rgb),.5));
  font-family: var(--sv-font-body); color: var(--sv-text);
}
html[data-ui-v2] .card-tile:hover { border-color: var(--sv-line-hover); }
html[data-ui-v2] .card-trigger { font-family: var(--sv-font-mono); color: var(--sv-text-dim); }
html[data-ui-v2] .card-trigger b { color: var(--sv-violet-bright); }
html[data-ui-v2] .card-folder { font-family: var(--sv-font-mono); color: var(--sv-text-dim); }
html[data-ui-v2] .card-body { color: var(--sv-text-muted); }