/* FML (Flashy Memory Light)
   Same family as the other games: navy table, cream tiles. Four coloured lights on a 2x2 board.
   Dark-first, with a light version. */

:root {
  --bg: #e3ebf3;
  --bg-dot: #cfdbe7;
  --surface: #ffffff;
  --surface-edge: #cbd8e5;
  --ink: #152230;
  --muted: #5b6f84;
  --cell: #d5e1ec;
  --cell-edge: #b9cadb;
  --tile: #f4e9cf;
  --tile-ink: #3a2f17;
  --tile-edge: #cbb98f;
  --accent: #3e6fe0;
  --accent-edge: #2a52b3;
  --good: #2fae6c;
  --bad: #e2604f;
  --dl: #7fc4ee;
  --tl: #3b7fd4;
  --dw: #ee8aa4;
  --mult-ink: #10202b;
  --water: #2aa7f0;
  --steel: #a9b8c6;
  --steel-case: #6a7d90;
  --steel-shine: #e6eef5;
  --brass: #d39a4c;
  --brass-case: #8f5e22;
  --brass-shine: #f6d6a2;
  --cell-fixed: #c8d5e2;
  --rock: #8a96a2;
  --rock-line: #6b7782;
  --drain: #2a3b4b;
  --font: "Outfit", ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color-scheme: light dark;
}
/* dark: follows the device unless the player has picked a side in Settings */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #111c26;
    --bg-dot: #1a2835;
    --surface: #182633;
    --surface-edge: #24384a;
    --ink: #eef3f8;
    --muted: #8ea2b6;
    --cell: #1f3242;
    --cell-edge: #14222d;
    --accent: #5b86f0;
    --accent-edge: #3b63c7;
    --good: #4fc28c;
    --bad: #ee6f5f;
    --water: #39b7ff;
    --steel: #7e93a6;
    --steel-case: #3f5366;
    --steel-shine: #b9c9d7;
    --cell-fixed: #172734;
    --rock: #4c5c6b;
    --rock-line: #34424f;
    --drain: #0c151d;
  }
}
:root[data-theme="dark"] {
  --bg: #111c26;
  --bg-dot: #1a2835;
  --surface: #182633;
  --surface-edge: #24384a;
  --ink: #eef3f8;
  --muted: #8ea2b6;
  --cell: #1f3242;
  --cell-edge: #14222d;
  --accent: #5b86f0;
  --accent-edge: #3b63c7;
  --good: #4fc28c;
  --bad: #ee6f5f;
  --water: #39b7ff;
  --steel: #7e93a6;
  --steel-case: #3f5366;
  --steel-shine: #b9c9d7;
  --cell-fixed: #172734;
  --rock: #4c5c6b;
  --rock-line: #34424f;
  --drain: #0c151d;
}

html, body { margin: 0; height: 100%; overflow: hidden; }

/* every screen fits the height it's given: sizes shrink on short screens */

/* ---- type ---- */

.heading { font-size: 1.6rem; margin: 0; font-weight: 900; letter-spacing: -0.01em; text-align: center; }
.lede { margin: 0; font-size: 1.05rem; color: var(--muted); text-align: center; }
.date { margin: 6px 0 0; text-align: center; color: var(--muted); font-weight: 700; }
.quiet { margin: 0; color: var(--muted); text-align: center; }

.lede[hidden], .breakdown[hidden], .today-line[hidden] { display: none; }

/* ---- buttons ---- */

button:focus-visible { outline: 3px solid var(--water); outline-offset: 3px; }
.big {
  appearance: none; border: 0; width: 100%;
  border-radius: 16px;
  background: var(--accent);
  box-shadow: 0 5px 0 var(--accent-edge);
  color: #fff;
  font-size: clamp(1.05rem, 2.6vh, 1.25rem); font-weight: 900;
  padding: clamp(11px, 2vh, 16px) 20px;
  margin-bottom: 5px;
  transition: transform 0.06s, box-shadow 0.06s;
}
.big:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 var(--accent-edge); }

.big.secondary:active:not(:disabled) { box-shadow: 0 1px 0 var(--surface-edge); }
.big.confirm { background: var(--brass); color: var(--mult-ink); box-shadow: 0 5px 0 #c76983; }

.soft:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--surface-edge); }
.soft:disabled { opacity: 0.5; }
.soft[hidden], .big[hidden] { display: none; }

