/* ==========================================================================
   EXPERIMENTAL LOOK 2 — "FRONT ROW"   (Settings → Appearance → Look)
   ==========================================================================
   Built for the room, not the desk: a teacher projecting a board to a class,
   kids at the back, a washed-out projector, sun through the windows. Opt-in.
   Every rule is scoped to html[data-look="frontrow"], so with the Look set to
   Classic this file changes nothing. Wired exactly like Studio (look-studio.css):
   localStorage 'panda_chess_look', applied by the head script in index.html.

   The rules it is built on:
     1. LUMINANCE, NOT HUE, DOES THE WORK. A washed-out projector flattens
        saturation first and brightness second. The squares differ by ~4:1 in
        luminance, and every highlight differs from the square under it by
        lightness as well as color, so the board survives grayscale.
     2. THE BOARD IS THE ONLY BRIGHT THING. Flat, gradient-free surround
        (gradients band and drift on a projector), a heavy frame in the
        opposite tone of the surround, and teacher chrome faded until needed.
     3. COLORBLIND-SAFE. Highlights come from the Okabe-Ito palette (yellow,
        blue, vermilion) and carry a SHAPE as well as a color: last move gets an
        inset ring, the selected square gets a solid blue block, legal captures
        get a thick ring while quiet moves get a dot.
     4. STILL. No ambient animation anywhere, and the board's own moves snap
        rather than glide, so every eye stays on the position, not on a tween.
     5. BIG TYPE. Coordinates are the vocabulary kids read aloud ("knight to
        f3"), so they are the biggest text on screen. The move list is large and
        the current move is the same yellow as the last-move squares: the list
        and the board say "this one" in the same color.

   Board colors are fixed while this look is on (the board-theme swatches have
   no effect), because contrast is the point. Camp High Contrast, B&W and
   variation tape keep their own board. */

html[data-look="frontrow"] {
  --fr-ink: #0b0d10;
  --fr-paper: #eceef1;
  --fr-light: #f1e8cb;      /* chalk: luminance ~0.81 */
  --fr-dark: #4b7790;       /* slate blue: luminance ~0.17, black AND white pieces both clear 4.4:1 */
  --fr-last: #ffd400;       /* Okabe-Ito yellow, pushed to full strength */
  --fr-select: #0072b2;     /* Okabe-Ito blue */
  --fr-surround: #eceef1;
  --fr-frame: #0b0d10;
  --fr-text: #0b0d10;
  background: var(--fr-surround);
}
html[data-look="frontrow"].dark {
  --fr-surround: #08090b;
  --fr-frame: #f2f4f7;
  --fr-text: #ffffff;
  background: var(--fr-surround);
}

/* ---------- Surround: flat, no gradient, no glow ---------- */
html[data-look="frontrow"] body,
html[data-look="frontrow"] body[class] {
  background: var(--fr-surround) !important;
  background-image: none !important;
}
html[data-look="frontrow"] body::before,
html[data-look="frontrow"] body::after { display: none !important; }

/* ---------- Stillness ---------- */
/* Keyframe animations (pulses, glows, shimmer) end at once; the spinner is
   progress feedback, not decoration, so it keeps turning. Transitions are
   cut only on the board and panel, never on #board-cell: the annotation box
   lift and the shot clock depend on its transitionend. */
html[data-look="frontrow"] *:not(.animate-spin),
html[data-look="frontrow"] *:not(.animate-spin)::before,
html[data-look="frontrow"] *:not(.animate-spin)::after {
  animation-duration: 0.01ms !important;
  animation-iteration-count: 1 !important;
  animation-delay: 0s !important;
}
html[data-look="frontrow"] #board-container *,
html[data-look="frontrow"] #board-surface,
html[data-look="frontrow"] #right-panel *,
html[data-look="frontrow"] #move-list * {
  transition-duration: 0s !important;
}
html[data-look="frontrow"] #move-list { scroll-behavior: auto; }

