/* Pip & Button — storybook diptych UI */
:root{
  --paper:#f6ead8; --paper2:#efddc0; --ink:#4a3428; --ink-soft:#6d5340;
  --amber:#e8a04c; --amber-d:#c96f2e; --rose:#d4677a; --rose-d:#a8415a;
  --moss:#7d8f4e; --shadow:rgba(46,26,14,.35);
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent}
html,body{margin:0;height:100%;overflow:hidden;background:#2b1d18;font-family:system-ui,'Segoe UI',sans-serif;color:var(--ink)}
#app{position:fixed;inset:0}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}

/* ---------- split-screen dressing ---------- */
.vp-frame{position:absolute;top:0;bottom:0;width:50%;pointer-events:none;z-index:3}
.vp-frame-l{left:0;box-shadow:inset 0 0 0 3px rgba(74,52,40,.55), inset 0 0 120px rgba(201,111,46,.20);background:linear-gradient(135deg,rgba(232,160,76,.10),rgba(232,160,76,0) 40%)}
.vp-frame-r{right:0;box-shadow:inset 0 0 0 3px rgba(74,52,40,.55), inset 0 0 120px rgba(168,65,90,.20);background:linear-gradient(225deg,rgba(212,103,122,.10),rgba(212,103,122,0) 40%)}
.vp-frame-l.active{box-shadow:inset 0 0 0 4px rgba(232,160,76,.9), inset 0 0 120px rgba(201,111,46,.25)}
.vp-frame-r.active{box-shadow:inset 0 0 0 4px rgba(212,103,122,.9), inset 0 0 120px rgba(168,65,90,.25)}
#gutter{position:absolute;left:50%;top:0;bottom:0;width:14px;transform:translateX(-50%);z-index:4;pointer-events:none;
  background:linear-gradient(90deg,#3a281e,#5a4130 30%,#6b4d38 50%,#5a4130 70%,#3a281e)}
.gutter-stitch{position:absolute;inset:4px 5px;border-left:2px dashed rgba(246,234,216,.5)}

/* ---------- HUD ---------- */
.hud{position:absolute;top:14px;z-index:6;display:flex;flex-direction:column;gap:8px;pointer-events:none}
.hud-l{left:18px}.hud-r{right:18px;align-items:flex-end}
.hud-chip{display:inline-flex;align-items:center;gap:8px;background:rgba(246,234,216,.92);border:2px solid var(--ink);
  border-radius:999px;padding:4px 12px;font-weight:700;font-size:14px;box-shadow:0 3px 10px var(--shadow)}
.pip-dot,.btn-dot{width:12px;height:12px;border-radius:50%;display:inline-block;border:2px solid var(--ink)}
.pip-dot{background:var(--amber)}.btn-dot{background:var(--rose)}
.hud-tag{font-size:10px;letter-spacing:.08em;background:var(--ink);color:var(--paper);padding:2px 7px;border-radius:6px}
.hud-dim{opacity:.55;font-weight:500}
.hud-prompt{max-width:270px;background:rgba(43,29,24,.85);color:var(--paper);border-radius:12px;padding:7px 12px;
  font-size:13px;font-weight:600;line-height:1.35;opacity:0;transform:translateY(-4px);transition:opacity .18s,transform .18s;border:1.5px solid rgba(246,234,216,.35)}
.hud-prompt.show{opacity:1;transform:none}
.hud-prompt kbd{background:var(--paper);color:var(--ink)}
#trinket-counter{position:absolute;top:14px;left:50%;transform:translateX(-50%);z-index:6;pointer-events:none;font-size:15px}
.trinket-glyph{color:var(--amber-d);font-size:16px}
#chapter-toast{position:absolute;top:64px;left:50%;transform:translate(-50%,-8px);z-index:6;pointer-events:none;
  font-family:Georgia,'Iowan Old Style',serif;font-style:italic;font-size:22px;color:var(--paper);
  background:rgba(43,29,24,.78);padding:10px 26px;border-radius:14px;border:1.5px solid rgba(246,234,216,.4);
  opacity:0;transition:opacity .4s,transform .4s;text-align:center}
#chapter-toast.show{opacity:1;transform:translate(-50%,0)}
#objective-toast{position:absolute;bottom:22px;left:50%;transform:translate(-50%,8px);z-index:6;pointer-events:none;
  font-size:15px;font-weight:700;color:var(--ink);background:rgba(246,234,216,.94);padding:9px 20px;border-radius:999px;
  border:2px solid var(--ink);opacity:0;transition:opacity .3s,transform .3s;text-align:center;box-shadow:0 4px 14px var(--shadow);max-width:80vw}
