/* ── Interactions: press depth, ripples, sparkles, confetti, key hints ──
   Loaded after the other stylesheets so these win. */

/* Ripple */
.fx-ripple-host { position: relative; overflow: hidden; isolation: isolate; }
.fx-ripple {
  position: absolute;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.18;
  transform: scale(0);
  animation: fxRipple 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  pointer-events: none;
  z-index: -1;
}
@keyframes fxRipple { to { transform: scale(1); opacity: 0; } }

/* Sparkles + confetti */
.fx-spark {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 10000;
  animation: fxSpark 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
@keyframes fxSpark {
  from { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  to { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(0.2); opacity: 0; }
}
.fx-confetti { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 10001; }

/* ── "Pushable" primary buttons: a solid bottom edge that sinks when pressed ── */
.next-btn,
.restart-btn,
.dino-start-btn,
.speedrun-start-btn,
.name-submit-btn,
.chess-btn.primary,
.live-primary {
  box-shadow: 0 4px 0 var(--blue-dark), 0 8px 18px rgba(0, 0, 0, 0.12) !important;
  transform: translateY(0);
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), background 0.18s, filter 0.18s !important;
}
.next-btn:hover,
.restart-btn:hover,
.dino-start-btn:hover,
.speedrun-start-btn:hover,
.chess-btn.primary:hover,
.live-primary:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 0 var(--blue-dark), 0 12px 24px rgba(0, 0, 0, 0.16) !important;
  filter: brightness(1.06);
}
.next-btn:active,
.restart-btn:active,
.dino-start-btn:active,
.speedrun-start-btn:active,
.name-submit-btn:active,
.chess-btn.primary:active,
.live-primary:active {
  transform: translateY(4px) !important;
  box-shadow: 0 0 0 var(--blue-dark), 0 2px 6px rgba(0, 0, 0, 0.1) !important;
  transition-duration: 0.05s !important;
}

/* Answer buttons: lift on hover, sink on press, bounce on result */
.choice-btn, .pos-choice-btn, .synant-choice-btn, .sr-choice, .tower-choice-btn, .dino-quiz-choice, .jq-choice {
  box-shadow: 0 3px 0 var(--card-border);
  transition: transform 0.14s var(--ease-out), box-shadow 0.14s var(--ease-out), background 0.2s, border-color 0.2s, color 0.2s !important;
}
.choice-btn:hover:not(:disabled), .pos-choice-btn:hover:not(:disabled), .synant-choice-btn:hover:not(:disabled),
.sr-choice:hover:not(:disabled), .tower-choice-btn:hover:not(:disabled), .dino-quiz-choice:hover:not(:disabled), .jq-choice:hover:not(:disabled) {
  transform: translateY(-2px) !important;
  box-shadow: 0 5px 0 var(--blue), 0 8px 18px rgba(26, 77, 232, 0.12);
  border-color: var(--blue);
}
.choice-btn:active:not(:disabled), .pos-choice-btn:active:not(:disabled), .synant-choice-btn:active:not(:disabled),
.sr-choice:active:not(:disabled), .tower-choice-btn:active:not(:disabled), .dino-quiz-choice:active:not(:disabled), .jq-choice:active:not(:disabled) {
  transform: translateY(3px) !important;
  box-shadow: 0 0 0 var(--blue);
  transition-duration: 0.05s !important;
}
.choice-btn.correct, .pos-choice-btn.correct, .synant-choice-btn.correct, .sr-choice.correct,
.tower-choice-btn.correct, .dino-quiz-choice.correct, .jq-choice.correct {
  box-shadow: 0 3px 0 #15803d, 0 0 0 4px rgba(34, 197, 94, 0.18) !important;
  animation: fxCorrect 0.5s var(--ease-spring) !important;
}
.choice-btn.wrong, .pos-choice-btn.wrong, .synant-choice-btn.wrong, .sr-choice.wrong,
.tower-choice-btn.wrong, .dino-quiz-choice.wrong, .jq-choice.wrong {
  box-shadow: 0 3px 0 #b91c1c !important;
  animation: fxWrong 0.42s cubic-bezier(0.36, 0.07, 0.19, 0.97) !important;
}
@keyframes fxCorrect { 0% { transform: scale(1); } 40% { transform: scale(1.04); } 100% { transform: scale(1); } }
@keyframes fxWrong {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(4px); }
  30%, 50%, 70% { transform: translateX(-7px); }
  40%, 60% { transform: translateX(7px); }
}

