/* =========================================================================
   PUZZLE HEADLINE — what you're facing, above the board
   ========================================================================= */
.puzzle-headline {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 2px;
}

.puzzle-headline-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7px;
}

.puzzle-headline h3 {
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -.6px;
  text-align: center;
}

.puzzle-headline-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }

.puzzle-rating-chip {
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .3px;
  color: #93C5FD;
  background: rgba(59, 130, 246, .16);
  border: 1px solid rgba(59, 130, 246, .3);
}

.puzzle-rating-chip.rating-boss {
  color: #FCA5A5;
  background: rgba(239, 68, 68, .18);
  border-color: rgba(239, 68, 68, .45);
  box-shadow: 0 0 14px rgba(239, 68, 68, .35);
}

/* =========================================================================
   HINT CARD — help you ask for, never help that spoils
   ========================================================================= */
.hint-card .hint-text {
  color: var(--text-main);
  background: rgba(129, 182, 76, .1);
  border-left: 3px solid var(--accent-green);
  border-radius: 0 8px 8px 0;
  padding: 10px 12px;
  margin-bottom: 10px;
  animation: hint-in .3s ease;
}

@keyframes hint-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}

.hint-btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px;
  border-radius: 10px;
  font-size: 15.5px;
  font-weight: 800;
  color: #0f1a05;
  background: linear-gradient(180deg, #a3d968, #81B64C);
  box-shadow: 0 4px 0 var(--accent-green-shadow), 0 0 18px rgba(129, 182, 76, .5);
  animation: hint-glow 2.4s ease-in-out infinite;
  transition: transform .08s, box-shadow .08s;
}

