/* «Каток»: вид экрана задачи (view.js). Всё под .g-katok; общие токены — в shared/base.css.
   Страничный каркас отдельной страницы «Катка» (главный, уровни) — в page.css. */

.g-katok {
  --ice: #dcebf5;
  --ice-edge: #c3d8e8;
  --grid: rgba(70, 120, 160, 0.17);
  --wall: #f5f9fc;
  --wall-side: #b4c8dc;
  --wall-hi: #ffffff;
  --wall-shade: rgba(40, 80, 120, 0.16);
  --snow: #f7fbfe;
  --snow-dot: #86a2ba;
  --hole: #26384b;
  --hole-deep: #172533;
  --stone: #7b8794;
  --stone-dark: rgba(30, 40, 52, 0.38);
  --stone-light: rgba(255, 255, 255, 0.34);
  --rim: rgba(18, 32, 46, 0.3);
  --psh: rgba(18, 40, 60, 0.22);
  --star: #b87400;
  --star-off: #9db0c2;
  --scrim: rgba(12, 24, 36, 0.42);
}

:root[data-theme='dark'] .g-katok {
  --ice: #25323f;
  --ice-edge: #36485b;
  --grid: rgba(160, 200, 230, 0.13);
  --wall: #a9bbcc;
  --wall-side: #6a7f95;
  --wall-hi: #d5e0ea;
  --wall-shade: rgba(0, 0, 0, 0.3);
  --snow: #3b4e63;
  --snow-dot: #92abc2;
  --hole: #0d141b;
  --hole-deep: #060a0e;
  --stone: #86919d;
  --stone-dark: rgba(10, 16, 24, 0.42);
  --stone-light: rgba(255, 255, 255, 0.26);
  --rim: rgba(255, 255, 255, 0.55);
  --psh: rgba(0, 0, 0, 0.4);
  --star: #f0b43c;
  --star-off: #5d7084;
  --scrim: rgba(0, 0, 0, 0.55);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) .g-katok {
    --ice: #25323f; --ice-edge: #36485b; --grid: rgba(160, 200, 230, 0.13);
    --wall: #a9bbcc; --wall-side: #6a7f95; --wall-hi: #d5e0ea; --wall-shade: rgba(0, 0, 0, 0.3);
    --snow: #3b4e63; --snow-dot: #92abc2; --hole: #0d141b; --hole-deep: #060a0e;
    --stone: #86919d; --stone-dark: rgba(10, 16, 24, 0.42); --stone-light: rgba(255, 255, 255, 0.26);
    --rim: rgba(255, 255, 255, 0.55); --psh: rgba(0, 0, 0, 0.4);
    --star: #f0b43c; --star-off: #5d7084; --scrim: rgba(0, 0, 0, 0.55);
  }
}

/* корень экрана задачи */
.g-katok.kt-root {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  overflow: hidden;
  color: var(--text);
}

/* кнопка «назад» на странице нужна только вне Телеграма: там есть своя */
body.tg .g-katok .inpage-back { visibility: hidden; }

.g-katok .star { fill: none; stroke: var(--star-off); stroke-width: 2; stroke-linejoin: round; }
.g-katok .star.on { fill: var(--star); stroke: var(--star); }

/* ---------- кнопки ---------- */

.g-katok .btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 56px;
  padding: 0 20px;
  border-radius: 16px;
  font-size: 18px;
  font-weight: 600;
  transition: transform 0.1s ease-out, opacity 0.15s;
}
.g-katok .btn:active:not(:disabled) { transform: scale(0.98); }
.g-katok .btn:disabled { opacity: 0.6; }
.g-katok .btn.primary { background: var(--accent); color: var(--on-accent); }
.g-katok .btn.plain { min-height: 48px; color: var(--accent); font-weight: 500; }
.g-katok .btn.small { min-height: 44px; font-size: 16px; }

/* ---------- шапка, полоса, кнопки под полем ---------- */

.g-katok .ghd-r .star { width: 14px; height: 14px; }
.g-katok .ghd-r .stars { display: inline-flex; gap: 1px; }

