/* Midnight look for the puzzles (approved 7 Nov, puzzles/samples/sample-1-midnight.png): a dark page, smoked glass
   panels with thin luminous edges, amber light. Drawn entirely in CSS and SVG, so it weighs nothing.
   As in kit.css, the screen is laid out on the sample's 1024 x 1536 frame: --u is one sample pixel.

   TONES. Blue is the approved one and the default. <html data-tone="pearl|red|black|green"> (set by kit/tone.js) swaps
   the page, its glow, the panels, the text and the game pieces. Every colour of every Midnight game comes from these
   variables: a game's own CSS never names a colour. Amber is the light itself, so it stays in every tone. */
:root {
  --u: calc(min(100vw, 66.667vh) / 1024);
  --board: calc(960 * var(--u));

  /* page */
  --bg-0: #020816; --bg-1: #04122f; --bg-2: #072251; --bg-sheen: none;
  /* text and edges */
  --ink: #bcd9ff; --ink-soft: #8fb4e6;
  --edge: rgba(84, 150, 240, 0.62); --edge-bright: rgba(110, 175, 255, 0.85);
  /* glow */
  --glow: rgba(50, 120, 235, 0.22); --glow-strong: rgba(50, 130, 255, 0.35); --sheen: rgba(160, 205, 255, 0.14);
  /* panels */
  --glass: linear-gradient(180deg, rgba(16, 48, 98, 0.72), rgba(6, 24, 58, 0.84));
  --sheet: linear-gradient(180deg, rgba(16, 48, 100, 0.97), rgba(5, 22, 56, 0.98));
  --veil: rgba(2, 8, 24, 0.62);
  --wave-a: #2a6fd6; --wave-b: #174f9f; --scroll: rgba(84, 150, 240, 0.5);
  /* game pieces */
  --cell: rgba(8, 26, 58, 0.62); --cell-edge: rgba(70, 130, 220, 0.42);
  --wall-a: #2d619f; --wall-b: #0e2f60; --wall-edge: rgba(130, 180, 245, 0.55);
  --mirror: #79cdff; --mirror-halo: #2f9bff; --fixed: #9db0c9; --bolt: #d8e4f4; --bolt-edge: #51657f;
  /* a crystal not earned yet */
  --f1: #5a6f94; --f2: #46597c; --f3: #3a4b6b; --f4: #33435f; --f5: #2b3952; --f6: #243046;
  /* the light */
  --amber: #ffc53d; --amber-rgb: 255, 190, 60; --go-ink: #ffe3a1; --focus: #ffe08a; --warn: #ff6b8b;
  --light-halo: #ff9a1f; --light-body: #ffb52e; --light-core: #fff0c2;
  --lamp-fill: rgba(40, 24, 4, 0.55); --lamp-edge: #f9a825; --lamp-core: #ffe082; --lamp-halo: #ffa726;
  /* playing cards look like playing cards in every tone */
  --card-ivory: #fffaf0; --card-ivory-2: #f4e7cc; --card-black: #161210; --card-red: #b3141b;
  /* what hover and press do: dark panels brighten, pale ones dim */
  --hover: 1.25; --press: 0.85;
}
:root[data-tone="red"] {
  --bg-0: #120204; --bg-1: #2a060c; --bg-2: #560d1a;
  --ink: #ffd6d6; --ink-soft: #eda3a8;
  --edge: rgba(240, 84, 100, 0.62); --edge-bright: rgba(255, 120, 130, 0.85);
  --glow: rgba(235, 50, 70, 0.24); --glow-strong: rgba(255, 50, 70, 0.38); --sheen: rgba(255, 190, 190, 0.14);
  --glass: linear-gradient(180deg, rgba(98, 16, 30, 0.72), rgba(58, 6, 16, 0.84));
  --sheet: linear-gradient(180deg, rgba(100, 16, 32, 0.97), rgba(56, 5, 14, 0.98));
  --veil: rgba(24, 2, 6, 0.62);
  --wave-a: #d62a45; --wave-b: #9f172c; --scroll: rgba(240, 84, 100, 0.5);
  --cell: rgba(58, 8, 18, 0.62); --cell-edge: rgba(220, 70, 90, 0.42);
  --wall-a: #9f2d40; --wall-b: #600e1c; --wall-edge: rgba(245, 130, 145, 0.55);
  --mirror: #ffc2c7; --mirror-halo: #ff3d55; --fixed: #c9a0a6; --bolt: #f4dcdf; --bolt-edge: #7f5157;
  --f1: #94606a; --f2: #7c4853; --f3: #6b3a44; --f4: #5f333d; --f5: #522b34; --f6: #462429;
  --warn: #8fe3ff;
}
:root[data-tone="green"] {
  --bg-0: #010d08; --bg-1: #032015; --bg-2: #07442c;
  --ink: #c4f5dc; --ink-soft: #8fdcb6;
  --edge: rgba(60, 210, 140, 0.62); --edge-bright: rgba(100, 235, 170, 0.85);
  --glow: rgba(40, 210, 130, 0.22); --glow-strong: rgba(40, 230, 140, 0.34); --sheen: rgba(170, 255, 210, 0.14);
  --glass: linear-gradient(180deg, rgba(12, 78, 50, 0.72), rgba(4, 42, 26, 0.84));
  --sheet: linear-gradient(180deg, rgba(12, 80, 52, 0.97), rgba(4, 40, 25, 0.98));
  --veil: rgba(1, 16, 10, 0.62);
  --wave-a: #1fb774; --wave-b: #12794b; --scroll: rgba(60, 210, 140, 0.5);
  --cell: rgba(5, 44, 28, 0.62); --cell-edge: rgba(50, 180, 120, 0.42);
  --wall-a: #24875c; --wall-b: #0b4a30; --wall-edge: rgba(130, 240, 185, 0.55);
  --mirror: #7ff0bd; --mirror-halo: #1fe08c; --fixed: #9cc9b2; --bolt: #d8f4e6; --bolt-edge: #517f68;
  --f1: #5a9478; --f2: #467c63; --f3: #3a6b54; --f4: #335f4a; --f5: #2b5240; --f6: #244635;
}
:root[data-tone="black"] {
  --bg-0: #000000; --bg-1: #060606; --bg-2: #181818;
  --ink: #ececec; --ink-soft: #b0b0b0;
  --edge: rgba(205, 205, 205, 0.5); --edge-bright: rgba(230, 230, 230, 0.75);
  --glow: rgba(255, 255, 255, 0.1); --glow-strong: rgba(255, 255, 255, 0.18); --sheen: rgba(255, 255, 255, 0.12);
  --glass: linear-gradient(180deg, rgba(34, 34, 34, 0.72), rgba(10, 10, 10, 0.86));
  --sheet: linear-gradient(180deg, rgba(30, 30, 30, 0.97), rgba(8, 8, 8, 0.98));
  --veil: rgba(0, 0, 0, 0.66);
  --wave-a: #6a6a6a; --wave-b: #3c3c3c; --scroll: rgba(200, 200, 200, 0.4);
  --cell: rgba(22, 22, 22, 0.7); --cell-edge: rgba(170, 170, 170, 0.3);
  --wall-a: #4a4a4a; --wall-b: #1c1c1c; --wall-edge: rgba(210, 210, 210, 0.45);
  --mirror: #e6e6e6; --mirror-halo: #ffffff; --fixed: #8e8e8e; --bolt: #e2e2e2; --bolt-edge: #5a5a5a;
  --f1: #6e6e6e; --f2: #585858; --f3: #4a4a4a; --f4: #404040; --f5: #363636; --f6: #2c2c2c;
}
/* Pearl is the one pale tone: dark text, and the amber is deepened so the light still shows */
:root[data-tone="pearl"] {
  --bg-0: #cfcabf; --bg-1: #e6e2d8; --bg-2: #fbf9f3;
  --bg-sheen: radial-gradient(ellipse 60% 40% at 18% 20%, rgba(255, 208, 224, 0.38), transparent),
    radial-gradient(ellipse 60% 40% at 82% 76%, rgba(198, 224, 255, 0.42), transparent);
  --ink: #2c2a33; --ink-soft: #5e5a66;
  --edge: rgba(120, 112, 130, 0.55); --edge-bright: rgba(130, 122, 140, 0.8);
  --glow: rgba(150, 140, 170, 0.28); --glow-strong: rgba(120, 110, 140, 0.35); --sheen: rgba(255, 255, 255, 0.85);
  --glass: linear-gradient(180deg, rgba(255, 253, 248, 0.82), rgba(236, 232, 224, 0.9));
  --sheet: linear-gradient(180deg, rgba(255, 254, 250, 0.98), rgba(234, 230, 222, 0.98));
  --veil: rgba(60, 55, 70, 0.4);
  --wave-a: #a9a3b3; --wave-b: #c7c1cc; --scroll: rgba(120, 112, 130, 0.5);
  --cell: rgba(255, 255, 255, 0.55); --cell-edge: rgba(130, 122, 145, 0.4);
  --wall-a: #b8b2c0; --wall-b: #8d8799; --wall-edge: rgba(90, 84, 105, 0.55);
  --mirror: #3c4a6b; --mirror-halo: #8ea6d9; --fixed: #6f6a7a; --bolt: #f2efe9; --bolt-edge: #4e4a5a;
  --f1: #d4cfdb; --f2: #bfb9c8; --f3: #aba5b6; --f4: #9d97a9; --f5: #8e889b; --f6: #7f798d;
  --amber: #e89200; --amber-rgb: 225, 135, 0; --go-ink: #7d4700; --focus: #a85f00; --warn: #d81b60;
  --light-halo: #ffb347; --light-body: #f08a00; --light-core: #ffe9b8;
  --lamp-fill: rgba(255, 240, 210, 0.7); --lamp-edge: #d97f00; --lamp-core: #ffb300; --lamp-halo: #ffb347;
  --hover: 0.97; --press: 0.9;
}
@supports (height: 1dvh) {
  :root { --u: calc(min(100vw, 66.667dvh) / 1024); }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background-color: var(--bg-0);
  background-image: var(--bg-sheen), radial-gradient(ellipse 90% 70% at 50% 42%, var(--bg-2) 0%, var(--bg-1) 55%, var(--bg-0) 100%);
  background-repeat: no-repeat;
  background-attachment: fixed;
  color: var(--ink);
  font-family: "Avenir Next", "Segoe UI", Roboto, "Helvetica Neue", system-ui, sans-serif;
  font-weight: 400;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: stretch;
}