/* ---------- Give the board the room ---------- */
html[data-look="frontrow"] #main-header { height: 2.5rem; }
html[data-look="frontrow"] #main-footer { height: 1.75rem; border-color: transparent !important; opacity: 0.5; }
html[data-look="frontrow"] #main-area { padding-top: 0.25rem; padding-bottom: 0.25rem; }
@media (min-width: 1024px) {
  html[data-look="frontrow"] #main-area { gap: 1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; }
  html[data-look="frontrow"] body #right-panel { width: clamp(26.25rem, 27vw, 34rem); }
}

/* ---------- The board: two tones that do not merge ---------- */
/* The squares are painted inline from the board theme, so they are re-painted
   by square id. Parity is fixed by the square, not by its place in the grid,
   so a flipped board stays right. */
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-a2,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-a4,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-a6,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-a8,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-b1,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-b3,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-b5,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-b7,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-c2,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-c4,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-c6,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-c8,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-d1,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-d3,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-d5,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-d7,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-e2,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-e4,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-e6,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-e8,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-f1,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-f3,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-f5,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-f7,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-g2,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-g4,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-g6,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-g8,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-h1,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-h3,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-h5,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-h7 { background-color: var(--fr-light) !important; }
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-a1,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-a3,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-a5,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-a7,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-b2,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-b4,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-b6,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-b8,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-c1,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-c3,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-c5,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-c7,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-d2,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-d4,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-d6,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-d8,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-e1,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-e3,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-e5,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-e7,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-f2,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-f4,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-f6,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-f8,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-g1,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-g3,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-g5,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-g7,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-h2,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-h4,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-h6,
html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #sq-h8 { background-color: var(--fr-dark) !important; }

html[data-look="frontrow"]:not(.bw-mode) body:not(.variation-mode):not(.camp-high-contrast) #board-surface {
  border-color: var(--fr-frame);
  background-color: var(--fr-frame);
  border-width: 6px;
  border-radius: 4px;
  box-shadow: none;
}
html[data-look="frontrow"] #board-surface { overflow: hidden; }

/* Pieces: a crisp dark edge-shadow lifts both colors off either square. */
html[data-look="frontrow"] #board-container .piece-shadow {
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, 0.5)) contrast(1.06);
}

/* ---------- Highlights: color AND shape ---------- */
/* Last move: full yellow with an inset ring, readable in grayscale as a
   clearly lighter, outlined square. */
html[data-look="frontrow"] #board-container .board-highlight.bg-yellow-400\/50 {
  background-color: var(--fr-last) !important;
  opacity: 0.82;
  box-shadow: inset 0 0 0 4px rgba(11, 13, 16, 0.55);
}
/* Selected piece: a solid blue block. */
html[data-look="frontrow"] #board-container .board-highlight.bg-black\/25 {
  background-color: var(--fr-select) !important;
  opacity: 0.72;
}
/* Quiet moves: a big dot. Captures: a thick ring. Same dark tone on every
   square, so nothing depends on which color the square is. */
html[data-look="frontrow"] #board-container .board-highlight.rounded-full.w-\[28\%\] {
  width: 34%; height: 34%;
  background-color: rgba(11, 13, 16, 0.7) !important;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.7);
}
html[data-look="frontrow"] #board-container .board-highlight.rounded-full.border-4,
html[data-look="frontrow"] #board-container .board-highlight.rounded-full.lg\:border-\[6px\] {
  border-width: 8px !important;
  border-color: rgba(11, 13, 16, 0.7) !important;
  margin: 0 !important;
}

/* ---------- Arrows and marks: pop on a washed-out projector ---------- */
/* The arrows are painted on canvases, so the look works on the canvas as a
   whole: a dark halo separates every arrow from any square, a touch more
   saturation and contrast fights the wash. */
html[data-look="frontrow"] #draw-canvas,
html[data-look="frontrow"] #engine-canvas {
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.85)) drop-shadow(0 0 1px rgba(255, 255, 255, 0.6)) saturate(1.35) contrast(1.12);
}

