/* === P1 Wallpaper + Petals (2026-05-10) ====================================
 * Wallpaper: per-chapter background image set via --chess-wallpaper-url
 * (managed by chess-wallpaper.js). Sits behind everything but content stays
 * readable thanks to frosted-glass overlay layer.
 *
 * Petals: 6 falling petals at any time, each with independent fall/swing/
 * rotate animations. Random variants from soft-petal-01..05.png.
 */

/* --- Wallpaper layer --- */
body[data-page="chess"] {
  /* Base = pink gradient fallback for first paint before --chess-wallpaper-url
     is set by JS (chess-wallpaper.js applies on init). After JS, the var is
     filled in and the gradient is hidden by the wallpaper underneath. */
  background:
    var(--chess-wallpaper-url, none),
    linear-gradient(180deg, #ffe7f2 0%, #fff6fa 60%, #ffe0eb 100%);
  background-size: cover, cover;
  background-position: center top, center;
  background-attachment: fixed, fixed;
  background-repeat: no-repeat, no-repeat;
}

/* Phase 17: Frosted-glass overlay strengthened на mobile so wallpaper не
   competes с board cells (audit found wallpaper+paw decorations doubled
   visual noise). Bumped opacity 0.45 → 0.62 на mobile. */
body[data-page="chess"]::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  background: linear-gradient(180deg,
    rgba(255, 246, 250, 0.45) 0%,
    rgba(255, 246, 250, 0.30) 50%,
    rgba(255, 240, 248, 0.35) 100%);
  pointer-events: none;
}
@media (max-width: 760px) {
  body[data-page="chess"]::before {
    background: linear-gradient(180deg,
      rgba(255, 246, 250, 0.62) 0%,
      rgba(255, 246, 250, 0.48) 50%,
      rgba(255, 240, 248, 0.55) 100%);
  }
}

/* Bug-fix 2026-05-10: previously applied `position: relative; z-index: 1`
   to body > <modal> children to lift them above the frosted overlay. That
   broke modals' base `position: fixed; inset: 0` rule — modals stopped
   covering the screen and rendered as inline blocks at the bottom of the
   page (visible alongside the board + bottom sheet). Removed entirely:
   modal base styles already use z-index 60-150 which naturally wins over
   the wallpaper layer (z:0) and petals layer (z:2). Only the page main
   content needs lifting above the overlay. */
body[data-page="chess"] > .site-header,
body[data-page="chess"] > main {
  position: relative;
  z-index: 1;
}

/* --- Petals layer --- */
.chess-petals-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2; /* above wallpaper + overlay, below all UI */
}
.chess-petals-layer.is-reduced-motion {
  /* On reduced-motion preference, petals visible but static (no animation) */
  opacity: 0.3;
}

.chess-petal {
  position: absolute;
  top: -10%;
  width: 28px;
  height: 28px;
  background-image: var(--petal-img);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: var(--petal-opacity, 0.85);
  transform: scale(var(--petal-scale, 1));
  filter: drop-shadow(0 2px 4px rgba(216, 24, 121, 0.12));
  will-change: transform, top;
  /* Combined animation: fall (top), swing (translateX), rotate */
  animation:
    chess-petal-fall var(--fall-dur, 16s) linear infinite,
    chess-petal-swing var(--swing-dur, 4s) ease-in-out infinite alternate,
    chess-petal-rotate var(--rotate-dur, 10s) linear infinite;
  animation-delay:
    var(--fall-delay, 0s),
    var(--swing-delay, 0s),
    var(--rotate-delay, 0s);
}

@keyframes chess-petal-fall {
  from { top: -10%; opacity: 0; }
  10%  { opacity: var(--petal-opacity, 0.85); }
  90%  { opacity: var(--petal-opacity, 0.85); }
  to   { top: 110%; opacity: 0; }
}

/* Pendulum sway — translateX swings left↔right. Combined with rotate via
   CSS rotate property (separate from transform) so they don't conflict. */
@keyframes chess-petal-swing {
  from { transform: translateX(calc(var(--swing-amp, 22px) * -1)) scale(var(--petal-scale, 1)); }
  to   { transform: translateX(var(--swing-amp, 22px)) scale(var(--petal-scale, 1)); }
}

@keyframes chess-petal-rotate {
  from { rotate: var(--rotate-from, 0deg); }
  to   { rotate: var(--rotate-to, 360deg); }
}

