/* «Одним росчерком» */
.oneline-thumb line { stroke: var(--ink); stroke-width: 26; stroke-linecap: round; }
.oneline-thumb circle { fill: var(--sun); stroke: var(--ink); stroke-width: 14; }

/* Landscape keeps the buttons beside the mascot so the sheet gets the height. */
.screen.oneline {
  display: grid;
  grid-template: "top top" auto "say tools" auto "board board" minmax(0, 1fr) / minmax(0, 1fr) auto;
}
.oneline .topbar { grid-area: top; }
/* Room for two lines of speech, so the sheet does not jump when the mascot says something longer. */
.oneline .speaker { grid-area: say; min-height: 72px; }
.oneline-tools { grid-area: tools; display: flex; align-items: center; justify-content: center; gap: 10px; }
.oneline-count {
  display: inline-flex; align-items: center; height: 52px; padding: 0 16px; flex: none; white-space: nowrap;
  font-size: 20px; font-weight: 850; background: var(--card); border: var(--line); border-radius: 18px; box-shadow: 0 4px 0 var(--ink);
}
.oneline-tools.nudge .btn.ghost { background: var(--sun); animation: oneline-nudge .9s ease-in-out infinite; }
@keyframes oneline-nudge { 50% { transform: translateY(-4px); } }

.oneline-board {
  grid-area: board; align-self: center; width: 100%; aspect-ratio: 4 / 3; max-height: 100%; min-height: 0;
  background: #fff; border: var(--line); border-radius: 24px; box-shadow: 0 5px 0 var(--ink); overflow: hidden;
  /* Repeated on the box in case Safari does not honour touch-action on the SVG itself. */
  touch-action: none;
}
.oneline-sheet { display: block; width: 100%; height: 100%; touch-action: none; cursor: pointer; }

.oneline-edge { stroke: #cfc8de; stroke-width: 14; stroke-linecap: round; }
.oneline-edge.glow { stroke: var(--sun); stroke-width: 20; animation: oneline-glow 1.1s ease-in-out infinite; }
@keyframes oneline-glow { 50% { stroke: #ffe59a; } }
.oneline-ink {
  fill: none; stroke-width: 18; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 0; animation: oneline-draw .22s ease-out;
}
@keyframes oneline-draw { from { stroke-dashoffset: 1; } }
.oneline-ink.no { animation: oneline-no .35s; }
@keyframes oneline-no { 30% { stroke-width: 30; } 60% { stroke-width: 12; } }
.oneline-band { stroke: var(--ink); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 4 16; opacity: .45; display: none; pointer-events: none; }
.oneline-band.on { display: inline; }
.oneline-node { fill: #fff; stroke: var(--ink); stroke-width: 7; }
.oneline-node.full { fill: #bfeccb; }
.oneline-node.cur { fill: var(--sun); }
.oneline-ring { fill: none; stroke: var(--coral); stroke-width: 10; display: none; pointer-events: none; animation: oneline-ring 1s ease-in-out infinite; }
.oneline-ring.on { display: inline; }
@keyframes oneline-ring { 50% { stroke-width: 22; opacity: .45; } }

/* Portrait has height to spare: the mascot, the sheet and the buttons stay together in the middle. */
@media (orientation: portrait) {
  .screen.oneline { grid-template: "top" auto "." 1fr "say" auto "board" auto "tools" auto "." 1fr / minmax(0, 1fr); }
  .oneline-board { max-height: calc(100dvh - 290px); }
}