/* ==========================================================================
   The Street, struck (/forge/sfx/street/) — page styles on top of
   /assets/site.css.

   A sibling of the object forge's stylesheet (site/forge/sfx/live/
   sfx_live.css), copied and adapted rather than shared: that file belongs to
   the bench and the two pages must be free to drift. The family rules are
   the same — cream paper, warm ink line, specimen framing (a thin outer rule
   with a heavier inner one), Georgia for the book face and the condensed
   grotesque for labels, and ONE pillar-box red on the page.

   Here the red is the ripple where the blow lands and the seal that plays
   the last clip again. The two room plates are the game's own pictures, so
   nothing is drawn over them but hairline hotspot outlines that only appear
   under the pointer: the page must look like the room, not like a diagram.
   ========================================================================== */

.sheet-street { max-width: 980px; }

.street {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
}

/* ---------- specimen cards, as the bench has them ---------- */

.card {
  background: var(--paper-lift);
  border: 1px solid var(--ink);
  padding: 4px;
  margin-bottom: 16px;
}
.card-in {
  border: 2px solid var(--ink);
  padding: 12px 14px 13px;
}

.ink-btn {
  font-family: var(--headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 12px;
  color: var(--ink);
  background: var(--paper);
  border: 1px solid var(--ink);
  padding: 6px 11px 5px;
  cursor: pointer;
  border-radius: 0;
  -webkit-tap-highlight-color: transparent;
}
.ink-btn:hover { color: var(--red-deep); }
.ink-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 1px; }

/* ---------- the two rooms ---------- */

.rooms {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 12px;
}
.rooms .lbl {
  font-family: var(--headline);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 11.5px;
  color: var(--ink-soft);
  margin-right: 4px;
}
.room-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--paper-lift);
}
.room-btn[aria-pressed="true"]:hover { color: var(--paper); }

/* ---------- the plate ---------- */

.plate { margin-bottom: 14px; }
.plate-in {
  border: 2px solid var(--ink);
  padding: 6px;
  background: var(--paper);
}

.scene {
  position: relative;
  display: block;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  line-height: 0;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.scene img {
  /* force is how long you hold, and a long press on a picture is where iOS
     offers to save it: suppress that callout, and the drag of the image
     with it. Scrolling is untouched (the scene keeps `manipulation`). */
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  display: block;
  width: 100%;
  height: auto;
  /* the plates are painted with their own frame; nothing is added here */
}
.scene svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* a hotspot is invisible until the pointer is on it */
.spot {
  fill: rgba(166, 58, 43, 0);
  stroke: rgba(68, 54, 39, 0);
  stroke-width: 2;
  cursor: pointer;
  transition: fill 140ms ease-out, stroke 140ms ease-out;
}
.scene.ready .spot:hover,
.scene.ready .spot:focus-visible,
.spot.lit {
  fill: rgba(250, 243, 224, 0.20);
  stroke: rgba(68, 54, 39, 0.85);
  stroke-dasharray: 5 4;
}
.spot:focus-visible { outline: none; }
.spot.struck {
  fill: rgba(166, 58, 43, 0.16);
  stroke: rgba(140, 47, 34, 0.95);
}
/* a thing the cabinet does not hold yet: shown, but plainly out of order */
.spot.off { cursor: default; }
.scene.ready .spot.off:hover,
.spot.off.lit {
  fill: rgba(68, 54, 39, 0.16);
  stroke: rgba(68, 54, 39, 0.55);
  stroke-dasharray: 2 5;
}

/* the ink ripple where the blow landed */
.ripple {
  fill: none;
  stroke: var(--red);
  stroke-width: 2.4;
  pointer-events: none;
  animation: ripple-out 620ms ease-out forwards;
}
.ripple.second { animation-delay: 90ms; stroke-width: 1.4; }
@keyframes ripple-out {
  from { r: 3; opacity: 0.9; }
  to   { r: 46; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .ripple { animation-duration: 240ms; }
}

/* the name that follows the pointer */
.hint {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  transform: translate(-50%, -130%);
  background: var(--paper-lift);
  border: 1px solid var(--ink);
  box-shadow: 2px 2px 0 rgba(68, 54, 39, 0.25);
  padding: 3px 8px 2px;
  font-family: var(--headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink);
  white-space: nowrap;
  max-width: 90%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hint .hint-key {
  font-family: var(--book);
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--ink-soft);
  margin-left: 6px;
}
.hint.off .hint-key { color: var(--red-deep); }

.plate-cap {
  font-family: var(--book);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--ink-soft);
  margin: 9px auto 0;
  max-width: 560px;
  text-align: center;
}

/* ---------- the strip: the last thing struck ---------- */

.strip .card-in {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 12px;
}
.seal-btn {
  flex: none;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.seal-btn:focus-visible { outline: 2px solid var(--red); outline-offset: 4px; border-radius: 50%; }
.seal-btn:disabled { cursor: default; opacity: 0.45; }
.seal {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--red);
  border: 1px solid var(--red-deep);
  box-shadow: inset 0 0 0 2px var(--red), inset 0 0 0 3px rgba(250, 243, 224, 0.85);
  color: var(--paper-lift);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--book);
  font-size: 14px;
  line-height: 1;
}
.seal .glyph { margin-left: 3px; }
.seal-btn.busy .seal { animation: seal-breathe 1.1s ease-in-out infinite; }
@keyframes seal-breathe { 50% { transform: scale(0.94); } }

