/* to;doh-the event planner Arcade — 3D floor (Three.js, vendored locally) + normal chat overlay.
   No images, no fonts fetched, CSP-safe. */

:root {
  --ink: #dfe9f2;
  --dim: #7d8ea0;
  --bg: #04060b;
  --blue: #3fd2ff;
  --blue-deep: #0e6f9e;
  --magenta: #ff3d7f;
  --amber: #ffb54d;
  --paper: #f4efe3;
  --paper-ink: #22201a;
  --bad: #ff5a5a;
  --mono: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); }
html, body { height: 100%; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--mono);
  overflow: hidden;
}

/* ============================ 3D layer ============================ */
#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; background: var(--bg); touch-action: none; } /* the room is full-screen and handles its own drags: without this a phone treats a swipe as a page gesture and cancels the pointer after one move (found on a real phone: the wall puzzle could not be solved by touch) */

#gl-fallback {
  position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--dim); font-size: 12px; line-height: 1.7;
  padding: 30px; text-align: center; z-index: 5;
}
#gl-fallback[hidden] { display: none; }
#gl-fallback a { color: var(--blue); }
/* text-only mode (no WebGL): the notice is a banner above the chat, not a full-screen layer hiding behind it */
body.no-gl #gl-fallback {
  inset: 0 0 auto 0; align-items: flex-start; justify-content: flex-start; text-align: left;
  padding: 14px 18px; border-bottom: 1px solid var(--line, #1b3a4d); font-size: 13px; color: #c3d3de; z-index: 30;
}

/* ============================ keyboard focus and room views ============================ */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.paper :focus-visible { outline-color: var(--paper-ink); }
#paper:focus { outline: none; } /* the page itself takes focus programmatically; its controls show the ring */
/* the room views are a canvas's keyboard twin: invisible to a pointer, a bar over the room while the keyboard is on it */
#room-nav:not(:focus-within) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#room-nav:focus-within {
  position: fixed; top: 10px; left: 10px; right: 10px; z-index: 45;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: rgba(4, 8, 14, .96); border: 1px solid var(--blue); border-radius: 12px; padding: 8px 12px;
}
#room-nav[hidden] { display: none; }
#room-nav-label { color: #c3d3de; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; margin-right: 4px; }
#room-nav-vend { display: contents; }
#room-nav button { background: transparent; color: var(--ink); border: 1px solid #2e5a7a; border-radius: 8px; padding: 10px 14px; min-height: 44px; font: inherit; font-size: 13px; cursor: pointer; }
#room-nav button:disabled { opacity: .55; cursor: default; }
#room-nav button[hidden] { display: none; }
/* the round's spots are hidden from a pointer (the canvas is the board), but a keyboard user must SEE where focus is: the focused spot's name shows as a chip above the panel */
#wall-cells.sr-only:focus-within { position: fixed; left: 50%; bottom: 190px; transform: translateX(-50%); width: auto; height: auto; margin: 0; overflow: visible; clip: auto; z-index: 46; }
#wall-cells button:not(:focus) { position: absolute; width: 1px; height: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); }
#wall-cells button:focus { display: block; min-height: 44px; padding: 10px 18px; background: rgba(4, 8, 14, .96); color: var(--ink); border: 2px solid var(--blue); border-radius: 10px; font: inherit; }
#wall-pager { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0; }
#wall-pager[hidden] { display: none; }
#wall-pager button { min-width: 44px; min-height: 44px; }
#wall-pager button:disabled { opacity: .5; cursor: default; }
#wall-pageinfo { min-width: 9em; }

#composer input::placeholder { color: #9fb0c3; opacity: 1; }

/* ============================ replay banner + caption ============================ */
#replay-banner {
  position: fixed; top: 12px; left: 12px;
  z-index: 18; pointer-events: none;
  font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: var(--amber); background: rgba(10, 8, 4, .8);
  border: 1px dashed #8a5a12; border-radius: 999px; padding: 6px 16px;
  max-width: 60vw;
}
#replay-banner[hidden] { display: none; }