/* ---- menu ---- */

.menu-row { display: flex; gap: 10px; flex: none; }

/* ---- people lists (leaderboard) ---- */
.people { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(5px, 1vh, 8px); min-height: 0; overflow: hidden; align-content: start; }

.people .state { margin-left: auto; font-size: 0.95rem; color: var(--muted); font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.people .state b { color: var(--ink); font-size: 1.05rem; }
.people .state.is-playing { color: var(--brass); }

.ranks .pos.p1 { color: var(--brass); }
.ranks .tag { font-size: 0.72rem; font-weight: 900; color: var(--accent); margin-left: 6px; }

/* ---- the game ---- */
.game { justify-content: flex-start; gap: clamp(6px, 1.2vh, 10px); }
.hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; flex: none; }
.hud-title { margin: 0; text-align: center; font-weight: 900; font-size: 1.05rem; letter-spacing: -0.01em; }

/* ---- paused ---- */
.pause-badge {
  width: 76px; height: 76px; border-radius: 22px;
  background: var(--water); box-shadow: 0 6px 0 #1a7fbd;
  display: grid; place-items: center; fill: var(--mult-ink);
  transform: rotate(-6deg);
}

/* ---- results ---- */

.done-head .k { margin: 0; color: var(--muted); font-weight: 800; }

.breakdown { margin: 0; color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; text-align: center; }

