*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
  touch-action: none;
}
::selection { background: transparent; color: inherit; }
:root {
  --bg: #0C1A2C; --panel: #132538; --ink: #E4EAF1; --muted: #93A6BA;
  --line: #2A4160; --lamp: #F0D68C; --btn: #F0D68C; --btn-ink: #10223A;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg: #E3E9EF; --panel: #F5F7F9; --ink: #1A2433; --muted: #566779;
    --line: #C3CEDA; --lamp: #A8771F; --btn: #1B3A5C; --btn-ink: #F5F7F9;
  }
}
:root[data-theme="light"] {
  --bg: #E3E9EF; --panel: #F5F7F9; --ink: #1A2433; --muted: #566779;
  --line: #C3CEDA; --lamp: #A8771F; --btn: #1B3A5C; --btn-ink: #F5F7F9;
}
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  overflow: hidden; overscroll-behavior: none; position: fixed;
  background: var(--bg); color: var(--ink);
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  touch-action: manipulation;
}
@supports (height: 100dvh) { html, body { height: 100dvh; } }

#game-shell {
  position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh;
  display: flex; flex-direction: column; touch-action: none;
}
#game-stage { order: 1; }
#control-deck { order: 2; }
#game-stage { position: relative; flex: 0 0 75%; height: 75%; min-height: 0; }
#screen-wrap {
  position: absolute; inset: 0; overflow: hidden; display: flex; flex-direction: column;
  background: #0C1A2C;
}
#bg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; z-index: 0; pointer-events: none; }
.scene {
  position: relative; z-index: 1; flex: 1 1 46%; min-height: 0;
  width: 100%; overflow: hidden;
}
.scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.place {
  position: absolute; left: 10px; top: max(8px, env(safe-area-inset-top));
  font-size: 11px; letter-spacing: .22em; color: #F0D68C;
  background: rgba(8,16,28,.5); padding: 5px 12px; border-radius: 0; z-index: 2;
  border: 1px solid rgba(240,214,140,.25);
}
.choices button { text-align: left; letter-spacing: .04em; }
.box {
  position: relative; z-index: 4; flex: 1 1 54%; min-height: 0;
  background: var(--panel);
  border-top: 1px solid rgba(240,214,140,.22);
  padding: 12px 16px 8px; display: flex; flex-direction: column; gap: 6px;
  overflow: auto; pointer-events: auto; touch-action: pan-y;
}
.box.is-title {
  position: absolute; left: 0; right: 0; bottom: 0;
  flex: none; width: 100%; height: auto; max-height: 62%;
  justify-content: flex-end; align-items: center; text-align: center;
  gap: 8px; padding: 20px 20px 12px;
  background: linear-gradient(180deg, rgba(8,16,28,0) 0%, rgba(8,16,28,.88) 22%, #0C1828 100%);
  border-top: 0; overflow: hidden;
}
#screen-wrap.is-title .scene { flex: 1 1 auto; }
.speaker { font-size: 13px; color: var(--lamp); font-weight: 600; letter-spacing: .1em; min-height: 1.2em; }
.text { font-size: 15px; line-height: 1.8; flex: 1; cursor: pointer; white-space: pre-wrap; }
.text:focus { outline: none; }
.hint { font-size: 11px; color: var(--muted); text-align: right; letter-spacing: .08em; }
.choices { display: flex; flex-direction: column; gap: 8px; }
.game-btn, button {
  font-family: inherit; font-size: 15px; cursor: pointer; border-radius: 2px;
  padding: 10px 14px; border: 1px solid rgba(240,214,140,.28); background: transparent; color: var(--ink);
  text-align: left; line-height: 1.4; min-height: 48px; min-width: 48px;
  touch-action: manipulation; transition: transform .08s ease, opacity .08s ease, background .08s ease, border-color .08s ease;
}
.game-btn:active, button:active, .game-btn.is-pressed { transform: scale(0.92); opacity: .88; background: rgba(240,214,140,.1); }
button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
button.primary {
  background: transparent; color: var(--lamp); border: 1px solid var(--lamp);
  text-align: center; letter-spacing: .32em; padding-left: 22px;
}
button.primary:active, button.primary.is-pressed { background: rgba(240,214,140,.14); }
button:disabled { opacity: .38; cursor: not-allowed; pointer-events: none; }
.title-screen { width: 100%; max-width: 440px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.title-copy { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.kicker { margin: 0; font-size: 11px; letter-spacing: .42em; color: var(--lamp); text-shadow: 0 1px 10px rgba(8,16,28,.85); }
.title { font-size: 32px; font-weight: 500; letter-spacing: .28em; line-height: 1.25; text-indent: .28em; margin: 0; color: #F6EFDD; text-shadow: 0 2px 16px rgba(8,16,28,.9); }
.title::after {
  content: ""; display: block; width: 42px; height: 1px; margin: 10px auto 0;
  background: var(--lamp); opacity: .7;
}
.sub { font-size: 13px; color: #C5D0DC; line-height: 1.85; margin: 0; max-width: 22em; text-shadow: 0 1px 10px rgba(8,16,28,.85); }
.records {
  display: flex; justify-content: center; gap: 18px; width: 100%;
  margin: 4px 0 2px; padding: 10px 0; list-style: none;
  border-top: 1px solid rgba(240,214,140,.16);
  border-bottom: 1px solid rgba(240,214,140,.16);
}
.records li { display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 48px; }
.records .lamp {
  width: 8px; height: 8px; border-radius: 50%;
  border: 1px solid rgba(240,214,140,.55); background: transparent;
}
.records .on .lamp { background: var(--lamp); box-shadow: 0 0 10px rgba(240,214,140,.7); border-color: var(--lamp); }
.records .lab { font-size: 11px; letter-spacing: .18em; color: var(--muted); }
.records .on .lab { color: var(--lamp); }
.title-actions { width: 100%; display: flex; flex-direction: column; gap: 6px; }
.title-actions button { width: 100%; text-align: center; letter-spacing: .18em; }
button.ghost {
  width: auto; min-width: 48px; border: 0; color: var(--muted);
  letter-spacing: .14em; font-size: 12px; min-height: 48px; background: transparent;
}
.true-hint { margin: 0; font-size: 11px; color: var(--muted); letter-spacing: .08em; }
.endtitle { font-size: 18px; font-weight: 500; letter-spacing: .18em; }
.row { display: flex; gap: 8px; flex-wrap: wrap; }
.row button { flex: 1; min-width: 120px; text-align: center; }
.small { font-size: 13px; padding: 8px 12px; }

#lh { transform-box: view-box; transform-origin: 0 0; transition: transform 1.4s ease; }
.endcard {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center; padding: 20px; color: #F6EFDD;
  text-shadow: 0 1px 12px rgba(0,0,0,.55);
  background: radial-gradient(ellipse at center, rgba(4,10,22,.42), rgba(4,10,22,0) 70%);
  opacity: 0; transition: opacity 1.8s ease; pointer-events: none; z-index: 3;
}
.endcard.show { opacity: 1; }
.endcard .en { font-size: 14px; letter-spacing: .3em; }
.endcard .es { font-size: 22px; font-weight: 600; letter-spacing: .14em; line-height: 1.4; }
.endcard .el { font-size: 14px; letter-spacing: .12em; margin-top: 6px; }
.art { opacity: 0; transition: opacity .9s ease; }
.art.show { opacity: 1; }
.bob { animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(3px)} }
.flick { animation: flick 2.4s ease-in-out infinite; }
@keyframes flick { 0%,100%{opacity:.18} 50%{opacity:.32} }
.beam { transform-origin: 520px 118px; animation: sweep 6s linear infinite; }
.road { animation: road 6s linear infinite; opacity: 0; }
@keyframes sweep { 0%{transform:rotate(-70deg)} 100%{transform:rotate(290deg)} }
@keyframes road { 0%,32%{opacity:0} 40%{opacity:.85} 52%{opacity:0} 100%{opacity:0} }
@media (prefers-reduced-motion: reduce) {
  .beam { animation: none; transform: rotate(95deg); }
  .road { animation: none; opacity: .5; }
  .endcard { transition: none; }
  #lh { transition: none; }
  .art { transition: none; }
  .bob, .flick { animation: none; }
}

#control-deck {
  flex: 0 0 25%; height: 25%; min-height: 0;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 8px max(10px, env(safe-area-inset-right, 10px))
          max(8px, env(safe-area-inset-bottom, 8px))
          max(10px, env(safe-area-inset-left, 10px));
  background: #0E1C2E; border-top: 1px solid rgba(240,214,140,.2);
  z-index: 8; touch-action: none; overflow: hidden;
}
#control-deck .game-btn {
  flex: 1; text-align: center; background: transparent; color: var(--lamp);
  border-color: rgba(240,214,140,.38); min-height: 56px; letter-spacing: .2em;
}
#control-deck .sys { display: flex; flex-direction: column; gap: 6px; flex: none; }
#control-deck .sys .game-btn { min-width: 48px; min-height: 48px; flex: none; color: var(--ink); border-color: var(--line); letter-spacing: 0; }

@media (orientation: portrait) {
  .box.is-title { max-height: 44%; padding-top: 8px; }
  .box.is-title .kicker,
  .box.is-title .title { display: none; }
}
@media (orientation: landscape) {
  .box.is-title { max-height: 64%; padding: 18px 24px 10px; }
  .title-screen {
    max-width: none; flex-direction: row; align-items: center;
    justify-content: space-between; text-align: left; gap: 20px;
  }
  .title-copy { align-items: flex-start; flex: 1; min-width: 0; }
  .title { font-size: 28px; text-indent: 0; }
  .title::after { margin-left: 0; margin-right: auto; }
  .records { justify-content: flex-start; padding: 6px 0; gap: 14px; }
  .title-actions { width: min(240px, 36%); flex-shrink: 0; }
}
#pauseDlg {
  border: 1px solid rgba(240,214,140,.28); border-radius: 2px; background: var(--panel); color: var(--ink);
  padding: 22px 20px; max-width: 320px; width: calc(100% - 40px);
}
#pauseDlg::backdrop { background: rgba(8,16,28,.75); }
#pauseDlg h2 { margin: 0 0 14px; text-align: center; color: var(--lamp); }
#pauseDlg .col { display: flex; flex-direction: column; gap: 10px; }
#pauseDlg .game-btn { width: 100%; text-align: center; }