/* =============================================================================
   ZHAIMER — Turn guidance & card interaction animations (Stage A)
   Purely additive: new classes only, nothing here changes existing markup
   structure, game rules, or state. Safe alongside style.css/tutorial.css.
   ============================================================================= */

/* ---------- "Your Turn" banner ---------- */
.turn-banner{
  display:flex; align-items:center; justify-content:center; gap:8px;
  margin:0 0 10px; padding:8px 14px;
  border-radius:8px;
  background:linear-gradient(135deg, rgba(63,199,182,0.18), rgba(201,162,39,0.14));
  border:1px solid rgba(63,199,182,0.4);
  color:var(--brass-soft);
  font-weight:700; font-size:13.5px; letter-spacing:.5px;
  animation:turnBannerIn .45s ease, turnBannerFade .5s ease 1.6s forwards;
}
@keyframes turnBannerIn{
  from{ opacity:0; transform:translateY(-6px) scale(0.96); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes turnBannerFade{
  from{ opacity:1; }
  to{ opacity:0; }
}

/* ---------- Card lift on selection ---------- */
.card.selectable,
.card.own-slot-target{
  transition:transform .15s ease, box-shadow .15s ease;
}
.card.selectable:hover,
.card.own-slot-target:hover{
  transform:translateY(-5px) scale(1.04);
  box-shadow:0 8px 16px rgba(0,0,0,0.4);
}
.card.selectable{
  outline:2px solid var(--teal); outline-offset:2px;
  transform:translateY(-3px);
}

/* ---------- Drawn card slides in from the deck ---------- */
.card-deal-in{ animation:cardDealIn .35s ease; }
@keyframes cardDealIn{
  from{ opacity:0; transform:translateY(-14px) scale(0.9); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}

/* ---------- Queen reveal: eye effect ---------- */
.queen-eye-wrap{
  display:flex; align-items:center; justify-content:center; gap:10px; margin:6px 0 10px;
}
.queen-eye-badge{
  font-size:26px;
  animation:queenEyeOpen .5s ease;
}
@keyframes queenEyeOpen{
  0%{ transform:scaleY(0.1); opacity:0; }
  60%{ transform:scaleY(1.15); opacity:1; }
  100%{ transform:scaleY(1); opacity:1; }
}

/* ---------- Jack swap: crossing arrows ---------- */
.jack-arrows-wrap{
  display:flex; align-items:center; justify-content:center; gap:6px; margin:8px 0;
  font-size:20px; color:var(--teal);
}
.jack-arrows-wrap .arrow-cross{
  display:inline-block;
  animation:jackArrowsCross .6s ease;
}
@keyframes jackArrowsCross{
  0%{ opacity:0; transform:scale(0.6) rotate(-10deg); }
  100%{ opacity:1; transform:scale(1) rotate(0deg); }
}

/* ---------- King: double-card deal-in, staggered ---------- */
.king-double-deal > div:nth-child(1) .card{ animation:cardDealIn .35s ease; }
.king-double-deal > div:nth-child(2) .card{ animation:cardDealIn .35s ease .12s backwards; }

/* ---------- Burn feedback: gold particles (success) / shake (fail) ---------- */
.actions.burn-fx-success{ position:relative; }
.burn-particle{
  position:absolute; top:50%; left:50%; width:5px; height:5px; border-radius:50%;
  background:var(--brass-soft); pointer-events:none;
  animation:burnParticleFly .8s ease-out forwards;
}
@keyframes burnParticleFly{
  0%{ opacity:1; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0; transform:translate(calc(-50% + var(--dx,20px)), calc(-50% + var(--dy,-24px))) scale(0.3); }
}
.actions.burn-fx-fail{
  animation:burnShake .35s ease;
}
@keyframes burnShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
}

@media (prefers-reduced-motion: reduce){
  .turn-banner{ animation:none; opacity:1; }
  .card.selectable:hover, .card.own-slot-target:hover{ transform:none; }
  .card.selectable{ transform:none; }
  .card-deal-in{ animation:none; }
  .queen-eye-badge{ animation:none; }
  .jack-arrows-wrap .arrow-cross{ animation:none; }
  .king-double-deal > div .card{ animation:none; }
  .burn-particle{ display:none; }
  .actions.burn-fx-fail{ animation:none; }
}

/* ---------- Post-match results (Stage D): match summary panel ---------- */
.match-stats-panel{
  margin-top:16px; width:100%; max-width:360px;
  border:1px solid var(--line); border-radius:12px;
  background:linear-gradient(165deg, var(--panel2) 0%, var(--panel) 70%);
  padding:14px;
}
.match-stats-title{
  font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--muted); margin-bottom:10px;
}
.match-stats-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px;
}
.match-stat{ text-align:center; }
.match-stat .num{ font-size:20px; font-weight:800; color:var(--brass-soft); }
.match-stat .label{ font-size:10px; color:var(--muted); margin-top:2px; letter-spacing:.3px; }
.match-stats-note{
  margin-top:10px; padding-top:8px; border-top:1px solid var(--line);
  font-size:12px; color:var(--teal); text-align:center;
}