.hint-btn:hover { background: linear-gradient(180deg, #b6e77e, #8fc456); }

.hint-btn:active {
  transform: translateY(3px);
  box-shadow: 0 1px 0 var(--accent-green-shadow), 0 0 12px rgba(129, 182, 76, .5);
}

.hint-bulb { font-size: 19px; filter: drop-shadow(0 0 6px rgba(253, 224, 71, .9)); }

@keyframes hint-glow {
  0%, 100% { box-shadow: 0 4px 0 var(--accent-green-shadow), 0 0 14px rgba(129, 182, 76, .35); }
  50%      { box-shadow: 0 4px 0 var(--accent-green-shadow), 0 0 30px rgba(163, 217, 104, .85); }
}

/* =========================================================================
   BOSS LEVEL — the red-black screen takeover
   ========================================================================= */
.boss-splash {
  position: absolute;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;   /* decoration only — never eats a click */
  overflow: hidden;
  background:
    radial-gradient(ellipse at center, rgba(185, 28, 28, .62), rgba(0, 0, 0, .95) 66%);
  animation: boss-fade 2.1s ease forwards;
}

/* Hazard stripes sliding in from both sides */
.boss-splash::before,
.boss-splash::after {
  content: "";
  position: absolute;
  left: -12%;
  right: -12%;
  height: 24px;
  background: repeating-linear-gradient(45deg, #ef4444 0 15px, #17110f 15px 30px);
  box-shadow: 0 0 22px rgba(239, 68, 68, .6);
}

.boss-splash::before { top: 20%;    animation: boss-bar-in 2.1s ease forwards; }
.boss-splash::after  { bottom: 20%; animation: boss-bar-in 2.1s ease forwards reverse; }

.boss-splash-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: boss-slam 2.1s cubic-bezier(.2, .9, .3, 1) forwards;
}

.boss-skull {
  font-size: 46px;
  filter: drop-shadow(0 0 18px rgba(239, 68, 68, .95));
  animation: boss-skull-pulse .6s ease-in-out infinite alternate;
}

.boss-word {
  font-size: clamp(46px, 8.5vw, 112px);
  font-weight: 900;
  letter-spacing: 3px;
  line-height: 1;
  background: linear-gradient(180deg, #ffffff, #ff5c5c 42%, #dc2626 78%, #991b1b);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-stroke: 3px #0a0606;
  paint-order: stroke fill;
  filter: drop-shadow(0 5px 0 rgba(0, 0, 0, .9))
          drop-shadow(0 0 22px rgba(255, 60, 60, 1))
          drop-shadow(0 0 55px rgba(239, 68, 68, .8));
}

.boss-sub {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .5px;
  color: #fca5a5;
  text-shadow: 0 2px 0 rgba(0, 0, 0, .8);
}

@keyframes boss-fade {
  0%        { opacity: 0; }
  7%        { opacity: 1; }
  72%       { opacity: 1; }
  100%      { opacity: 0; }
}

@keyframes boss-bar-in {
  0%        { transform: translateX(-130%); }
  16%       { transform: translateX(0); }
  74%       { transform: translateX(0); }
  100%      { transform: translateX(130%); }
}

@keyframes boss-slam {
  0%        { transform: scale(3.4) rotate(-7deg); opacity: 0; filter: blur(9px); }
  11%       { transform: scale(1) rotate(-2deg);   opacity: 1; filter: blur(0); }
  15%       { transform: scale(1.07) rotate(1.5deg); }
  19%       { transform: scale(1) rotate(-1.5deg); }
  23%       { transform: scale(1.04) rotate(.5deg); }
  27%, 72%  { transform: scale(1) rotate(-1deg); }
  100%      { transform: scale(1.18) rotate(-1deg); opacity: 0; }
}

@keyframes boss-skull-pulse {
  from { transform: scale(1); }
  to   { transform: scale(1.16); }
}

/* While a boss is live, the board itself wears the threat */
.left-main-pane.boss-active {
  background: radial-gradient(ellipse at 50% 45%, rgba(239, 68, 68, .1), transparent 62%);
}

.left-main-pane.boss-active .matrix-cell {
  border-color: rgba(239, 68, 68, .4);
}

.left-main-pane.boss-active .puzzle-headline h3 {
  color: #fca5a5;
  text-shadow: 0 0 22px rgba(239, 68, 68, .55);
}

@media (prefers-reduced-motion: reduce) {
  .boss-splash, .boss-splash-inner, .boss-splash::before, .boss-splash::after,
  .boss-skull, .hint-btn { animation-duration: .01s; }
}

/* =========================================================================
   LEVEL PATH — the rank rail beside the board (Wood → Legendary)
   ========================================================================= */
/* The path gets its own reserved column: the pane pads to make room and
   the board centres in what's left, so the two can never collide. */
@media (min-width: 1151px) {
  #view-tactics .left-main-pane { padding-right: 274px; }
}

.level-rail-wrap {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 254px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 5;
}

.level-rail-title {
  font-size: 12px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: var(--text-muted);
  text-align: center;
}

.level-rail {
  height: min(52vh, 470px);
  overflow-y: auto;
  overflow-x: hidden;
  /* faint diagonal checker — texture without noise */
  background:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, .018) 0 14px, transparent 14px 28px),
    rgba(0, 0, 0, .24);
  border: 1px solid var(--line);
  border-radius: 14px;
  scrollbar-width: thin;
}

.level-track { position: relative; margin: 0 auto; }

.level-road { position: absolute; top: 0; left: 0; }

/* Level pads: chunky 3D tiles — light on top, weight underneath */
.map-node {
  position: absolute;
  width: 44px;
  height: 44px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 800;
  color: var(--text-muted);
  background: linear-gradient(180deg, #2e2c29, #222020);
  border: 2px solid color-mix(in srgb, var(--tier-color) 45%, transparent);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .09),
              inset 0 -3px 0 rgba(0, 0, 0, .4),
              0 4px 0 rgba(0, 0, 0, .5);
}

.map-node.map-done {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tier-color) 55%, #2d2b28),
    color-mix(in srgb, var(--tier-color) 28%, #222020));
  color: #fff;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
}

.map-node.map-you {
  width: 56px;
  height: 56px;
  margin: -6px;
  font-size: 18px;
  color: #fff;
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--tier-color) 100%, transparent),
    color-mix(in srgb, var(--tier-color) 70%, #000));
  border-color: #fff;
  z-index: 2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .5);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .25),
              0 0 24px color-mix(in srgb, var(--tier-color) 75%, transparent),
              0 5px 0 rgba(0, 0, 0, .5);
}

/* A sonar ring pulsing off the YOU node — impossible to miss */
.map-node.map-you::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  animation: you-ring 1.8s ease-out infinite;
}

