/* Rakov lov (docs/rakov-lov.md): the river, lily pads, basket and start card shared by the hunts in Rýchle počty and
   Tvrdé y či mäkké i, with the river engine shared/lov.js. build.sh links this file before a game's own <style>, so
   the game's rules for its plates (numbers or words with a missing letter), toast and results come after and win.
   The river uses the colours of the map in shared/cesta.css. */
:root {
  --lw: #93d2f3; --lw-deep: #7ac4ee; --lw-flow: rgba(255, 255, 255, .7); --lbank: #f1e6c8; --lbank-edge: #b4d8b0; --lgrass: #dff0d8;
  --lpad: #6cc489; --lpad-dark: #3e9c5c; --lpad-vein: rgba(25, 90, 45, .3); --lplate-edge: var(--lpad-dark);
  --ltuft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='170'%3E%3Cg fill='none' stroke='%236fae6a' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 40l-2-7M7 40v-9M9 40l3-6'/%3E%3Cpath d='M6 128l-2-6M8 128v-8M10 128l2-5'/%3E%3C/g%3E%3C/svg%3E");
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --lw: #22558f; --lw-deep: #1d4c85; --lw-flow: rgba(175, 210, 255, .45); --lbank: #2c3a4a; --lbank-edge: #1d4239; --lgrass: #17302b;
    --lpad: #3a9b64; --lpad-dark: #23704a; --lpad-vein: rgba(0, 35, 15, .38); --lplate-edge: var(--lpad);
  --ltuft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='170'%3E%3Cg fill='none' stroke='%233f7a5c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 40l-2-7M7 40v-9M9 40l3-6'/%3E%3Cpath d='M6 128l-2-6M8 128v-8M10 128l2-5'/%3E%3C/g%3E%3C/svg%3E");
  }
}
:root[data-theme="dark"] {
  --lw: #22558f; --lw-deep: #1d4c85; --lw-flow: rgba(175, 210, 255, .45); --lbank: #2c3a4a; --lbank-edge: #1d4239; --lgrass: #17302b;
  --lpad: #3a9b64; --lpad-dark: #23704a; --lpad-vein: rgba(0, 35, 15, .38); --lplate-edge: var(--lpad);
  --ltuft: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='170'%3E%3Cg fill='none' stroke='%233f7a5c' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M5 40l-2-7M7 40v-9M9 40l3-6'/%3E%3Cpath d='M6 128l-2-6M8 128v-8M10 128l2-5'/%3E%3C/g%3E%3C/svg%3E");
}
#lov { gap: 8px; }
#lov .hud { flex: none; }
.lov-prog { flex: 1; height: 6px; border-radius: 99px; background: var(--line); overflow: hidden; max-width: 220px; }
.lov-prog i { display: block; height: 100%; width: 100%; border-radius: inherit; background: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform .4s; }
.sound.pause svg { width: 20px; height: 20px; }
.lov-target {
  flex: none; display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 56px; padding: 4px 18px;
  background: var(--surface); border: 2px solid var(--line); border-radius: 18px; box-shadow: var(--shadow);
}
.lov-target span { font-size: 17px; font-weight: 700; color: var(--muted); }
.lov-target b { font-family: var(--f-display); font-weight: 800; font-size: 40px; line-height: 1; color: var(--accent); }
/* The river: water between two sandy banks with a wavy shore, small ripples drift down with the current. */
.lov-river {
  position: relative; flex: 1; min-height: 0; max-height: 680px; border-radius: 22px; overflow: hidden;
  background: radial-gradient(120% 60% at 50% 50%, var(--lw-deep), transparent 70%), var(--lw);
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lbank-edge) 70%, transparent);
}
.lov-river:focus-visible { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--lbank-edge) 70%, transparent), 0 0 0 3px var(--accent); }
.lov-river::before, .lov-river::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 26px; z-index: 0; pointer-events: none;
  background: var(--ltuft) 7px 0 / 16px 170px repeat-y, linear-gradient(90deg, var(--lbank-edge) 0 7px, var(--lbank) 7px);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='120'%3E%3Cpath d='M0 0H19C23 14 25 26 21 40S16 66 20 82S25 106 19 120H0Z'/%3E%3C/svg%3E") 0 0 / 26px 120px repeat-y; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='120'%3E%3Cpath d='M0 0H19C23 14 25 26 21 40S16 66 20 82S25 106 19 120H0Z'/%3E%3C/svg%3E") 0 0 / 26px 120px repeat-y;
}
.lov-river::after { left: auto; right: 0; transform: scaleX(-1); -webkit-mask-position: 0 60px; mask-position: 0 60px; }
.lov-flow {
  position: absolute; inset: -300px 22px 0; pointer-events: none; background: var(--lw-flow);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='300'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M22 30q7-6 14 0t14 0'/%3E%3Cpath d='M112 78q6-5 12 0t12 0'/%3E%3Cpath d='M58 150q7-6 14 0t14 0t14 0'/%3E%3Cpath d='M140 212q6-5 12 0t12 0'/%3E%3Cpath d='M14 246q6-5 12 0t12 0'/%3E%3Cpath d='M92 280q7-6 14 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 300px repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='300'%3E%3Cg fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='M22 30q7-6 14 0t14 0'/%3E%3Cpath d='M112 78q6-5 12 0t12 0'/%3E%3Cpath d='M58 150q7-6 14 0t14 0t14 0'/%3E%3Cpath d='M140 212q6-5 12 0t12 0'/%3E%3Cpath d='M14 246q6-5 12 0t12 0'/%3E%3Cpath d='M92 280q7-6 14 0'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 180px 300px repeat;
  animation: lov-flow 11s linear infinite;
}
.lov-river.is-paused .lov-flow { animation-play-state: paused; }
@keyframes lov-flow { to { transform: translateY(300px); } }
.lov-lane { position: absolute; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 20%, transparent); box-shadow: inset 2px 0 0 var(--accent), inset -2px 0 0 var(--accent); pointer-events: none; }
.lov-lane[hidden] { display: none; }
/* One pad: an oval leaf (sways a little) and a plate with the problem (never turns, for legibility). */
.lov-pad {
  position: absolute; left: 0; top: 0; border: 0; padding: 0; background: none; color: var(--ink); cursor: pointer;
  display: grid; place-items: center; will-change: transform; -webkit-tap-highlight-color: transparent; pointer-events: none; z-index: 1;
}
.lov-pad svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.lov-leaf-g { transform-box: fill-box; transform-origin: center; animation: lov-sway var(--sw, 3.4s) ease-in-out infinite alternate; }
@keyframes lov-sway { from { transform: rotate(-3deg); } to { transform: rotate(3deg); } }
.lov-leaf { fill: var(--lpad); stroke: var(--lpad-dark); stroke-width: 2.5; stroke-linejoin: round; }
.lov-vein { fill: none; stroke: var(--lpad-vein); stroke-width: 2; stroke-linecap: round; }
.lov-shadow { fill: rgba(10, 50, 90, .18); }
.lov-plate {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: .18em; min-width: 78%; padding: 3px 10px;
  border-radius: 99px; background: var(--surface); border: 2px solid var(--lplate-edge); white-space: nowrap;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--lpad-dark) 55%, transparent);
}
.lov-pad.is-sel .lov-plate { outline: 3px solid var(--accent); outline-offset: 3px; }
.lov-pad.is-in { animation: lov-in .35s ease-out both; }
@keyframes lov-in { from { opacity: 0; } }
/* A right one floating away: soft gold as it leaves (only now it shows its answer). */
.lov-pad.is-escape .lov-plate { background: color-mix(in srgb, var(--gold) 26%, var(--surface)); border-color: var(--gold); }
.lov-pad.is-gone { opacity: 0; transition: opacity .5s .25s; }
.lov-pad.is-fade { opacity: 0; transition: opacity 1.2s; }
/* Wrong tap: the pad stops, shakes and shows what was wrong, then sinks. */
.lov-pad.is-wrong .lov-plate { border-color: var(--bad); background: color-mix(in srgb, var(--bad-soft) 80%, var(--surface)); animation: shake .4s; }
.lov-val {
  position: absolute; left: 50%; top: calc(100% - 6px); translate: -50% 0; display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; border-radius: 99px; background: var(--bad-soft); color: var(--ink); border: 1.5px solid var(--bad);
  font-family: var(--f-display); font-weight: 800; font-size: 18px; white-space: nowrap; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) both;
}
.lov-val svg { position: static; width: 12px; height: 12px; color: var(--bad); }
.lov-pad.is-sink { transition: opacity .6s, filter .6s; opacity: 0; filter: blur(1px); }
.lov-pad.is-sink .lov-leaf-g, .lov-pad.is-sink .lov-plate { transform: scale(.82); transition: transform .6s; }
/* Caught: it flies to its place in the basket. */
.lov-pad.is-caught { transition: transform .55s cubic-bezier(.5, -.2, .6, 1), opacity .55s; z-index: 3; }
.lov-plus {
  position: absolute; z-index: 4; pointer-events: none; font-family: var(--f-display); font-weight: 800; font-size: 26px; color: var(--good);
  text-shadow: 0 1px 0 var(--surface), 0 0 6px var(--surface); animation: lov-plus .9s ease-out forwards;
}
.lov-minus { color: var(--muted); font-size: 22px; }
@keyframes lov-plus { from { transform: translate(-50%, 0) scale(.6); opacity: 0; } 25% { transform: translate(-50%, -8px) scale(1.1); opacity: 1; } to { transform: translate(-50%, -46px) scale(1); opacity: 0; } }
.lov-toast {
  position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); z-index: 5; max-width: calc(100% - 32px);
  padding: 7px 14px; border-radius: 99px; background: color-mix(in srgb, var(--gold) 22%, var(--surface)); border: 1.5px solid var(--gold);
  font-weight: 700; white-space: nowrap; pointer-events: none;
}
.lov-toast b { font-family: var(--f-display); font-weight: 800; }
@keyframes lov-toast { 0% { opacity: 0; transform: translate(-50%, 8px); } 12%, 82% { opacity: 1; transform: translate(-50%, 0); } 100% { opacity: 0; } }
/* The crayfish and its basket: 10 places that fill with each catch. */
.lov-basket { flex: none; display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 4px 12px 4px 4px; }
.lov-rak { width: 56px; height: 56px; flex: none; }
.lov-rak svg { width: 100%; height: 100%; display: block; }
/* The basket: a woven band behind the ten places. */
.lov-slots {
  flex: 1; display: grid; grid-template-columns: repeat(10, 1fr); gap: 5px; max-width: 360px; padding: 6px 8px; border-radius: 14px;
  border: 2px solid color-mix(in srgb, var(--lpad-dark) 35%, var(--lbank)); box-shadow: inset 0 -3px 0 color-mix(in srgb, var(--lpad-dark) 14%, transparent);
  background: repeating-linear-gradient(90deg, transparent 0 9px, color-mix(in srgb, var(--lpad-dark) 10%, transparent) 9px 11px), var(--lbank);
}
.lov-slot { aspect-ratio: 1; max-width: 26px; width: 100%; justify-self: center; border-radius: 50%; border: 2px dashed color-mix(in srgb, var(--good) 45%, var(--line)); background: var(--surface); }
.lov-slot.on { border: 2px solid var(--lpad-dark); background: var(--lpad); animation: lov-slot .45s cubic-bezier(.2, 1.5, .4, 1) both; }
@keyframes lov-slot { from { transform: scale(.3); } }
/* Overlays inside the river: the start card, pause, "turn the phone". */
.lov-over {
  position: absolute; inset: 0; z-index: 8; display: flex; align-items: safe center; justify-content: center; padding: 16px; overflow-y: auto;
  background: color-mix(in srgb, var(--paper) 72%, transparent); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.lov-over[hidden] { display: none; }
.lov-card {
  width: 100%; max-width: 380px; display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 20px 18px 18px; box-shadow: var(--shadow);
}
.lov-card h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.lov-card p { margin: 0; font-size: 17px; line-height: 1.4; }
.lov-card p b { color: var(--accent); }
.lov-card .setting { width: 100%; text-align: left; }
.lov-card .btn-primary { padding: 15px; }
.lov-card .btn-ghost { padding: 12px; }
.lov-demo { position: relative; width: 220px; height: 150px; border-radius: 16px; overflow: hidden; flex: none;
  background: linear-gradient(90deg, var(--lw) 0%, var(--lw-deep) 50%, var(--lw) 100%); }
.lov-demo .lov-pad { position: absolute; width: 96px; height: 66px; transform: none; }
.lov-demo .lov-plate { font-size: 20px; }
.lov-demo .d1 { left: 10px; animation: lov-demo1 4s ease-in-out infinite; }
.lov-demo .d2 { left: 114px; animation: lov-demo2 4s linear infinite; }
.lov-demo .d1 .lov-plate { animation: lov-demo1p 4s ease-in-out infinite; }
@keyframes lov-demo1 { 0% { transform: translateY(4px); opacity: 0; } 10% { opacity: 1; } 45% { transform: translateY(42px); opacity: 1; } 55% { transform: translateY(42px) scale(1.08); opacity: 1; } 72%, 100% { transform: translateY(120px) scale(.3); opacity: 0; } }
@keyframes lov-demo1p { 0%, 47% { border-color: var(--lpad-dark); } 50%, 100% { border-color: var(--good); background: var(--good-soft); } }
@keyframes lov-demo2 { 0% { transform: translateY(4px); opacity: 0; } 10% { opacity: 1; } 80% { opacity: 1; } 100% { transform: translateY(100px); opacity: 0; } }
.lov-demo .tap { position: absolute; z-index: 2; left: 48px; top: 66px; width: 26px; height: 26px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 2px var(--accent);
  opacity: 0; animation: lov-tap 4s ease-out infinite; }
@keyframes lov-tap { 0%, 44% { opacity: 0; transform: scale(1.6); } 50% { opacity: 1; transform: scale(1); } 62%, 100% { opacity: 0; transform: scale(.8); } }
.lov-go { font-family: var(--f-display); font-weight: 800; font-size: 34px; color: var(--ink); background: var(--surface); padding: 8px 22px; border-radius: 99px; box-shadow: var(--shadow); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* Results of a hunt: every right pad of the game, caught ones with a tick. */
.lov-all { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; list-style: none; margin: 0; padding: 0; }
.lov-all li {
  padding: 6px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface);
}
.lov-all li.got { background: color-mix(in srgb, var(--good) 12%, var(--surface)); border-color: color-mix(in srgb, var(--good) 45%, transparent); }
.lov-all li.got::before { content: "✓ "; content: "✓ " / ""; color: var(--good); }
.lov-all li.away { color: var(--muted); border-style: dashed; }
/* Short screens: a smaller start card. (The board above the river shows the number, so the card has no heading.) */
@media (max-height: 720px) {
  .lov-card { gap: 10px; padding: 14px 16px; }
  .lov-demo { height: 112px; }
}
@media (max-height: 640px) {
  .lov-target { min-height: 44px; }
  .lov-target b { font-size: 32px; }
  .lov-basket { min-height: 52px; }
  .lov-rak { width: 46px; height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .lov-leaf-g, .lov-flow { animation: none !important; }
  .lov-demo .d1, .lov-demo .d2, .lov-demo .tap, .lov-demo .d1 .lov-plate { animation: none !important; }
  .lov-demo .d1 { transform: translateY(42px); } .lov-demo .d2 { transform: translateY(14px); }
  /* Still the demo shows which one is right: the caught plate is green, the tap mark stays. */
  .lov-demo .d1 .lov-plate { border-color: var(--good); background: var(--good-soft); }
  .lov-demo .tap { opacity: 1; transform: none; left: 82px; top: 90px; width: 20px; height: 20px; }
  .lov-toast { animation: none !important; }
}