#stage-caption {
  position: fixed; left: 50%; top: 12.5%; transform: translateX(-50%);
  z-index: 15; pointer-events: none;
  font-size: 12px; padding: 6px 18px; border-radius: 999px;
  background: rgba(6, 10, 18, .75); border: 1px solid #1d3040;
  color: var(--blue); letter-spacing: .28em; text-transform: uppercase;
}
#stage-caption:empty { display: none; }

/* ============================ chat ============================ */
#chat {
  position: fixed; left: 0; right: 0; bottom: 30px; transform: none;
  width: 100%; max-height: 100vh; display: flex; flex-direction: column;
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  z-index: 40; overflow: visible; pointer-events: none;
  padding: 0 10px calc(8px + env(safe-area-inset-bottom, 0px));
}
#chat > * { pointer-events: auto; }
/* a soft dark floor under the chat strip: the room behind it is bright in places (the van, the lit floor) and no text colour is legible on every pixel of it.
   It lives on the body, below the paper, the panels and the chat, so it never dims a page that is open over it. */
body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 200px; z-index: 8; pointer-events: none;
  background: linear-gradient(to top, rgba(3, 6, 12, .86) 0%, rgba(3, 6, 12, .74) 45%, rgba(3, 6, 12, 0) 100%);
}
#chat.collapsed #log, #chat.collapsed #review, #chat.collapsed #hint { display: none; }
#chat header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 6px; border-bottom: 0;
  background: rgba(3, 6, 12, .68); border-radius: 10px 10px 0 0; text-shadow: 0 1px 4px rgba(0, 0, 0, .85); /* a dark strip: the title is read over a bright room */
}
#chat h1 { font-size: 12px; letter-spacing: .28em; color: var(--ink); font-weight: 600; }
#chat h1 .dot { color: var(--blue); margin: 0 6px; }
.head-right { display: flex; align-items: center; gap: 10px; }
#conn { width: 8px; height: 8px; border-radius: 50%; background: #43536a; flex: 0 0 auto; }
#conn.ok { background: #4dc38a; box-shadow: 0 0 6px rgba(77,195,138,.7); }
#conn.bad { background: var(--bad); box-shadow: 0 0 6px rgba(220,80,80,.7); }
#chat-toggle, #sound-toggle, #cat-load {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: .18em;
  background: transparent; color: var(--dim); border: 1px solid #223046;
  border-radius: 6px; padding: 5px 7px; cursor: pointer;
}
#chat-toggle svg, #sound-toggle svg, #cat-load svg { width: 15px; height: 15px; display: block; }
#sound-toggle.off svg { opacity: .35; }
#chat-toggle:hover, #sound-toggle:hover, #cat-load:hover { color: var(--blue); border-color: #2e5a7a; }
#chat.collapsed #chat-toggle { color: var(--blue); }

