/* Switch Panic — widget-local styles. Widget chrome (HUD, arena base,
   overlays, score form, leaderboard) lives in ../../style.css. Everything
   here is the wall: chunky switch plates whose lit/unlit states carry the
   game's readability in both color schemes. */

:root {
  --sp-wall-bg: #dfe5ee;
  --sp-plate-on: linear-gradient(180deg, #fff3d0, #ffe1a1);
  --sp-plate-on-edge: #e8c37a;
  --sp-plate-off: linear-gradient(180deg, #ccd3de, #b9c1cf);
  --sp-plate-off-edge: #a7b0c0;
  --sp-lever-on: #f59e2d;
  --sp-lever-off: #6f7c92;
  --sp-slot: rgba(27, 39, 64, 0.25);
  --sp-glow-on: 0 0 14px rgba(255, 205, 110, 0.55);
  --sp-warn-color: 226, 86, 79; /* rgb triplet for the danger glow */
}

@media (prefers-color-scheme: dark) {
  :root {
    --sp-wall-bg: #131a28;
    /* Dark mode: the LIT plates carry the contrast — warm windows on a dark
       wall — while OFF plates stay findable as cool outlined slabs. */
    --sp-plate-on: linear-gradient(180deg, #ffdf9e, #f5b95c);
    --sp-plate-on-edge: #c98f35;
    --sp-plate-off: linear-gradient(180deg, #232c3e, #1b2333);
    --sp-plate-off-edge: #39445c;
    --sp-lever-on: #7a4d0e;
    --sp-lever-off: #55617a;
    --sp-slot: rgba(0, 0, 0, 0.45);
    --sp-glow-on: 0 0 16px rgba(255, 190, 90, 0.35);
  }
}

.arena-sp {
  height: auto;
  min-height: 0;
  padding: 14px 0;
  display: flex;
  justify-content: center;
  background: var(--sp-wall-bg);
  /* Danger telegraph: the inward glow is written as an inline box-shadow by
     widget.js each frame (with its own easing). Deliberately NOT a
     calc(var()) shadow — WebKit silently drops those, which would kill the
     telegraph exactly where most players are (iOS). --sp-warn is still set
     as a plain 0..1 signal for tests and future styling. */
}

/* touch-action: none on the wall only — frantic tapping must never scroll
   or double-tap-zoom; the page around it behaves normally. */
.sp-wall {
  position: relative;
  display: grid;
  gap: 8px;
  width: min(100%, 520px);
  padding: 6px;
  touch-action: none;
  border-radius: 12px;
}

.sp-wall:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 6px;
}

/* The switch: a <button> the full cell size (>=48px on a 390px viewport at
   6x6 — the plate shrinks before the hit area does), containing a plate and
   a lever knob that snaps between top (on) and bottom (off). */
.sw {
  position: relative;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  aspect-ratio: 1;
  min-width: 0;
  -webkit-tap-highlight-color: transparent;
}

.sw .plate {
  position: absolute;
  inset: 6%;
  border-radius: 14%;
  background: var(--sp-plate-off);
  border: 2px solid var(--sp-plate-off-edge);
  box-shadow: inset 0 -2px 4px rgba(27, 39, 64, 0.12);
}

.sw.on .plate {
  background: var(--sp-plate-on);
  border-color: var(--sp-plate-on-edge);
  box-shadow: var(--sp-glow-on), inset 0 2px 3px rgba(255, 255, 255, 0.5);
}

.sw .slot {
  position: absolute;
  left: 50%;
  top: 22%;
  width: 26%;
  height: 56%;
  transform: translateX(-50%);
  border-radius: 999px;
  background: var(--sp-slot);
}

.sw .knob {
  position: absolute;
  left: 50%;
  top: 8%;
  width: 74%;
  height: 42%;
  transform: translateX(-50%);
  border-radius: 26%;
  background: linear-gradient(180deg, #ffffff2e, #00000014), var(--sp-lever-off);
  border: 2px solid rgba(27, 39, 64, 0.25);
  box-shadow: 0 3px 5px rgba(10, 15, 25, 0.3);
}

.sw.on .knob {
  top: 50%;
  background: linear-gradient(180deg, #ffffff45, #00000010), var(--sp-lever-on);
}

.sw:focus-visible .plate {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  .sw .knob {
    transition: top 0.09s cubic-bezier(0.3, 0, 0.2, 1.4), background 0.09s linear;
  }

  .sw .plate {
    transition: background 0.12s linear, box-shadow 0.12s linear, border-color 0.12s linear;
  }

  .sw.install .plate {
    animation: sp-install 0.35s ease-out;
  }

  @keyframes sp-install {
    from { transform: scale(0.4); opacity: 0; }
    60%  { transform: scale(1.08); }
  }

  /* Near-threshold nerves: still-lit plates flicker faintly. */
  .sp-wall.danger .sw.on .plate {
    animation: sp-flicker 1.3s infinite;
  }

  @keyframes sp-flicker {
    0%, 100% { filter: brightness(1); }
    46%      { filter: brightness(1); }
    50%      { filter: brightness(0.82); }
    54%      { filter: brightness(1); }
    81%      { filter: brightness(0.93); }
    84%      { filter: brightness(1); }
  }
}

/* Time grows digits (9.9s -> 10.0s -> 100.0s); pin its slot so the Out and
   Best chips don't shuffle sideways mid-panic. */
#time {
  display: inline-block;
  min-width: 4.5ch;
  text-align: right;
}

/* --- blackout staging --------------------------------------------------------- */

.sp-dark {
  position: absolute;
  inset: 0;
  z-index: 12;
  background: #05070c;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
}

.sp-dark.show {
  opacity: 1;
  pointer-events: auto;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-dark {
    transition: opacity 0.35s ease-out;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sp-dark {
    transition: opacity 0.15s linear;
  }
}

.sp-bulb {
  width: 72px;
  opacity: 0;
}

.sp-dark.show .sp-bulb.lit {
  opacity: 1;
}

@media (prefers-reduced-motion: no-preference) {
  .sp-dark.show .sp-bulb.lit {
    animation: sp-bulb 1.1s steps(1) both;
  }

  @keyframes sp-bulb {
    0%   { opacity: 0; }
    12%  { opacity: 1; }
    22%  { opacity: 0.15; }
    34%  { opacity: 1; }
    41%  { opacity: 0.3; }
    55%  { opacity: 1; }
    100% { opacity: 1; }
  }
}

/* Results replace the wall (house end-overlay pattern). */
.arena-sp.ended {
  display: block;
  box-shadow: none;
}

.arena-sp.ended .sp-wall,
.arena-sp.ended .sp-dark {
  display: none;
}

.arena-sp.ended .overlay {
  position: static;
}

.sp-eulogy {
  font-style: italic;
}

/* --- HUD bits (house pattern) --------------------------------------------------- */

#lightsChip.hot strong {
  color: #c2410c;
}

@media (prefers-color-scheme: dark) {
  #lightsChip.hot strong {
    color: #fdba74;
  }
}

.toolbar-spacer { flex: 1; }

.hud .tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.hud .tool[aria-pressed="true"] {
  background: var(--accent-soft);
  color: var(--accent-ink);
  box-shadow: inset 0 0 0 2px var(--accent);
}

.hud .tool svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.hud .tool svg .fill { fill: currentColor; stroke: none; }

#soundBtn .icon-when-on { display: none; }
#soundBtn[aria-pressed="true"] .icon-when-on { display: initial; }
#soundBtn[aria-pressed="true"] .icon-when-off { display: none; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}