.screen {
  position: relative;
  width: calc(1024 * var(--u));
  height: 100%;
  padding: max(calc(24 * var(--u)), env(safe-area-inset-top)) calc(32 * var(--u)) 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: calc(22 * var(--u));
}
.screen[hidden], .overlay[hidden] { display: none !important; } /* wide layouts set display on these screens too */

.plate {
  display: flex;
  align-items: center;
  justify-content: center;
  border: max(1px, calc(2 * var(--u))) solid var(--edge);
  border-radius: calc(16 * var(--u));
  background: var(--glass);
  box-shadow: 0 0 calc(14 * var(--u)) var(--glow), inset 0 1px 0 var(--sheen);
}

.bar {
  flex: none;
  width: 100%;
  height: calc(84 * var(--u));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 calc(20 * var(--u));
  border: max(1px, calc(2 * var(--u))) solid var(--edge);
  border-radius: calc(16 * var(--u));
  background: var(--glass);
  box-shadow: 0 0 calc(14 * var(--u)) var(--glow), inset 0 1px 0 var(--sheen);
}
.bar h1 { margin: 0; font-size: calc(50 * var(--u)); font-weight: 400; letter-spacing: 0.01em; line-height: 1; }
.icon { flex: none; width: max(calc(60 * var(--u)), 40px); height: max(calc(60 * var(--u)), 40px); display: grid; place-items: center; color: var(--ink); }
.icon.plain { padding: 0; background: none; border: 0; cursor: pointer; font: inherit; }
.icon svg { width: calc(52 * var(--u)); height: calc(52 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.stats { flex: none; width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: calc(40 * var(--u)); }
.stats .plate { height: calc(68 * var(--u)); font-size: max(calc(36 * var(--u)), 13px); }

.wave { flex: 0 1 auto; min-height: 0; height: calc(100 * var(--u)); margin: auto 0; width: 100%; opacity: 0.7; pointer-events: none; }
.wave path { fill: none; stroke: var(--wave-a); stroke-width: 1.4; vector-effect: non-scaling-stroke; }
.wave path + path { stroke: var(--wave-b); }

.actions {
  flex: none;
  width: 100%;
  padding-bottom: max(calc(22 * var(--u)), env(safe-area-inset-bottom));
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: calc(30 * var(--u));
}
.actions.two { grid-template-columns: 1fr 1fr; }
.btn {
  height: max(calc(86 * var(--u)), 44px);
  padding: 0 calc(8 * var(--u));
  color: var(--ink);
  font: inherit;
  font-size: max(calc(38 * var(--u)), 14px);
  cursor: pointer;
  border: max(1px, calc(2 * var(--u))) solid var(--edge);
  border-radius: calc(16 * var(--u));
  background: var(--glass);
  box-shadow: 0 0 calc(14 * var(--u)) var(--glow), inset 0 1px 0 var(--sheen);
  transition: filter 0.15s ease, border-color 0.15s ease;
}
.btn:hover:not(:disabled) { filter: brightness(var(--hover)); }
.btn:active:not(:disabled) { filter: brightness(var(--press)); }
.btn:disabled { opacity: 0.4; cursor: default; }
.btn.go { color: var(--go-ink); border-color: var(--amber); box-shadow: 0 0 calc(18 * var(--u)) rgba(var(--amber-rgb), 0.45), inset 0 1px 0 var(--sheen); }

/* Crystals: the score mark of every Midnight puzzle */
.crystal .f1 { fill: var(--f1); }
.crystal .f2 { fill: var(--f2); }
.crystal .f3 { fill: var(--f3); }
.crystal .f4 { fill: var(--f4); }
.crystal .f5 { fill: var(--f5); }
.crystal .f6 { fill: var(--f6); }
.crystal.lit .f1 { fill: #fff0b3; }
.crystal.lit .f2 { fill: #ffd54f; }
.crystal.lit .f3 { fill: #ffb300; }
.crystal.lit .f4 { fill: #ffc107; }
.crystal.lit .f5 { fill: #f59e0b; }
.crystal.lit .f6 { fill: #d98606; }

/* Level list */
.list-screen .count { flex: none; width: calc(440 * var(--u)); height: calc(64 * var(--u)); font-size: max(calc(34 * var(--u)), 13px); }
.list {
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  padding: 0 calc(8 * var(--u)) calc(16 * var(--u));
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: var(--scroll) transparent;
}
.chapter {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(26 * var(--u));
  margin: calc(18 * var(--u)) 0 calc(20 * var(--u));
  font-size: max(calc(44 * var(--u)), 16px);
  font-weight: 400;
  color: var(--ink);
}
.chapter::before, .chapter::after { content: ""; height: max(1px, calc(2 * var(--u))); background: linear-gradient(90deg, transparent, var(--edge)); }
.chapter::after { background: linear-gradient(90deg, var(--edge), transparent); }
.lv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(212 * var(--u)), 1fr)); gap: calc(14 * var(--u)); }
.lv {
  height: calc(146 * var(--u));
  min-height: 56px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: calc(10 * var(--u));
  color: var(--ink);
  font: inherit;
  cursor: pointer;
  border: max(1px, calc(2 * var(--u))) solid var(--edge);
  border-radius: calc(20 * var(--u));
  background: var(--glass);
  box-shadow: inset 0 1px 0 var(--sheen);
  transition: filter 0.15s ease;
}
.lv b { font-size: max(calc(52 * var(--u)), 18px); font-weight: 400; line-height: 1; }
.lv:hover { filter: brightness(var(--hover)); }
.lv.now { border-color: var(--amber); box-shadow: 0 0 calc(18 * var(--u)) rgba(var(--amber-rgb), 0.5), inset 0 0 calc(14 * var(--u)) rgba(var(--amber-rgb), 0.12); }
.marks { display: flex; gap: calc(9 * var(--u)); }
.marks svg { display: block; width: max(calc(30 * var(--u)), 11px); height: auto; }
.marks svg.lit { filter: drop-shadow(0 0 2px rgba(var(--amber-rgb), 0.8)); }

/* Cards over the game */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: grid;
  place-items: center;
  background: var(--veil);
}
.sheet {
  width: calc(820 * var(--u));
  padding: calc(50 * var(--u)) calc(54 * var(--u));
  text-align: center;
  border: max(1px, calc(3 * var(--u))) solid var(--edge-bright);
  border-radius: calc(36 * var(--u));
  background: var(--sheet);
  box-shadow: 0 0 calc(40 * var(--u)) var(--glow-strong);
}
.sheet h2 { margin: 0; font-size: calc(74 * var(--u)); font-weight: 400; line-height: 1.15; }
.big-crystals { display: flex; justify-content: center; gap: calc(76 * var(--u)); margin: calc(44 * var(--u)) 0 calc(36 * var(--u)); }
.big-crystals svg { display: block; width: calc(104 * var(--u)); height: auto; }
.big-crystals svg.lit { filter: drop-shadow(0 0 calc(12 * var(--u)) rgba(var(--amber-rgb), 0.75)); }
.sheet p { margin: 0 0 calc(44 * var(--u)); font-size: calc(44 * var(--u)); line-height: 1.25; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: calc(30 * var(--u)); }
.pair.with-quit { grid-template-columns: repeat(3, 1fr); gap: calc(20 * var(--u)); }
.pair a.btn { display: grid; place-items: center; text-decoration: none; }
.pause-card p { color: var(--ink-soft); }

/* Keyboard, TV remote and controller focus */
:focus { outline: none; }
:focus-visible, body.nav :focus { outline: max(2px, calc(4 * var(--u))) solid var(--focus); outline-offset: max(1px, calc(3 * var(--u))); }

/* Wide screens: desktop, TV and phones held sideways. The board on the left, everything else beside it. */
@media (min-aspect-ratio: 5/4) {
  :root {
    --board: min(calc(100vh - 24px), 62vw);
    --panel: min(calc(100vw - var(--board) - 56px), 520px);
    --u: calc(var(--panel) / 900);
  }
  @supports (height: 1dvh) {
    :root { --board: min(calc(100dvh - 24px), 62vw); }
  }
  .screen {
    width: 100%;
    padding: 0;
    display: grid;
    grid-template-columns: var(--board) var(--panel);
    grid-template-rows: 1fr auto auto auto auto 1fr;
    grid-template-areas: "board ." "board bar" "board stats" "board tray" "board actions" "board .";
    justify-content: center;
    align-items: center;
    column-gap: 24px;
    row-gap: calc(28 * var(--u));
  }
  .bar { grid-area: bar; }
  .stats { grid-area: stats; }
  .actions { grid-area: actions; padding: 0; }
  .wave { display: none; }
  .screen.list-screen {
    display: flex;
    width: min(100%, calc(1500 * var(--u)));
    padding: calc(24 * var(--u)) 24px 0;
    row-gap: calc(18 * var(--u));
  }
}