/* Number-key hints on answer buttons (hidden on touch screens) */
.choice-key {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  margin-right: 10px;
  padding: 0 5px;
  border-radius: 6px;
  border: 1px solid var(--card-border);
  border-bottom-width: 2px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  color: var(--text-secondary);
  background: var(--body-bg);
  vertical-align: middle;
  flex-shrink: 0;
}
.correct .choice-key, .wrong .choice-key { background: transparent; color: inherit; border-color: currentColor; opacity: 0.7; }
@media (hover: none) { .choice-key { display: none; } }

/* Game picker cards: tilt + glow */
.game-hub-card { transition: transform 0.2s var(--ease-spring), box-shadow 0.2s, border-color 0.2s !important; }
@media (hover: hover) {
  .game-hub-card:hover .game-hub-emoji { transform: scale(1.18) rotate(-6deg); }
}
.game-hub-emoji { display: inline-block; transition: transform 0.25s var(--ease-spring); }
.game-hub-card:active { transform: translateY(3px) scale(0.97) !important; }

/* Unit cards on home */
.unit-card { transition: transform 0.25s var(--ease-spring), box-shadow 0.25s, border-color 0.25s !important; }
@media (hover: hover) {
  .unit-card:hover { transform: translateY(-4px) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35) !important; }
  .unit-card:hover .unit-emoji { transform: scale(1.12) rotate(-5deg); }
}
.unit-emoji { display: inline-block; transition: transform 0.3s var(--ease-spring); }
.unit-card:active { transform: scale(0.98) !important; }

/* Small home / picker buttons */
.home-lb-btn, .diff-btn, .lb-switch-btn, .subject-btn, .fc-nav-btn, .small-btn, .leaderboard-btn {
  transition: transform 0.14s var(--ease-spring), box-shadow 0.14s, background 0.2s, color 0.2s !important;
}
.home-lb-btn:active, .diff-btn:active, .lb-switch-btn:active, .subject-btn:active, .fc-nav-btn:active, .small-btn:active, .leaderboard-btn:active {
  transform: scale(0.94) !important;
}

/* Sound toggle */
.sound-toggle {
  border: none;
  background: transparent;
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 8px;
  line-height: 1;
  transition: transform 0.15s var(--ease-spring), background 0.15s;
}
.sound-toggle:hover { background: var(--card-bg); }
.sound-toggle:active { transform: scale(0.85); }

/* Score "bump" when it changes */
.fx-bump { animation: fxBump 0.35s var(--ease-spring); display: inline-block; }
@keyframes fxBump { 50% { transform: scale(1.35); } }

@media (prefers-reduced-motion: reduce) {
  .fx-ripple, .fx-spark { display: none; }
  .choice-btn.correct, .choice-btn.wrong, .sr-choice.correct, .sr-choice.wrong { animation: none !important; }
}