/* ---------- AI personalities (Stage C): opponent preview cards ---------- */
.ai-persona-list{
  display:flex; flex-wrap:wrap; gap:8px;
}
.ai-persona-card{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  gap:3px; padding:10px 12px; min-width:96px; flex:1;
  border-radius:10px; border:1px solid var(--line);
  background:linear-gradient(165deg, var(--panel2) 0%, var(--panel) 70%);
  transition:transform .15s ease, border-color .15s ease;
}
.ai-persona-card:hover{ transform:translateY(-2px); border-color:var(--brass-soft); }
.ai-persona-avatar{ font-size:22px; line-height:1; }
.ai-persona-name{ font-size:12px; font-weight:700; color:var(--cream); }
.ai-persona-desc{ font-size:10.5px; color:var(--muted); line-height:1.35; }

/* ---------- Settings (Stage E2): manual reduce-motion toggle ---------- */
/* Mirrors the various @media(prefers-reduced-motion) blocks above, but
   triggered by a user preference stored in localStorage rather than the
   OS setting — see toggleMotionReduced() in game.js. */
html.reduce-motion-pref *,
html.reduce-motion-pref *::before,
html.reduce-motion-pref *::after{
  animation-duration:0.001ms !important;
  animation-iteration-count:1 !important;
  transition-duration:0.001ms !important;
}

/* ---------- Settings screen toggle rows ---------- */
.settings-row{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 4px; border-bottom:1px solid var(--line);
}
.settings-row:last-child{ border-bottom:none; }
.settings-row-label{ font-size:14px; color:var(--cream); }
.settings-row-desc{ font-size:11.5px; color:var(--muted); margin-top:2px; }
.settings-toggle{
  min-width:56px; min-height:32px; border-radius:16px; border:1px solid var(--line);
  background:var(--panel2); position:relative; cursor:pointer; padding:0;
}
.settings-toggle.on{ background:linear-gradient(135deg,#3fc7b6,#1d7f73); border-color:transparent; }
.settings-toggle-knob{
  position:absolute; top:2px; left:2px; width:26px; height:26px; border-radius:50%;
  background:#fff; transition:transform .18s ease;
}
.settings-toggle.on .settings-toggle-knob{ transform:translateX(24px); }
html[dir="rtl"] .settings-toggle.on .settings-toggle-knob{ transform:translateX(-24px); }

/* ---------- Menu reorganization (fix): compact 2-column grid for ---------- */
/* secondary/utility menu items, so the main menu no longer needs scrolling
   to reach the primary actions (Play vs AI, Learn to Play, Practice Mode,
   Daily Challenge) above it. */
.dest-grid-2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:4px;
}
.dest-row-compact{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:4px; text-align:center;
  min-height:64px; padding:10px 6px;
  border-radius:10px; border-style:solid; border-width:1px;
  background:rgba(255,255,255,0.02);
  cursor:pointer; text-decoration:none;
  transition:transform .12s ease, box-shadow .12s ease;
}
.dest-row-compact:hover{ transform:translateY(-2px); }
.dest-row-compact .dest-icon{ font-size:19px; line-height:1; }
.dest-row-compact .dest-label{ font-size:11.5px; font-weight:700; color:var(--cream); line-height:1.25; }
.dest-row-compact[disabled]{ opacity:.45; pointer-events:none; }

/* ---------- Fix: hide static SEO section + footer during active gameplay ---------- */
/* The "About Zhaimer" section and footer in game.html sit right after #app
   in the DOM and were never hidden, so they stayed visible below the game
   at all times — including during actual gameplay — forcing a scroll past
   a fully-playable game. body.page-scroll is already toggled by render():
   present on the landing/menu screen (where this content is useful and
   scrolling is expected), absent during active play (peek, drawing,
   reveal, etc.) where the game should fill the whole viewport. */
body:not(.page-scroll) .game-information,
body:not(.page-scroll) .site-footer{
  display:none;
}

/* ---------- Results screens redesign (Daily Challenge + Game Over) ---------- */
.results-scroll{
  display:flex; flex-direction:column; align-items:center; text-align:center;
  padding-top:10px;
}
.results-hero{
  display:flex; flex-direction:column; align-items:center; gap:6px;
  padding:10px 0 16px; width:100%;
}
.results-icon{
  font-size:34px; line-height:1;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,0.4));
}
.results-heading{
  margin:2px 0 4px; font-size:15px; letter-spacing:1px;
  text-transform:uppercase; color:var(--muted); font-weight:700;
}
.results-score-badge{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  width:118px; height:118px; border-radius:50%; margin:8px 0;
  background:radial-gradient(circle at 50% 35%, var(--panel2) 0%, var(--panel) 75%);
  border:2px solid var(--line);
  box-shadow:0 8px 20px rgba(0,0,0,0.35), inset 0 0 0 1px rgba(255,255,255,0.03);
}
.results-score-badge.is-best{
  border-color:var(--brass-soft);
  box-shadow:0 0 0 4px color-mix(in srgb, var(--brass-soft) 18%, transparent), 0 8px 20px rgba(0,0,0,0.35);
}
.results-score-num{ font-family:Georgia,serif; font-size:38px; font-weight:800; color:var(--brass-soft); line-height:1; }
.results-score-unit{ font-size:11px; color:var(--muted); margin-top:2px; letter-spacing:1px; text-transform:uppercase; }
.results-best-tag{
  font-size:12.5px; color:var(--teal); font-weight:700; margin-top:2px;
}
.results-winner-name{
  font-family:Georgia,serif; font-size:26px; font-weight:800; color:var(--brass-soft); margin-top:4px;
}
.results-winner-sub{ font-size:13px; color:var(--muted); }
.results-note{
  color:var(--muted); font-size:11.5px; margin-top:12px; max-width:300px; line-height:1.5;
}
.final-scores-list{
  width:100%; max-width:340px; margin-top:6px;
  border:1px solid var(--line); border-radius:12px; overflow:hidden;
}
.final-score-row{
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 14px; font-size:13.5px; color:var(--cream);
  background:rgba(255,255,255,0.015);
  border-bottom:1px solid var(--line);
}
.final-score-row:last-child{ border-bottom:none; }
.final-score-row.is-winner{
  background:linear-gradient(90deg, color-mix(in srgb, var(--brass-soft) 10%, transparent), transparent);
  color:var(--brass-soft); font-weight:700;
}
.eliminated-tag{ color:var(--crimson); font-size:11px; font-weight:400; }

