/* =====================================================================
   Page Turner: a picture book open on a nursery rug at bedtime. The rug
   is cobalt with stars and moons woven in, the book a red cloth board
   book whose pages are each a different bright colour (game.js paints
   it). The cards are board-book pages too: sunflower, with the coral and
   mint pages under them showing at the edge, lettered in a fat round
   display face (Krona One) over Encode Sans, in plum-black ink. Buttons
   are thick-edged tabs in the pages' colours.
   ===================================================================== */

:root {
  --rug: #2d4cc2;
  --rug-deep: #213a98;
  --rug-weave: #3a5cd8;
  --ink: #2b1d3d;
  --ink-soft: #5a4a72;
  --sun: #ffd447;
  --coral: #ff7a5c;
  --mint: #5fd6ae;
  --sky: #7cc4ff;
  --white: #ffffff;
  --moonlight: #eef1ff;
  /* the rug's weave: stars, moons and dots in a lighter blue */
  --rug-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cg fill='%233a5cd8'%3E%3Cpath d='M34 16l5 10.2 11.2 1.6-8.1 7.9 1.9 11.2L34 41.6l-10 5.3 1.9-11.2-8.1-7.9 11.2-1.6z'/%3E%3Cpath d='M108 84a17 17 0 1 0 13 29 13 13 0 1 1-13-29z'/%3E%3Ccircle cx='112' cy='28' r='3.5'/%3E%3Ccircle cx='30' cy='110' r='3.5'/%3E%3Ccircle cx='72' cy='66' r='2.5'/%3E%3Ccircle cx='140' cy='138' r='2.5'/%3E%3C/g%3E%3C/svg%3E");
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "Encode Sans", system-ui, sans-serif; color: var(--ink);
  background: var(--rug);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
/* the rug: its stars and moons on a layer of their own over the blue, and the
   weave and the lamp's glow over them. With Visual FX on the stars and moons
   drift slowly down and to the left, a whole tile (150 px) every 40 s, round
   and round; off, they lie still, the rug as it always was. */
body::before, body::after { content: ""; position: fixed; pointer-events: none; }
body::before { inset: -150px; z-index: -2; background: var(--rug-art); }
body::after {
  inset: 0; z-index: -1;
  background:
    radial-gradient(ellipse 70% 60% at 50% 45%, rgba(255, 214, 140, 0.2), rgba(255, 214, 140, 0) 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 2px, transparent 2px 7px);
}
html.fx-on body::before { animation: rug-drift 40s linear infinite; }
@keyframes rug-drift { from { transform: translate(0, 0); } to { transform: translate(-150px, 150px); } }

.nav-back-games {
  position: fixed; top: 16px; left: 18px; z-index: 50;
  font-family: "Encode Sans", system-ui, sans-serif; font-size: 15px; font-weight: 800;
  color: var(--ink); text-decoration: none;
  background: var(--sun); border: 2.5px solid var(--ink); border-radius: 10px;
  box-shadow: 0 3px 0 var(--ink);
  padding: 6px 13px 5px;
}

/* ---- the nook: HUD, the book, how to crawl ------------------------------------------ */
.nook { position: fixed; inset: 0; display: flex; flex-direction: column; align-items: stretch; padding: 64px 10px 10px; gap: 6px; }
.stage { position: relative; flex: 1; min-height: 0; }
.stage canvas { position: absolute; left: 0; top: 0; display: block; touch-action: none; }
.hud {
  position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20;
  display: flex; align-items: center; gap: 1em; white-space: nowrap; pointer-events: none;
  background: var(--white); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 0 3px 0 var(--ink);
  padding: 5px 14px 4px; font-weight: 700; font-size: 14px;
}
.hud[hidden] { display: none; }
.hud-page b { font-family: "Krona One", "Encode Sans", sans-serif; font-weight: 400; font-size: 1.21em; color: var(--ink); font-variant-numeric: tabular-nums; }
/* (sizes in em: when game.js fitHud makes the words smaller, the dots and
   gaps come down with them) */
.hud-worms { display: flex; gap: 0.71em; align-items: center; }
.chip { display: inline-flex; align-items: center; gap: 0.3em; }
.chip i { width: 0.86em; height: 0.86em; border-radius: 50%; border: 2px solid var(--ink); display: inline-block; }
.chip.out { opacity: 0.5; text-decoration: line-through; }
.chip.you { font-weight: 800; }
/* many worms: their names wrap onto more lines, centred (a laptop's HUD,
   floating between the corner buttons, is held to the gap they leave:
   game.js measures it) */
.hud.many { white-space: normal; max-width: calc(100vw - 20px); }
.hud.many .hud-worms { flex-wrap: wrap; justify-content: center; column-gap: 0.57em; row-gap: 1px; }
.hud.many .chip, .hud.many .hud-page { white-space: nowrap; }
/* (one line where it fits: game.js fitHud makes the words smaller first) */
.hud.many.one { white-space: nowrap; }
.hud.many.one .hud-worms { flex-wrap: nowrap; }
/* (where even 10 px words leave the names no room on one line, ten rivals
   on a phone: each worm's colour goes under its name as a bar, in place of
   the dot beside it, and then the page number onto a line of its own over
   the names) */
.hud.many.bars .hud-worms { column-gap: 0.36em; }
.hud.many.bars .chip { position: relative; padding-bottom: 0.32em; }
.hud.many.bars .chip i { position: absolute; left: 0; right: 0; bottom: 0; width: auto; height: 0.24em; border: 0; border-radius: 1em; box-shadow: 0 0 0 1px var(--ink); }
.hud.many.split { flex-direction: column; gap: 0; padding-left: 6px; padding-right: 6px; }
.keys { text-align: center; font-size: 13px; font-weight: 600; color: var(--moonlight); min-height: 18px; }
.keys .gs-kbd { color: var(--moonlight); }
/* (one worm's keys, or two players' each, a dot of each worm's colour by their name) */
.keys:not(.duo) .two, .keys.duo .solo { display: none; }
.keys .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--moonlight); margin: 0 4px 0 2px; vertical-align: -1px; }
.keys .dot.p1 { background: #4cc35c; }
.keys .dot.p2 { background: #ff5f97; }

/* the thumb's stick */
.stick {
  position: fixed; z-index: 25; width: 112px; height: 112px; margin: -56px 0 0 -56px; pointer-events: none;
  border-radius: 50%; border: 3px solid rgba(255, 255, 255, 0.75); background: rgba(43, 29, 61, 0.22);
}
.stick[hidden] { display: none; }
.stick .knob {
  position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%;
  background: var(--sun); border: 3px solid var(--ink); box-shadow: 0 3px 0 rgba(43, 29, 61, 0.5);
}

/* ---- the cards: a board-book page, more pages under it ------------------------------------ */
.panel {
  position: fixed; inset: 0; z-index: 30; display: flex; align-items: center; justify-content: center;
  padding: 26px 16px; overflow-y: auto; background: rgba(23, 34, 100, 0.42);
}
.panel[hidden] { display: none; }
.panel > .card { margin: auto; }
.card {
  width: min(460px, calc(100% - 14px)); background: var(--sun); border: 3px solid var(--ink); border-radius: 16px;
  box-shadow: 6px 6px 0 0 var(--coral), 6px 6px 0 3px var(--ink), 12px 12px 0 0 var(--mint), 12px 12px 0 3px var(--ink);
  padding: 20px 22px 18px; margin-right: 14px;
}
.card h1, .card h2 { font-family: "Krona One", "Encode Sans", sans-serif; font-weight: 400; color: var(--ink); line-height: 1.1; }
.card h1 { font-size: 31px; letter-spacing: -0.5px; text-shadow: 2px 2px 0 var(--coral); }
.card h2 { font-size: 24px; }
.card .tag { font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; color: var(--rug-deep); margin: 7px 0 9px; }
.card .how { font-size: 15px; line-height: 1.45; margin-bottom: 13px; }
.card .how b { font-weight: 800; }

.seg { display: flex; flex-direction: column; gap: 7px; margin-bottom: 10px; }
.seg button {
  font-family: inherit; font-size: 15px; text-align: left; cursor: pointer; color: var(--ink);
  background: var(--white); border: 2.5px solid var(--ink); border-radius: 12px; padding: 8px 12px 7px;
  display: flex; flex-direction: column; gap: 1px;
}
.seg button b { font-family: "Krona One", "Encode Sans", sans-serif; font-weight: 400; font-size: 15px; }
.seg button small { font-size: 13px; color: var(--ink-soft); }
.seg button.on { background: var(--mint); box-shadow: 0 3px 0 var(--ink); }
.seg button.on small { color: var(--ink); }
.levels { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; flex-wrap: wrap; }
.levels[hidden] { display: none; }
.levels .lbl { font-weight: 800; font-size: 12px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--rug-deep); margin-right: 2px; }
.levels button {
  font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; color: var(--ink);
  background: var(--white); border: 2.5px solid var(--ink); border-radius: 999px; padding: 5px 12px 4px;
}
.levels button.on { background: var(--sky); box-shadow: 0 3px 0 var(--ink); }
/* how many rivals: two small round buttons, the number between them; each
   button's face is its key (a keycap where there's a keyboard, a minus or
   a plus on a touch screen) */
.levels .count { display: inline-flex; align-items: center; gap: 4px; margin-right: 4px; }
.levels .count button { display: inline-flex; align-items: center; justify-content: center; min-width: 28px; padding-left: 6px; padding-right: 6px; }
.levels .count button .gs-touch { font-size: 17px; font-weight: 800; line-height: 1; }
.levels .count button .gs-kbd { color: var(--ink); margin: 0; }
.levels .count button:disabled { opacity: 0.4; cursor: default; }
.levels .count b { font-family: "Krona One", "Encode Sans", sans-serif; font-weight: 400; font-size: 15px; min-width: 1.4em; text-align: center; font-variant-numeric: tabular-nums; color: var(--ink); }

.playbtn {
  width: 100%; font-family: "Krona One", "Encode Sans", sans-serif; font-weight: 400; font-size: 17px; cursor: pointer;
  color: var(--ink); background: var(--coral); border: 3px solid var(--ink); border-radius: 12px;
  box-shadow: 0 4px 0 var(--ink); padding: 11px 12px 10px;
}
.playbtn:active, .seg button:active, .levels button:active, .card .row button:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.tally { margin-top: 11px; text-align: center; font-size: 13.5px; font-weight: 600; color: var(--ink-soft); min-height: 18px; }

.card.end { text-align: center; }
.card .big { font-family: "Krona One", "Encode Sans", sans-serif; font-size: 34px; margin: 8px 0 4px; }
.card .stats { display: flex; flex-direction: column; align-items: center; gap: 7px; margin: 4px 0 16px; font-size: 15px; font-weight: 600; color: var(--ink-soft); }
.stats .best { font-weight: 800; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px 14px 2px; background: var(--white); }
.stats .best.record { background: var(--mint); }
.stats .nw { white-space: nowrap; }
.card .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.card .row button { width: auto; min-width: 120px; font-size: 16px; padding: 10px 16px 9px; }
.card .row .ghost {
  font-family: "Krona One", "Encode Sans", sans-serif; cursor: pointer; color: var(--ink);
  background: var(--white); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 0 4px 0 var(--ink);
}

/* every pause, and the boxes that ask before leaving, cover the book whole:
   a paused page can't be studied while it hangs mid-fall */
.gs-pause { background: var(--rug-art), var(--rug-deep); }

/* ---- a phone held upright: the HUD under the corner buttons ------------------------------ */
@media (max-width: 699px) {
  .nook { padding-top: 56px; }
  .hud { position: static; transform: none; align-self: center; gap: 0.8em; font-size: 12.5px; padding: 4px 10px 3px; }
  .hud-page b { font-size: 1.2em; }
  .hud-worms { gap: 0.56em; }
  .chip i { width: 0.8em; height: 0.8em; }
  .panel { padding-top: 62px; padding-left: 12px; padding-right: 12px; padding-bottom: 14px; }
  .card { padding: 15px 16px 13px; }
  .card h1 { font-size: 25px; }
  .card .tag { margin: 5px 0 7px; }
  .card .how { font-size: 14px; line-height: 1.4; margin-bottom: 11px; }
  .seg { gap: 6px; margin-bottom: 9px; }
  .seg button { padding: 6px 10px 5px; }
  .seg button b { font-size: 14px; }
  .seg button small { font-size: 12.5px; }
  .levels { gap: 5px; margin-bottom: 11px; }
  .levels button { font-size: 13.5px; padding: 4px 10px 3px; }
  .playbtn { padding: 9px 10px 8px; }
  .tally { margin-top: 8px; }
  .card .big { font-size: 28px; }
}
/* (the rivals' row on one line on narrow phones: the stepper closer, the pills slimmer) */
@media (max-width: 374px) {
  .levels .count { gap: 2px; margin-right: 1px; }
  .levels .count button { min-width: 24px; padding-left: 4px; padding-right: 4px; }
  .levels .count b { font-size: 13.5px; }
}
@media (max-width: 359px) {
  .card h1 { font-size: 22px; }
  .card .how { font-size: 13.5px; line-height: 1.36; }
  .levels { gap: 4px; }
  .levels .lbl { letter-spacing: 0.5px; font-size: 11px; margin-right: 0; }
  .levels button { font-size: 13px; padding: 4px 6px 3px; }
}

/* ---- a phone on its side: the HUD and the keys beside the book, the menu in two columns ------ */
@media (max-height: 460px) and (min-width: 560px) {
  .nook { padding: 6px 10px 6px; }
  .hud { position: fixed; top: 58px; left: 12px; transform: none; flex-direction: column; align-items: flex-start; gap: 4px; font-size: 12.5px; padding: 6px 10px 5px; }
  .hud-worms { flex-direction: column; align-items: flex-start; gap: 3px; }
  /* (many worms: their names in two columns, so the list stays clear of the keys line) */
  .hud.many .hud-worms { display: grid; grid-template-columns: auto auto; column-gap: 8px; row-gap: 3px; }
  .keys { position: fixed; left: 12px; bottom: 8px; width: calc(50vw - 170px); text-align: left; font-size: 12px; }
  .panel { padding: 54px 12px 6px; }
  .card { width: min(600px, calc(100% - 14px)); display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; padding: 11px 14px 11px; }
  .card > h1, .card > .tag, .card > .how { grid-column: 1; }
  .card > .seg, .card > .levels, .card > .playbtn, .card > .tally { grid-column: 2; }
  .card > h1 { grid-row: 1; font-size: 21px; }
  .card > .tag { grid-row: 2; margin: 4px 0 5px; font-size: 11px; }
  .card > .how { grid-row: 3 / span 4; font-size: 13px; line-height: 1.38; margin: 0; }
  .card > .seg { grid-row: 1 / span 3; gap: 5px; margin-bottom: 7px; }
  .card > .levels { grid-row: 4; gap: 5px; margin-bottom: 9px; flex-wrap: nowrap; }
  .card > .playbtn { grid-row: 5; font-size: 15px; padding: 8px 10px 7px; align-self: start; }
  .card > .tally { grid-row: 6; margin-top: 6px; font-size: 12px; }
  .seg button { padding: 5px 10px 4px; }
  .seg button b { font-size: 13px; }
  .seg button small { font-size: 12px; }
  .levels button { font-size: 13px; padding: 4px 10px 3px; }
  .card.end { display: block; width: min(420px, calc(100% - 14px)); }
  .card .big { font-size: 26px; margin: 4px 0 2px; }
  .card .stats { margin-bottom: 10px; gap: 5px; font-size: 13.5px; }
}

/* (a short screen: each mode's name and what it is on one line where they
   fit, so the three modes, the rivals and the guides all show without scrolling) */
@media (max-height: 640px) {
  .seg button { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 8px; }
}

/* ---- the guides switch: a pill like the rivals', saying what it does ----------------------- */
.guides-row button { display: inline-flex; align-items: baseline; gap: 7px; }
.guides-row button b { font-weight: 800; }
/* (its words are small letters, which sit low on the line: lifted, with
   their keycap, to the middle of the pill, at every size) */
.guides-row button b, .guides-row button small, .guides-row button::after { position: relative; top: -1.75px; }
.guides-row button small { font-size: 12.5px; font-weight: 600; color: var(--ink-soft); }
.guides-row button.on small { color: var(--ink); }
@media (max-width: 359px) {
  .guides-row button { gap: 5px; }
  .guides-row button small { font-size: 12px; }
}
/* (an upright phone with little height: the rows closer together, so the
   card with its guides row still fits the screen without scrolling) */
@media (max-width: 520px) and (max-height: 600px) {
  .card { padding-top: 12px; padding-bottom: 11px; }
  .card .tag { margin: 4px 0 5px; }
  .card .how { margin-bottom: 8px; }
  .seg { gap: 5px; margin-bottom: 7px; }
  .seg button { padding: 5px 10px 4px; }
  .levels { margin-bottom: 7px; }
  .levels button { padding-top: 3px; padding-bottom: 2px; }
  .playbtn { padding: 8px 10px 7px; }
  .tally { margin-top: 6px; }
}
/* (on its side: the rivals and the guides under the how-to, the three
   modes, the book's button and the tally beside them) */
@media (max-height: 460px) and (min-width: 560px) {
  .card > .how { grid-row: 3; margin-bottom: 9px; }
  .card > #pick-level { grid-column: 1; grid-row: 4; }
  .card > .guides-row { grid-column: 1; grid-row: 5; margin-bottom: 0; }
  .card > .playbtn { grid-column: 2; grid-row: 4; }
  .card > .tally { grid-column: 2; grid-row: 5; }
}