#log {
  background: linear-gradient(180deg, rgba(4,6,11,0) 0%, rgba(4,6,11,.85) 18%, rgba(4,6,11,.94) 100%);
  flex: 0 1 auto; max-height: 34vh; overflow-y: auto; padding: 10px 6px 6px;
  display: flex; flex-direction: column; gap: 8px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 22%);
  mask-image: linear-gradient(180deg, transparent, #000 22%);
}
.bubble {
  max-width: 88%; padding: 9px 12px; border-radius: 10px;
  font-size: 12.5px; line-height: 1.55; white-space: pre-wrap; word-break: break-word;
}
.bubble.user { margin-left: auto; background: #12324a; border: 1px solid #1d4a6b; color: #cfeaff; }
.bubble.bot { background: #10161f; border: 1px solid #1d2836; color: var(--ink); }
.bubble.bot .notes { display: block; margin-top: 6px; font-size: 10.5px; color: var(--dim); }
.bubble.err { background: #2a1014; border: 1px solid #5a1f27; color: #ffc9c9; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chip {
  font-family: var(--mono); font-size: 11px; color: var(--blue);
  background: #0d2030; border: 1px solid #1d4a6b; border-radius: 999px;
  padding: 5px 12px; cursor: pointer;
}
.chip:hover { background: #143049; }

#review { border: 1px solid #223046; border-radius: 10px; padding: 12px 14px; background: rgba(12, 20, 30, .55); backdrop-filter: blur(8px); margin-bottom: 8px; }
#review h2 { font-size: 11px; letter-spacing: .2em; color: var(--amber); margin-bottom: 8px; }
#review-fields { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; font-size: 11.5px; margin-bottom: 10px; }
#review-fields dt { color: var(--dim); }
#review-fields dd { color: var(--ink); }
#build {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--mono); font-size: 12.5px; letter-spacing: .18em;
  background: linear-gradient(180deg, #12455f, #0c2f44); color: #d5f3ff;
  border: 1px solid #2e6d8f; border-radius: 8px; padding: 10px 18px; cursor: pointer;
  box-shadow: 0 0 18px rgba(63, 210, 255, .25);
}
#build:hover { box-shadow: 0 0 26px rgba(63, 210, 255, .45); }
#build:disabled { opacity: .45; cursor: default; box-shadow: none; }
.coin-icon {
  width: 14px; height: 14px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffe9ad, #d9a93f 55%, #8a6414);
  box-shadow: 0 0 6px rgba(255, 200, 90, .7);
}
.review-note { margin-top: 8px; font-size: 10px; color: var(--dim); }

#composer {
  display: flex; gap: 8px; padding: 8px;
  border: 1px solid #2e5a7a; border-radius: 10px;
  background: rgba(6, 10, 16, .38); backdrop-filter: blur(8px);
}
#composer:focus-within { border-color: #3fd2ff; box-shadow: 0 0 14px rgba(63, 210, 255, .25); }
#composer input {
  flex: 1; font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: transparent; border: 0; border-radius: 8px; padding: 9px 12px;
  outline: none;
}
#composer button {
  font-family: var(--mono); font-size: 11.5px; letter-spacing: .14em;
  background: transparent; color: var(--blue); border: 1px solid #1d4a6b;
  border-radius: 8px; padding: 0 12px; cursor: pointer;
}
#composer button svg { width: 17px; height: 17px; display: block; margin: 10px 0; }
#composer button:hover { background: rgba(20, 48, 73, .5); }
#hint { padding: 5px 8px 0; font-size: 10.5px; letter-spacing: .08em; color: #9fb0c3; text-shadow: 0 1px 3px rgba(0,0,0,.8); }