/* ---------- Card flip animation on round reveal ---------- */
.card.card-flip-reveal{
  animation: cardFlipReveal .5s ease both;
  transform-style: preserve-3d;
}
@keyframes cardFlipReveal{
  0%{ transform:rotateY(180deg) scale(0.92); opacity:.4; }
  55%{ transform:rotateY(0deg) scale(1.04); opacity:1; }
  100%{ transform:rotateY(0deg) scale(1); opacity:1; }
}
@media (prefers-reduced-motion: reduce){
  .card.card-flip-reveal{ animation:none; }
}
html.reduce-motion-pref .card.card-flip-reveal{ animation:none; }

/* ---------- Achievement unlock toast (shown on game-over screen) ---------- */
.achv-toast-group{
  width:100%; max-width:340px; margin:14px auto 0;
  display:flex; flex-direction:column; gap:8px;
}
.achv-toast{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-radius:12px;
  background:linear-gradient(135deg, color-mix(in srgb, var(--brass-soft) 18%, var(--panel2)), var(--panel2));
  border:1px solid var(--brass-soft);
  box-shadow:0 8px 20px rgba(0,0,0,0.3);
  animation:achvToastIn .4s ease both;
}
.achv-toast-icon{ font-size:24px; flex-shrink:0; }
.achv-toast-title{ font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--brass-soft); font-weight:800; }
.achv-toast-name{ font-size:13.5px; color:var(--cream); font-weight:700; margin-top:1px; }
@keyframes achvToastIn{
  0%{ opacity:0; transform:translateY(10px) scale(0.96); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce){ .achv-toast{ animation:none; } }
html.reduce-motion-pref .achv-toast{ animation:none; }

/* ============================================================
   ZHAIMER Phase 3 — Settings additions: volume slider, high contrast
   ============================================================ */
.settings-row-volume{ flex-direction:column; align-items:stretch; }
.settings-volume-slider{
  width:100%; margin-top:8px; -webkit-appearance:none; appearance:none;
  height:6px; border-radius:6px; background:var(--line); outline:none;
}
.settings-volume-slider::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:20px; height:20px; border-radius:50%;
  background:var(--brass); cursor:pointer; border:2px solid var(--ink);
}
.settings-volume-slider::-moz-range-thumb{
  width:20px; height:20px; border-radius:50%; background:var(--brass); cursor:pointer; border:2px solid var(--ink);
}

/* High contrast: stronger borders/text without changing layout or rules */
html.high-contrast-pref{ --line:#ffffff; --muted:#e8e8e8; }
html.high-contrast-pref .card,
html.high-contrast-pref .player-block,
html.high-contrast-pref .setup-card,
html.high-contrast-pref .dest-row,
html.high-contrast-pref button{
  border-width:2px !important;
}
html.high-contrast-pref .card.faceDown,
html.high-contrast-pref .card.faceUp{
  box-shadow:0 0 0 1px #fff, var(--shadow);
}