/* ONE — a single habitat. Manila stock, navy duty, amber last orders, scarlet hopper. */
:root{
  --paper:#d9cb9e;
  --paper-2:#cfc19a;
  --well:#efe6c8;
  --ink:#161814;
  --navy:#1e3a5f;
  --scarlet:#c41e3a;
  --gold:#c9a227;
  --amber:#c46a1e;
  --dim:#6f6754;
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --vv-top:0px;
  --vv-height:100dvh;
  --glow:rgba(30,58,95,.18);
  --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.4;touch-action:none}
body[data-stance="desk"]{--glow:rgba(30,58,95,.28)}
body[data-stance="tap"]{--glow:rgba(196,106,30,.28)}
body[data-stance="tarot"]{--glow:rgba(196,30,58,.22)}
body[data-stance="jack"]{--glow:rgba(241,228,196,.16)}
button,textarea{font:inherit;color:inherit;background:var(--paper);border:1.5px solid var(--navy);border-radius:0;appearance:none}
button{padding:.5rem .7rem;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;min-height:2.6rem}
button:active{background:var(--scarlet);color:var(--paper);border-color:var(--scarlet)}
textarea{display:block;width:100%;resize:none;padding:.5rem .55rem;line-height:1.4;caret-color:var(--scarlet);outline:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
noscript{display:block;padding:2rem;background:var(--paper)}

#stage{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:0;cursor:crosshair}
#grain{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:
    radial-gradient(ellipse at 50% 36%, transparent 18%, var(--glow) 78%, rgba(10,10,8,.22) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(22,24,20,.03) 3px);
}
body[data-stance="desk"] #grain{
  background:
    radial-gradient(ellipse at 48% 34%, rgba(90,130,190,.08) 0%, transparent 44%, var(--glow) 80%, rgba(8,10,16,.2) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(22,24,20,.03) 3px);
}
body[data-stance="tap"] #grain{
  background:
    radial-gradient(ellipse at 74% 46%, rgba(196,106,30,.12) 0%, transparent 46%, var(--glow) 80%, rgba(12,8,6,.2) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(22,24,20,.03) 3px);
}
body[data-stance="tarot"] #grain{
  background:
    radial-gradient(ellipse at 36% 40%, rgba(196,30,58,.1) 0%, transparent 44%, var(--glow) 80%, rgba(14,6,8,.2) 100%),
    repeating-linear-gradient(0deg, transparent 0, transparent 2px, rgba(22,24,20,.03) 3px);
}

.site-mark{position:fixed;top:calc(10px + var(--safe-t));left:12px;z-index:6;margin:0;
  letter-spacing:.18em;text-transform:uppercase;color:var(--scarlet);font-size:10px;pointer-events:none}
.site-mark a{color:inherit;text-decoration:none;pointer-events:auto}
.site-mark a:hover,.site-mark a:focus-visible{text-decoration:underline}
#hint{position:fixed;top:calc(10px + var(--safe-t));right:12px;z-index:6;margin:0;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim);font-size:10px;pointer-events:none}

#console{position:fixed;left:50%;bottom:calc(14px + var(--safe-b));transform:translateX(-50%);
  width:min(42rem, calc(100vw - 20px));z-index:8;background:var(--paper);
  border:2px solid var(--navy);box-shadow:0 18px 40px rgba(16,18,12,.35);
  display:flex;flex-direction:column;max-height:min(72dvh, calc(var(--vv-height) - 24px));
  overflow:hidden}
#btnCopyChat{position:absolute;top:0;right:.65rem;z-index:2;
  width:2.6rem;height:2.6rem;min-height:2.6rem;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  transform:translateY(calc(-100% - .4rem));
  background:var(--paper);border:1.5px solid var(--navy);
  box-shadow:0 8px 18px rgba(16,18,12,.28);color:var(--navy)}
#btnCopyChat svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:square;stroke-linejoin:miter}
#btnCopyChat:hover,#btnCopyChat:focus-visible{color:var(--scarlet);border-color:var(--scarlet)}
#btnCopyChat.done{color:var(--scarlet);border-color:var(--scarlet)}
#console header{display:grid;grid-template-columns:72px 1fr;gap:.55rem 0.75rem;padding:.65rem .75rem .5rem;
  border-bottom:2px solid var(--navy);background:linear-gradient(180deg, var(--well), var(--paper));
  flex:0 0 auto}
#jackPet{width:72px;height:72px;image-rendering:pixelated;background:var(--paper-2);border:1.5px solid var(--navy)}
.who .name{margin:0;letter-spacing:.2em;color:var(--scarlet);font-size:11px}
#jackForm{margin:.15rem 0 0;font-size:15px}
#stanceLine{margin:.1rem 0 0;letter-spacing:.16em;text-transform:uppercase;color:var(--navy);font-size:10px}
#stanceHint{grid-column:1 / -1;margin:0;color:var(--dim);font-size:12px}
#asked{margin:0;padding:.45rem .75rem 0;color:var(--dim);font-size:12px;background:var(--well);flex:0 0 auto}
#mods{display:none;grid-template-columns:7.4rem 1fr;min-height:7.4rem;background:#e4c98a;
  border-top:1px solid var(--navy);pointer-events:none;flex:0 0 auto}