@keyframes you-ring {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--tier-color) 65%, transparent); }
  100% { box-shadow: 0 0 0 14px transparent; }
}

.map-tier-label {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .8px;
  color: var(--tier-color);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
  z-index: 2;
  white-space: nowrap;
}

.map-you-tag {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10.5px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--accent-green-hover);
  text-shadow: 0 1px 0 rgba(0, 0, 0, .7);
  z-index: 2;
  white-space: nowrap;
}

/* On narrow screens the map would crowd the board — hide it there */
@media (max-width: 1150px) { .level-rail-wrap { display: none; } }

/* =========================================================================
   GAME FEEL — praise words, streak flame, floating Elo, confetti
   The "juice" layer: the game visibly reacting to the player. Everything
   here is pointer-events:none — celebration can never block a click.
   ========================================================================= */
.left-main-pane { position: relative; }

.celebration-layer {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  overflow: hidden;
  z-index: 6;
}

/* The celebration stack — word, rating change, and streak popping
   TOGETHER, dead center over the board. One animation moves them all. */
.celebration-stack {
  position: absolute;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  animation: pop-word 1.35s cubic-bezier(.2, .9, .3, 1) forwards;
}

.celebration-sub {
  display: flex;
  align-items: center;
  gap: 26px;
}

.celebration-delta {
  font-size: 60px;
  font-weight: 900;
  -webkit-text-stroke: 2px rgba(0, 0, 0, .45);
  paint-order: stroke fill;
}

