/* The level campaign (drift/levels.js): world tints, the level select, the
   level-complete card and the dialog frame the garages share. Every build. */

body[data-course="level"] { transition: background-color .4s; }
/* World colours (tokens declared in style.css): --world is the accent for text,
   pips and rims; --world-ink is dark text on the page; --world-soft a pale tint.
   Any element with data-world takes them: the body while a level plays, and the
   level select and its world tabs, each in its own world's colours.
   Each world is also a place: --mat is the tabletop under the tray (with its
   two line tints), --rim the tray's rim (lit edge, front face, seam) and
   --shade its shadows on that mat. The daily and the Workbench keep the house
   green mat and cream rim from style.css. Cold Storage: a blue-grey mat and a
   brushed aluminium rim. Fast Lane: a wheat mat and a brass rim. Night Shift:
   a dusk mat and a violet rim; still light enough for the header's dark ink. */
[data-world="cold"] { --world: #2f6f98; --world-ink: #1d3a4c; --world-soft: #e1edf4;
  --mat: #d2dde3; --mat-line: #e2e9ee; --mat-major: #eef3f6;
  --rim: #e4ebef; --rim-hi: #ffffff; --rim-edge: #9eb0bc; --rim-seam: #08182659; --shade-near: #1c344838; --shade-far: #1c344842; }
[data-world="fastlane"] { --world: #8a6416; --world-ink: #3b3417; --world-soft: #f4ecd2;
  --mat: #e0d8bd; --mat-line: #ebe5d1; --mat-major: #f4f0e3;
  --rim: #e6cd85; --rim-hi: #fff4cf; --rim-edge: #a98234; --rim-seam: #1d160659; --shade-near: #3a2e0e38; --shade-far: #3a2e0e40; }
[data-world="nightshift"] { --world: #6a4fa0; --world-ink: #2c2442; --world-soft: #ebe4f5;
  --mat: #cac4d9; --mat-line: #d8d3e4; --mat-major: #e5e1ee;
  --rim: #5f5087; --rim-hi: #8f80b6; --rim-edge: #3b3058; --rim-seam: #0a061859; --shade-near: #1e163a4a; --shade-far: #1e163a52; }
/* Launchpad and the Workbench are the house teal. Stated outright so that a
   select chapter in them doesn't inherit the world of the level behind it. */
[data-world="launchpad"], [data-world="workbench"], [data-world="lab"] { --world: var(--teal); --world-ink: var(--ink); --world-soft: #e1ecde; }
/* The trophy is the daily board; levels have stars instead. */
body[data-course="level"] #leaderboardButton { display: none; }
/* ---- header identity (levels.js) ------------------------------------------ */
/* A level shows its world where the wordmark was, in the world's colours, and
   "Level 4 of 10" with its pips (sizes and pip colours in style.css, beside the
   rest of the header). The h1 stays for screen readers. */
.world-name, .level-pips { display: none; }
body[data-course="level"] .game-header h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
body[data-course="level"] .world-name { display: block; color: var(--world-ink); text-transform: uppercase; }
body[data-course="level"] .world-name span + span { color: var(--world); }
body[data-course="level"] .level-pips { display: flex; }

/* ---- dialogs --------------------------------------------------------------- */
.pg-dialog { width: min(560px, calc(100vw - 24px)); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; padding: 16px; border: 1px solid #c5d4c7; border-radius: 18px; background: var(--paper); color: var(--ink); box-shadow: 0 24px 90px #132a3655; font-size: 15px; line-height: 1.4; scrollbar-width: thin; }
.pg-dialog::backdrop { background: #152b3073; backdrop-filter: blur(3px); }
.pg-dialog[open] { animation: pg-rise .28s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes pg-rise { from { opacity: 0; transform: translateY(14px) scale(.97); } }
.pg-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.pg-head h2 { margin: 0; font-family: var(--font-display); font-size: 28px; line-height: 1.1; letter-spacing: -.4px; font-weight: 900; }
.pg-head h2 span { color: var(--teal); }
/* The hosted garage (server/web/locker.js) has its own head; same face. */
.garage-dialog .gr-head h2 { font-family: var(--font-display); letter-spacing: -.4px; font-weight: 900; }
.pg-head p { margin: 3px 0 0; font-size: 14px; color: #52685d; display: flex; align-items: center; gap: 6px; }
.pg-close { width: 44px; height: 44px; flex-shrink: 0; border: 1px solid #cbd6c9; border-radius: 50%; background: transparent; color: #64766c; font: 300 27px/1 system-ui; }
.pg-close:hover { background: #e3eade; }
.pg-status { min-height: 18px; margin: 8px 2px 0; color: #52685d; font-size: 12px; }

/* ---- stars ------------------------------------------------------------------ */
.lv-stars { display: inline-flex; gap: 1px; }
.lv-stars i { display: block; width: 15px; height: 15px; }
.lv-stars svg { display: block; width: 100%; height: 100%; fill: #00000026; }
.lv-stars i.on svg { fill: #f2b93b; filter: drop-shadow(0 1px 0 #a8761c); }
.lv-stars-inline i { width: 13px; height: 13px; }
.lv-stars-inline i:not(.on) { display: none; }
.lv-stars-small i { width: 12px; height: 12px; }

/* ---- level select ----------------------------------------------------------- */
/* The select wears the chosen chapter's colours (levels.js sets data-world on
   it, and on each chapter of the route). Launchpad and the Workbench are the
   house teal (the world colours above), even when the page behind is in
   another world. */
.lv-select { width: min(640px, calc(100vw - 24px)); }

/* Today's maze: the first card, with today's actual maze in the daily colours. */
.lv-daily { display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 12px; padding: 9px 16px 9px 9px; border: 0; border-radius: 14px; background: #213e40; color: #f6f3e7; text-align: left; box-shadow: 0 2px 0 #11272a, 0 6px 16px #13293026; transition: transform .12s, box-shadow .12s; }
.lv-daily:hover { transform: translateY(-1px); box-shadow: 0 3px 0 #11272a, 0 10px 20px #1329302e; }
.lv-daily:active { transform: translateY(1px); box-shadow: 0 1px 0 #11272a, 0 3px 8px #13293026; }
.lv-daily.lv-current { box-shadow: 0 2px 0 #11272a, 0 0 0 3px var(--paper), 0 0 0 5px var(--teal); }
.lv-daily-art { flex: 0 0 auto; width: 66px; height: 66px; border-radius: 10px; background: #24333a; box-shadow: 0 0 0 1px #f1eddb40; }
.lv-daily-text { flex: 1; display: grid; gap: 3px; min-width: 0; }
.lv-daily-text strong { font: 900 20px/1.1 var(--font-display); letter-spacing: -.2px; }
.lv-daily-text span { font-size: 13px; line-height: 1.35; color: #c9dccd; }
.lv-daily-go { font: 900 30px/1 var(--font-display); color: #8ce1b9; }

/* The chapters: stops along one route, in order, each in its own colours. The
   line into a chapter is solid once it is open and dashed while it is locked. */
.lv-worlds { position: relative; display: flex; margin: 10px 0 0; padding: 6px 2px 0; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none; }
.lv-worlds::-webkit-scrollbar { display: none; }
.lv-world { position: relative; flex: 1 0 88px; display: grid; justify-items: center; align-content: start; gap: 3px; min-width: 88px; padding: 2px 2px 14px; border: 0; background: none; color: var(--world-ink); }
.lv-world + .lv-world::before { content: ""; position: absolute; top: 18px; left: calc(-50% + 21px); right: calc(50% + 21px); border-top: 3px solid var(--world); border-radius: 2px; opacity: .55; }
.lv-world-locked + .lv-world-locked::before, .lv-world + .lv-world-locked::before { border-top-style: dotted; border-top-color: color-mix(in srgb, var(--world) 45%, #a8a597); opacity: 1; }
.lv-world-n { display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--world); border-radius: 50%; background: #fffdf7; color: var(--world); font: 900 15px/1 var(--font-display); transition: transform .15s; }
.lv-world-n svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.7; }
.lv-world-name { font: 800 14px/1.15 var(--font-display); white-space: nowrap; }
.lv-world-stars { display: inline-flex; align-items: center; gap: 3px; min-height: 15px; color: #61776d; font-size: 12px; font-variant-numeric: tabular-nums; }
.lv-world-stars svg { width: 12px; height: 12px; fill: #f2b93b; }
.lv-world:hover .lv-world-n { transform: translateY(-1px); }
.lv-world[aria-selected="true"] .lv-world-n { background: var(--world); color: #fffdf7; box-shadow: 0 2px 0 color-mix(in srgb, var(--world) 60%, #000); }
/* The chosen chapter opens into its panel below, like a tab into its page. */
.lv-world[aria-selected="true"]::after { content: ""; position: absolute; bottom: 0; left: 50%; translate: -50% 0; border: 9px solid transparent; border-bottom-color: var(--world-soft); border-top-width: 0; }
.lv-world-locked .lv-world-n { border-style: dashed; border-color: color-mix(in srgb, var(--world) 55%, transparent); background: var(--world-soft); }
.lv-world-locked .lv-world-name { opacity: .62; }
.lv-world-locked[aria-selected="true"] .lv-world-n { border-style: solid; border-color: var(--world); background: var(--world); color: #fffdf7; }
.lv-world:focus-visible { outline: none; }
.lv-world:focus-visible .lv-world-n { outline: 2px solid var(--world); outline-offset: 3px; }

/* The chosen chapter: its name as the header, then its levels. */
.lv-chapter { padding: 12px; border-radius: 16px; background: var(--world-soft); }
.lv-chapter-head { margin: 0 2px 11px; }
.lv-chapter-head h3 { margin: 0; color: var(--world-ink); font: 900 22px/1.1 var(--font-display); letter-spacing: -.3px; }
.lv-world-blurb { margin: 2px 0 0; font-size: 14px; color: color-mix(in srgb, var(--world-ink) 78%, transparent); }
.lv-world-opens { display: flex; align-items: center; gap: 5px; margin: 5px 0 0; color: var(--world-ink); font-size: 13px; font-weight: 650; }
.lv-world-opens svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.7; }

.lv-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
.lv-tile { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "thumb thumb" "n info"; align-items: center; gap: 6px 4px; padding: 5px 5px 6px; border: 1px solid color-mix(in srgb, var(--world) 20%, #d6d2c4); border-radius: 12px; background: #fffdf7; color: var(--world-ink); text-align: left;
  box-shadow: 0 2px 0 color-mix(in srgb, var(--world) 22%, #cdc8b8); transition: transform .12s, box-shadow .12s; }
.lv-tile:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 4px 0 color-mix(in srgb, var(--world) 22%, #cdc8b8), 0 8px 16px #17372b1f; }
.lv-tile:active:not(:disabled) { transform: translateY(1px); box-shadow: 0 1px 0 color-mix(in srgb, var(--world) 22%, #cdc8b8); }
.lv-tile:focus-visible { outline: 2px solid var(--world-ink); outline-offset: 2px; }
.lv-thumb { grid-area: thumb; position: relative; display: block; }
.lv-thumb canvas { display: block; width: 100%; aspect-ratio: 1; border-radius: 8px; background: #24333a; }
.lv-tile-n { grid-area: n; min-width: 18px; padding-left: 3px; font: 900 21px/1 var(--font-display); font-variant-numeric: tabular-nums; }
.lv-tile-info { grid-area: info; display: grid; justify-items: end; gap: 3px; min-height: 30px; align-content: center; }
.lv-tile-best { color: #52685d; font: 600 11.5px/1 ui-monospace, "Cascadia Code", Consolas, monospace; font-variant-numeric: tabular-nums; }
.lv-tile .lv-stars i { width: 14px; height: 14px; }
/* The next level is the one filled tile: where a tap should go. */
.lv-tile.lv-next { border-color: var(--world); background: var(--world); color: #fffdf7; box-shadow: 0 3px 0 color-mix(in srgb, var(--world) 60%, #000); }
.lv-tile.lv-next:hover { box-shadow: 0 5px 0 color-mix(in srgb, var(--world) 60%, #000), 0 10px 18px #17372b2e; }
.lv-tile.lv-next .lv-tile-best { color: #fffdf7d9; }
.lv-tile.lv-next .lv-stars svg { fill: #ffffff40; }
.lv-tile.lv-next .lv-stars i.on svg { fill: #ffd56b; filter: none; }
.lv-tile-play { padding-right: 3px; font: 900 15px/1 var(--font-display); }
.lv-tile-play::after { content: " ›"; }
/* The level in play is ringed, like today's maze when that is in play. */
.lv-tile.lv-current { box-shadow: 0 2px 0 color-mix(in srgb, var(--world) 22%, #cdc8b8), 0 0 0 3px var(--world-soft), 0 0 0 5px var(--world-ink); }
.lv-tile.lv-next.lv-current { box-shadow: 0 3px 0 color-mix(in srgb, var(--world) 60%, #000), 0 0 0 3px var(--world-soft), 0 0 0 5px var(--world-ink); }
/* Locked levels keep their world's colours, dimmed, under a lock. */
.lv-tile.lv-locked { cursor: default; border-style: dashed; background: color-mix(in srgb, #fffdf7 55%, var(--world-soft)); box-shadow: none; }
.lv-tile.lv-locked canvas { opacity: .6; }
.lv-tile.lv-locked .lv-tile-n { opacity: .45; }
.lv-lock { position: absolute; inset: 0; display: grid; place-items: center; }
.lv-lock svg { width: 30px; height: 30px; padding: 7px; border-radius: 50%; background: #fffdf7e8; fill: none; stroke: var(--world-ink); stroke-width: 1.7; box-shadow: 0 1px 3px #0000002e; }

.lv-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 12px; font-size: 12px; color: #61776d; }
.lv-link { min-height: 40px; padding: 4px 12px; border: 1px solid #c8d6c8; border-radius: 10px; background: transparent; color: var(--teal); font: 800 14px/1 var(--font-display); }
.lv-link:hover { background: #e9efe3; }
.lv-key { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 2px 6px; }
/* Phones and short windows: levels become wide tiles, the maze beside its
   number, stars and time, so nothing sits in an empty half-tile. */
@media (max-width: 560px), (max-height: 680px) {
  .lv-tile { grid-template-columns: 62px minmax(0, 1fr); grid-template-areas: "thumb n" "thumb info"; gap: 2px 9px; padding: 5px; }
  .lv-tile-n { align-self: end; padding-left: 0; font-size: 22px; }
  .lv-tile-info { align-self: start; justify-items: start; min-height: 0; }
  .lv-tile-play { padding: 0; }
  .lv-lock svg { width: 26px; height: 26px; padding: 6px; }
}
/* Phones: two columns of levels; the route scrolls sideways when it must,
   keeping the chosen chapter in view, with two-line names. */
@media (max-width: 560px) {
  .lv-worlds { padding: 6px 12px 0; mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 12px), transparent); }
  .lv-world { flex-basis: 76px; min-width: 76px; grid-template-rows: auto 2.3em auto; }
  .lv-world-name { align-self: center; max-width: 72px; font-size: 13px; line-height: 1.1; white-space: normal; text-align: center; }
  .lv-world + .lv-world::before { top: 18px; }
  .lv-chapter { padding: 10px; }
  .lv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .lv-key { display: none; }
}
/* Short, wide windows (a 16:9 portal frame, a phone on its side): a wider
   select with the wide tiles in rows of five, so a whole world fits. */
@media (max-height: 680px) and (min-width: 561px) {
  .lv-select { width: min(860px, calc(100vw - 24px)); }
  .lv-daily { margin-top: 8px; padding-block: 7px; }
  .lv-daily-art { width: 52px; height: 52px; }
  .lv-worlds { margin-top: 4px; }
  .lv-world { padding-bottom: 12px; }
  .lv-chapter-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-bottom: 9px; }
  .lv-grid { grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  .lv-tile, .lv-daily, .lv-world-n { transition: none; }
}

/* ---- level complete --------------------------------------------------------- */
.lv-done { width: min(400px, calc(100vw - 24px)); padding: 14px 18px 16px; text-align: center; overflow: hidden; }
.lv-done::before { content: ""; position: absolute; inset: 0 0 auto; height: 150px; background: radial-gradient(60% 100% at 50% 0%, #8ce1b955, transparent); pointer-events: none; }
.lv-done[data-medal="gold"]::before { background: radial-gradient(60% 100% at 50% 0%, #ffd56b66, transparent); }
.lv-done[data-medal="silver"]::before { background: radial-gradient(60% 100% at 50% 0%, #c9d6e066, transparent); }
.lv-done-top { position: relative; display: flex; justify-content: space-between; align-items: center; }
.lv-done-level { font-family: var(--font-display); font-size: 14px; font-weight: 800; color: var(--world); }
.lv-done h2 { position: relative; margin: 2px 0 4px; font-family: var(--font-display); font-size: 32px; letter-spacing: -.5px; font-weight: 900; }
.lv-done-stars { position: relative; display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 74px; }
.lv-done-stars i { display: block; width: 52px; height: 52px; }
.lv-done-stars i:nth-child(2) { width: 68px; height: 68px; }
.lv-done-stars svg { width: 100%; height: 100%; fill: #00000018; stroke: #00000014; stroke-width: .6; }
.lv-done-stars i.on svg { fill: #f2b93b; stroke: #a8761c; stroke-width: .8; filter: drop-shadow(0 3px 4px #a8761c55); }
.lv-done-stars i.on { animation: lv-star .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes lv-star { 0% { transform: scale(.2) rotate(-40deg); opacity: 0; } 60% { transform: scale(1.25) rotate(8deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
.lv-done-time { display: flex; justify-content: center; align-items: baseline; gap: 10px; margin-top: 4px; }
.lv-done-time strong { font: 500 40px/1.1 ui-monospace, "Cascadia Code", Consolas, monospace; letter-spacing: -1.8px; font-variant-numeric: tabular-nums; }
.lv-done-time span { font-size: 13px; color: #61776d; }
.lv-done-time span.lv-new { padding: 2px 8px; border-radius: 10px; background: #fff0c7; color: #8a6416; font-weight: 750; }
.lv-targets { display: grid; gap: 4px; margin: 8px auto 0; padding: 0; max-width: 260px; list-style: none; }
.lv-targets li { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 8px; padding: 4px 10px; border-radius: 8px; background: #eef1e8; font: 600 14px/1.3 ui-monospace, Consolas, monospace; color: #52685d; text-align: left; }
.lv-targets li.lv-hit { background: #e3f0dc; color: #126b60; }
.lv-targets b { font-weight: 700; }
.lv-earn { display: grid; gap: 4px; margin: 10px auto 0; max-width: 260px; }
.lv-earn-row { display: flex; justify-content: space-between; align-items: center; padding: 5px 12px; border: 1px solid #e3cf95; border-radius: 9px; background: linear-gradient(180deg, #fff8e0, #f8ecc4); color: #6e5114; font-size: 14px; font-weight: 650; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.lv-earn-row.on { opacity: 1; transform: none; }
.lv-earn-row b { font-variant-numeric: tabular-nums; }
.lv-earn-row b::after { content: " cheese"; font-weight: 600; font-size: 12px; }
.lv-unlock { margin: 10px 0 0; padding: 8px 10px; border-radius: 9px; background: #1f3634; color: #f6f3e7; font-size: 14px; font-weight: 650; }
.lv-done-actions { display: grid; grid-template-columns: auto 1fr 1.4fr; gap: 6px; margin-top: 14px; }
.lv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 46px; padding: 6px 12px; border: 1px solid #c8d6c8; border-radius: 9px; background: #f7f9f1; color: var(--teal); font-family: var(--font-display); font-size: 16px; font-weight: 800; }
.lv-btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.lv-btn kbd { padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; font: 700 11px/1.4 "Segoe UI", system-ui, sans-serif; opacity: .6; }
.lv-btn-go { border-color: #11675d; background: var(--teal); color: #fffdf4; }
.lv-btn-go:hover { background: #126b60; }
.lv-btn-quiet span { display: none; }
.lv-btn[hidden] { display: none; }
.lv-done-actions:has(.lv-btn-go[hidden]) { grid-template-columns: auto 1fr; }
@media (any-pointer: coarse), (max-width: 600px) { .lv-btn kbd { display: none; } }
.lv-daily-earn { margin: 8px 0 0; padding: 8px 12px; border-radius: 8px; border: 1px solid #e3cf95; background: linear-gradient(180deg, #fff8e0, #f8ecc4); color: #6e5114; font-size: 14px; font-weight: 700; }
@media (prefers-reduced-motion: reduce) {
  .pg-dialog[open], .lv-done-stars i.on, .lv-tile.lv-next canvas { animation: none; }
  .lv-earn-row { transition: none; }
}
.lv-btn-go.lv-auto { background: linear-gradient(90deg, #0e5a51 var(--auto, 0%), var(--teal) var(--auto, 0%)); }

/* The opening instruction stays beside the board, clear of the touch controls.
   On a touch layout it floats over the top of the drive area, left of DRIFT,
   so it never adds page height. */
.lv-opening-hint { margin: 12px 82px 0 4px; color: var(--world-ink); font-size: 14px; font-weight: 650; line-height: 1.35; pointer-events: none; }
@media (any-pointer: coarse), (max-width: 600px) { .lv-opening-hint { position: absolute; top: 100%; left: 0; right: 0; } }
.lv-next-preview { margin: 8px auto; max-width: 310px; color: var(--teal); font-size: 14px; line-height: 1.4; font-weight: 650; }

/* Opening finishes: medal and time over the next course instead of a result card. */
.lv-banner { position: absolute; left: 50%; top: 14px; translate: -50% 0; z-index: 5; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center;
  max-width: calc(100% - 24px); padding: 8px 14px; border-radius: 999px; background: rgba(10, 22, 24, .86); color: #fff; font-family: var(--font-display); font-size: 16px; font-weight: 800;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .35); pointer-events: none; animation: lv-banner-in .22s ease-out; }
.lv-banner[hidden] { display: none; }
.lv-banner b { font: 600 16px/1 ui-monospace, "Cascadia Code", Consolas, monospace; font-variant-numeric: tabular-nums; }
.lv-banner span { color: #8ce1b9; font-size: 14px; }
.lv-banner .lv-stars i { width: 18px; height: 18px; }
@keyframes lv-banner-in { from { opacity: 0; translate: -50% -8px; } to { opacity: 1; translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .lv-banner { animation: none; } }