/* Engine: the cube is the room. Talk sits on top. */
:root{
  --ink:#1a2438;
  --paper:#f1e4c4;
  --paper-2:rgba(241,228,196,.92);
  --navy:#1e3a5f;
  --scarlet:#c41e3a;
  --dim:#7a6f58;
  --cyan:#638B94;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --font:"Courier New", Courier, "Lucida Console", monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#111214;color:var(--ink);
  font-family:var(--font);font-size:13px;line-height:1.35;touch-action:none}
button,textarea{font:inherit;color:inherit;background:var(--paper);border:1.5px solid var(--navy);
  border-radius:0;appearance:none}
button{padding:.45rem .7rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:2.6rem}
button:active{background:var(--navy);color:var(--paper)}
button:disabled{opacity:.55;cursor:wait}
textarea{display:block;width:100%;resize:none;padding:.45rem .5rem;line-height:1.4;
  caret-color:var(--scarlet);outline:none;background:rgba(241,228,196,.96)}
textarea::placeholder{color:var(--dim)}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;touch-action:none;cursor:crosshair}
#crt{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    repeating-linear-gradient(180deg, transparent 0, transparent 2px, rgba(0,0,0,.08) 3px),
    radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(17,18,20,.35) 100%)}

.site-mark{position:fixed;top:calc(8px + var(--safe-t));left:10px;z-index:6;margin:0;
  letter-spacing:.14em;text-transform:uppercase;color:#ffe08a;font-size:10px;pointer-events:none;
  text-shadow:0 0 8px rgba(0,0,0,.6)}
#hint{position:fixed;left:10px;right:10px;top:calc(28px + var(--safe-t));z-index:6;
  margin:0;text-align:center;font-size:9px;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(241,228,196,.7);pointer-events:none}
#hint.hide{opacity:0}
.doors{position:fixed;top:calc(46px + var(--safe-t));left:10px;z-index:6;display:flex;gap:8px;pointer-events:auto}
.door{display:inline-block;padding:.4rem .65rem .3rem;border:1.5px solid #f1e4c4;color:#f1e4c4;
  text-decoration:none;letter-spacing:.12em;text-transform:uppercase;font-size:9px;background:rgba(17,18,20,.55)}
.door b{display:block;font-size:7px;letter-spacing:.16em;color:#c41e3a;font-weight:400}
.door:hover{background:#1e3a5f}

#bar{position:fixed;left:0;right:0;bottom:0;z-index:20;
  display:flex;flex-direction:column;
  height:min(42vh, 22rem);
  padding:0 0 calc(8px + var(--safe-b));
  background:var(--paper-2);border-top:3px solid var(--navy);
  clip-path:polygon(14px 0,100% 0,100% 100%,0 100%,0 14px);
  backdrop-filter:blur(2px)}
#bar:before{content:"";position:absolute;top:0;left:0;width:14px;height:14px;
  background:linear-gradient(135deg,transparent 49%,var(--navy) 50%)}

.bar-head{display:flex;align-items:center;gap:10px;padding:8px 10px 8px 18px;
  border-bottom:2px solid var(--navy);background:rgba(230,211,168,.9);flex:0 0 auto}
#jackPet{width:64px;height:64px;flex:0 0 64px;
  image-rendering:pixelated;image-rendering:crisp-edges;
  background:var(--paper);border:2px solid var(--navy)}
.bar-who{flex:1 1 auto;min-width:0}
.bar-name{margin:0;font-size:16px;letter-spacing:.2em;color:var(--navy)}
#jackForm{margin:2px 0 0;font-size:9px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#clerkLine{margin:4px 0 0;font-size:10px;letter-spacing:.1em;color:var(--navy)}
#clerkLine.live{color:#3a4a1a}
#clerkLine.away{color:#6a5330}

#talkLog{flex:1 1 auto;min-height:0;overflow:auto;padding:10px 12px 8px;
  touch-action:pan-y;-webkit-overflow-scrolling:touch}
.talk-wait{margin:.8rem 0;color:var(--dim);letter-spacing:.08em}
.talk-turn{margin:0 0 .85rem;max-width:36rem}
.talk-turn.visitor{margin-left:12%;max-width:none}
.talk-turn .who{display:block;font-size:9px;letter-spacing:.16em;text-transform:uppercase;margin-bottom:3px}
.talk-turn.clerk .who{color:var(--navy)}
.talk-turn.visitor .who{color:var(--scarlet);text-align:right}
.talk-turn.clerk p{margin:0;font-size:15px;line-height:1.4;white-space:pre-wrap}
.talk-turn.visitor p{margin:0;font-size:13px;line-height:1.35;white-space:pre-wrap;text-align:right;color:#3a3328}

.bar-in{display:flex;gap:8px;align-items:stretch;padding:8px 10px 0;flex:0 0 auto}
.bar-in textarea{flex:1 1 auto;min-height:3.2rem;font-size:14px}
#btnAsk{flex:0 0 auto;min-width:4.8rem;background:var(--navy);color:var(--paper);border-color:var(--navy)}

@media(min-width:820px){
  #bar{
    left:50%;right:auto;width:min(34rem, calc(100% - 2.4rem));
    transform:translateX(-50%);
    bottom:1.2rem;height:min(38vh, 20rem);
    border:3px solid var(--navy);
  }
}
@media(prefers-reduced-motion:reduce){
  #crt{background:radial-gradient(ellipse at 50% 40%, transparent 30%, rgba(17,18,20,.28) 100%)}
}