:root {
  --ink: #2b2150;
  --muted: #6f6792;
  --brand: #34106c;
  --line: #e2dcf3;
  --floor: #fbfaff;
  --wall: #34106c;
  --start: #22c55e;
  --goal: #ff5c8a;
  --trail: #7c6cf0;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; overflow: hidden; /* vh — для iOS < 15.4 */
  background: #fff; color: var(--ink);
  font: 500 16px/1.4 "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  overscroll-behavior: none;
}
button { font: inherit; cursor: default; touch-action: manipulation; }

.btn { display: inline-flex; align-items: center; gap: 8px; border: 0; border-radius: 10px; padding: 9px 16px; font-weight: 700; font-size: 15px; background: #fff; color: var(--ink); }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn--small { padding: 6px 12px; font-size: 14px; background: #f1eefc; color: var(--brand); }
.btn--small[aria-pressed="true"] { background: var(--brand); color: #fff; }
.btn--primary { background: var(--brand); color: #fff; padding: 13px 22px; font-size: 17px; }
.btn--primary:hover { background: #4a1d94; }

.stage { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; padding: 10px 16px 12px; gap: 8px; }
.info { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: 1100px; }
.info { gap: 12px; }
.stats { flex: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; font-size: 14px; font-weight: 600; color: var(--muted); }
.stats b { color: var(--ink); font-size: 16px; margin-right: 4px; }
.st { padding: 3px 10px; border-radius: 8px; font-size: 13px; font-weight: 700; }
.st--leicht { background: #dcf3ea; color: #1f7a5a; }
.st--mittel { background: #fff1c9; color: #8a5a00; }
.st--schwer { background: #fde0e6; color: #b3264f; }
.check { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--brand); white-space: nowrap; cursor: default; }
.check input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); cursor: default; }
.clock { font-weight: 700; font-size: 18px; font-variant-numeric: tabular-nums; color: var(--muted); }
#board { flex: 1; min-height: 0; width: 100%; max-width: 1100px; touch-action: none; }
#floor { fill: var(--floor); }
#walls { fill: none; stroke: var(--wall); stroke-linecap: round; stroke-linejoin: round; }
.trail { fill: none; stroke-linecap: round; stroke-linejoin: round; opacity: .4; }
.player { stroke: #fff; stroke-width: .08; filter: drop-shadow(0 .04px .08px rgba(0,0,0,.35)); transition: cx .07s linear, cy .07s linear; }
.player.aktiv { stroke: #34106c; stroke-width: .1; }
.player.drag { transition: none; }
.hint { margin: 0; font-size: 14px; color: var(--muted); text-align: center; }

.win { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(27, 20, 70, .45); z-index: 21; padding: 16px; } /* 15.10.2026: окна выше общей шапки (.kl-leiste, z-index 20), иначе крестик высокого окна прячется под ней */
.win[hidden] { display: none; }
.win__card { background: #fff; border-radius: 22px; padding: 28px 32px; text-align: center; width: min(380px, 100%); box-shadow: 0 24px 60px rgba(20, 10, 60, .3); animation: pop .35s cubic-bezier(.2, .9, .25, 1.3); }
.win__star { font-size: 54px; color: #f5b400; line-height: 1; }
.win h2 { margin: 6px 0 4px; font-size: 30px; }
.win p { margin: 0 0 20px; color: var(--muted); }
@keyframes pop { from { transform: scale(.7); opacity: 0; } }
#confetti { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 22; }

@media (prefers-reduced-motion: reduce) { .player { transition: none; } .win__card { animation: none; } }

@media (max-width: 640px) { .info { flex-wrap: wrap; justify-content: center; } .stats { order: 5; flex-basis: 100%; } }

/* мелкие эффекты (Лина 29.09): звезда «дышит», искорки за точкой, точка вздрагивает у стенки, кольца на победе */
#goalMark polygon { transform-box: fill-box; transform-origin: center; animation: atmen 1.8s ease-in-out infinite; }
@keyframes atmen { 50% { transform: scale(1.14) rotate(8deg); } }
.funke { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: funke .6s ease-out forwards; }
@keyframes funke { from { opacity: .9; } to { opacity: 0; transform: translateY(-.35px) scale(.2); } }
.player.stoss { animation: stoss .22s ease-in-out; }
@keyframes stoss { 25% { transform: translateX(-.07px); } 50% { transform: translateX(.07px); } 75% { transform: translateX(-.04px); } }
.ring { fill: none; stroke-width: .1; transform-box: fill-box; transform-origin: center; animation: ring 1s ease-out forwards; opacity: 0; }
@keyframes ring { from { opacity: .9; transform: scale(1); } to { opacity: 0; transform: scale(4); } }
@media (prefers-reduced-motion: reduce) { #goalMark polygon { animation: none; } }

/* ── Премиум (Лина 01.10): режимы, кристаллы, туман, окно Premium ── */
[hidden] { display: none !important; }
.schloss { font-style: normal; font-size: 12px; margin-left: 4px; }

html:not(.mit-premium) [data-premium], html:not(.mit-premium) #modi { display: none; }
.modi { display: flex; align-items: center; flex-wrap: wrap; justify-content: center; gap: 6px 16px; width: 100%; max-width: 1100px; }
.modi__tabs { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #f1eefc; }
.modi__tabs button { border: 0; background: none; color: var(--brand); padding: 6px 14px; border-radius: 8px; font-size: 14px; font-weight: 700; }
.modi__tabs button[aria-checked="true"] { background: var(--brand); color: #fff; }
@media (hover: hover) { .modi__tabs button[aria-checked="false"]:hover { background: #e4dcf8; } }
.modi__info { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; font-size: 14px; font-weight: 600; color: var(--muted); }
.modi__info:empty { display: none; }
.serie { padding: 3px 10px; border-radius: 8px; background: #fff1c9; color: #8a5a00; font-weight: 700; }
.geschafft { padding: 3px 10px; border-radius: 8px; background: #dcf3ea; color: #1f7a5a; font-weight: 700; }
.st--reise { background: #e8e1fb; color: var(--brand); }

/* карта путешествия — общая (kl-leiste.css); в окне победы — с отступом снизу */
#winKarte { margin: 0 0 22px; }

/* кристаллы */
.kristallzahl { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: #0e7490; background: #e0f8fc; padding: 3px 10px; border-radius: 8px; white-space: nowrap; }
.kristall-icon { width: 11px; height: 14px; background: #22d3ee; clip-path: polygon(50% 0, 100% 40%, 50% 100%, 0 40%); }
.kristall { transform-box: fill-box; transform-origin: center; animation: glitzern 2.4s ease-in-out infinite; }
@keyframes glitzern { 50% { transform: scale(1.12); filter: brightness(1.15); } }
/* 24.10.2026: собранный кристалл скрыт и без анимации (на телефонах с «уменьшением движения» он оставался на месте) */
.kristall.weg { opacity: 0; animation: einsammeln .45s ease-out; }
@keyframes einsammeln { from { transform: none; opacity: 1; } to { transform: scale(2.2) translateY(-.3px); opacity: 0; } }
.win__star.drei { letter-spacing: 4px; font-size: 46px; }

/* туман: тёмная пелена, мир виден только сквозь маску (круг у точки + пройденное) */
#nebelDecke { fill: #2b2150; display: none; }
.neblig #nebelDecke { display: block; }
.licht { transition: cx .07s linear, cy .07s linear; }

/* окно Premium */
.win__card { position: relative; }
.modal__zu { position: absolute; right: 12px; top: 12px; border: 0; background: #f1eefc; color: var(--brand); width: 34px; height: 34px; border-radius: 10px; font-weight: 800; }
.premium__liste { text-align: left; padding-left: 20px; margin: 0 0 12px; line-height: 1.7; }
.premium__klein { font-size: 14px; }
@media (max-width: 640px) { .modi__tabs button { padding: 6px 9px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { .kristall { animation: none !important; } .kristall.weg { display: none; } .licht { transition: none; } }
#btnNew { margin-left: auto; }