@media (prefers-reduced-motion: reduce) {
  .chess-petal {
    animation: none;
    top: 50%;
    opacity: 0.3;
  }
}

/* On very small viewports, fewer/smaller petals so they don't crowd UI */
@media (max-width: 380px) {
  .chess-petal {
    width: 22px;
    height: 22px;
  }
}

/* P1.11 + Phase 5 boss visual identity — strengthened specificity using
   :is() so override beats any later player-row rules. Cozy "warm" tint
   uses rose-500 + gold-300 mixture (per meta-audit risk hotspot — avoid
   pure red which would break "cozy not casino" tone). */
body[data-chess-match-mode="boss"] .player-row.player-row--top {
  position: relative;
  background: linear-gradient(135deg,
    rgba(255, 232, 222, .98),
    rgba(255, 195, 165, .94)) !important;
  border: 1.5px solid rgba(216, 80, 40, .55) !important;
  box-shadow:
    0 6px 18px rgba(216, 80, 40, .26),
    inset 0 1px 0 rgba(255, 255, 255, .95),
    inset 0 0 0 1px rgba(255, 200, 80, .42) !important;
  animation: chess-boss-row-pulse 2.2s ease-in-out infinite;
}
@keyframes chess-boss-row-pulse {
  0%, 100% { box-shadow: 0 6px 18px rgba(216, 80, 40, .26), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 1px rgba(255, 200, 80, .42); }
  50%      { box-shadow: 0 8px 22px rgba(216, 80, 40, .42), inset 0 1px 0 rgba(255, 255, 255, .95), inset 0 0 0 2px rgba(255, 200, 80, .65); }
}
body[data-chess-match-mode="boss"] .player-row.player-row--top::before {
  content: "👑";
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 20px;
  filter: drop-shadow(0 2px 6px rgba(216, 80, 40, .55));
  z-index: 2;
  pointer-events: none;
}
body[data-chess-match-mode="boss"] .player-row.player-row--top .player-row-name {
  color: #6e2010 !important;
  font-weight: 800;
}

/* Subtle warm aura around board for boss matches */
body[data-chess-match-mode="boss"] .board-shell {
  filter: drop-shadow(0 0 18px rgba(255, 130, 80, .22));
}

@media (prefers-reduced-motion: reduce) {
  body[data-chess-match-mode="boss"] .player-row.player-row--top { animation: none; }
}

/* Pulse the boss flag to draw attention initially */
body[data-chess-match-mode="boss"] .chess-board-boss-flag {
  animation: chess-boss-flag-pulse 2.4s ease-in-out 0s 2;
}
@keyframes chess-boss-flag-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* === P2.1 Prize chips celebration ============================================
 * After a win, ~10 chips fly from center of result-card up in arc trajectories
 * toward the header balance pill. Pulse pill on arrival. Pure visual —
 * actual balance update already happened via syncChessUIAfterEconomy.
 */
.chess-prize-chips-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 200;
}

.chess-prize-chip {
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ffe48a, #d49620 70%, #a26b10 100%);
  box-shadow:
    0 2px 6px rgba(50, 20, 0, .42),
    inset 0 1px 0 rgba(255, 255, 255, .8);
  /* Position via custom props — start, arc midpoint, end */
  transform: translate(var(--start-x), var(--start-y));
  animation: chess-prize-chip-fly 950ms cubic-bezier(.45, 0, .55, 1) forwards;
  animation-delay: var(--delay, 0ms);
  opacity: 0;
}

@keyframes chess-prize-chip-fly {
  0% {
    opacity: 0;
    transform: translate(var(--start-x), var(--start-y)) scale(.4) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translate(var(--start-x), var(--start-y)) scale(1) rotate(20deg);
  }
  55% {
    opacity: 1;
    /* Arc midpoint — chip rises high in middle of trajectory */
    transform: translate(var(--arc-x), var(--arc-y)) scale(1) rotate(180deg);
  }
  85% {
    opacity: 1;
    transform: translate(var(--end-x), var(--end-y)) scale(.85) rotate(320deg);
  }
  100% {
    opacity: 0;
    transform: translate(var(--end-x), var(--end-y)) scale(.4) rotate(360deg);
  }
}

/* Profile pill pulse when chips arrive */
.chess-profile-pill.is-prize-arriving {
  animation: chess-profile-prize-arriving .7s cubic-bezier(.4, 1.6, .5, 1) both;
}
@keyframes chess-profile-prize-arriving {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.2); box-shadow: 0 0 0 8px rgba(255, 200, 80, .42), 0 8px 22px rgba(232, 41, 143, .32); }
  100% { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .chess-prize-chip { animation: none; opacity: 0; }
  .chess-profile-pill.is-prize-arriving { animation: none; }
}

