/* Fog Bank. The screen is a 1950s newspaper comic strip that grows down the page
   (after Framed and Pentiment): ink panels, hand-lettered balloons, gold captions.
   Phone voices get jagged balloons, Q gets a black one, whispers a dashed one. */
:root {
  --news: #ebe5d6;      /* newsprint */
  --white: #fbf8f0;     /* balloon white */
  --ink: #141414;
  --pencil: #8a847a;
  --gold: #c9a227;
  --cap: #efdc9b;       /* caption-box gold */
  --hand: "Patrick Hand", "Comic Neue", "Chalkboard SE", "Comic Sans MS", sans-serif;
  --logo: "Bangers", "Impact", "Arial Black", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; background: #2a2723; color: var(--ink); font-family: var(--hand); overflow: hidden; }
button { font: inherit; color: inherit; }
[hidden] { display: none !important; }

#app { position: relative; height: 100%; max-width: 480px; margin: 0 auto; background: var(--news); display: flex; flex-direction: column; overflow: hidden; }
@media (min-width: 560px) { #app { height: min(100%, 940px); top: 50%; transform: translateY(-50%); } }

.logo { font-family: var(--logo); font-size: 64px; line-height: .9; letter-spacing: .02em; color: var(--ink); text-shadow: 3px 3px 0 var(--gold); text-transform: uppercase; }
.logo.small { font-size: 30px; text-shadow: 2px 2px 0 var(--gold); }

/* ── cover ── */
#cover { flex: 1; display: flex; flex-direction: column; gap: 12px; padding: calc(18px + env(safe-area-inset-top, 0px)) 16px calc(18px + env(safe-area-inset-bottom, 0px)); }
#cover .logo { text-align: center; font-size: 76px; }
.cover-panel { flex: 1; min-height: 0; border: 3px solid var(--ink); background: url(art/w_lobby.webp) center 45% / cover; }
.cover-cap { background: var(--cap); border: 2.5px solid var(--ink); padding: 8px 12px; font-size: 21px; line-height: 1.2; }
.cover-btns { display: flex; flex-direction: column; gap: 10px; }
.cap-btn { appearance: none; border: 3px solid var(--ink); background: var(--ink); color: var(--white); font-family: var(--logo); font-size: 30px; letter-spacing: .04em; padding: 8px 14px 6px; cursor: pointer; }
.cap-btn.ghost { background: var(--white); color: var(--ink); }
.cap-btn:active { transform: translate(2px, 2px); }
.cap-btn:focus-visible, .pick:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ── masthead ── */
#mast { flex: 0 0 auto; display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 8px; border-bottom: 3px solid var(--ink); }
.mast-right { text-align: right; font-size: 17px; line-height: 1.15; }
#budget b { font-weight: 400; background: var(--ink); color: var(--white); padding: 0 5px; }

/* ── the strip ── */
#strip { flex: 1 1 auto; overflow-y: auto; padding: 12px 12px 20px; display: flex; flex-direction: column; gap: 12px; -webkit-overflow-scrolling: touch; scroll-behavior: smooth; }
.panel { position: relative; flex: 0 0 auto; border: 3px solid var(--ink); background: var(--white); overflow: hidden; animation: ink .35s ease-out; }
@keyframes ink { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
@media (prefers-reduced-motion: reduce) { .panel { animation: none; } #strip { scroll-behavior: auto; } }

/* chapter header panel */
.panel.head { background: var(--ink); color: var(--white); padding: 14px 14px 12px; }
.panel.head .n { font-family: var(--logo); font-size: 22px; color: var(--gold); letter-spacing: .06em; }
.panel.head .t { font-family: var(--logo); font-size: 50px; line-height: .95; letter-spacing: .03em; }
.panel.head .d { font-size: 19px; margin-top: 4px; color: #d9d3c6; }

.caps { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }
.cap { background: var(--cap); border: 2.5px solid var(--ink); padding: 5px 9px 4px; font-size: 19px; line-height: 1.18; max-width: 92%; }
.cap.act { background: var(--white); }
.cap.act::before { content: "Evelyn: "; font-weight: 400; color: var(--pencil); }

/* talk panel: a face on one side, the balloon on the other */
.panel.talk { aspect-ratio: 16 / 10; display: grid; grid-template-columns: 46% 54%; }
.panel.talk.right { grid-template-columns: 54% 46%; }
.face { background: center 18% / cover no-repeat; border-right: 3px solid var(--ink); position: relative; }
.panel.talk.right .face { order: 2; border-right: 0; border-left: 3px solid var(--ink); }
.name { position: absolute; left: 0; bottom: 0; background: var(--ink); color: var(--white); font-size: 16px; padding: 1px 8px 0; }
.say { position: relative; display: flex; align-items: center; justify-content: center; padding: 10px 12px 10px 14px; }
.panel.talk.right .say { padding: 10px 14px 10px 12px; }

.balloon { position: relative; background: var(--white); border: 2.5px solid var(--ink); border-radius: 26px; padding: 9px 12px 8px; font-size: 19px; line-height: 1.17; text-align: center; }
/* the tail: a black wedge with a white wedge inside it, pointing at the speaker */
.balloon::before, .balloon::after { content: ""; position: absolute; top: calc(50% - 4px); clip-path: polygon(100% 0, 0 70%, 100% 45%); }
.balloon::before { left: -20px; width: 23px; height: 22px; background: var(--ink); }
.balloon::after { left: -14px; width: 17px; height: 16px; top: calc(50% - 1px); background: var(--white); }
.panel.talk.right .balloon::before, .panel.talk.right .balloon::after { clip-path: polygon(0 0, 100% 70%, 0 45%); left: auto; }
.panel.talk.right .balloon::before { right: -20px; }
.panel.talk.right .balloon::after { right: -14px; }
.balloon.whisper { border-style: dashed; }
/* jagged balloons: phone voices (white) and Q over the speakers (black) */
.jag { position: relative; padding: 30px 34px; font-size: 18px; line-height: 1.15; text-align: center; }
.jag::before, .jag::after { content: ""; position: absolute; inset: 0; clip-path: var(--jag); z-index: 0; }
.jag::before { background: var(--ink); }
.jag::after { inset: 3px; background: var(--white); }
.jag span { position: relative; z-index: 1; }
.jag.q::after { background: var(--ink); }
.jag.q { color: var(--white); }

/* object panel: the object as a tilted insert, its caption beside it */
.panel.obj { display: grid; grid-template-columns: 42% 58%; align-items: center; gap: 4px; border: 0; background: transparent; overflow: visible; padding: 4px 0; }
.panel.obj .art { aspect-ratio: 1; background: center / 86% auto no-repeat var(--white); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); transform: rotate(-3deg); }
.panel.obj .txt { padding: 4px 4px 4px 10px; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.panel.obj .tag { align-self: flex-start; background: var(--ink); color: var(--white); font-size: 16px; padding: 1px 8px 0; }
.panel.obj .cap { max-width: none; }

/* switchboard panel: lamps you can plug into */
.jacks { position: absolute; left: 8px; right: 8px; bottom: 8px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; background: rgba(20,20,20,.86); border: 2.5px solid var(--ink); padding: 8px 8px 6px; }
.jack { display: flex; flex-direction: column; align-items: center; gap: 3px; color: var(--white); font-size: 14px; background: none; border: 0; padding: 0; cursor: default; }
.jack i { width: 22px; height: 22px; border-radius: 50%; background: #3b3832; border: 2px solid #000; }
.jack.lit i { background: var(--gold); box-shadow: 0 0 10px 3px rgba(201,162,39,.8); animation: blink 1s steps(2) infinite; }
.jack.lit { cursor: pointer; }
.jack.plugged i { animation: none; box-shadow: 0 0 6px 2px rgba(201,162,39,.6); }
@keyframes blink { 50% { background: #6d5a18; box-shadow: none; } }

/* end panel */
.panel.end { background: var(--ink); color: var(--white); padding: 14px; }
.panel.end .t { font-family: var(--logo); font-size: 40px; line-height: 1; letter-spacing: .03em; color: var(--gold); }
.panel.end p { font-size: 19px; margin: 8px 0 0; line-height: 1.2; }
.panel.end ul { margin: 8px 0 0; padding-left: 20px; font-size: 18px; line-height: 1.25; }

/* ── the tray: tap hint or the two pencilled replies ── */
#tray { flex: 0 0 auto; border-top: 3px solid var(--ink); padding: 10px 12px calc(12px + env(safe-area-inset-bottom, 0px)); background: var(--news); }
#tap { text-align: center; font-size: 19px; color: var(--pencil); padding: 6px 0; cursor: pointer; animation: pulse 2s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .4; } }
#choices { display: flex; flex-direction: column; gap: 8px; }
.ask { font-size: 17px; color: var(--pencil); text-align: center; }
.pick { appearance: none; background: transparent; border: 2.5px dashed var(--pencil); border-radius: 22px; padding: 9px 14px 8px; font-size: 20px; line-height: 1.15; text-align: center; cursor: pointer; color: var(--ink); }
.pick:active { border-style: solid; border-color: var(--ink); background: var(--white); }
@media (hover: hover) { .pick:hover { border-style: solid; border-color: var(--ink); background: var(--white); } }
.pick.no { color: var(--pencil); cursor: default; }
#endbtns { display: flex; flex-direction: column; gap: 8px; }

/* ── framed panels: an ink layer and a picture layer cut to the same shape ── */
.panel.framed { border: 0; background: transparent; overflow: visible; }
.panel.framed .ink, .panel.framed .inner { position: absolute; inset: 0; }
.panel.framed .ink { background: var(--ink); }
.panel.framed .inner { inset: 3px; background: center / cover no-repeat var(--white); overflow: hidden; }
.panel.framed.slantR .ink   { clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.panel.framed.slantR .inner { clip-path: polygon(0 0, 100% 0, 100% calc(88% - 3px), 0 calc(100% - 1px)); }
.panel.framed.slantL .ink   { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 88%); }
.panel.framed.slantL .inner { clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1px), 0 calc(88% - 3px)); }
.panel.framed.slantR, .panel.framed.slantL { margin-bottom: -10px; }

/* close-ups: the face fills the panel, the balloon floats over it */
.bigface { position: absolute; inset: 0; background: center 22% / 118% auto no-repeat; }
.panel.close.left .bigface { background-position: 18% 24%; background-size: 82% auto; left: 0; }
.panel.close.right .bigface { background-position: 82% 24%; background-size: 82% auto; }
.panel.close .balloon.over, .panel.close .jag.over { position: absolute; top: 12px; max-width: 52%; }
.panel.close.left .over { right: 12px; }
.panel.close.right .over { left: 12px; }
.panel.close.left .balloon.over::before { left: -20px; }
.panel.close.right .balloon.over::before, .panel.close.right .balloon.over::after { left: auto; clip-path: polygon(0 0, 100% 70%, 0 45%); }
.panel.close.right .balloon.over::before { right: -20px; }
.panel.close.right .balloon.over::after { right: -14px; }
.panel.close .name { position: absolute; bottom: 14%; background: var(--ink); color: var(--white); font-size: 16px; padding: 1px 8px 0; }
.panel.close.left .name { left: 0; }
.panel.close.right .name { right: 0; }
.panel.think .bigface { left: 38%; background-position: center 20%; background-size: cover; }
.panel.think .caps { right: 40%; }

/* two speakers in one row, split by a diagonal gutter */
.panel.duo { aspect-ratio: 1 / 1.02; border: 0; background: transparent; overflow: visible; }
.panel.duo .ink, .panel.duo .cell { position: absolute; inset: 0; }
.panel.duo .ink { background: var(--ink); }
.panel.duo .ink.l { clip-path: polygon(0 0, 47% 0, 55% 100%, 0 100%); }
.panel.duo .ink.r { clip-path: polygon(49% 0, 100% 0, 100% 100%, 57% 100%); opacity: 0; transition: opacity .3s; }
.panel.duo .cell { background: var(--white); overflow: hidden; }
.panel.duo .cell.l { clip-path: polygon(3px 3px, calc(47% - 3px) 3px, calc(55% - 3px) calc(100% - 3px), 3px calc(100% - 3px)); }
.panel.duo .cell.r { clip-path: polygon(calc(49% + 3px) 3px, calc(100% - 3px) 3px, calc(100% - 3px) calc(100% - 3px), calc(57% + 3px) calc(100% - 3px)); opacity: 0; transition: opacity .3s; }
.panel.duo.full .ink.r, .panel.duo.full .cell.r { opacity: 1; }
.cellface { position: absolute; inset: 0; background: no-repeat; background-size: 54% auto; }
.cell.l .cellface { background-position: 0% 100%; }
.cell.r .cellface { background-position: 100% 100%; }
.cell .top { position: absolute; top: 8px; width: 43%; font-size: 17px; padding: 7px 10px 6px; }
.cell.l .top { left: 8px; }
.cell.r .top { right: 8px; }
.cell.r .balloon.top::before { left: auto; right: 26px; clip-path: polygon(0 0, 100% 0, 60% 100%); }
.cell.r .balloon.top::after { left: auto; right: 29px; clip-path: polygon(0 0, 100% 0, 60% 100%); }
.cell .jag.top { padding: 24px 22px; font-size: 15px; }
.cell .balloon.top::before, .cell .balloon.top::after { top: auto; clip-path: polygon(0 0, 100% 0, 40% 100%); }
.cell .balloon.top::before { left: 26px; bottom: -18px; width: 20px; height: 18px; }
.cell .balloon.top::after { left: 29px; bottom: -12px; width: 14px; height: 13px; }
.cell .name { position: absolute; bottom: 3px; background: var(--ink); color: var(--white); font-size: 15px; padding: 1px 7px 0; }
.cell.l .name { left: 3px; }
.cell.r .name { right: 3px; }

.mute { appearance: none; border: 2px solid var(--ink); background: var(--white); font-size: 15px; padding: 0 7px; margin-bottom: 3px; cursor: pointer; }

/* Q: a voice from the cinema speakers, shown over the booth and the dark seats */
.cellshot { position: absolute; inset: 0; background: center / cover no-repeat; }
.panel.qvoice .jag.over { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 66%; }
.panel.qvoice .name, .cell .name { z-index: 2; }
.panel.qvoice .name { position: absolute; left: 0; bottom: 12%; background: var(--ink); color: var(--white); font-size: 16px; padding: 1px 8px 0; }