/* The five games, each scoped to its own screen. mend and oneline are generated from their own style.css; pour, thread and untangle share one layout at the end. */
.screen-mend {
  --bg: #14181f;      
  --panel: #1b2029;
  --ink: #dce3ec;
  --muted: #9aa6b5;
  --open: #56606f;    
  --a: #7fd1b9;       
  --on: #0a231c;
  --w: #f2a65a;       
  --line: rgba(220, 227, 236, 0.08);
  --font: "Lexend", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
.screen-mend .app {
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(10px, 2.5vh, 22px) 16px clamp(14px, 3vh, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vh, 18px);
}
.screen-mend .top { display: flex; align-items: center; justify-content: space-between; }
.screen-mend .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 18px; letter-spacing: 0.03em; }
.screen-mend .mark {
  width: 14px; height: 14px; border-radius: 4px;
  border: 2.5px solid var(--a);
  border-right-color: transparent;
  transform: rotate(45deg);
}
.screen-mend .mark.big { width: 44px; height: 44px; border-width: 6px; border-radius: 12px; }
.screen-mend .pips { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.screen-mend .pips li { width: 22px; height: 6px; border-radius: 999px; background: var(--line); }
.screen-mend .pips li.done { background: var(--a); }
.screen-mend .pips li.now { background: var(--muted); }
.screen-mend .stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.screen-mend .board {
  width: 100%; height: 100%;
  max-height: 100%;
  touch-action: manipulation;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  border-radius: 18px;
  outline: none;
}
.screen-mend .board:focus-visible .cursor { stroke: var(--w); }
.screen-mend .board .cell { fill: transparent; cursor: pointer; }
.screen-mend .board .tile { transition: transform 170ms cubic-bezier(0.3, 0.7, 0.4, 1); transform-box: view-box; }
.screen-mend .board .tile path, .screen-mend .board .tile circle { stroke: var(--open); fill: none; stroke-width: 13; stroke-linecap: round; transition: stroke 260ms ease; }
.screen-mend .board .tile circle.cap { fill: var(--open); stroke: none; transition: fill 260ms ease; }
.screen-mend .board .tile.closed path { stroke: var(--a); }
.screen-mend .board .tile.closed circle.cap { fill: var(--a); }
.screen-mend .board .tile.hinted path { stroke: var(--w); }
.screen-mend .board .tile.hinted circle.cap { fill: var(--w); }
.screen-mend .board .dot { fill: var(--line); }
.screen-mend .board .cursor { fill: none; stroke: transparent; stroke-width: 4; rx: 16; }
.screen-mend .board.mended .tile path { stroke: var(--a); }
.screen-mend .board.mended { animation: mend-glow 1.4s ease-out; }
@keyframes mend-glow {
  0% { filter: none; }
  35% { filter: drop-shadow(0 0 14px rgba(127, 209, 185, 0.55)); }
  100% { filter: drop-shadow(0 0 4px rgba(127, 209, 185, 0.2)); }
}
.screen-mend .foot { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.screen-mend .line { color: var(--muted); font-size: 15px; font-weight: 300; max-width: 36ch; min-height: 3em; text-wrap: balance; }
.screen-mend .line.good { color: var(--a); font-weight: 400; }
.screen-mend .actions { display: flex; gap: 10px; }
.screen-mend .btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 20px;
  font-weight: 500; font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.screen-mend .btn:hover { background: var(--panel); }
.screen-mend .btn:active { transform: scale(0.98); }
.screen-mend .btn.primary { background: var(--a); color: var(--on); border-color: transparent; }
.screen-mend .btn.primary:hover { background: #95dcc7; }
.screen-mend .btn:focus-visible { outline: 2px solid var(--w); outline-offset: 3px; }
.screen-mend .rest {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
}
.screen-mend .rest h1 { font-weight: 400; font-size: clamp(26px, 5vh, 34px); letter-spacing: -0.01em; }
.screen-mend .rest p { color: var(--muted); font-weight: 300; max-width: 30ch; }
.screen-mend .rest .mark { margin-bottom: 8px; }
@media (prefers-reduced-motion: reduce) {
.screen-mend .board .tile { transition: none; }
.screen-mend .board.mended { animation: none; }
}

.screen-ol {
  --bg: #101425;      
  --panel: #171c33;
  --ink: #e6e8f5;
  --muted: #9ca1c2;
  --edge: #353b5c;    
  --a: #ffc857;       
  --on: #2a1d00;
  --w: #ff7b7b;       
  --line: rgba(230, 232, 245, 0.08);
  --font: "Lexend", "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: dark;
}
.screen-ol .app {
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(10px, 2.5vh, 22px) 16px clamp(14px, 3vh, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vh, 18px);
}
.screen-ol .top { display: flex; align-items: center; justify-content: space-between; }
.screen-ol .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 500; font-size: 18px; letter-spacing: 0.03em; }
.screen-ol .mark { width: 22px; height: 3px; border-radius: 3px; background: var(--a); box-shadow: 0 0 10px rgba(255, 200, 87, 0.45); }
.screen-ol .mark.big { width: 72px; height: 6px; border-radius: 6px; margin-bottom: 10px; }
.screen-ol .pips { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.screen-ol .pips li { width: 22px; height: 6px; border-radius: 999px; background: var(--line); }
.screen-ol .pips li.done { background: var(--a); }
.screen-ol .pips li.now { background: var(--muted); }
.screen-ol .stage { flex: 1; min-height: 0; display: grid; place-items: center; }
.screen-ol .board {
  width: 100%; height: 100%;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.screen-ol .board .edge { stroke: var(--edge); stroke-width: 9; stroke-linecap: round; }
.screen-ol .board .drawn { stroke: var(--a); stroke-width: 13; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 200, 87, 0.35)); }
.screen-ol .board .dot { fill: var(--bg); stroke: var(--muted); stroke-width: 4; transition: fill 0.15s, stroke 0.15s; }
.screen-ol .board .dot.visited { stroke: var(--a); }
.screen-ol .board .dot.end { fill: var(--a); stroke: var(--a); }
.screen-ol .board .halo { fill: rgba(255, 200, 87, 0.16); }
.screen-ol .board .dot.start { stroke: var(--w); stroke-width: 6; }
.screen-ol .board .ring { fill: none; stroke: var(--w); stroke-width: 3; opacity: 0.55; }
.screen-ol .board .hit { fill: transparent; cursor: pointer; }
.screen-ol .board .dot:focus-visible, .screen-ol .board .hit:focus-visible { outline: none; }
.screen-ol .board.solved .drawn { animation: ol-glow 1.4s ease-out; }
@keyframes ol-glow {
  35% { filter: drop-shadow(0 0 16px rgba(255, 200, 87, 0.8)); }
}
.screen-ol .foot { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.screen-ol .line { color: var(--muted); font-size: 15px; font-weight: 300; max-width: 36ch; min-height: 3em; text-wrap: balance; }
.screen-ol .line.good { color: var(--a); font-weight: 400; }
.screen-ol .line.warn { color: var(--ink); }
.screen-ol .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.screen-ol .btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 500; font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.screen-ol .btn:hover { background: var(--panel); }
.screen-ol .btn:active { transform: scale(0.98); }
.screen-ol .btn:disabled { opacity: 0.4; cursor: default; }
.screen-ol .btn.primary { background: var(--a); color: var(--on); border-color: transparent; }
.screen-ol .btn.primary:hover { background: #ffd57d; }
.screen-ol .btn:focus-visible { outline: 2px solid var(--w); outline-offset: 3px; }
.screen-ol .rest {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
}
.screen-ol .rest h1 { font-weight: 400; font-size: clamp(26px, 5vh, 34px); letter-spacing: -0.01em; }
.screen-ol .rest p { color: var(--muted); font-weight: 300; max-width: 30ch; }
@media (prefers-reduced-motion: reduce) {
.screen-ol .board.solved .drawn { animation: none; }
.screen-ol .board .dot { transition: none; }
}

/* ---------- pour, thread and untangle: one layout, each in its own colours ---------- */
.screen-po {
  --bg: #17141c;      /* warm night */
  --panel: #221d29;
  --ink: #efe9e1;
  --muted: #aaa2b0;
  --a: #f2c46d;       /* ochre sand */
  --on: #2a1d00;
  --w: #c9c0ff;       /* the hint */
  --line: rgba(239, 233, 225, 0.09);
}
.screen-th {
  --bg: #0e1a1d;      /* deep teal */
  --panel: #152a2f;
  --ink: #e1eeee;
  --muted: #94aeb0;
  --a: #7fd1b9;
  --on: #0a231c;
  --w: #f2c14e;
  --line: rgba(225, 238, 238, 0.09);
}
.screen-un {
  --bg: #141223;      /* night violet */
  --panel: #1e1b33;
  --ink: #e6e8f5;
  --muted: #a3a6c4;
  --a: #8fd3ff;
  --on: #04202f;
  --w: #ff8a7a;       /* crossing */
  --line: rgba(230, 232, 245, 0.09);
}
.screen-po, .screen-th, .screen-un { color: var(--ink); color-scheme: dark; position: relative; }
.screen-po { background: radial-gradient(60rem 40rem at 50% -10%, #2b2333, transparent 70%), var(--bg); }
.screen-th { background: radial-gradient(60rem 40rem at 50% -10%, #15303a, transparent 70%), var(--bg); }
.screen-un { background: radial-gradient(60rem 40rem at 50% -10%, #262043, transparent 70%), var(--bg); }

:is(.screen-po, .screen-th, .screen-un) .app {
  position: relative;
  height: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: clamp(10px, 2.5vh, 22px) 16px clamp(14px, 3vh, 28px);
  display: flex;
  flex-direction: column;
  gap: clamp(8px, 2vh, 18px);
}
:is(.screen-po, .screen-th, .screen-un) .top { display: flex; align-items: center; justify-content: space-between; }
:is(.screen-po, .screen-th, .screen-un) .pips { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
:is(.screen-po, .screen-th, .screen-un) .pips li { width: 22px; height: 6px; border-radius: 999px; background: var(--line); }
:is(.screen-po, .screen-th, .screen-un) .pips li.done { background: var(--a); }
:is(.screen-po, .screen-th, .screen-un) .pips li.now { background: var(--muted); }
:is(.screen-po, .screen-th, .screen-un) .stage { flex: 1; min-height: 0; display: grid; place-items: center; }
:is(.screen-po, .screen-th, .screen-un) .board {
  width: 100%; height: 100%;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
:is(.screen-po, .screen-th, .screen-un) .foot { display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
:is(.screen-po, .screen-th, .screen-un) .line { color: var(--muted); font-size: 15px; font-weight: 300; max-width: 36ch; min-height: 3em; text-wrap: balance; }
:is(.screen-po, .screen-th, .screen-un) .line.good { color: var(--a); font-weight: 400; }
:is(.screen-po, .screen-th, .screen-un) .line.warn { color: var(--ink); }
:is(.screen-po, .screen-th, .screen-un) .actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
:is(.screen-po, .screen-th, .screen-un) .btn {
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  border-radius: 999px;
  padding: 10px 18px;
  font-weight: 500; font-size: 15px;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
:is(.screen-po, .screen-th, .screen-un) .btn:hover { background: var(--panel); }
:is(.screen-po, .screen-th, .screen-un) .btn:active { transform: scale(0.98); }
:is(.screen-po, .screen-th, .screen-un) .btn:disabled { opacity: 0.4; cursor: default; }
:is(.screen-po, .screen-th, .screen-un) .btn.primary { background: var(--a); color: var(--on); border-color: transparent; }
:is(.screen-po, .screen-th, .screen-un) .btn.primary:hover { filter: brightness(1.08); }
:is(.screen-po, .screen-th, .screen-un) .btn:focus-visible { outline: 2px solid var(--w); outline-offset: 3px; }
:is(.screen-po, .screen-th, .screen-un) .rest {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 14px; text-align: center;
}
:is(.screen-po, .screen-th, .screen-un) .rest h1 { font-weight: 400; font-size: clamp(26px, 5vh, 34px); letter-spacing: -0.01em; }
:is(.screen-po, .screen-th, .screen-un) .rest p { color: var(--muted); font-weight: 300; max-width: 30ch; }
:is(.screen-po, .screen-th, .screen-un) .rest .mark { margin-bottom: 8px; }

/* pour: glass jars of layered sand on a warm night; a finished jar gets a lid */
.screen-po .board { touch-action: manipulation; }
.screen-po .board .jar { cursor: pointer; outline: none; }
.screen-po .board .hit { fill: transparent; }
.screen-po .board .inner { transform-box: fill-box; transform-origin: 50% 12%; transition: transform 0.2s ease; }
.screen-po .board .jar.lifted .inner { transform: translateY(-22px); }
.screen-po .board .jar.tilt-r .inner { transform: translateY(-28px) rotate(12deg); }
.screen-po .board .jar.tilt-l .inner { transform: translateY(-28px) rotate(-12deg); }
.screen-po .board .glass-back { fill: rgba(255, 255, 255, 0.035); }
.screen-po .board .glass { fill: none; stroke: rgba(239, 233, 225, 0.4); stroke-width: 3; stroke-linejoin: round; }
.screen-po .board .shine { fill: none; stroke: rgba(255, 255, 255, 0.16); stroke-width: 5; stroke-linecap: round; }
.screen-po .board .rim { fill: rgba(255, 255, 255, 0.08); stroke: rgba(239, 233, 225, 0.4); stroke-width: 2.5; }
.screen-po .board .thread { fill: none; stroke: rgba(239, 233, 225, 0.22); stroke-width: 1.5; }
.screen-po .board .jar.lifted .glass, .screen-po .board .jar.lifted .rim { stroke: rgba(239, 233, 225, 0.8); }
.screen-po .board .lid { fill: #b08968; stroke: #8a6a4f; stroke-width: 2; display: none; }
.screen-po .board .jar.full .lid { display: inline; }
.screen-po .board .jar.aim .glass { stroke: var(--w); stroke-dasharray: 9 7; }
.screen-po .board .jar:focus-visible .glass { stroke: var(--ink); stroke-width: 4; }
.screen-po .board .grain { fill: rgba(24, 18, 30, 0.28); }
.screen-po .board .grain.line { fill: none; stroke: rgba(24, 18, 30, 0.28); stroke-width: 1.8; stroke-linecap: round; }
.screen-po .board .stream { fill: none; stroke-width: 8; stroke-linecap: round; stroke-dasharray: 5 9; opacity: 0; pointer-events: none; transition: opacity 0.12s; }
.screen-po .board .stream.on { opacity: 0.95; animation: po-flow 0.36s linear infinite; }
@keyframes po-flow { to { stroke-dashoffset: -28; } }
.screen-po .board.solved .sand { animation: po-glow 1.4s ease-out; }
@keyframes po-glow { 35% { filter: drop-shadow(0 0 12px rgba(242, 196, 109, 0.7)); } }
.screen-po .mark { width: 12px; height: 16px; border: 2.5px solid var(--a); border-top-width: 4px; border-radius: 3px 3px 5px 5px; }
.screen-po .mark.big { width: 36px; height: 48px; border-width: 5px; border-top-width: 9px; border-radius: 6px 6px 12px 12px; }

/* thread: coloured paths on deep teal, each colour with its own end shape */
.screen-th .board { touch-action: none; }
.screen-th .board .cell { fill: #13252a; transition: fill-opacity 0.2s; }
.screen-th .board .cell.tint { fill-opacity: 0.2; }
.screen-th .board .path { fill: none; stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; pointer-events: none; }
.screen-th .board .path.joined { opacity: 1; }
.screen-th .board .path.flash { animation: th-flash 1.2s ease-out; }
@keyframes th-flash { 30% { stroke-width: 40; } }
.screen-th .board .end { pointer-events: none; }
.screen-th .board .end .edge { stroke: var(--bg); stroke-width: 7; paint-order: stroke; stroke-linejoin: round; }
.screen-th .board .end .under { stroke: var(--bg); }
.screen-th .board .cursor { fill: none; stroke: transparent; stroke-width: 4; pointer-events: none; }
.screen-th .board:focus-visible .cursor { stroke: var(--muted); }
.screen-th .board:focus-visible .cursor.drawing { stroke: var(--ink); stroke-dasharray: 10 8; }
.screen-th .board.solved { animation: th-glow 1.4s ease-out; }
@keyframes th-glow { 35% { filter: drop-shadow(0 0 14px rgba(127, 209, 185, 0.55)); } }
.screen-th .mark { width: 22px; height: 12px; border: 3px solid var(--a); border-top: 0; border-radius: 0 0 8px 8px; }
.screen-th .mark.big { width: 64px; height: 30px; border-width: 6px; border-radius: 0 0 18px 18px; }

/* untangle: dots and lines on night violet; crossing lines in coral */
.screen-un .board { touch-action: none; }
.screen-un .board .edge { stroke: var(--a); stroke-width: 4; stroke-linecap: round; transition: stroke 0.15s; }
.screen-un .board .edge.x { stroke: var(--w); }
.screen-un .board .dot { fill: var(--bg); stroke: var(--ink); stroke-width: 4; pointer-events: none; }
.screen-un .board .dot.held { fill: var(--a); stroke: var(--a); }
.screen-un .board .halo { fill: rgba(143, 211, 255, 0.18); opacity: 0; pointer-events: none; }
.screen-un .board .halo.on { opacity: 1; }
.screen-un .board .hit { fill: transparent; cursor: grab; }
.screen-un .board .hit:focus-visible { outline: none; stroke: var(--muted); stroke-width: 3; stroke-dasharray: 6 6; }
.screen-un .board.solved .edge { animation: un-glow 1.4s ease-out; }
@keyframes un-glow { 35% { filter: drop-shadow(0 0 10px rgba(143, 211, 255, 0.9)); } }
.screen-un .mark { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--a); }
.screen-un .mark.big { width: 40px; height: 40px; border-width: 5px; }

@media (prefers-reduced-motion: reduce) {
  .screen-po .board .inner, .screen-po .board .stream, .screen-th .board .cell, .screen-un .board .edge { transition: none; }
  .screen-po .board .stream.on, .screen-po .board.solved .sand, .screen-th .board .path.flash, .screen-th .board.solved, .screen-un .board.solved .edge { animation: none; }
}