body.waiting #mods{display:grid}
.nine-stage{display:flex;flex-direction:column;align-items:center;justify-content:center;
  border-right:1px solid var(--navy);padding:.35rem .3rem}
#nine{width:6.4rem;height:6.4rem;image-rendering:pixelated;background:var(--paper-2);border:1.5px solid var(--navy)}
#nineName{margin:.25rem 0 0;letter-spacing:.12em;text-transform:uppercase;font-size:8px;color:var(--ink)}
#tape{height:7.4rem;overflow:hidden;background:#e4c98a}
#tapeTrack{display:flex;align-items:stretch;height:100%;white-space:nowrap;will-change:transform}
.tape-cell{flex:0 0 auto;min-width:11.2rem;padding:5px 10px 4px;border-right:1px dashed var(--navy);
  background:linear-gradient(180deg, #efe0b4 0%, #e8d3a0 100%)}
.tape-holes{display:flex;gap:3px;height:7px;margin-bottom:3px}
.tape-holes i{display:block;width:5px;height:5px;border:1px solid var(--navy);border-radius:50%}
.tape-holes i.on{background:var(--navy)}
.tape-line{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase}
#said{margin:0;padding:.4rem .75rem .7rem;background:var(--well);font-size:15px;line-height:1.45;
  max-height:11rem;overflow:auto;white-space:pre-wrap;flex:1 1 auto;min-height:0;
  touch-action:pan-y;-webkit-overflow-scrolling:touch}
#said:empty:not([hidden]){padding-bottom:.45rem}
body.speaking #said{box-shadow:inset 3px 0 0 var(--scarlet)}
body.waiting #said{display:none}
#talkLog{display:none}
.ask{display:grid;grid-template-columns:1fr auto;gap:0;border-top:2px solid var(--navy);flex:0 0 auto}
.ask textarea{border:0;min-height:3.2rem;background:var(--paper);font-size:16px}
.ask button{border:0;border-left:2px solid var(--navy);background:var(--navy);color:var(--paper);min-width:5.2rem}
.ask button:disabled{opacity:.55}
.doors{display:flex;flex-wrap:wrap;gap:.6rem;padding:.4rem .75rem .5rem;border-top:1px solid var(--paper-2);
  letter-spacing:.14em;text-transform:uppercase;font-size:10px;flex:0 0 auto}
.doors a{color:var(--navy);text-decoration:none}
.doors a:hover{color:var(--scarlet)}

body.kb-open #console{
  bottom:calc(100% - var(--vv-top) - var(--vv-height));
  max-height:calc(var(--vv-height) - 10px);
  box-shadow:none;
}
body.kb-open #console header,
body.kb-open #btnCopyChat,
body.kb-open .doors,
body.kb-open #mods,
body.kb-open #asked{display:none !important}
body.kb-open #said{max-height:34%;padding:.35rem .65rem;font-size:13px}
body.kb-open .ask textarea{min-height:2.8rem}

#hopper{position:fixed;left:50%;bottom:calc(18.6rem + var(--safe-b));transform:translateX(-50%);
  width:min(42rem, calc(100vw - 20px));z-index:9;background:var(--paper);border:2px solid var(--scarlet);
  padding:.65rem .75rem .8rem}
#hopper header{display:flex;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.5rem}
#hopper header p{margin:0;letter-spacing:.12em;text-transform:uppercase;font-size:10px;color:var(--scarlet)}
#hopperGrid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;min-height:6rem}
#hopperGrid .card-wrap{display:block;text-decoration:none;color:inherit}
#hopperGrid svg{width:100%;height:auto;display:block;background:var(--paper-2);border:1px solid var(--navy)}
#hopperGrid .card-position{margin-top:.25rem;font-size:8px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);text-align:center}
#hopperLoad{margin:.4rem 0 0;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
#btnPunch{width:100%;margin-top:.55rem;border-color:var(--scarlet);color:var(--scarlet)}

body[data-stance="desk"] #console{border-color:var(--navy)}
body[data-stance="tap"] #console{border-color:var(--amber)}
body[data-stance="tap"] .ask button{background:var(--amber);border-color:var(--amber)}
body[data-stance="tarot"] #console{border-color:var(--scarlet)}
body[data-stance="jack"] #console{border-color:var(--ink)}

@media(max-width:720px){
  #console{width:calc(100vw - 16px);bottom:calc(10px + var(--safe-b));max-height:calc(var(--vv-height) - 16px)}
  #console header{grid-template-columns:56px 1fr}
  #jackPet{width:56px;height:56px}
  #said{max-height:6.5rem;font-size:14px}
  #hopper{bottom:calc(16.2rem + var(--safe-b))}
  body.kb-open #hopper{display:none}
}