/* ── Button system: the main action buttons share one height, shape and font ── */
.next-btn, .restart-btn, .dino-start-btn, .speedrun-start-btn, .leaderboard-btn, .name-submit-btn, .chess-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 46px; padding: 0 24px; border-radius: 14px; box-sizing: border-box;
  font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: 0.02em; line-height: 1.2;
  text-align: center; vertical-align: middle; cursor: pointer;
}
.next-btn { display: flex; width: 100%; }
.restart-btn { border: none; background: var(--blue); color: #fff; animation: fadeUp 0.4s var(--ease-out) 0.3s both; }
.restart-btn:hover { background: var(--blue-dark); }
.name-submit-btn { min-height: 44px; padding: 0 18px; border-radius: 12px; }
button:disabled.next-btn, button:disabled.restart-btn, button:disabled.dino-start-btn { opacity: 0.55; cursor: not-allowed; filter: none; }

/* Secondary buttons: outlined card with the same pushable edge */
.leaderboard-btn {
  margin: 0; border: 1.5px solid var(--card-border); background: var(--card-bg); color: var(--text);
  box-shadow: 0 4px 0 var(--card-border) !important;
  transition: transform 0.12s var(--ease-out), box-shadow 0.12s var(--ease-out), background 0.18s !important;
}
.leaderboard-btn:hover { transform: translateY(-2px) !important; box-shadow: 0 6px 0 var(--card-border) !important; background: var(--card-bg); filter: brightness(1.03); }
.leaderboard-btn:active { transform: translateY(4px) !important; box-shadow: 0 0 0 var(--card-border) !important; transition-duration: 0.05s !important; }

/* Rows of buttons: equal heights, even spacing, wrap neatly on phones */
.game-btn-row { display: flex; align-items: stretch; justify-content: center; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.game-btn-row > button { margin: 0 !important; min-width: 150px; }
.name-submit-row { align-items: stretch; }
.name-submit-row .name-input { min-height: 44px; border-radius: 12px; }
@media (max-width: 480px) {
  .game-btn-row > button { flex: 1 1 140px; }
}

/* Name / code boxes: the button is as tall as the text box beside it */
.name-submit-row > button { height: auto !important; min-height: 44px !important; align-self: stretch; }

/* Game header: "← Games" and the sound button are the same height */
.game-chrome-back { display: inline-flex; align-items: center; min-height: 34px; box-sizing: border-box; }
#game-chrome .sound-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 34px; height: 34px; padding: 0; font-size: 15px; box-sizing: border-box;
  border: 1px solid var(--card-border); background: var(--card-bg); border-radius: 10px;
}
.name-submit-row { flex-wrap: nowrap !important; }
.name-submit-row .name-input { min-width: 0; }

/* ── Line icons (js/icons.js) ── */
.ico { width: 1.15em; height: 1.15em; vertical-align: -0.22em; flex-shrink: 0; }
button > .ico:first-child { margin-right: 0.4em; }
:is(.theme-toggle, .sound-toggle, .chess-nav-btn:not(.undo), .t-icon-btn) > .ico { margin-right: 0; }
:is(.next-btn, .restart-btn, .dino-start-btn, .leaderboard-btn, .name-submit-btn, .chess-btn, .live-ctrl) > .ico { margin-right: 0; }
.modal-header h2 .ico, .name-submit-title .ico { color: var(--blue); }
.theme-toggle .ico, .sound-toggle .ico { width: 18px; height: 18px; vertical-align: middle; }
.chess-nav-btn .ico { width: 18px; height: 18px; vertical-align: middle; }
.chess-nav-btn.undo .ico { margin-right: 0.3em; }
.jeopardy-cell .check-mark .ico { width: 22px; height: 22px; stroke-width: 3; }
.jeopardy-cell .check-mark.right { color: #16a34a; }
.jeopardy-cell .check-mark.wrong { color: #dc2626; }

/* Drawn badge on end screens / empty states (instead of a big emoji) */
.icon-badge {
  width: 76px; height: 76px; margin: 0 auto 14px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: #fff; background: var(--blue); box-shadow: 0 6px 0 var(--blue-dark), 0 14px 30px rgba(0, 0, 0, 0.18);
  animation: emojiDrop 0.6s var(--ease-spring) both;
}
.icon-badge .ico { width: 38px; height: 38px; }
.icon-badge.muted { color: var(--text-secondary); background: var(--card-bg); border: 1.5px solid var(--card-border); box-shadow: 0 6px 0 var(--card-border); }

/* Drawn logos */
.logo-book .logo-book-svg { width: 96px; height: 72px; display: block; margin: 0 auto; }
.logo-book.logo-icon { color: #c4b5fd; }
.logo-book.logo-icon .ico { width: 64px; height: 64px; }
@media (max-width: 600px) { .logo-book .logo-book-svg { width: 64px; height: 48px; } .logo-book.logo-icon .ico { width: 44px; height: 44px; } }

/* ── Clean tiles for the game list (same look as the dashboard's stat tiles) ── */
.game-hub-card {
  text-align: left; text-transform: none; letter-spacing: 0;
  align-items: flex-start; justify-content: flex-end; gap: 3px;
  min-height: 92px; padding: 14px 16px;
  border: 1px solid var(--card-border); border-radius: 18px; background: var(--card-bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: transform 0.18s var(--ease-out), border-color 0.18s, box-shadow 0.18s, background 0.18s;
}
.game-hub-card:hover {
  transform: translateY(-2px); border-color: var(--blue); background: var(--card-bg);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--blue);
}
.game-hub-card:active { transform: translateY(0) scale(0.98); box-shadow: none; }
.game-hub-title { font-family: var(--font-serif); font-size: 18px; font-weight: 700; letter-spacing: 0; color: var(--text); }
.game-hub-desc { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0; }
[data-mode="dark"] .game-hub-card { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.1); }
[data-mode="dark"] .game-hub-card:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--blue); }
[data-mode="dark"] .game-hub-title { color: #f0ece6; }

/* ── Squircle (continuous, Apple-style) corners on cards, buttons, inputs and panels ──
   Browsers without corner-shape keep ordinary rounded corners. Circles and pill chips are left
   out on purpose: a squircle would turn a circle into a rounded square. */
@supports (corner-shape: squircle) {
  .unit-card, .wotd-inner, .next-test, #home-announcement:not(.collapsed), .home-lb-btn, .archives-back-btn,
  .game-hub-card, .word-display-card, .card, .choice-btn, .pos-choice-btn, .synant-choice-btn, .sr-choice,
  .tower-choice-btn, .dino-quiz-choice, .jq-choice, .dino-quiz-card, .sr-card, .q-spell-input,
  .next-btn, .restart-btn, .dino-start-btn, .speedrun-start-btn, .leaderboard-btn, .name-submit-btn, .name-input,
  .name-submit-box, .study-picker, .modal, .lb-row, .lb-unit-select, .settings-section, .timed-out-banner,
  .chess-board, .chess-q, .chess-hint, .chess-end, .chess-nav-btn, .chess-moves, .chess-mode-card,
  .live-tile, .live-letter, .live-code-big span, .live-ranking li, .live-rank-big, .live-ctrl,
  .jeopardy-cell, .jeopardy-modal, .match-tile, .mem-face, .speedrun-info-card, .dino-how-card, .dino-canvas, .tower-canvas,
  .t-card, .t-btn, .t-select, .t-input, .t-display, .t-list, .sh-tile, .sh-next, .u-row, .tip-card {
    corner-shape: squircle;
  }
}
@media (max-width: 560px) { .game-hub-card { min-height: 78px !important; padding: 12px 14px !important; } .game-hub-title { font-size: 17px; } }

/* Drawn game icons on the game list */
.game-hub-card .game-hub-icon { width: 26px; height: 26px; color: var(--blue); margin-bottom: auto; transition: transform 0.25s var(--ease-spring); }
.game-hub-card:hover .game-hub-icon { transform: translateY(-1px) scale(1.08); }
[data-mode="dark"] .game-hub-card .game-hub-icon { color: color-mix(in srgb, var(--blue) 70%, #fff); }
.game-hub-card { min-height: 112px; }
@media (max-width: 560px) { .game-hub-card { min-height: 100px !important; } .game-hub-card .game-hub-icon { width: 22px; height: 22px; } }

/* Difficulty icons */
.diff-btn { display: inline-flex; align-items: center; }
.diff-btn .ico { width: 15px; height: 15px; margin-right: 6px; }
.chrome-diff-icon { width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.settings-row .ico { width: 15px; height: 15px; vertical-align: -3px; color: var(--blue); }