#objective-toast.show{opacity:1;transform:translate(-50%,0)}

/* ---------- overlays ---------- */
.overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;
  background:rgba(30,19,14,.62);backdrop-filter:blur(3px);opacity:0;pointer-events:none;transition:opacity .28s;padding:20px}
.overlay.show{opacity:1;pointer-events:auto}
#title{background:radial-gradient(120% 120% at 50% 20%,#54402c 0%,#33231a 70%)}

.panel{background:var(--paper);border:3px solid var(--ink);border-radius:18px;box-shadow:0 18px 60px rgba(0,0,0,.5);
  padding:30px 38px;max-width:520px;width:100%;text-align:center;max-height:88vh;overflow:auto}
.panel-wide{max-width:760px;text-align:left}
.panel h2{font-family:Georgia,serif;font-size:30px;margin:0 0 14px;color:var(--ink)}
.panel h3{font-family:Georgia,serif;margin:16px 0 6px;color:var(--ink-soft)}
.howto-cols{display:grid;grid-template-columns:1fr 1fr;gap:8px 30px}
.keys{list-style:none;margin:0;padding:0;font-size:14px;line-height:1.9}
kbd{display:inline-block;background:var(--ink);color:var(--paper);border-radius:6px;padding:1px 7px;font:700 12px/1.6 system-ui;
  margin:0 1px;box-shadow:0 2px 0 rgba(0,0,0,.35);vertical-align:middle}
.menu{display:flex;flex-direction:column;gap:10px;margin-top:18px}
.menu-row{display:flex;gap:10px;justify-content:center;margin-top:20px}
.btn{appearance:none;border:2.5px solid var(--ink);background:var(--paper);color:var(--ink);border-radius:12px;
  padding:11px 20px;font:700 16px/1.2 system-ui;cursor:pointer;box-shadow:0 3px 0 var(--ink);transition:transform .08s,box-shadow .08s,background .15s}