/* ============================ the paper ============================ */
#flight-layer {
  position: fixed; inset: 0; z-index: 30;
  display: flex; align-items: center; justify-content: center;
  padding-bottom: calc(var(--bar-h, 150px) + 14px); /* --bar-h is the measured height of the chat strip plus the credits line (arcade.js): the page always ends above it, at any size */
  background: rgba(2, 4, 8, .45);
}
#flight-layer[hidden] { display: none; }
.paper {
  position: relative; width: min(720px, 92vw); max-height: min(88vh, calc(100vh - var(--bar-h, 150px) - 40px)); overflow-y: auto;
  background:
    linear-gradient(160deg, rgba(0, 0, 0, .06), transparent 30%),
    var(--paper);
  color: var(--paper-ink);
  border-radius: 3px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .8), 0 0 0 1px rgba(0, 0, 0, .4);
}
/* the 3D sheet does the flight; the readable page is the moment it presses to glass */
.paper.stuck { animation: press .45s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes press {
  0% { transform: scale(1.07) rotate(.6deg); box-shadow: 0 0 0 rgba(0,0,0,0); }
  60% { transform: scale(.997) rotate(-.15deg); }
  100% { transform: scale(1) rotate(0deg); box-shadow: 0 30px 80px rgba(0, 0, 0, .8); }
}
.paper.jammed { transform: rotate(-1.6deg); background: #efe6d4; }
.paper-inner { padding: 30px 34px 26px; }
.glass-shine {
  position: sticky; top: 0; height: 0; pointer-events: none;
}
.paper h1 { font-size: 17px; letter-spacing: .18em; border-bottom: 2px solid var(--paper-ink); padding-bottom: 8px; }
.paper .sub { font-size: 10.5px; color: #6b6350; margin: 6px 0 16px; letter-spacing: .06em; }
.paper h2 { font-size: 11.5px; letter-spacing: .22em; margin: 18px 0 6px; color: #4c4636; }
.paper table { width: 100%; border-collapse: collapse; font-size: 11.5px; }
.paper .tbl-scroll { overflow-x: auto; }
.paper th { text-align: left; font-size: 9.5px; letter-spacing: .14em; color: #6b6350; border-bottom: 1px solid #b3a888; padding: 4px 6px; }
.paper td { border-bottom: 1px dotted #c6bb9e; padding: 4px 6px; vertical-align: top; }
.paper td.num, .paper th.num { text-align: right; font-variant-numeric: tabular-nums; }
.paper .factrow { display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 12px; margin: 4px 0 2px; }
.paper .factrow b { color: #6b6350; font-weight: 400; margin-right: 6px; font-size: 10px; letter-spacing: .12em; }
.paper ul { margin: 4px 0 4px 18px; font-size: 11.5px; }
.paper li { margin: 2px 0; }
.paper .warn { color: #8a5a12; }
.paper .unverified { color: #7a4a8a; }
.paper .badlist li { color: #8a2626; }
.paper .repair { color: #4c6a2a; }
.paper .foot {
  margin-top: 20px; padding-top: 8px; border-top: 1px dashed #b3a888;
  font-size: 9.5px; color: #6b6350; line-height: 1.6; letter-spacing: .04em;
}
.paper .stamp {
  position: sticky; top: 10px; margin-left: auto; margin-right: 8px; width: max-content;
  transform: rotate(8deg); z-index: 3; background: rgba(245, 238, 216, .92);
  border: 2px solid #1f5a2e; color: #1f5a2e; border-radius: 4px;
  font-size: 11px; letter-spacing: .22em; padding: 4px 10px; opacity: .92;
}
.paper .stamp.jam { border-color: #7d2020; color: #7d2020; }
.paper .stamp.warn { border-color: #7a4d0c; color: #7a4d0c; }
.paper .ribbon {
  margin-top: 10px; padding: 6px 10px; border: 1px dashed #8a5a12; border-radius: 4px;
  color: #8a5a12; font-size: 10.5px; letter-spacing: .05em;
}
.paper-close {
  margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: .14em;
  background: #22201a; color: var(--paper); border: 0; border-radius: 6px;
  padding: 8px 16px; cursor: pointer;
}

/* sheet tabs + dashboard pager: outline-only, printed on the sheet */
.sheet-nav { display: flex; gap: 8px; justify-content: flex-end; margin: 0 150px 10px 0; } /* right margin clears the rotated stamp */
.sheet-tab {
  font-family: var(--mono); font-size: 10px; letter-spacing: .22em;
  background: transparent; color: #3a352b; border: 1px solid rgba(58, 53, 43, .6);
  border-radius: 4px; padding: 4px 12px; cursor: pointer;
}
.sheet-tab.cur { background: #22201a; color: var(--paper); border-color: #22201a; }
.sheet-tab:hover { border-color: #22201a; }
.dash-head {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase;
  color: #6b6353; margin: 2px 0 10px; padding-bottom: 6px;
  border-bottom: 1px dashed rgba(58, 53, 43, .4);
}
.dash-pager {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: center;
  margin-top: 14px; padding-top: 10px; border-top: 1px dashed rgba(58, 53, 43, .4);
}
.dash-page, .dash-nav {
  font-family: var(--mono); font-size: 10px; letter-spacing: .14em;
  background: transparent; color: #3a352b; border: 1px solid rgba(58, 53, 43, .55);
  border-radius: 4px; padding: 4px 10px; cursor: pointer;
}
.dash-page.cur { background: #22201a; color: var(--paper); border-color: #22201a; }
.dash-page:hover, .dash-nav:hover { border-color: #22201a; }
.dash-nav:disabled { opacity: .35; cursor: default; }
.dash-pager .dash-nav:first-child { margin-right: auto; }
.dash-pager .dash-nav:last-child { margin-left: auto; }

/* ============================ small screens ============================ */
@media (max-width: 900px) {
  #composer button { padding: 4px 0; }
  #composer button svg { margin: 4px 0; width: 15px; height: 15px; }
  #log { max-height: 30vh; }
  #chat header { flex-wrap: wrap; row-gap: 4px; }
  #chat h1 { letter-spacing: .14em; font-size: 11px; }
  #conn { font-size: 8px; max-width: 90px; }
  .paper-inner { padding: 20px 16px 18px; }
  .paper table { font-size: 10px; }
  .paper h1 { font-size: 14px; }
  #stage-caption { top: auto; bottom: 2%; font-size: 10px; letter-spacing: .2em; }
  #replay-banner { font-size: 9px; max-width: 92vw; text-align: center; }
}

/* narrow phones: the same single-row composer as the laptop, with square icon buttons and a placeholder that is cut with an ellipsis instead of wrapping */
@media (max-width: 640px) {
  #composer { flex-wrap: nowrap; gap: 6px; padding: 6px; }
  #composer input { flex: 1 1 auto; order: 0; min-width: 0; text-overflow: ellipsis; }
  #composer input::placeholder { text-overflow: ellipsis; }
  #composer button { flex: 0 0 38px; width: 38px; padding: 0; }
}

/* short viewports at any width: compact single-row composer, sheet kept clear of the bar */
@media (max-height: 560px) {
  #composer { padding: 5px; gap: 6px; }
  #composer input { padding: 6px 10px; }
  #composer button { padding: 2px 10px; }
  #composer button svg { margin: 3px 0; width: 14px; height: 14px; }
  #hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .paper.stuck { animation: none; }
  #chat { transition: none; }
  .vp-dot { animation: none; } /* the recording dot stays lit instead of pulsing */
  .vp-meter > i { transition: none; }
}


/* asset credits: pinned one-line strip at the very bottom; full attribution in a bounded panel */
.arcade-credits {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 9;
  display: flex; align-items: center; gap: 10px;
  font-size: 9px; line-height: 1.4; color: var(--dim);
  background: rgba(4, 6, 11, .92);
  padding: 4px 10px calc(4px + env(safe-area-inset-bottom, 0px));
}
.arcade-credits .credits-line { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arcade-credits #credits-toggle {
  font-family: var(--mono); font-size: 8.5px; letter-spacing: .14em; flex: none;
  color: var(--dim); background: transparent; border: 1px solid #223046;
  border-radius: 6px; padding: 2px 8px; cursor: pointer;
}
.arcade-credits #credits-toggle:hover { color: var(--blue); border-color: #2e5a7a; }
#credits-panel {
  position: fixed; left: 0; right: 0; bottom: 22px; z-index: 46;
  max-height: 30vh; overflow: auto;
  font-size: 10px; line-height: 1.5; color: var(--ink);
  background: rgba(4, 6, 11, .97); border-top: 1px solid #223046;
  padding: 10px 14px calc(8px + env(safe-area-inset-bottom, 0px));
}
#credits-panel[hidden] { display: none; }
.arcade-credits a, #credits-panel a { color: #7cc4e4; }

/* film grain + vignette over the 3D layer (runtime-generated noise, CSP-safe) */
#film {
  position: fixed; inset: 0; z-index: 8; pointer-events: none;
  box-shadow: inset 0 0 22vmax rgba(0, 0, 0, .62);
  opacity: .5; mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { #film { opacity: .3; } }

/* ============================ voice panel + attach ============================ */
#chat.collapsed #voice-panel { display: none; }
#voice-panel {
  border: 1px solid #223046; border-radius: 10px; padding: 12px 14px;
  background: rgba(9, 14, 22, .94); backdrop-filter: blur(8px); margin-bottom: 8px;
}
#voice-panel[hidden] { display: none; }
.vp-title { font-family: var(--mono); font-size: 11px; letter-spacing: .2em; color: var(--amber); margin-bottom: 8px; }
.vp-status { font-size: 11.5px; color: var(--ink); margin: 6px 0; white-space: pre-wrap; }
.vp-feat { margin: 6px 0 0; padding-left: 16px; font-family: var(--mono); font-size: 10px; color: var(--dim); }
.vp-feat li { margin: 2px 0; }
.vp-row { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.vp-timer { font-family: var(--mono); font-size: 13px; color: var(--amber); min-width: 56px; }
.vp-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff5a5a; box-shadow: 0 0 8px rgba(255,90,90,.8); animation: vpPulse 1.1s ease-in-out infinite; }
@keyframes vpPulse { 50% { opacity: .35; } }
.vp-meter { flex: 1; min-width: 90px; height: 8px; border: 1px solid #1d3040; border-radius: 5px; overflow: hidden; background: #0a1220; }
.vp-meter > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #1d6f8f, #3fd2ff); transition: width .09s linear; }
.vp-audio { width: 100%; margin-top: 10px; }
.vp-audio audio { width: 100%; height: 34px; }
#vp-transcript {
  width: 100%; box-sizing: border-box; margin-top: 8px; min-height: 64px; resize: vertical;
  font-family: var(--mono); font-size: 12.5px; color: var(--ink);
  background: rgba(6, 10, 16, .5); border: 1px solid #2e5a7a; border-radius: 8px; padding: 9px 12px; outline: none;
}
#vp-transcript:focus { border-color: #3fd2ff; }
.vp-btns { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.vp-btns button {
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: var(--blue);
  background: #0d2030; border: 1px solid #1d4a6b; border-radius: 999px; padding: 6px 14px; cursor: pointer;
}
.vp-btns button:hover { background: #143049; }
.vp-btns button.primary { color: #d5f3ff; background: linear-gradient(180deg, #12455f, #0c2f44); border-color: #2e6d8f; }
.vp-btns button.danger { color: #ffc9c9; border-color: #5a1f27; background: #2a1014; }
.vp-btns button:disabled { opacity: .45; cursor: default; }

/* guest-list preview on the paper (shopping-list sheet) */
.gprev-note { font-size: 10.5px; color: #6b5a33; margin-top: 10px; font-style: italic; }
.paper tr.rowerr td { color: #a33c1f; }
.paper td.rowmsg { font-size: 10px; font-style: italic; }
.gprev-import:disabled { opacity: .45; cursor: default; }

/* live-mode log lines */
.vp-live-log { margin-top: 8px; max-height: 180px; overflow-y: auto; font-size: 11.5px; }
.vp-live-log div { margin: 3px 0; }
.vp-live-you { color: var(--ink); }
.vp-live-bot { color: var(--blue); }
.vp-live-sys { color: var(--dim); font-style: italic; }

/* holographic Hall table */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
body.holo-focus #chat{display:none}
body.holo-focus #hint{display:none}
body.vend-focus #chat{display:none}
body.vend-focus #hint{display:none}
body.dossier-focus #chat{display:none}
body.dossier-focus #hint{display:none}


/* signature wall focus panel */
body.wall-focus #chat{display:none}
body.wall-focus #hint{display:none}
#wall-panel{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);z-index:40;min-width:320px;max-width:92vw;background:rgba(24,28,40,.84);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(226,222,206,.22);border-radius:10px;padding:12px 16px;color:#e6e2d2;font-family:var(--mono);font-size:13px;text-align:center}
#wall-panel p{margin:6px 0}
#wall-status{color:#d8d3c0;min-height:1.2em}
#wall-signbox{display:flex;gap:8px;justify-content:center;margin-top:6px}
#wall-name{background:#0b1018;border:1px solid #223046;border-radius:6px;color:#e8e2d0;font:inherit;padding:7px 10px;width:200px}
#wall-panel button{background:transparent;color:#d7dee6;border:1px solid #223046;border-radius:6px;padding:7px 14px;cursor:pointer;font:inherit;letter-spacing:.1em}
#wall-panel button:hover{color:var(--blue);border-color:#2e5a7a}
#wall-readybtn{margin-top:6px;color:#ffb54d;border-color:#5a4326}
#wall-waitline{color:#ffb54d}
#wall-result{color:#e8e2d0}
#wall-halloffer p{color:#7de8ff}
#wall-startrow{display:flex;gap:10px;justify-content:center;margin-top:6px}
#wall-halloffer{margin-top:8px}
#wall-halloffer button{margin:0 4px}
#wall-hall-yes{color:#59d68f;border-color:#265a3a}

/* the hidden attribute must always win over the panel display rules */
#wall-panel [hidden]{display:none !important}
#wall-name::placeholder{color:#a9b4c2;opacity:1}

/* migrated plan tabs on the paper */
.sheet-nav { flex-wrap: wrap; row-gap: 6px; justify-content: flex-start; margin-right: 150px; }
.paper .pv-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin: 6px 0 10px; }
.paper .pv-stat { border: 1px dashed rgba(58,53,43,.55); border-radius: 4px; padding: 8px 10px; }
.paper .pv-stat small { display: block; font-size: 9px; letter-spacing: .18em; color: #6b6350; }
.paper .pv-stat b { display: block; font-size: 19px; margin: 3px 0 1px; }
.paper .pv-stat span { font-size: 11px; color: #6b6350; }
.paper .pv-gantt { margin: 4px 0 12px; }
.paper .pv-grow { display: grid; grid-template-columns: 130px 1fr 110px; align-items: center; gap: 8px; margin: 3px 0; font-size: 11px; }
.paper .pv-glabel { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paper .pv-gtrack { position: relative; height: 12px; border-bottom: 1px solid rgba(58,53,43,.25); }
.paper .pv-gbar { position: absolute; top: 1px; height: 9px; background: rgba(58,53,43,.75); border-radius: 2px; }
.paper .pv-gbar.venue { background: #4a6fa5; } .paper .pv-gbar.caterer { background: #b03a2e; }
.paper .pv-gbar.photographer { background: #7d6608; }
.paper .pv-gwhen { font-size: 10px; color: #6b6350; text-align: right; white-space: nowrap; line-height: 1.3; }
.paper .pv-vendor { border: 1px solid rgba(58,53,43,.5); border-radius: 4px; padding: 8px 12px; margin: 8px 0; }
.paper .pv-vhead { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.paper .pv-vhead span { color: #6b6350; font-size: 12px; }
.paper .pv-alt { font-size: 11px; color: #6b6350; margin: 2px 0; }
.paper .pv-donutwrap { display: flex; align-items: center; gap: 18px; margin: 8px 0; flex-wrap: wrap; }
.paper .pv-donut { width: 110px; height: 110px; border-radius: 50%; flex: none; }
.paper .pv-legend p { display: flex; align-items: center; gap: 7px; margin: 2px 0; font-size: 12px; }
.paper .pv-legend i { width: 10px; height: 10px; border-radius: 2px; flex: none; }
.paper .pv-input::placeholder { color: #5f5948; opacity: 1; }
.paper .pv-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,.55); border: 1px solid rgba(58,53,43,.5); border-radius: 3px; padding: 6px 9px; font: inherit; font-size: 12px; color: #26211a; }
.paper .pv-btn { background: none; border: 1px solid rgba(58,53,43,.65); border-radius: 3px; padding: 5px 12px; font: inherit; font-size: 11px; letter-spacing: .12em; color: #26211a; cursor: pointer; }
.paper .pv-btn:hover { background: rgba(58,53,43,.08); }
.paper .pv-btn:disabled { opacity: .5; cursor: default; }
.paper .pv-btn.small { padding: 3px 9px; font-size: 10px; }
.paper .pv-btn.cur { background: rgba(58,53,43,.85); color: #f3ecd9; }
.paper .pv-askthread { min-height: 120px; max-height: 300px; overflow-y: auto; margin: 10px 0; display: flex; flex-direction: column; gap: 8px; }
.paper .pv-askform { display: flex; gap: 8px; margin: 8px 0; align-items: center; }
.paper .pv-askform .pv-input { flex: 1; }
.paper .pv-q { align-self: flex-end; background: rgba(58,53,43,.12); border-radius: 3px; padding: 6px 10px; font-size: 12px; max-width: 85%; }
.paper .pv-a { align-self: flex-start; border-left: 3px double rgba(58,53,43,.5); padding: 6px 10px; font-size: 12px; max-width: 92%; white-space: pre-wrap; }
.paper .pv-askmeta { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 5px; }
.paper .pv-chip { border: 1px solid rgba(58,53,43,.5); border-radius: 3px; padding: 1px 7px; font-size: 10px; color: #3a3326; }
.paper .pv-chip.ok { border-color: #2e6b34; color: #2e6b34; }
.paper .pv-chip.warn { border-color: #b03a2e; color: #b03a2e; }
.paper .pv-prop { border: 1px dashed rgba(58,53,43,.6); border-radius: 3px; padding: 5px 9px; margin-top: 6px; font-size: 11px; color: #4c4436; }
.paper .pv-bad { color: #b03a2e; font-size: 11px; margin: 6px 0; }
.paper .pv-lead { font-size: 13px; font-weight: bold; margin: 8px 0 2px; }
.paper .pv-checks { list-style: none; padding: 0; margin: 6px 0; font-size: 11px; }
.paper .pv-checks li { padding: 3px 0 3px 18px; position: relative; }
.paper .pv-checks li.pass::before { content: "\2713"; position: absolute; left: 0; color: #2e6b34; }
.paper .pv-checks li.fail::before { content: "\2717"; position: absolute; left: 0; color: #b03a2e; }
.paper .pv-checks li.warn::before { content: "?"; position: absolute; left: 0; color: #7d6608; }
.paper .pv-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 7px; }
.paper .pv-note { display: block; font-size: 12px; margin: 4px 0; }
.paper .pv-table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 6px 0; }
.paper .pv-table td { border-bottom: 1px dotted rgba(58,53,43,.35); padding: 4px 6px; }
.paper .pv-table tr.cur td { font-weight: bold; }
.paper .pv-table td.num { text-align: right; }
.paper .pv-difflist { list-style: none; padding: 0; margin: 4px 0 10px; font-size: 11px; }
.paper .pv-difflist li { padding: 2px 0; }
.paper .pv-quotebody { white-space: pre-wrap; border-left: 3px double rgba(58,53,43,.4); padding: 6px 10px; margin: 6px 0; font-size: 12px; }
.paper details { margin: 6px 0; font-size: 11px; }
.paper details summary { cursor: pointer; font-weight: bold; }
.paper .pv-verrow { cursor: pointer; }
.paper .pv-verrow:hover td { background: rgba(58,53,43,.08); }

/* during the tap window the panel collapses to a thin status strip so it cannot cover board cells */
body.wall-focus.wall-phase-go #wall-panel { min-width: 0; padding: 6px 14px; }
body.wall-focus.wall-phase-go #wall-panel #wall-minebox,
body.wall-focus.wall-phase-go #wall-panel #wall-hallstate { display: none; }
#cat-load.done { color: var(--blue); border-color: #2e5a7a; opacity: .8; }
#cat-load.failed { opacity: .35; }


/* ============================ target size ============================
   WCAG 2.2 AA (2.5.8): every control is at least 24 CSS px each way. On a touch screen (coarse pointer) it is 44, the size of a fingertip. */
.paper .pv-btn, .paper .sheet-tab, .paper .paper-close, .paper .pv-input, .paper select { min-height: 24px; }
.paper details summary { min-height: 24px; padding: 4px 0; }
.arcade-credits #credits-toggle { min-height: 24px; }
#chat-toggle, #sound-toggle, #cat-load { min-height: 28px; }
@media (pointer: coarse) {
  #chat-toggle, #sound-toggle, #cat-load, #composer button, #build, .chip, #voice-panel button, #wall-panel button, #wall-panel input,
  .paper .pv-btn, .paper .sheet-tab, .paper .paper-close, .paper .pv-input, .paper select, .paper details summary { min-width: 44px; min-height: 44px; }
  #composer input { min-height: 44px; }
  #composer button { flex: 0 0 44px; width: 44px; }
  .arcade-credits #credits-toggle { min-height: 44px; padding-top: 6px; padding-bottom: 6px; }
  .arcade-credits { padding-top: 2px; padding-bottom: calc(2px + env(safe-area-inset-bottom, 0px)); }
  #chat { bottom: 52px; }
  #credits-panel { bottom: 50px; }
  .paper details summary { display: flex; align-items: center; }
}