/* A host's talk inside a building, Princess Maker 6's way (src/talkbox.js; the user, 2026-10-19): the face at the
   bottom left in front of the cream dialog box, the name plate over the bottom of the face, the choices on the
   right (teal: the one under the pointer or the keys, with the Space key on it on a computer). The frames are
   the user's pictures (assets/camp/talk/, scripts/talk/build-talk.py); src/talkbox.js places every part in
   pixels and sets --k, the size (1 on a 1440 x 900 page, or on a 390 px phone). It sits over the room and under
   what opens over it (the Library's .lib-over is 6, the Lookout's .lk-over 5). While a host talks the room
   waits: nothing in it lights under the pointer, and a click anywhere goes to the talk. */
.talk{--k:1;position:absolute;inset:0;z-index:4;pointer-events:none;visibility:hidden;font-family:"Crimson Text","Gowun Batang",Georgia,serif}
.talk.on{visibility:visible;animation:talkIn .26s cubic-bezier(.2,.8,.3,1) both}
.talk.on.still{animation:none}
@keyframes talkIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.talk > *{position:absolute;pointer-events:auto;box-sizing:border-box}

/* the box: its two ends keep their shape and the middle stretches (--cl and --cr: the ends' widths) */
.talk-box{border-style:solid;border-color:transparent;border-width:0 var(--cr,170px) 0 var(--cl,170px);
  border-image:url(../assets/camp/talk/box.webp) 0 395 0 410 fill / 0 var(--cr,170px) 0 var(--cl,170px) stretch;
  filter:drop-shadow(0 6px 10px rgba(28,12,4,.34));cursor:default}
