/* _arcade.css — shared candy-arcade look for /games pages */
:root {
  --sky: #cdeffd;
  --board: #7ec8e3;
  --cell: #a8dcf0;
  --ink: #4a3b6b;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: "Baloo 2", cursive, sans-serif;
  min-height: 100vh;
  background: var(--sky);
  background-image:
    radial-gradient(circle at 15% 20%, #ffd6e8 0 12%, transparent 13%),
    radial-gradient(circle at 85% 15%, #fff3b0 0 10%, transparent 11%),
    radial-gradient(circle at 80% 85%, #c9f2d0 0 14%, transparent 15%),
    radial-gradient(circle at 10% 80%, #e3d7ff 0 11%, transparent 12%);
  background-attachment: fixed;
  color: var(--ink);
  display: flex;
  justify-content: center;
  touch-action: pan-y;
}
/* flex column + min-height so the injected footer always sits at the page bottom */
.game { text-align: center; padding: 12px; width: 100%; max-width: 520px; display: flex; flex-direction: column; min-height: 100vh; }
.game > * { flex-shrink: 0; }
h1 {
  font-weight: 800;
  font-size: clamp(1.8rem, 8vmin, 3rem);
  letter-spacing: 2px;
  text-shadow: 3px 3px 0 #fff;
}
h1 span { display: inline-block; }
h1 span:nth-child(4n+1) { color: #ff6b9d; transform: rotate(-6deg); }
h1 span:nth-child(4n+2) { color: #ffa931; transform: rotate(4deg); }
h1 span:nth-child(4n+3) { color: #4cc9a4; transform: rotate(-3deg); }
h1 span:nth-child(4n+4) { color: #6a8dff; transform: rotate(6deg); }
.chips { display: flex; justify-content: center; gap: 6px; margin: 8px 0; flex-wrap: wrap; }
.chip {
  font-family: inherit;
  font-weight: 800;
  font-size: .85rem;
  color: var(--ink);
  background: #fff;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  box-shadow: 0 3px 0 rgba(74,59,107,.18);
  cursor: pointer;
}
.chip.active { background: #ffa931; color: #fff; box-shadow: 0 3px 0 #cc7d13; }
.bar { display: flex; justify-content: center; gap: 8px; margin: 8px 0; flex-wrap: wrap; }
.pill {
  background: #fff;
  border-radius: 999px;
  padding: 6px 16px;
  box-shadow: 0 4px 0 rgba(74,59,107,.18);
  min-width: 104px; /* fits 6 tabular digits so the bar never re-wraps as scores grow */
}
.pill small { display: block; font-size: .65rem; text-transform: uppercase; letter-spacing: 1px; color: #a58fc9; }
.pill b { font-size: 1.15rem; font-variant-numeric: tabular-nums; }
button.big {
  font-family: inherit;
  font-weight: 800;
  font-size: 1rem;
  color: #fff;
  background: #ff6b9d;
  border: none;
  border-radius: 999px;
  padding: 6px 20px;
  box-shadow: 0 4px 0 #d94f7f;
  cursor: pointer;
}
button.big:active { transform: translateY(3px); box-shadow: 0 1px 0 #d94f7f; }
.stage {
  position: relative;
  width: min(92vw, 64vh, 480px);
  margin: 0 auto;
  background: var(--board);
  border-radius: 20px;
  box-shadow: 0 8px 0 rgba(74,59,107,.2), inset 0 0 0 4px rgba(255,255,255,.35);
}
/* canvas games: the stage's <canvas id=cvs> always fills the padded stage box */
#cvs { width: 100%; height: 100%; display: block; border-radius: 12px; }
.overlay {
  position: absolute;
  inset: 0;
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 12px;
  padding: 12px;
  z-index: 5;
  overflow-y: auto;
}
/* safe centering: auto margins collapse to 0 on overflow so tall content scrolls from the top */
.overlay > :first-child { margin-top: auto; }
.overlay > :last-child { margin-bottom: auto; }
.overlay.show { display: flex; animation: apop .3s ease; }
.overlay p { font-size: 1.4rem; font-weight: 800; }
@keyframes apop { from { transform: scale(0); } to { transform: scale(1); } }
/* scores autosave under the profile name — the manual save form is retired
   (markup still exists in pages; hidden here so no page needs edits) */
#scoreForm { display: none !important; }
#scoreForm input {
  font-family: inherit;
  font-weight: 600;
  font-size: 1rem;
  color: var(--ink);
  border: 3px solid #ffa931;
  border-radius: 999px;
  padding: 5px 14px;
  width: 150px;
  outline: none;
}
.hint { margin-top: 12px; font-size: .85rem; color: #7a6aa0; }
.lb {
  background: #fff;
  border-radius: 20px;
  margin: 16px auto 24px;
  padding: 14px 18px;
  max-width: 340px;
  box-shadow: 0 6px 0 rgba(74,59,107,.15);
}
.lb h2 { font-size: 1.1rem; margin-bottom: 6px; }
.lb ol { list-style: none; }
.lb li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 3px 0;
  border-bottom: 2px dotted #eee4ff;
  font-weight: 600;
}
.lb li:first-child { color: #cc8a00; }
/* the player's own row: negative margins cancel the padding so its name and
   score stay column-aligned with the other rows while the yellow reaches wider */
.lb li.me { background: #fff3b0; border-radius: 8px; padding-left: 9px; padding-right: 9px; margin-left: -9px; margin-right: -9px; }
.lb li .n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb .empty { color: #a58fc9; font-weight: 600; }
.backlink { display: inline-block; margin-bottom: 4px; color: #7a6aa0; font-weight: 800; text-decoration: none; }

/* ---- player profile chip + picker ---- */
.player-chip { margin: 0; font-size: .95rem; padding: 5px 14px; } /* no margin + bigger text: matches the height of the big buttons beside it in the bar */
/* index: the chip sits in a labeled card so it reads as "who's playing", not a banner */
.player-card { align-self: center; display: flex; flex-direction: column; align-items: center; gap: 3px; margin: 2px 0 4px; }
.player-card small { font-size: .65rem; text-transform: uppercase; letter-spacing: 1px; font-weight: 600; color: #a58fc9; }
.povl {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(74,59,107,.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.pcard {
  background: #fff;
  border-radius: 24px;
  padding: 22px 20px;
  width: min(92vw, 360px);
  max-height: 86vh;
  overflow-y: auto;
  text-align: center;
  box-shadow: 0 8px 0 rgba(74,59,107,.25);
  animation: apop .3s ease;
}
.ptitle { font-size: 1.5rem; font-weight: 800; margin-bottom: 12px; }
.ptitle small { display: block; font-size: 1rem; color: #7a6aa0; }
.plist { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.pbtn {
  font-family: inherit;
  font-weight: 800;
  font-size: 1.15rem;
  color: #fff;
  background: #6a8dff;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  box-shadow: 0 4px 0 #4a67cc;
  cursor: pointer;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.plist .prow:nth-child(4n+1) .pbtn { background: #ff6b9d; box-shadow: 0 4px 0 #d94f7f; }
.plist .prow:nth-child(4n+2) .pbtn { background: #ffa931; box-shadow: 0 4px 0 #cc7d13; }
.plist .prow:nth-child(4n+3) .pbtn { background: #4cc9a4; box-shadow: 0 4px 0 #35a082; }
.pbtn:active { transform: translateY(3px); box-shadow: none; }
.prow { display: flex; gap: 8px; justify-content: center; }
.prow .pbtn { flex: 1; min-width: 0; }
.prow .pdel, .prow .padd { flex: none; width: 40px; height: 40px; padding: 0; font-size: 1rem; align-self: center; }
.prow .pdel { background: #ff5a5a; color: #fff; box-shadow: 0 3px 0 #c43a3a; }
.prow input {
  font-family: inherit;
  font-weight: 600;
  font-size: 1.15rem;
  color: var(--ink);
  border: 3px solid #ffa931;
  border-radius: 999px;
  padding: 7px 14px;
  flex: 1;
  min-width: 0;
  outline: none;
}
.pclose { margin-top: 14px; }

/* ---- landscape phones/tablets (short viewport): board left, header/controls right ---- */
@media (orientation: landscape) and (max-height: 520px) {
  .game:has(> .stage) {
    max-width: 900px;
    display: grid;
    grid-template-columns: minmax(0, auto) minmax(0, 1fr);
    column-gap: 16px;
    align-items: start;
  }
  .game:has(> .stage) > * { grid-column: 2; min-width: 0; }
  .game:has(> .stage) > .stage {
    grid-column: 1;
    grid-row: 1 / span 30; /* spans every right-column row; empty implicit rows are 0-height */
    /* pin the board at the top and keep it visible even when the leaderboard
       makes the right column taller than the screen */
    align-self: start;
    position: sticky;
    top: 8px;
    width: min(54vw, 90vh, 460px);
  }
  .game:has(> .stage) h1 { font-size: clamp(1.4rem, 7vmin, 2.2rem); }
  .game:has(> .stage) .lb { margin: 10px auto 12px; }
}

/* ---- footer: circular refresh button (bottom-right, index only) + copyright ---- */
.afoot { position: relative; width: 100%; margin: 8px auto 16px; padding-top: 42px; text-align: center; margin-top: auto; } /* auto top margin pins it to the bottom; the top padding clears the 46px corner circle above the copyright line */
.afoot button {
  position: absolute;
  right: 4px;
  bottom: 0;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 50%;
  padding: 0;
  font-family: inherit;
  font-size: 1.3rem;
  line-height: 1;
  background: #fff;
  box-shadow: 0 3px 0 rgba(74,59,107,.18);
  cursor: pointer;
}
.afoot button:active { transform: translateY(2px); box-shadow: none; }
.afoot p { margin-top: 6px; font-size: .75rem; font-weight: 600; color: #a58fc9; }
@media (orientation: landscape) and (max-height: 520px) {
  .game:has(> .stage) { grid-template-rows: repeat(30, auto) 1fr; } /* row 31 = leftover height */
  .game > .afoot { grid-column: 1 / -1; grid-row: 31; align-self: end; } /* spans both columns, pinned to the bottom */
}

/* ==== Candy Theater: motion system + wide-landscape stage layout ==== */
:root { --spring: cubic-bezier(.34, 1.56, .64, 1); } /* springy overshoot */

/* entrance: page children pop in with a small left-to-right stagger */
@keyframes tpop-in { from { opacity: 0; transform: translateY(14px) scale(.92); } }
.game > * { animation: tpop-in .45s var(--spring) backwards; }
.game > :nth-child(2) { animation-delay: .05s; }
.game > :nth-child(3) { animation-delay: .1s; }
.game > :nth-child(4) { animation-delay: .15s; }
.game > :nth-child(5) { animation-delay: .2s; }
.game > :nth-child(6) { animation-delay: .25s; }
.game > :nth-child(7) { animation-delay: .3s; }
.game > :nth-child(8) { animation-delay: .35s; }

/* leaderboard rows cascade in as they render */
.lb li { animation: tpop-in .35s var(--spring) backwards; }
.lb li:nth-child(2) { animation-delay: .04s; }
.lb li:nth-child(3) { animation-delay: .08s; }
.lb li:nth-child(4) { animation-delay: .12s; }
.lb li:nth-child(5) { animation-delay: .16s; }
.lb li:nth-child(6) { animation-delay: .2s; }
.lb li:nth-child(7) { animation-delay: .24s; }
.lb li:nth-child(8) { animation-delay: .28s; }
.lb li:nth-child(9) { animation-delay: .32s; }
.lb li:nth-child(10) { animation-delay: .36s; }

/* index cards join the same cascade */
.gcard { animation: tpop-in .45s var(--spring) backwards; }
.gcard:nth-child(2) { animation-delay: .04s; }
.gcard:nth-child(3) { animation-delay: .08s; }
.gcard:nth-child(4) { animation-delay: .12s; }
.gcard:nth-child(5) { animation-delay: .16s; }
.gcard:nth-child(6) { animation-delay: .2s; }
.gcard:nth-child(7) { animation-delay: .24s; }
.gcard:nth-child(8) { animation-delay: .28s; }

/* micro: springy wobble on hover (letters keep their resting tilt) */
@keyframes twob { 30% { transform: rotate(-2.5deg) scale(1.06); } 70% { transform: rotate(1.6deg) scale(1.02); } }
@media (hover: hover) {
  button.big:hover, .chip:hover { animation: twob .4s var(--spring); }
  h1:hover span { animation: twob .5s var(--spring); }
  h1:hover span:nth-child(2n) { animation-delay: .06s; }
  h1:hover span:nth-child(3n) { animation-delay: .1s; }
}

/* ---- scenery: wing (game pages, injected) + edge gutters (index, injected) ---- */
@keyframes tfloat { 50% { transform: translateY(-14px) rotate(6deg); } }
@keyframes tsway { 50% { transform: translateX(9px) rotate(-8deg); } }
.wing, .egut { display: none; pointer-events: none; user-select: none; }
.wing i, .egut i {
  font-style: normal;
  display: block;
  line-height: 1;
  animation: tfloat 7s ease-in-out infinite;
  filter: drop-shadow(0 4px 0 rgba(74,59,107,.12));
}
.wing i:nth-child(2n), .egut i:nth-child(2n) { animation-name: tsway; animation-duration: 9s; }
.wing i:nth-child(3n), .egut i:nth-child(3n) { animation-delay: -3s; }
.wing i:nth-child(4n+1), .egut i:nth-child(4n+1) { animation-delay: -5.5s; font-size: .8em; }
.wing i:nth-child(5n), .egut i:nth-child(5n) { font-size: 1.25em; }
.egut { position: fixed; top: 0; bottom: 0; width: 52px; z-index: 0; flex-direction: column; justify-content: space-evenly; align-items: center; font-size: 1.7rem; opacity: .85; }
.egut.l { left: 6px; } .egut.r { right: 6px; }
.game { position: relative; z-index: 1; } /* content always paints above the gutters */

/* ---- Candy Theater tiers: tall landscape was falling through to the narrow
   portrait column, leaving huge dead side margins on desktops and tablets ---- */

/* T3 (>=900px wide tall landscape): sticky rail left, board becomes the hero */
@media (orientation: landscape) and (min-height: 521px) and (min-width: 900px) {
  .game:has(> .stage) {
    max-width: min(1240px, 97vw);
    display: grid;
    grid-template-columns: minmax(230px, 290px) minmax(0, 1fr);
    column-gap: clamp(16px, 2.5vw, 34px);
    align-items: start;
    align-content: start;
  }
  .game:has(> .stage) > * { grid-column: 1; min-width: 0; }
  .game:has(> .stage) > .stage {
    grid-column: 2;
    grid-row: 1 / span 30;
    align-self: start;
    justify-self: center;
    position: sticky;
    top: 12px;
    /* --stagew: per-page height-fit cap; pages with non-square boards override it.
       max-width clamps to the actual grid column — the vw/vh terms can exceed it
       on 1200–1330px windows, which made the board bleed into the score chart */
    width: min(var(--stagew, 78vh), 46vw, 660px);
    max-width: 100%;
  }
  .game:has(> .stage) h1 { font-size: clamp(1.5rem, 2.6vw, 2.3rem); }
  .game:has(> .stage) .lb { margin: 12px auto; }
  .game:has(> .stage) .hint { margin-top: 6px; }
  /* rows 1-30 hold the rail/stage/lb; row 31 is the leftover height so the footer
     pins to the viewport bottom (margin-top:auto only does that in flex) */
  .game:has(> .stage) { grid-template-rows: repeat(30, auto) 1fr; }
  .game:has(> .stage) > .afoot { grid-column: 1 / -1; grid-row: 31; align-self: end; }
}

/* T4 (>=1200px): full theater — decide (rail) → play (stage) → compare (score chart).
   The leaderboard moves to the right column; scenery fills the space beneath it.
   Both span many rows (like the stage) so their height never inflates a shared
   grid row and breaks the rail's spacing. */
@media (orientation: landscape) and (min-height: 521px) and (min-width: 1200px) {
  .game:has(> .stage) { max-width: min(1300px, 97vw); grid-template-columns: minmax(230px, 290px) minmax(0, 1fr) minmax(240px, 340px); }
  .game:has(> .stage) > .lb {
    grid-column: 3;
    grid-row: 1 / span 15;
    align-self: start;
    position: sticky;
    top: 12px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
  }
  /* wing shares the lb's cell and spans the viewport; the sticky lb paints over
     the top of it, the rest of the candy floats evenly beneath (grid rows below
     the rail's last child are 0px, so anchoring it there collapsed it to 30vh) */
  .game:has(> .stage) > .lb { z-index: 1; }
  .game:has(> .stage) > .wing {
    display: flex;
    grid-column: 3;
    grid-row: 1 / span 30;
    align-self: start;
    position: sticky;
    top: 12px;
    height: calc(100vh - 24px);
    margin-bottom: calc(24px - 100vh); /* zero net height: never adds page scroll */
    width: 100%;
    z-index: 0;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    font-size: clamp(1.6rem, 2.4vw, 2.6rem);
  }
  /* index (no stage): floating candy gutters frame the card grid */
  body:not(:has(.game > .stage)) > .egut { display: flex; }
}

/* portrait tablets: a whisper of the theater at the index edges */
@media (orientation: portrait) and (min-width: 700px) {
  body:not(:has(.game > .stage)) > .egut { display: flex; }
}

/* portrait: leaderboard folds behind its heading so replay is one scroll closer */
@media (orientation: portrait) {
  .lb h2 { cursor: pointer; }
  .lb h2::after { content: " ▾"; color: #a58fc9; }
  .lb.folded h2::after { content: " ▸"; }
  .lb.folded ol { display: none; }
}

/* reduced motion: no entrances, no ambient scenery */
@media (prefers-reduced-motion: reduce) {
  .game > *, .lb li, .gcard, .wing i, .egut i,
  button.big:hover, .chip:hover, h1:hover span { animation: none !important; }
  .wing, .egut { display: none !important; }
}