.strip-text { flex: 1 1 auto; min-width: 0; }
.struck-name {
  font-family: var(--headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 15px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.struck-tech {
  font-family: var(--book);
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
  overflow-wrap: anywhere;
}
.struck-tech .tech { font-variant-numeric: tabular-nums; }
.status {
  font-family: var(--book);
  font-style: italic;
  font-size: 13px;
  color: var(--ink-soft);
  margin-top: 2px;
  min-height: 1.35em;
}
.status.warn { color: var(--red-deep); }
.status.resting { color: var(--ink-soft); }

.open-forge {
  flex: none;
  font-family: var(--headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-size: 11.5px;
  color: var(--ink);
  border-bottom: 1px solid var(--ink);
  text-decoration: none;
  padding-bottom: 1px;
}
.open-forge:hover { color: var(--red-deep); border-color: var(--red-deep); }

/* ---------- the list of what is in each room ---------- */

.things-fold {
  background: var(--paper-lift);
  border: 1px solid var(--ink);
  padding: 4px;
  margin-bottom: 16px;
}
.things-fold > summary {
  cursor: pointer;
  list-style: none;
  border: 2px solid var(--ink);
  padding: 8px 12px 7px;
  font-family: var(--headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  font-size: 12.5px;
}
.things-fold > summary::-webkit-details-marker { display: none; }
.things-fold[open] > summary { border-bottom-width: 1px; }
.things-fold .card-in { border-top: 0; }
.things-list {
  list-style: none;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 4px 18px;
}
.things-list li {
  font-family: var(--book);
  font-size: 13.5px;
  line-height: 1.45;
  padding: 2px 0;
  border-bottom: 1px dotted rgba(68, 54, 39, 0.3);
}
.things-list li.off { color: var(--ink-soft); }
.things-list b {
  font-family: var(--headline);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-size: 12px;
}
.things-list .key { font-style: italic; color: var(--ink-soft); }
.things-list .away { font-style: italic; color: var(--red-deep); }

.board-note {
  font-family: var(--book);
  font-size: 14.5px;
  line-height: 1.5;
  margin: 0 0 14px;
}
.board-note a { color: var(--ink); }
.board-note a:hover { color: var(--red-deep); }

footer .foot-statement { max-width: 640px; margin: 0 auto 14px; font-style: italic; color: var(--ink); }

/* ---------- narrow screens ---------- */

@media (max-width: 560px) {
  .card-in { padding: 10px 10px 11px; }
  .strip .card-in { gap: 10px; flex-wrap: wrap; }
  .seal { width: 34px; height: 34px; font-size: 12px; }
  .struck-name { font-size: 13.5px; }
  .open-forge { flex: 1 1 100%; }
  .hint { font-size: 10.5px; }
  .things-list { grid-template-columns: minmax(0, 1fr); }
}