/* ───────── screens: title, splash, system sheets ───────── */
#screens { position: fixed; inset: 0; pointer-events: none; z-index: 30; }
#screens > * { pointer-events: auto; }
.screen { position: absolute; inset: 0; opacity: 0; transition: opacity .35s var(--ease); }
.screen.on { opacity: 1; }
.screen.leaving { opacity: 0; pointer-events: none; }

/* ───────── splash ───────── */
#splash {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3.2rem;
  background: radial-gradient(80% 70% at 50% 45%, #10243a, #060d16 75%);
  color: var(--paper);
  cursor: pointer;
  transition: opacity .8s var(--ease);
  text-align: center;
  padding: 4rem;
}
#splash.out { opacity: 0; pointer-events: none; }
#splash .mark { width: 9rem; height: 9rem; }
#splash .t1 { font: 700 4.6rem/1.3 var(--serif); letter-spacing: .1em; }
#splash .t2 { font: italic 500 2.6rem/1 var(--latin); color: var(--muted); letter-spacing: .08em; margin-top: -1.6rem; }
#splash .tap { margin-top: 4rem; font: 500 2.4rem/1 var(--sans); letter-spacing: .3em; color: #fff; animation: tap 2.4s ease-in-out infinite; }
#splash .note { font: 400 1.8rem/1.6 var(--sans); color: var(--muted); letter-spacing: .02em; }
#splash .note b { color: var(--sun); font-weight: 600; }
@keyframes tap { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
body.portrait #splash .t1 { font-size: 5.6rem; }
body.portrait #splash .tap { font-size: 3.2rem; }
body.portrait #splash .note { font-size: 2.6rem; }
body.portrait #splash .t2 { font-size: 3.2rem; }

/* ───────── title ─────────
   Layout keeps the key-visual figure clear: brand block lower-right over the sea (or top-right for the
   cleared-game visual), menu bottom-left over a corner gradient; 4:3 stacks both on the right. */
.title { background: #05090f; overflow: hidden; --mf: clamp(15px, 1.45vw, 24px); }
.title .kv { position: absolute; inset: -4%; background: #0b1622 center / cover no-repeat; animation: kenburns 38s ease-in-out infinite alternate; transform-origin: 62% 40%; }
@keyframes kenburns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.1) translate(-1.2%, -.8%); } }
.title .shade { position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(48% 62% at 0% 100%, rgba(4, 10, 18, .82), rgba(4, 10, 18, .4) 55%, transparent 82%),
    radial-gradient(58% 70% at 100% 88%, rgba(4, 10, 18, .5), transparent 72%),
    linear-gradient(0deg, rgba(4, 10, 18, .42), transparent 26%); }
.title.lay-tr .shade { background:
    radial-gradient(48% 62% at 0% 100%, rgba(4, 10, 18, .82), rgba(4, 10, 18, .4) 55%, transparent 82%),
    radial-gradient(55% 60% at 100% 6%, rgba(4, 10, 18, .5), transparent 72%),
    linear-gradient(0deg, rgba(4, 10, 18, .4), transparent 26%); }