/* ---------- Coordinates: the words kids read aloud ---------- */
html[data-look="frontrow"] #rank-labels,
html[data-look="frontrow"] #rank-labels-right,
html[data-look="frontrow"] #file-labels,
html[data-look="frontrow"] #file-labels-top,
html[data-look="frontrow"] body[class] #rank-labels,
html[data-look="frontrow"] body[class] #rank-labels-right,
html[data-look="frontrow"] body[class] #file-labels,
html[data-look="frontrow"] body[class] #file-labels-top {
  color: var(--fr-text) !important;
  font-weight: 900;
  font-size: clamp(1.5rem, 3.3vmin, 2.75rem);
  text-shadow: none !important;
  letter-spacing: 0;
}
html[data-look="frontrow"] #rank-labels,
html[data-look="frontrow"] #rank-labels-right { width: clamp(2rem, 4.6vmin, 3.5rem); }
html[data-look="frontrow"] .sq-coord {
  font-size: clamp(0.8rem, 2.6vmin, 1.7rem);
  font-weight: 900;
}

/* ---------- Panel: one solid sheet, nothing frosted ---------- */
html[data-look="frontrow"] body #right-panel {
  background-color: var(--fr-paper) !important;
  border: 3px solid var(--fr-frame) !important;
  border-radius: 10px;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
html[data-look="frontrow"].dark body #right-panel { background-color: #101216 !important; }
html[data-look="frontrow"] body[class] #analysis-panel,
html[data-look="frontrow"] #analysis-toolbar,
html[data-look="frontrow"] #game-info-panel,
html[data-look="frontrow"] #playback-controls {
  background-color: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: rgba(128, 135, 148, 0.45) !important;
}

/* Teacher chrome recedes until the pointer or keyboard is in it. */
html[data-look="frontrow"] #analysis-toolbar { opacity: 0.32; }
html[data-look="frontrow"] #analysis-toolbar:hover,
html[data-look="frontrow"] #analysis-toolbar:focus-within { opacity: 1; transition: opacity 120ms linear !important; }
html[data-look="frontrow"] #game-info-panel input,
html[data-look="frontrow"] #game-info-panel select,
html[data-look="frontrow"] #game-info-panel button { font-size: 1.15rem; font-weight: 800; }
html[data-look="frontrow"] #playback-controls button { transform: scale(1.2); }

/* ---------- Move list: read from the back row ---------- */
html[data-look="frontrow"] #move-list { font-variant-numeric: tabular-nums; }
html[data-look="frontrow"] #move-list > div { color: var(--fr-text); line-height: 2.1; }
html[data-look="frontrow"] #move-list [data-node-id] {
  font-size: clamp(1.5rem, 3.1vmin, 2.25rem);
  font-weight: 800;
  border-radius: 6px;
  color: var(--fr-text);
  padding: 0.05em 0.4em;
}
html[data-look="frontrow"] #move-list [data-node-id]:hover { background-color: rgba(128, 135, 148, 0.3) !important; }
/* The current move wears the last-move yellow, with an ink edge. */
html[data-look="frontrow"] #move-list [data-node-id].bg-blue-600 {
  background: var(--fr-last) !important;
  color: #0b0d10 !important;
  box-shadow: 0 0 0 3px #0b0d10;
  font-weight: 900;
}
html[data-look="frontrow"].dark #move-list [data-node-id].bg-blue-600 { box-shadow: 0 0 0 3px #ffffff; }
/* Move numbers: quieter than the moves, but legible from the back. */
html[data-look="frontrow"] #move-list > div > span.select-none {
  font-size: clamp(1.1rem, 2.2vmin, 1.5rem);
  color: var(--fr-text) !important;
  opacity: 0.62;
  font-weight: 800;
}
/* Symbols inside the current move (!, ?, note star) sit on yellow: ink them. */
html[data-look="frontrow"] #move-list [data-node-id].bg-blue-600 span { color: #0b0d10 !important; }

/* ---------- Annotation box (A): headline-sized, maximum contrast ---------- */
html[data-look="frontrow"] #annotation-overlay {
  background: #ffffff !important;
  border-top: 6px solid #0b0d10;
  box-shadow: none !important;
}
html[data-look="frontrow"].dark #annotation-overlay {
  background: #000000 !important;
  border-top-color: var(--fr-last);
}
html[data-look="frontrow"] #annotation-input {
  color: #0b0d10 !important;
  font-weight: 900;
}
html[data-look="frontrow"].dark #annotation-input { color: #ffffff !important; }