/* Layout: one screen. The board is a grid of flat shapes with a build bar beside it (below it on an upright phone);
     menus are quiet left-aligned cards that float over it. Each world swaps the palette. */
  :root {
    --bg: #E7EFE4;
    --band: #C2D2BC;
    --ink: #1D2A20;
    --muted: #5D6E61;
    --player: #2852D6;
    --hazard: #E2533A;
    --reward: #E3A200;
    --card: #F4F8F2;
    --line: rgba(29, 42, 32, 0.14);
    --line-strong: rgba(29, 42, 32, 0.32);
    --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 and per the theme chosen in the store. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
      --bg: #141F17; --band: #27392C; --ink: #E6F0E8; --muted: #99AC9E; --player: #7DB8FF; --hazard: #FF6F57; --reward: #FFD15C; --card: #1C2B20;
      --line: rgba(230, 240, 232, 0.14); --line-strong: rgba(230, 240, 232, 0.34); color-scheme: dark;
    }
  }
  :root[data-theme="dark"] {
    --bg: #141F17; --band: #27392C; --ink: #E6F0E8; --muted: #99AC9E; --player: #7DB8FF; --hazard: #FF6F57; --reward: #FFD15C; --card: #1C2B20;
    --line: rgba(230, 240, 232, 0.14); --line-strong: rgba(230, 240, 232, 0.34); color-scheme: dark;
  }
  html, body { height: 100%; }
  body {
    background: var(--bg); 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 { outline: 2px solid var(--player); outline-offset: 3px; }

  /* 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; }
  .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: transparent; border: 1.5px solid var(--line-strong); }
  .lives { display: inline-flex; align-items: center; gap: 5px; }
  .lives svg { width: 15px; height: 15px; fill: var(--player); }
  .lives.low { color: var(--hazard); }
  .lives.low svg { fill: var(--hazard); }
  .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: var(--ink); }

  /* the build bar: energy, and one button for each tower. Below the board on an upright screen, beside it on a wide one. */
  #bar {
    position: absolute; left: 0; right: 0; bottom: 0; height: 72px; box-sizing: border-box; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px));
    display: flex; align-items: stretch; gap: 8px; font-variant-numeric: tabular-nums;
  }
  .side #bar { left: auto; top: 44px; bottom: 0; width: 104px; height: auto; flex-direction: column; padding: 8px 12px 12px 4px; }
  #bar.two { height: 120px; flex-wrap: wrap; align-content: space-between; row-gap: 6px; }
  #bar.two > .tw, #bar.two > .energy { height: 56px; }
  .side #bar.two { height: auto; flex-wrap: nowrap; }
  .side #bar.two > .tw, .side #bar.two > .energy { height: auto; }
  .energy { flex: none; min-width: 58px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; font-size: 20px; font-weight: 600; line-height: 1; }
  .energy svg { width: 14px; height: 18px; fill: var(--player); }
  .energy.short { animation: shake 0.3s; color: var(--hazard); }
  @keyframes shake { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
  .tw {
    flex: 1 1 0; min-width: 0; border: 1.5px solid var(--line-strong); border-radius: 14px; background: var(--card);
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "ico cost" "name name"; align-items: center; justify-items: center; gap: 0 4px; padding: 3px 6px 4px;
  }
  .side .tw { flex: 0 0 60px; }
  .tw canvas { grid-area: ico; width: 28px; height: 28px; display: block; }
  .tw .nm { grid-area: name; font-size: 12.5px; font-weight: 500; line-height: 1.1; white-space: nowrap; }
  .tw .ct { grid-area: cost; font-size: 15px; font-weight: 500; line-height: 1; justify-self: start; }
  .tw[aria-pressed="true"] { border-color: var(--player); box-shadow: inset 0 0 0 1.5px var(--player); }
  .tw.poor .ct { color: var(--hazard); }
  .tw.cur { outline: 2px solid var(--ink); outline-offset: 2px; }
  /* abilities and the game speed: a row above the towers (a column below them on a wide screen) */
  .skills { flex: 0 0 100%; order: -1; height: 40px; display: flex; justify-content: center; align-items: center; gap: 10px; }
  .side .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: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--card); display: grid; place-items: center; flex: none; }
  .ab svg { width: 18px; height: 18px; 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 { border-color: var(--player); }
  .ab.on { background: var(--player); }
  .ab.on svg { fill: var(--card); stroke: var(--card); }
  .ab.cur { outline: 2px solid var(--ink); outline-offset: 2px; }
  .ab.spd { width: auto; min-width: 40px; padding: 0 8px; border-radius: 20px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
  .side .ab.spd { grid-column: span 2; justify-self: center; }
  /* what a tower is: picked in the bar, or tapped on the board */
  .info { position: absolute; z-index: 3; width: min(290px, calc(100% - 16px)); box-sizing: border-box; background: var(--card); border: 1px solid var(--line-strong); border-radius: 18px;
    padding: 10px 12px 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); }
  .info::after { content: ''; position: absolute; left: var(--ax, 50%); bottom: -7px; width: 12px; height: 12px; margin-left: -7px; background: var(--card);
    border: solid var(--line-strong); border-width: 0 1px 1px 0; transform: rotate(45deg); }      /* the point towards the tower */
  .info.below::after { bottom: auto; top: -7px; border-width: 1px 0 0 1px; }
  .info.left::after, .info.right::after { bottom: auto; top: var(--ay, 50%); margin: -7px 0 0; }
  .info.left::after { left: auto; right: -7px; border-width: 1px 1px 0 0; }
  .info.right::after { left: -7px; border-width: 0 0 1px 1px; }
  .ihead { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto 32px; align-items: center; gap: 8px; }
  .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: 32px; height: 32px; }
  .ihead .icon { width: 32px; height: 32px; pointer-events: auto; }
  .ihead .icon svg { width: 14px; height: 14px; }
  .iname b { font-size: 17px; font-weight: 600; }
  .iname .lvl { font-size: 12px; 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: 5px; font-size: 13px; font-variant-numeric: tabular-nums; }
  .stats li { display: grid; grid-template-columns: 58px minmax(28px, 1fr) auto; grid-template-areas: 'k m v'; gap: 8px; align-items: center; min-width: 0; }
  .stats .k { color: var(--muted); grid-area: k; }
  .stats .m { grid-area: m; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; display: block; }
  .stats .m i { display: block; height: 100%; border-radius: 3px; background: var(--tc, var(--player)); }
  .stats .v { grid-area: v; text-align: right; max-width: 150px; }
  .stats .v em { font-style: normal; color: var(--player); font-weight: 600; }
  .info .note { font-size: 13px; }
  .info .btn { height: 34px; padding: 0 12px; font-size: 15px; flex: none; }
  .info .btn .gem { margin-left: 2px; }
  .info .btn { gap: 4px; }
  .info .btn.poor { opacity: 0.6; }
  .info .btn span { font-weight: 400; }
  .energy.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; } }

  /* 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; color: var(--ink); pointer-events: none;
    background: var(--card); border: 1px solid var(--line); border-radius: 15px; padding: 4px 12px 4px 10px; min-height: 20px;
  }
  .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: 1px solid var(--line); border-radius: 22px;
    padding: 22px 22px 16px; display: flex; flex-direction: column; gap: 16px;
  }
  @media (max-aspect-ratio: 1/1) {
    .card { top: auto; bottom: calc(20px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); }
  }
  @media (max-height: 430px) {
    .card { padding: 14px 18px 12px; gap: 10px; }
    h1 { font-size: 30px; }
  }
  h1 { margin: 0; font-size: 40px; font-weight: 300; letter-spacing: -0.01em; line-height: 1; }
  h2 { margin: 0; font-size: 24px; font-weight: 400; line-height: 1.15; text-wrap: balance; }
  .tag { margin: 6px 0 0; color: var(--muted); font-size: 15px; }
  .note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.35; }

  .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%; border: 1.5px solid var(--line-strong); 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.3; cursor: default; }
  .route-n { font-size: 24px; font-weight: 400; font-variant-numeric: tabular-nums; line-height: 1.1; }
  .route-meta { font-size: 13px; color: var(--muted); letter-spacing: 0.04em; white-space: pre-line; line-height: 1.35; }
  .stars { display: inline-flex; gap: 3px; }
  .stars svg { width: 18px; height: 18px; }
  .star-on { fill: var(--reward); stroke: var(--reward); }
  .star-off { fill: none; stroke: var(--line-strong); }
  .stars svg path { stroke-width: 1.4; stroke-linejoin: round; }

  .actions { display: flex; gap: 10px; flex-wrap: wrap; }
  .btn { height: 48px; border-radius: 24px; padding: 0 22px; font-size: 17px; font-weight: 500; flex: 1 1 auto; white-space: nowrap; }
  .btn.primary { background: var(--ink); color: var(--bg); }
  .btn.ghost { border: 1.5px solid 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; border: 1.5px solid var(--line-strong); display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
  .tab.try { border-color: var(--player); box-shadow: inset 0 0 0 1px var(--player); }
  .tab .ico { flex: none; }
  .tab[aria-selected="true"], .tab[aria-pressed="true"] { background: var(--ink); color: var(--bg); border-color: var(--ink); }
  .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(--line); }
  .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: 1px solid var(--line); border-radius: 18px; color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; }
  .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: -6px 0 0; display: flex; align-items: center; gap: 10px; min-width: 0; }
  .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; }
  .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: center; gap: 2px 16px; }
  .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; }
  .tab:disabled { opacity: 0.4; cursor: default; }
  .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(--line); }
  .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(--bg); font-size: 14px; line-height: 1.3; padding: 9px 14px; border-radius: 14px; pointer-events: none; text-align: center; }
  .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; }
  .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: underline; text-underline-offset: 3px; 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; }

  @media (prefers-reduced-motion: reduce) { .ring { animation: none; } }