.btn:hover{background:#fff8ec;transform:translateY(-1px);box-shadow:0 4px 0 var(--ink)}
.btn:active{transform:translateY(2px);box-shadow:0 1px 0 var(--ink)}
.btn-primary{background:var(--amber);color:#3d2408}
.btn-primary:hover{background:#f2b164}
.btn-ghost{background:transparent;box-shadow:0 2px 0 rgba(74,52,40,.5)}
.btn-sub{display:block;font-size:11px;font-weight:600;opacity:.7;margin-top:3px}

/* ---------- title book ---------- */
.book{display:flex;max-width:860px;width:min(92vw,860px);border-radius:20px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.55), 0 0 0 4px var(--ink);background:var(--paper)}
.book-page{flex:1;padding:38px 36px;background:var(--paper)}
.book-left{background:var(--paper2);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
.book-spine{width:16px;background:linear-gradient(90deg,#3a281e,#6b4d38 50%,#3a281e);position:relative}
.book-spine::after{content:"";position:absolute;inset:8px 6px;border-left:2px dashed rgba(246,234,216,.45)}
.cover-art{width:min(240px,80%);border:3px solid var(--ink);border-radius:10px;box-shadow:0 10px 24px var(--shadow)}
.cover-caption{font-family:Georgia,serif;font-style:italic;font-size:14px;color:var(--ink-soft)}
.title-word{font-family:Georgia,'Iowan Old Style',serif;font-size:clamp(34px,5vw,52px);margin:0;color:var(--ink);line-height:1.02}
.amp{color:var(--rose-d);font-style:italic}
.subtitle{font-family:Georgia,serif;font-style:italic;font-size:19px;color:var(--amber-d);margin:6px 0 14px}
.title-blurb{font-size:15px;line-height:1.55;color:var(--ink-soft);margin:0 0 6px}
.kbd-note{font-size:13px;margin-top:12px;color:var(--rose-d);font-weight:600}

/* ---------- vignette book ---------- */
.vig-book{display:flex;max-width:880px;width:min(94vw,880px);min-height:420px;border-radius:18px;overflow:hidden;
  box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 4px var(--ink);background:var(--paper)}
.vig-page{flex:1.1;display:flex;align-items:center;justify-content:center;background:var(--paper2);padding:26px}
.vig-page svg{width:100%;height:auto;max-height:64vh}
.vig-spine{width:14px;background:linear-gradient(90deg,#3a281e,#6b4d38 50%,#3a281e);position:relative}
.vig-spine::after{content:"";position:absolute;inset:8px 6px;border-left:2px dashed rgba(246,234,216,.45)}
.vig-right{flex:1;flex-direction:column;gap:22px;background:var(--paper)}
.vig-text{font-family:Georgia,serif;font-size:clamp(17px,2.2vw,21px);line-height:1.65;color:var(--ink);font-style:italic;text-align:center;white-space:pre-line}
.vig-text b{font-style:normal;color:var(--rose-d)}

/* ---------- finale ---------- */
.panel-finale{max-width:560px}
.finale-art svg{width:100%;max-height:220px}
.finale-text{font-family:Georgia,serif;font-style:italic;font-size:17px;line-height:1.6;color:var(--ink-soft);white-space:pre-line}
.finale-stats{display:flex;gap:18px;justify-content:center;margin:14px 0 4px;font-weight:700;font-size:14px}
.finale-stats .stat{background:var(--paper2);border:2px solid var(--ink);border-radius:12px;padding:8px 16px}

/* ---------- fader ---------- */
#fader{position:absolute;inset:0;background:#1d130e;opacity:0;pointer-events:none;transition:opacity .35s;z-index:15}
#fader.show{opacity:1}

/* ---------- touch controls ---------- */
#touch{position:absolute;inset:0;z-index:8;pointer-events:none}
.t-cluster{position:absolute;bottom:26px;display:grid;gap:10px;pointer-events:none}
.t-left{left:22px;grid-template-columns:repeat(3,58px);grid-template-rows:repeat(2,58px)}
.t-left [data-tk=up]{grid-column:2;grid-row:1}.t-left [data-tk=left]{grid-column:1;grid-row:2}
.t-left [data-tk=down]{grid-column:2;grid-row:2}.t-left [data-tk=right]{grid-column:3;grid-row:2}
.t-right{right:22px;grid-template-columns:repeat(2,62px);grid-template-rows:repeat(2,62px)}
.t-right [data-tk=jump]{grid-column:2;grid-row:1/3}.t-right [data-tk=act]{grid-column:1;grid-row:1}
.t-right [data-tk=swap]{grid-column:1;grid-row:2}
.t-btn{pointer-events:auto;border:2.5px solid var(--ink);border-radius:16px;background:rgba(246,234,216,.82);
  font-size:22px;color:var(--ink);box-shadow:0 3px 0 var(--ink);touch-action:none}
.t-btn:active{transform:translateY(2px);box-shadow:none;background:var(--amber)}
.t-big{font-size:30px}

#rotate-note{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);z-index:7;display:none;
  background:rgba(246,234,216,.9);border:2px solid var(--ink);border-radius:999px;padding:5px 14px;font-size:12px;font-weight:700}

/* ---------- responsive ---------- */
@media (max-width:720px){
  .book{flex-direction:column;max-height:92vh;overflow:auto}
  .book-spine{width:auto;height:12px;background:linear-gradient(180deg,#3a281e,#6b4d38 50%,#3a281e)}
  .book-spine::after{inset:5px 8px;border-left:none;border-top:2px dashed rgba(246,234,216,.45)}
  .vig-book{flex-direction:column;max-height:92vh;overflow:auto}
  .vig-spine{width:auto;height:12px}
  .howto-cols{grid-template-columns:1fr}
  .panel{padding:22px 20px}
  .hud-prompt{max-width:170px;font-size:11px}
  #chapter-toast{font-size:16px}
}
@media (max-height:480px){
  .book-page{padding:18px}
  .title-blurb{display:none}
}