/* на отдельной странице кнопка «назад» занимает место слева: на самом узком экране подпись уровня уступает */
@media (max-width: 359px) {
  .g-katok .ghd-l:has(.inpage-back) .gl { display: none; }
}

.g-katok .strip {
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 16px;
}
.g-katok .note {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 8px 8px 8px 14px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: 0 2px 10px var(--shadow);
  font-size: 15px;
  animation: ktNoteIn 0.18s ease-out;
}
.g-katok .note > span { display: flex; align-items: center; gap: 8px; }
.g-katok .note.solo { padding-right: 14px; }
.g-katok .note .ic { width: 26px; height: 26px; color: var(--accent); stroke-width: 2.4; flex: none; }
.g-katok .nbtn {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 10px;
  background: var(--accent);
  color: var(--on-accent);
  font-size: 15px;
  font-weight: 600;
  flex: none;
}
.g-katok .nbtn.alt { background: transparent; color: var(--accent); border: 1px solid var(--line); }
@keyframes ktNoteIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.g-katok .stage { flex: 1 1 0; min-height: 0; position: relative; }


/* ---------- поле ---------- */

.g-katok .board {
  position: absolute;
  inset: 0;
  margin: auto;
  border-radius: 20px;
  overflow: hidden;
  background: var(--ice);
  box-shadow: 0 0 0 2px var(--ice-edge), 0 10px 26px var(--shadow);
  touch-action: none;
}
.g-katok .board > svg { display: block; width: 100%; height: 100%; }
.g-katok .layer { position: absolute; inset: 0; pointer-events: none; }

.g-katok .b-grid { stroke: var(--grid); stroke-width: 1.6; }
.g-katok .w-shade { fill: var(--wall-shade); }
.g-katok .w-side { fill: var(--wall-side); }
.g-katok .w-top { fill: var(--wall); }
.g-katok .w-hi { stroke: var(--wall-hi); }
.g-katok .s-bg { fill: var(--snow); }
.g-katok .s-dot { stroke: var(--snow-dot); }
.g-katok .h-in { fill: var(--hole); }
.g-katok .h-deep { fill: var(--hole-deep); }

.g-katok .piece { position: absolute; left: 0; top: 0; will-change: transform; }
.g-katok .piece .body { width: 100%; height: 100%; }
.g-katok .piece svg { display: block; width: 100%; height: 100%; overflow: visible; }
.g-katok .p-shadow { fill: var(--psh); }
.g-katok .p-rim { stroke: var(--rim); stroke-width: 2.5; }
.g-katok .st-body { fill: var(--stone); stroke: var(--rim); stroke-width: 2.5; stroke-linejoin: round; }
.g-katok .st-dark { fill: var(--stone-dark); }
.g-katok .st-light { fill: var(--stone-light); }

.g-katok .ripple {
  position: absolute;
  border: 3px solid;
  border-radius: 50%;
  box-sizing: border-box;
  pointer-events: none;
}

/* мягкая стрелка-подсказка смахивания на первом уровне */
.g-katok .tip {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.g-katok .tip-in { transform: rotate(var(--rot, 0deg)); }
.g-katok .tip svg { display: block; width: 84px; height: 32px; overflow: visible; animation: ktTip 1.9s ease-in-out infinite; }
.g-katok .tip path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.g-katok .tip .halo { stroke: var(--surface); stroke-width: 11; opacity: 0.85; }
.g-katok .tip .line { stroke: var(--accent); stroke-width: 4.5; }
@keyframes ktTip {
  0% { transform: translateX(-30px); opacity: 0; }
  25% { opacity: 1; }
  75% { opacity: 1; }
  100% { transform: translateX(30px); opacity: 0; }
}

@media (max-height: 640px) {
  .g-katok .strip { height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .g-katok .note { animation-duration: 0.01s; }
  .g-katok .tip svg { animation: none; opacity: 0.9; }
  .g-katok .btn { transition: none; }
}