.done-buttons .two { display: flex; gap: 10px; }
.done-board { flex: 1 1 0; min-height: 0; }
.review {
  margin: 0; padding: 0; list-style: none; flex: 0 1 auto; min-height: 0; overflow: hidden;
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px 10px; align-content: start;
}
.review li {
  display: flex; align-items: center; gap: 8px; min-width: 0;
  padding: 6px 12px; border-radius: 12px; background: var(--surface); border: 1.5px solid var(--surface-edge);
  font-weight: 900; font-size: clamp(0.85rem, 2.1vh, 1rem);
}
.review .dir { color: var(--muted); font-weight: 800; flex: none; }
.review .w { letter-spacing: 0.03em; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.review .p { margin-left: auto; color: var(--good); font-variant-numeric: tabular-nums; }
.review .none { grid-column: 1 / -1; background: none; border: 0; justify-content: center; color: var(--muted); }

/* ---- panels fill the whole screen ---- */
.back {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; flex: none;
  border: 0; background: var(--bg); color: var(--ink); font: inherit; font-weight: 900;
  padding: 5px 12px 5px 6px; margin-left: 0; min-height: 32px; box-sizing: border-box; border-radius: 12px; cursor: pointer;
}

/* (top-aligned like the other screens) */

#board .people { flex: 1 1 auto; }

.ri {
  flex: none; width: 38px; height: 38px; border-radius: 11px;
  background: var(--tile); color: var(--tile-ink); box-shadow: 0 4px 0 var(--tile-edge);
  display: grid; place-items: center; font-weight: 900; font-size: 1rem;
}

.ri-sum { background: var(--accent); color: #fff; box-shadow: 0 4px 0 var(--accent-edge); font-size: 1.4rem; }

/* stats: small grouped rows so the whole page fits without scrolling */
#stat-grid { display: grid; gap: clamp(8px, 1.6vh, 14px); }

.stat { background: var(--bg); border-radius: 14px; padding: clamp(6px, 1.2vh, 10px) 6px; display: grid; gap: 2px; justify-items: center; text-align: center; }

/* ---- tutorial ---- */

.tut-top { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; flex: none; min-height: 40px; }
.tut-dots { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; justify-self: center; }

.tut-dots li.on { width: 22px; background: var(--accent); }
.tut-dots li.past { background: var(--good); }

.tut-stage { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: clamp(6px, 1.4vh, 12px); text-align: center; }
.tut-stage .play-area { flex: 1 1 0; min-height: 180px; }
.tut-card { background: var(--surface); border: 1.5px solid var(--surface-edge); border-radius: 18px; padding: 14px 16px; display: grid; gap: 12px; justify-items: center; }
.tut-row { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; }
.tut-label { display: grid; gap: 4px; justify-items: center; font-weight: 800; font-size: 0.85rem; color: var(--muted); }
.tut-sum { font-weight: 900; font-size: 1.1rem; text-align: center; }

.tut-note.good { color: var(--good); }

/* ---- testing mode: a strip along the bottom ---- */
.test-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  padding: 5px 12px calc(env(safe-area-inset-bottom) + 5px);
  background: repeating-linear-gradient(-45deg, #f2b23a 0 14px, #f5c25c 14px 28px);
  color: #2b1d00; font-weight: 900; font-size: 13px; letter-spacing: .04em;
  text-align: center; text-transform: uppercase; box-shadow: 0 -2px 0 #c98a14;
}

body.testing #app { padding-bottom: calc(env(safe-area-inset-bottom) + 36px); }

/* Discord on phones covers the top of the game with its own bar: keep clear of it */
html.discord-mobile #app { padding-top: calc(env(safe-area-inset-top) + 60px); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---- terms and privacy pages ---- */

.doc .quiet { margin-bottom: 20px; text-align: left; }
.doc a { color: var(--accent); }

/* ---- big screens (desktop, tablet): the whole game grows with the window instead of staying phone-sized ---- */
@media (min-height: 800px) and (min-width: 760px) {
  html { font-size: clamp(16px, 2vh, 26px); }
  body { font-size: clamp(17px, 2.1vh, 28px); }
  .screen { max-width: clamp(440px, 56vh, 760px); }
}

/* ---- settings ---- */

:root[data-theme="dark"] { color-scheme: dark; }

/* sheets scroll when their content doesn't fit (a long leaderboard, a phone on its side) rather than being cut off */
.ranks { overflow-y: auto; }
@media (max-height: 480px) {
  #stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  #stat-grid > *, .stat-group, .stat-row, .stat { min-width: 0; }
  .stat .n { font-size: 1.15rem; }
  .stat .k { font-size: 0.78rem; }
}

/* the tutorial on a short screen: tighter text and buttons so the steps still fit */
@media (max-height: 480px) {
  .tut { gap: 6px; }
  .tut .heading { font-size: 1.25rem; }
  .tut .lede { font-size: 0.95rem; line-height: 1.3; }
  .tut-nav .big { padding-top: 9px; padding-bottom: 9px; min-height: 0; }
  .tut-note { min-height: 0; margin: 0; }
}

/* shown on the first tutorial step for players who have been through an older tutorial */

@media (max-height: 480px) { .tut-updated { padding: 2px 10px; font-size: 0.72rem; } }

/* ================================================================ FML
   The four lights. Each keeps its own colour and its own square, always:
   top left pink, top right cyan, bottom left lime, bottom right amber: the colours of the game's icon. */
:root {
  --p0: #ff2bd6; --p0e: #b81a99;
  --p1: #00e5ff; --p1e: #00a3b8;
  --p2: #b6ff1a; --p2e: #7fb30e;
  --p3: #ffb000; --p3e: #b87d00;
}

/* ---- the name: three lit tiles and a light ---- */
.logo { display: flex; gap: 5px; justify-content: center; align-items: center; }
.logo i {
  width: clamp(24px, 4.2vh, 34px); height: clamp(26px, 4.6vh, 37px); border-radius: 7px;
  background: var(--c); color: #111c26; box-shadow: 0 3px 0 var(--e);
  display: grid; place-items: center;
  font-style: normal; font-weight: 900; font-size: clamp(0.95rem, 2.4vh, 1.25rem);
}
.logo i.c0 { --c: var(--p0); --e: var(--p0e); }
.logo i.c1 { --c: var(--p1); --e: var(--p1e); }
.logo i.c2 { --c: var(--p2); --e: var(--p2e); }
.logo b {
  width: clamp(10px, 1.8vh, 14px); height: clamp(10px, 1.8vh, 14px); border-radius: 50%;
  background: var(--p3); box-shadow: 0 0 10px var(--p3); margin-left: 3px;
}
.big-logo { gap: 7px; }
.big-logo i { width: clamp(44px, 12vw, 58px); height: clamp(48px, 13vw, 63px); font-size: clamp(1.5rem, 4.4vh, 2rem); border-radius: 11px; box-shadow: 0 5px 0 var(--e); }
.big-logo b { width: 16px; height: 16px; margin-left: 4px; }
.small-logo { gap: 3px; }
.small-logo i { width: 22px; height: 26px; font-size: 0.85rem; border-radius: 6px; box-shadow: 0 2px 0 var(--e); }
.small-logo b { width: 8px; height: 8px; margin-left: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.date { margin-top: clamp(8px, 1.6vh, 14px); }
.tagline { margin: clamp(6px, 1.2vh, 10px) 0 0; text-align: center; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.72rem; color: var(--muted); }
.logo-spin i { animation: hop 1.2s ease-in-out infinite; }
.logo-spin i:nth-child(2) { animation-delay: 0.15s; }
.logo-spin i:nth-child(3) { animation-delay: 0.3s; }
.logo-spin b { animation: blink 1.2s ease-in-out infinite 0.45s; }
@keyframes hop { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@keyframes blink { 0%, 100% { opacity: 0.35; } 50% { opacity: 1; } }

/* ---- the game ---- */
.game { justify-content: flex-start; gap: clamp(6px, 1.2vh, 10px); }
.hud { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; flex: none; }
.play-area {
  flex: 1 1 0; min-height: 0; container-type: size;
  display: flex; justify-content: center; align-items: center;
}
.pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 2px 12px; border-radius: 999px;
  background: var(--surface); border: 1.5px solid var(--surface-edge); font-weight: 900; font-size: 0.9rem;
  font-variant-numeric: tabular-nums; white-space: nowrap;
}
.pill::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--p3); box-shadow: 0 0 6px var(--p3); }
.hud .pill { justify-self: end; font-size: 0.8rem; padding: 2px 9px; }
.hud .logo { min-width: 0; }

/* the board: 16 dark grey squares that light up one at a time. --s is the whole board; everything is sized from it so it always fits */
.pads {
  --s: min(100cqw, 100cqh, 480px);
  --off: #3a4450; --off-edge: #262e38;
  width: var(--s); height: var(--s); flex: none;
  display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(4, 1fr);
  gap: calc(var(--s) * 0.03); padding: calc(var(--s) * 0.03);
  background: var(--surface); border: 1.5px solid var(--surface-edge); border-radius: calc(var(--s) * 0.07);
  transition: box-shadow 0.15s;
}
.pad {
  appearance: none; border: 0; padding: 0; min-width: 0; min-height: 0;
  border-radius: calc(var(--s) * 0.04);
  background: var(--off); box-shadow: 0 calc(var(--s) * 0.014) 0 var(--off-edge);
  transition: background 0.07s, transform 0.07s, box-shadow 0.07s;
  touch-action: manipulation; cursor: pointer;
}
.pad.lit {
  background: var(--lit, #ffd23a); transform: translateY(calc(var(--s) * 0.008));
  box-shadow: 0 0 calc(var(--s) * 0.05) var(--lit, #ffd23a), 0 calc(var(--s) * 0.006) 0 var(--lit-edge, #b78d00);
}
/* while the lights play, taps do nothing; your turn is the board's blue ring */
.pads.watching .pad { pointer-events: none; cursor: default; }
.pads.go { box-shadow: 0 0 0 3px var(--accent); }
.pads.go .pad:active:not(.lit) { background: var(--off); }
.pads.locked .pad { pointer-events: none; cursor: default; }
.pads.static .pad { pointer-events: none; }
.pads.static .pad:nth-child(3), .pads.static .pad:nth-child(6), .pads.static .pad:nth-child(12) { background: var(--lit); box-shadow: 0 0 calc(var(--s) * 0.05) var(--lit), 0 calc(var(--s) * 0.006) 0 var(--lit-edge); }
.pads.wrong { animation: shake 0.35s; box-shadow: 0 0 0 3px var(--bad); }
.pad.bad { background: #5a2530; outline: 3px solid #fff; outline-offset: -3px; }
@keyframes shake { 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
.meter { flex: none; height: 8px; border-radius: 4px; background: var(--surface-edge); overflow: hidden; margin: 2px 6px; }
.meter i { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--accent); transition: width 0.12s; }

/* ---- results ---- */
.final .unit { display: block; font-size: 1rem; letter-spacing: 0; color: var(--muted); font-weight: 800; margin-top: 4px; }
.done-pads { flex: 1 1 0; min-height: 0; container-type: size; display: flex; justify-content: center; align-items: center; }
.done-pads .pads { --s: min(100cqw, 100cqh, 260px); }

/* ---- how to play icons ---- */
.ri-lights { background: var(--surface-edge); padding: 5px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px; box-shadow: 0 4px 0 var(--surface-edge); }
.ri-lights span { border-radius: 2px; background: #3a4450; }
.ri-lights span:nth-child(3) { background: hsl(38 95% 58%); } .ri-lights span:nth-child(6) { background: hsl(158 95% 58%); } .ri-lights span:nth-child(12) { background: hsl(278 95% 58%); }
.ri-lit { background: var(--p3); box-shadow: 0 4px 0 var(--p3e); }
.ri-lit svg { stroke: var(--tile-ink); }
.tut-stage .pads { --s: min(100cqw, 100cqh, 300px); }
.people .state .t { display: inline-block; min-width: 3.4em; margin-left: 8px; font-size: 0.85rem; color: var(--muted); font-weight: 700; text-align: right; }
.today-line b { font-size: 1.15rem; }
#resume-note { max-width: 300px; }

/* ---- colour-blind mode: blue and orange instead of green and red (the squares are one colour, so it only changes right and wrong) ---- */

:root[data-cb="1"] { --p0: #d55e00; --p0e: #9a4300; --p1: #0072b2; --p1e: #00507d; --p2: #cc79a7; --p2e: #9a4f7c; --p3: #f0e442; --p3e: #b3a91c; }
:root[data-cb="1"] .pad.bad { outline-style: dashed; }
:root[data-cb="1"] .pads.wrong { box-shadow: 0 0 0 3px var(--bad), 0 0 0 6px #fff; }

/* ---- practice: a blue strip along the bottom ---- */

/* Practice: a quiet button, almost the colour of the page, so the eye stays on Play and Results */

/* the line above the lights that says what to do: Watch the lights / Your turn. It sits right on top of the board, and the two are centred together */
#play-area { flex-direction: column; gap: clamp(10px, 2vh, 18px); }
#play-area .pads { --s: min(100cqw, calc(100cqh - 5.2rem), 480px); }
.turn-head { flex: none; text-align: center; min-height: 3.6rem; }
.turn-title { margin: 0; font-weight: 900; font-size: clamp(1.5rem, 4.6vh, 2rem); letter-spacing: -0.02em; line-height: 1.1; }
.turn-sub { margin: 2px 0 0; color: var(--muted); font-weight: 700; font-size: 0.95rem; font-variant-numeric: tabular-nums; }

/* Podium rows on the leaderboard: gold, silver and bronze behind the whole row */
   /* same inset on every row so the podium colour has room and names still line up */

/* other games: a button on the menu opens a popup with the other games' app icons */

          /* the main block sits centred between the top and the two buttons, which stay at the bottom */

/* today's leaderboard, locked until today's puzzle is finished */

/* every panel ends with one blue Close button at the bottom (there is no Back button at the top) */
   /* the last leaderboard row always clears the Close button */

/* Surrender: a quiet red link on the pause screen, and the red "Surrendered" on the leaderboard and menu */

/* Languages are switched off (LANGUAGES_ON in client/i18n.js): no Language button, no leaderboard flag */
/* every panel: the content sits in the vertical middle and only the Close button stays at the bottom */

/* Other games on a short screen (a phone on its side): three across, so all the games and Close fit without scrolling */
@media (max-height: 520px) {
  .other-games { grid-template-columns: repeat(3, 1fr); gap: 8px 12px; }
  .other-games img { width: clamp(40px, 15vh, 64px); }
  .other-games button { gap: 4px; }
}

/* a phone on its side: the menu and the result screen are taller than the screen, so they scroll from the top (they used to be cut off at both ends) */
@media (max-height: 520px) {
  .screen.menu, .screen.done { overflow-y: auto; overscroll-behavior: contain; justify-content: flex-start; padding-bottom: 8px; }
}