.title canvas.tfx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.title .col { display: contents; }
.title .brand { position: absolute; right: 6vw; bottom: 25vh; color: #fff; text-align: right; isolation: isolate; }
.title.lay-tr .brand { bottom: auto; top: 9vh; }
.title .brand::before { content: ''; position: absolute; z-index: -1; inset: -26% -16% -30% -22%; background: radial-gradient(closest-side, rgba(4, 10, 20, .62), rgba(4, 10, 20, .3) 58%, transparent); pointer-events: none; }
.title .logo { position: relative; display: inline-block; margin: 0; font: 700 clamp(34px, 6vw, 104px)/1.16 var(--serif); letter-spacing: .05em; text-shadow: 0 .06em .4em rgba(0, 0, 0, .55), 0 0 1em rgba(111, 211, 255, .14); }
.title .logo .l1 { position: relative; display: block; padding-right: 1.15em; }
.title .logo .l2 { display: block; }
.title .logo .bracket { color: var(--sun); font-weight: 400; opacity: .92; }
.title .en { margin-top: .5em; font: italic 500 clamp(15px, 1.75vw, 30px)/1.2 var(--latin); color: rgba(246, 241, 230, .86); letter-spacing: .08em; text-shadow: 0 .1em .5em rgba(0, 0, 0, .7); }
.title .tagline { margin-top: .9em; font: 400 clamp(13px, 1.08vw, 19px)/1.6 var(--serif); color: rgba(246, 241, 230, .78); letter-spacing: .05em; text-shadow: 0 .1em .6em rgba(0, 0, 0, .85); }
.title .rtag { position: absolute; right: .22em; top: .12em; width: .52em; transform: rotate(9deg); transform-origin: 50% 0; animation: tagswing 6s ease-in-out infinite; filter: drop-shadow(0 .06em .1em rgba(0, 0, 0, .45)); }
@keyframes tagswing { 0%, 100% { transform: rotate(9deg); } 50% { transform: rotate(3deg); } }
.title .rtag svg { width: 100%; overflow: visible; display: block; }
.title .menu { position: absolute; left: max(4.6vw, 22px); bottom: 7vh; display: flex; flex-direction: column; align-items: flex-start; }
.title .menu button {
  position: relative; text-align: left;
  padding: .52em 0;
  font: 500 var(--mf)/1 var(--sans);
  letter-spacing: .2em; color: rgba(255, 255, 255, .88);
  transition: color .2s, transform .3s var(--ease);
  text-shadow: 0 .1em .6em rgba(0, 0, 0, .7);
}
.title .menu button::before { content: ''; position: absolute; left: -1.7em; top: 50%; width: 1.2em; height: 2px; background: linear-gradient(90deg, transparent, var(--sun)); transform: scaleX(0); transform-origin: right; transition: transform .35s var(--ease); }
.title .menu button:hover, .title .menu button:focus-visible { color: var(--sun); transform: translateX(.35em); outline: none; }
.title .menu button:hover::before, .title .menu button:focus-visible::before { transform: scaleX(1); }
.title .menu button[disabled] { color: rgba(255, 255, 255, .32); pointer-events: none; }
.title .menu button small { margin-left: .9em; font-size: .7em; letter-spacing: .05em; color: var(--muted); }
.title .foot { position: absolute; right: 2.2vw; bottom: 2.2vh; font: 500 clamp(10px, .8vw, 13px)/1 var(--sans); letter-spacing: .14em; color: rgba(255, 255, 255, .45); text-align: right; }
.title.intro .brand { animation: rise 1.8s var(--ease) both; }
.title.intro .menu { animation: rise 1.6s var(--ease) .6s both; }
@keyframes rise { from { opacity: 0; transform: translateY(2rem); filter: blur(.6rem); } to { opacity: 1; transform: none; filter: none; } }

/* lay-tr (cleared visual, figures in the centre): one-line logo along the top-right sky */
.title.lay-tr .brand { top: 6vh; right: 4.5vw; }
.title.lay-tr .logo { font-size: clamp(24px, 3.2vw, 60px); }
.title.lay-tr .logo .l1, .title.lay-tr .logo .l2 { display: inline; padding: 0; }
.title.lay-tr .logo .l1::after { content: ' '; }
.title.lay-tr .rtag { position: relative; display: inline-block; vertical-align: top; right: auto; top: .05em; margin-left: .2em; width: .6em; }
.title.lay-tr .en { margin-top: .35em; }
.title.lay-tr .tagline { display: none; }

/* lay-br (wide): brand + a horizontal menu row together over the dark sea, lower right */
.title.lay-br .col { display: flex; flex-direction: column; align-items: flex-end; gap: 3.4vh; position: absolute; right: 5.5vw; bottom: 6.5vh; isolation: isolate; }
.title.lay-br .col::before { content: ''; position: absolute; z-index: -1; inset: -30% -12% -24% -18%; background: radial-gradient(closest-side, rgba(4, 10, 20, .6), rgba(4, 10, 20, .28) 60%, transparent); pointer-events: none; }
.title.lay-br .brand { position: relative; right: auto; bottom: auto; }
.title.lay-br .brand::before { display: none; }
.title.lay-br .menu { position: relative; left: auto; bottom: auto; flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: .1em 1.5em; max-width: 62vw; }
.title.lay-br .menu button::before { left: 0; right: .2em; top: auto; bottom: .2em; width: auto; height: 2px; background: var(--sun); transform-origin: left; }
.title.lay-br .menu button:hover, .title.lay-br .menu button:focus-visible { transform: translateY(-.12em); }

/* 4:3-ish windows: stack brand + menu on the right so the figure on the left stays clear */
@media (orientation: landscape) and (max-aspect-ratio: 3/2) {
  .title.lay-br .col { display: flex; flex-direction: column; align-items: flex-end; gap: 5vh; position: absolute; right: 6vw; bottom: 7vh; }
  .title.lay-br .brand, .title.lay-br .menu { position: relative; right: auto; bottom: auto; left: auto; top: auto; }
  .title.lay-br .menu { flex-direction: column; align-items: flex-end; gap: 0; }
  .title.lay-br .menu button::before { left: auto; right: -1.7em; top: 50%; bottom: auto; width: 1.2em; }
  .title.lay-br .menu button { text-align: right; }
  .title.lay-br .menu button::before { left: auto; right: -1.7em; transform-origin: left; background: linear-gradient(270deg, transparent, var(--sun)); }
  .title.lay-br .menu button:hover, .title.lay-br .menu button:focus-visible { transform: translateX(-.35em); }
  .title.lay-br .logo { font-size: clamp(34px, 7vw, 96px); }
  .title.lay-br .shade { background: radial-gradient(70% 80% at 100% 100%, rgba(4, 10, 18, .78), rgba(4, 10, 18, .35) 55%, transparent 85%), linear-gradient(0deg, rgba(4, 10, 18, .35), transparent 30%); }
}
/* short landscape (phones sideways) */
@media (orientation: landscape) and (max-height: 560px) {
  .title { --mf: clamp(13px, 3.6vh, 18px); }
  .title .logo { font-size: min(6vw, 11vh); }
  .title .tagline { display: none; }
  .title .brand { bottom: 12vh; }
  .title.lay-tr .brand { top: 7vh; }
  .title .menu { bottom: 5vh; }
  .title.lay-br .col { bottom: 5vh; gap: 2.4vh; }
  .title .menu button { padding: .42em 0; }
}
/* portrait: weight the crop toward the moon and sea, text over the water */
body.portrait .title .kv { background-position: var(--kv-pos, 50% 50%); }
body.portrait .title .shade { background: linear-gradient(180deg, rgba(5, 12, 20, .25) 0%, transparent 30%, rgba(5, 12, 20, .55) 58%, rgba(5, 12, 20, .9) 100%); }
body.portrait .title .col { display: flex; flex-direction: column; align-items: center; gap: 5vh; position: absolute; left: 0; right: 0; bottom: calc(var(--safe-b) + 7vh); }
body.portrait .title .brand, body.portrait .title .menu { position: relative; inset: auto; text-align: center; }
body.portrait .title .col::before { display: none; }
body.portrait .title .menu, body.portrait .title.lay-br .menu { flex-direction: column; gap: 0; max-width: none; }
body.portrait .title.lay-br .col { right: 0; align-items: center; }
body.portrait .title.lay-tr .col { bottom: calc(var(--safe-b) + 7vh); }
body.portrait .title.lay-tr .brand { top: auto; right: auto; }
body.portrait .title.lay-tr .logo { font-size: 10.4vw; }
body.portrait .title.lay-tr .logo .l1, body.portrait .title.lay-tr .logo .l2 { display: block; }
body.portrait .title.lay-tr .logo .l1::after { content: none; }
body.portrait .title.lay-tr .rtag { position: absolute; right: -.62em; top: .12em; margin: 0; width: .5em; }
body.portrait .title.lay-tr .tagline { display: block; }
body.portrait .title .brand::before { inset: -18% -10% -22%; }
body.portrait .title .logo { font-size: 10.4vw; }
body.portrait .title .logo .l1 { padding-right: 0; padding-left: 0; }
body.portrait .title .rtag { right: -.62em; width: .5em; }
body.portrait .title .en { font-size: 4.4vw; }
body.portrait .title .tagline { font-size: 3.5vw; padding: 0 8vw; }
body.portrait .title .menu { align-items: center; --mf: 4.4vw; }
body.portrait .title .menu button { padding: .55em 1em; text-align: center; }
body.portrait .title .menu button::before { display: none; }
body.portrait .title .menu button:hover, body.portrait .title .menu button:focus-visible { transform: none; }
body.portrait .title .foot { left: 0; right: 0; text-align: center; bottom: calc(var(--safe-b) + 2.2vh); font-size: 2.8vw; }

/* ───────── system sheet (white, clean) ───────── */
.sys { background: rgba(6, 10, 15, .62); backdrop-filter: blur(10px) saturate(1.1); -webkit-backdrop-filter: blur(10px) saturate(1.1); display: flex; align-items: center; justify-content: center; }
.sheet {
  --sink: #1f2328;
  position: relative;
  width: min(178rem, calc(100% - 6rem));
  height: min(100rem, calc(100% - 6rem));
  display: flex; flex-direction: column;
  background: #fbfaf7;
  color: var(--sink);
  border-radius: 2.4rem;
  box-shadow: 0 3rem 8rem rgba(0, 0, 0, .45);
  overflow: hidden;
  transform: translateY(2rem) scale(.985);
  transition: transform .45s var(--ease);
}
.screen.on .sheet { transform: none; }
.sheet-head { display: flex; align-items: center; gap: 2.4rem; padding: 3rem 3.6rem 2rem 4rem; flex: none; }
.plate { display: inline-flex; align-items: center; gap: 1rem; height: 5.4rem; padding: 0 3.6rem; background: #16181c; color: #fff; font: 700 2.5rem/1 var(--sans); letter-spacing: .12em; clip-path: polygon(1.5rem 0, calc(100% - 1.5rem) 0, 100% 50%, calc(100% - 1.5rem) 100%, 1.5rem 100%, 0 50%); white-space: nowrap; }
.plate::before { content: ''; width: .9rem; height: .9rem; background: var(--sun); transform: rotate(45deg); }
.tabs { display: flex; gap: .6rem; flex-wrap: wrap; }
.tabs button { height: 4.4rem; padding: 0 2rem; border-radius: 99rem; font: 600 1.9rem/1 var(--sans); color: #5d636b; transition: background .15s, color .15s; }
.tabs button:hover { background: #eeece6; color: var(--sink); }
.tabs button.on { background: #16181c; color: #fff; }
.sheet-close { margin-left: auto; width: 5.4rem; height: 5.4rem; border-radius: 50%; display: grid; place-items: center; color: #3a3f46; transition: background .15s, transform .25s var(--ease); flex: none; }
.sheet-close:hover { background: #eeece6; transform: rotate(90deg); }
.sheet-close svg { width: 2.4rem; height: 2.4rem; stroke: currentColor; stroke-width: 2.4; }
.sheet-body { flex: 1; min-height: 0; overflow: auto; padding: 1rem 4rem 4rem; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c9c5bb transparent; }
.sheet-foot { flex: none; display: flex; align-items: center; gap: 1.6rem; padding: 1.6rem 4rem 2.8rem; color: #6b7078; font: 500 1.7rem/1.4 var(--sans); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .8rem; height: 4.8rem; padding: 0 2.6rem; border-radius: 1rem; background: #fff; border: .2rem solid #1c1e22; color: #1c1e22; font: 600 1.8rem/1 var(--sans); transition: transform .2s var(--ease), box-shadow .2s, background .15s; white-space: nowrap; }
.btn:hover { transform: translateY(-.2rem); box-shadow: 0 .8rem 1.6rem rgba(0, 0, 0, .12), 0 0 0 .4rem rgba(255, 207, 122, .45); }
.btn.dark { background: #16181c; color: #fff; }
.btn.danger { border-color: #c4453a; color: #c4453a; }
.btn[disabled] { opacity: .4; pointer-events: none; }

/* save / load */
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2.4rem; }
.slot {
  position: relative; display: flex; flex-direction: column; text-align: left;
  background: #fff; border: .2rem solid #e3e0d8; border-radius: 1.6rem; overflow: hidden;
  transition: transform .25s var(--ease), box-shadow .25s, border-color .2s;
}
.slot:hover, .slot:focus-visible { transform: translateY(-.4rem); border-color: #1c1e22; box-shadow: 0 1.4rem 3rem rgba(0, 0, 0, .14); outline: none; }
.slot .th { position: relative; aspect-ratio: 16 / 9; background: #e9e6df center / cover; }
.slot .th img { width: 100%; height: 100%; object-fit: cover; display: block; }
.slot .no { position: absolute; left: 1.2rem; top: 1.2rem; padding: .6rem 1.1rem; background: #16181c; color: #fff; font: 700 1.5rem/1 var(--sans); letter-spacing: .1em; border-radius: .6rem; }
.slot .meta { padding: 1.5rem 1.8rem 1.8rem; display: flex; flex-direction: column; gap: .7rem; min-height: 11rem; }
.slot .ch { font: 700 1.9rem/1.2 var(--sans); }
.slot .ex { font: 400 1.75rem/1.45 var(--serif); color: #555b63; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slot .tm { margin-top: auto; font: 500 1.45rem/1 var(--sans); color: #8b9098; letter-spacing: .04em; }
.slot.empty .th { display: grid; place-items: center; background: repeating-linear-gradient(135deg, #f1efe9 0 1.2rem, #ebe8e1 1.2rem 2.4rem); }
.slot.empty .th > span:not(.no) { font: 400 3.4rem/1 var(--hand); color: #9a968c; }
.slot .del { position: absolute; right: 1rem; top: 1rem; width: 3.6rem; height: 3.6rem; border-radius: 50%; background: rgba(255, 255, 255, .92); color: #555; display: none; place-items: center; font: 700 2rem/1 var(--sans); }
.slot:hover .del { display: grid; }
.slot .del:hover { background: #c4453a; color: #fff; }
.slot.fresh { animation: fresh 1.2s var(--ease); }
@keyframes fresh { 0% { box-shadow: 0 0 0 0 rgba(255, 207, 122, .9); } 100% { box-shadow: 0 0 0 2.4rem rgba(255, 207, 122, 0); } }

/* settings */
.settings { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 6rem; }
.set-group h3 { margin: 2.4rem 0 1.2rem; font: 800 1.5rem/1 var(--sans); letter-spacing: .3em; color: #b9690d; }
.set-row { display: flex; align-items: center; gap: 2.4rem; min-height: 6.4rem; border-bottom: 1px solid #ebe8e1; }
.set-row label, .set-row .lbl { flex: none; width: 21rem; font: 600 1.9rem/1.3 var(--sans); }
.set-row .ctl { flex: 1; display: flex; align-items: center; gap: 1.6rem; min-width: 0; }
.set-row .val { width: 7rem; text-align: right; font: 600 1.6rem/1 var(--sans); color: #6b7078; font-variant-numeric: tabular-nums; }
.seg { display: inline-flex; background: #efede7; border-radius: 99rem; padding: .4rem; gap: .2rem; flex-wrap: wrap; }
.seg button { height: 4rem; padding: 0 2rem; border-radius: 99rem; font: 600 1.7rem/1 var(--sans); color: #5d636b; }
.seg button.on { background: #16181c; color: #fff; }
input[type=range] { -webkit-appearance: none; appearance: none; flex: 1; min-width: 0; height: 4rem; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: .6rem; border-radius: 99rem; background: linear-gradient(90deg, #16181c var(--p, 50%), #dcd8cf var(--p, 50%)); }
input[type=range]::-moz-range-track { height: .6rem; border-radius: 99rem; background: linear-gradient(90deg, #16181c var(--p, 50%), #dcd8cf var(--p, 50%)); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 2.6rem; height: 2.6rem; margin-top: -1rem; border-radius: 50%; background: var(--sun); border: .3rem solid #16181c; box-shadow: 0 .2rem .6rem rgba(0, 0, 0, .25); }
input[type=range]::-moz-range-thumb { width: 2rem; height: 2rem; border-radius: 50%; background: var(--sun); border: .3rem solid #16181c; }
.set-row.set-col { flex-direction: column; align-items: flex-start; gap: 1.2rem; padding: 1.6rem 0; }
.chips { display: flex; flex-wrap: wrap; gap: .8rem; }
.chip { height: 3.8rem; padding: 0 1.8rem; border-radius: 99rem; border: .2rem solid #dcd8cf; font: 600 1.6rem/1 var(--sans); color: #8b9097; background: #fff; transition: background .15s, color .15s, border-color .15s; }
.chip.on { background: #16181c; border-color: #16181c; color: #fff; }
.chip:not(.on) { text-decoration: line-through; text-decoration-thickness: .15rem; }
.set-row .hint { font: 500 1.5rem/1.4 var(--sans); color: #8b9097; }
.preview-text { margin-top: 1.4rem; padding: 2rem 2.4rem; border-radius: 1.2rem; background: #fff; border: .2rem solid #e3e0d8; font: calc(2.6rem * var(--fs, 1))/1.7 var(--serif); min-height: 10rem; }

/* backlog */
.log-list { display: flex; flex-direction: column; gap: .4rem; max-width: 130rem; margin: 0 auto; }
.log-item { display: grid; grid-template-columns: 18rem 1fr auto; align-items: start; gap: 2.4rem; padding: 2rem 1.6rem; border-bottom: 1px solid #ebe8e1; border-radius: 1rem; }
.log-item:hover { background: #f3f1ec; }
.log-item .who { justify-self: end; display: inline-flex; align-items: center; gap: .8rem; height: 3.6rem; padding: 0 1.8rem; background: #16181c; color: #fff; font: 600 1.6rem/1 var(--sans); letter-spacing: .06em; clip-path: polygon(1rem 0, calc(100% - 1rem) 0, 100% 50%, calc(100% - 1rem) 100%, 1rem 100%, 0 50%); white-space: nowrap; }
.log-item .who i { width: .7rem; height: .7rem; transform: rotate(45deg); background: var(--c, #d6e2ee); }
.log-item .who.none { visibility: hidden; }
.log-item .tx { font: calc(2.4rem * var(--fs, 1))/1.7 var(--serif); color: #2a2f36; word-break: keep-all; overflow-wrap: anywhere; white-space: pre-wrap; }
.log-item.center .tx { font-weight: 700; }
.log-item .rb { width: 4.6rem; height: 4.6rem; border-radius: 50%; border: .2rem solid #c9c5bb; color: #555b63; display: grid; place-items: center; opacity: .55; transition: opacity .15s, background .15s, border-color .15s; }
.log-item:hover .rb { opacity: 1; }
.log-item .rb:hover { background: #16181c; border-color: #16181c; color: #fff; }
.log-item .rb svg { width: 2.2rem; height: 2.2rem; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.log-item .acts { display: flex; gap: .8rem; align-items: center; min-width: 4.6rem; }
.log-item .vp { opacity: .8; border-color: #e3c58f; color: #b9690d; }
.log-item .vp svg { fill: currentColor; stroke: none; width: 1.8rem; height: 1.8rem; margin-left: .2rem; }
.log-item.choice-pick .tx { color: #b9690d; font-family: var(--sans); font-weight: 600; font-size: 2rem; }
.log-empty { text-align: center; padding: 10rem 0; color: #8b9098; font: 400 3.6rem/1 var(--hand); }

/* pause menu */
.pause .card { width: min(56rem, calc(100% - 6rem)); padding: 4rem; background: #fbfaf7; color: #1f2328; border-radius: 2.4rem; box-shadow: 0 3rem 8rem rgba(0, 0, 0, .45); display: flex; flex-direction: column; gap: 1.2rem; transform: translateY(2rem); transition: transform .4s var(--ease); }
.pause.on .card { transform: none; }
.pause .card .plate { align-self: center; margin-bottom: 1.6rem; }
.pause .card .btn { height: 6rem; font-size: 2.1rem; justify-content: flex-start; padding: 0 3rem; border-color: #e3e0d8; }
.pause .card .btn:hover { border-color: #1c1e22; }
.pause .card .where { text-align: center; font: 500 1.6rem/1.5 var(--sans); color: #8b9098; margin-top: .8rem; }

/* confirm */
#modal-root { position: fixed; inset: 0; z-index: 80; pointer-events: none; }
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(4, 8, 12, .55); pointer-events: auto; opacity: 0; transition: opacity .25s; }
.modal.on { opacity: 1; }
.modal .box { width: min(64rem, calc(100% - 6rem)); padding: 4.4rem 4.4rem 3.4rem; background: #fbfaf7; color: #1f2328; border-radius: 2rem; box-shadow: 0 3rem 8rem rgba(0, 0, 0, .5); text-align: center; transform: scale(.96); transition: transform .3s var(--ease); }
.modal.on .box { transform: none; }
.modal .msg { font: 500 2.3rem/1.6 var(--sans); white-space: pre-line; word-break: keep-all; }
.modal .sub { margin-top: 1rem; font: 400 1.8rem/1.5 var(--sans); color: #6b7078; }
.modal .row { display: flex; gap: 1.4rem; justify-content: center; margin-top: 3.4rem; }
.modal .row .btn { min-width: 16rem; height: 5.4rem; font-size: 2rem; }

/* gallery */
.cg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.cg-tile { position: relative; aspect-ratio: 16 / 9; border-radius: 1.2rem; overflow: hidden; background: #e5e1d8; border: .2rem solid transparent; transition: transform .25s var(--ease), border-color .2s, box-shadow .25s; }
.cg-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cg-tile:hover:not(.locked) { transform: translateY(-.4rem); border-color: #1c1e22; box-shadow: 0 1.2rem 2.6rem rgba(0, 0, 0, .18); }
.cg-tile .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 2.4rem 1.4rem 1.1rem; background: linear-gradient(transparent, rgba(0, 0, 0, .7)); color: #fff; font: 600 1.6rem/1.2 var(--sans); text-align: left; }
.cg-tile.locked { background: linear-gradient(160deg, #23303d, #121a23); cursor: default; }
.cg-tile.locked::before { content: '?'; position: absolute; inset: 0; display: grid; place-items: center; font: 400 6rem/1 var(--hand); color: rgba(255, 255, 255, .22); }
.cg-tile.nofile { display: grid; place-items: center; background: linear-gradient(160deg, #e9e5dc, #d8d3c8); }
.cg-tile.nofile span { font: 400 2.6rem/1.2 var(--hand); color: #7d796f; padding: 0 1rem; text-align: center; }
.cg-count { font: 600 1.7rem/1 var(--sans); color: #6b7078; letter-spacing: .06em; }
.viewer { position: fixed; inset: 0; z-index: 70; background: #000; display: flex; align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; transition: opacity .35s; }
.viewer.on { opacity: 1; }
.viewer img { max-width: 100%; max-height: 100%; object-fit: contain; }
.viewer .cap { position: absolute; left: 50%; bottom: 3rem; transform: translateX(-50%); padding: 1rem 2.4rem; background: rgba(0, 0, 0, .55); color: #fff; font: 500 1.9rem/1 var(--sans); border-radius: 99rem; }
.tracks { display: flex; flex-direction: column; gap: .4rem; max-width: 120rem; margin: 0 auto; }
.track { display: grid; grid-template-columns: 6rem 1fr auto 5.6rem; align-items: center; gap: 2rem; padding: 1.4rem 2rem; border-radius: 1.2rem; text-align: left; transition: background .15s; }
.track:hover:not(.locked) { background: #f1efe9; }
.track .n { font: 600 1.7rem/1 var(--sans); color: #a0a6ae; font-variant-numeric: tabular-nums; }
.track .tt { font: 700 2.2rem/1.2 var(--serif); }
.track .id { font: 500 1.5rem/1 var(--sans); color: #8b9098; letter-spacing: .06em; }
.track .pl { width: 5rem; height: 5rem; border-radius: 50%; border: .2rem solid #1c1e22; display: grid; place-items: center; }
.track .pl svg { width: 1.8rem; height: 1.8rem; fill: #1c1e22; }
.track.playing { background: #16181c; color: #fff; }
.track.playing .pl { border-color: var(--sun); }
.track.playing .pl svg { fill: var(--sun); }
.track.playing .id, .track.playing .n { color: rgba(255, 255, 255, .55); }
.track.locked { opacity: .45; cursor: default; }
.track.nofile .id::after { content: ' · 파일 준비 중'; }
.eq { display: inline-flex; gap: .3rem; align-items: flex-end; height: 2rem; margin-left: 1.4rem; vertical-align: middle; }
.eq i { width: .4rem; background: var(--sun); animation: eq .9s ease-in-out infinite; }
.eq i:nth-child(2) { animation-delay: -.3s; } .eq i:nth-child(3) { animation-delay: -.6s; } .eq i:nth-child(4) { animation-delay: -.15s; }
@keyframes eq { 0%, 100% { height: 20%; } 50% { height: 100%; } }
.end-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; }
.end-card { position: relative; padding: 3.4rem 2.4rem; min-height: 19rem; border-radius: 1.6rem; background: #16181c; color: #fff; display: flex; flex-direction: column; justify-content: flex-end; gap: 1rem; overflow: hidden; }
.end-card::before { content: ''; position: absolute; right: -3rem; top: -3rem; width: 14rem; height: 14rem; border-radius: 50%; background: radial-gradient(closest-side, var(--c, rgba(111, 211, 255, .35)), transparent); }
.end-card .k { font: italic 500 3rem/1 var(--latin); letter-spacing: .06em; }
.end-card .s { font: 400 2rem/1.3 var(--serif); color: rgba(255, 255, 255, .75); }
.end-card.locked { background: #ebe8e1; color: #9a968c; }
.end-card.locked::before { display: none; }
.end-card.locked .s { color: #9a968c; }
.tips { display: grid; grid-template-columns: 34rem 1fr; gap: 3rem; height: 100%; min-height: 50rem; }
.tip-list { overflow: auto; display: flex; flex-direction: column; gap: .2rem; padding-right: 1rem; border-right: 1px solid #ebe8e1; }
.tip-list button { text-align: left; padding: 1.3rem 1.8rem; border-radius: 1rem; font: 600 2rem/1.2 var(--sans); color: #2a2f36; }
.tip-list button:hover { background: #f1efe9; }
.tip-list button.on { background: #16181c; color: #fff; }
.tip-list button.locked { color: #b5b1a8; }
.tip-body { overflow: auto; padding: 1rem 2rem 2rem 0; }
.tip-body h2 { margin: 0 0 .6rem; font: 700 4rem/1.3 var(--serif); }
.tip-body .rd { font: 500 1.7rem/1 var(--sans); letter-spacing: .14em; color: #b9690d; margin-bottom: 2.6rem; }
.tip-body p { font: 400 2.3rem/1.85 var(--serif); color: #2a2f36; word-break: keep-all; margin: 0 0 1.2em; }
.gal-pane { height: 100%; }

/* chapters + flowchart */
.flow-wrap { margin-bottom: 2rem; }
.flow { width: 100%; max-width: 150rem; display: block; margin: 0 auto; overflow: visible; }
.flow .edge { fill: none; stroke: #cfcabe; stroke-width: 3; }
.flow .edge.on { stroke: #16181c; }
.flow .edge.truep { stroke-dasharray: 8 8; }
.flow .node rect, .flow .node circle { fill: #ebe8e1; stroke: #cfcabe; stroke-width: 2.5; }
.flow .node.on rect, .flow .node.on circle { fill: #fff; stroke: #16181c; }
.flow .node.cur rect { fill: #16181c; }
.flow .node text { font: 700 15px var(--sans); fill: #9a968c; text-anchor: middle; dominant-baseline: central; letter-spacing: .05em; }
.flow .node.on text { fill: #16181c; }
.flow .node.cur text { fill: #fff; }
.flow .node.on { cursor: pointer; }
.flow .node.on:hover rect { stroke: #b9690d; stroke-width: 3.5; }
.flow .rlabel { font: 800 13px var(--sans); letter-spacing: .25em; }
.flow .endnode { fill: #16181c; }
.flow .endnode.off { fill: #ddd9d0; }
.ch-cols { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1.6rem; }
.ch-col h4 { margin: 0 0 1.2rem; display: flex; align-items: center; gap: 1rem; font: 800 1.6rem/1 var(--sans); letter-spacing: .25em; color: #3a3f46; }
.ch-col h4 i { width: 1rem; height: 1rem; border-radius: .2rem; transform: rotate(45deg); background: var(--c); }
.ch-item { display: flex; flex-direction: column; gap: .6rem; width: 100%; text-align: left; padding: 1.6rem 1.8rem; margin-bottom: 1rem; border-radius: 1.2rem; background: #fff; border: .2rem solid #e3e0d8; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; }
.ch-item:hover:not(.locked) { transform: translateY(-.3rem); border-color: #1c1e22; box-shadow: 0 1rem 2rem rgba(0, 0, 0, .1); }
.ch-item .l { font: 700 1.4rem/1 var(--sans); letter-spacing: .2em; color: var(--c2, #8b9098); }
.ch-item .t { font: 700 2.1rem/1.3 var(--serif); }
.ch-item.locked { background: #f1efe9; border-style: dashed; cursor: default; }
.ch-item.locked .t { color: #b5b1a8; }

/* credits */
.credits { background: #000; overflow: hidden; cursor: default; }
.credits .bgs > div { position: absolute; inset: -3%; background: #000 center / cover; opacity: 0; transition: opacity 3s ease; animation: kenburns 30s ease-in-out infinite alternate; }
.credits .bgs > div.on { opacity: .55; }
.credits .veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, .1), rgba(0, 0, 0, .55) 35%, rgba(0, 0, 0, .55) 65%, rgba(0, 0, 0, .1)); }
.credits .roll { position: absolute; left: 50%; top: 100%; width: min(80rem, 90%); transform: translateX(-50%); text-align: center; color: #fff; will-change: transform; }
.credits .roll h1 { font: 700 6rem/1.3 var(--serif); letter-spacing: .1em; margin: 0 0 1rem; }
.credits .roll .en { font: italic 500 2.8rem/1.3 var(--latin); color: rgba(255, 255, 255, .75); margin-bottom: 16rem; }
.credits .roll .sec { margin-bottom: 9rem; }
.credits .roll .role { font: 700 1.6rem/1 var(--sans); letter-spacing: .4em; color: var(--sun); margin-bottom: 2rem; }
.credits .roll .name { font: 400 2.8rem/1.7 var(--serif); }
.credits .roll .fin { margin-top: 26rem; font: 700 4rem/1.6 var(--serif); letter-spacing: .1em; }
.credits .skip { position: absolute; right: 3rem; bottom: 3rem; padding: 1.2rem 2.4rem; color: rgba(255, 255, 255, .7); font: 600 1.7rem/1 var(--sans); letter-spacing: .2em; border: 1px solid rgba(255, 255, 255, .35); border-radius: 99rem; }
.credits .skip:hover { color: #fff; border-color: #fff; }
body.portrait .credits .roll h1 { font-size: 7rem; }
body.portrait .credits .roll .name { font-size: 3.4rem; }
body.portrait .credits .roll .role { font-size: 2.2rem; }

/* small landscape viewports: keep menus legible by zooming the panels (rem follows the stage scale) */
.sys > .sheet, .pause .card, .modal .box, .credits .roll, .viewer .cap { zoom: var(--mz, 1); }

/* ───────── portrait & compact sheets ───────── */
body.portrait .sheet, body.compact .sheet { width: 100%; height: 100%; border-radius: 0; }
body.portrait .sheet-head { padding: calc(var(--safe-t) + 2.4rem) 2.4rem 1.6rem; flex-wrap: wrap; gap: 1.6rem; }
body.portrait .sheet-close { position: absolute; right: 1.6rem; top: calc(var(--safe-t) + 2rem); width: 7rem; height: 7rem; }
body.portrait .sheet-close svg { width: 3.2rem; height: 3.2rem; }
body.portrait .plate { height: 6.6rem; font-size: 3rem; }
body.portrait .tabs { width: 100%; overflow-x: auto; flex-wrap: nowrap; }
body.portrait .tabs button { height: 6rem; font-size: 2.6rem; padding: 0 2.6rem; flex: none; }
body.portrait .sheet-body { padding: 1rem 2.4rem calc(4rem + var(--safe-b)); }
body.portrait .sheet-foot { padding: 1.6rem 2.4rem calc(2.4rem + var(--safe-b)); font-size: 2.4rem; flex-wrap: wrap; }
body.portrait .btn { height: 6.6rem; font-size: 2.6rem; }
body.portrait .slots { grid-template-columns: 1fr; gap: 1.6rem; }
body.portrait .slot { flex-direction: row; }
body.portrait .slot .th { width: 44%; flex: none; }
body.portrait .slot .meta { min-height: 0; padding: 1.4rem 1.8rem; }
body.portrait .slot .ch { font-size: 2.6rem; }
body.portrait .slot .ex { font-size: 2.4rem; }
body.portrait .slot .tm { font-size: 2.1rem; }
body.portrait .slot .no { font-size: 2rem; }
body.portrait .slot .del { display: grid; width: 5rem; height: 5rem; font-size: 2.6rem; }
body.portrait .settings { grid-template-columns: 1fr; gap: 0; }
body.portrait .set-group h3 { font-size: 2.2rem; }
body.portrait .set-row { flex-wrap: wrap; gap: 1.2rem; padding: 1.6rem 0; }
body.portrait .set-row label, body.portrait .set-row .lbl { width: 100%; font-size: 2.7rem; }
body.portrait .set-row .val { font-size: 2.4rem; width: 9rem; }
body.portrait .seg button { height: 6rem; font-size: 2.5rem; padding: 0 2.6rem; }
body.portrait input[type=range] { height: 6rem; }
body.portrait input[type=range]::-webkit-slider-thumb { width: 4rem; height: 4rem; margin-top: -1.7rem; }
body.portrait .chip { height: 5.6rem; font-size: 2.4rem; padding: 0 2.4rem; }
body.portrait .set-row .hint { font-size: 2.2rem; }
body.portrait .preview-text { font-size: calc(3.2rem * var(--fs, 1)); }
body.portrait .log-item { grid-template-columns: 1fr 7rem; gap: 1rem 1.6rem; padding: 2rem .6rem; }
body.portrait .log-item .who { justify-self: start; grid-column: 1; font-size: 2.3rem; height: 4.6rem; }
body.portrait .log-item .who.none { display: none; }
body.portrait .log-item .tx { grid-column: 1; font-size: calc(3.1rem * var(--fs, 1)); }
body.portrait .log-item .acts { grid-column: 2; grid-row: 1 / span 2; align-self: center; flex-direction: column; }
body.portrait .log-item .rb { width: 6.4rem; height: 6.4rem; opacity: 1; }
body.portrait .log-item .rb svg { width: 3rem; height: 3rem; }
body.portrait .pause .card { width: calc(100% - 6rem); padding: 5rem 4rem; }
body.portrait .pause .card .btn { height: 8rem; font-size: 3rem; }
body.portrait .pause .card .where { font-size: 2.4rem; }
body.portrait .modal .msg { font-size: 3rem; }
body.portrait .modal .sub { font-size: 2.5rem; }
body.portrait .modal .row .btn { height: 7.4rem; font-size: 2.8rem; min-width: 0; flex: 1; }
body.portrait .cg-grid { grid-template-columns: 1fr 1fr; gap: 1.6rem; }
body.portrait .cg-tile .cap { font-size: 2.3rem; }
body.portrait .cg-tile.nofile span { font-size: 3.6rem; }
body.portrait .flow-wrap { overflow-x: auto; margin: 0 -2.4rem 2rem; padding: 0 2.4rem; }
body.portrait .flow { width: 250vw; max-width: none; }
body.portrait .track { grid-template-columns: 4rem 1fr 7rem; }
body.portrait .track .id { display: none; }
body.portrait .track .tt { font-size: 3rem; }
body.portrait .track .n { font-size: 2.4rem; }
body.portrait .track .pl { width: 6.6rem; height: 6.6rem; }
body.portrait .end-grid { grid-template-columns: 1fr 1fr; }
body.portrait .end-card .k { font-size: 3.6rem; }
body.portrait .end-card .s { font-size: 2.6rem; }
body.portrait .tips { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
body.portrait .tip-list { flex-direction: row; overflow-x: auto; border: 0; padding: 0 0 1.4rem; border-bottom: 1px solid #ebe8e1; }
body.portrait .tip-list button { flex: none; font-size: 2.6rem; white-space: nowrap; }
body.portrait .tip-body h2 { font-size: 4.8rem; }
body.portrait .tip-body .rd { font-size: 2.2rem; }
body.portrait .tip-body p { font-size: 3.1rem; }
body.portrait .ch-cols { grid-template-columns: 1fr 1fr; }
body.portrait .ch-col h4 { font-size: 2.3rem; }
body.portrait .ch-item .l { font-size: 2rem; }
body.portrait .ch-item .t { font-size: 2.8rem; }
body.portrait .sheet-foot .cg-count, body.portrait .cg-count { font-size: 2.4rem; }
body.compact .sheet-head { padding: 1.6rem 2.4rem 1rem; }
body.compact .sheet-body { padding: .6rem 2.4rem 2rem; }
body.compact .slots { gap: 1.4rem; }
body.compact .slot .meta { min-height: 0; padding: 1rem 1.2rem; }