/* Little Planet v2 — UI overlay (UI track). Follows ART-BIBLE.md §9: Dela Gothic One + M PLUS Rounded 1c,
   flat fills, 3 px #0B0B12 borders, 14 px radius, hard 6/6 drop in the era UI shadow, no blur, no glass.
   1 unit (--u) = 20 px at 1080p and scales with height, so every size below is "px at 1080p / 20". */

@font-face { font-family: 'LP Display'; src: url('ui-assets/fonts/dela-gothic-one.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'LP Round'; src: url('ui-assets/fonts/mplus-rounded-500.woff2') format('woff2'); font-weight: 400 600; font-display: swap; }
@font-face { font-family: 'LP Round'; src: url('ui-assets/fonts/mplus-rounded-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'LP Round'; src: url('ui-assets/fonts/mplus-rounded-800.woff2') format('woff2'); font-weight: 800 900; font-display: swap; }

.lp-ui {
  --u: clamp(13px, 1.852vh, 24px);
  --bw: max(2px, calc(var(--u) * 0.15));
  --sh: calc(var(--u) * 0.3);
  --r: calc(var(--u) * 0.7);
  --safe: calc(var(--u) * 1.4);
  --f-display: 'LP Display', 'Dela Gothic One', 'Arial Black', sans-serif;
  --f-body: 'LP Round', 'M PLUS Rounded 1c', system-ui, sans-serif;
  --gold: #FFC93A;
  --paper: #F7F4EC;
  --white-tri: #FFFFFF;
  /* era theme (present defaults); index.js rewrites these from palettes.js + the bible's UI table */
  --panel: #F7F4EC; --panel-2: #C9E7EE; --ink: #0B0B12; --ink-soft: #23254F; --line: #0B0B12;
  --accent: #FF6F7D; --on-accent: #0B0B12; --hi: #FFD23F; --on-hi: #0B0B12;
  --sky1: #1E5BD8; --sky2: #7FE3F0; --water: #22C6D8; --green: #2FBF71; --shade: #3B3F8C; --drop: #3B3F8C;
  --backdrop: #1E5BD8; --on-backdrop: #F7F4EC; --backdrop-2: #2554C5;
  position: fixed; inset: 0; z-index: 50; pointer-events: none; overflow: hidden;
  font: 500 var(--u)/1.35 var(--f-body); color: var(--ink);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.lp-ui *, .lp-ui *::before, .lp-ui *::after { box-sizing: border-box; }
.lp-ui [hidden] { display: none !important; }
.lp-ui h1, .lp-ui h2, .lp-ui h3, .lp-ui h4, .lp-ui h5, .lp-ui p { margin: 0; font-weight: inherit; }
.lp-ui b { font-weight: 800; }

/* ---------- atoms ---------- */
.lp-key {
  display: inline-grid; place-items: center; min-width: 1.8em; height: 1.8em; padding: 0 .45em; flex: none;
  background: var(--line); color: var(--paper); border-radius: .4em; font: 800 .8em/1 var(--f-body); letter-spacing: .02em; white-space: nowrap;
  box-shadow: 0 .14em 0 var(--accent);
}
.lp-ring { width: 1.2em; height: 1.2em; flex: none; display: block; }
.lp-chip { position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: .3em; padding: .1em .75em; }
.lp-chip::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--accent); border: var(--bw) solid var(--line); transform: skewX(-14deg); }
.lp-muted { color: var(--ink-soft); font-weight: 500; }
.lp-btn { cursor: pointer; position: relative; }
.lp-plate { background: var(--panel); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh) var(--sh) 0 var(--drop); }

/* ---------- HUD ---------- */
.lp-hud { position: absolute; inset: 0; }
.lp-hud.is-hidden { display: none; }
.lp-hud-tl, .lp-hud-tr, .lp-hud-bl, .lp-hud-bc, .lp-hud-br, .lp-reticle, .lp-touchnote { transition: opacity .15s steps(2); }
.lp-hud.is-quiet .lp-hud-tl, .lp-hud.is-quiet .lp-hud-tr, .lp-hud.is-quiet .lp-hud-bl,
.lp-hud.is-quiet .lp-hud-bc, .lp-hud.is-quiet .lp-hud-br, .lp-hud.is-quiet .lp-reticle, .lp-hud.is-quiet .lp-touchnote { opacity: 0; }

.lp-hud-tl {
  position: absolute; left: var(--safe); top: var(--safe); width: calc(var(--u) * 17);
  display: flex; flex-direction: column; gap: calc(var(--u) * .55); padding: calc(var(--u) * .6) calc(var(--u) * .8) calc(var(--u) * .7);
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh) var(--sh) 0 var(--drop);
}
.lp-party { display: flex; flex-direction: column; gap: calc(var(--u) * .5); }
.lp-pm { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: calc(var(--u) * .6); }
.lp-pm-face {
  width: calc(var(--u) * 2.4); height: calc(var(--u) * 2.4); border-radius: 50%; display: grid; place-items: center;
  background: var(--cc); color: var(--cc-ink); border: var(--bw) solid var(--line); font: calc(var(--u) * .85)/1 var(--f-display);
}
.lp-pm-main { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; row-gap: calc(var(--u) * .22); }
.lp-pm-name { font: 800 calc(var(--u) * .8)/1.1 var(--f-body); letter-spacing: .06em; text-transform: uppercase; }
.lp-pm-num { font: 700 calc(var(--u) * .75)/1.1 var(--f-body); font-variant-numeric: tabular-nums; color: var(--ink-soft); }
.lp-pm .lp-bar { grid-column: 1 / -1; }
.lp-pm:not(.is-active) .lp-pm-face { width: calc(var(--u) * 1.8); height: calc(var(--u) * 1.8); font-size: calc(var(--u) * .66); margin: 0 calc(var(--u) * .3); }
.lp-pm:not(.is-active) .lp-bar-hp { height: calc(var(--u) * .6); }
.lp-pm:not(.is-active) .lp-pm-name { color: var(--ink-soft); }
.lp-pm.is-active .lp-pm-name::after { content: ' ◀'; color: var(--accent); font-size: .8em; }
.lp-pm.is-hit .lp-bar-hp { animation: lp-shake .3s steps(4) 1; }

.lp-bar { position: relative; overflow: hidden; height: calc(var(--u) * .85); background: var(--line); border: var(--bw) solid var(--line); transform: skewX(-18deg); }
.lp-bar-fill, .lp-bar-trail { position: absolute; inset: 0; transform-origin: 0 50%; }
/* two tones per surface: lit top, era-shadow bottom (ART-BIBLE rule 1) */
.lp-bar-hp .lp-bar-fill { background: linear-gradient(to bottom, var(--green) 0 55%, color-mix(in srgb, var(--green) 50%, var(--shade)) 55% 100%); }
.lp-bar-trail { background: var(--paper); }
.lp-pm.is-low .lp-bar-hp .lp-bar-fill { background: linear-gradient(to bottom, #FF4D5E 0 55%, color-mix(in srgb, #FF4D5E 50%, var(--shade)) 55% 100%); animation: lp-blink .5s steps(2) infinite; }

.lp-lv { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: calc(var(--u) * .8); row-gap: calc(var(--u) * .15); padding-top: calc(var(--u) * .5); border-top: var(--bw) solid color-mix(in srgb, var(--line) 15%, var(--panel)); }
.lp-lv-chip { grid-row: span 2; font: calc(var(--u) * 1.5)/1.15 var(--f-display); color: var(--on-accent); font-variant-numeric: tabular-nums; }
.lp-lv-lbl { font: 800 calc(var(--u) * .6)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.lp-bar-xp { height: calc(var(--u) * .5); }
.lp-bar-xp .lp-bar-fill { background: var(--hi); }
.lp-xp-txt { font: 700 calc(var(--u) * .66)/1 var(--f-body); color: var(--ink-soft); font-variant-numeric: tabular-nums; }

.lp-hud-tr { position: absolute; right: var(--safe); top: var(--safe); display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .7); }
.lp-hud-tr-row { display: flex; align-items: center; gap: calc(var(--u) * .7); }
.lp-rings {
  position: relative; display: flex; align-items: center; gap: calc(var(--u) * .45); min-width: calc(var(--u) * 7);
  background: var(--line); color: var(--gold); border: var(--bw) solid var(--line); border-radius: 999px; padding: calc(var(--u) * .2) calc(var(--u) * 1) calc(var(--u) * .2) calc(var(--u) * .3);
  font: calc(var(--u) * 2)/1 var(--f-display); font-variant-numeric: tabular-nums; box-shadow: var(--sh) var(--sh) 0 var(--drop);
}
.lp-ring-hud { width: calc(var(--u) * 2.2); height: calc(var(--u) * 2.2); }
.lp-rings.is-bump .lp-ring-hud { animation: lp-spin .3s steps(6); }
.lp-rings.is-bump .lp-rings-num { animation: lp-pop .2s steps(3); }
.lp-rings-pop { position: absolute; right: calc(var(--u) * .5); top: 100%; font: calc(var(--u) * 1)/1 var(--f-display); color: var(--gold); opacity: 0; -webkit-text-stroke: .16em var(--line); paint-order: stroke fill; }
.lp-rings-pop.go { animation: lp-rise .8s steps(8) forwards; }
.lp-era {
  display: flex; align-items: center; gap: calc(var(--u) * .5); background: var(--panel); border: var(--bw) solid var(--line);
  border-radius: 999px; padding: calc(var(--u) * .3) calc(var(--u) * .9) calc(var(--u) * .3) calc(var(--u) * .35); box-shadow: var(--sh) var(--sh) 0 var(--drop);
}
.lp-era-sw { display: flex; border: var(--bw) solid var(--line); border-radius: 999px; overflow: hidden; }
.lp-era-sw i { display: block; width: calc(var(--u) * .6); height: calc(var(--u) * 1.3); }
.lp-era-sw i:nth-child(1) { background: var(--sky1); } .lp-era-sw i:nth-child(2) { background: var(--sky2); } .lp-era-sw i:nth-child(3) { background: var(--accent); }
.lp-era-kanji { font: calc(var(--u) * .95)/1 var(--f-display); }
.lp-era-name { font: 800 calc(var(--u) * .72)/1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.lp-obj {
  display: flex; align-items: center; gap: calc(var(--u) * .6); max-width: calc(var(--u) * 24);
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: calc(var(--u) * .45) calc(var(--u) * .9) calc(var(--u) * .45) calc(var(--u) * .45);
  box-shadow: var(--sh) var(--sh) 0 var(--drop);
}
.lp-obj.is-bump { animation: lp-pop .2s steps(3); }
.lp-obj-lbl { flex: none; background: var(--accent); color: var(--on-accent); border: var(--bw) solid var(--line); border-radius: calc(var(--u) * .35); padding: .2em .5em; font: 800 calc(var(--u) * .6)/1.1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; }
.lp-obj-text { font: 700 calc(var(--u) * .95)/1.25 var(--f-body); }

.lp-hud-bl { position: absolute; left: var(--safe); bottom: var(--safe); }
.lp-syn {
  display: flex; flex-direction: column; gap: calc(var(--u) * .35); min-width: calc(var(--u) * 13.5);
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: calc(var(--u) * .45) calc(var(--u) * .8) calc(var(--u) * .6);
  box-shadow: var(--sh) var(--sh) 0 var(--drop);
}
.lp-syn-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--u) * .5); min-height: calc(var(--u) * 1.3); }
.lp-syn-txt { font: 800 calc(var(--u) * .7)/1.1 var(--f-body); letter-spacing: .1em; text-transform: uppercase; }
.lp-syn-key { font-size: calc(var(--u) * .75); visibility: hidden; }
.lp-syn.is-ready .lp-syn-key { visibility: visible; }
.lp-syn.is-ready .lp-syn-txt { letter-spacing: .02em; text-transform: none; font-size: calc(var(--u) * .78); }
.lp-syn-bar { display: flex; gap: calc(var(--u) * .2); padding-left: calc(var(--u) * .25); }
.lp-syn-bar i { flex: 1; height: calc(var(--u) * .9); background: var(--panel-2); border: var(--bw) solid var(--line); transform: skewX(-18deg); }
.lp-syn-bar i.on { background: var(--water); }
.lp-syn.is-ready .lp-syn-bar i { background: var(--hi); animation: lp-flash .5s steps(2) infinite; }
.lp-syn.is-ready .lp-syn-bar i:nth-child(even) { animation-delay: .25s; }

.lp-hud-bc { position: absolute; left: 50%; bottom: calc(var(--safe) + var(--u) * 2.4); transform: translateX(-50%); }
.lp-prompt {
  display: flex; align-items: center; gap: calc(var(--u) * .6); white-space: nowrap;
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: 999px; padding: calc(var(--u) * .35) calc(var(--u) * 1.2) calc(var(--u) * .35) calc(var(--u) * .4);
  box-shadow: var(--sh) var(--sh) 0 var(--drop); font: 700 calc(var(--u) * 1.1)/1.2 var(--f-body);
}
.lp-prompt .lp-key { font-size: calc(var(--u) * .95); }
.lp-prompt.is-bump { animation: lp-pop .2s steps(3); }
.lp-hud-br { position: absolute; right: var(--safe); bottom: var(--safe); }
.lp-lockhint {
  display: flex; align-items: center; gap: calc(var(--u) * .5); background: var(--panel); border: var(--bw) solid var(--line); border-radius: 999px;
  padding: calc(var(--u) * .3) calc(var(--u) * .95) calc(var(--u) * .3) calc(var(--u) * .35); font: 700 calc(var(--u) * .85)/1.2 var(--f-body); box-shadow: var(--sh) var(--sh) 0 var(--drop);
}
.lp-lockhint.is-locked { background: var(--hi); color: var(--on-hi); }
.lp-reticle { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.lp-reticle i { position: absolute; width: calc(var(--u) * 1.1); height: calc(var(--u) * 1.1); border: calc(var(--bw) * 1.5) solid var(--hi); }
.lp-reticle i::after { content: ''; position: absolute; inset: calc(var(--bw) * -2.5); border: var(--bw) solid var(--line); border-color: inherit; }
.lp-reticle i:nth-child(1) { left: calc(var(--u) * -1.9); top: calc(var(--u) * -1.9); border-right: 0; border-bottom: 0; }
.lp-reticle i:nth-child(2) { right: calc(var(--u) * -1.9); top: calc(var(--u) * -1.9); border-left: 0; border-bottom: 0; }
.lp-reticle i:nth-child(3) { left: calc(var(--u) * -1.9); bottom: calc(var(--u) * -1.9); border-right: 0; border-top: 0; }
.lp-reticle i:nth-child(4) { right: calc(var(--u) * -1.9); bottom: calc(var(--u) * -1.9); border-left: 0; border-top: 0; }
.lp-reticle { filter: drop-shadow(var(--bw) 0 0 var(--line)) drop-shadow(calc(var(--bw) * -1) 0 0 var(--line)) drop-shadow(0 var(--bw) 0 var(--line)) drop-shadow(0 calc(var(--bw) * -1) 0 var(--line)); }
.lp-reticle i::after { display: none; }

.lp-bossbar {
  position: absolute; left: 50%; bottom: calc(var(--safe) + var(--u) * 5.4); transform: translateX(-50%);
  width: min(calc(var(--u) * 30), calc(100vw - 2 * var(--safe))); display: grid; justify-items: start;
}
.lp-bossbar.is-bump { animation: lp-pop .2s steps(3); }
.lp-boss-tag {
  display: inline-flex; align-items: baseline; gap: calc(var(--u) * .6); margin-left: calc(var(--u) * .6);
  background: var(--panel); color: var(--ink); border: var(--bw) solid var(--line); border-bottom: 0; border-radius: var(--r) var(--r) 0 0;
  padding: calc(var(--u) * .3) calc(var(--u) * .9) calc(var(--u) * .2);
}
.lp-boss-name { font: calc(var(--u) * 1.15)/1.1 var(--f-display); letter-spacing: .02em; }
.lp-boss-phase { font: 800 calc(var(--u) * .66)/1 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lp-bar-boss { width: 100%; height: calc(var(--u) * 1.15); transform: none; border-radius: calc(var(--u) * .35); box-shadow: var(--sh) var(--sh) 0 var(--drop); }
.lp-bar-boss .lp-bar-fill { background: linear-gradient(to bottom, #E8262A 0 55%, color-mix(in srgb, #E8262A 50%, var(--shade)) 55% 100%); }
.lp-bossbar.is-exposed .lp-bar-boss .lp-bar-fill { background: linear-gradient(to bottom, var(--hi) 0 55%, color-mix(in srgb, var(--hi) 50%, var(--shade)) 55% 100%); animation: lp-blink .4s steps(2) infinite; }
.lp-bossbar.is-down .lp-boss-name { text-decoration: line-through; text-decoration-thickness: 3px; }
.lp-hud.is-quiet .lp-bossbar { opacity: 0; }
/* combo counter (v3 combo:update) */
.lp-combo { position: absolute; right: var(--safe); top: 21%; display: grid; justify-items: end; row-gap: calc(var(--u) * .3); --rank: #F7F4EC; transition: transform .24s steps(4, end); }
.lp-combo.is-out { transform: translateX(calc(100% + var(--safe) * 2)); }
.lp-hud.is-quiet .lp-combo { opacity: 0; }
.lp-combo-main { display: flex; align-items: center; gap: calc(var(--u) * .8); }
.lp-combo-txt { display: grid; justify-items: end; row-gap: calc(var(--u) * .15); }
.lp-combo-count { display: flex; align-items: baseline; gap: .35em; }
.lp-combo-num { font: calc(var(--u) * 3.4)/.95 var(--f-display); color: var(--paper); font-variant-numeric: tabular-nums; -webkit-text-stroke: .1em var(--line); paint-order: stroke fill; text-shadow: .06em .07em 0 var(--line); }
.lp-combo.is-hit .lp-combo-num { animation: lp-pop .16s steps(2); }
.lp-combo-unit, .lp-combo-dmg { font: 800 calc(var(--u) * .8)/1 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--paper); -webkit-text-stroke: .28em var(--line); paint-order: stroke fill; }
.lp-combo-dmg { font-size: calc(var(--u) * .72); letter-spacing: .08em; text-transform: none; }
.lp-combo-dmg:empty { display: none; }
.lp-combo-label { font: calc(var(--u) * 1.3)/1.1 var(--f-display); color: var(--rank); white-space: nowrap; -webkit-text-stroke: .12em var(--line); paint-order: stroke fill; text-shadow: .06em .07em 0 var(--line); }
.lp-combo.is-broken .lp-combo-label { color: #9AA0B8; }
.lp-combo-rank { position: relative; isolation: isolate; width: calc(var(--u) * 4.8); height: calc(var(--u) * 4.8); flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--rank); border: var(--bw) solid var(--line); box-shadow: var(--sh) var(--sh) 0 var(--line); }
.lp-combo-letter { position: relative; font: calc(var(--u) * 2.9)/1 var(--f-display); color: #0B0B12; letter-spacing: -.04em; }
.lp-combo[data-rank="SS"] .lp-combo-letter { font-size: calc(var(--u) * 2.25); color: #F7F4EC; -webkit-text-stroke: .1em #0B0B12; paint-order: stroke fill; text-shadow: .06em .07em 0 #FF2E88; }
.lp-combo-burst { position: absolute; inset: -48%; z-index: -1; border-radius: 50%; opacity: 0; background: repeating-conic-gradient(var(--rank) 0 9deg, transparent 9deg 22deg);
  -webkit-mask: radial-gradient(circle closest-side, transparent 0 52%, #000 53% 100%); mask: radial-gradient(circle closest-side, transparent 0 52%, #000 53% 100%); }
.lp-combo-rank.is-up { animation: lp-rankpop .32s steps(4, end); }
.lp-combo-rank.is-up .lp-combo-burst { animation: lp-burst .5s steps(5, end); }
.lp-combo-timer { width: calc(var(--u) * 11); height: calc(var(--u) * .55); }
.lp-combo-timer .lp-bar-fill { background: var(--rank); }
@keyframes lp-rankpop { 0% { transform: scale(1.6) rotate(-12deg); } 50% { transform: scale(.9) rotate(4deg); } 100% { transform: none; } }
@keyframes lp-burst { 0% { opacity: 1; transform: scale(.6); } 70% { opacity: 1; transform: scale(1.15) rotate(12deg); } 100% { opacity: 0; transform: scale(1.25) rotate(18deg); } }
/* impact frames (v3 fx:impact) — under the HUD panels, over the game */
.lp-fx { position: absolute; inset: 0; pointer-events: none; }
.lp-fx-neg { position: absolute; inset: 0; -webkit-backdrop-filter: grayscale(1) invert(1) contrast(3.2) brightness(.8); backdrop-filter: grayscale(1) invert(1) contrast(3.2) brightness(.8); }
.lp-fx-flash { position: absolute; inset: 0; background: var(--hi); opacity: .4; }
.lp-fx-lines, .lp-fx-lines svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.lp-fx-line { fill: #FFFFFF; stroke: #0B0B12; stroke-width: 1; }
.lp-ui[data-era="bad"] .lp-fx-line { fill: var(--accent); }
.lp-fx-rings { position: absolute; inset: 0; }
.lp-fx-ring { position: absolute; width: calc(var(--u) * 3.2); height: calc(var(--u) * 3.2); margin: calc(var(--u) * -1.6) 0 0 calc(var(--u) * -1.6); border-radius: 50%;
  border: calc(var(--bw) * 1.3) solid #FFFFFF; box-shadow: 0 0 0 var(--bw) #0B0B12, inset 0 0 0 var(--bw) #0B0B12; transform: scale(calc(var(--s, 1) * (.45 + var(--k, 0) * .9))); }
/* gameplay controls strip (first seconds of play, or bus ui:hints) */
.lp-hints {
  position: absolute; left: 50%; bottom: calc(var(--safe) * .55); transform: translateX(-50%); display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(var(--u) * .3) calc(var(--u) * 1); max-width: calc(100vw - 2 * var(--safe) - var(--u) * 32);
  background: var(--line); color: var(--paper); border-radius: 999px; padding: calc(var(--u) * .35) calc(var(--u) * 1.1);
  font: 700 calc(var(--u) * .8)/1.2 var(--f-body); box-shadow: var(--sh) var(--sh) 0 var(--drop); transition: opacity .3s steps(3);
}
.lp-hints .lp-key { background: var(--paper); color: var(--line); box-shadow: 0 .14em 0 var(--accent); }
.lp-hints.is-out { opacity: 0; }
.lp-hud.is-quiet .lp-hints { opacity: 0; }
.lp-toasts { position: absolute; left: 50%; top: var(--safe); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * .45); width: max-content; max-width: calc(100vw - 2 * var(--safe)); }
.lp-toast {
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: 999px; padding: calc(var(--u) * .35) calc(var(--u) * 1.2); text-align: center;
  font: 700 calc(var(--u) * 1.2)/1.25 var(--f-body); box-shadow: var(--sh) var(--sh) 0 var(--drop);
  animation: lp-drop .2s steps(4); transition: opacity .2s steps(2), transform .2s steps(2);
}
.lp-toast.is-quest { background: var(--accent); color: var(--on-accent); }
.lp-toast.is-done { background: var(--hi); color: var(--on-hi); }
.lp-toast.is-out, .lp-gain.is-out { opacity: 0; transform: translateY(calc(var(--u) * -.4)); }

.lp-gains { position: absolute; right: var(--safe); top: 47%; display: flex; flex-direction: column; align-items: flex-end; gap: calc(var(--u) * .45); }
.lp-gain {
  display: flex; align-items: center; gap: calc(var(--u) * .5); background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r);
  padding: calc(var(--u) * .35) calc(var(--u) * .9) calc(var(--u) * .35) calc(var(--u) * .55); font: 700 calc(var(--u) * 1)/1.2 var(--f-body);
  box-shadow: var(--sh) var(--sh) 0 var(--drop); animation: lp-slide .24s steps(4); transition: opacity .2s steps(2), transform .2s steps(2);
}
.lp-gain::before { content: '+'; font: calc(var(--u) * 1.1)/1 var(--f-display); color: var(--accent); -webkit-text-stroke: .12em var(--line); paint-order: stroke fill; }
.lp-gain-ico { width: calc(var(--u) * .8); height: calc(var(--u) * .8); transform: rotate(45deg); background: var(--green); border: var(--bw) solid var(--line); margin: 0 .2em; }
.lp-gain-equip .lp-gain-ico { background: var(--water); }
.lp-gain-qty { font: calc(var(--u) * .9)/1 var(--f-display); color: var(--ink-soft); }

.lp-floaters { position: absolute; inset: 0; }
.lp-float {
  position: absolute; left: 0; top: 0; transform: translate(-50%, -50%); white-space: nowrap; will-change: transform, opacity;
  font: calc(var(--u) * 2)/1 var(--f-display); color: #FFFFFF; font-variant-numeric: tabular-nums;
  -webkit-text-stroke: .16em var(--line); paint-order: stroke fill; text-shadow: .07em .08em 0 var(--line);
}
.lp-float.is-crit { font-size: calc(var(--u) * 2.8); color: var(--gold); text-shadow: .07em .08em 0 var(--accent); }
.lp-float.is-crit::before { content: 'CRÍTICO!'; display: block; font-size: .36em; letter-spacing: .08em; text-align: center; color: var(--paper); }
.lp-float.is-player { color: #FF4D5E; font-size: calc(var(--u) * 1.6); }

.lp-touchnote {
  display: none; position: absolute; left: 50%; bottom: var(--safe); transform: translateX(-50%); align-items: center; gap: .5em; white-space: nowrap;
  background: var(--line); color: var(--paper); border-radius: 999px; padding: .45em 1.2em; font: 700 calc(var(--u) * 1)/1.2 var(--f-body);
  box-shadow: var(--sh) var(--sh) 0 var(--accent);
}
.lp-ui.is-touch .lp-touchnote { display: flex; }

/* ---------- dialogue (bible: 30 px / 1.35, ≤42 chars per line, 3 lines; names 26 px 800) ---------- */
.lp-dlg {
  position: absolute; left: 50%; bottom: var(--safe); transform: translateX(-50%); pointer-events: auto;
  width: min(calc(var(--u) * 52), calc(100vw - 2 * var(--safe))); display: flex; flex-direction: column; align-items: stretch;
  animation: lp-up .2s steps(4);
}
.lp-dlg-box {
  position: relative; background: var(--panel); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r);
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2.2) calc(var(--u) * 1.4) calc(var(--u) * 11.4); min-height: calc(var(--u) * 9);
  box-shadow: var(--sh) var(--sh) 0 var(--drop);
}
.lp-dlg-box.no-portrait { padding-left: calc(var(--u) * 2.2); }
.lp-dlg-portrait {
  position: absolute; left: calc(var(--u) * 1); bottom: calc(var(--u) * 1); width: calc(var(--u) * 9.2); height: calc(var(--u) * 10);
  background: var(--line); clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
}
.lp-dlg-pin {
  position: absolute; inset: var(--bw); clip-path: polygon(0 0, 100% 0, calc(82% - var(--bw) * .4) 100%, 0 100%); overflow: hidden; display: grid; place-items: center;
  /* flat accent background with a dot pattern (dot = 1/3 of spacing) */
  background-color: var(--accent);
  background-image: radial-gradient(circle, color-mix(in srgb, var(--accent) 60%, var(--panel)) calc(var(--u) * .2), transparent calc(var(--u) * .2 + .5px));
  background-size: calc(var(--u) * 1.2) calc(var(--u) * 1.2);
}
.lp-dlg-pin img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }
.lp-dlg-initials {
  width: calc(var(--u) * 6); height: calc(var(--u) * 6); border-radius: 50%; display: grid; place-items: center; margin-right: calc(var(--u) * .8);
  border: var(--bw) solid var(--line); box-shadow: var(--sh) var(--sh) 0 var(--line); font: calc(var(--u) * 2.3)/1 var(--f-display); letter-spacing: -.02em;
}
.lp-dlg-name {
  position: absolute; top: calc(var(--u) * -1.3); left: calc(var(--u) * 10.8); isolation: isolate; padding: calc(var(--u) * .25) calc(var(--u) * 1.3);
  font: 800 calc(var(--u) * 1.3)/1.15 var(--f-body); letter-spacing: .04em; color: var(--cc-ink);
}
.lp-dlg-name::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--cc); border: var(--bw) solid var(--line); transform: skewX(-14deg); box-shadow: var(--sh) var(--sh) 0 var(--line); }
.lp-dlg-box.no-portrait .lp-dlg-name { left: calc(var(--u) * 1.6); }
.lp-dlg-text { font: 500 calc(var(--u) * 1.5)/1.35 var(--f-body); max-width: 42ch; min-height: 4.05em; white-space: pre-wrap; overflow-wrap: break-word; }
.lp-dlg-rest { visibility: hidden; }
.lp-dlg-next { position: absolute; right: calc(var(--u) * 1.1); bottom: calc(var(--u) * .8); color: var(--accent); font-size: calc(var(--u) * 1.1); -webkit-text-stroke: .14em var(--line); paint-order: stroke fill; animation: lp-bob .6s steps(2) infinite; }
.lp-dlg-choices { display: grid; justify-content: end; gap: calc(var(--u) * .5); margin-bottom: calc(var(--u) * 1.8); padding-right: calc(var(--u) * .6); }
.lp-dlg-choice {
  display: flex; align-items: center; gap: calc(var(--u) * .6); min-width: calc(var(--u) * 19); width: 100%;
  background: var(--panel); border: var(--bw) solid var(--line); border-radius: var(--r); padding: calc(var(--u) * .5) calc(var(--u) * 1.3) calc(var(--u) * .5) calc(var(--u) * .5);
  font: 700 calc(var(--u) * 1.2)/1.25 var(--f-body); box-shadow: var(--sh) var(--sh) 0 var(--drop);
}
.lp-dlg-choice-n { display: grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 50%; background: var(--line); color: var(--paper); font: .74em/1 var(--f-display); flex: none; }
.lp-dlg-choice.is-focus { background: var(--accent); color: var(--on-accent); transform: translateX(calc(var(--u) * -.5)); }
.lp-dlg-choice.is-focus .lp-dlg-choice-n { background: var(--white-tri); color: var(--line); }

/* ---------- focus language: accent fill + white ▶ (bible §9) ---------- */
.lp-ui .lp-btn.is-focus { z-index: 1; }
.lp-item, .lp-slot, .lp-pause-item, .lp-tt-item { border: var(--bw) solid transparent; }
.lp-item.is-focus, .lp-slot.is-focus, .lp-pause-item.is-focus, .lp-tt-item.is-focus {
  background: var(--accent); color: var(--on-accent); border-color: var(--line); box-shadow: calc(var(--u) * .2) calc(var(--u) * .2) 0 var(--line);
}
.lp-item.is-focus::before, .lp-slot.is-focus::before, .lp-pause-item.is-focus::before, .lp-tt-item.is-focus::before {
  content: '▶'; position: absolute; left: calc(var(--u) * -1.25); top: 50%; transform: translateY(-50%); color: var(--white-tri);
  font: calc(var(--u) * .95)/1 var(--f-body); -webkit-text-stroke: .22em var(--line); paint-order: stroke fill;
}
.lp-item.is-focus .lp-item-qty, .lp-slot.is-focus .lp-slot-lbl, .lp-slot.is-focus .lp-slot-item.is-empty { color: inherit; opacity: .85; }

/* ---------- menus ---------- */
.lp-menus { position: absolute; inset: 0; }
.lp-menu { position: absolute; inset: 0; pointer-events: auto; display: grid; place-items: center; animation: lp-fade .12s steps(2); }
.lp-menu.is-under { visibility: hidden; }
.lp-menu-bg { position: absolute; inset: 0; background: var(--backdrop); overflow: hidden; }
.lp-menu-bg::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(to bottom, var(--backdrop-2) 0 30%, var(--shade) 30% 100%); }
.lp-menu-bg::after { content: ''; position: absolute; right: 7%; bottom: 30%; width: calc(var(--u) * 16); aspect-ratio: 1; border-radius: 50%; transform: translateY(50%); background: var(--hi); clip-path: inset(0 0 50% 0); }
.lp-menu-bg span { position: absolute; right: calc(var(--u) * 1.3); top: calc(var(--u) * 1.2); writing-mode: vertical-rl; font: calc(var(--u) * 4.4)/1 var(--f-display); color: var(--backdrop-2); letter-spacing: .06em; }
.lp-menu-frame {
  position: relative; width: min(calc(var(--u) * 72), calc(100vw - 2 * var(--safe))); height: min(calc(var(--u) * 43), calc(100vh - 2 * var(--safe)));
  display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: calc(var(--u) * .9);
}
.lp-menu-head { grid-row: 1; } .lp-tabs { grid-row: 2; } .lp-menu-body { grid-row: 3; } .lp-menu-foot { grid-row: 4; }
.lp-menu-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--u); color: var(--on-backdrop); }
.lp-menu-titles { display: flex; align-items: baseline; gap: calc(var(--u) * .9); min-width: 0; }
.lp-menu-title { font: calc(var(--u) * 2.6)/1 var(--f-display); letter-spacing: .01em; color: var(--paper); -webkit-text-stroke: .1em var(--line); paint-order: stroke fill; text-shadow: .07em .08em 0 var(--line); }
.lp-menu-kana { font: calc(var(--u) * 1)/1 var(--f-display); opacity: .9; letter-spacing: .08em; }
.lp-mrings {
  display: flex; align-items: center; gap: calc(var(--u) * .4); background: var(--line); color: var(--gold); border-radius: 999px; flex: none;
  padding: calc(var(--u) * .25) calc(var(--u) * 1) calc(var(--u) * .25) calc(var(--u) * .3); font: calc(var(--u) * 1.3)/1 var(--f-display); font-variant-numeric: tabular-nums;
}
.lp-mrings .lp-ring { width: calc(var(--u) * 1.6); height: calc(var(--u) * 1.6); }
.lp-tabs { display: flex; gap: calc(var(--u) * .8); padding-left: calc(var(--u) * .4); flex-wrap: wrap; }
.lp-tabs:empty { display: none; }
.lp-tab { isolation: isolate; padding: calc(var(--u) * .45) calc(var(--u) * 1.5); font: 700 calc(var(--u) * 1)/1.2 var(--f-body); color: var(--ink); }
.lp-tab::before { content: ''; position: absolute; inset: 0; z-index: -1; background: var(--panel); border: var(--bw) solid var(--line); transform: skewX(-14deg); }
.lp-tab.is-on { color: var(--on-accent); }
.lp-tab.is-on::before { background: var(--accent); box-shadow: calc(var(--u) * .2) calc(var(--u) * .2) 0 var(--line); }
.lp-tab.is-focus { transform: translateY(calc(var(--u) * -.2)); }
.lp-tab.is-focus::after { content: ''; position: absolute; left: 14%; right: 14%; bottom: calc(var(--u) * -.6); height: calc(var(--u) * .3); background: var(--hi); border: var(--bw) solid var(--line); }
.lp-menu-body { min-height: 0; }
.lp-menu-body > div { height: 100%; }
.lp-menu-foot { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: calc(var(--u) * .4) calc(var(--u) * 1.3); color: var(--on-backdrop); font: 700 calc(var(--u) * .8)/1.2 var(--f-body); }
.lp-hint { display: inline-flex; align-items: center; gap: .45em; }

.lp-panel {
  background: var(--panel); color: var(--ink); border: var(--bw) solid var(--line); border-radius: var(--r); box-shadow: var(--sh) var(--sh) 0 var(--drop);
  padding: calc(var(--u) * .9) calc(var(--u) * 1.1); min-height: 0; display: flex; flex-direction: column; gap: calc(var(--u) * .65); overflow: hidden;
}
.lp-subhead { display: flex; justify-content: space-between; align-items: baseline; gap: var(--u); flex: none; font: 800 calc(var(--u) * .72)/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lp-subhead-sub, .lp-pts { letter-spacing: .02em; text-transform: none; }
.lp-pts b { font: calc(var(--u) * 1.1)/1 var(--f-display); color: var(--ink); margin-left: .2em; }
.lp-scroll { overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--ink-soft) transparent; }
.lp-list { flex: 1 1 auto; min-height: calc(var(--u) * 5); display: flex; flex-direction: column; gap: calc(var(--u) * .25); padding: calc(var(--u) * .2) calc(var(--u) * .6) calc(var(--u) * .4) calc(var(--u) * 1.5); margin-left: calc(var(--u) * -.6); }
.lp-listhead { font: 800 calc(var(--u) * .64)/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-soft); margin: calc(var(--u) * .5) 0 calc(var(--u) * .1); }
.lp-listhead:first-child { margin-top: 0; }
.lp-empty { padding: calc(var(--u) * .5) 0; }
.lp-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: calc(var(--u) * .6); flex: none; padding: calc(var(--u) * .42) calc(var(--u) * .75); border-radius: calc(var(--u) * .5); font: 700 calc(var(--u) * 1)/1.25 var(--f-body); }
.lp-item-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-item-qty { font: 700 calc(var(--u) * .82)/1 var(--f-body); color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.lp-item-ico { width: calc(var(--u) * .8); height: calc(var(--u) * .8); transform: rotate(45deg); border: var(--bw) solid var(--line); background: var(--green); margin: 0 calc(var(--u) * .12); }
.lp-item-ico.is-equip { background: var(--water); }
.lp-item-ico.is-key { background: var(--hi); }
.lp-item-ico.is-quest { background: var(--accent); }
.lp-item-ico.is-check { background: var(--green); border-radius: 50%; transform: none; }
.lp-item-ico.is-remove { background: var(--panel); border-style: dashed; }
.lp-quest.is-done:not(.is-focus) { color: var(--ink-soft); }
.lp-tag { font: 800 calc(var(--u) * .6)/1 var(--f-body); background: var(--line); color: var(--paper); border-radius: .3em; padding: .3em .45em; }
.lp-price { display: inline-flex; align-items: center; gap: .3em; font: calc(var(--u) * 1)/1 var(--f-display); font-variant-numeric: tabular-nums; }
.lp-price .lp-ring { width: 1.15em; height: 1.15em; }
.lp-ware.is-poor:not(.is-focus) .lp-price, .lp-ware.is-poor:not(.is-focus) .lp-item-name { color: var(--ink-soft); }
.lp-ware.is-poor:not(.is-focus) .lp-price { text-decoration: line-through; text-decoration-thickness: 2px; }

.lp-parts { list-style: none; margin: 0; padding: 0; display: grid; gap: calc(var(--u) * .25); }
.lp-parts li { display: flex; justify-content: space-between; gap: var(--u); padding: .25em .6em; border-radius: calc(var(--u) * .35); background: var(--panel-2); font: 700 calc(var(--u) * .9)/1.3 var(--f-body); border: var(--bw) solid transparent; }
.lp-parts li.is-miss { border-color: var(--line); border-style: dashed; background: transparent; color: var(--ink-soft); }
.lp-parts li.is-ok b::after { content: ' ✓'; }
.lp-greet { flex: none; font: 500 calc(var(--u) * .9)/1.4 var(--f-body); color: var(--ink-soft); padding: calc(var(--u) * .1) 0 calc(var(--u) * .2); }
.lp-detail { flex: none; display: flex; flex-direction: column; gap: calc(var(--u) * .4); min-height: calc(var(--u) * 7); padding-top: calc(var(--u) * .75); border-top: var(--bw) solid color-mix(in srgb, var(--line) 15%, var(--panel)); }
.lp-detail:first-child { border-top: 0; padding-top: 0; }
.lp-detail-title { font: calc(var(--u) * 1.4)/1.15 var(--f-display); }
.lp-detail-meta { font: 700 calc(var(--u) * .8)/1.3 var(--f-body); color: var(--ink-soft); }
.lp-detail-desc { font: 500 calc(var(--u) * 1)/1.45 var(--f-body); }
.lp-detail-bonus { align-self: flex-start; font: 800 calc(var(--u) * .85)/1.3 var(--f-body); background: var(--panel-2); border: var(--bw) solid var(--line); border-radius: calc(var(--u) * .4); padding: .25em .65em; }
.lp-detail-obj { display: flex; align-items: center; gap: .6em; font: 700 calc(var(--u) * 1)/1.3 var(--f-body); }
.lp-detail-act { display: flex; align-items: center; gap: .55em; font: 700 calc(var(--u) * .88)/1.2 var(--f-body); margin-top: auto; }
.lp-detail-act.is-off { opacity: .55; }

.lp-chars { display: flex; gap: calc(var(--u) * .7); flex-wrap: wrap; height: auto !important; }
.lp-charchip { display: inline-flex; align-items: center; gap: .5em; background: var(--panel); border: var(--bw) solid var(--line); border-radius: 999px; padding: calc(var(--u) * .2) calc(var(--u) * 1) calc(var(--u) * .2) calc(var(--u) * .2); font: 700 calc(var(--u) * .95)/1.2 var(--f-body); }
.lp-charchip-face { display: grid; place-items: center; width: 1.9em; height: 1.9em; border-radius: 50%; border: var(--bw) solid var(--line); font: .7em/1 var(--f-display); }
.lp-charchip.is-on { background: var(--hi); color: var(--on-hi); box-shadow: calc(var(--u) * .2) calc(var(--u) * .2) 0 var(--line); }
.lp-charchip.is-focus { outline: var(--bw) solid var(--line); outline-offset: calc(var(--u) * .2); transform: translateY(calc(var(--u) * -.12)); }

.lp-eq, .lp-sk { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); grid-template-rows: auto minmax(0, 1fr); gap: calc(var(--u) * .9) calc(var(--u) * 1.2); }
.lp-eq > .lp-chars, .lp-sk > .lp-chars { grid-column: 1 / -1; }
.lp-sk { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
.lp-qs, .lp-shop { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: calc(var(--u) * 1.2); }
.lp-eq-left, .lp-sk-left { border-top-width: calc(var(--u) * .5); border-top-color: var(--cc, var(--line)); }
.lp-slots { display: flex; flex-direction: column; gap: calc(var(--u) * .3); padding-left: calc(var(--u) * .9); flex: none; }
.lp-slot { display: flex; flex-direction: column; gap: .1em; padding: calc(var(--u) * .35) calc(var(--u) * .8); border-radius: calc(var(--u) * .5); background: var(--panel-2); }
.lp-slot-lbl { font: 800 calc(var(--u) * .62)/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lp-slot-item { font: 700 calc(var(--u) * 1)/1.25 var(--f-body); }
.lp-slot-item.is-empty { color: var(--ink-soft); font-weight: 500; }
.lp-slot.is-picking:not(.is-focus) { border-color: var(--line); border-style: dashed; }
.lp-statbox { display: flex; flex-direction: column; gap: calc(var(--u) * .35); flex: none; }
.lp-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * .3) calc(var(--u) * .6); margin: 0; }
.lp-stat { display: flex; justify-content: space-between; align-items: center; gap: .4em; padding: .22em .6em; background: var(--panel-2); border-radius: calc(var(--u) * .35); border: var(--bw) solid transparent; }
.lp-stat dt { font: 800 calc(var(--u) * .7)/1.2 var(--f-body); letter-spacing: .08em; color: var(--ink-soft); }
.lp-stat dd { margin: 0; display: flex; align-items: center; gap: .3em; font: 800 calc(var(--u) * .95)/1.2 var(--f-body); font-variant-numeric: tabular-nums; }
.lp-stat-arrow { color: var(--ink-soft); }
.lp-stat-d { font-size: .78em; padding: .05em .35em; border-radius: .3em; border: var(--bw) solid var(--line); color: #0B0B12; }
.lp-stat.is-up, .lp-stat.is-down { border-color: var(--line); }
.lp-stat.is-up .lp-stat-d { background: #2FBF71; }
.lp-stat.is-down .lp-stat-d { background: #FF6F7D; }

.lp-tree { flex: 1 1 auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: repeat(3, auto); align-content: start; gap: calc(var(--u) * 1.6) calc(var(--u) * 1.2); padding: calc(var(--u) * .3) calc(var(--u) * .4) calc(var(--u) * .6); overflow: auto; }
.lp-node {
  display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: calc(var(--u) * .55); align-items: center;
  padding: calc(var(--u) * .55) calc(var(--u) * .8); border: var(--bw) solid var(--line); border-radius: var(--r); background: var(--panel-2);
}
.lp-node[data-tier="1"]::before, .lp-node[data-tier="2"]::before {
  content: ''; position: absolute; left: 50%; bottom: 100%; width: var(--bw); height: calc(var(--u) * 1.6 + var(--bw)); background: var(--line); transform: translateX(-50%); margin-bottom: var(--bw);
}
.lp-node-ico { grid-row: span 2; font: calc(var(--u) * 1.3)/1 var(--f-body); }
.lp-node-name { font: 700 calc(var(--u) * .95)/1.2 var(--f-body); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lp-node-cost { font: 700 calc(var(--u) * .68)/1.2 var(--f-body); color: var(--ink-soft); }
.lp-node.is-learned { background: var(--accent); color: var(--on-accent); }
.lp-node.is-learned .lp-node-cost { color: inherit; opacity: .85; }
.lp-node.is-available { background: var(--panel); box-shadow: calc(var(--u) * .2) calc(var(--u) * .2) 0 var(--hi); }
.lp-node.is-available .lp-node-ico { color: var(--accent); -webkit-text-stroke: .1em var(--line); paint-order: stroke fill; }
.lp-node.is-locked { background: var(--panel); border-style: dashed; color: var(--ink-soft); }
.lp-node.is-focus { transform: translateY(calc(var(--u) * -.15)); outline: var(--bw) solid var(--line); outline-offset: calc(var(--u) * .22); }
.lp-node.is-focus.is-locked, .lp-node.is-focus.is-available { background: var(--hi); color: var(--on-hi); }

.lp-pause { display: grid; grid-template-columns: minmax(0, calc(var(--u) * 25)) minmax(0, 1fr); gap: calc(var(--u) * 1.2); align-items: start; }
.lp-pause-main { padding-bottom: calc(var(--u) * 1.1); }
.lp-pause-where { font: 800 calc(var(--u) * .72)/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); }
.lp-pause-where:empty { display: none; }
.lp-pause-list { display: flex; flex-direction: column; gap: calc(var(--u) * .3); padding-left: calc(var(--u) * 1.1); }
.lp-pause-item { display: flex; align-items: center; justify-content: space-between; gap: var(--u); padding: calc(var(--u) * .55) calc(var(--u) * .9); border-radius: calc(var(--u) * .5); font: 700 calc(var(--u) * 1.2)/1.2 var(--f-body); }
.lp-vol-ctl { display: inline-flex; align-items: center; gap: calc(var(--u) * .35); }
.lp-vol-arrow { font-size: .6em; opacity: .5; }
.lp-pause-item.is-focus .lp-vol-arrow { opacity: 1; }
.lp-vol-bar { display: inline-flex; gap: calc(var(--u) * .14); }
.lp-vol-bar i { width: calc(var(--u) * .42); height: calc(var(--u) * 1); background: var(--panel-2); border: var(--bw) solid var(--line); transform: skewX(-14deg); }
.lp-vol-bar i.on { background: var(--hi); }
.lp-vol-pct { font: 800 calc(var(--u) * .78)/1 var(--f-body); min-width: 3em; text-align: right; font-variant-numeric: tabular-nums; }
.lp-pause { height: 100%; grid-template-rows: minmax(0, 1fr); }
.lp-pause-side { min-height: 0; max-height: 100%; display: flex; flex-direction: column; }
.lp-pause-panel { min-height: 0; max-height: 100%; overflow-y: auto; scrollbar-width: thin; }
.lp-scrollpanel.is-focus { outline: calc(var(--bw) * 1.2) solid var(--accent); outline-offset: calc(var(--bw) * -2.5); }
.lp-pause-panel .lp-ctl { overflow: auto; }
.lp-confirm-q { font: 700 calc(var(--u) * 1.1)/1.4 var(--f-body); }
.lp-confirm-row { display: flex; gap: calc(var(--u) * .8); }
.lp-pill { padding: calc(var(--u) * .45) calc(var(--u) * 1.6); border: var(--bw) solid var(--line); border-radius: 999px; background: var(--panel-2); font: 700 calc(var(--u) * 1.05)/1.2 var(--f-body); }
.lp-pill.is-focus { background: var(--accent); color: var(--on-accent); transform: translateY(calc(var(--u) * -.12)); box-shadow: calc(var(--u) * .2) calc(var(--u) * .2) 0 var(--line); }

.lp-ctl { width: 100%; border-collapse: separate; border-spacing: 0 calc(var(--u) * .22); font: 700 calc(var(--u) * .88)/1.25 var(--f-body); }
.lp-ctl th { text-align: left; font: 800 calc(var(--u) * .64)/1.2 var(--f-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); padding: 0 .55em .2em; }
.lp-ctl td { padding: .3em .55em; background: var(--panel-2); }
.lp-ctl td:first-child { border-radius: .4em 0 0 .4em; }
.lp-ctl td:last-child { border-radius: 0 .4em .4em 0; }
.lp-ctl-group th { padding: calc(var(--u) * .55) .55em .1em; color: var(--ink); font: 800 calc(var(--u) * .66)/1.2 var(--f-body); letter-spacing: .16em; text-transform: uppercase; border-bottom: var(--bw) solid var(--line); }
.lp-ctl tbody tr:first-child th { padding-top: 0; }
.lp-kbd { display: inline-block; background: var(--line); color: var(--paper); border-radius: .35em; padding: .12em .5em; font: 800 .88em/1.2 var(--f-body); white-space: nowrap; }
.lp-kbd-pad { background: var(--panel); color: var(--ink); border: var(--bw) solid var(--line); }

/* ---------- transition cards ---------- */
.lp-cards { position: absolute; inset: 0; }
.lp-card { position: absolute; pointer-events: none; }
/* area: square album sleeve at 38% of screen height, enters with a 6-pose slide and a hard stop */
.lp-card-area {
  left: calc(var(--safe) * 1.6); top: 31vh; width: 38vh; height: 38vh; overflow: hidden;
  border: var(--bw) solid var(--line); border-radius: calc(var(--u) * .25); box-shadow: calc(var(--sh) * 1.4) calc(var(--sh) * 1.4) 0 var(--drop);
  transform: translateX(calc(-100% - var(--safe) * 2.5)); transition: transform .3s steps(6, end);
}
.lp-card-area.is-in { transform: none; }
.lp-card-area.is-out { transform: translateX(calc(-100% - var(--safe) * 2.5)); transition: transform .24s steps(4, end); }
.lp-ac-sky { position: absolute; left: 0; right: 0; top: 0; height: 74%; display: flex; flex-direction: column; }
.lp-ac-sky i, .lp-ec-bands i { display: block; flex-basis: 0; min-height: 2px; }
.lp-ac-sky i.is-neon, .lp-ec-bands i.is-neon { flex: 0 0 calc(var(--u) * .25); }
.lp-ac-sun { position: absolute; left: 58%; top: 74%; width: 34%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -62%); border: var(--bw) solid var(--line); }
.lp-ac-sea { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; border-top: var(--bw) solid var(--line); }
.lp-ac-txt { position: absolute; left: 0; right: 0; top: 0; padding: calc(var(--u) * .9) calc(var(--u) * 1); display: grid; grid-template-columns: minmax(0, 1fr); justify-items: start; row-gap: calc(var(--u) * .35); }
.lp-ac-name {
  display: block; width: 100%; font: calc(var(--u) * 4.8)/1.02 var(--f-display); color: var(--paper); overflow-wrap: normal; word-break: keep-all;
  -webkit-text-stroke: .1em var(--line); paint-order: stroke fill; text-shadow: .06em .07em 0 var(--line);
}
.lp-ac-w { display: inline-block; white-space: nowrap; }
.lp-ac-rule { display: block; width: 46%; height: var(--bw); background: var(--line); }
.lp-ac-kana { font: calc(var(--u) * 1.4)/1.1 var(--f-display); color: var(--hi); letter-spacing: .06em; -webkit-text-stroke: .16em var(--line); paint-order: stroke fill; }
.lp-ac-track { position: absolute; left: calc(var(--u) * 1); bottom: calc(var(--u) * .7); font: 800 calc(var(--u) * .66)/1.2 var(--f-body); letter-spacing: .18em; text-transform: uppercase; color: var(--paper); background: var(--line); padding: .3em .7em; border-radius: .3em; }
/* time travel: full-screen wipe of the destination sky bands, top to bottom in 12 poses */
.lp-card-era { inset: 0; display: grid; place-items: center; }
.lp-ec-bands { position: absolute; inset: 0; display: flex; flex-direction: column; clip-path: inset(0 0 100% 0); transition: clip-path .5s steps(12, end); }
.lp-card-era.is-in .lp-ec-bands { clip-path: inset(0 0 0 0); }
.lp-card-era.is-out .lp-ec-bands { clip-path: inset(100% 0 0 0); transition-duration: .3s; transition-timing-function: steps(6, end); }
.lp-ec-sign {
  position: relative; display: grid; justify-items: center; row-gap: calc(var(--u) * .2); padding: calc(var(--u) * 1) calc(var(--u) * 2.4) calc(var(--u) * 1.2);
  background: var(--paper); color: var(--line); border: calc(var(--bw) * 1.4) solid var(--line); border-radius: var(--r); box-shadow: calc(var(--sh) * 1.6) calc(var(--sh) * 1.6) 0 var(--line);
  transform: scale(0); transition: transform .2s steps(3, end) .3s;
}
.lp-ec-sign::after { /* signpost leg, Sonic CD time sign */
  content: ''; position: absolute; left: 50%; top: 100%; width: calc(var(--u) * 1); height: 40vh; transform: translateX(-50%); margin-top: calc(var(--bw) * 1.4);
  background: var(--paper); border: calc(var(--bw) * 1.4) solid var(--line); border-top: 0;
}
.lp-card-era.is-in .lp-ec-sign { transform: none; }
.lp-card-era.is-out .lp-ec-sign { transform: scale(0); transition-delay: 0s; }
.lp-ec-kanji { font: calc(var(--u) * 1.6)/1 var(--f-display); letter-spacing: .1em; }
.lp-ec-word { font: calc(var(--u) * 4.4)/1 var(--f-display); color: var(--accent); -webkit-text-stroke: .1em var(--line); paint-order: stroke fill; text-shadow: .06em .07em 0 var(--line); }
.lp-card-era[data-era="past"] .lp-ec-word { color: #F2624A; }
.lp-card-era[data-era="present"] .lp-ec-word { color: #1E5BD8; }
.lp-card-era[data-era="bad"] .lp-ec-word { color: #FF2E88; }
.lp-card-era[data-era="good"] .lp-ec-word { color: #FF8AC8; }
.lp-ec-qual { font: calc(var(--u) * 1.8)/1 var(--f-display); margin-top: calc(var(--u) * -.2); }
.lp-ec-sub { font: 800 calc(var(--u) * .7)/1.2 var(--f-body); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-soft, #23254F); }

.lp-card-lvl { left: 50%; top: 18%; transform: translate(-50%, 0) scale(.5); opacity: 0; display: grid; justify-items: center; row-gap: calc(var(--u) * .4); transition: transform .2s steps(3, end), opacity .1s steps(1); }
.lp-card-lvl.is-in { transform: translate(-50%, 0) scale(1); opacity: 1; }
.lp-card-lvl.is-out { opacity: 0; transition-duration: .2s; }
.lp-card-lvl-title { font: calc(var(--u) * 2.8)/1.1 var(--f-display); color: var(--gold); white-space: nowrap; -webkit-text-stroke: .1em var(--line); paint-order: stroke fill; text-shadow: .07em .08em 0 var(--accent); }
.lp-card-lvl-num { font: calc(var(--u) * 1.3)/1 var(--f-display); background: var(--accent); color: var(--on-accent); border: var(--bw) solid var(--line); border-radius: 999px; padding: .3em 1em; box-shadow: var(--sh) var(--sh) 0 var(--line); }

/* ---------- title: album sleeve (past sky, ART-BIBLE §3) ---------- */
.lp-title { position: absolute; inset: 0; pointer-events: auto; overflow: hidden; background: #42667C; color: #0B0B12; --hz: 68%; --logo: min(13.5vw, 17vh); }
.lp-tt-art { position: absolute; inset: 0; }
.lp-tt-sky {
  position: absolute; left: 0; right: 0; top: 0; height: var(--hz); overflow: hidden;
  background: linear-gradient(to bottom, #F2624A 0 33.3%, #F57B5A 33.3% 56.7%, #F9936A 56.7% 71.7%, #FCAC7A 71.7% 81.7%, #FFC48A 81.7% 90%, #FFD69D 90% 95%, #E7B26A 95% 100%);
}
.lp-tt-sun { /* disc #FFE8B0, centre above the horizon, 3 skyTop slits across its lower 40% */
  position: absolute; left: 52%; bottom: 0; width: min(54vh, 74vw); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, 20%);
  background: linear-gradient(to bottom, #FFE8B0 0 62%, #F2624A 62% 66%, #FFE8B0 66% 72%, #F2624A 72% 78%, #FFE8B0 78% 84%, #F2624A 84% 92%, #FFE8B0 92%);
}
.lp-tt-cloud { position: absolute; height: auto; }
.lp-tt-cloud-1 { right: 4%; bottom: 8%; width: 21vh; }
.lp-tt-cloud-2 { left: 70%; bottom: 25%; width: 13vh; }
.lp-tt-cloud-3 { left: 19%; bottom: 14%; width: 17vh; }
.lp-tt-city { position: absolute; left: 2%; bottom: 0; width: 34%; height: 8%; color: #634D56; }
.lp-tt-sea { position: absolute; left: 0; right: 0; top: var(--hz); bottom: 0; display: flex; flex-direction: column; border-top: 2px solid #0B0B12; }
.lp-tt-sea i { display: block; flex: 1; }
.lp-tt-sea i:nth-child(1) { background: #2A9D9A; flex: .7; } .lp-tt-sea i:nth-child(2) { background: #36818B; flex: .9; } .lp-tt-sea i:nth-child(3) { background: #42667C; flex: 2; }
.lp-tt-sea::after { /* highlight glint dashes on the sun's side */
  content: ''; position: absolute; left: 52%; top: 4%; height: 50%; width: min(40vh, 60vw); transform: translateX(-50%);
  background: repeating-linear-gradient(to bottom, #E7B26A 0 .5vh, transparent .5vh 2.4vh);
  clip-path: polygon(10% 0, 90% 0, 62% 100%, 38% 100%);
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 9%, transparent 9% 15%, #000 15% 21%, transparent 21% 34%);
  mask: repeating-linear-gradient(90deg, #000 0 9%, transparent 9% 15%, #000 15% 21%, transparent 21% 34%);
}
.lp-tt-planet { position: absolute; left: 80%; top: 6%; width: 14vh; transform: translateX(-50%); }
.lp-tt-chain { position: absolute; left: 80%; top: calc(6% + 12vh); bottom: calc(100% - var(--hz) + 5vh); width: 3.2vh; transform: translateX(-50%); border-left: 3px solid #0B0B12; border-right: 3px solid #0B0B12; }
.lp-tt-spire { position: absolute; left: 80%; bottom: calc(100% - var(--hz) - 1.4vh); width: 13vh; height: 9vh; transform: translateX(-50%); }
.lp-tt-palm { position: absolute; bottom: -1%; display: block; }
.lp-tt-palm-a { left: -6vh; height: 94vh; color: #0B0B12; z-index: 1; }
.lp-tt-palm-b { left: 13vh; height: 75vh; color: #321C38; }
.lp-tt-palm-c { left: 27vh; height: 56vh; color: #5A2E5E; }
.lp-tt-palm-r { right: -8vh; height: 102vh; color: #0B0B12; z-index: 1; }
.lp-tt-palm-r2 { right: 7vh; height: 82vh; color: #321C38; }

.lp-tt-obi {
  position: absolute; left: 3.4vw; top: 0; bottom: 0; width: calc(var(--u) * 4.2); z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: calc(var(--u) * 1.6) 0 calc(var(--u) * 1.3);
  background: #F7F4EC; border-left: var(--bw) solid #0B0B12; border-right: var(--bw) solid #0B0B12;
}
.lp-tt-obi::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: calc(var(--u) * 1); background: #FF6F7D; border-bottom: var(--bw) solid #0B0B12; }
.lp-tt-obi-top, .lp-tt-obi-bot { font: 800 calc(var(--u) * .6)/1 var(--f-body); letter-spacing: .16em; writing-mode: vertical-rl; color: #0B0B12; }
.lp-tt-obi-top { margin-top: calc(var(--u) * .4); }
.lp-tt-obi-v { writing-mode: vertical-rl; font: calc(var(--u) * 2.1)/1 var(--f-display); letter-spacing: .12em; color: #0B0B12; }
.lp-tt-obi-mid { writing-mode: vertical-rl; font: calc(var(--u) * .95)/1 var(--f-display); color: #F7F4EC; background: #1E5BD8; border: var(--bw) solid #0B0B12; padding: .5em .25em; letter-spacing: .1em; }

.lp-tt-front { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; padding: 8vh var(--safe) 12vh calc(3.4vw + var(--u) * 7); }
/* logo リトルプラネット: 2 lines, −8° skew, #FFD23F fill, ink outline, coral hard extrusion (bible §9) */
.lp-tt-logo { display: grid; justify-items: start; transform: skewX(-8deg); transform-origin: left bottom; margin: 0; }
.lp-tt-ja { display: flex; align-items: center; font-family: var(--f-display); line-height: 1; letter-spacing: -.01em; white-space: nowrap; }
.lp-tt-s { font-size: calc(var(--logo) * .55); }
.lp-tt-l { font-size: var(--logo); margin-top: -.08em; }
.lp-tt-txt { position: relative; isolation: isolate; color: #FFD23F; -webkit-text-stroke: .055em #0B0B12; paint-order: stroke fill; }
.lp-tt-txt::before { content: attr(data-text); position: absolute; left: 0; top: 0; z-index: -1; color: #FF6F7D; -webkit-text-stroke: .055em #0B0B12; paint-order: stroke fill; transform: translate(.06em, .06em); }
.lp-tt-mark { height: 1.05em; width: auto; margin-right: .14em; overflow: visible; }
.lp-tt-en { margin: .55em 0 0 .3em; font: 800 calc(var(--logo) * .14)/1 var(--f-body); letter-spacing: .35em; color: #F7F4EC; -webkit-text-stroke: .18em #0B0B12; paint-order: stroke fill; }
.lp-ui[data-era="bad"] .lp-tt-txt { color: #19E3FF; }
.lp-ui[data-era="bad"] .lp-tt-txt::before { color: #FF2E88; }
.lp-tt-act { align-self: center; display: grid; justify-items: center; }
.lp-tt-press {
  font: clamp(16px, 2.8vh, 34px)/1.2 var(--f-display); letter-spacing: .1em; text-transform: uppercase; color: #FFE8B0; cursor: pointer;
  -webkit-text-stroke: .16em #0B0B12; paint-order: stroke fill; text-shadow: .08em .1em 0 #0B0B12;
  animation: lp-blink 1.1s steps(2, jump-none) infinite;
}
.lp-tt-menu {
  min-width: min(calc(var(--u) * 22), calc(100vw - 2 * var(--safe))); background: #F7F4EC; color: #0B0B12; border: var(--bw) solid #0B0B12; border-radius: var(--r);
  box-shadow: calc(var(--sh) * 1.3) calc(var(--sh) * 1.3) 0 #0B0B12; padding: calc(var(--u) * .55) calc(var(--u) * .9) calc(var(--u) * .9) calc(var(--u) * 2.1);
  display: flex; flex-direction: column; gap: calc(var(--u) * .2); animation: lp-up .2s steps(4);
  --accent: #FF6F7D; --on-accent: #0B0B12;
}
.lp-tt-menu-head { display: flex; justify-content: space-between; gap: var(--u); font: 800 calc(var(--u) * .64)/1.2 var(--f-body); letter-spacing: .16em; color: #3B3F8C; border-bottom: var(--bw) solid #0B0B12; padding: calc(var(--u) * .2) 0 calc(var(--u) * .45); margin: 0 0 calc(var(--u) * .35) calc(var(--u) * -1.2); }
.lp-tt-item { display: grid; grid-template-columns: calc(var(--u) * 2.4) 1fr; align-items: center; padding: calc(var(--u) * .5) calc(var(--u) * .9) calc(var(--u) * .5) calc(var(--u) * .6); border-radius: calc(var(--u) * .5); font: 700 calc(var(--u) * 1.25)/1.2 var(--f-body); }
.lp-tt-n { font: calc(var(--u) * .78)/1 var(--f-display); color: #3B3F8C; }
.lp-tt-item.is-focus .lp-tt-n { color: inherit; }
.lp-tt-panel {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 4; width: min(calc(var(--u) * 46), calc(100vw - 2 * var(--safe))); max-height: calc(100vh - 2 * var(--safe));
  background: #F7F4EC; color: #0B0B12; border: var(--bw) solid #0B0B12; border-radius: var(--r); box-shadow: calc(var(--sh) * 1.3) calc(var(--sh) * 1.3) 0 #0B0B12;
  padding: calc(var(--u) * 1.2) calc(var(--u) * 1.4); display: flex; flex-direction: column; gap: calc(var(--u) * .8); animation: lp-up .2s steps(4);
  --panel: #F7F4EC; --panel-2: #F2E3C8; --ink: #0B0B12; --ink-soft: #5A2E5E; --line: #0B0B12; --accent: #F2624A; --on-accent: #0B0B12;
}
.lp-title.is-sub .lp-tt-front { visibility: hidden; }
.lp-tt-ph { font: calc(var(--u) * 1.9)/1 var(--f-display); }
.lp-tt-scroll { min-height: 0; flex: 1 1 auto; }
.lp-credits { display: flex; flex-direction: column; gap: calc(var(--u) * .3); padding-right: calc(var(--u) * .5); user-select: text; -webkit-user-select: text; }
.lp-credits h3 { font: 800 calc(var(--u) * .7)/1.2 var(--f-body); letter-spacing: .14em; text-transform: uppercase; color: #5A2E5E; margin-top: calc(var(--u) * .7); }
.lp-credits h3:first-child { margin-top: 0; }
.lp-credits p { font: 500 calc(var(--u) * .9)/1.4 var(--f-body); overflow-wrap: anywhere; }
.lp-tt-back { align-self: flex-start; display: inline-flex; align-items: center; gap: .5em; font: 700 calc(var(--u) * 1)/1.2 var(--f-body); padding: .3em 1em .3em .35em; border: var(--bw) solid #0B0B12; border-radius: 999px; background: #FFD23F; flex: none; }
.lp-tt-foot { position: absolute; left: 0; right: 0; bottom: max(1.8vh, env(safe-area-inset-bottom)); z-index: 3; display: grid; justify-items: center; gap: calc(var(--u) * .5); padding: 0 var(--safe); text-align: center; }
.lp-tt-legal { font: 500 max(11px, calc(var(--u) * .72))/1.35 var(--f-body); color: #F7F4EC; letter-spacing: .02em; }
.lp-tt-touch { display: none; font: 700 calc(var(--u) * .95)/1.2 var(--f-body); background: #0B0B12; color: #F7F4EC; border-radius: 999px; padding: .4em 1.2em; box-shadow: .18em .18em 0 #FF6F7D; }
.lp-ui.is-touch .lp-tt-touch { display: block; }

/* ---------- small / portrait screens ---------- */
@media (max-width: 760px), (max-aspect-ratio: 4/5) {
  .lp-ui { --u: clamp(12px, 3.5vw, 17px); --safe: calc(var(--u) * .9); }
  .lp-hud-tl { width: calc(var(--u) * 13.5); padding: calc(var(--u) * .45) calc(var(--u) * .6) calc(var(--u) * .55); }
  .lp-hud-tr { gap: calc(var(--u) * .45); }
  .lp-hud-tr-row { flex-direction: column-reverse; align-items: flex-end; gap: calc(var(--u) * .45); }
  .lp-rings { font-size: calc(var(--u) * 1.5); min-width: 0; }
  .lp-ring-hud { width: calc(var(--u) * 1.7); height: calc(var(--u) * 1.7); }
  .lp-obj { position: fixed; left: var(--safe); right: var(--safe); top: calc(var(--safe) + var(--u) * 10.6); max-width: none; }
  .lp-syn { min-width: calc(var(--u) * 11); }
  .lp-gains { top: 46%; }
  .lp-toasts { top: calc(var(--safe) + var(--u) * 13.6); }
  .lp-toast { font-size: calc(var(--u) * 1); }
  .lp-hud-bc { bottom: calc(var(--safe) + var(--u) * 6.6); }
  .lp-bossbar { bottom: calc(var(--safe) + var(--u) * 10); }
  .lp-hints { display: none; }
  .lp-ctl { font-size: calc(var(--u) * .78); }
  .lp-ctl td:first-child { width: 34%; }
  .lp-ctl .lp-kbd { white-space: normal; }
  .lp-combo { top: 31%; }
  .lp-combo-num { font-size: calc(var(--u) * 2.6); }
  .lp-combo-rank { width: calc(var(--u) * 3.8); height: calc(var(--u) * 3.8); }
  .lp-combo-letter { font-size: calc(var(--u) * 2.3); }
  .lp-ui.is-touch .lp-bossbar { bottom: calc(var(--safe) + var(--u) * 12.6); }
  .lp-ui.is-touch .lp-hud-bl, .lp-ui.is-touch .lp-hud-br { bottom: calc(var(--safe) + var(--u) * 3.2); }
  .lp-ui.is-touch .lp-hud-bc { bottom: calc(var(--safe) + var(--u) * 9.4); }
  .lp-node-name { white-space: normal; overflow: visible; }
  .lp-tt-press { font-size: 4.4vw; white-space: nowrap; }
  .lp-dlg-box { padding: calc(var(--u) * 1.7) calc(var(--u) * 1.1) calc(var(--u) * 1.3); }
  .lp-dlg-portrait { left: auto; right: calc(var(--u) * .8); top: calc(var(--u) * -5.4); bottom: auto; width: calc(var(--u) * 5.6); height: calc(var(--u) * 6); }
  .lp-dlg-initials { width: calc(var(--u) * 3.6); height: calc(var(--u) * 3.6); font-size: calc(var(--u) * 1.4); margin-right: calc(var(--u) * .5); }
  .lp-dlg-name { left: calc(var(--u) * 1) !important; font-size: calc(var(--u) * 1.15); }
  .lp-dlg-text { font-size: calc(var(--u) * 1.15); }
  .lp-dlg-choices { margin-bottom: calc(var(--u) * 6); justify-content: stretch; padding-right: 0; }
  .lp-dlg-choice { min-width: 0; font-size: calc(var(--u) * 1.05); }
  .lp-dlg-choice.is-focus { transform: none; }
  .lp-menu-frame { height: calc(100vh - 2 * var(--safe)); width: calc(100vw - 2 * var(--safe)); gap: calc(var(--u) * .7); }
  .lp-menu-title { font-size: calc(var(--u) * 1.9); }
  .lp-menu-kana, .lp-menu-bg span { display: none; }
  .lp-eq, .lp-sk, .lp-qs, .lp-shop, .lp-pause { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-rows: max-content; overflow-y: auto; align-content: start; padding: 0 calc(var(--sh) + 2px) calc(var(--sh) + 2px) 0; }
  .lp-eq > .lp-panel, .lp-sk > .lp-panel, .lp-qs > .lp-panel, .lp-shop > .lp-panel, .lp-pause > * { overflow: visible; min-height: auto; }
  .lp-menu .lp-list { max-height: 36vh; flex: none; }
  .lp-tree { overflow: visible; }
  .lp-tabs { gap: calc(var(--u) * .5); }
  .lp-tab { padding: calc(var(--u) * .4) calc(var(--u) * 1); }
  .lp-menu-foot { justify-content: center; font-size: calc(var(--u) * .72); }
  .lp-card-area { left: 50%; top: 24vh; width: min(38vh, 80vw); height: min(38vh, 80vw); transform: translateX(-50%) translateY(calc(-100vh)); }
  .lp-card-area.is-in { transform: translateX(-50%); }
  .lp-card-area.is-out { transform: translateX(-50%) translateY(calc(-100vh)); }
  .lp-ec-word { font-size: calc(var(--u) * 3.2); }
  .lp-card-lvl-title { font-size: calc(var(--u) * 2); }
  .lp-title { --hz: 64%; --logo: 16vw; }
  .lp-tt-obi { display: none; }
  .lp-tt-front { padding: 9vh var(--safe) 15vh calc(var(--safe) * 1.6); }
  .lp-tt-planet { left: 78%; top: 5%; width: 11vh; }
  .lp-tt-chain { left: 78%; top: calc(5% + 9.5vh); width: 2.4vh; }
  .lp-tt-spire { left: 78%; width: 10vh; height: 7vh; }
  .lp-tt-palm-a { left: -14vw; height: 52vh; }
  .lp-tt-palm-b { left: 8vw; height: 42vh; }
  .lp-tt-palm-c { display: none; }
  .lp-tt-palm-r { right: -16vw; height: 58vh; }
  .lp-tt-palm-r2 { display: none; }
  .lp-tt-sun { width: 80vw; }
  .lp-tt-cloud-1 { right: 2%; bottom: 6%; width: 22vw; }
  .lp-tt-cloud-2 { display: none; }
  .lp-tt-cloud-3 { left: 6%; bottom: 18%; width: 20vw; }
  .lp-tt-city { width: 56%; }
}
@media (max-height: 520px) {
  .lp-ui { --u: clamp(11px, 2.6vh, 15px); }
  .lp-gains { display: none; }
}

/* ---------- motion: snappy, stepped (anime on twos) ---------- */
@keyframes lp-pop { 0% { transform: scale(.88); } 60% { transform: scale(1.08); } 100% { transform: scale(1); } }
@keyframes lp-drop { from { transform: translateY(calc(var(--u) * -.8)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lp-slide { from { transform: translateX(calc(var(--u) * 3)); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes lp-up { from { transform: translate(var(--tx, 0), calc(var(--u) * 1.2)); opacity: 0; } to { opacity: 1; } }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes lp-blink { 50% { opacity: .2; } }
@keyframes lp-flash { 50% { background: var(--accent); } }
@keyframes lp-bob { 50% { transform: translateY(.2em); } }
@keyframes lp-spin { from { transform: scaleX(1); } 50% { transform: scaleX(-1); } to { transform: scaleX(1); } }
@keyframes lp-rise { 0% { opacity: 0; transform: translateY(0); } 15% { opacity: 1; } 85% { opacity: 1; } 100% { opacity: 0; transform: translateY(calc(var(--u) * 1.2)); } }
@keyframes lp-shake { 0%, 100% { translate: 0; } 25% { translate: -3px 0; } 50% { translate: 3px 0; } 75% { translate: -2px 0; } }
.lp-dlg { --tx: -50%; }

@media (prefers-reduced-motion: reduce) {
  .lp-ui *, .lp-ui *::before, .lp-ui *::after { animation: none !important; transition: none !important; }
}
.lp-ui.is-reduced *, .lp-ui.is-reduced *::before, .lp-ui.is-reduced *::after { animation: none !important; transition: none !important; }