.talk-text{margin:0;color:#2a1608;line-height:1.45;word-break:keep-all;text-wrap:balance;overflow:hidden;cursor:default;user-select:none;-webkit-user-select:none}
.talk.wide .talk-text{font-size:calc(24px * var(--k))}
.talk.narrow .talk-text{font-size:calc(17px * var(--k));line-height:1.42}

/* the face: only its last tenth fades out, where it meets the box (the user, 2026-10-30: the fade reached up over
   the box and the face read see-through; 70% to 97% before); the room's blink over it */
.talk-face{-webkit-mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,0) 100%);mask-image:linear-gradient(180deg,#000 88%,rgba(0,0,0,0) 100%);cursor:default}
.talk-face img{position:absolute;display:block;pointer-events:none;user-select:none;-webkit-user-select:none}
.talk-face .f{inset:0;width:100%;height:100%}
.talk-face .b{opacity:0}
.talk-face .b[hidden]{display:none}
.talk-face .b.shut{opacity:1}

/* the name plate */
.talk-name{display:flex;align-items:center;justify-content:center;background:url(../assets/camp/talk/name.webp) 0 0 / 100% 100% no-repeat;filter:drop-shadow(0 3px 5px rgba(20,8,2,.35));cursor:default}
.talk-name span{font-weight:700;color:#f7e8c9;letter-spacing:.02em;white-space:nowrap;text-shadow:0 1px 2px rgba(0,0,0,.5);padding-top:.08em}
.talk.wide .talk-name span{font-size:calc(21px * var(--k))}
.talk.narrow .talk-name span{font-size:calc(14px * var(--k))}

/* a host's work beside the name, the user's way: 월트 <게이트키퍼> (src/talkbox.js, HOSTS.role) */
/* (the host's work beside the name, smaller: every NPC's plate since 2026-10-27, no brackets) */
.talk-name i{font-style:normal;font-weight:500;font-size:.66em;opacity:.86;margin-left:.45em;letter-spacing:.01em}

/* the arrow at the box's corner: a click goes on (the gate's dialog has one too); not while a line is typed, nor
   over choices */
.talk-next{z-index:3;width:calc(13px * var(--k));height:calc(8px * var(--k));background:#b0632b;clip-path:polygon(0 0,100% 0,50% 100%);pointer-events:none;opacity:0;animation:talkBob 1.1s ease-in-out infinite}
.talk.on:not(.typing):not(.has-opts) .talk-next{opacity:.9}
@keyframes talkBob{0%,100%{transform:translateY(0)}50%{transform:translateY(calc(3px * var(--k)))}}

/* on a desk the face is in front of the box; on a phone it stands behind it */
.talk.wide .talk-box{z-index:1}
.talk.wide .talk-face{z-index:2}
.talk.wide .talk-text{z-index:2}
.talk.narrow .talk-face{z-index:1}
.talk.narrow .talk-box{z-index:2}
.talk.narrow .talk-text{z-index:3}
.talk-name{z-index:4}
.talk-opts{z-index:5}

/* the choices: the user's two frames, the teal one over the cream one */
.talk-opts{display:flex;flex-direction:column;transition:opacity .22s ease,transform .22s ease}
.talk.typing .talk-opts,.talk:not(.has-opts) .talk-opts{opacity:0;transform:translateY(6px);visibility:hidden;transition:none}
.talk-opt{position:relative;flex:none;width:100%;padding:0;border:0;background:none;color:#3b2413;font:inherit;text-align:left;cursor:pointer;transition:transform .14s ease;-webkit-tap-highlight-color:transparent}
.talk-opt::before,.talk-opt::after{content:"";position:absolute;inset:0;background:url(../assets/camp/talk/option.webp) 0 0 / 100% 100% no-repeat;pointer-events:none}
.talk-opt::after{background-image:url(../assets/camp/talk/option-on.webp);opacity:0;transition:opacity .12s ease}
.talk-opt.on{transform:scale(1.035);color:#fffbf2}
.talk-opt.on::after{opacity:1}
.talk-opt span{position:absolute;z-index:1;left:9.5%;right:6%;top:50%;transform:translateY(-50%);white-space:nowrap;overflow:hidden;line-height:1.25}
.talk.wide .talk-opt span{font-size:calc(21px * var(--k))}
.talk.narrow .talk-opt span{font-size:calc(16px * var(--k))}
.talk-opt.on span{text-shadow:0 1px 2px rgba(6,38,48,.5)}
.talk-opt:focus-visible{outline:2px solid #f3d58e;outline-offset:3px;border-radius:999px}
/* the Space key (the game's), on the lit choice where there are keys, over the leaf at its left end */
.talk-key{display:none;position:absolute;z-index:2;left:2.6%;top:50%;transform:translateY(-50%);padding:.2em .42em .26em;border:1.5px solid #4a3a2c;border-radius:.45em;background:#fbf7ee;color:#3a2a1e;font:600 calc(10.5px * var(--k))/1 "Hind",system-ui,sans-serif;font-style:normal;box-shadow:0 1px 0 rgba(0,0,0,.25)}
@media (hover:hover) and (pointer:fine){
  .talk-opt span{left:14.5%}
  .talk-opt.on .talk-key{display:block}
}
@media (prefers-reduced-motion:reduce){.talk.on{animation:none}.talk-opt,.talk-opt::after,.talk-opts{transition:none}.talk-next{animation:none}}

/* the room waits while a host talks: its things don't light under the pointer, and a click lands on the talk */
.lib.talking .lib-stage,.lk.talking .lk-stage,.tv.talking .tv-stage{pointer-events:none}
/* The Lookout's desk and door answer the pointer on their own (pointer-events:auto), so they kept lighting
   and dimming the room behind Birch's talk (the user, 2026-10-21: no hover at all while a host's talk is up).
   They are switched off too, and what a hover or a focus left on shows no more: no dim, no ring, no name. */
.lk.talking .lk-stage .lk-thing{pointer-events:none;filter:none}
.lk.talking .lk-stage .lk-dim{opacity:0}
.lk.talking .lk-thing .tag{opacity:0}
.lk.talking .lk-thing:is(:hover,:focus-visible) .ring{opacity:0!important}

/* a host's name tag (the user, 2026-10-22): pointing at a host in a building shows their name and their work over
   their head, in the Lookout's tags' dress; not while anyone talks (the room takes no pointer then), nor on a phone.
   --tag-s sizes it to the room's design px (so it reads alike in every room), --tag-x puts it over the head and
   --tag-up how far over it (Hubert's goes beside his head instead: over it, it met the page's bar). */
.npc-tag{--s:var(--tag-s,1);position:absolute;left:var(--tag-x,50%);bottom:calc(100% + var(--tag-up,8px));z-index:4;display:flex;flex-direction:column;align-items:center;gap:calc(6px * var(--s));
  box-sizing:border-box;padding:calc(11px * var(--s)) calc(20px * var(--s)) calc(10px * var(--s));border-radius:calc(15px * var(--s));background:rgba(48,26,10,.9);border:calc(2px * var(--s)) solid #c98a45;
  box-shadow:0 calc(5px * var(--s)) calc(15px * var(--s)) rgba(0,0,0,.4);white-space:nowrap;opacity:0;transform:translate(-50%,6px);transition:opacity .2s,transform .2s;pointer-events:none;
  font-family:"Hind","Gowun Dodum",system-ui,sans-serif;line-height:1}
.npc-tag b{font-weight:600;font-size:calc(22px * var(--s));color:#fbeedd}
.npc-tag i{font-style:normal;font-weight:400;font-size:calc(14.5px * var(--s));color:#e6cba6}
:is(.lib-talk,.lk-talk,.tv-talk,.tv-thing):is(:hover,:focus-visible) .npc-tag{opacity:1;transform:translate(-50%,0)}
:is(.lib,.lk,.tv).stack .npc-tag{display:none}
.lib-talk .npc-tag{--tag-s:1.05;--tag-x:47%}
.lk-talk .npc-tag{--tag-s:1.25;--tag-x:46%}
.tv-talk.maple .npc-tag{--tag-x:41%}
.tv-talk.hubert .npc-tag{--tag-x:0%;--tag-up:-112px}

/* a phone's cameo of the host hides while the host talks (src/talkbox.js puts "talking" on the room) */
.lib.stack.talking .lib-talk,.lk.stack.talking .lk-talk,.tv.stack.talking .tv-talk{visibility:hidden}

/* a question with a field (the gate asks your name, src/opening.js): the cream field, the teal button under it,
   a few names to pick from under those; it stands where the choices would */
.talk-ask{display:flex;flex-direction:column;gap:calc(10px * var(--k))}
.talk-ask input{box-sizing:border-box;width:100%;height:calc(54px * var(--k));padding:0 calc(20px * var(--k)) calc(2px * var(--k));border:calc(2px * var(--k)) solid #c4955b;border-radius:999px;background:#fbf4e6;color:#2a1608;font:inherit;font-size:calc(21px * var(--k));outline:none;box-shadow:inset 0 2px 4px rgba(60,30,10,.12)}
.talk-ask input::placeholder{color:#a08466}
.talk-ask input:focus{border-color:#2f7f86;box-shadow:inset 0 2px 4px rgba(60,30,10,.12),0 0 0 3px rgba(47,127,134,.25)}
.talk-ask .talk-opt{height:calc(56px * var(--k))}
.talk-ask .talk-opt span{left:0;right:0;text-align:center}
.talk-ideas{display:flex;flex-wrap:wrap;gap:calc(8px * var(--k));padding:0 calc(4px * var(--k))}
.talk-chip{padding:calc(6px * var(--k)) calc(13px * var(--k)) calc(7px * var(--k));border:calc(1.5px * var(--k)) solid rgba(255,244,226,.5);border-radius:999px;background:rgba(40,22,10,.6);color:#f7e8c9;font:inherit;font-size:calc(15px * var(--k));line-height:1;cursor:pointer;transition:background .15s}
.talk-chip:hover{background:rgba(40,22,10,.85)}
.talk.narrow .talk-ask input{height:calc(46px * var(--k));font-size:calc(17px * var(--k))}
.talk.narrow .talk-ask .talk-opt{height:calc(46px * var(--k))}