[hidden] { display: none !important; }      /* the page hides its own panels: never rely on the host page's reset for this (the artifact's wrapper stopped providing it) */
  /* Layout: one screen. The plant is an island of paper on the terrain, with a bar under it that holds the abilities in a shift and the machines
     in the plant. Menus are cards that float over it. Each world swaps the palette. */
  /* The paper-map style (claude/estilo-visual.md): paper (the island), terrain (the ground round it), ink, the three function colours, and one
     cutout shadow under everything that sits on the paper: hard, shifted down and to the right (--sh), the same for a card, a button, a chip
     and the plant's pieces. The game sets every token itself, per world, per theme and per sun (sky.js); these are the first paint. */
  :root {
    --bg: #F6F0DE;
    --paper: #F6F0DE;
    --band: #BFDCC9;
    --park: #A9D1BA;
    --water: #D2E5D5;
    --road: #FFFFFF;
    --ink: #2A2E35;
    --muted: #6B7078;
    --player: #2E5FE0;
    --hazard: #E54B4B;
    --reward: #EFB22E;
    --card: #FFFFFF;
    --chip: #F6F0DE;
    --shadow: rgba(42, 46, 53, 0.13);
    --sh: calc(4px * var(--k, 1)) calc(5px * var(--k, 1)) 0 var(--shadow);
    --sh-down: 1px 1px 0 var(--shadow);
    --line: rgba(42, 46, 53, 0.14);
    --line-strong: rgba(42, 46, 53, 0.32);
    --hair: rgba(42, 46, 53, 0.08);
    --coin-ring: rgba(255, 255, 255, 0.45);
    --font: "Jost", "Avenir Next", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  }
  /* Dark values for the first paint. Once the game starts it sets every token itself, per world, per the theme chosen, and per the sun (sky.js). */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #262B38; --paper: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --road: #5E6373; --ink: #F3EEE2; --muted: #B4B9C3; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --card: #3F4553; --chip: rgba(255, 255, 255, 0.05);
      --shadow: rgba(0, 0, 0, 0.32); --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); --hair: rgba(243, 238, 226, 0.08); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #262B38; --paper: #262B38; --band: #343B4A; --park: #414A5B; --water: #2F3541; --road: #5E6373; --ink: #F3EEE2; --muted: #B4B9C3; --player: #7DB4FF; --hazard: #FF6B6B; --reward: #FFD15C; --card: #3F4553; --chip: rgba(255, 255, 255, 0.05);
    --shadow: rgba(0, 0, 0, 0.32); --line: rgba(243, 238, 226, 0.14); --line-strong: rgba(243, 238, 226, 0.34); --hair: rgba(243, 238, 226, 0.08); color-scheme: dark;
  }
  html, body { height: 100%; }
  body {
    background: var(--band); color: var(--ink); font-family: var(--font);
    overflow: hidden; -webkit-user-select: none; user-select: none;
    -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  }
  #stage { position: relative; height: 100%; overflow: hidden; touch-action: none; }
  #game { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

  button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; padding: 0; }
  button:focus-visible, a:focus-visible { outline: 2px solid var(--player); outline-offset: 2px; }
  /* a pressed piece sinks into the paper: it moves onto its shadow (style guide, "Estados") */
  .btn, .round, .pill, .tab, .sect, .lt, .icon, .buy, .langsw, .tw, .ab { transition: transform 80ms ease-out, box-shadow 80ms ease-out; }
  .btn:active:not(:disabled), .round:active:not(:disabled), .pill:active, .tab:active:not(:disabled), .sect:active, .lt:active, .icon:active, .buy:active:not(:disabled), .tw:active, .ab:active { transform: translate(2px, 3px); box-shadow: var(--sh-down); }
  @media (prefers-reduced-motion: reduce) { .btn, .round, .pill, .tab, .sect, .lt, .icon, .buy, .langsw, .tw, .ab { transition: none; } }
  a { color: inherit; }

  /* heads-up display */
  #hud {
    position: absolute; top: 0; left: 0; right: 0; height: 40px; padding-inline: 16px;
    display: flex; justify-content: space-between; align-items: center; gap: 12px;
    pointer-events: none; font-size: 15px; font-weight: 500; letter-spacing: 0.03em;
    font-variant-numeric: tabular-nums;
  }
  .hud-r { display: flex; align-items: center; gap: 14px; }
  #hud span { white-space: nowrap; }      /* "Shift 12" and "15 / 205" never break in two */
  /* the shift's number is a badge of ink, like the numbered shield of the style guide; the buttons are round cards with their shadow */
  #hud > div:first-child { display: inline-flex; align-items: center; height: 34px; padding: 0 11px; border-radius: 11px; background: var(--ink); color: var(--paper); font-weight: 600; font-size: 16px; letter-spacing: 0; box-shadow: var(--sh); flex: none; }
  #hud .icon { background: var(--card); box-shadow: var(--sh); }
  @media (max-width: 400px) { #hud { padding-inline: 12px; gap: 8px; font-size: 14px; letter-spacing: 0.01em; } .hud-r { gap: 8px; } .gems { gap: 5px; } #hud > div:first-child { font-size: 15px; padding: 0 8px; } #hud .icon { width: 32px; height: 32px; } }
  @media (max-width: 360px) { #hud { padding-inline: 8px; gap: 4px; font-size: 13px; letter-spacing: 0; } .hud-r { gap: 4px; } #hud .icon { width: 30px; height: 30px; } .lives { gap: 3px; } #hud > div:first-child { font-size: 13px; padding: 0 6px; height: 30px; } .gems { gap: 4px; } }
  .gems { display: inline-flex; align-items: center; gap: 7px; }
  .gem { width: 11px; height: 11px; background: var(--reward); border-radius: 50%; display: inline-block; box-shadow: inset 0 0 0 2px var(--coin-ring); flex: none; }
  .hearts { display: inline-flex; gap: 5px; }
  .heart { width: 10px; height: 10px; border-radius: 50%; background: var(--player); box-sizing: border-box; }
  .heart.lost { background: var(--line); }
  .lives { display: inline-flex; align-items: center; gap: 5px; }
  .lives svg { width: 15px; height: 15px; fill: none; stroke: var(--player); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  .lives.low { color: var(--hazard); }
  .lives.low svg { fill: var(--hazard); }
  .lives svg .fz { stroke: var(--player); }
  .lives.hit { animation: shake 0.3s; }
  .icon { pointer-events: auto; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; }
  .icon svg { width: 16px; height: 16px; fill: none; stroke: var(--ink); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
  /* 👀: details on or off. Off, it is dimmed and struck through. */
  .icon.eyes { position: relative; font-size: 18px; line-height: 1; font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; }
  .icon.eyes[aria-pressed="false"] { opacity: 0.45; }
  .icon.eyes[aria-pressed="false"]::after { content: ''; position: absolute; left: 7px; right: 7px; top: 50%; height: 2px; margin-top: -1px; border-radius: 1px; background: var(--ink); transform: rotate(-40deg); }

  /* the bar: in the plant, its flux and one button for each generator; in a shift, the abilities. Under the field, centred and no wider than 540px (times --k); a column to the
     right of it only on a short wide screen (.beside). It sits above the device's home bar, and its buttons keep their height there.
     --k: the bar and the generator's card grow on a big screen (the game sets it: 1 on a phone, 1.5 on a 1920 by 960 window). */
  #stage { --k: 1; }
  #bar {
    position: absolute; left: 0; right: 0; bottom: 0; margin: 0 auto; max-width: calc(540px * var(--k)); height: calc(72px * var(--k) + env(safe-area-inset-bottom, 0px)); box-sizing: border-box;
    padding: calc(8px * var(--k)) calc(12px + env(safe-area-inset-right, 0px)) calc(8px * var(--k) + env(safe-area-inset-bottom, 0px)) calc(12px + env(safe-area-inset-left, 0px));
    display: flex; align-items: stretch; justify-content: center; gap: var(--gap); font-variant-numeric: tabular-nums;
    --ew: calc(58px * var(--k)); --gap: calc(8px * var(--k));
  }
  .beside #bar { justify-content: flex-start; left: auto; right: 0; margin: 0; max-width: none; top: 44px; bottom: 0; width: calc(104px + env(safe-area-inset-right, 0px)); height: auto; flex-direction: column;
    padding: 8px calc(12px + env(safe-area-inset-right, 0px)) calc(12px + env(safe-area-inset-bottom, 0px)) 4px; }
  #bar.two { height: calc(120px * var(--k) + env(safe-area-inset-bottom, 0px)); flex-wrap: wrap; align-content: space-between; row-gap: calc(6px * var(--k)); }
  #bar.two > .tw, #bar.two > .energy { height: calc(56px * var(--k)); }
  .beside #bar.two { height: auto; flex-wrap: nowrap; }
  .beside #bar.two > .tw, .beside #bar.two > .energy { height: auto; }
  .energy { flex: none; min-width: var(--ew); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: calc(20px * var(--k)); font-weight: 600; line-height: 1; color: var(--ink); transition: color 0.2s; }
  .energy svg { width: calc(14px * var(--k)); height: calc(18px * var(--k)); fill: none; stroke: var(--player); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
  .energy.poor { color: var(--hazard); }      /* red only while it buys nothing; the colour of the text once the cheapest generator or level can be paid for */
  .energy.short { animation: shake 0.3s; }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
  /* Every generator button has the size it has with all four open, one or four: the row never stretches a lone button across the bar. Centred. */
  .tw {
    flex: 0 1 calc((100% - var(--ew) - 4 * var(--gap)) / 4); min-width: 0; border: 0; border-radius: calc(14px * var(--k)); background: var(--card); box-shadow: var(--sh); box-sizing: border-box; overflow: hidden;
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico cost" "name name"; align-content: center; align-items: center; justify-items: center; gap: 0 calc(4px * var(--k)); padding: calc(3px * var(--k)) calc(6px * var(--k)) calc(4px * var(--k));
  }
  .beside .tw { flex: 0 0 60px; }
  .tw canvas { grid-area: ico; width: calc(28px * var(--k)); height: calc(28px * var(--k)); display: block; }
  .tw .nm { grid-area: name; font-size: calc(12.5px * var(--k)); font-weight: 500; line-height: 1.1; white-space: nowrap; }
  .tw .ct { grid-area: cost; font-size: calc(15px * var(--k)); font-weight: 500; line-height: 1; justify-self: start; }
  .tw[aria-pressed="true"] { background: var(--ink); color: var(--paper); }      /* the machine chosen: a tile of ink (style guide) */
  .tw.poor .ct { color: var(--hazard); }
  .tw[aria-pressed="true"].poor .ct { color: var(--hazard); }
  .tw.cur { outline: 2px solid var(--player); outline-offset: 2px; }
  /* abilities: a row of their own (a column on a wide screen) */
  .skills { flex: 0 0 100%; order: -1; height: calc(40px * var(--k)); display: flex; justify-content: center; align-items: center; gap: calc(10px * var(--k)); }
  .beside .skills { order: 9; flex: none; height: auto; margin-top: auto; display: grid; grid-template-columns: repeat(2, 40px); justify-content: center; gap: 8px; }
  .ab { position: relative; width: calc(40px * var(--k)); height: calc(40px * var(--k)); border-radius: 50%; border: 0; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; flex: none; box-sizing: border-box; }
  .ab svg { width: calc(18px * var(--k)); height: calc(18px * var(--k)); fill: var(--player); stroke: var(--player); }
  .ab .cd { position: absolute; inset: -1.5px; border-radius: 50%; pointer-events: none; background: conic-gradient(rgba(127, 127, 127, 0.42) calc(var(--cd, 0) * 1turn), transparent 0); }
  .ab.wait svg { opacity: 0.45; }
  .ab.ready { box-shadow: var(--sh), inset 0 0 0 2px var(--player); }
  .ab.on { background: var(--player); }
  .ab.on svg { fill: var(--card); stroke: var(--card); }
  .ab.cur { outline: 2px solid var(--player); outline-offset: 2px; }
  .ab.spd { width: auto; min-width: calc(40px * var(--k)); padding: 0 calc(8px * var(--k)); border-radius: calc(20px * var(--k)); font-size: calc(14px * var(--k)); font-weight: 600; font-variant-numeric: tabular-nums; }
  .ab.auto[aria-pressed="true"] { background: var(--player); color: var(--card); }
  .beside .ab.spd { grid-column: span 2; justify-self: center; }
  /* the name of an ability, over its button while the pointer (or the keys' cursor) is on it */
  .abtip { position: absolute; z-index: 4; pointer-events: none; box-sizing: border-box; max-width: min(calc(240px * var(--k)), calc(100% - 16px)); background: var(--card); color: var(--ink);
    border-radius: calc(14px * var(--k)); padding: calc(5px * var(--k)) calc(10px * var(--k)); filter: drop-shadow(var(--sh));
    display: flex; flex-direction: column; gap: 1px; font-size: calc(12.5px * var(--k)); line-height: 1.25; }
  .abtip b { font-size: calc(14px * var(--k)); font-weight: 600; }
  .abtip span { color: var(--muted); }
  /* what a generator is: picked in the bar, or tapped in the plant */
  .info { position: absolute; z-index: 3; width: min(calc(290px * var(--k)), calc(100% - 16px)); box-sizing: border-box; background: var(--card); border-radius: calc(14px * var(--k));
    padding: calc(10px * var(--k)) calc(12px * var(--k)) calc(12px * var(--k)); display: flex; flex-direction: column; gap: calc(8px * var(--k)); filter: drop-shadow(var(--sh)); animation: cardopen 180ms ease-out; }
  .info::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -7px; background: var(--card);
    border-radius: 0 0 3px 0; transform: rotate(45deg); }      /* the point towards the machine: 8 px of it shows */
  .info.below::after { bottom: auto; top: -7px; border-radius: 3px 0 0 0; }
  .info.left::after, .info.right::after { bottom: auto; top: var(--ay, 50%); margin: -7px 0 0; }
  .info.left::after { left: auto; right: -7px; border-radius: 0 3px 0 0; }
  .info.right::after { left: -7px; border-radius: 0 0 0 3px; }
  .ihead { display: grid; grid-template-columns: calc(32px * var(--k)) minmax(0, 1fr) auto calc(32px * var(--k)); align-items: center; gap: calc(8px * var(--k)); }
  .iname { min-width: 0; display: flex; flex-direction: column; line-height: 1.15; }      /* the name over its level, so neither is cut */
  .iname b, .iname .lvl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .ihead canvas { width: calc(32px * var(--k)); height: calc(32px * var(--k)); }
  .ihead .icon { width: calc(32px * var(--k)); height: calc(32px * var(--k)); pointer-events: auto; }
  .ihead .icon svg { width: calc(14px * var(--k)); height: calc(14px * var(--k)); }
  .iname b { font-size: calc(17px * var(--k)); font-weight: 600; }
  .iname .lvl { font-size: calc(12px * var(--k)); margin-left: 0; }
  /* one line a number: its name, its bar, and its value now and at the next level. Nothing in it may be wider than the card. */
  .stats { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: calc(4px * var(--k)); font-size: calc(13px * var(--k)); font-variant-numeric: tabular-nums; }
  .stats li { display: grid; grid-template-columns: calc(58px * var(--k)) minmax(28px, 1fr) auto; grid-template-areas: 'k m v'; gap: calc(8px * var(--k)); align-items: center; min-width: 0; }
  .stats .k { color: var(--muted); grid-area: k; }
  .stats .m { grid-area: m; height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; display: block; }
  .stats .m i { display: block; height: 100%; border-radius: 2px; background: var(--tc, var(--player)); }
  .stats .v { grid-area: v; text-align: right; max-width: calc(150px * var(--k)); }
  .stats .v em { font-style: normal; color: var(--player); font-weight: 600; }
  .info .note { font-size: calc(13px * var(--k)); }
  .info .btn { height: calc(34px * var(--k)); padding: 0 calc(12px * var(--k)); font-size: calc(15px * var(--k)); flex: none; }
  .info .ifoot { display: flow-root; min-width: 0; }      /* what it does, flowing round the way to sell it (top right): one block, so the card stays short */
  .info .iact { float: right; margin: 1px 0 2px calc(8px * var(--k)); display: flex; }
  .info .iact .btn { height: calc(30px * var(--k)); font-size: calc(13.5px * var(--k)); }
  .info .btn.armed { box-shadow: var(--sh), inset 0 0 0 1.5px var(--hazard); color: var(--hazard); }
  .info .ihead .btn.small { height: calc(34px * var(--k)); }      /* (.btn.small is taller, for panels: on the card the raise button keeps the card short) */
  .info .btn .gem { margin-left: 2px; }
  .info .btn { gap: 4px; }
  .info .btn.poor { opacity: 0.6; }
  .info .btn span { font-weight: 400; }
  /* After a play (Less is more): the stars in a row, the coins and how they were worked out, a line or two, the buttons in a row. No scroll. */
  #panel.result { gap: 12px; }
  .srow { display: flex; gap: 6px; margin: 2px 0 0; padding: 0; list-style: none; }
  .srow li { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; line-height: 1.2; text-align: center; }
  .srow li.off { color: var(--muted); }
  .srow svg { width: 28px; height: 28px; }
  .srow svg path { stroke-width: 1.4; stroke-linejoin: round; }
  .starpick { margin: 0; justify-content: center; flex-wrap: wrap; gap: 6px; } .starpick .tab { height: 32px; padding: 0 12px; font-size: 14px; }
  #panel.result .bal { margin: 0; font-size: 18px; }
  #panel.result .bal b { font-size: 22px; }
  #panel.result .note.pay { margin-top: -8px; font-size: 13px; text-wrap: balance; }
  #panel.result .actions .btn { flex: 1 1 auto; padding: 0 14px; font-size: 16px; }
  #panel.result .actions:not(.more) { flex-wrap: nowrap; gap: 8px; }      /* Next, Retry, Store and Back: one row, down to the smallest phone */
  #panel.result .actions:not(.more) .btn { min-width: 0; padding: 0 12px; }
  #panel.result .actions.more { margin-top: -4px; }
  @media (max-width: 360px) { #panel.result { padding-left: 18px; padding-right: 18px; } #panel.result .actions .btn { padding: 0 10px; font-size: 15px; }
    #panel.result .actions:not(.more) { gap: 6px; } #panel.result .actions:not(.more) .btn { padding: 0 8px; } }
  html[lang="es"] #panel.result .actions:not(.more) .btn { padding: 0 clamp(4px, calc(3vw - 4px), 7.5px); font-size: clamp(12.5px, calc(3.2vw + 2.5px), 16px); }      /* Siguiente, Repetir, Tienda, Volver: longer words, the same one row (measured in Jost) */
  @media (min-width: 481px) { html[lang="es"] #panel.result .actions:not(.more) .btn { padding: 0 12px; } }
  .energy.gain { animation: gain 0.6s; }
  .lives.gain { animation: gain 0.6s; }
  @keyframes gain { 0% { transform: scale(1); } 30% { transform: scale(1.25); color: var(--player); } 100% { transform: scale(1); } }
  @media (max-width: 350px) { .tw canvas { width: 22px; height: 22px; } .energy { min-width: 46px; } #bar { --ew: 46px; } }
  /* On a phone the four generator buttons are narrow: the icon over the cost, and the name left to the card and the label */
  @media (max-width: 440px) { .tw { grid-template-columns: 1fr; grid-template-areas: "ico" "cost"; gap: 2px 0; padding: calc(4px * var(--k)) 2px; } .tw .nm { display: none; } .tw .ct { justify-self: center; font-size: calc(14px * var(--k)); } }

  /* a line of help */
  #hint {
    position: absolute; left: 16px; right: 16px; width: fit-content; max-width: calc(100% - 32px); box-sizing: border-box; display: flex; align-items: center; gap: 10px; line-height: 1.25;
    font-size: 14px; font-weight: 500; pointer-events: none;
    background: var(--ink); color: var(--paper); border-radius: 999px; padding: 5px 14px 5px 10px; min-height: 20px; box-shadow: var(--sh);
  }
  .ring { width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid var(--player); animation: press 1.4s ease-in-out infinite; }
  @keyframes press { 0%, 100% { transform: scale(1); background: transparent; } 45%, 70% { transform: scale(0.72); background: var(--player); } }

  /* cards */
  .card {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: min(360px, calc(100% - 32px)); box-sizing: border-box;
    background: var(--card); border-radius: 18px; box-shadow: var(--sh);
    padding: 18px 20px 14px; display: flex; flex-direction: column; gap: 14px; animation: cardopen 180ms ease-out;
  }
  @keyframes cardopen { from { opacity: 0; scale: 0.96; } to { opacity: 1; scale: 1; } }      /* a panel opens: 0.96 → 1 and 0 → 1, 180 ms */
  @media (max-aspect-ratio: 1/1) {
    .card { top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); max-height: calc(100% - 40px - env(safe-area-inset-bottom, 0px) - var(--safe-top, 0px)) !important; }
  }
  @media (max-height: 430px) {
    .card { padding: 14px 18px 12px; gap: 10px; }
    #menu h1 { font-size: 26px; }      /* (#menu: the plain h1 rule below would win otherwise) */
  }
  h1 { margin: 0; font-size: 28px; font-weight: 600; letter-spacing: -0.01em; line-height: 1; }
  h2 { margin: 0; font-size: 22px; font-weight: 600; line-height: 1.15; text-wrap: balance; }
  .tag { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
  /* the menu's title, and beside it the language: English or Spanish, both always in view (Mindlap's switch, as it is) */
  .mhead { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
  .mtitle { min-width: 0; }
  .langsw { flex: none; display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px; background: var(--line); margin-top: 0; }
  .langsw span { min-width: 34px; height: 28px; padding: 0 8px; box-sizing: border-box; display: grid; place-items: center; border-radius: 999px; font-size: 12px; font-weight: 500; letter-spacing: 0.04em; color: var(--muted); }
  .langsw span.on { background: var(--ink); color: var(--paper); }
  .note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; text-wrap: pretty; }
  p { text-wrap: pretty; }

  .stepper { display: grid; grid-template-columns: 40px 1fr auto 40px; grid-template-areas: "prev name stars next" "prev meta meta next"; align-items: center; gap: 2px 10px; }
  #btnPrev { grid-area: prev; } #mRoute { grid-area: name; } #mStars { grid-area: stars; } #btnNext { grid-area: next; } #mMeta { grid-area: meta; }
  .round { width: 40px; height: 40px; border-radius: 50%; background: var(--card); box-shadow: var(--sh); display: grid; place-items: center; }
  .round svg { width: 14px; height: 14px; stroke: var(--ink); fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .round:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .stepper .round { background: none; box-shadow: none; }      /* the shift picker's chevrons sit on the card (same colour): no disc and no shadow, or only a crescent of shadow shows */
  .stepper .round:active:not(:disabled) { box-shadow: none; }
  .route-n { justify-self: start; display: inline-flex; align-items: center; height: 40px; padding: 0 12px; border-radius: 12px; background: var(--ink); color: var(--paper); font-size: 20px; font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1; box-shadow: var(--sh); white-space: nowrap; }      /* the shift's number, on its numbered shield of ink */
  /* a narrow card: the stars go under the shift's number, which never breaks */
  @media (max-width: 360px) { .stepper { grid-template-columns: 40px 1fr 40px; grid-template-areas: "prev name next" "prev stars next" "prev meta next"; } .route-n { white-space: nowrap; } }
  .route-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.16em; text-transform: uppercase; white-space: pre-line; line-height: 1.5; margin-top: 4px; }
  .lowpow { margin: -6px 0 0; font-size: 13px; font-weight: 600; color: var(--hazard); text-align: center; }
  #btnPlant.want { box-shadow: var(--sh), inset 0 0 0 1.5px var(--hazard); }
  .stars { display: inline-flex; gap: 3px; }
  .stars svg { width: 18px; height: 18px; }
  .star-on { fill: var(--reward); stroke: var(--reward); }
  .star-off { fill: var(--line); stroke: var(--line); }
  .stars svg path { stroke-width: 1.4; stroke-linejoin: round; }

  .actions { display: flex; gap: 10px; flex-wrap: wrap; }
  @media (max-width: 360px) { #panel .actions .btn { padding: 0 14px; } }      /* the smallest phones: two buttons still share a row in Spanish too (Estadísticas, Volver) */
  .btn { height: 46px; border-radius: 23px; padding: 0 22px; font-size: 16px; font-weight: 500; flex: 1 1 auto; white-space: nowrap; box-shadow: var(--sh); background: var(--card); }
  .btn.primary { background: var(--ink); color: var(--paper); }
  .btn.ghost { box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); }
  .actions .round { flex: none; width: 48px; height: 48px; }
  .round svg.fill { fill: var(--ink); stroke: none; }
  .facts { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 15px; line-height: 1.3; }
  .facts b { font-weight: 600; font-variant-numeric: tabular-nums; }
  .card { max-height: calc(100% - 24px); overflow-y: auto; }
  .tabs { display: flex; gap: 6px; flex-wrap: wrap; }
  .tab { height: 34px; padding: 0 14px; border-radius: 17px; font-size: 14px; font-weight: 500; background: var(--card); box-shadow: var(--sh), inset 0 0 0 1.5px var(--line-strong); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .tab.try { box-shadow: var(--sh), inset 0 0 0 2px var(--player); }
  .tab .ico { flex: none; }
  .tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--ink); color: var(--paper); box-shadow: var(--sh); }
  .lb { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; font-size: 15px; font-variant-numeric: tabular-nums; }
  .lb li { display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 7px 0; border-top: 1px solid var(--hair); }
  .lb li:first-child { border-top: 0; }
  .lb .rank { color: var(--muted); }
  .lb .who { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lb .me .who { font-weight: 600; }
  .kind { font-size: 11px; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
  .lb .kind { margin-left: 6px; }
  /* the site's corner of the menu: the way back to the games on the left, who is playing on the right. It floats over the field, like the HUD.
     The same in every game of the site (taken as it is from Skimline). */
  .sitebar { position: absolute; top: calc(8px + var(--safe-top, 0px)); left: calc(12px + env(safe-area-inset-left, 0px)); right: calc(12px + env(safe-area-inset-right, 0px));
    display: flex; justify-content: space-between; align-items: center; gap: 12px; pointer-events: none; z-index: 2; }
  .pill { pointer-events: auto; box-sizing: border-box; height: 36px; padding: 0 14px 0 10px; display: inline-flex; align-items: center; gap: 6px; min-width: 0;
    background: var(--card); border-radius: 18px; box-shadow: var(--sh); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
  .btn .backarrow { width: 12px; height: 12px; margin-right: 6px; vertical-align: -1px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .pill svg { width: 12px; height: 12px; flex: none; stroke: currentColor; fill: none; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
  .pill.who { padding: 0 14px 0 11px; max-width: 62%; }
  .pill.who #mWhoIcon { display: inline-flex; flex: none; }
  .pill.who #mWho { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  /* on a screen wider than it is tall the menu card sits in the middle: the profile keeps to the room beside it, and on a narrow one shows the picture only */
  @media (min-aspect-ratio: 1/1) { .pill.who { max-width: calc(50% - 180px - 20px); } }
  @media (min-aspect-ratio: 1/1) and (max-width: 700px) { .pill.who { padding: 0 10px; } .pill.who #mWho { display: none; } }
  /* a message never sits over the corner: on an upright screen it steps below it, on a wide one it keeps to the width of the card between the two */
  #sitebar:not([hidden]) ~ .toast { top: calc(52px + var(--safe-top, 0px)); }
  @media (min-aspect-ratio: 1/1) { #sitebar:not([hidden]) ~ .toast { top: calc(10px + var(--safe-top, 0px)); max-width: min(360px, calc(100% - 32px)); } }
  /* the profile */
  .idline { margin: 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
  h2.idline + .note { margin-top: -8px; }
  @media (max-height: 430px) and (min-aspect-ratio: 1/1) {      /* a phone on its side: wider, so lines and buttons sit side by side and nothing scrolls */
    #panel.result, #panel.prof { width: min(560px, calc(100% - 32px)); } #panel.prof.prof, #panel.result.result { gap: 8px; }
    #panel.prof .pstats { grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto; column-gap: 0; }
    #panel.prof .pstats dt:nth-of-type(even) { padding-left: 18px; }
  }
  @media (max-height: 600px) { .pstats dt, .pstats dd { padding: 3px 0; } #panel.prof, #panel.result { gap: 10px; padding-top: 16px; padding-bottom: 12px; } #panel.prof .btn, #panel.result .btn { height: 42px; } }
  .idline .sk { width: 26px; height: 26px; flex: none; }
  .idline b { font-size: 20px; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  /* the player's stats (Your stats, from the profile): every total, two to a line on a phone and four on a wide screen */
  #panel.statsp { gap: 12px; }
  .tiles { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; font-variant-numeric: tabular-nums; }
  .tiles div { min-width: 0; padding: 4px 0 3px; border-top: 1px solid var(--line); }
  .tiles dt { margin: 0; font-size: 12px; line-height: 1.2; color: var(--muted); }
  .tiles dd { margin: 1px 0 0; font-size: 16px; font-weight: 500; line-height: 1.25; overflow-wrap: anywhere; }
  @media (min-aspect-ratio: 1/1) { #panel.statsp { width: min(640px, calc(100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px))); } .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
  @media (max-height: 640px) { #panel.statsp { gap: 8px; } .tiles { gap: 1px 12px; } .tiles div { padding: 2px 0 1px; } .tiles dt { font-size: 11.5px; } .tiles dd { font-size: 14.5px; line-height: 1.2; } }
  @media (max-height: 400px) { #panel.statsp h2 { font-size: 18px; } .tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
  @media (max-width: 360px) { .tiles { column-gap: 10px; } .tiles dd { font-size: 14px; } }
  @media (max-height: 600px) { #panel.statsp { padding-top: 16px; padding-bottom: 12px; } #panel.statsp h2 { font-size: 20px; } }
  /* the leaderboard as a table: rank, player, the board's columns; the player's own row marked, their own line apart under the ten */
  .lbt { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; column-gap: 0; font-size: 15px; font-variant-numeric: tabular-nums; }
  .lbt li { display: contents; }
  .lbt li > * { padding: 6px 0; border-top: 1px solid var(--line); min-width: 0; }
  .lbt li > * + * { padding-left: 10px; }      /* the columns' room is padding, not a gap, so a marked row is one band */
  .lbt li:first-child > * { border-top: 0; }
  .lbt .rank { color: var(--muted); text-align: right; min-width: 18px; }
  .lbt .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .lbt .v { text-align: right; white-space: nowrap; }
  .lbt .v + .v { color: var(--muted); }
  .lbt li.head > * { padding-top: 0; padding-bottom: 4px; font-size: 11px; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); white-space: normal; line-height: 1.2; align-self: end; }
  .lbt li.head .v { max-width: 84px; }
  .lbt li.me > * { font-weight: 600; background: var(--line); }
  .lbt li > :first-child { padding-left: 6px; }
  .lbt li > :last-child { padding-right: 6px; }
  .lbt li.me > :first-child { border-radius: 8px 0 0 8px; }
  .lbt li.me > :last-child { border-radius: 0 8px 8px 0; }
  .lbt li.own > * { border-top: 1.5px solid var(--line-strong); margin-top: 6px; }
  .lbt .kind { margin-left: 6px; }
  .lbwait { margin: 0; padding: 14px 0; color: var(--muted); font-size: 15px; }
  a.inl { color: var(--ink); text-decoration: none; font-weight: 500; }      /* a link inside a line of text */
  .pstats { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; font-size: 15px; font-variant-numeric: tabular-nums; }
  .pstats dt, .pstats dd { margin: 0; padding: 5px 0; border-top: 1px solid var(--line); }
  .pstats dt { color: var(--muted); }
  .pstats dd { text-align: right; font-weight: 500; padding-left: 12px; }
  .pstats dt:first-of-type, .pstats dd:first-of-type { border-top: 0; }
  a.btn { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
  .pair .btn { padding: 0 14px; }      /* the two ways to an account share a line, on a small phone too */
  .links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 16px; }
  .links > .link { display: inline-flex; align-items: center; min-height: 28px; line-height: 1.2; font-size: 13px; padding: 0; }      /* the sound and the way back: the same box, so the same line */
  .lb .score { color: var(--muted); font-size: 14px; white-space: nowrap; }
  .namerow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .namerow input { font: inherit; font-size: 16px; color: var(--ink); background: transparent; border: 1.5px solid var(--line-strong); border-radius: 12px; height: 42px; padding: 0 12px; min-width: 0; -webkit-user-select: text; user-select: text; }
  .namerow .btn { height: 42px; flex: none; padding: 0 16px; font-size: 15px; }
  .btn.small { height: 40px; font-size: 15px; padding: 0 14px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
  .btn:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .tab:disabled { opacity: 0.4; cursor: default; box-shadow: none; }
  .tab .gem { margin-left: 3px; width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px var(--coin-ring); }
  .bal { margin: -8px 0 0; display: flex; align-items: center; gap: 8px; font-size: 16px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .bal b { color: var(--ink); font-weight: 600; }
  .shop { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; }
  .shop li { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--hair); }
  .shop li:first-child { border-top: 0; }
  .shop li.looks { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shop li.looks .tab { max-width: 100%; box-sizing: border-box; height: auto; min-height: 34px; white-space: normal; text-align: left; padding-top: 5px; padding-bottom: 5px; }      /* a long name and its lock wrap rather than run past the card */
  .meter { display: block; height: 4px; border-radius: 2px; background: var(--line); margin: 7px 0 5px; overflow: hidden; }
  .meter i { display: block; height: 100%; border-radius: 2px; background: var(--player); }
  .buy.wide { justify-content: center; }
  .toast { position: absolute; left: 50%; top: 10px; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); box-sizing: border-box; z-index: 5;
    background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 500; line-height: 1.3; padding: 9px 16px; border-radius: 999px; box-shadow: var(--sh); pointer-events: none; text-align: center; animation: toastin 160ms ease-out; }
  @keyframes toastin { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0 0; } }      /* a notice drops 8 px and appears, 160 ms */
  .gift { color: var(--ink); }
  .note b { color: var(--ink); font-weight: 600; }
  .modes .btn { padding: 0 14px; }
  /* a player shape in the store: the game's own drawing, used as a mask so it takes the colour of the text around it */
  .sk { width: 16px; height: 16px; display: inline-block; background: currentColor; -webkit-mask-image: var(--m); mask-image: var(--m);
    -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; }
  /* an upgrade level that has not opened yet */
  .shut { margin: 0; height: 36px; padding: 0 12px; border: 1.5px dashed var(--line-strong); border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; }
  .gift b { font-weight: 600; }
  .tab .ico + span + .ico, .tab span + .ico { margin-left: 3px; }
  /* The store never scrolls. Its card has a fixed height; the rows (or the looks' chips) take what room is left, a page at a time (pageStore).
     It opens on its sections, two to a line. On a short wide screen the heading, the strip and Back sit on the left, the rows on the right. */
  #panel.store { height: min(calc(100% - 24px), 760px); max-height: none; overflow: hidden; padding: 16px 18px 14px; gap: 10px; }
  @media (max-aspect-ratio: 1/1) { #panel.store { height: min(760px, calc(100% - 40px - env(safe-area-inset-bottom, 0px) - var(--safe-top, 0px))); } }
  #panel.store .shopside { display: contents; }
  .shophead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
  .shophead h2 { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .shophead .bal { margin: 0; flex: none; }
  #panel.store .prevwrap { position: static; margin: 0; padding: 0; }
  #panel.store .prevwrap::before { display: none; }
  #panel.store .prev { height: clamp(48px, 7vh, 76px); }
  #panel.store #shopMsg { font-size: 13px; }
  #panel.store .shop li { padding: 8px 0; gap: 10px; }
  #panel.store .shop b { font-size: 15px; }
  #panel.store .shop p { font-size: 13px; line-height: 1.28; }
  #panel.store .pay { gap: 4px; }
  #panel.store .buy, #panel.store .shut { height: 32px; padding: 0 12px; font-size: 14px; }
  #panel.store .shop li.looks { gap: 8px; }
  #panel.store .shop li.looks .tab { min-height: 32px; }
  .shopmain { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
  #shopList { flex: 1 1 0; min-height: 0; overflow: hidden; position: relative; }
  .shop.sects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: minmax(64px, auto); gap: 8px; align-content: start; }
  .shop.sects li { display: block; padding: 0; border: 0; }
  .sect { width: 100%; height: 100%; box-sizing: border-box; text-align: left; background: var(--bg); border-radius: 14px; box-shadow: var(--sh); padding: 10px 12px; display: flex; flex-direction: column; justify-content: center; gap: 3px; }
  .sect b { font-size: 16px; font-weight: 600; }
  .sect span { font-size: 12.5px; line-height: 1.25; color: var(--muted); text-wrap: pretty; }
  .lhead { display: flex; align-items: baseline; gap: 8px; }
  .lhead .lvl { margin: 0; }
  /* the looks: a tile each, with the look drawn by the game's own code (as in Skimline). Its name is read aloud, shown on hover or focus, and said
     above the tiles for the one worn and under them for the one tried on. Owned ones carry nothing else; one for sale has a coin, a closed one a lock.
     Worn: filled (a ground: a double ring). Tried on: the player's colour. */
  .chips.lgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 6px; }
  @media (max-width: 360px) { .chips.lgrid { grid-template-columns: repeat(auto-fill, minmax(34px, 1fr)); gap: 5px; } }      /* the smallest phones: a sixth tile to a line */
  @media (max-height: 600px) and (max-aspect-ratio: 1/1) { #panel.store .shop li.looks { padding: 2px 0; gap: 6px; } #panel.store #shopSub .tab { height: 30px; padding: 0 12px; font-size: 13px; }
    #panel.store .shopmain { gap: 6px; } #panel.store .pager .round { width: 32px; height: 32px; } }
  .lt { position: relative; aspect-ratio: 1; width: 100%; min-width: 0; padding: 0; box-sizing: border-box; border-radius: 12px; box-shadow: var(--sh); overflow: hidden;
    display: grid; place-items: center; color: var(--ink); background-color: var(--bg); background-size: cover; background-position: center; background-clip: padding-box; }
  .lt .sk { width: 66%; height: 66%; }
  .lt[aria-pressed="true"] { background-color: var(--ink); color: var(--paper); }
  .lt.bgl[aria-pressed="true"] { box-shadow: var(--sh), inset 0 0 0 2.5px var(--ink), inset 0 0 0 4.5px var(--card); }
  .lt.try { box-shadow: var(--sh), inset 0 0 0 2px var(--player); }
  .lt.locked .sk { opacity: 0.38; }
  .lt.locked.bgl::after { content: ""; position: absolute; inset: 0; background: var(--card); opacity: 0.55; }
  .lt .badge { position: absolute; right: 2px; bottom: 2px; z-index: 1; width: 16px; height: 16px; border-radius: 8px; background: var(--card); color: var(--ink); display: grid; place-items: center; }
  .lt .badge .gem { width: 9px; height: 9px; box-shadow: inset 0 0 0 1.5px var(--coin-ring); }
  .lt .badge .ico { width: 8px; height: 10px; }
  .pager { flex: none; display: flex; align-items: center; justify-content: center; gap: 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .pager .round { width: 36px; height: 36px; }
  #panel.store .shopact .btn { height: 44px; }
  @media (min-height: 501px) and (min-aspect-ratio: 1/1) {      /* a wide screen: a wider store, its rows two to a line */
    #panel.store { width: min(780px, calc(100% - 32px)); }
    #panel.store .shop:not(.sects) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 22px; align-content: start; }
    #panel.store .shop:not(.sects) li:nth-child(2) { border-top: 0; }
    #panel.store .shop li.looks { grid-column: 1 / -1; }
    #panel.store .shop.sects { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .chips.lgrid { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 8px; }      /* the looks' tiles a little bigger than on a phone */
  }
  @media (max-height: 500px) and (min-aspect-ratio: 1/1) {
    #panel.store { width: min(720px, calc(100% - 32px)); display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); grid-template-rows: minmax(0, 1fr) auto; gap: 10px 18px; padding: 14px 16px 12px; }
    #panel.store .shopside { display: flex; flex-direction: column; gap: 8px; grid-column: 1; grid-row: 1; min-height: 0; }
    #panel.store .shopmain { grid-column: 2; grid-row: 1 / span 2; }
    #panel.store .shopact { grid-column: 1; grid-row: 2; }
  }
  .prevwrap { flex: none; position: sticky; top: 0; z-index: 1; background: var(--card); padding: 8px 0; margin: -8px 0; }
  .prevwrap::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 24px; background: var(--card); }   /* nothing shows above the strip while the list scrolls under it */
  #shopMsg, #panel .tabs, #testRow { position: relative; z-index: 2; }
  .prev { display: block; width: 100%; height: 92px; border-radius: 12px; }
  .shop b { font-weight: 600; font-size: 16px; }
  .shop p { margin: 2px 0 0; font-size: 13.5px; line-height: 1.3; color: var(--muted); }
  .lvl { font-size: 12px; letter-spacing: 0.04em; color: var(--muted); margin-left: 8px; white-space: nowrap; font-variant-numeric: tabular-nums; }
  .buy { flex: none; height: 40px; padding: 0 14px; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; font-variant-numeric: tabular-nums; }
  .chips { display: flex; gap: 6px; flex-wrap: wrap; }
  .shieldchip { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--player); box-sizing: border-box; display: inline-block; }
  .shop li.head { grid-template-columns: minmax(0, 1fr); gap: 0; padding-top: 16px; }
  .pay { display: flex; flex-direction: column; gap: 6px; align-items: stretch; }
  .shop li.ab2 { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .shop li.ab2 .pay { flex-direction: row; flex-wrap: wrap; }
  .shop li.ab2 .pay > * { flex: 1 1 0; min-width: 0; justify-content: center; padding: 0 8px; }
  .pay .buy { height: 36px; justify-content: center; }
  .adbar { margin: 0; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
  .adbar span { display: block; height: 100%; width: 0; background: var(--player); transition: width 1s linear; }
  .bal span { margin-left: 6px; }
  .btn.small svg { flex: none; }
  .foot { display: flex; align-items: center; flex-wrap: wrap; gap: 2px 14px; font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
  .chips .lvl { margin: 0 4px 0 0; align-self: center; }
  .foot .grow { flex: 1; min-width: 0; }
  .link { color: var(--muted); text-decoration: none; font-size: 13px; min-height: 28px; }

  .rows { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
  .rows li { display: flex; align-items: center; gap: 10px; font-size: 16px; }
  .rows li.off { color: var(--muted); }
  .rows svg { width: 20px; height: 20px; flex: none; }
  .rows svg path { stroke-width: 1.4; stroke-linejoin: round; }
  .rows .val { margin-left: auto; font-variant-numeric: tabular-nums; color: var(--muted); font-size: 14px; }


  /* Pulsework: the plant's Done button in the HUD, the plant's output a second, flux in the menu, three buttons to a line */
  #hud .pill.done { pointer-events: auto; height: 34px; padding: 0 16px; font-weight: 600; background: var(--ink); color: var(--paper); }
  .rate { color: var(--muted); font-size: 14px; }
  .btn .bolt, .tab .bolt { width: 9px; height: 12px; fill: none; stroke: var(--player); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex: none; }
  .actions.three .btn { flex: 1 1 0; min-width: max-content; padding: 0 12px; }
  .bal .bolt { width: 11px; height: 14px; fill: none; stroke: var(--player); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; overflow: visible; flex: none; }
  .bal.flx b { color: var(--ink); }
  .away { display: flex; flex-direction: column; gap: 4px; }
  .away .bal { margin: 0; font-size: 17px; }
  .away .bal b { font-size: 21px; }
  .bal .flx { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; color: var(--muted); }
  .bal .flx .bolt { width: 10px; height: 13px; }
  .energy .u { font-size: calc(11px * var(--k)); font-weight: 500; color: var(--muted); }
  .tw .ct { font-variant-numeric: tabular-nums; }
  .tw.lock { opacity: 0.45; }
  /* in a shift the bar holds only the abilities, in one row */
  #bar.abil { height: calc(56px * var(--k) + env(safe-area-inset-bottom, 0px)); justify-content: center; }
  #bar.abil .skills { flex: 1 1 auto; order: 0; height: 100%; }
  .ab .kn { position: absolute; right: -3px; bottom: -3px; min-width: 14px; height: 14px; border-radius: 7px; background: var(--card); border: 1px solid var(--line-strong);
    font-size: 10px; font-weight: 600; line-height: 12px; text-align: center; color: var(--muted); box-sizing: border-box; pointer-events: none; }
  .ab .kn:empty { display: none; }
  /* a short upright phone: the menu a little tighter, so it never needs a scroll */
  @media (max-height: 620px) and (max-aspect-ratio: 1/1) { #menu { gap: 12px; padding-top: 18px; padding-bottom: 12px; } #menu h1 { font-size: 32px; } #menu .tag { margin-top: 4px; font-size: 14px; }
    #menu .btn { height: 44px; } #menu .btn.small { height: 38px; } }
  /* the smallest phones: the tag line steps out, so the card keeps clear of the site's corner whatever the balances */
  @media (max-height: 600px) and (max-width: 340px) and (max-aspect-ratio: 1/1) { #menu .tag { display: none; } #menu { gap: 10px; } #menu .route-n { font-size: 22px; } }
  /* Your stats a page at a time when they do not all fit */
  #panel.statsp { max-height: calc(100% - 24px); }
  #panel.statsp .tiles { min-height: 0; overflow: hidden; }
  .stpager { margin-top: -4px; }
  @media (max-height: 430px) and (min-aspect-ratio: 1/1) { #panel.pausep { width: min(640px, calc(100% - 32px)); } }
  /* a phone on its side: the menu card a little wider, so its buttons keep to their rows */
  @media (max-height: 430px) and (min-aspect-ratio: 1/1) { #menu { width: min(440px, calc(100% - 32px)); } #menu .actions.three .btn { flex: 1 1 auto; } }
  @media (prefers-reduced-motion: reduce) { .ring { animation: none; } }