/* ANTOGATVA: the site is a police notice board. The plate is a photograph; everything
   pinned on it is a real element laid over it in plate coordinates (1920 x 1075 units). */
:root {
  --cream: #e6dcc3;
  --ink: #1b1713;
  --red: #b0121a;
  --W: 1920;
  --H: 1075;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: #07100e; color: var(--cream); overflow: hidden; }
body { font-family: 'Special Elite', 'Courier New', monospace; -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img { display: block; }

/* ---------- the room ---------- */
.room { position: fixed; inset: 0; overflow: hidden; }
.cam { position: absolute; left: 0; top: 0; width: 1920px; height: 1075px; transform-origin: 0 0; will-change: transform; }
.world { position: absolute; left: 0; top: 0; width: 1920px; height: 1075px; }
.plate { position: absolute; inset: 0; width: 1920px; height: 1075px; user-select: none; pointer-events: none; }
.title {
  position: absolute; left: 50%; top: 98px; width: 540px; height: auto; transform: translateX(-50%); z-index: 2;
  pointer-events: none; user-select: none; opacity: .96;
  filter: drop-shadow(0 1px 0 rgba(0,0,0,.6)) drop-shadow(0 0 6px rgba(0,0,0,.35));
}
.threads { position: absolute; inset: 0; width: 1920px; height: 1075px; pointer-events: none; z-index: 3; }
.threads path { fill: none; stroke-linecap: round; }
.threads .shadow { stroke: rgba(0,0,0,.55); stroke-width: 3.2; transform: translate(1.5px, 2.5px); }
.threads .thread { stroke: var(--red); stroke-width: 1.9; }
.threads .thread.lit { stroke: #e0323a; stroke-width: 2.4; }
.items { position: absolute; inset: 0; z-index: 4; }
.tabs { position: absolute; inset: 0; z-index: 5; pointer-events: none; }
.glass {
  position: absolute; inset: 0; z-index: 6; pointer-events: none; mix-blend-mode: screen; opacity: .55;
  background:
    linear-gradient(104deg, rgba(255,255,255,0) 38%, rgba(214,236,232,.11) 46%, rgba(255,255,255,0) 52%),
    radial-gradient(60% 18% at 50% 2%, rgba(205,240,230,.16), rgba(0,0,0,0) 70%);
}
.dim { position: absolute; inset: 0; background: #000; opacity: 0; pointer-events: none; z-index: 8; }
.grain {
  position: absolute; inset: 0; z-index: 9; pointer-events: none; opacity: .04;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
/* the tube light's own glow: only this flickers */
.tube {
  position: absolute; left: 0; right: 0; top: 0; height: 34%; z-index: 7; pointer-events: none; mix-blend-mode: screen; opacity: .5;
  background: radial-gradient(55% 60% at 50% 0%, rgba(190,235,225,.55), rgba(120,170,160,.12) 45%, rgba(0,0,0,0) 72%);
}

/* ---------- pinned things ---------- */
.item {
  position: absolute; transform-origin: 50% 8%; cursor: pointer;
  transform: rotate(var(--rot, 0deg));
  filter: drop-shadow(2px 4px 3px rgba(0,0,0,.55));
  transition: filter .25s ease;
}
.item .body { position: relative; }
.item.photo .print {
  background: #f1ebdc; padding: 3.2%; padding-bottom: 3.2%;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08);
}
.item.photo .print img { width: 100%; height: auto; background: #111; }
.item.photo .print::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,0) 35%, rgba(0,0,0,.08) 100%);
}
.item.paper img.prop, .item.sheet img.prop { width: 100%; height: auto; }
.item .lbl {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%);
  background: var(--cream); color: var(--ink); padding: 5px 22px 4px; white-space: nowrap;
  font-size: 11px; line-height: 1.25; letter-spacing: .06em; text-align: center;
  box-shadow: 1px 2px 2px rgba(0,0,0,.5);
  background-image: linear-gradient(180deg, rgba(0,0,0,0), rgba(60,40,10,.08));
}
.item .lbl b { font-weight: 400; display: block; }
.item .pin {
  position: absolute; width: 18px; height: auto; pointer-events: none; z-index: 2;
  filter: drop-shadow(1px 2px 1.5px rgba(0,0,0,.6));
}
.item .pin.tl { left: 4%; top: -6px; }
.item .pin.tr { right: 4%; top: -6px; }
.item .pin.tc { left: 50%; top: -7px; margin-left: -9px; }
.item .pin.lb { left: 50%; top: calc(100% + 3px); margin-left: -9px; }
.item .lbl .pin { width: 13px; top: 50%; margin-top: -6px; }
.item .lbl .pin.ll { left: 3px; }
.item .lbl .pin.lr { right: 3px; }
.mobile .item .lbl .pin { width: 17px; margin-top: -8px; }
.item.lift { filter: drop-shadow(5px 9px 7px rgba(0,0,0,.6)); z-index: 20; }
.item .body { transition: transform .25s cubic-bezier(.2,.7,.2,1); }
.item.lift .body { transform: translateY(-2px) scale(1.025); }
.item.read .print { background: #ece4d2; }
.item.new { z-index: 15; }
.item .ring { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.item .ring path { fill: none; stroke: #d8181f; stroke-width: 2.8; stroke-linecap: round; opacity: .88; filter: drop-shadow(0 0 1px rgba(0,0,0,.6)); }
.item .note {
  position: absolute; left: 6%; top: calc(100% + 48px); width: 88%;
  font-family: 'Kalam', cursive; font-weight: 300; font-size: 13px; line-height: 1.3; color: #e9e1cf;
  text-shadow: 0 1px 2px rgba(0,0,0,.8); opacity: 0; transition: opacity .5s; pointer-events: none;
  transform: rotate(-.4deg);
}
.item.focus .note { opacity: 1; }

/* the four strips along the bottom of the board */
.tab {
  position: absolute; height: 40px; display: flex; align-items: center; justify-content: center;
  color: var(--ink); font-size: 15px; letter-spacing: .12em; pointer-events: auto; cursor: pointer;
  transition: transform .2s, text-shadow .2s;
}
.tab:hover { text-shadow: 0 0 1px rgba(0,0,0,.4); transform: translateY(-1px); }
.tab.on { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- reading one thing ---------- */
.reader {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; padding: 14px 20px 18px;
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  opacity: 0; pointer-events: none; transition: opacity .35s;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.6));
}
.reader.on { opacity: 1; pointer-events: auto; }
.reader-note { font-family: 'Kalam', cursive; font-weight: 300; font-size: 20px; color: #efe7d4; text-shadow: 0 1px 3px #000; text-align: center; max-width: 70ch; }
.reader-nav { display: flex; gap: 14px; align-items: center; font-size: 13px; letter-spacing: .1em; }
.reader-nav button { padding: 6px 12px; border: 1px solid rgba(230,220,195,.35); border-radius: 2px; }
.reader-nav button:hover { border-color: var(--cream); }

.hint {
  position: fixed; left: 50%; bottom: 22px; transform: translateX(-50%); z-index: 25;
  font-size: 12px; letter-spacing: .18em; color: rgba(230,220,195,.75); text-shadow: 0 1px 2px #000;
  opacity: 0; transition: opacity 1s;
}
.hint.on { opacity: 1; }
.corner {
  position: fixed; right: 18px; top: 14px; z-index: 25; display: flex; gap: 16px; align-items: center;
  font-size: 11px; letter-spacing: .16em; color: rgba(230,220,195,.7); text-shadow: 0 1px 2px #000;
}
.corner button { padding: 4px 0; border-bottom: 1px solid transparent; }
.corner button:hover, .corner button[aria-pressed="true"] { border-bottom-color: rgba(230,220,195,.7); }

/* ---------- the application paper ---------- */
.apply { position: fixed; inset: 0; z-index: 40; display: grid; place-items: center; background: rgba(0,0,0,.45); }
.apply[hidden] { display: none; }
.form-paper {
  position: relative; width: min(520px, 92vw, 66vh); color: var(--ink);
  filter: drop-shadow(0 18px 30px rgba(0,0,0,.7)) drop-shadow(2px 4px 4px rgba(0,0,0,.5));
  transform: rotate(-.8deg);
}
.form-img { width: 100%; height: auto; display: block; }
.form-paper .pin { position: absolute; }
.form-paper .f {
  position: absolute; left: 9%; width: 81%; height: 4.6%; padding-top: .6%; border: 0; background: transparent; outline: none;
  font-family: 'Kalam', cursive; font-size: clamp(14px, 3.6vmin, 21px); color: #1d2a6b; padding: 0 4px;
}
.form-paper .f:focus { background: rgba(176,18,26,.05); border-radius: 2px; }
.form-foot {
  position: absolute; left: 9%; top: 78.6%; width: 60%; display: flex; gap: 14px; align-items: center;
  font-size: 11px; letter-spacing: .1em;
}
.form-foot button { padding: 5px 10px; border: 1px solid rgba(27,23,19,.55); }
.form-foot #send { background: rgba(27,23,19,.07); }
#form-msg { opacity: .8; }
.stamp {
  position: absolute; right: 8%; top: 76%; padding: 6px 14px; border: 3px solid #6a1c8a; color: #6a1c8a;
  font-size: 26px; letter-spacing: .2em; transform: rotate(-14deg) scale(1.6); opacity: 0; mix-blend-mode: multiply;
  transition: transform .18s cubic-bezier(.2,2,.4,1), opacity .18s;
}
.stamp.on { transform: rotate(-14deg) scale(1); opacity: .85; }

@media (max-width: 760px) {
  .corner { flex-direction: column; align-items: flex-end; gap: 4px; right: 12px; top: 10px; }
  .reader-note { font-size: 16px; }
  .hint { bottom: 14px; font-size: 11px; }
  .item .lbl { font-size: 10px; }
}

/* ---------- long boards, twine, captions, strip tabs ---------- */
.threads g.twine .thread { stroke: #d9cfb2; stroke-width: 1.3; opacity: .8; }
.threads g.twine .thread.lit { stroke: #fff3d6; stroke-width: 1.8; opacity: 1; }
.threads g.twine .shadow { stroke-width: 2.2; }
.item .cap {
  position: absolute; left: 4%; width: 92%; top: calc(100% + 50px); text-align: center;
  font-family: 'Kalam', cursive; font-weight: 300; font-size: 12px; line-height: 1.25; color: #e4dcc8;
  text-shadow: 0 1px 2px rgba(0,0,0,.85); pointer-events: none; transform: rotate(-.3deg);
}
.tab.strip {
  background: url("../img/board/strip.webp") center / 100% 100% no-repeat; color: #14100c;
  font-size: 13.5px; letter-spacing: .12em; height: 48px; font-weight: 400;
  text-shadow: 0 0 1px rgba(20,16,12,.5);
  box-shadow: 1px 3px 4px rgba(0,0,0,.55);
  transition: transform .18s, box-shadow .18s, filter .18s;
}
.tab.strip:hover { transform: translateY(-2px); box-shadow: 2px 6px 8px rgba(0,0,0,.6); filter: brightness(1.08); }
.tab.strip.on { text-decoration: none; filter: brightness(1.1); }
.mobile .tab.strip { font-size: 21px; box-shadow: 1px 3px 4px rgba(0,0,0,.55); }

/* ---------- phone boards ---------- */
.parts { position: absolute; left: 0; top: 0; }
.mobile .tube { height: 600px; }
.mobile .item .lbl { font-size: 15px; padding: 7px 28px 6px; }
.mobile .item .pin { width: 24px; }
.mobile .item .pin.tl, .mobile .item .pin.tr { top: -8px; }
.mobile .item .cap { font-size: 17px; top: calc(100% + 62px); }
.mobile .item .ring path { stroke-width: 3.4; }
.mobile .tab { font-size: 22px; }
.mobile .hint { display: none; }
.mobile .reader { padding-bottom: max(18px, env(safe-area-inset-bottom)); }
.mobile .reader-nav button { padding: 9px 14px; font-size: 14px; }

/* ---------- the game board: typed sheets, stills, the poster ---------- */
.item.sheet .sheet-text {
  position: absolute; left: 9%; right: 9%; top: 15%; color: #221d18; font-size: 9.2px; line-height: 1.45; letter-spacing: .02em;
  white-space: pre-line;
}
.item.sheet .sheet-text.letter { top: 17%; }
.item.sheet .sheet-text h3 { font-weight: 400; font-size: 11px; letter-spacing: .14em; margin: 0 0 .7em; }
.item.sheet .sheet-text p { margin: 0 0 .75em; }
.item.sheet .sheet-text .sig { font-family: 'Kalam', cursive; font-size: 12px; color: #1d2a6b; margin-top: .6em; }
.item.sheet .sheet-text .small { font-size: 7.8px; opacity: .8; }
.item.image .print { background: #f1ebdc; padding: 3.2%; }
.item.image .print img { width: 100%; height: auto; display: block; background: #111; }
.item.image.poster .print { padding: 0; background: none; }
.item.image.poster .print img { box-shadow: 0 0 0 1px rgba(0,0,0,.3); }
.item.image .print::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(160deg, rgba(255,255,255,.10), rgba(0,0,0,0) 35%, rgba(0,0,0,.08) 100%); }
.item.image.logo .print { background: #0a0909; padding: 6% 8%; }
.item.image.logo .print img { background: none; }
.tab.link::after { content: " \2197"; font-size: .85em; }
.mobile .item.sheet .sheet-text { font-size: 18px; }
.mobile .item.sheet .sheet-text h3 { font-size: 21px; }
.mobile .item.sheet .sheet-text .sig { font-size: 22px; }
.mobile .item.sheet .sheet-text .small { font-size: 15px; }

/* ---------- phones: the board must be cheap to draw ---------- */
.room { touch-action: none; overscroll-behavior: none; }
.mobile .item { filter: none; }
.mobile .item .print, .mobile .item img.prop, .mobile .item.image .print { box-shadow: 2px 4px 5px rgba(0,0,0,.55); }
.mobile .item.lift { filter: none; }
.mobile .item .body { transition: none; }
.mobile .item .pin { filter: none; }
.mobile .tube { mix-blend-mode: normal; opacity: .22; background: radial-gradient(55% 60% at 50% 0%, rgba(190,235,225,.6), rgba(0,0,0,0) 70%); }
.mobile .glass { display: none; }
.mobile .grain { display: none; }
.mobile .threads .shadow { display: none; }
.mobile .item .lbl { box-shadow: none; }