/* Плавность движений. Подключается последним и только смягчает анимации из styles/arcade/islands.css:
   длиннее, без перелётов и резких кривых. Длительности в JS — объект MOTION в app.js. */

:root {
  --ease-soft: cubic-bezier(.45,.05,.25,1);      /* плавный разгон и торможение */
  --ease-out-soft: cubic-bezier(.22,.61,.36,1);  /* мягкое торможение без «пружины» */
}

/* Переключение вкладок */
.screen { animation-duration:.32s; animation-timing-function:var(--ease-out-soft); }

/* Острова: подсветка, наведение и нажатие — без рывков */
.island-art { transition:filter .35s ease, transform .35s var(--ease-out-soft); }
.cell:active .island-art { transition-duration:.15s; }

/* Кольцо и пыль при приземлении — медленнее и мягче */
.landing-ring { animation-duration:.9s; animation-timing-function:var(--ease-out-soft); border-width:1.5px; }
.landing-mote { animation-duration:.9s; animation-timing-function:var(--ease-out-soft); }

/* Стартовый остров уходит неспешно */
.start-islands { transition:opacity .6s ease, translate .7s var(--ease-soft); }

/* Окно результата: плавное появление фона и карточки, без перелёта */
.overlay.on { animation:overlayIn .35s ease-out both; }
.overlay.on .rcard { animation:resultArriveSoft .6s var(--ease-out-soft) both; }
@keyframes overlayIn { from { opacity:0; } to { opacity:1; } }
@keyframes resultArriveSoft { from { opacity:0; transform:translateY(14px) scale(.97); } to { opacity:1; transform:none; } }

/* Монеты и уведомления */
.gold-coin-anim { animation-timing-function:var(--ease-out-soft); }
.toast { transition:opacity .35s ease, transform .35s var(--ease-out-soft); }

/* Кнопки */
.btn-primary, .btn-cashout, .btn-pay, .chip, .pay-tab { transition-duration:.25s; transition-timing-function:var(--ease-out-soft); }

@media (prefers-reduced-motion: reduce) {
  .overlay.on, .overlay.on .rcard, .landing-ring, .landing-mote { animation:none !important; }
  .start-islands, .island-art { transition:none !important; }
}

/* Облачко тумана под островом при его появлении */
.spawn-mist {
  position:absolute; left:8%; right:8%; bottom:14%; height:34%; z-index:0; pointer-events:none; border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(235,255,245,.55) 0%, rgba(210,245,230,.28) 45%, transparent 72%);
  filter:blur(2px); animation:spawnMist 1s var(--ease-out-soft) forwards;
}
@keyframes spawnMist {
  from { opacity:0; transform:scale(.55,.4); }
  30%  { opacity:1; }
  to   { opacity:0; transform:scale(1.35,1.1); }
}
@media (prefers-reduced-motion: reduce) { .spawn-mist { display:none; } }

/* ── Стартовый остров: чуть крупнее, оба персонажа стоят на мощёной площадке ──
   (не анимация, но держим здесь: файл подключается последним и переопределяет islands.css) */
.start-islands { width:212px; height:150px; }
.field-outer { padding-bottom:156px; }
#humanStart { left:35.8%; top:38%; }     /* герой убегает: левый дальний край, подальше от динозавра */
#dinoStart  { left:61.3%; top:55%; }     /* динозавр — правая передняя часть, целиком на острове */
@media (max-height:650px) {
  .start-islands { width:184px; height:130px; }
  .field-outer { padding-bottom:135px; }
  #humanStart { left:35.9%; top:37.1%; }
  #dinoStart  { top:53.9%; }
}

/* Плавный разворот персонажа при смене направления */
.char img { transition:transform .25s var(--ease-out-soft); }

/* ── Нажатия без вспышек ──
   arcade.css делал все кнопки на 12% ярче при нажатии (мгновенно) — выглядело как вспышка.
   Вместо этого — едва заметное плавное «утапливание». */
button:not(:disabled):active { filter:none; }
button, .chip, .btn-primary, .btn-cashout, .btn-pay, .pay-tab, .seg button, .tabbar button {
  transition:transform .22s var(--ease-out-soft), background-color .3s ease, border-color .3s ease,
             color .3s ease, box-shadow .3s ease, opacity .3s ease, filter .3s ease;
}
.btn-primary:not(:disabled):active, .btn-cashout:not(:disabled):active, .btn-pay:not(:disabled):active,
.chip:not(:disabled):active, .pay-tab:active, .seg button:active, .tabbar button:active {
  transform:scale(.97); filter:brightness(.96);
}

/* На телефоне «наведение» залипает после касания: остров оставался приподнятым и увеличенным.
   Эффекты наведения — только для мыши. */
@media (hover: none) {
  .cell:not(:disabled):hover .island-art { transform:none; }
  #screen-admin .row.clickable:hover { transform:none; }
}

/* Обводка фокуса — мягкая и плавная (видна только при управлении с клавиатуры) */
button:focus-visible, select:focus-visible, .cell:focus-visible {
  outline:2px solid rgba(186,255,220,.45); outline-offset:3px; transition:outline-color .3s ease;
}
input:focus-visible { outline:none; box-shadow:0 0 0 2px rgba(186,255,220,.35); transition:box-shadow .3s ease; }
button:focus:not(:focus-visible) { outline:none; }

/* Слой исчезающих рядов: поверх поля, под персонажами (#human/#dino z-index 21–22) */
.ghost-layer { position:absolute; inset:0; z-index:5; pointer-events:none; }
.ghost-row .cell { pointer-events:none; }
.spawn-mist.despawn { animation-duration:.8s; }