/* === P2.6 Character speech bubble ============================================
 * Lightweight contextual voice. Appears anchored above self player-row,
 * fades after 3s. One bubble at a time (replaced on new trigger).
 */
.chess-voice-bubble {
  position: fixed;
  transform: translate(-50%, -100%) scale(.86);
  opacity: 0;
  pointer-events: none;
  z-index: 90;
  padding: 8px 14px;
  border-radius: 16px 16px 16px 4px;
  background: linear-gradient(135deg, #fff7ee, #ffe4f0);
  font-family: var(--display, inherit);
  font-size: 13px;
  font-weight: 700;
  color: var(--plum-800);
  white-space: nowrap;
  box-shadow:
    0 10px 24px rgba(216, 24, 121, .22),
    inset 0 1px 0 rgba(255, 255, 255, .9),
    inset 0 0 0 1px rgba(232, 41, 143, .18);
  transition: opacity .25s ease, transform .25s cubic-bezier(.4, 1.6, .5, 1);
}
.chess-voice-bubble::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: 12px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg, #fff7ee, #ffe4f0);
  transform: rotate(45deg);
  box-shadow: inset 0 0 0 1px rgba(232, 41, 143, .12);
}
.chess-voice-bubble.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .chess-voice-bubble { transition: opacity .15s; transform: translate(-50%, -100%) scale(1); }
}

/* === P3.1 Sheet section accordions ==========================================
 * Native <details>/<summary> pattern with cozy styling. Each section
 * is collapsed by default except "Управление партией" which is open
 * (most-used actions during a match).
 */
.chess-sheet-section {
  margin: 8px 0;
  border-radius: 14px;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 200, 224, .42);
  overflow: hidden;
  transition: background .25s ease;
}
.chess-sheet-section[open] {
  background: rgba(255, 255, 255, .82);
}

.chess-sheet-section > summary {
  display: grid;
  grid-template-columns: 22px 1fr 22px;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  font-family: var(--display, inherit);
  font-size: .92rem;
  font-weight: 800;
  color: var(--plum-800);
  list-style: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease;
}
.chess-sheet-section > summary::-webkit-details-marker { display: none; }
.chess-sheet-section > summary::marker { display: none; }
.chess-sheet-section > summary:hover { background: rgba(255, 232, 244, .35); }

.chess-sheet-section > summary > i:first-child {
  font-size: 1.05rem;
  color: var(--rose-600);
}

.chess-sheet-chevron {
  font-size: 1rem;
  color: var(--plum-700);
  transition: transform .25s ease;
  justify-self: end;
}
.chess-sheet-section[open] .chess-sheet-chevron {
  transform: rotate(180deg);
}

/* Content area — small inset padding so sections feel grouped */
.chess-sheet-section > *:not(summary) {
  padding: 0 12px 12px;
}

/* Override: ensure inner cards don't get double-margins */
.chess-sheet-section .chess-game-actions,
.chess-sheet-section .chess-game-settings,
.chess-sheet-section .chess-game-difficulty,
.chess-sheet-section .chess-stats-panel,
.chess-sheet-section .chess-records-panel {
  margin-top: 0;
}

/* Phase 12: collapse-all toggle */
.chess-sheet-collapse-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border-radius: 999px;
  font-family: inherit;
  font-size: .78rem;
  font-weight: 700;
  color: var(--plum-700);
  cursor: pointer;
  margin: 6px 0 0 auto;
  border: 0;
}
.chess-sheet-collapse-toggle i {
  font-size: 1rem;
  color: var(--rose-600);
}

@media (prefers-reduced-motion: reduce) {
  .chess-sheet-chevron { transition: none; }
  .chess-sheet-section { transition: none; }
}

/* When sheet is open or a modal is overlaying, dim petals so they don't
   compete for attention. Modal backdrops already darken the page; petals
   on top would feel busy. */
body.chess-sheet-open .chess-petals-layer,
body:has([data-chess-stake-ceremony]:not([hidden])) .chess-petals-layer,
body:has([data-chess-result]:not([hidden])) .chess-petals-layer,
body:has([data-chess-tutor]:not([hidden])) .chess-petals-layer {
  opacity: 0.25;
  transition: opacity .35s ease;
}