/* Tidekeeper 3D: menus and the HUD over the 3D beach. Palette and type follow the original Tidekeeper. */
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces.woff2') format('woff2'); font-weight: 100 900; font-style: normal; font-display: swap; }
@font-face { font-family: 'Fraunces'; src: url('../fonts/fraunces-italic.woff2') format('woff2'); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: 'Figtree'; src: url('../fonts/figtree.woff2') format('woff2'); font-weight: 300 900; font-style: normal; font-display: swap; }

:root {
  --ink: #27404f; --ink2: #5b6f7a; --cream: #fffaf0; --sand: #f6e3bd; --sand2: #efd6a8; --line: rgba(107, 74, 42, .2);
  --teal: #2a9d8f; --teal2: #21867a; --coral: #e76f51; --gold: #e9a23b; --sea: #3f94c0;
  --glass: rgba(255, 250, 240, .86);
  --display: 'Fraunces', Georgia, serif; --sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --shadow: 0 6px 22px rgba(60, 40, 15, .16), 0 1px 3px rgba(60, 40, 15, .12);
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { font-family: var(--sans); color: var(--ink); background: linear-gradient(180deg, #fbf0d8, #efd6a8); overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; }
.hidden { display: none !important; }
.grow { flex: 1; }
kbd { font: 700 11px var(--sans); background: rgba(39, 64, 79, .09); border: 1px solid rgba(39, 64, 79, .2); border-radius: 5px; padding: 0 5px; margin-left: 4px; color: var(--ink2); }
button { font: 600 14px var(--sans); color: var(--ink); background: var(--cream); border: 1px solid var(--line); border-radius: 12px; padding: 8px 14px; cursor: pointer; box-shadow: 0 2px 0 rgba(107, 74, 42, .14); }
button:hover { background: #fff; }
button:active { transform: translateY(1px); box-shadow: none; }
button:disabled { opacity: .42; cursor: default; }
button.primary { background: var(--teal); color: #fff; border-color: var(--teal2); box-shadow: 0 3px 0 var(--teal2); }
button.primary:hover { background: #2eab9c; }
kbd:empty { display: none; }
button.primary kbd, button.on kbd { color: #fff; border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .16); }
button.on { background: var(--ink); color: #fff; }
button:focus-visible { outline: 3px solid rgba(42, 157, 143, .55); outline-offset: 2px; }
button svg { width: 18px; height: 18px; vertical-align: -4px; margin-right: 5px; }
h1, h2, h3 { font-family: var(--display); margin: 0; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; display: block; outline: none; }
body:not([data-screen="beach"]):not([data-screen="title"]) #gl { visibility: hidden; }

.screen { position: fixed; inset: 0; overflow: auto; }
.bar { display: flex; align-items: center; gap: 12px; padding: 12px 18px; }
.bar h2 { font-size: 26px; }
.bar .sub { color: var(--ink2); font-size: 14px; }
.back { background: transparent; border-color: transparent; box-shadow: none; color: var(--ink2); }

/* ---------------------------------------------------------------- title */
/* (the title stands in the upper part of the view: the beach and the crab on it show below) */
#scr-title { display: grid; place-items: start center; padding-top: 7vh; }
button.corner { position: absolute; right: 14px; top: 12px; }
.title-box { text-align: center; padding: 16px 40px 22px; border-radius: 26px; background: rgba(255, 250, 240, .7); backdrop-filter: blur(8px); box-shadow: var(--shadow); }
.logo { font-size: clamp(38px, 5.6vw, 66px); font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.menu { margin-top: 12px; display: grid; gap: 9px; justify-items: center; }
.menu .primary { font-size: 21px; padding: 13px 48px; border-radius: 16px; }
.menu-links button { font-size: 15px; }
.menu .small { color: var(--ink2); font-size: 14px; min-height: 18px; }
.menu-links { display: flex; gap: 10px; margin-top: 6px; }

/* ---------------------------------------------------------------- worlds and levels */
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(212px, 1fr)); gap: 14px; padding: 6px 18px 28px; max-width: 1240px; margin: 0 auto; }
.note { max-width: 1240px; margin: 0 auto; padding: 0 18px 10px; color: var(--ink2); font-size: 14px; }
.wcard, .lvc { text-align: left; display: grid; gap: 6px; padding: 14px; border-radius: 16px; background: var(--cream); box-shadow: var(--shadow); border: 1px solid var(--line); }
.wcard .wn { font: 700 19px var(--display); display: flex; align-items: center; gap: 8px; }
.wcard .wn i { font: 800 12px var(--sans); font-style: normal; width: 24px; height: 24px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; flex: none; }
.wcard.done .wn i { background: var(--gold); }
.wcard.locked { opacity: .62; }
.wcard.locked .wn i { background: #b1a58f; }
.wcard .wp { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink2); }
.pbar { flex: 1; height: 6px; background: rgba(39, 64, 79, .12); border-radius: 3px; overflow: hidden; }
.pbar b { display: block; height: 100%; background: var(--teal); }
.wcard .wl { font-size: 13px; color: var(--ink2); }
.lvc canvas { width: 100%; height: auto; border-radius: 8px; image-rendering: pixelated; background: #cfe8ee; }
.lvc .ln { font: 700 16px var(--display); display: flex; gap: 8px; align-items: baseline; }
.lvc .ln i { font: 700 12px var(--sans); font-style: normal; color: var(--ink2); }
.lvc .ln em { font: 700 11px var(--sans); font-style: normal; color: #fff; background: var(--coral); border-radius: 8px; padding: 1px 7px; margin-left: auto; }
.lvc .ls { font-size: 13px; color: var(--ink2); }
.lvc.solved .ls b { color: var(--teal2); }
.lvc.locked { opacity: .5; }

/* ---------------------------------------------------------------- beach HUD: small glass pieces around the edge of the view */
.hud { pointer-events: none; overflow: hidden; }
.hud > * { pointer-events: auto; }
/* In a short window the HUD is drawn smaller, so that the bar stays in one row and ends, with the line above it, below
   the crab (hud.js layout sets --hz: 1 in a window at least 430 high and 760 wide, and in a window 600 high or
   more unless it is narrower than 420 and lower than 760; never under 0.75). The marks on the beach itself
   (#labels) keep their size. */
.hud > :not(#labels) { zoom: var(--hz, 1); }
.card { background: var(--glass); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); backdrop-filter: blur(6px); }
button.round { width: 40px; height: 40px; padding: 0; border-radius: 50%; display: grid; place-items: center; background: var(--glass); backdrop-filter: blur(6px); }
button.round svg { width: 20px; height: 20px; margin: 0; }

#topLeft { position: absolute; left: 14px; top: 12px; display: flex; gap: 10px; align-items: center; }
.lvtitle { background: var(--glass); border: 1px solid var(--line); border-radius: 14px; padding: 4px 14px 6px; box-shadow: var(--shadow); backdrop-filter: blur(6px); }
#bWorld { font-size: 11.5px; color: var(--ink2); }
#bName { font: 700 19px var(--display); line-height: 1.1; }
#bName .ok { color: var(--teal); margin-left: 8px; font-size: 16px; }

#timeline { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); display: flex; gap: 5px; align-items: center; padding: 6px 10px; border-radius: 22px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
.tl { display: flex; align-items: center; gap: 4px; padding: 4px 7px; border-radius: 12px; background: transparent; border: 2px solid transparent; position: relative; overflow: hidden; box-shadow: none; opacity: .5; }
.tl svg { width: 22px; height: 20px; margin: 0; }
button.tl { cursor: pointer; color: var(--ink); }
.tl.now { border-color: var(--teal); background: #e3f4f1; opacity: 1; }
.tl.run { border-color: var(--sea); background: #dcedf6; opacity: 1; }
.tl.past { opacity: .32; }
.tl .bar2 { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--sea); transform-origin: left; transform: scaleX(0); }
.tlsep { color: #b9a887; font-size: 12px; }
/* the tide's height as a little gauge: one bar per height step, filled up to the tide */
.gauge { display: inline-flex; flex-direction: column-reverse; gap: 1.5px; margin-left: 1px; }
.gauge i { width: 9px; height: 3px; border-radius: 1px; background: rgba(39, 64, 79, .18); }
.gauge i.f { background: var(--sea); }
/* a row of the day that does not fit between the title and the sound button takes a row of its own (hud.js layout);
   the goals and the help then start below it. Wider than the window, it scrolls sideways. */
.tl2 #timeline { top: calc(62px + var(--up, 0px)); max-width: calc(100% - 28px); overflow-x: auto; }
.tl2 #goals { top: calc(118px + var(--up2, 0px)); }
.tl2 .hintbox { top: calc(116px + var(--up2, 0px)); max-height: calc(100% - 116px - var(--up2, 0px) - var(--below, 176px)); }
/* (the kept panel too: in a short window a fifth of the height is less than that) */
.tl2 .pop { top: max(20%, calc(116px + var(--up2, 0px))); }
.tl2 .pop.aside { top: calc(116px + var(--up2, 0px)); }
/* (--up: how much taller the top row is than its 44 pixels, and --up2: the top row and the row of the day together;
   only on a touch screen with a smaller HUD, where the round buttons and the claws keep their size for a finger:
   see the rules for a coarse pointer) */

#topRight { position: absolute; right: 14px; top: 12px; display: flex; gap: 8px; align-items: center; }
/* scoops left: one shell each, beside the claw buttons. Whole: to spend. Hollow: spent in this stretch. Grey: spent before an earlier tide. */
.scoops { display: grid; justify-items: center; gap: 3px; padding: 2px 12px 2px 6px; }
.scoops .lbl { font: 700 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--ink2); }
.scoops.out .lbl { color: #a5512f; }
.icons { display: inline-flex; gap: 4px; align-items: center; }
#sPips { min-height: 20px; }
#sPips i { width: 19px; height: 19px; border-radius: 50% 50% 46% 46%; background: var(--teal); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16); display: inline-block; transition: background .25s, transform .25s; }
#sPips i.used { background: transparent; box-shadow: inset 0 0 0 2.5px rgba(42, 157, 143, .55); transform: scale(.86); }
#sPips i.done { background: #cdbf9f; box-shadow: none; transform: scale(.86); }
/* the sand the crab carries, on the button that puts it down: one lump each, dim when no scoop is left to put it down */
#sBucket { margin-left: 7px; gap: 1px; }
#sBucket:empty { display: none; }
#sBucket svg { width: 22px; height: 22px; margin: 0; vertical-align: middle; }
#sBucket svg.spent { opacity: .4; filter: grayscale(.8); }
.icons.bump { animation: bump .45s; }
@keyframes bump { 35% { transform: scale(1.4); } 70% { transform: scale(.94); } }

#goals { position: absolute; left: 14px; top: calc(70px + var(--up, 0px)); display: grid; gap: 7px; max-width: 340px; }
.goal { display: flex; gap: 9px; align-items: center; padding: 7px 13px 7px 10px; border-radius: 16px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(6px); font-size: 14.5px; font-weight: 500; line-height: 1.25; }
.goal .who { display: flex; gap: 1px; flex: none; }
.goal .who svg { width: 29px; height: 24px; }
.goal .rings { display: flex; gap: 3px; flex: none; }
.ring { width: 15px; height: 15px; border-radius: 50%; border: 3px solid #36a9e0; display: inline-block; }
.ring.red { border-color: #e9573f; }
.ring.never { border-color: #e9573f; box-shadow: 0 0 0 2px var(--cream), 0 0 0 4px #e9573f; margin: 0 4px; }
.ring.teal { border-color: #23b5a0; border-style: dashed; }
.goal .st { font-weight: 800; font-size: 16px; margin-left: auto; padding-left: 6px; }
.goal .st.ok { color: var(--teal2); } .goal .st.no { color: #c98a2b; }

/* (the help ends above the bar and the line of message over it, wherever the bar begins: hud.js layout measures
   that as --below. A long help scrolls.) */
.hintbox { position: absolute; right: 14px; top: calc(64px + var(--up, 0px)); width: 310px; max-height: calc(100% - 64px - var(--up, 0px) - var(--below, 176px)); overflow-y: auto; padding: 12px 15px; font-size: 15px; line-height: 1.4; }
.hintbox .lbl { font: italic 600 14px var(--display); color: #8a6a42; display: block; }
.hintbox p { margin: 3px 0 8px; }
.hintbox p:last-child { margin-bottom: 0; }
.hintbox .warn { color: #a5512f; }

#bottom { position: absolute; left: 50%; bottom: 12px; transform: translateX(-50%); display: grid; justify-items: center; gap: 7px; width: min(100% - 28px, 1040px); pointer-events: none; }
#bottom > * { pointer-events: auto; }
#actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 9px; justify-content: center; align-items: center; border-radius: 24px; background: var(--glass); border: 1px solid var(--line); box-shadow: var(--shadow); backdrop-filter: blur(6px); }
#actions button { display: inline-flex; align-items: center; justify-content: center; }
#actions .big { font-size: 17px; font-weight: 700; padding: 11px 17px; border-radius: 15px; min-height: 50px; }
#actions .big svg { width: 24px; height: 24px; margin-right: 7px; }
#actions .big kbd { font-size: 12px; margin-left: 9px; }
#actions .primary { min-width: 150px; }
#actions .primary.hurry { background: var(--sea); border-color: #2f7da6; box-shadow: 0 3px 0 #2f7da6; }
#actions .primary.out { background: var(--sea); border-color: #2f7da6; box-shadow: 0 3px 0 #2f7da6; }
#actions .sep { width: 1px; align-self: stretch; margin: 4px 2px; background: var(--line); }
/* the lesser controls: an icon each, with the key that does it */
#actions .mini { flex-direction: column; gap: 1px; min-width: 50px; min-height: 50px; padding: 5px 7px; border-radius: 14px; }
#actions .mini svg { width: 22px; height: 22px; margin: 0; }
#actions .mini kbd { margin: 0; border: 0; background: none; padding: 0; font-size: 10.5px; }
#lookHint { font-size: 14px; font-weight: 600; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .6); pointer-events: none; }
/* (one line above the bar at a time: while something is said, this hint gives way; hud.js setMsg) */
#bottom.said #lookHint { display: none; }
/* (a bar of two rows in a short window reaches up to the crab's feet: the hint then stands at the left, beside the crab) */
@media (max-height: 520px) { .bar2 #lookHint { justify-self: start; } }
#msg { font: 600 16px var(--sans); padding: 8px 16px; border-radius: 12px; background: rgba(255, 250, 240, .96); box-shadow: var(--shadow); pointer-events: none; }
#msg:empty { display: none; }
#msg.err { background: #fbe9d8; color: #8a4a1c; }
#msg.info { background: #e3f1f6; color: #1f5f7a; }

#labels { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
/* how a creature fares after the tide: content (a tick), or not yet (a hollow ring and the reason) */
.bubble { position: absolute; transform: translate(-50%, -100%); font: 700 14px var(--sans); padding: 5px 11px 5px 7px; border-radius: 14px; background: rgba(255, 252, 245, .97); border: 1.5px solid var(--teal); white-space: nowrap; display: flex; gap: 6px; align-items: center; box-shadow: 0 2px 6px rgba(0, 0, 0, .18); }
.bubble i { font-style: normal; width: 18px; height: 18px; border-radius: 50%; background: var(--teal); color: #fff; display: grid; place-items: center; font-size: 12px; }
.bubble.bad { border-color: #d9a441; } .bubble.bad i { background: transparent; box-shadow: inset 0 0 0 2.5px #d9a441; }
/* what the claws can do with the sand they are aimed at */
#aimChips { position: absolute; transform: translate(-50%, -100%); display: flex; gap: 5px; }
.chip { font: 700 13.5px var(--sans); padding: 4px 10px; border-radius: 11px; background: rgba(255, 252, 245, .93); color: var(--ink); border: 1.5px solid rgba(39, 64, 79, .3); white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .2); }

#markArrow { position: absolute; width: 38px; height: 38px; margin: -19px 0 0 -19px; border-radius: 50%; background: rgba(255, 252, 245, .95); border: 2.5px solid var(--coral); color: var(--coral); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); }
#markArrow.pile { border-color: var(--teal); color: var(--teal); }
#markArrow svg { width: 24px; height: 24px; }

.pop { position: absolute; left: 50%; top: 20%; transform: translateX(-50%); background: var(--cream); border-radius: 22px; padding: 22px 30px; text-align: center; box-shadow: 0 12px 40px rgba(40, 25, 5, .3); border: 1px solid var(--line); min-width: 300px; max-width: min(92vw, 460px); }
.pop .t { font: 700 34px var(--display); color: var(--teal2); margin-bottom: 14px; }
.pop .primary { font-size: 17px; padding: 11px 22px; border-radius: 15px; }
.pop.aside { left: auto; right: 14px; top: calc(64px + var(--up, 0px)); transform: none; min-width: 0; max-width: 290px; padding: 12px 16px; text-align: left; }
.pop.aside .t { font-size: 20px; margin-bottom: 8px; }
.pop.aside .row { justify-content: flex-start; }
.pop .row, .dialog .row { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
.dialog .row.left { justify-content: flex-start; }

.overlay { position: fixed; inset: 0; background: rgba(39, 64, 79, .45); display: grid; place-items: center; z-index: 50; padding: 16px; user-select: text; }
.dialog { background: var(--cream); border-radius: 22px; padding: 24px 26px; width: min(100%, 440px); max-height: calc(100vh - 32px); overflow: auto; box-shadow: 0 12px 40px rgba(0, 0, 0, .3); }
.dialog.wide { width: min(100%, 620px); }
.dialog h2 { font-size: 26px; margin-bottom: 12px; }
.dialog .row button, .dialog .choice { font-size: 15px; padding: 9px 15px; }
.setting { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
.setting .d { font-size: 13px; color: var(--ink2); font-weight: 400; }
.dialog .row { margin-top: 14px; }
/* the controls of the device in use: what is pressed, what it does */
.ctrl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 7px 22px; margin-top: 18px; font-size: 15.5px; }
.ctrl div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-bottom: 6px; border-bottom: 1px solid var(--line); }
.ctrl kbd { font-size: 13px; padding: 2px 8px; margin: 0; white-space: nowrap; }
.rules { margin-top: 16px; font-size: 15px; }
.rules p { margin: 8px 0; line-height: 1.45; }
.choice { min-width: 96px; flex: none; }
.padfocus { outline: 3px solid var(--gold) !important; outline-offset: 2px; }
.stepper { display: flex; align-items: center; gap: 8px; flex: none; }
.stepper button { width: 32px; height: 32px; padding: 0; border-radius: 50%; font-size: 18px; line-height: 1; }
.dots { display: flex; gap: 4px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: #cdbf9f; }
.dots i.on { background: var(--teal); }
.switch { width: 50px; height: 28px; border-radius: 14px; background: #cdbf9f; position: relative; padding: 0; box-shadow: none; flex: none; }
.switch::after { content: ''; position: absolute; left: 3px; top: 3px; width: 20px; height: 20px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.on { background: var(--teal); }
.switch.on::after { left: 26px; }

#toasts { position: fixed; left: 50%; top: 64px; transform: translateX(-50%); display: grid; gap: 8px; z-index: 60; pointer-events: none; }
.toast { background: var(--ink); color: #fff; padding: 9px 16px; border-radius: 12px; font-weight: 600; font-size: 14px; box-shadow: var(--shadow); transition: opacity .4s; }
.toast.out { opacity: 0; }

@media (max-width: 900px) {
  #goals { max-width: 250px; }
  .goal { font-size: 13.5px; gap: 7px; padding: 6px 11px 6px 9px; }
  .hintbox { width: 230px; font-size: 14px; }
  #bName { font-size: 16px; }
}
/* a narrow window, or a short one (where the goals stand side by side and reach the middle): the kept panel stands
   to the right, clear of the goals; the help that stood there is put away by then */
@media (max-width: 900px), (max-height: 480px) {
  .pop:not(.aside) { left: auto; right: 14px; transform: none; }
}
/* a narrow window, or a short one: a smaller bar, so that it keeps to one row. (In a short window a bar of two rows
   reaches up to the crab: at 932 by 430 the large bar took two rows on 11 beaches and stood on the crab on 9.) */
@media (max-width: 900px), (max-height: 599px) {
  #actions .big { padding: 8px 11px; font-size: 15px; min-height: 44px; }
  #actions .primary { min-width: 110px; }
  #actions .mini { min-width: 42px; min-height: 44px; }
  /* (no room for the keys on the bar and on the kept panel: the menu names them) */
  #actions kbd, #banner kbd { display: none; }
}
/* a small window: the goals are their pictures and rings; a click or a tap on them shows their words */
@media (max-width: 640px), (max-height: 480px) {
  #goals { cursor: pointer; }
  #goals:not(.words) .goal .txt { display: none; }
}
/* a narrow window: a narrower help */
@media (max-width: 640px) {
  .hintbox { width: 200px; }
}
/* a narrow, tall window: while the help is open or the kept panel is up, the goals keep to the left of it, and a row
   of many creatures wraps; the kept panel is as narrow there as the help */
@media (max-width: 640px) and (min-height: 481px) {
  .helping #goals, .kept #goals { max-width: min(250px, 100% - 236px); }
  .helping .goal .who, .kept .goal .who { flex: 0 1 auto; flex-wrap: wrap; }
  .pop:not(.aside) { min-width: 0; width: 200px; padding: 14px 16px; }
  .pop:not(.aside) .t { font-size: 24px; margin-bottom: 10px; }
  .pop:not(.aside) .primary { font-size: 16px; padding: 10px 14px; }
  .pop.aside { max-width: 200px; }
}
/* a short window: the goals stand side by side, so that they end above the bar; the help beside them takes the
   width they leave (58% and 36% of the window, and the margins) */
@media (max-height: 480px) {
  #goals { display: flex; flex-wrap: wrap; align-items: flex-start; max-width: min(58%, 420px); }
  .hintbox { width: min(310px, 36%); }
}
/* a finger needs more room than a mouse pointer (as much on a HUD that is drawn smaller: --hz) */
@media (pointer: coarse) {
  button { min-height: 44px; }
  button.round { width: 46px; height: 46px; }
  .hud button { min-height: calc(44px / var(--hz, 1)); }
  .hud button.round { width: calc(46px / var(--hz, 1)); height: calc(46px / var(--hz, 1)); }
  /* (the top row, and the row of the day with its claws, are then taller than on a HUD at full size, and what stands
     under them begins that much lower) */
  .hud { --up: calc(46px / var(--hz, 1) - 46px); --up2: calc(46px / var(--hz, 1) - 46px + 32px / var(--hz, 1) - 32px); }
  /* (the claws of the row of the day are the one exception, 40 by 32: they keep that size on a smaller HUD) */
  button.tl { min-height: 0; zoom: calc(1 / var(--hz, 1)); }
  #actions .mini { min-width: max(48px, calc(44px / var(--hz, 1))); }
  .stepper button { width: 44px; height: 44px; }
  .switch { width: 62px; height: 36px; min-height: 0; border-radius: 18px; }
  .switch::after { left: 4px; top: 4px; width: 28px; height: 28px; }
  .switch.on::after { left: 30px; }
  /* (the switch is touched in a wider box than it is drawn in) */
  .switch::before { content: ''; position: absolute; inset: -6px -8px; }
}
/* (the buttons of the bar name their own height above: on a smaller HUD a finger still gets its 44 pixels) */
@media (pointer: coarse) and (max-height: 599px) {
  #actions .big, #actions .mini { min-height: calc(44px / var(--hz, 1)); }
}