/* Beveled dialogue frames and the machinery inside the close-up windows. */
.prop-window {
  width: min(650px, calc(100% - 22px));
  border: 12px solid transparent;
  border-image: url("assets/popup-frame.svg") 20 stretch;
  background:
    repeating-linear-gradient(132deg, #c2a88c07 0 1px, transparent 1px 4px),
    radial-gradient(ellipse at 35% 0, #37313c, #211d28 65%, #1a1720);
  background-clip: padding-box;
  color: #f6e3ba;
  box-shadow: 0 18px 66px #000b;
  scrollbar-color: #a38061 #221d2b;
}
.prop-window::backdrop { background: radial-gradient(ellipse, #08090c74, #08060acd); }

.prop-rail {
  min-height: 36px;
  padding: 3px 5px 3px 8px;
  border-bottom: 1px solid #937254;
  background: repeating-linear-gradient(0deg, #d6ba8f0c 0 1px, transparent 1px 3px), #201b25;
  box-shadow: inset 0 2px #d5ae7430, inset 0 -2px #0b0a11;
  color: #f1d4a3;
  font-size: 11px;
}
.prop-rail > i { font-style: normal; color: #d2a46d; text-shadow: 1px 1px #09070c; }
.prop-rail > span { flex: 1; }
.prop-rail button {
  flex: none;
  width: 30px;
  height: 28px;
  border: 2px outset #a87c62;
  background: linear-gradient(#653b41, #371e2a);
  color: #f5dcb1;
  text-shadow: 1px 2px #120e12;
}
.prop-rail button:hover { background: #845051; }

.prop-content h2 {
  font-style: normal;
  letter-spacing: -.018em;
  color: #fae4b5;
  text-shadow: 1px 2px #14101a;
}
.prop-content > .eyebrow { color: #d0a887; }
.prop-content > p { color: #ecddbf; }
.prop-window .option-bank > .primary-button {
  border-color: #ab8660;
  background: linear-gradient(180deg, #595446, #312d30);
  text-shadow: 1px 1px #131017;
}
.prop-window .option-bank > .secondary-button {
  border-color: #797080;
  background: linear-gradient(#3d3745, #272531);
}
.prop-window .option-bank > .secondary-button:hover:not(:disabled) { background: #4a4051; }

.speech-panel {
  display: grid;
  grid-template-columns: minmax(64px, 90px) minmax(0, 1fr);
  grid-template-areas: "portrait name" "portrait line";
  gap: 7px 16px;
  align-items: start;
  padding: 10px;
  border: 1px solid #876955;
  background: radial-gradient(ellipse at 55% 0, #342e3a, #1e1a26);
  box-shadow: inset 0 0 0 2px #100d16, 0 3px #100d16;
}
.speech-portrait {
  grid-area: portrait;
  width: 100%;
  height: auto;
  aspect-ratio: 90 / 84;
  padding: 2px;
  border: 2px ridge #a8825d;
  background: #1a111c;
  box-shadow: 2px 3px #110d16;
}
.speech-portrait canvas { display: block; }
.speech-header { grid-area: name; display: block; }
.speech-header h2 { margin-top: 2px; font-size: clamp(22px, 4.2vw, 33px); }
.speech-line {
  grid-area: line;
  position: relative;
  margin: 0;
  padding: 9px 12px;
  border: 1px solid #5e515d;
  background: #15151e;
  color: #f2e2bd;
  font: 17px/1.43 var(--book);
}
.speech-line::before {
  content: "";
  position: absolute;
  top: 13px;
  left: -5px;
  width: 8px;
  height: 8px;
  rotate: 45deg;
  border-bottom: 1px solid #5e515d;
  border-left: 1px solid #5e515d;
  background: inherit;
}

.world-feedback, .world-feedback.player-speech, .nat-cheer {
  background: #211b29f5;
  background-clip: padding-box;
  border: 6px solid transparent;
  border-image: url("assets/popup-frame.svg") 20 stretch;
  box-shadow: 3px 4px #0b0911a6;
}
.world-feedback { padding: 3px 7px; }
.world-feedback.player-speech { padding: 3px 12px; }
.nat-cheer img { margin-right: 7px; }

.inlay-layout {
  display: grid;
  grid-template-columns: minmax(0, 280px) minmax(0, 120px);
  align-items: start;
  gap: clamp(8px, 4vw, 24px);
}
.inlay-board {
  position: relative;
  aspect-ratio: 1;
  border: 6px ridge #8c593c;
  background: repeating-linear-gradient(5deg, #251718 0 4px, #30201c 4px 7px);
  box-shadow: 3px 4px #100b11;
}
.inlay-board.aligned { border-color: #c5a06a; }
.inlay-tile {
  position: absolute;
  inset: 0 auto auto 0;
  width: calc(100% / 3);
  aspect-ratio: 1;
  padding: 0;
  border: 1px outset #b39161;
  background: #282e29;
  box-shadow: inset 1px 1px #d3aa6c, inset -2px -2px #1e1519;
  transform: translate(calc(var(--tile-x, 0) * 100%), calc(var(--tile-y, 0) * 100%));
  transition: transform .15s ease-out, filter .13s;
}
.inlay-tile[data-slides]:hover, .inlay-tile:focus-visible { z-index: 1; filter: brightness(1.2); }
.inlay-tile svg, .inlay-reference svg { display: block; width: 100%; }
.inlay-tile span {
  position: absolute;
  right: 3px;
  bottom: 2px;
  min-width: 14px;
  padding: 0 2px;
  color: #ffe4a4;
  background: #2d201e;
  font: 10px/1.25 var(--mono);
}
.inlay-reference {
  padding: 5px;
  border: 1px solid #99724d;
  background: #362626;
  text-align: center;
}
.inlay-reference figcaption { margin-top: 4px; color: #e2c186; font: 9px/1.4 var(--mono); }
.inlay-reference small { display: block; margin-top: 2px; font-size: 11px; color: #e2d1ae; }

.optics-engraving {
  display: flex;
  justify-content: space-between;
  gap: 6px;
  color: #ded0a2;
  font: 10px/1.3 var(--mono);
}
.optics-deck {
  --beam: #e6b36a;
  padding: clamp(6px, 2vw, 12px);
  border: 5px ridge #b18059;
  background: repeating-linear-gradient(90deg, #8f5b4026 0 1px, transparent 1px 5px), #38252c;
  box-shadow: 4px 5px #110a13;
}
.optics-deck.receiving-beam { --beam: #ffe29d; }
.optics-grid {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  grid-template-rows: repeat(5, minmax(0, 1fr));
  aspect-ratio: 6 / 5;
  width: min(100%, 396px);
  margin: 7px auto 0;
  border: 2px inset #7d6350;
  background: #201d25;
}
.optic-cell {
  position: relative;
  display: grid;
  place-items: center;
  padding: 0;
  min-width: 0;
  min-height: 0;
  border: 1px solid #8f7b601f;
}
.mirror-cell { background: radial-gradient(circle, #55434a 0 23%, #221f29 26%); border-color: #775b50; }
.mirror-cell:hover { background: radial-gradient(circle, #7c5d57 0 23%, #3b2e36 26%); }
.mirror-cell i {
  position: absolute;
  width: 76%;
  height: clamp(4px, 1vw, 8px);
  border: 1px solid #e9c692;
  background: linear-gradient(#d2c9b4, #7e8b8e);
  box-shadow: 1px 2px #16121c;
  rotate: 45deg;
  transition: rotate .14s ease-out;
}
.mirror-cell[data-slash] i { rotate: -45deg; }
.mirror-cell b { width: 14%; aspect-ratio: 1; border-radius: 50%; background: #755139; border: 1px solid #d1aa79; z-index: 1; }
.pilot-cell i { width: 31%; aspect-ratio: 1; rotate: 45deg; border: 2px solid #9b7857; background: #3a303b; }
.pilot-cell[data-lit] i { background: #ffeeae; box-shadow: 0 0 13px #ffc76c; }
.port-cell { font: bold clamp(7px, 1.7vw, 10px)/1 var(--mono); color: #ffdc97; align-items: end; padding-bottom: 2px; }
.port-cell::before { content: "◆"; position: absolute; top: 9%; color: #d59359; }
.receiving-beam .receiver-cell { background: #5f4a38; }
.receiving-beam .receiver-cell::before { color: #fff4c5; text-shadow: 0 0 8px #ffd181; }
.optic-ray { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.optic-ray polyline { fill: none; stroke: var(--beam); stroke-linejoin: round; }
.ray-glow { stroke-width: 5; opacity: .37; filter: blur(1px); }
.optic-ray .ray-line { stroke: #fff4c5; stroke-width: 1.5; }

.dispatch-slip {
  margin-top: 13px;
  padding: 9px;
  border: 1px dashed #af8863;
  background: #372b37;
}
.dispatch-slip > span { color: #edc384; font: 10px var(--mono); }
.dispatch-monitor {
  padding: 10px;
  border: 4px ridge #75806c;
  background: repeating-linear-gradient(0deg, #badc9110 0 1px, transparent 1px 4px), #132720;
  color: #d6eab5;
  font: 13px/1.55 var(--mono);
}
.dispatch-monitor header {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding-bottom: 6px;
  border-bottom: 1px solid #688666;
  color: #cbdea5;
  font-size: 11px;
}
.dispatch-monitor header b { margin-left: auto; }
.dispatch-monitor p { color: #d6eab5; }
.dispatch-monitor a { color: #f4d28e; text-decoration: underline; text-underline-offset: 3px; }
.dispatch-monitor form { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.dispatch-monitor input {
  width: 80px;
  min-height: 36px;
  padding: 4px 6px;
  background: #0d1a17;
  border: 1px solid #8ca273;
  color: #e8ecc4;
  letter-spacing: .1em;
}
.dispatch-monitor [data-dispatch-status]:empty { display: none; }

@media (max-width: 490px) {
  .prop-window { border-width: 9px; }
  .speech-panel { grid-template-columns: 60px minmax(0, 1fr); gap: 6px 8px; padding: 7px; }
  .speech-line { padding: 7px; font-size: 15px; }
  .inlay-layout { grid-template-columns: minmax(0, 2.5fr) minmax(0, 1fr); }
  .inlay-board { border-width: 4px; }
  .inlay-reference { padding: 3px; }
}
@media (prefers-reduced-motion: reduce) {
  .inlay-tile, .mirror-cell i { transition: none; }
}