/* css/wall.css — the wall, lens, Chip Tag, pins and rings (SPEC §7.1.1, §9.4, §10.1, §10.2).
   PILLAR 1: nothing here ever applies filter, opacity, mix-blend-mode, gradient, shadow or animation to a chip <rect> or to the mat.
   The mat is #808080 in every theme and every state. Highlights are fixed ink/white outlines drawn above the chips. */

.wall-mat, .wall-mat.wall-mat {
  border: 0;                                       /* app.css draws a 2 px border on .wall-mat; the frame here is an inset outline so the SVG box == the mat box */
  position: relative; display: block; width: 100%; height: 100%; box-sizing: border-box; overflow: hidden;
  background-color: #808080;                       /* the mat: never a theme token */
  outline: 2px solid #6e6e6e; outline-offset: -2px; /* the 2 px frame, drawn inside the 8 px inset */
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent;
  touch-action: auto;
}
.wall-mat.wall-interactive { touch-action: none; cursor: pointer; }        /* pinch works; the page never scrolls under the wall */
.wall-mat.wall-nopick { cursor: default; }
.wall-mat.wall-tagmode { cursor: help; }
.wall-mat.wall-mirrored { transform: rotate(180deg); }                      /* face-off top half: the player sitting opposite */
.wall-mat:focus { outline: 2px solid #6e6e6e; }
.wall-mat:focus-visible { outline: 3px solid #16171a; outline-offset: -3px; }
.wall-svg { position: absolute; left: 0; top: 0; display: block; pointer-events: none; color-interpolation: sRGB; }
.wall-svg rect { shape-rendering: auto; }

/* Lens (7 x 5, 46 px chips, ink border + white line; the grid's own mat is the same #808080) */
.wall-lens { position: absolute; z-index: 5; box-sizing: border-box; border: 3px solid #16171a; background: #16171a; touch-action: none;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.wall-lens-bar { height: 44px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; padding-left: 10px;
  background: #16171a; color: #ffffff; font: 700 14px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.wall-lens-x { width: 44px; height: 44px; margin: 0; padding: 0; border: 0; background: transparent; color: #ffffff; font-size: 20px; line-height: 44px;
  cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.wall-lens-x:active { background: #4a4c52; }
.wall-lens-grid { box-sizing: content-box; background-color: #808080; border: 1px solid #ffffff; touch-action: none; overflow: hidden; }
.wall-lens-grid .wall-svg { position: static; }
.wall-lens-in { animation: wall-lens-in 120ms cubic-bezier(.2, .9, .3, 1) both; }   /* scales from the tap point */
.wall-lens-out { animation: wall-lens-out 90ms ease-in both; }
@keyframes wall-lens-in { from { transform: scale(.55); } to { transform: scale(1); } }
@keyframes wall-lens-out { from { transform: scale(1); } to { transform: scale(.7); } }

/* Chip Tag: a private paper tag with position + rough name (never the catalogue name) */
.wall-tag { position: absolute; z-index: 6; display: flex; align-items: baseline; gap: 8px; box-sizing: border-box; padding: 6px 12px 6px 24px;
  background: #ffffff; color: #16171a; border: 1px solid #d8d5ce; border-radius: 6px; pointer-events: none; white-space: nowrap;
  font: 600 13px/1.1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.wall-tag-hole { position: absolute; left: 8px; top: 50%; width: 8px; height: 8px; margin-top: -4px; border-radius: 50%; background: #808080; border: 1px solid #16171a; box-sizing: border-box; }
.wall-tag-pos { font: 800 16px/1 ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.wall-tagnote { position: absolute; left: 6px; top: 6px; z-index: 4; padding: 4px 8px; border-radius: 4px; background: #16171a; color: #ffffff; pointer-events: none;
  font: 700 12px/1.2 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
.wall-tagnote[hidden], .wall-zoomreset[hidden] { display: none; }
.wall-zoomreset { position: absolute; right: 6px; top: 6px; z-index: 4; min-width: 44px; height: 44px; padding: 0 10px; border: 2px solid #16171a; border-radius: 6px;
  background: #ffffff; color: #16171a; font: 800 15px/1 system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; cursor: pointer; touch-action: manipulation; }
.wall-zoomreset:active { background: #d8d5ce; }
.wall-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* Pins: drop 80 ms with a 2 px overshoot (staggered 40 ms by the caller), press 60 ms on lock */
.wp-pin { pointer-events: none; }
.wp-drop { animation: wp-drop 80ms cubic-bezier(.2, .7, .4, 1) both; }
.wp-press { animation: wp-press 60ms ease-out both; }
@keyframes wp-drop { 0% { transform: translateY(-14px); opacity: 0; } 65% { transform: translateY(2px); opacity: 1; } 100% { transform: translateY(0); opacity: 1; } }
@keyframes wp-press { 0% { transform: translateY(0); } 100% { transform: translateY(1.5px); } }
@keyframes wp-fade { from { opacity: 0; } to { opacity: 1; } }

/* Rings: trace along the gaps in 300 ms (the white core and the ink band share the dash), tags pop in afterwards */
.wr-trace { stroke-dasharray: 1; stroke-dashoffset: 1; animation: wr-trace 300ms ease-out forwards; }
@keyframes wr-trace { to { stroke-dashoffset: 0; } }
.wr-tag-in { animation: wr-tag-in 160ms 240ms ease-out both; }
@keyframes wr-tag-in { from { opacity: 0; } to { opacity: 1; } }
.wl-pins, .wl-rings, .wl-cursor, .wl-flash, .wl-slips, .wl-target, .wl-heat, .wl-rims { pointer-events: none; }

/* Seat-list artwork (ui/glyphs.js) */
.pin-svg, .glyph { display: inline-block; vertical-align: middle; }

/* Reduced motion: every animation becomes a <= 120 ms fade with the same timing. The lens simply appears (JS skips its class).
   Settings own the switch: <html data-motion="reduced"> forces it, "full" overrides the OS query, absent = follow the OS. */
:root[data-motion="reduced"] .wp-drop { animation: wp-fade 100ms linear both; }
:root[data-motion="reduced"] .wp-press { animation: none; }
:root[data-motion="reduced"] .wr-trace { stroke-dasharray: none; stroke-dashoffset: 0; animation: wr-tag-in 120ms linear both; }
:root[data-motion="reduced"] .wr-tag-in { animation: wr-tag-in 100ms linear both; }
:root[data-motion="reduced"] .wall-lens-in, :root[data-motion="reduced"] .wall-lens-out { animation: none; }
@media (prefers-reduced-motion: reduce) {
  :root:not([data-motion]) .wp-drop { animation: wp-fade 100ms linear both; }
  :root:not([data-motion]) .wp-press { animation: none; }
  :root:not([data-motion]) .wr-trace { stroke-dasharray: none; stroke-dashoffset: 0; animation: wr-tag-in 120ms linear both; }
  :root:not([data-motion]) .wr-tag-in { animation: wr-tag-in 100ms linear both; }
  :root:not([data-motion]) .wall-lens-in, :root:not([data-motion]) .wall-lens-out { animation: none; }
}