/* Hybrid launch palette. ?palette=warm retains the original presentation.
   All animation timing, geometry, and game rules remain in their original files. */
html[data-palette="hybrid"] {
  --paper: #f6f0e4;
  --green: #146b66;
  --wire-lit: #146b66;
}

html[data-palette="hybrid"] .board-wrap {
  --wire-unlit: #9ab1c2;
  --wire-lit: #22d3c5;
  --wire-source: #ffd166;
  --readable-muted: #b3c6d2;
  background: #14263a;
  border-color: #718698;
  box-shadow: 0 8px 24px rgba(20,38,58,.12);
}

html[data-palette="hybrid"] .tile {
  background: #1b3045;
  border-color: #718698;
}
html[data-palette="hybrid"] .tile:hover {
  background: #233b52;
  border-color: #b3c6d2;
}
html[data-palette="hybrid"] .tile .wire-shadow {
  stroke: #9ab1c2;
  opacity: .1;
}
html[data-palette="hybrid"] .tile .wire-center,
html[data-palette="hybrid"] .tile .wire-dot {
  fill: #1b3045;
  stroke: var(--wire-unlit);
}
html[data-palette="hybrid"] .tile.lit,
html[data-palette="hybrid"] .tile.solved,
html[data-palette="hybrid"] .tile:disabled:hover {
  background: #173b43;
  border-color: #718698;
}
html[data-palette="hybrid"] .tile.lit .wire-shadow {
  stroke: var(--wire-lit);
  opacity: .16;
}
html[data-palette="hybrid"] .tile.lit .wire-center,
html[data-palette="hybrid"] .tile.lit .wire-dot {
  fill: var(--wire-lit);
  stroke: var(--wire-lit);
}
html[data-palette="hybrid"] .tile.source,
html[data-palette="hybrid"] .tile.source:disabled:hover {
  background: #433822;
  border-color: #ffd166;
}
html[data-palette="hybrid"] .tile.source .wire-shadow {
  stroke: var(--wire-source);
}
html[data-palette="hybrid"] .tile .source-halo {
  fill: var(--wire-source);
}
html[data-palette="hybrid"] .tile .source-core {
  fill: var(--wire-source);
  stroke: #fff4d6;
}
html[data-palette="hybrid"] .tile.guided {
  background: #433822;
  border-color: #ffd166;
  box-shadow: 0 0 0 2px rgba(255,209,102,.16);
}
html[data-palette="hybrid"] .tile.guided:after {
  color: #ffd166;
  background: #433822;
}
html[data-palette="hybrid"] .tile:focus-visible {
  outline-color: #f6f0e4;
}

html[data-palette="hybrid"] .completion-panel {
  background: #14263a;
  color: #f6f0e4;
}
html[data-palette="hybrid"] .completion-star {
  color: #ffd166;
  background: radial-gradient(circle, rgba(255,209,102,.22), rgba(255,209,102,.08) 60%, transparent 72%);
}
html[data-palette="hybrid"] .completion-star::before {
  border-color: #ffd166;
}
html[data-palette="hybrid"] .completion-panel .primary-button {
  background: #ffd166;
  color: #14263a;
  box-shadow: 0 3px 12px rgba(255,209,102,.12);
}
html[data-palette="hybrid"] .completion-panel .primary-button:hover {
  background: #ffe09b;
}
html[data-palette="hybrid"] .completion-panel button:focus-visible {
  outline-color: #f6f0e4;
}
html[data-palette="hybrid"] .win-ring {
  border-color: rgba(255,209,102,.65);
}
html[data-palette="hybrid"] .win-glint {
  color: #ffd166;
}

/* Override color endpoints only; the original durations, delays, easing,
   reduced-motion overrides, and cancellation lifecycle still apply. */
html[data-palette="hybrid"] .tile.hinted { animation-name: hybrid-hint; }
html[data-palette="hybrid"] .win-running .tile { animation-name: hybrid-circuit; }
html[data-palette="hybrid"] .win-running .tile .wire { animation-name: hybrid-wire; }
html[data-palette="hybrid"] .win-running .tile .wire-center,
html[data-palette="hybrid"] .win-running .tile .wire-dot { animation-name: hybrid-node; }
@keyframes hybrid-hint {
  0%,100% { box-shadow: inset 0 0 0 2px #ffd166; }
  50% { box-shadow: inset 0 0 0 4px #ffd166; background: #433822; }
}
@keyframes hybrid-circuit {
  from { box-shadow: inset 0 0 0 0 transparent; }
  to { background: #3c3528; border-color: #ffd166; box-shadow: inset 0 0 0 1px rgba(255,209,102,.18); }
}
@keyframes hybrid-wire { to { stroke: #ffd166; } }
@keyframes hybrid-node { to { fill: #ffd166; stroke: #ffd166; } }