.celebration-delta.delta-win  { color: #6EE7B7; text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 28px rgba(16, 185, 129, .95); }
.celebration-delta.delta-loss { color: #FCA5A5; text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 28px rgba(239, 68, 68, .85); }

.celebration-streak {
  font-size: 52px;
  filter: drop-shadow(0 0 16px rgba(249, 115, 22, .9));
}

.celebration-streak b {
  font-size: 48px;
  font-weight: 900;
  color: #FDBA74;
  -webkit-text-stroke: 2px rgba(0, 0, 0, .45);
  paint-order: stroke fill;
  text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 20px rgba(249, 115, 22, .95);
}

/* The praise ladder — bigger and louder as the tier climbs.
   Chunky on purpose: heavy weight, dark outline stroke, slight tilt. */
.celebration-word {
  font-weight: 900;
  letter-spacing: -1.5px;
  white-space: nowrap;
  -webkit-text-stroke: 2px rgba(0, 0, 0, .45);
  paint-order: stroke fill;
}

/* Soft dark halo behind the word so it pops against the busy grid.
   (The word's transform makes a stacking context, so z-index:-1 stays
   safely inside it — the Vault-border lesson, used on purpose.)      */
.celebration-word::before {
  content: "";
  position: absolute;
  inset: -38% -16%;
  background: radial-gradient(ellipse, rgba(10, 9, 8, .78), transparent 70%);
  z-index: -1;
}

.word-t1 { font-size: 66px;  color: var(--accent-green-hover); text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 30px rgba(129, 182, 76, .95); }
.word-t2 { font-size: 74px;  color: var(--neon-cyan);          text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 34px rgba(34, 211, 238, .9); }
.word-t3 { font-size: 84px;  color: #c084fc;                   text-shadow: 0 5px 0 rgba(0,0,0,.5), 0 0 38px rgba(139, 92, 246, 1); }
.word-t4 { font-size: 94px;  color: #f9a8d4;                   text-shadow: 0 5px 0 rgba(0,0,0,.5), 0 0 44px rgba(217, 70, 239, 1); }

.word-t5 {
  font-size: 108px;
  background: linear-gradient(92deg, #d3f36b, #67e8f9 45%, #f0abfc);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 0 rgba(0, 0, 0, .85))
          drop-shadow(0 0 20px rgba(34, 211, 238, .95))
          drop-shadow(0 0 44px rgba(217, 70, 239, .8));
}

/* The demo board is a fixed, chess.com-sized column — much narrower
   than a real puzzle board — same words, same glow, just sized to
   actually fit instead of clipping. */
.bots-demo-card .word-t1 { font-size: 31px; }
.bots-demo-card .word-t2 { font-size: 35px; }
.bots-demo-card .word-t3 { font-size: 38px; }
.bots-demo-card .word-t4 { font-size: 43px; }
.bots-demo-card .word-t5 { font-size: 48px; }

@keyframes pop-word {
  0%   { transform: scale(.2) rotate(-8deg); opacity: 0; }
  20%  { transform: scale(1.22) rotate(3deg); opacity: 1; }
  36%  { transform: scale(1) rotate(-2deg); }
  76%  { transform: scale(1) rotate(-2deg) translateY(0); opacity: 1; }
  100% { transform: scale(.94) rotate(-2deg) translateY(-30px); opacity: 0; }
}

/* Floating Elo delta (losses) — center-board, drifting down in red */
.float-delta {
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  top: 42%;
  font-size: 64px;
  font-weight: 900;
  -webkit-text-stroke: 2px rgba(0, 0, 0, .45);
  paint-order: stroke fill;
  animation: drift-up 1.35s ease-out forwards;
}

.float-delta.delta-win  { color: #6EE7B7; text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 26px rgba(16, 185, 129, .9); }
.float-delta.delta-loss { color: #FCA5A5; text-shadow: 0 4px 0 rgba(0,0,0,.5), 0 0 26px rgba(239, 68, 68, .8); animation-name: drift-down; }

@keyframes drift-up {
  from { transform: translateY(16px); opacity: 0; }
  25%  { opacity: 1; }
  to   { transform: translateY(-54px); opacity: 0; }
}

@keyframes drift-down {
  from { transform: translateY(-10px); opacity: 0; }
  25%  { opacity: 1; }
  to   { transform: translateY(44px); opacity: 0; }
}

/* The streak flame — a real little campfire, sitting inline at the left
   of the puzzle title (see .puzzle-headline). The OUTER element scales
   with the streak (JS, capped at streak 5 — see updateStreakFlame); the
   INNER .flame-visual gets the one-off win "surge" pulse, so the two
   never fight over the same transform. Each flame tongue sways on its
   own fast, staggered cycle so it never looks like one flat blinking
   shape — that's what makes it read as fire instead of an icon. */
.streak-flame {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  transition: transform .25s ease; /* smooths the streak-to-streak size jump */
}

.flame-visual { width: 54px; height: 81px; }

.flame-art {
  width: 100%;
  height: 100%;
  overflow: visible;
  filter: drop-shadow(0 0 14px rgba(249, 115, 22, .85));
}

.flame-logs { filter: drop-shadow(0 2px 0 rgba(0, 0, 0, .4)); }

.flame-layer {
  transform-box: fill-box;
  transform-origin: 50% 100%;
}

.flame-outer { animation: flame-sway-outer .38s ease-in-out infinite; }
.flame-mid   { animation: flame-sway-mid   .3s  ease-in-out infinite; animation-delay: -.1s; }
.flame-core  { animation: flame-sway-core  .22s ease-in-out infinite; animation-delay: -.05s; }

@keyframes flame-sway-outer {
  0%, 100% { transform: scaleY(1) rotate(-4deg); }
  50%      { transform: scaleY(1.08) rotate(4deg); }
}
@keyframes flame-sway-mid {
  0%, 100% { transform: scaleY(1) rotate(3deg); }
  50%      { transform: scaleY(1.12) rotate(-5deg); }
}
@keyframes flame-sway-core {
  0%, 100% { transform: scaleY(1) rotate(-2deg); }
  50%      { transform: scaleY(1.16) rotate(3deg); }
}

.streak-flame b {
  font-size: 22px;
  font-weight: 900;
  color: #FDBA74;
  -webkit-text-stroke: 1.5px rgba(0, 0, 0, .4);
  paint-order: stroke fill;
  text-shadow: 0 3px 0 rgba(0,0,0,.5), 0 0 14px rgba(249, 115, 22, .9);
  margin-top: -4px;
}

.flame-visual.flame-surge {
  animation: flame-surge .5s cubic-bezier(.2, .9, .3, 1);
}

@keyframes flame-surge {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* Past a 5-streak the flame stops GROWING (its scale is capped in JS) —
   from here it just burns hotter: faster sway, brighter double glow. */
.streak-flame.flame-hot .flame-art {
  filter: drop-shadow(0 0 18px rgba(249, 115, 22, 1)) drop-shadow(0 0 34px rgba(253, 224, 71, .65));
}
.streak-flame.flame-hot .flame-outer { animation-duration: .22s; }
.streak-flame.flame-hot .flame-mid   { animation-duration: .18s; }
.streak-flame.flame-hot .flame-core  { animation-duration: .14s; }

.streak-flame.flame-out {
  transition: opacity .5s, filter .5s;
  opacity: 0;
  filter: grayscale(1);
}

/* Confetti — tiny squares that explode outward (positions set by JS vars) */
.confetti-bit {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 9px;
  height: 9px;
  border-radius: 2px;
  pointer-events: none;
  animation: confetti-fly .95s cubic-bezier(.15, .6, .4, 1) forwards;
}

@keyframes confetti-fly {
  from { transform: translate(0, 0) rotate(0deg); opacity: 1; }
  to   { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; }
}

/* Rating badge bump when the number changes */
.badge-bump { animation: badge-bump .4s ease; }

@keyframes badge-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.18); }
  100% { transform: scale(1); }
}

/* The clickable rating card */
button.chart-card { text-align: left; cursor: pointer; transition: border-color .15s, box-shadow .15s; }
button.chart-card:hover { border-color: var(--accent-green); box-shadow: 0 0 18px rgba(129, 182, 76, .18); }
.chart-hint { float: right; font-size: 11.5px; color: #8f8b86; text-transform: none; letter-spacing: 0; }

/* Respect players who turn animations off at the OS level */
@media (prefers-reduced-motion: reduce) {
  .celebration-stack, .float-delta, .confetti-bit, .flame-visual.flame-surge { animation-duration: .01s; }
  .flame-layer { animation: none; }
}

/* =========================================================================
   AGE GATE — one friendly question, extra-rounded, everything grows on
   hover. Neutral by design: the card never says what any answer unlocks.
   ========================================================================= */
.age-card {
  position: relative;
  width: min(400px, 92vw);
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 30px;            /* the really-rounded corners */
  padding: 34px 30px 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .6);
}

.age-emoji { font-size: 40px; }

.age-card h3 { font-size: 23px; font-weight: 800; letter-spacing: -.4px; }

.age-sub { font-size: 13.5px; color: var(--text-muted); max-width: 34ch; line-height: 1.55; }

.age-input-row { display: flex; align-items: stretch; gap: 10px; margin-top: 6px; }

.age-input {
  width: 120px;
  font: inherit;
  font-size: 34px;
  font-weight: 800;
  text-align: center;
  color: var(--text-main);
  background: var(--bg-inset);
  border: 2px solid var(--line);
  border-radius: 18px;
  padding: 10px 6px;
  outline: none;
  transition: border-color .15s, transform .15s;
  -moz-appearance: textfield;
}

/* our big arrows replace the browser's tiny native spinners */
.age-input::-webkit-outer-spin-button,
.age-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.age-input:focus { border-color: var(--accent-green); }
.age-input:hover { transform: scale(1.04); }

.age-steppers { display: flex; flex-direction: column; gap: 6px; }

.age-step {
  flex: 1;
  width: 52px;
  border-radius: 14px;
  font-size: 17px;
  color: var(--text-main);
  background: var(--bg-inset);
  border: 2px solid var(--line);
  transition: transform .12s, border-color .12s, background .12s;
}

.age-step:hover {
  transform: scale(1.12);          /* the pop-bigger-on-hover feel */
  border-color: var(--accent-green);
  background: rgba(129, 182, 76, .12);
}

.age-step:active { transform: scale(.96); }

.age-confirm {
  width: 100%;
  margin-top: 8px;
  font-size: 17px;
  padding: 14px;
  border-radius: 16px;
  transition: transform .12s, background-color .15s, box-shadow .06s;
}

.age-confirm:hover:not(:disabled) { transform: scale(1.05); }
.age-confirm:disabled { opacity: .45; cursor: not-allowed; }

.age-anon {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-muted);
  padding: 8px 18px;
  border-radius: 999px;
  transition: transform .12s, color .12s, background .12s;
}

.age-anon:hover {
  transform: scale(1.08);
  color: var(--text-main);
  background: rgba(255, 255, 255, .06);
}