/* Pikoversum website - design "Nacht & Magenta" (D15), own CSS without framework (D16), mobile first:
   phone = top bar + bottom bar, from 960px = sidebar on the left (D14). Colours and sizes only through the tokens. */

@font-face { font-family: Lato; font-style: normal; font-weight: 300; font-display: swap; src: url(fonts/lato-300.woff2) format("woff2"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 400; font-display: swap; src: url(fonts/lato-400.woff2) format("woff2"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 700; font-display: swap; src: url(fonts/lato-700.woff2) format("woff2"); }
@font-face { font-family: Lato; font-style: normal; font-weight: 900; font-display: swap; src: url(fonts/lato-900.woff2) format("woff2"); }

:root {
  --bg: #0B0A10;
  --side: #0E0D14;
  --surface: #15131D;
  --surface-hover: #1A1724;
  --surface-2: #221E2D;
  --line: #2A2635;
  --orbit: #3A3448;
  --text: #F4F1F7;
  --muted: #A79FB8;
  --magenta: #BF00BF;
  --magenta-text: #E04BE0;
  --on-magenta: #FFFFFF;
  --danger: #FF8FA3;
  --ok: #7FD9A4;
  --caution: #F2C76E;
  --faint: #5E566E;
  --mare: #E2619F;
  --stallion: #3F8CF0;
  --tip-bg: #F4F1F7;
  --tip-text: #15131D;
  /* the eight button colours of the pairing groups (old Bootstrap colours) */
  --group-0: #2F6FE4; --group-1: #6C7580; --group-2: #1E8A5A; --group-3: #D2384A;
  --group-4: #F2B81E; --group-5: #22B8D6; --group-6: #EEF0F3; --group-7: #24272C;
  --on-group-dark: #FFFFFF; --on-group-light: #14161A;
  --bar: rgba(13, 12, 19, .86);
  --font: Lato, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --gutter: 16px;
  --edge: 16px;
  --r-tile: 22px;
  --r-big: 28px;
  --bar-h: 68px;
  color-scheme: dark;
  scrollbar-color: var(--orbit) var(--bg);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--text);
  font: 400 16px/1.5 var(--font); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
/* fine stars behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .7;
  background:
    radial-gradient(circle at 8% 14%, var(--muted) 0 1px, transparent 1.6px),
    radial-gradient(circle at 23% 62%, var(--muted) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 41% 9%, var(--muted) 0 1px, transparent 1.6px),
    radial-gradient(circle at 57% 78%, var(--muted) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 71% 33%, var(--muted) 0 1px, transparent 1.6px),
    radial-gradient(circle at 86% 88%, var(--muted) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 93% 21%, var(--muted) 0 1px, transparent 1.6px),
    radial-gradient(circle at 34% 94%, var(--muted) 0 .8px, transparent 1.4px),
    radial-gradient(circle at 64% 52%, var(--muted) 0 .7px, transparent 1.3px);
}
::selection { background: rgba(191, 0, 191, .45); color: var(--text); }
a { color: var(--magenta-text); }
:focus-visible { outline: 2px solid var(--magenta-text); outline-offset: 3px; border-radius: 10px; }
svg { flex: none; }
h1, h2, h3, h4 { text-wrap: balance; }

.skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 16px; border-radius: 12px; background: var(--magenta); color: var(--on-magenta); font-weight: 700; text-decoration: none; }
.skip:focus { top: 12px; }

/* ---------- frame ---------- */
.side { display: none; }
.page { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; overflow-x: clip; padding-bottom: calc(var(--bar-h) + env(safe-area-inset-bottom)); }
@supports not (overflow: clip) { .page { overflow-x: hidden; } }
.top {
  position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 64px; padding: env(safe-area-inset-top) 20px 0;
}
.top-actions { display: flex; align-items: center; gap: 8px; }
.top .install { display: none; }

/* "Als Spieler ansehen" (D91): the bar of the DEV admin above every page, it stays at the top while scrolling */
.viewas {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px;
  padding: calc(env(safe-area-inset-top) + 8px) var(--edge) 8px; background: var(--magenta); color: var(--on-magenta); font-size: 14px; line-height: 1.35;
}
.viewas p { margin: 0; display: flex; align-items: center; gap: 8px; flex: 1 1 240px; }
.viewas svg { flex: none; }
.viewas .viewas-refused { flex-basis: 100%; order: 3; font-weight: 700; }
.viewas form { margin: 0; }
.viewas button { font: inherit; font-weight: 700; color: var(--magenta); background: var(--on-magenta); border: 0; border-radius: 999px; padding: 6px 14px; cursor: pointer; }
.viewas button:focus-visible { outline: 2px solid var(--on-magenta); outline-offset: 2px; }
main { flex: 1 0 auto; width: 100%; max-width: 1200px; padding: 0 var(--edge) 40px; }

.mark { display: inline-flex; align-items: baseline; color: var(--text); text-decoration: none; font-size: 20px; letter-spacing: .06em; line-height: 1; }
.mark .piko { font-weight: 900; color: var(--magenta); }
.mark .versum { font-weight: 300; }

.pill {
  display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 12px; border-radius: 18px;
  border: 1px solid var(--line); background: transparent; color: var(--muted); cursor: pointer;
  font: 700 12px/1 var(--font); letter-spacing: .08em; text-decoration: none; transition: color .2s, border-color .2s;
}
.pill:hover { color: var(--text); border-color: var(--orbit); }

.foot { padding: 22px 24px 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.foot nav { display: flex; flex-wrap: wrap; gap: 6px 18px; }
.foot a { color: var(--muted); text-decoration: none; }
.foot a:hover, .foot a[aria-current] { color: var(--text); }
.foot p { margin: 12px 0 0; font-size: 12px; line-height: 1.5; opacity: .75; }

/* bottom bar on the phone, at most five slots */
.bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  padding: 8px 6px calc(8px + env(safe-area-inset-bottom));
  background: var(--bar); border-top: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
}
.bar a { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; color: var(--muted); text-decoration: none; font-size: 11px; line-height: 1.2; -webkit-tap-highlight-color: transparent; }
.bar-icon { display: flex; align-items: center; justify-content: center; width: 56px; max-width: 100%; height: 30px; border-radius: 15px; transition: background .2s, color .2s; }
.bar a[aria-current] { color: var(--magenta-text); font-weight: 700; }
.bar a[aria-current] .bar-icon { background: var(--surface-2); }
.bar a:active .bar-icon { background: var(--surface-2); }

/* ---------- elements ---------- */
.eyebrow { margin: 0 0 14px; font-size: 12px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--magenta-text); }
.eyebrow.muted { color: var(--muted); }
.lead { margin: 14px 0 0; max-width: 34em; color: var(--muted); font-size: 16px; line-height: 1.5; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 22px; border-radius: 24px;
  border: 1px solid transparent; background: transparent; color: var(--text); cursor: pointer;
  font: 700 15px/1 var(--font); text-decoration: none; transition: filter .2s, border-color .2s, transform .15s;
}
.btn:active { transform: scale(.97); }
.btn.primary { background: var(--magenta); color: var(--on-magenta); box-shadow: 0 8px 28px -10px rgba(191, 0, 191, .7); }
.btn.primary:hover { filter: brightness(1.12); }
.btn.ghost { border-color: var(--line); }
.btn.ghost:hover { border-color: var(--orbit); }
.btn.big { height: 52px; padding: 0 26px; border-radius: 26px; font-size: 16px; }

.badge {
  display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 8px; border-radius: 11px; flex: none;
  border: 1px solid var(--line); color: var(--muted); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.badge.live { align-self: flex-start; height: 24px; padding: 0 10px; border-color: transparent; background: var(--surface-2); color: var(--text); font-size: 11px; }
.badge.live::before { content: ""; width: 6px; height: 6px; border-radius: 3px; background: var(--magenta-text); animation: pulse 2.4s ease-out infinite; }

/* ---------- start page ---------- */
.hero { position: relative; padding: 104px 8px 32px; }
.hero-art { position: absolute; z-index: 0; top: -84px; right: -118px; width: 350px; height: auto; pointer-events: none; }
.hero-text { position: relative; z-index: 1; }
.hero h1 { margin: 0; max-width: 13em; font-weight: 300; font-size: clamp(2.125rem, 1.35rem + 3vw, 4.25rem); line-height: 1.08; letter-spacing: -.012em; }
.hero .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 26px 0 0; }
.hero-text > * { animation: rise .7s cubic-bezier(.2, .7, .2, 1) both; }
.hero-text > :nth-child(2) { animation-delay: .06s; }
.hero-text > :nth-child(3) { animation-delay: .12s; }
.hero-text > :nth-child(4) { animation-delay: .18s; }
/* a signed-in player: a short greeting, "For you" right below it (#37) */
/* the greeting of a signed-in player (#119: once .me, which is the account link of the top bar) */
.hero.hello { padding: 20px 8px 18px; }
.hero.hello h1 { font-size: clamp(1.75rem, 1.4rem + 1.6vw, 2.75rem); }
.hero.hello .lead { margin-top: 6px; }
.hero.hello .hero-text > * { animation: none; }
.spin { transform-box: view-box; transform-origin: 210px 190px; animation: spin 48s linear infinite; }
.spin.slower { animation-duration: 90s; }
.spin.slowest { animation-duration: 240s; }

.discover { padding-top: 8px; }
.discover > h2 { padding: 0 8px; }

/* the shop window for visitors (#122, D151): the planet with the mascot in front, three calm cards with one figure of all
   players each, the Tamer Game as a big tile with its picture, the way in */
.hero.show { padding-top: 8px; }
.show-art { position: relative; width: 82%; max-width: 340px; margin: 0 auto 28px; aspect-ratio: 420 / 380; pointer-events: none; }
.show-planet { position: absolute; inset: 0; width: 100%; height: 100%; }
.show-mascot { position: absolute; left: -6%; bottom: -10%; width: 66%; aspect-ratio: 1; filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .6)); }
.show-mascot img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero.show h1 { text-wrap: balance; }
.show-note { display: flex; align-items: center; gap: 8px; margin: 18px 0 0; color: var(--muted); font-size: 14px; }
.show-note-icons { display: inline-flex; flex: none; gap: 4px; color: var(--magenta-text); }
.show-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.show-card, .show-tamer { border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); color: var(--text); text-decoration: none; transition: border-color .2s, background-color .2s, transform .2s; }
.show-card { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 20px; }
a.show-card:hover, a.show-tamer:hover { border-color: var(--orbit); background-color: var(--surface-hover); transform: translateY(-2px); }
.show-stack { position: relative; display: block; height: 96px; margin-bottom: 8px; }
.show-pets .pet { position: absolute; top: 10px; width: 76px; height: 76px; border: 3px solid var(--surface); border-radius: 18px; }
.show-pets .b1 { left: 0; filter: brightness(.7); }
.show-pets .b2 { left: 126px; filter: brightness(.7); }
.show-pets .front { top: 0; left: 52px; z-index: 1; width: 96px; height: 96px; border-radius: 22px; box-shadow: 0 10px 24px rgba(0, 0, 0, .5); }
.show-goods img { position: absolute; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.show-goods .house { top: 0; left: 18px; width: 96px; height: 96px; }
.show-goods .res { top: 46px; left: 0; z-index: 1; width: 54px; height: 54px; }
.show-goods .prod { top: 40px; left: 92px; z-index: 1; width: 56px; height: 56px; }
.show-big { display: flex; align-items: baseline; gap: 10px; height: 96px; margin-bottom: 8px; }
.show-big b { font-size: 64px; font-weight: 300; line-height: 96px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.show-big span { color: var(--muted); font-size: 15px; }
.show-big.none { align-items: center; color: var(--magenta-text); opacity: .6; }
.show-title { font-size: 20px; font-weight: 700; line-height: 1.25; }
.show-text { flex: 1; color: var(--muted); font-size: 14.5px; line-height: 1.5; }
.show-fig { margin-top: 6px; padding-top: 10px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13px; }
.show-fig b { margin-right: 2px; color: var(--text); font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; }
.show-tamer { position: relative; display: block; overflow: hidden; margin-top: 12px; }
.show-tamer-bg { position: absolute; top: 0; left: 0; width: 100%; height: 200px; max-width: none; object-fit: cover; object-position: 72% 45%; opacity: .9; }
.show-tamer::before { content: ""; position: absolute; top: 0; right: 0; left: 0; z-index: 1; height: 200px; background: linear-gradient(0deg, var(--surface) 0%, transparent 55%); }
.show-tamer-text { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 8px; padding: 176px 20px 20px; }
.show-tamer .show-text { color: var(--text); opacity: .85; }
.show-tamer .show-fig { border-top-color: rgba(255, 255, 255, .12); }
.show-live { position: absolute; top: 18px; left: 20px; display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: 99px; background: rgba(11, 10, 16, .7); color: var(--muted); font-size: 13px; }
.show-live b { color: var(--text); }
.show-go {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 32px; margin: 40px 0 8px; padding: 24px;
  border: 1px solid var(--line); border-radius: var(--r-tile); background: linear-gradient(120deg, rgba(191, 0, 191, .22), rgba(191, 0, 191, .04) 60%), var(--surface);
}
.show-go-text { flex: 1 1 320px; min-width: 0; }
.show-go h2 { margin: 0 0 4px; font-size: 22px; }
.show-go p { max-width: 36em; margin: 0; color: var(--muted); }

/* tiles: the sub menu of every section (D14) */
.tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.tile {
  position: relative; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 156px; padding: 16px;
  border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); color: var(--text); text-decoration: none;
  transition: border-color .2s, background-color .2s, transform .2s;
}
a.tile:hover { border-color: var(--orbit); background-color: var(--surface-hover); transform: translateY(-2px); }
a.tile:active { transform: scale(.985); }
.soon-tile { border-style: dashed; background: transparent; }
.soon-tile .tile-title { margin-top: 0; }
.soon-tile .tile-head { align-items: center; }
.tile.for .tile-title { margin-top: 6px; }
.tile.todo { border-color: rgba(224, 75, 224, .55); background-image: linear-gradient(160deg, rgba(191, 0, 191, .16), transparent 55%); }
.tile-todo { position: relative; color: var(--magenta-text); font-size: 14px; font-weight: 700; line-height: 1.35; }
.tile.wide { grid-column: 1 / -1; }
.tile.feature { min-height: 150px; padding: 18px 20px; background-image: radial-gradient(120% 150% at 100% 100%, rgba(191, 0, 191, .2), transparent 62%); }
.tile-art { position: absolute; right: -6px; bottom: -34px; width: 150px; height: 170px; color: var(--magenta); opacity: .55; transition: transform .4s; }
a.tile:hover .tile-art { transform: translateY(-4px) rotate(-3deg); }
.tile-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.tile-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 14px; flex: none; background: var(--surface-2); color: var(--magenta-text); }
.tile-title { position: relative; margin-top: auto; font-size: 16px; font-weight: 700; line-height: 1.25; }
.tile-text { position: relative; color: var(--muted); font-size: 13px; line-height: 1.4; }
.tile.feature .tile-title { font-size: 22px; }
.tile.feature .tile-text { max-width: 240px; font-size: 14px; }
/* the way to become a host (#127, D153): a link out to the Second Life Marketplace, faintly magenta */
.tile.become { border-color: rgba(224, 75, 224, .45); background-image: linear-gradient(160deg, rgba(191, 0, 191, .14), transparent 60%); }
.tile-ext { color: var(--muted); }
.tile-link { position: relative; color: var(--magenta-text); font-size: 13px; font-weight: 700; }

/* ---------- content pages ---------- */
.page-head { padding: 24px 8px 22px; }
.page-head .eyebrow a { color: inherit; text-decoration: none; }
.page-head .eyebrow a::after { content: " ›"; }
.page-head .eyebrow a:hover { color: var(--text); }
.help-link { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; margin-left: 12px; vertical-align: .35em; border: 1px solid var(--line); border-radius: 14px; color: var(--muted); font-size: 15px; font-weight: 700; letter-spacing: 0; text-decoration: none; }
.help-link:hover { border-color: var(--orbit); color: var(--magenta-text); }
/* the sub-items of the section above the page (#37): one row that scrolls sideways on the phone; the desktop has them in
   the sidebar, only "Me" keeps its row there */
.subnav { position: relative; display: flex; gap: 8px; margin: 4px 0 0; padding: 4px 8px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.subnav::-webkit-scrollbar { display: none; }
.subnav a { flex: none; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 18px; color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.subnav a:hover { color: var(--text); border-color: var(--orbit); }
.subnav a[aria-current] { background: var(--surface-2); color: var(--magenta-text); border-color: transparent; }
.subnav + .page-head { padding-top: 16px; }
.page-head h1 { margin: 0; font-weight: 300; font-size: clamp(2rem, 1.5rem + 2vw, 3.25rem); line-height: 1.1; letter-spacing: -.01em; }
.page-head .lead { margin-top: 10px; }

.prose { max-width: 46em; padding: 0 8px; margin-bottom: 24px; overflow-wrap: break-word; }
.prose p { margin: 0 0 14px; line-height: 1.65; }
.prose h2 { margin: 30px 0 10px; font-size: 20px; line-height: 1.3; }
.prose h2:first-child { margin-top: 4px; }
.prose h3 { margin: 24px 0 8px; font-size: 17px; line-height: 1.35; }
.prose h4 { margin: 18px 0 6px; font-size: 15px; color: var(--muted); }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.legal { font-size: 15px; }
.legal p, .legal li { color: var(--muted); }
.legal a { overflow-wrap: anywhere; }
.terms li { margin: 0 0 12px; padding-left: 4px; line-height: 1.6; }
.terms li::marker { color: var(--magenta-text); }
.note { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }

.soon {
  display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 8px; padding: 36px 24px; text-align: center;
  border: 1px dashed var(--orbit); border-radius: var(--r-big); background: var(--surface);
}
.soon h2 { margin: 10px 0 0; font-size: 20px; line-height: 1.3; }
.soon p { max-width: 30em; margin: 0; color: var(--muted); }

.steps { display: grid; gap: 12px; margin: 0; padding: 0 8px; list-style: none; }
/* "coming soon" (#167, D184; #170, D185): room to the tiles below, the planet of the start page small on top */
.panel.signin-soon { margin: 16px 8px 24px; }
.signin-soon-art { position: relative; width: 180px; aspect-ratio: 420 / 380; margin: 0 auto 4px; pointer-events: none; }
.signin-soon-art.small { flex: none; width: 104px; margin: 0; }
.signin-soon-box { display: flex; align-items: center; gap: 16px; }
.signin-soon-box h2 { margin: 0 0 6px; }
.signin-soon-box p { margin: 0; }
/* no Second Life account yet (#128, D155): below everything, set apart by a fine line, quieter than the steps */
.sl-new { margin: 36px 8px 0; padding-top: 24px; border-top: 1px solid var(--line); }
.sl-new h2 { margin: 0; font-size: 16px; line-height: 1.3; }
.sl-new .hint { margin: 4px 0 14px; }
.sl-new-list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; counter-reset: sl; }
.sl-new-list li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; color: var(--muted); counter-increment: sl; }
.sl-new-list li::before { content: counter(sl); display: inline-grid; place-items: center; flex: none; width: 26px; height: 26px; border: 1px solid var(--line); border-radius: 50%; font-size: 13px; font-weight: 900; }
.step { position: relative; padding: 22px 20px 22px 76px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); }
.step-no { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px; background: var(--magenta); color: var(--on-magenta); font-weight: 900; }
.step h2 { margin: 0 0 6px; font-size: 18px; line-height: 1.3; }
.step p { margin: 0 0 16px; color: var(--muted); }

.panel { margin: 16px 0 0; padding: 20px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); scroll-margin-top: 16px; }
.panel h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 17px; }
.panel h2 svg { color: var(--magenta-text); }
.panel p { margin: 0 0 12px; color: var(--muted); }
.panel ul.app-hint { margin: 0; padding-left: 20px; color: var(--muted); font-size: 14px; }
.panel ul.app-hint li + li { margin-top: 6px; }
.panel ul.facts { margin: 0 0 16px; padding-left: 20px; }
.panel ul.facts li + li { margin-top: 6px; }
.queue { margin: 0; padding: 0; list-style: none; }
.queue li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 8px 0; border-top: 1px solid var(--line); }
.queue li:first-child { border-top: 0; }
.queue-name { font-weight: 700; }
.app-done { display: none; }
.links { margin: 0; padding: 0; list-style: none; }
.links a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; color: var(--text); text-decoration: none; }
.links li + li a { border-top: 1px solid var(--line); }
.links a svg { color: var(--muted); }
.page-head + .tiles, .prose + .tiles { margin: 0 0 8px; }

.seg { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 14px; }
.seg a { flex: 1 1 0; display: flex; align-items: center; justify-content: center; height: 36px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; letter-spacing: .06em; }
.seg a:hover { color: var(--text); }
.seg a[aria-current] { background: var(--surface-2); color: var(--text); }

/* ---------- sign-in, QR code, account (D19) ---------- */
.muted { color: var(--muted); }
.small { margin: 0; color: var(--muted); font-size: 13px; }
.hint { margin: 12px 0 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.aside { margin: 18px 8px; color: var(--muted); }
.note { margin: 0 0 16px; }
.note.ok { border-color: rgba(224, 75, 224, .45); background-image: linear-gradient(90deg, rgba(191, 0, 191, .14), transparent 70%); }
.error { margin: 10px 0 0; color: var(--danger); font-weight: 700; }
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none; width: 36px; height: 36px; border-radius: 50%;
  background: var(--surface-2); color: var(--magenta-text); font-weight: 900;
}
.avatar.big { width: 64px; height: 64px; font-size: 26px; background: radial-gradient(circle at 35% 30%, #E85AE8, var(--magenta) 45%, #4A0052); color: var(--on-magenta); }
.avatar.big.muted { background: var(--surface-2); color: var(--muted); }
/* top right (D33): post with a dot for the unread, "Me"; visitors: language and sign in */
.round {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 20px;
  border: 1px solid var(--line); color: var(--text); text-decoration: none; transition: border-color .2s, background-color .2s;
}
.round:hover { border-color: var(--orbit); }
.round[aria-current] { background: var(--surface-2); color: var(--magenta-text); }
.round .dot { position: absolute; top: 8px; right: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--magenta-text); box-shadow: 0 0 0 2px var(--bg); }
/* several accounts in one browser (#98, D127): the switcher left of "Me" */
.acct-switch { position: relative; display: flex; }
.acct-switch > summary.round { list-style: none; cursor: pointer; color: var(--text); font-size: inherit; margin: 0; }
.acct-switch > summary::-webkit-details-marker { display: none; }
.acct-switch[open] > summary { background: var(--surface-2); color: var(--magenta-text); }
.switch-menu { position: absolute; right: -48px; top: calc(100% + 8px); z-index: 60; display: grid; gap: 2px; width: 270px; max-width: calc(100vw - 24px); padding: 8px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); box-shadow: 0 14px 36px rgba(0, 0, 0, .5); }
.switch-now { display: grid; gap: 2px; margin: 0; padding: 6px 10px 10px; border-bottom: 1px solid var(--line); }
.switch-now span { color: var(--muted); font-size: 12px; }
.switch-now b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.switch-menu form { display: grid; gap: 2px; margin: 4px 0; }
.switch-to, .switch-add { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 44px; padding: 6px 10px; border: 0; border-radius: 10px; background: none; color: var(--text);
  font: inherit; font-size: 14px; text-align: left; text-decoration: none; cursor: pointer; }
.switch-to:hover, .switch-add:hover { background: var(--surface-hover); }
.switch-to .avatar { width: 28px; height: 28px; }
.switch-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.switch-to .dot, .accounts .dot { display: inline-block; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--magenta-text); }
.switch-add { color: var(--magenta-text); font-weight: 700; border-top: 1px solid var(--line); border-radius: 0 0 10px 10px; }
@media (max-width: 560px) {
  .switch-menu { position: fixed; top: 64px; right: 12px; width: min(300px, calc(100vw - 24px)); }
}
.me-link { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 4px; border-radius: 20px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 700; }
.me-link .avatar { width: 34px; height: 34px; }
.me-link:hover .avatar, .me-link[aria-current] .avatar { background: var(--orbit); }
.me-name { display: none; }
.pill.login { border-color: transparent; background: var(--magenta); color: var(--on-magenta); }
.pill.login:hover { filter: brightness(1.12); }
.panel form { margin: 0; }
.confirm { display: flex; flex-direction: column; align-items: center; gap: 8px; max-width: 34em; padding: 32px 24px; text-align: center; }
.confirm h2 { display: block; margin: 8px 0 0; font-size: 20px; font-weight: 400; }
.confirm h2 strong { display: block; margin-top: 4px; font-size: 26px; font-weight: 900; color: var(--text); }
.confirm p { margin: 0; }
.confirm form { margin-top: 12px; }
.code-form { display: flex; flex-wrap: wrap; gap: 10px; }
.code-form input {
  flex: 1 1 220px; min-width: 0; height: 52px; padding: 0 16px; border: 1px solid var(--line); border-radius: 16px;
  background: var(--bg); color: var(--text); font: 700 18px/1 var(--font); letter-spacing: .12em; text-transform: uppercase;
}
.code-form input::placeholder { color: var(--orbit); }
.code-form input:focus { outline: none; border-color: var(--magenta-text); box-shadow: 0 0 0 3px rgba(224, 75, 224, .25); }
.code-form input[aria-invalid] { border-color: var(--danger); }
.code-form .btn { height: 52px; border-radius: 26px; }
.qr-card {
  display: grid; gap: 24px; justify-items: center; padding: 24px 20px; border: 1px solid var(--line); border-radius: var(--r-big);
  background: var(--surface) radial-gradient(120% 120% at 0% 0%, rgba(191, 0, 191, .16), transparent 60%);
}
.qr-box { width: min(100%, 300px); padding: 10px; border-radius: 20px; background: #fff; box-shadow: 0 16px 50px -18px rgba(191, 0, 191, .8); transition: opacity .4s, filter .4s; }
.qr-box svg { display: block; width: 100%; height: auto; }
.qr-card.done .qr-box { opacity: .2; filter: grayscale(1); }
.qr-text { width: 100%; }
.qr-text h2 { margin: 0 0 8px; font-size: 20px; }
.qr-text p { margin: 0 0 10px; color: var(--muted); }
.qr-text .eyebrow { margin-bottom: 10px; }
.qr-text .code { margin: 4px 0 4px; color: var(--text); font-size: 24px; font-weight: 900; letter-spacing: .12em; font-variant-numeric: tabular-nums; user-select: all; }
.qr-state { display: flex; align-items: center; gap: 10px; margin-top: 16px !important; color: var(--text) !important; font-weight: 700; }
.qr-state::before { content: ""; width: 8px; height: 8px; border-radius: 4px; background: var(--magenta-text); animation: pulse 2s ease-out infinite; }
.qr-state[data-done]::before { animation: none; }
.qr-state[data-done="expired"] { color: var(--muted) !important; }
.qr-state[data-done="expired"]::before { background: var(--muted); }
.profile { display: flex; align-items: center; gap: 16px; }
.profile h2 { margin: 0; font-size: 20px; }
.profile p { margin: 2px 0 0; }
.facts { margin: 18px 0 0; }
.facts div { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.facts dt { color: var(--muted); font-size: 13px; }
.facts dd { margin: 0; overflow-wrap: anywhere; }
.facts .uuid { font-size: 14px; font-variant-numeric: tabular-nums; user-select: all; }
.devices { margin: 0 0 18px; padding: 0; list-style: none; }
.devices li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: center; padding: 12px 0; }
.devices li + li { border-top: 1px solid var(--line); }
.device-name { font-weight: 700; }
.device-name .badge { margin-left: 6px; vertical-align: 1px; }
.device-meta { grid-column: 1; color: var(--muted); font-size: 13px; }
.devices form { grid-column: 2; grid-row: 1 / span 2; }
.btn.small { height: 36px; padding: 0 14px; border-radius: 18px; font-size: 13px; }
.btn.danger { border-color: rgba(255, 143, 163, .35); color: var(--danger); }
.btn.danger:hover { border-color: var(--danger); }
.actions-row { display: flex; flex-wrap: wrap; gap: 10px; }
/* the Tame Spots (#85, D116, draft version 5): the banner with the figures, places 1 to 3 as cards, then a ranking; the
   breakpoints follow the width of the page (container sp), so the sidebar of the computer counts */
.sp-page { container: sp / inline-size; display: grid; gap: 16px; }
.sp-hero { position: relative; display: grid; min-height: 300px; margin-top: 8px; border: 1px solid var(--line); border-radius: var(--r-tile); overflow: hidden; background: var(--surface); isolation: isolate; }
.sp-banner { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; z-index: -2; }
.sp-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, var(--bg) 0%, rgba(11, 10, 16, .82) 34%, rgba(11, 10, 16, 0) 68%), linear-gradient(0deg, var(--bg) 0%, rgba(11, 10, 16, 0) 40%); }
.sp-hero-text { align-self: end; display: grid; gap: 4px; max-width: 640px; padding: 30px 24px 18px; }
.sp-hero .page-head { padding: 0; }
.sp-hero .lead { max-width: 42ch; }
.sp-stats { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.sp-stat { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(21, 19, 29, .78); color: var(--muted); font-size: 13px; white-space: nowrap; }
.sp-stat b { color: var(--text); font-weight: 900; font-variant-numeric: tabular-nums; }
.sp-stat .sp-dot { align-self: center; }
.sp-page .spots-lists { max-width: 480px; }
.sp-dot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--faint); }
.sp-dot.live { background: var(--ok); }
.sp-dot.warm { background: var(--caution); }
@media (prefers-reduced-motion: no-preference) {
  .sp-dot.live { animation: sp-pulse 2s infinite; }
  @keyframes sp-pulse { 0% { box-shadow: 0 0 0 0 rgba(127, 217, 164, .35); } 70% { box-shadow: 0 0 0 4px rgba(127, 217, 164, 0); } 100% { box-shadow: 0 0 0 0 rgba(127, 217, 164, 0); } }
}
.sp-last { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; white-space: nowrap; }
.sp-region { display: inline-flex; align-items: center; gap: 5px; min-width: 0; color: var(--muted); font-size: 13px; }
.sp-region svg { flex: none; }
.sp-name { margin: 0; font-weight: 700; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sp-new { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: 9px; background: var(--magenta); color: var(--on-magenta); font-size: 10px; font-weight: 900;
  letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; vertical-align: 2px; flex: none; }
.sp-coin { display: inline-grid; place-items: center; flex: none; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #FFE9A8, var(--caution) 55%, #B98A2E);
  color: #3A2C12; font-size: 10px; font-weight: 900; }
.sp-ls { display: inline-flex; align-items: center; gap: 7px; color: var(--caution); font-weight: 900; white-space: nowrap; }
.sp-assets { display: inline-flex; align-items: center; gap: 8px; color: var(--magenta-text); font-weight: 900; white-space: nowrap; }
.sp-pics { display: inline-flex; }
.sp-pics .asset-art.chip { width: 30px; height: 30px; padding: 2px; border-radius: 9px; border: 2px solid var(--surface); background: var(--surface-2); }
.sp-pics .asset-art.chip img { width: 100%; height: 100%; object-fit: contain; }
.sp-pics .asset-art + .asset-art { margin-left: -9px; }
.sp-tp { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 19px; background: var(--magenta); color: var(--on-magenta);
  font-size: 13px; font-weight: 900; text-decoration: none; white-space: nowrap; }
.sp-tp:hover { filter: brightness(1.12); }
.sp-podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.sp-card { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-tile);
  background: radial-gradient(120% 90% at 100% 0%, var(--surface-2), var(--surface) 60%); }
.sp-card.r1 { border-color: rgba(242, 199, 110, .45); }
.sp-img { position: relative; display: grid; place-items: center; margin: -16px -16px 0; aspect-ratio: 4 / 3; border-radius: var(--r-tile) var(--r-tile) 0 0; overflow: hidden;
  background: var(--surface-2); border-bottom: 1px solid var(--line); color: var(--faint); }
.sp-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-img.none svg { width: 44px; height: 44px; }
.sp-top { position: relative; z-index: 2; display: flex; align-items: center; gap: 10px; }
.sp-top .sp-last { padding: 2px 8px; border-radius: 10px; background: rgba(11, 10, 16, .8); }
.sp-medal { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 50%; color: var(--bg); font-size: 15px; font-weight: 900; }
.sp-medal.m1 { background: var(--caution); }
.sp-medal.m2 { background: #CFC9DD; }
.sp-medal.m3 { background: #D99566; }
.sp-meta { margin: 0; color: var(--muted); font-size: 13px; }
.sp-meta b { color: var(--text); font-weight: 900; }
.sp-reward { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.sp-reward .sp-ls { font-size: 22px; }
.sp-reward .sp-assets { font-size: 16px; }
.sp-ranks { display: grid; margin: 0; padding: 0; list-style: none; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; background: var(--surface); }
.sp-ranks li + li { border-top: 1px solid var(--line); }
.sp-rank { display: grid; grid-template-columns: 34px 64px minmax(0, 1fr) 140px 110px 150px 20px; gap: 12px; align-items: center; padding: 12px 16px; color: var(--text); text-decoration: none; }
.sp-rank:hover { background: var(--surface-hover); }
.sp-no { color: var(--faint); font-size: 15px; font-weight: 900; text-align: right; font-variant-numeric: tabular-nums; }
.sp-thumb { display: grid; place-items: center; width: 64px; height: 48px; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--surface-2); color: var(--faint); }
.sp-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sp-main { display: grid; gap: 2px; min-width: 0; }
.sp-name-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-name-row .sp-name { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-tames { color: var(--muted); font-size: 13px; text-align: right; }
/* #99: what a value is, small under it */
.sp-when, .sp-tames { display: grid; gap: 1px; }
.sp-cap { color: var(--faint); font-size: 11.5px; }
.sp-when .sp-cap { padding-left: 15px; }
.sp-order { margin: 0; }
.sp-tames b { color: var(--text); font-weight: 900; font-variant-numeric: tabular-nums; }
.sp-rw { justify-self: end; }
.sp-chev { color: var(--faint); }
.sp-sub { display: none; }
/* tablet: the cards under each other with the picture on the left, the ranking in two lines */
@container sp (max-width: 760px) {
  .sp-podium { grid-template-columns: minmax(0, 1fr); }
  .sp-card { display: grid; grid-template-columns: 128px minmax(0, 1fr); column-gap: 14px; row-gap: 6px; padding: 12px 14px; border-radius: 18px; }
  .sp-card > :not(.sp-img) { grid-column: 2; }
  .sp-img { grid-row: 1 / span 4; grid-column: 1; align-self: start; width: 128px; margin: 0; border: 0; border-radius: 12px; }
  .sp-img.none svg { width: 32px; height: 32px; }
  .sp-medal { position: absolute; top: 16px; left: 18px; width: 28px; height: 28px; font-size: 13px; box-shadow: 0 0 0 2px var(--surface); }
  .sp-top { position: static; }
  .sp-top .sp-last { padding: 0; background: none; }
  .sp-reward { margin-top: 2px; padding-top: 0; border-top: 0; }
  .sp-rank { grid-template-columns: 20px 56px minmax(0, 1fr) auto; gap: 0 10px; padding: 10px 14px; }
  .sp-when, .sp-tames, .sp-chev { display: none; }
  .sp-sub { display: grid; gap: 1px; overflow: hidden; white-space: nowrap; }
  .sp-sub .sp-last { font-size: 12px; }
  .sp-subt { color: var(--muted); font-size: 12px; padding-left: 15px; overflow: hidden; text-overflow: ellipsis; }
  .sp-main { gap: 3px; }
  .sp-thumb { width: 56px; height: 42px; border-radius: 9px; }
  .sp-no { font-size: 13px; }
}
/* phone: the banner above the title, the cards compact with the picture on the left, no region, smaller rewards */
@container sp (max-width: 560px) {
  .sp-hero { min-height: 0; margin: 0 calc(-1 * var(--edge)); border: 0; border-radius: 0; background: var(--bg); }
  .sp-banner { position: relative; height: auto; aspect-ratio: 16 / 9; object-position: 72% 40%; }
  .sp-hero::after { inset: 0 0 auto; height: calc((100cqw + 2 * var(--edge)) * 9 / 16); background: linear-gradient(0deg, var(--bg) 0%, rgba(11, 10, 16, .85) 16%, rgba(11, 10, 16, 0) 50%); }
  .sp-hero-text { position: relative; margin-top: -86px; padding: 0 var(--edge) 4px; }
  .sp-hero .page-head h1 { font-size: 34px; }
  .sp-hero .lead { font-size: 15px; }
  .sp-main .sp-region { display: none; }
  .sp-rw .sp-ls { font-size: 15px; gap: 5px; }
  .sp-rw .sp-coin, .sp-reward .sp-coin { width: 18px; height: 18px; font-size: 8px; }
  .sp-rw .sp-assets, .sp-reward .sp-assets { font-size: 14px; gap: 6px; }
  .sp-rw .sp-pics .asset-art.chip, .sp-reward .sp-pics .asset-art.chip { width: 24px; height: 24px; border-radius: 7px; }
  .sp-rw .sp-word { display: none; }
  .sp-podium { gap: 8px; }
  .sp-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); column-gap: 12px; row-gap: 4px; padding: 10px 12px; border-radius: 16px; }
  .sp-card > :not(.sp-img) { grid-column: 2; }
  .sp-img { grid-row: 1 / span 4; grid-column: 1; align-self: start; width: 96px; margin: 0; border: 0; border-radius: 10px; }
  .sp-img.none svg { width: 28px; height: 28px; }
  .sp-medal { position: absolute; top: 14px; left: 16px; width: 24px; height: 24px; font-size: 12px; box-shadow: 0 0 0 2px var(--surface); }
  .sp-top { position: static; gap: 6px; min-width: 0; }
  .sp-top .sp-last { padding: 0; background: none; font-size: 12px; }
  .sp-card .sp-region { display: none; }
  .sp-meta { font-size: 12px; }
  .sp-card .sp-name { font-size: 14px; }
  .sp-reward { margin-top: 2px; padding-top: 0; border-top: 0; }
  .sp-reward .sp-ls { font-size: 16px; gap: 5px; }
  .sp-reward .sp-tp { height: 30px; padding: 0 12px; font-size: 12px; }
}
.rows { margin: 0; padding: 0; list-style: none; }
.rows li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; align-items: baseline; padding: 11px 0; }
.rows li + li { border-top: 1px solid var(--line); }
.rows a, .rows b { overflow-wrap: anywhere; font-weight: 700; }
.rows a { color: var(--text); text-decoration: none; }
.rows a:hover { color: var(--magenta-text); }
.rows .value { grid-column: 2; grid-row: 1; color: var(--magenta-text); font-weight: 900; white-space: nowrap; }
.rows small { grid-column: 1 / -1; color: var(--muted); font-size: 13px; }
.rows .state { display: flex; align-items: center; gap: 8px; }
.rows .state::before { content: ""; width: 7px; height: 7px; border-radius: 4px; background: var(--muted); }
.rows .state-live { color: var(--text); }
.rows .state-live::before { background: var(--magenta-text); }

@media (display-mode: standalone) {
  .app-hint, .install { display: none !important; }
  .app-done { display: block; }
}

/* ---------- larger phones and tablets ---------- */
@media (min-width: 600px) {
  :root { --edge: 24px; }
  .facts div { grid-template-columns: 180px minmax(0, 1fr); gap: 16px; align-items: baseline; }
  .facts dt { font-size: 14px; }
  .hero:not(.me) { padding-top: 120px; }
  .hero.show { padding-top: 16px; }
  .hero-art { right: -60px; width: 400px; }
  .tiles { gap: 14px; }
  .lead { font-size: 18px; }
}

/* ---------- desktop: sidebar instead of the bottom bar ---------- */
@media (min-width: 960px) {
  :root { --edge: clamp(24px, 4vw, 64px); }
  .shell { display: grid; grid-template-columns: 264px minmax(0, 1fr); }
  .side {
    position: sticky; top: 0; display: flex; flex-direction: column; gap: 28px; height: 100vh; overflow-y: auto;
    padding: 28px 16px; border-right: 1px solid var(--line); background: var(--side);
  }
  .side .mark { padding: 0 12px; font-size: 22px; }
  .subnav:not(.me) { display: none; }
  .bulk[data-active] { bottom: 18px; left: calc(50% + 132px); width: min(640px, calc(100% - 264px - 48px)); } /* the island over the middle of the page beside the sidebar (#89) */
  .subnav + .page-head { padding-top: 24px; }
  .side-nav { display: flex; flex-direction: column; gap: 4px; }
  .side-nav a { display: flex; align-items: center; gap: 12px; height: 44px; padding: 0 12px; border-radius: 12px; color: var(--text); text-decoration: none; font-size: 15px; transition: background-color .2s; }
  .side-nav a > span:first-of-type { flex: 1 1 auto; }
  .side-nav a svg { color: var(--muted); }
  .side-nav a:hover { background: var(--surface); }
  .side-nav a[aria-current] { background: var(--surface-2); color: var(--magenta-text); font-weight: 700; }
  .side-nav a[aria-current] svg { color: inherit; }
  .side-sub { display: flex; flex-direction: column; gap: 2px; margin: 0 0 8px; padding: 0; list-style: none; }
  .side-sub a, .side-sub li > span { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 34px; padding: 4px 12px 4px 44px; border-radius: 10px; color: var(--muted); text-decoration: none; font-size: 14px; }
  .side-sub a:hover { background: var(--surface); color: var(--text); }
  .side-sub a[aria-current] { color: var(--text); font-weight: 700; }
  .side-sub .badge { height: 18px; padding: 0 6px; font-size: 9px; }
  .me-link { padding: 0 14px 0 4px; }
  .me-link:hover, .me-link[aria-current] { background: var(--surface); }
  .me-name { display: inline; }
  .side-foot { display: flex; flex-direction: column; gap: 14px; margin-top: auto; }
  .page { padding-bottom: 0; }
  .bar, .top .mark, .top .lang { display: none; }
  .top { justify-content: flex-end; min-height: 0; padding: 24px var(--edge) 0; }
  .top .install { display: inline-flex; }
  .foot { padding: 24px var(--edge) 32px; }

  .hero { display: flex; flex-direction: row-reverse; align-items: center; gap: 24px 48px; padding: 24px 0 56px; border-bottom: 1px solid var(--line); }
  .hero.hello { padding: 24px 0 28px; }
  .hero-art { position: static; flex: 0 1 420px; width: auto; min-width: 0; }
  .hero-text { flex: 1 1 440px; min-width: 0; }
  .hero .eyebrow { font-size: 13px; letter-spacing: .2em; }
  .lead { font-size: 19px; }
  .hero .actions { gap: 16px; margin-top: 34px; }
  .btn.big { height: 56px; padding: 0 30px; border-radius: 28px; font-size: 17px; }
  .discover { padding-top: 48px; }
  .discover > h2 { padding: 0; margin-bottom: 20px; font-size: 13px; letter-spacing: .2em; }
  .hero.show { padding-top: 24px; }
  .show-art { flex: 0 1 420px; width: auto; max-width: none; min-width: 0; margin: 0; }
  .show-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
  .show-card { padding: 22px; border-radius: 24px; }
  .show-tamer { min-height: 300px; margin-top: 16px; border-radius: var(--r-big); }
  .show-tamer-bg { height: 100%; object-position: center; opacity: .75; }
  .show-tamer::before { bottom: 0; height: auto; background: linear-gradient(90deg, rgba(11, 10, 16, .95) 30%, rgba(11, 10, 16, .1) 75%); }
  .show-tamer-text { max-width: 480px; padding: 64px 32px 28px; }
  .show-tamer .show-title { font-size: 28px; }
  .show-live { top: 24px; left: 32px; }
  .show-go { margin-top: 56px; padding: 28px 32px; border-radius: var(--r-big); }

  .tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
  .tile { min-height: 230px; padding: 22px; border-radius: 24px; gap: 14px; }
  .tile.wide { grid-column: span 2; }
  .tile.feature { padding: 26px 28px; border-radius: var(--r-big); }
  .tile.feature .tile-title { font-size: 28px; }
  .tile.feature .tile-text { max-width: 320px; font-size: 15px; }
  .tile-art { width: 190px; height: 215px; bottom: -44px; }
  .tile-icon { width: 48px; height: 48px; border-radius: 16px; }
  .tile-title { font-size: 18px; }
  .tile-text { font-size: 14px; }
  .page-head { padding: 32px 0 26px; }
  .prose, .soon, .steps { padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; }
  .soon { padding: 48px 32px; max-width: 46em; }
  .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 960px; }
  .panel, .note, .confirm, .figures { max-width: 760px; }
  .panel.signin-soon { max-width: 960px; margin: 16px 0 28px; }
  .signin-soon-art { width: 220px; }
  .qr-card { grid-template-columns: 300px minmax(0, 1fr); align-items: center; justify-items: start; max-width: 860px; padding: 32px; gap: 36px; }
  .aside { margin-left: 0; }
}

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(224, 75, 224, .55); } 70%, 100% { box-shadow: 0 0 0 7px rgba(224, 75, 224, 0); } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- forms and tables of "Me" (A4.2) ---------- */
.settings { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.settings label { font-weight: 700; font-size: 14px; }
.settings .when { display: flex; flex-direction: column; gap: 10px; }
.settings select {
  height: 44px; max-width: 100%; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2); color: var(--text); font: 400 15px/1 var(--font);
}
.settings fieldset { display: flex; flex-direction: column; gap: 8px; margin: 6px 0 0; padding: 0; border: 0; }
.settings legend { margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.settings .check { display: flex; align-items: center; gap: 10px; min-height: 36px; font-weight: 400; }
.settings .check input { width: 20px; height: 20px; accent-color: var(--magenta); }
/* push messages under "Me" (#73): the devices with their kinds */
.push-devices { margin: 0; padding: 0; list-style: none; }
.push-devices > li { padding: 14px 0; border-top: 1px solid var(--line); }
.push-devices > li p { margin: 0 0 8px; }
.push-devices fieldset { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; padding: 0; border: 0; }
.push-devices legend { margin-bottom: 6px; font-weight: 700; font-size: 14px; }
.push-devices .check { display: flex; align-items: center; gap: 10px; min-height: 34px; font-weight: 400; }
.push-devices .check input { width: 20px; height: 20px; accent-color: var(--magenta); }
.settings p { margin: 4px 0 0; }
.table-wrap { overflow-x: auto; margin: 8px 0 0; }
table.numbers { width: 100%; border-collapse: collapse; font-size: 14px; font-variant-numeric: tabular-nums; }
table.numbers th, table.numbers td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
table.numbers th[scope="row"], table.numbers thead th:first-child { text-align: left; font-weight: 400; }
table.numbers thead th { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.settings textarea {
  width: 100%; min-height: 120px; padding: 12px; border: 1px solid var(--line); border-radius: 12px; resize: vertical;
  background: var(--surface-2); color: var(--text); font: 400 15px/1.5 var(--font);
}
.toc ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 4px 16px; margin: 0; padding: 0; list-style: none; }
.toc a { display: block; padding: 6px 0; color: var(--text); text-decoration: none; font-size: 14px; }
.toc a:hover { color: var(--magenta-text); }
.faq section { scroll-margin-top: 16px; }

/* ---------- Assets (A4.3) ---------- */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.chips a { display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 17px; color: var(--muted); text-decoration: none; font-size: 13px; font-weight: 700; }
.chips a:hover { color: var(--text); border-color: var(--orbit); }
.chips a[aria-current] { background: var(--surface-2); color: var(--magenta-text); border-color: transparent; }
.stock { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.stock a { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.stock a:hover { background: var(--surface); }
.stock-name { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.stock-name small { color: var(--muted); font-size: 12px; }
.stock-amount { font-variant-numeric: tabular-nums; font-weight: 700; white-space: nowrap; }
.cards-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 12px; margin: 0 0 20px; padding: 0; list-style: none; }
.cards-list > .panel { margin: 0; }
.building { display: flex; flex-direction: column; gap: 8px; }
.building-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.building-head h2, .building-head h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.building-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.building .hint { margin: 0; }
.building .actions-row { margin-top: auto; }
.building form { margin: 0; }
.section-title { margin: 28px 0 12px; font-size: 13px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: var(--muted); }
/* one offer of my own (#37): "Promote" and "Change" open beside each other, an open one takes the whole row */
.offer-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.offer-actions > details { margin: 0; }
.offer-actions > details[open] { flex: 1 1 100%; order: 1; padding: 12px 0 0; border-top: 1px solid var(--line); }
.offer-actions > details > summary { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border: 1px solid var(--line); border-radius: 18px; color: var(--text); font-size: 13px; list-style: none; }
.offer-actions > details > summary::-webkit-details-marker { display: none; }
.offer-actions > details > summary::after { content: "▾"; color: var(--muted); }
.offer-actions > details[open] > summary { border-color: var(--orbit); background: var(--surface-2); }
.new-offer { margin: 0 0 6px; }
.count-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.count-form label { font-size: 13px; font-weight: 700; color: var(--muted); }
.count-form select { width: auto; min-width: 64px; }
.count-form .muted { font-size: 14px; }
h3.sub { margin: 18px 0 6px; font-size: 14px; }
.costs { display: flex; flex-direction: column; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: 14px; }
.costs li { display: flex; justify-content: space-between; gap: 10px; font-variant-numeric: tabular-nums; }
.costs li small { color: var(--muted); }
.costs li.short span:last-child { color: var(--danger); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* ---------- Breeding (A4.4) ---------- */
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pet { position: relative; display: block; width: 100%; aspect-ratio: 1; max-width: 100%; border-radius: 16px; overflow: hidden; background: var(--surface-2); }
.pet img { position: absolute; inset: 0; width: 100%; height: 100%; }
.pet.big { max-width: 420px; }
.pet.huge { max-width: 1024px; margin: 0 auto; }
.pet.small { border-radius: 10px; }
/* Breeding → Food (#74): the result in its colour, three figures */
.food-result { border-left-width: 6px; }
.food-result p { margin: 0 0 8px; }
.food-result .actions-row { margin: 12px 0 0; }
.food-headline { font-size: 22px; font-weight: 700; line-height: 1.3; }
.food-green { border-left-color: var(--ok); }
.food-green .food-headline { color: var(--ok); }
.food-yellow { border-left-color: var(--caution); }
.food-yellow .food-headline { color: var(--caution); }
.food-red { border-left-color: var(--danger); background-image: linear-gradient(90deg, rgba(255, 143, 163, .10), transparent 70%); }
.food-red .food-headline { color: var(--danger); }
.food-idle, .food-none { border-left-color: var(--orbit); }
.food-plan { color: var(--muted); }
.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 12px; margin: 16px 0 0; }
.figure { display: grid; gap: 4px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); }
.figure-value { font-size: 26px; font-weight: 700; line-height: 1.1; }
.figure-value.bad { color: var(--danger); }
.figure-label { color: var(--muted); font-size: 14px; }
.food-line-green { color: var(--ok); }
.food-line-yellow { color: var(--caution); }
.food-line-red { color: var(--danger); }
/* the filter of a list (#37): the search in sight, the other fields behind "Filters (n)", each label above its field */
.filters { display: grid; gap: 4px; margin: 0 0 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.panel + .filters { margin-top: 16px; }
.filters label { font-size: 12px; font-weight: 700; color: var(--muted); }
.filter-main { display: flex; gap: 8px; align-items: center; }
.filter-main input { flex: 2 1 0; width: 0; } /* no width of their own: the row never gets wider than the page (#62) */
.filter-main .btn { flex: none; height: 40px; }
.filters details.filter-more { margin: 0; }
.filter-more > summary { padding: 8px 2px 4px; color: var(--muted); font-size: 13px; }
.filter-more > summary:hover { color: var(--text); }
.filter-more[open] > summary { margin-bottom: 4px; }
.filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 10px 12px; align-items: end; padding: 2px 0 6px; }
.field { display: grid; gap: 4px; min-width: 0; }
.filter-grid .check { min-height: 40px; }
/* the filters that are set, clearly active (#93): magenta ground and edge, the × in a small round field */
.filter-chips { align-items: center; margin: 0 0 14px; }
.filter-chips .chips-label { color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.filter-chips a { gap: 8px; padding: 0 6px 0 14px; border-color: rgba(224, 75, 224, .55); background: rgba(224, 75, 224, .14); color: var(--text); }
.filter-chips a:hover { border-color: var(--magenta-text); background: rgba(224, 75, 224, .22); color: var(--text); }
.filter-chips a span { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(224, 75, 224, .28); color: var(--text); font-size: 15px; line-height: 1; }
.filter-chips a:hover span { background: var(--magenta); color: var(--on-magenta); }
.filter-chips a.all { padding: 0 10px; border-color: transparent; background: none; color: var(--muted); }
.filter-chips a.all:hover { color: var(--text); }
.filters input, .filters select, .bulk select, .settings input, .count-form select {
  height: 40px; min-width: 0; max-width: 100%; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 400 14px/1 var(--font);
}
.filters .check, .bulk .check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.animals { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 160px), 1fr)); gap: 12px; margin: 0 0 16px; padding: 0; list-style: none; }
.animals.tiles-s { grid-template-columns: repeat(auto-fill, minmax(min(100%, 104px), 1fr)); gap: 8px; }
.animals.tiles-l { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.animal-card { position: relative; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.animal-card > a { display: flex; flex-direction: column; gap: 4px; padding: 10px; color: var(--text); text-decoration: none; }
.animal-card > a:hover { background: var(--surface-hover); border-radius: 18px; }
/* the stable (#34): the picture stays free, the box stands beside the name under it */
.animal-card > a.animal-pic { padding-bottom: 0; }
.animal-card > a.animal-pic:hover { background: none; }
.animal-pic:hover .pet { outline: 2px solid var(--orbit); outline-offset: -2px; }
.animal-text { display: flex; flex-direction: column; gap: 4px; padding: 0 10px 10px; }
.animal-line { display: flex; align-items: flex-start; gap: 8px; margin-top: 6px; }
.animal-card .pick { display: flex; flex: none; padding-top: 1px; }
.animal-card .pick input { width: 20px; height: 20px; margin: 0; accent-color: var(--magenta); }
.animal-name { margin-top: 6px; font-weight: 700; font-size: 15px; line-height: 1.3; overflow-wrap: anywhere; }
.animal-line .animal-name { min-width: 0; margin-top: 0; color: var(--text); text-decoration: none; }
.animal-line .animal-name:hover { color: var(--magenta-text); }
.animal-meta, .animal-tags { color: var(--muted); font-size: 12px; line-height: 1.35; }
/* the states of an animal as marks (#37): what wants care stands out */
.animal-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.tag { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border-radius: 10px; background: var(--surface-2); color: var(--muted); font-size: 11px; font-weight: 700; white-space: nowrap; }
.tag.warn { background: rgba(255, 143, 163, .14); color: var(--danger); }
.tag.good { background: rgba(224, 75, 224, .14); color: var(--magenta-text); }
.tiles-s .animal-card { border-radius: 14px; }
.tiles-s .animal-card > a { padding: 6px; border-radius: 14px; }
.tiles-s .animal-card > a.animal-pic { padding-bottom: 0; }
.tiles-s .animal-text { padding: 0 6px 6px; }
.tiles-s .pet, .tiles-s .asset-art { border-radius: 10px; }
.tiles-s .animal-name { font-size: 13px; }
.tiles-s .animal-meta, .tiles-s .animal-tags { font-size: 11px; }
.tiles-s .animal-card .pick input { width: 18px; height: 18px; }
/* the tile of an animal (D109, #77): name on one line with the gender, age and number, the group, the fixed bar of the
   states; every field is a button with a hint bubble (.tip, app.js) */
.stable-tiles .animal-card { display: flex; flex-direction: column; }
.stable-tiles .animal-text { flex: 1; gap: 5px; min-width: 0; }
.stable-tiles .animal-line { align-items: center; min-width: 0; }
.stable-tiles .animal-line .animal-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; overflow-wrap: normal; }
/* #82: the name a little smaller, the tile M a little wider; a phone keeps two in a row with less space between */
.stable-tiles:not(.tiles-s) .animal-line .animal-name { font-size: 14px; }
.stable-tiles.tiles-m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 600px) { .stable-tiles.tiles-m { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); gap: 12px; } }
.stable-tiles .animal-card { scroll-margin-top: 72px; }
/* a row of the table after a tap in its bubble (#188): below the head that stays on top, the word under the name */
.st tbody tr { scroll-margin-top: 120px; }
.st .tile-note { margin: 3px 0 0; font-size: 11.5px; }
.tile-note { display: flex; align-items: center; gap: 5px; margin: 2px 0 0; color: var(--ok); font-size: 12px; font-weight: 700; line-height: 1.3; }
.tile-note svg { flex: none; }
.tip { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: help; border-radius: 6px; -webkit-tap-highlight-color: transparent; }
.tip[aria-expanded="true"] { outline: 2px solid var(--magenta-text); outline-offset: 1px; }
.tip:focus-visible { outline: 2px solid var(--magenta-text); outline-offset: 1px; }
.tip svg { display: block; flex: none; }
.meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; color: var(--muted); font-size: 12px; line-height: 1.35; }
.meta-row .sep { color: var(--faint); }
.sex { flex: none; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; color: var(--on-group-dark); }
.sex.f { background: var(--mare); }
.sex.m { background: var(--stallion); }
.grp-row { display: flex; min-width: 0; }
.grp-row > .tip { display: flex; min-width: 0; max-width: 100%; }
.grp { display: flex; align-items: center; gap: 6px; min-width: 0; height: 24px; padding: 0 6px 0 2px; border-radius: 12px; background: var(--surface-2); max-width: 100%; }
.grp-badge { flex: none; display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px; font-size: 11px; font-weight: 900; color: var(--on-group-dark);
  box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16) inset; font-variant-numeric: tabular-nums; }
.grp-badge.c-0 { background: var(--group-0); } .grp-badge.c-1 { background: var(--group-1); } .grp-badge.c-2 { background: var(--group-2); } .grp-badge.c-3 { background: var(--group-3); }
.grp-badge.c-4 { background: var(--group-4); color: var(--on-group-light); } .grp-badge.c-5 { background: var(--group-5); color: var(--on-group-light); }
.grp-badge.c-6 { background: var(--group-6); color: var(--on-group-light); } .grp-badge.c-7 { background: var(--group-7); }
.grp-name { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 700; color: var(--text); }
.grp-name.none { color: var(--faint); font-weight: 400; font-style: italic; }
.grp-st { flex: none; display: inline-flex; gap: 3px; }
.grp-st svg { width: 15px; height: 15px; }
.grp-st .never { color: var(--danger); }
.grp-st .sl { color: var(--group-5); }
.grp-st .kill { color: var(--caution); }
.slots { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: auto; padding-top: 8px; border-top: 1px solid var(--line); container: bar / inline-size; }
.slots-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.slots-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.slots-1 { grid-template-columns: minmax(0, 1fr); }
.slot { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; height: 30px; border-radius: 9px; background: var(--surface-2); color: var(--faint); width: 100%; }
.slot svg { width: 18px; height: 18px; }
.slot .w { display: none; font-size: 10px; font-weight: 700; line-height: 1; }
.slot.ok { color: var(--ok); background: rgba(127, 217, 164, .12); }
.slot.caution { color: var(--caution); background: rgba(242, 199, 110, .13); }
.slot.danger { color: var(--danger); background: rgba(255, 143, 163, .14); }
.slot.love { color: var(--magenta-text); background: rgba(224, 75, 224, .14); }
.slot.plain { color: var(--text); }
.slot.wide { grid-column: span 2; flex-direction: row; gap: 4px; color: var(--muted); }
.slot.wide .w { display: block; font-size: 10.5px; white-space: nowrap; }
/* a bar too narrow for the moon and „Ruhestand“ side by side (a small phone, #82) keeps the word; the small tile has
   only the moon anyway */
@container bar (max-width: 147px) { .stable-tiles:not(.tiles-s) .slot.wide.long svg { display: none; } }
@container bar (max-width: 125px) { .stable-tiles:not(.tiles-s) .slot.wide svg { display: none; } }
.tiles-l .slot, .state-big .slot { height: 44px; }
.tiles-l .slot .w, .state-big .slot .w { display: block; }
.stable-tiles.tiles-s .animal-text { gap: 4px; }
.stable-tiles.tiles-s .animal-line { gap: 5px; }
.stable-tiles.tiles-s .sex { width: 18px; height: 18px; }
.stable-tiles.tiles-s .sex svg { width: 12px; height: 12px; }
.stable-tiles.tiles-s .meta-row { font-size: 10.5px; gap: 1px 4px; }
.stable-tiles.tiles-s .grp { height: 22px; gap: 4px; padding-right: 4px; }
.stable-tiles.tiles-s .grp-badge { min-width: 18px; height: 18px; font-size: 10px; padding: 0 4px; }
.stable-tiles.tiles-s .grp-name { display: none; }
.stable-tiles.tiles-s .grp-st svg { width: 13px; height: 13px; }
.stable-tiles.tiles-s .slots { gap: 3px; padding-top: 6px; }
.stable-tiles.tiles-s .slot { height: 24px; border-radius: 7px; }
.stable-tiles.tiles-s .slot svg { width: 15px; height: 15px; }
.stable-tiles.tiles-s .slot.wide .w { display: none; }
/* the states on the page of an animal: the same bar with its words */
.state-big { display: grid; gap: 8px; margin: 0 0 14px; }
.state-big .grp { height: 28px; }
/* the hint bubble: one for the page, placed by app.js above its field, else below, never over the edge */
.bubble { position: fixed; z-index: 60; top: 0; left: 0; max-width: min(260px, calc(100vw - 24px)); padding: 8px 11px; border-radius: 10px; background: var(--tip-bg); color: var(--tip-text);
  font-size: 13px; line-height: 1.4; font-weight: 700; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); pointer-events: none; }
/* tapped open on a tile (#82): what never harms, the filter, the page of the animal; usable only after a moment */
.bubble.acts { pointer-events: auto; max-width: min(280px, calc(100vw - 24px)); }
.bubble-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 8px; padding-top: 8px; border-top: 1px solid rgba(21, 19, 29, .14); }
.bubble-acts form { flex-basis: 100%; margin: 0; }
.bubble-acts .btn.small { height: 34px; padding: 0 14px; font-size: 13px; }
/* the way to the details as a small button (#93), the legend of the food with the state of the field marked */
.bubble-acts a.bubble-link { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid rgba(21, 19, 29, .25); border-radius: 16px;
  color: var(--tip-text); font-size: 13px; font-weight: 700; text-decoration: none; }
.bubble-acts a.bubble-link::after { content: "›"; font-size: 16px; line-height: 1; }
.bubble-acts a.bubble-link:hover { border-color: rgba(21, 19, 29, .55); background: rgba(21, 19, 29, .06); }
/* the Teleport of a Breedable in Second Life (#188), in magenta like on the Tame Spots */
.bubble-acts a.bubble-tp { display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: 16px; background: var(--magenta); color: var(--on-magenta);
  font-size: 13px; font-weight: 700; text-decoration: none; }
.bubble-acts a.bubble-tp::after { content: "↗"; margin-left: 6px; font-size: 13px; }
.bubble-acts a.bubble-tp:hover { filter: brightness(1.12); }
.bubble-legend { display: grid; gap: 4px; flex-basis: 100%; margin: 0; padding: 0; list-style: none; font-size: 12.5px; font-weight: 400; }
.bubble-legend li { display: flex; align-items: center; gap: 8px; padding: 2px 4px; border-radius: 6px; opacity: .7; }
.bubble-legend li.now { opacity: 1; font-weight: 700; background: rgba(21, 19, 29, .07); }
.bubble-legend .slot { width: 30px; height: 22px; flex: none; border-radius: 6px; background: #2A2635; }
.bubble-legend .slot svg { width: 15px; height: 15px; }
.bubble[data-wait] .bubble-acts { pointer-events: none; }
.bubble small { display: block; font-size: 13px; font-weight: 400; margin-top: 2px; }
.bubble::after { content: ""; position: absolute; left: var(--ax, 50%); width: 10px; height: 10px; background: var(--tip-bg); transform: translateX(-50%) rotate(45deg); }
.bubble[data-side="top"]::after { bottom: -4px; }
.bubble[data-side="bottom"]::after { top: -4px; }
@media (prefers-reduced-motion: no-preference) { .bubble { animation: bubble-in .12s ease-out; } @keyframes bubble-in { from { opacity: 0; transform: translateY(3px); } } }
/* the legend below the stable */
.legend { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 10px 0; }
.legend-part h3 { margin: 0 0 8px; font-size: 14px; }
.legend-part ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 7px; font-size: 13.5px; }
.legend-part li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.legend-part li > span:last-child { min-width: 0; }
.legend-part .slot { width: 36px; height: 28px; flex: none; }
.legend-part .slot.wide { width: 60px; }
.legend-part .grp { flex: none; max-width: 150px; }
.legend-part .grp-st svg { width: 18px; height: 18px; }
.tile-sizes { margin-bottom: 12px; }
.tile-sizes a { height: 30px; padding: 0 12px; }
/* one bar above the tiles of the stable (#93): choose all, the number, the size as three symbols on the right */
.stable-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; margin: 0 0 12px; }
.stable-bar .pick-all { margin: 0; }
.stable-count { color: var(--muted); font-size: 14px; font-weight: 700; }
.stable-bar .tile-sizes { margin: 0 0 0 auto; }
.tile-sizes.icons { gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; }
.tile-sizes.icons a { justify-content: center; width: 36px; height: 30px; padding: 0; border: 0; border-radius: 9px; }
.tile-sizes.icons a[aria-current] { background: var(--surface-2); color: var(--magenta-text); }
/* the state on the details (#93): one tile per block with its symbol, the state in words and a real button */
.state-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 12px; }
.state-group { display: flex; align-items: center; gap: 8px; }
.state-group select { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 400 14px/1 var(--font); }
.state-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 10px; margin: 0 0 6px; }
.state-tile { display: flex; flex-direction: column; justify-content: space-between; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); color: var(--muted); }
.state-tile.wide { grid-column: span 2; }
.state-tile.ok { border-color: rgba(127, 217, 164, .35); }
.state-tile.caution { border-color: rgba(242, 199, 110, .4); }
.state-tile.danger { border-color: rgba(255, 143, 163, .45); }
.state-tile.love { border-color: rgba(224, 75, 224, .4); }
.state-tip { display: flex; align-items: flex-start; gap: 12px; text-align: left; }
.state-icon { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px; border-radius: 12px; background: var(--surface); }
.state-tile.ok .state-icon { color: var(--ok); background: rgba(127, 217, 164, .12); }
.state-tile.caution .state-icon { color: var(--caution); background: rgba(242, 199, 110, .13); }
.state-tile.danger .state-icon { color: var(--danger); background: rgba(255, 143, 163, .14); }
.state-tile.love .state-icon { color: var(--magenta-text); background: rgba(224, 75, 224, .14); }
.state-words { display: grid; gap: 2px; min-width: 0; }
.state-words b { color: var(--text); font-size: 15px; }
.state-words small { font-size: 13px; line-height: 1.4; }
.state-act { display: grid; gap: 8px; }
.state-act form { margin: 0; }
.state-act .btn { width: 100%; justify-content: center; }
/* the profile and the parents of the details (#93) */
.profile { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); gap: 0 18px; margin: 14px 0 0; }
.profile div { display: grid; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.profile dt { color: var(--muted); font-size: 13px; }
.profile dd { margin: 0; }
.parents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 14px 0 0; padding: 0; list-style: none; }
.parents a, .parents .unknown { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); color: var(--text); text-decoration: none; }
.parents a:hover { border-color: var(--orbit); }
.parents .pet { width: 56px; height: 56px; flex: none; border-radius: 10px; }
.parents .who { display: grid; min-width: 0; }
.parents .who small { color: var(--muted); font-size: 12px; }
.parents .who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.parents .unknown { color: var(--faint); font-style: italic; min-height: 74px; }
/* killing apart from the rest, always in sight; greyed while protected (#93) */
.danger-zone { margin: 16px 0 0; padding: 14px; border: 1px solid rgba(255, 143, 163, .35); border-radius: 16px; }
.danger-zone h3 { margin: 0 0 6px; color: var(--danger); font-size: 15px; }
.danger-zone form, .danger-zone .kill-off { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 10px 0 0; }
.danger-zone .off { color: var(--muted); }
@media (max-width: 599px) { .state-tile.wide { grid-column: auto; } .parents { grid-template-columns: minmax(0, 1fr); } }
.bulk { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 0 0 16px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.bulk legend { padding: 0 6px; font-weight: 700; font-size: 14px; }
/* while something is chosen the bar stays in sight above the bottom bar (#37) */
/* while something is chosen the bar is an island (#89): fixed in the middle above the bottom bar, its own ground and shadow, the
   heading only for screen readers, ✕ clears; the list gets room below, so nothing stays covered and nothing jumps */
.bulk[data-active] { position: fixed; z-index: 15; left: 50%; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px); width: min(640px, calc(100% - 24px)); margin: 0;
  transform: translateX(-50%); padding: 10px 12px; border-color: var(--orbit); border-radius: 18px; background: var(--surface-2); box-shadow: 0 18px 50px -10px rgba(0, 0, 0, .9); }
.bulk[data-active] legend, .bulk[data-active] label:not(.check) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
form:has(.bulk[data-active]) { padding-bottom: 150px; }
.bulk-clear { display: inline-grid; place-items: center; width: 34px; height: 34px; margin-left: auto; padding: 0; border: 1px solid var(--line); border-radius: 50%; background: var(--surface); color: var(--muted); cursor: pointer; }
.bulk-clear:hover { color: var(--text); border-color: var(--orbit); }
.bulk[data-active] .bulk-count { order: -2; }
.bulk[data-active] .bulk-clear { order: -1; }
@media (max-width: 599px) { .bulk[data-active] .bulk-count { flex: 1 1 auto; } .bulk[data-active] .bulk-clear { margin-left: 0; } }
@media (min-width: 600px) { .bulk[data-active] .bulk-clear { order: 9; } }
.bulk-count { color: var(--magenta-text); font-weight: 900; font-size: 14px; }
.bulk-extra { display: contents; }
.bulk-extra[hidden] { display: none !important; }
.pick-all { margin: 0 0 10px; }
.pick-all .check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.bulk label:not(.check) { font-size: 12px; font-weight: 700; color: var(--muted); }
.pages { display: flex; flex-wrap: wrap; gap: 6px; }
.pages a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 10px; border: 1px solid var(--line); border-radius: 12px; color: var(--text); text-decoration: none; }
.pages a[aria-current] { background: var(--surface-2); color: var(--magenta-text); font-weight: 700; }
.pager { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; margin: 14px 0 0; color: var(--muted); font-size: 14px; }
.pager a { justify-self: start; display: inline-flex; align-items: center; height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 20px; color: var(--text); text-decoration: none; font-weight: 700; }
.pager a[rel="next"] { justify-self: end; }
.pager a:hover { border-color: var(--orbit); }
.animal-page { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 0 0 16px; }
/* inside a panel (an offer of the marketplace) picture and traits sit side by side only where both have room (#37) */
.panel .animal-page { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); }
.animal-picture .hint { margin: 8px 0 0; }
.settings.inline { margin-top: 14px; }
.tree { display: grid; gap: 8px; margin: 0 0 8px; padding: 0; list-style: none; grid-template-columns: repeat(auto-fill, minmax(min(100%, 130px), 1fr)); }
.tree.tree-0 { grid-template-columns: minmax(0, 260px); }
.tree li > a { display: flex; flex-direction: column; gap: 3px; padding: 8px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); color: var(--text); text-decoration: none; }
.tree li > a:hover { border-color: var(--orbit); }
.tree-gap { display: flex; align-items: center; justify-content: center; min-height: 80px; border: 1px dashed var(--line); border-radius: 14px; font-size: 13px; }
/* the founders and how far the line goes (#96): a mark on a founder, a sentence when a whole generation is founders */
.tree li.founder > a { border-color: rgba(242, 199, 110, .45); }
.founder-mark { align-self: flex-start; padding: 1px 8px; border-radius: 10px; background: rgba(242, 199, 110, .14); color: var(--caution); font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.more-gens { margin-top: 18px; }
.lineage-end { display: flex; gap: 10px; align-items: flex-start; margin-top: 18px; }
.lineage-end svg { flex: none; margin-top: 2px; color: var(--caution); }
.big-view { margin: 0 0 12px; }
.devices > li > .btn { grid-column: 2; grid-row: 1 / span 2; }
.group-button { display: inline-flex; align-items: center; min-width: 28px; height: 24px; margin-right: 6px; padding: 0 8px; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; font-weight: 700; vertical-align: 1px; color: var(--on-group-dark); }
.group-button.c-0 { background: var(--group-0); }
.group-button.c-1 { background: var(--group-1); }
.group-button.c-2 { background: var(--group-2); }
.group-button.c-3 { background: var(--group-3); }
.group-button.c-4 { background: var(--group-4); color: var(--on-group-light); }
.group-button.c-5 { background: var(--group-5); color: var(--on-group-light); }
.group-button.c-6 { background: var(--group-6); color: var(--on-group-light); }
.group-button.c-7 { background: var(--group-7); }
/* Groups & rules (#95, D121): the groups as cards with their badge, states and marks; a "+" card; colours as round fields;
   the rules as numbered sentences with small tools; the form of a rule as one sentence */
.group-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 12px; margin: 14px 0 0; padding: 0; list-style: none; }
.group-card { display: flex; flex-direction: column; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); }
.group-card.editing { border-color: var(--magenta-text); }
.group-card-head { display: flex; align-items: center; gap: 12px; min-width: 0; }
.grp-badge.big { min-width: 36px; height: 36px; border-radius: 18px; font-size: 16px; }
.group-card-name { display: grid; min-width: 0; }
.group-card-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; }
.group-card-name small { color: var(--muted); font-size: 12px; }
.group-card-text { margin: 0; color: var(--muted); font-size: 13.5px; }
.group-card-states { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.group-card-states li { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px 3px 8px; border-radius: 12px; background: var(--surface); font-size: 12.5px; }
.group-card-states .never { color: var(--danger); }
.group-card-states .sl { color: var(--group-5); }
.group-card-states .kill { color: var(--caution); }
.group-card-marks { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.group-card-marks span { padding: 2px 8px; border: 1px solid rgba(242, 199, 110, .4); border-radius: 10px; color: var(--caution); font-size: 12px; font-weight: 700; }
.group-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.group-card-count { color: var(--text); font-weight: 700; font-size: 14px; text-decoration: none; }
.group-card-count:hover { color: var(--magenta-text); }
.group-card-foot .btn { gap: 6px; }
.group-card.add { padding: 0; border-style: dashed; background: none; }
.group-card.add a { display: flex; flex: 1; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 140px; color: var(--muted); font-weight: 700; text-decoration: none; }
.group-card.add a:hover { color: var(--magenta-text); }
.group-card.add .plus { display: inline-grid; place-items: center; width: 44px; height: 44px; border: 1px dashed var(--orbit); border-radius: 50%; }
.settings .swatches { display: flex; flex-direction: row; flex-wrap: wrap; gap: 10px; margin: 6px 0 4px; padding: 0; border: 0; }
.swatches legend { width: 100%; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.swatch { position: relative; display: inline-block; width: 34px; height: 34px; border-radius: 50%; cursor: pointer; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .16) inset; }
.swatch input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.swatch:has(input:checked) { outline: 3px solid var(--magenta-text); outline-offset: 2px; }
.swatch:has(input:focus-visible) { outline: 3px solid var(--text); outline-offset: 2px; }
.swatch.c-0 { background: var(--group-0); } .swatch.c-1 { background: var(--group-1); } .swatch.c-2 { background: var(--group-2); } .swatch.c-3 { background: var(--group-3); }
.swatch.c-4 { background: var(--group-4); } .swatch.c-5 { background: var(--group-5); } .swatch.c-6 { background: var(--group-6); } .swatch.c-7 { background: var(--group-7); }
.settings .autokill { margin: 10px 0 0; padding: 12px 14px; border: 1px solid rgba(242, 199, 110, .35); border-radius: 14px; }
.autokill legend { display: inline-flex; align-items: center; gap: 6px; padding: 0 6px; color: var(--caution); font-weight: 700; font-size: 13px; }
.autokill-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; }
.autokill-fields > span { display: grid; gap: 4px; }
.rules-how { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: var(--surface-2); color: var(--muted); font-size: 14px; }
.rules-how svg { flex: none; margin-top: 2px; color: var(--magenta-text); }
.rule-cards { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.rule-card { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); }
.rule-card.off { opacity: .55; }
.rule-no { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--muted); font-weight: 900; font-size: 13px; }
.rule-sentence { margin: 0; line-height: 1.7; }
.rule-then { white-space: nowrap; }
.rule-birth { color: var(--muted); font-size: 13px; }
.rule-off { margin-left: 6px; padding: 1px 8px; border-radius: 10px; background: var(--surface); color: var(--muted); font-size: 12px; }
.grp-inline { display: inline-flex; align-items: center; gap: 5px; margin: 0 2px; font-weight: 700; vertical-align: middle; }
.rule-tools { display: flex; align-items: center; gap: 4px; }
.rule-tools form { margin: 0; }
.rule-tool { display: inline-grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); color: var(--muted); cursor: pointer; list-style: none; }
.rule-tool:hover { color: var(--text); border-color: var(--orbit); }
.rule-tool.danger:hover { color: var(--danger); border-color: rgba(255, 143, 163, .5); }
.rule-tool::-webkit-details-marker { display: none; }
.rule-gap { display: inline-block; width: 32px; }
.rule-delete { position: relative; display: flex; }
.rule-delete[open] form { position: absolute; right: 0; top: 38px; z-index: 5; padding: 8px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); box-shadow: 0 10px 30px rgba(0, 0, 0, .5); }
.rule-builder { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 12px; margin: 4px 0 0; }
.rb-field { display: grid; gap: 4px; min-width: 0; max-width: 100%; }
.rb-field select { max-width: 100%; }
.settings .rule-builder .when { flex-direction: column; gap: 4px; }
.rb-field[hidden] { display: none; }
.rb-arrow { padding-bottom: 10px; color: var(--magenta-text); font-size: 20px; font-weight: 700; }
@media (max-width: 599px) { .rule-card { grid-template-columns: 28px minmax(0, 1fr); } .rule-tools { grid-column: 2; flex-wrap: wrap; } }
.rules { display: grid; gap: 0; margin: 12px 0 0; padding: 0 0 0 22px; }
.rules li { display: grid; gap: 8px; padding: 12px 0; border-top: 1px solid var(--line); }
.rules li.off .rule-text { color: var(--muted); }
.rules .actions-row { gap: 6px; }
@media (min-width: 960px) {
  .animal-page { grid-template-columns: minmax(0, 420px) minmax(0, 1fr); align-items: start; }
}

/* ---------- post (A4.5) ---------- */
.letters { margin: 0 0 16px; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.letters li { display: flex; align-items: flex-start; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); }
.letters .pick { display: flex; flex: none; padding-top: 2px; }
.letters .pick input { width: 20px; height: 20px; accent-color: var(--magenta); }
.letters li > a { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; flex: 1 1 auto; min-width: 0; color: var(--text); text-decoration: none; }
.letters li > a:hover .letter-subject { color: var(--magenta-text); }
.letter-from { color: var(--muted); font-size: 13px; overflow-wrap: anywhere; }
.letter-at { color: var(--muted); font-size: 12px; white-space: nowrap; }
.letter-subject, .letter-preview { grid-column: 1 / -1; overflow-wrap: anywhere; }
.letter-preview { color: var(--muted); font-size: 13px; }
.letters .unread .letter-subject { font-weight: 900; }
.letters .unread .letter-from { color: var(--text); }
.letter-subject .badge { vertical-align: 1px; }
.badge.important { border-color: transparent; background: var(--surface-2); color: var(--danger); }
.badge.hidden-asset { height: 18px; margin-left: 6px; padding: 0 6px; border-style: dashed; font-size: 9px; vertical-align: 2px; }
.panel p.letter-text { color: var(--text); line-height: 1.55; }
.letter-words { margin: 0 0 12px; padding: 12px 16px; border-left: 3px solid var(--magenta); border-radius: 4px; background: var(--surface-2); overflow-wrap: anywhere; line-height: 1.55; }
.stock .stock-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 52px; padding: 8px 4px; border-bottom: 1px solid var(--line); }
.stock .letter-pet a { justify-content: flex-start; }
.letter-pet .pet { width: 88px; flex: none; }
.confirm-box { margin: 16px 0 0; padding: 14px; border: 1px solid var(--orbit); border-radius: 16px; }
.confirm-box p { color: var(--text); }
.letter-actions { margin: 16px 0 0; }

/* ---------- market (A4.6) ---------- */
/* the picture of an asset (#34): a placeholder with the icon of its class until the real pictures come (#35) */
.asset-art { display: flex; flex: none; align-items: center; justify-content: center; width: 100%; max-width: 100%; aspect-ratio: 1; border-radius: 16px; background: var(--surface-2); color: var(--magenta-text); }
.asset-art svg { width: 36%; height: 36%; }
.asset-art.has-pic { background: none; }
.asset-art img { display: block; width: 100%; height: 100%; object-fit: contain; }
.asset-art.thumb { width: 48px; border-radius: 10px; }
.asset-art.thumb svg { width: 22px; height: 22px; }
.asset-art.big { width: 160px; margin: 0 0 12px; }
/* the workshop and the detail view of an asset (#47): pictures on the cards, the costs as chips, one big picture */
.asset-art.mid { width: 64px; border-radius: 12px; }
.asset-art.mid svg { width: 28px; height: 28px; }
.asset-art.chip { width: 24px; border-radius: 6px; }
.asset-art.chip svg { width: 14px; height: 14px; }
.asset-art.huge { width: min(320px, 100%); border-radius: 24px; }
a.building-title, .recipe-head { color: var(--text); text-decoration: none; }
a.building-title:hover h2, .recipe-head:hover h3 { color: var(--magenta-text); }
.recipe-head { display: flex; align-items: center; gap: 12px; }
.recipe-title { display: flex; flex: 1 1 auto; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 6px 10px; min-width: 0; }
.recipe-title h3 { margin: 0; font-size: 17px; line-height: 1.3; }
.cost-chips, .piece-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.cost-chips a, .piece-chips a { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 3px 12px 3px 4px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface-2); color: var(--text); font-size: 13px; text-decoration: none; font-variant-numeric: tabular-nums; }
.cost-chips a:hover, .piece-chips a:hover { border-color: var(--magenta-text); }
.cost-chips small { color: var(--muted); }
.cost-chips .short a { border-color: rgba(255, 143, 163, .45); }
.cost-chips .short small { color: var(--danger); }
.hint.short { color: var(--danger); }
.recipe .hint.brings { margin: 0; }
.recipe.in-detail { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.asset-detail .asset-hero { display: grid; gap: 20px; }
.asset-detail .asset-hero .eyebrow { margin: 0 0 6px; }
.asset-detail .asset-hero h2 { margin: 0; font-size: clamp(24px, 4vw, 34px); font-weight: 300; }
.asset-detail .asset-text { margin: 12px 0 0; color: var(--text); line-height: 1.55; }
/* the descriptions of the assets and the shop keep their line breaks (#139) */
.asset-text, .offer-text { white-space: pre-line; }
.asset-detail .actions-row { margin: 16px 0 0; }
.asset-detail h3.sub { margin: 24px 0 10px; }
/* the PKS (#47): at the top of every page and above the storage, not among the goods */
.pill.pks { gap: 6px; padding: 0 12px 0 6px; color: var(--text); font-size: 13px; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.pill.pks[aria-current] { border-color: var(--orbit); background: var(--surface-2); }
.pill.pks .asset-art.chip { width: 24px; }
.pks-card { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin: 0 0 18px; padding: 14px 18px 14px 14px; border: 1px solid var(--line); border-radius: var(--r-tile); background: linear-gradient(120deg, rgba(223, 165, 44, .10), var(--surface) 55%); }
.pks-main { display: flex; align-items: center; gap: 14px; color: var(--text); text-decoration: none; }
.pks-text { display: flex; flex-direction: column; gap: 2px; }
.pks-label { color: var(--muted); font-size: 13px; }
.pks-amount { font-size: 26px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pks-main:hover .pks-amount { color: var(--magenta-text); }
/* the running jobs of the workshop (#47): a card each with picture, time left and a bar that moves on */
.panel h2 .badge { margin-left: 2px; }
.job-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.job-card { display: flex; align-items: center; gap: 14px; padding: 12px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface-2); }
.job-pic { flex: none; }
.job-body { display: flex; flex: 1 1 auto; flex-direction: column; gap: 6px; min-width: 0; }
.job-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 2px 10px; }
.job-name { color: var(--text); font-weight: 700; text-decoration: none; }
.job-name:hover { color: var(--magenta-text); }
.job-left { color: var(--magenta-text); font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.job-times { color: var(--muted); font-size: 12px; }
.job-card progress { width: 100%; height: 8px; border: 0; border-radius: 4px; background: var(--line); overflow: hidden; appearance: none; -webkit-appearance: none; }
.job-card progress::-webkit-progress-bar { border-radius: 4px; background: var(--line); }
.job-card progress::-webkit-progress-value { border-radius: 4px; background: linear-gradient(90deg, var(--magenta), var(--magenta-text)); }
.job-card progress::-moz-progress-bar { border-radius: 4px; background: linear-gradient(90deg, var(--magenta), var(--magenta-text)); }
@media (min-width: 720px) { .asset-detail .asset-hero { grid-template-columns: minmax(0, 320px) minmax(0, 1fr); align-items: start; gap: 28px; } }
.devices li.with-art { grid-template-columns: auto minmax(0, 1fr) auto; }
.devices li.with-art .asset-art { grid-row: 1 / span 2; }
.devices li.with-art .device-meta { grid-column: 2; }
.devices li.with-art form { grid-column: 3; }
.animal-card.highlighted { border-color: var(--magenta); box-shadow: 0 0 0 1px var(--magenta) inset; }
details > summary { cursor: pointer; color: var(--magenta-text); font-weight: 700; font-size: 14px; }
details[open] > summary { margin-bottom: 10px; }
.panel details { margin-top: 14px; }
/* panels and groups that open and close (#37, D81): the heading is the switch, a chevron shows the state */
.fold > summary, .stock-group > summary { display: flex; align-items: center; gap: 10px; margin: 0; list-style: none; color: var(--text); font-size: 17px; }
.fold > summary::-webkit-details-marker, .stock-group > summary::-webkit-details-marker { display: none; }
.fold > summary::after, .stock-group > summary::after {
  content: ""; flex: none; width: 9px; height: 9px; margin: 0 4px 0 auto; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translate(-2px, -2px); transition: transform .2s;
}
.fold[open] > summary::after, .stock-group[open] > summary::after { transform: rotate(-135deg) translate(-2px, -2px); }
.fold > summary h2 { margin: 0; }
.fold > summary:hover h2, .stock-group > summary:hover { color: var(--magenta-text); }
.fold[open] > summary { margin-bottom: 14px; }
.fold-note { color: var(--muted); font-size: 13px; font-weight: 400; }
.fold > summary .fold-note { margin-left: auto; }
.fold > summary:has(.fold-note)::after { margin-left: 0; }
.stock-group { margin: 0 0 6px; }
.stock-group > summary { padding: 12px 4px; font-weight: 700; }
.stock-group > summary .fold-note { margin-left: 2px; }
details.more > summary { font-size: 13px; }
.panel details.more { margin-top: 12px; }

/* ---------- Tamer Game guide (A4.7) ---------- */
.guide { display: grid; gap: 28px; max-width: 1024px; margin: 20px 0; padding: 0; list-style: none; counter-reset: step; }
.guide h2 { margin: 0 0 10px; font-size: 18px; counter-increment: step; }
.guide h2::before { content: counter(step) ". "; color: var(--magenta-text); }
.guide img { display: block; width: 100%; height: auto; border-radius: 16px; border: 1px solid var(--line); }
/* the computer: the words of a step beside its picture, so the guide is not one picture per screen (#37) */
@media (min-width: 960px) {
  .guide li { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 640px); gap: 24px; align-items: start; }
  .guide h2 { margin-top: 12px; }
}

/* rarity of an asset (D83): the colours of its inworld card, the name on the picture */
:root { --rare-1: #3f9cff; --rare-2: #b84dff; --rare-3: #dfa52c; }
.asset-art { position: relative; }
.asset-art.rare-1 { box-shadow: inset 0 0 0 2px var(--rare-1), 0 0 14px -4px var(--rare-1); }
.asset-art.rare-2 { box-shadow: inset 0 0 0 2px var(--rare-2), 0 0 16px -4px var(--rare-2); }
.asset-art.rare-3 { box-shadow: inset 0 0 0 2px var(--rare-3), inset 0 0 0 4px rgba(255, 241, 168, .35), 0 0 18px -3px var(--rare-3); }
.asset-art .rarity { position: absolute; left: 8px; bottom: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .04em; line-height: 1.5; color: #fff; background: rgba(11, 10, 16, .72); border: 1px solid currentColor; }
.asset-art.rare-1 .rarity { color: #8cc4ff; }
.asset-art.rare-2 .rarity { color: #d8a1ff; }
.asset-art.rare-3 .rarity { color: #ffd76a; }

/* the estate as tiles (#49): picture, name, how many are on, a line of what it makes, the control at the foot */
.estate-tile { display: flex; flex-direction: column; }
.animal-card > span.animal-pic { display: block; padding: 10px 10px 0; }
.tiles-s .animal-card > span.animal-pic { padding: 6px 6px 0; }
.estate-tile .animal-text { flex: 1; }
.estate-tile .animal-name { color: var(--text); text-decoration: none; }
a.animal-name:hover { color: var(--magenta-text); }
.estate-tile .badge { align-self: flex-start; }
.estate-tile .tile-control { margin-top: auto; padding-top: 6px; }
.estate-tile .tile-control form { margin: 0; }
.estate-tile .count-form select { height: 34px; }
.tiles-s .estate-tile .badge { height: 22px; padding: 0 7px; gap: 5px; font-size: 10px; letter-spacing: .02em; white-space: nowrap; }
.tiles-s .estate-tile .btn.small { padding: 0 8px; font-size: 12px; }
/* the trait search (#62): the choice of one trait beside the search, the fields per body part in the panel */
.filter-main select { flex: 1 1 0; width: 0; min-width: 7.5em; max-width: 14em; }
.trait-parts { border: 0; margin: 4px 0 0; padding: 0; min-width: 0; }
.trait-parts > legend { padding: 0 2px 4px; color: var(--muted); font-size: 13px; }
/* Breeding → Settings (#97, D122): a list with a fixed column, switches, segments, cards for the birth, what depends on
   something indented and greyed while that is off, the bar of unsaved changes */
.set-form { gap: 14px; }
.set-section h2 { display: flex; align-items: center; gap: 10px; }
.set-icon { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--surface-2); color: var(--magenta-text); }
.set-section > .hint { margin: 4px 0 6px; }
.set-list { display: grid; }
.set-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 300px); gap: 8px 24px; align-items: center; padding: 14px 0; border-top: 1px solid var(--line); }
.set-row.sub { padding-left: 22px; border-left: 2px solid var(--line); margin-left: 6px; }
.set-row.off { opacity: .45; }
.set-text { display: grid; gap: 3px; min-width: 0; }
.set-name { font-weight: 700; font-size: 15px; }
.set-text .hint { margin: 0; }
.set-control { display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-width: 0; }
.set-control select { width: auto; max-width: 100%; }
.switch { position: relative; display: inline-block; width: 52px; height: 30px; flex: none; cursor: pointer; }
.switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch .knob { position: absolute; inset: 0; border-radius: 15px; background: var(--surface-2); border: 1px solid var(--line); transition: background-color .2s; }
.switch .knob::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--muted); transition: transform .2s, background-color .2s; }
.switch input:checked + .knob { background: var(--magenta); border-color: var(--magenta); }
.switch input:checked + .knob::after { transform: translateX(22px); background: var(--on-magenta); }
.switch input:focus-visible + .knob { outline: 2px solid var(--magenta-text); outline-offset: 2px; }
.segments { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; }
.segments label { position: relative; }
.segments input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.segments span { display: inline-flex; align-items: center; height: 32px; padding: 0 12px; border-radius: 9px; color: var(--muted); font-size: 13px; font-weight: 700; }
.segments input:checked + span { background: var(--surface-2); color: var(--magenta-text); }
.segments input:focus-visible + span { outline: 2px solid var(--magenta-text); }
.set-row:has(.birth-cards) { grid-template-columns: minmax(0, 1fr); }
.birth-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: 8px; width: 100%; }
.settings .birth-card { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface-2); font-size: 13.5px; font-weight: 400; cursor: pointer; }
.birth-card input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.birth-card:has(input:checked) { border-color: var(--magenta-text); box-shadow: 0 0 0 1px var(--magenta-text) inset; }
.birth-card:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.birth-icon { display: inline-grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: 10px; background: var(--surface); color: var(--magenta-text); }
.set-badge { flex: none; }
.save-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px 14px; }
.save-bar .save-note, .save-bar .save-reset { display: none; }
form[data-dirty] .save-bar { position: sticky; bottom: calc(var(--bar-h) + env(safe-area-inset-bottom) + 12px); z-index: 15; padding: 10px 12px; border: 1px solid var(--orbit); border-radius: 18px;
  background: var(--surface-2); box-shadow: 0 18px 50px -10px rgba(0, 0, 0, .9); }
form[data-dirty] .save-bar .save-note { display: block; margin-right: auto; color: var(--caution); font-weight: 700; font-size: 14px; }
form[data-dirty] .save-bar .save-reset { display: inline-flex; }
@media (min-width: 960px) { .set-form .save-bar { max-width: 760px; } form[data-dirty] .save-bar { bottom: 18px; } }
@media (max-width: 599px) { .set-row { grid-template-columns: minmax(0, 1fr) auto; } .set-row:has(select, .segments, .birth-cards) { grid-template-columns: minmax(0, 1fr); } .set-row:has(select, .segments) .set-control { justify-content: flex-start; } }

/* the building kit of the tiles (#110, D138): symbol and line picture on every tile; pictures, one big figure, states, a
   quiet bar where they tell something; tasks on top of the start page; size by importance */
.tiles.kit .tile-art { right: -22px; bottom: -30px; width: 112px; height: 112px; opacity: .4; pointer-events: none; }
.tile.glow { background-image: radial-gradient(120% 150% at 100% 100%, rgba(191, 0, 191, .2), transparent 62%); }
.tile.big, .tile.wide, .tile.pair { grid-column: 1 / -1; }
.tile.big .tile-art, .tile.wide .tile-art { width: 150px; height: 150px; right: -28px; bottom: -40px; }
/* on a phone the line pictures are small and pale, low in the corner, under no figure (#119) */
@media (max-width: 599px) {
  .tiles.kit .tile-art, .tile.big .tile-art, .tile.wide .tile-art, .tile.pair .tile-art { width: 96px; height: 96px; right: -18px; bottom: -36px; opacity: .25; }
}
.pics { position: relative; display: flex; align-items: flex-end; min-height: 52px; }
.pics.herd .pet { flex: none; width: 54px; height: 54px; border-radius: 14px; border: 2px solid var(--surface); margin-right: -12px; }
.tile.big .pics.herd .pet { width: 64px; height: 64px; }
.pics.items .asset-art { flex: none; width: 40px; height: 40px; margin-right: 6px; background: none; filter: drop-shadow(0 6px 8px rgba(0, 0, 0, .45)); }
.pics.one .asset-art { width: 66px; height: 66px; background: none; filter: drop-shadow(0 8px 10px rgba(0, 0, 0, .5)); }
.fig { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.fig b { font-size: 24px; font-weight: 900; line-height: 1; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.fig span { color: var(--muted); font-size: 13px; }
.fig.alarm b { color: var(--danger); } /* #184: out, as on the food page */
.fig.warn b { color: var(--caution); }
.fig.zero b { color: var(--faint); }
.sub { position: relative; color: var(--muted); font-size: 13px; line-height: 1.4; }
.sub .nil { color: var(--faint); }
.meter { position: relative; display: block; height: 4px; max-width: 220px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.meter i { position: absolute; inset: 0 auto 0 0; border-radius: 3px; background: var(--magenta-text); opacity: .75; }
.meter .w0 { width: 0; } .meter .w5 { width: 5%; } .meter .w10 { width: 10%; } .meter .w15 { width: 15%; } .meter .w20 { width: 20%; } .meter .w25 { width: 25%; }
.meter .w30 { width: 30%; } .meter .w35 { width: 35%; } .meter .w40 { width: 40%; } .meter .w45 { width: 45%; } .meter .w50 { width: 50%; } .meter .w55 { width: 55%; }
.meter .w60 { width: 60%; } .meter .w65 { width: 65%; } .meter .w70 { width: 70%; } .meter .w75 { width: 75%; } .meter .w80 { width: 80%; } .meter .w85 { width: 85%; }
.meter .w90 { width: 90%; } .meter .w95 { width: 95%; } .meter .w100 { width: 100%; }
.state { position: relative; display: flex; flex-wrap: wrap; gap: 6px; }
.state > span { display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 9px; border-radius: 13px; background: var(--surface-2); color: var(--text); font-size: 12px; font-weight: 700; }
.state > span svg { color: var(--muted); }
.state > span.ok svg { color: var(--ok); }
.state > span.alarm, .state > span.alarm svg { color: var(--danger); }
.state > span.warn, .state > span.warn svg { color: var(--caution); }
.state > span.zero, .state > span.zero svg { color: var(--faint); }
@media (max-width: 599px) { /* #119: the chips in one row on a phone, empty ones away */
  .state > span.zero { display: none; }
  .state > span { height: 24px; padding: 0 8px; gap: 4px; font-size: 11.5px; }
}
.kit-stock { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.kit-row { display: grid; grid-template-columns: 34px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center; min-width: 0; }
.kit-row > .asset-art, .kit-row > .pet { grid-column: 1; grid-row: 1 / 3; width: 34px; height: 34px; }
.kit-row > b { grid-column: 2; grid-row: 1; }
.kit-row > span:last-child { grid-column: 2; grid-row: 2; }
.kit-row > .asset-art { background: none; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, .45)); }
.kit-row > .pet { border-radius: 10px; }
.kit-row b { font-size: 15px; font-weight: 900; font-variant-numeric: tabular-nums; line-height: 1.2; }
.kit-row > span:last-child { color: var(--muted); font-size: 12px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kit-row em { font-style: normal; color: var(--ok); font-weight: 700; }
.tile.photo > img.bgimg { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; opacity: .5; }
.tile.photo::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, transparent 5%, rgba(11, 10, 16, .82) 70%); }
.tile.photo > :not(.bgimg) { z-index: 2; }
.c-tile .tile-text, .has-fig .tile-text { display: none; }
.foryou .now { display: flex; flex-direction: column; gap: 10px; margin: 0 0 18px; }
/* opaque, so the stars behind the page do not show through as dots in the text (#119) */
.task { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 14px 16px; border-radius: var(--r-tile); border: 1px solid rgba(242, 199, 110, .35); background: color-mix(in srgb, rgb(242, 199, 110) 12%, var(--bg)); }
.task-icon { display: flex; align-items: center; justify-content: center; flex: none; width: 40px; height: 40px; border-radius: 13px; background: var(--surface-2); color: var(--caution); }
.task-text { flex: 1 1 180px; min-width: 0; }
.task-text b { display: block; font-size: 16px; line-height: 1.3; }
.task-text span { color: var(--muted); font-size: 13px; }
.calm { display: flex; align-items: center; gap: 12px; margin: 0; padding: 12px 16px; border-radius: var(--r-tile); border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 15px; }
.calm svg { color: var(--ok); flex: none; }
/* the tick of the game (#117): the time to the next production or feeding */
.tick { position: relative; display: inline-flex; align-items: center; gap: 6px; padding-bottom: 6px; color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; }
.tick svg { flex: none; color: var(--magenta-text); }
/* #155 (D173): a thin bar under the text, how far the round is; a glint glides over it now and then, still for less motion */
.meter.tick-bar { position: absolute; left: 20px; right: 0; bottom: 0; height: 2px; max-width: none; border-radius: 1px; background: var(--line); }
.tick-bar i { border-radius: 1px; opacity: 1; overflow: hidden; }
.tick-bar i::after { content: ""; position: absolute; top: 0; bottom: 0; left: -28px; width: 28px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); opacity: 0; }
@media (prefers-reduced-motion: no-preference) { .tick-bar i::after { animation: tick-glint 4.2s ease-in-out infinite; } }
@keyframes tick-glint { 0% { opacity: 0; left: -28px; } 8% { opacity: 1; } 55% { opacity: 1; left: 100%; } 56%, 100% { opacity: 0; left: 100%; } }
.tip.tick-tip { text-align: left; }
.bubble small.local { margin-top: 6px; font-weight: 700; }
.tick-line { margin: 0 0 14px; padding: 0 8px; }
.quick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.quick a { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 20px; border: 1px solid var(--line); background: var(--surface); color: var(--muted); font-size: 14px; text-decoration: none; }
.quick a b { color: var(--text); font-weight: 700; }
.quick a svg { color: var(--magenta-text); }
.quick-label { width: 100%; font-size: 11px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--faint); }
@media (min-width: 960px) {
  .tiles.kit .tile-art { right: -26px; bottom: -38px; width: 160px; height: 160px; }
  .c-tile .tile-text, .has-fig .tile-text { display: block; }
  .pics { min-height: 72px; }
  .pics.herd .pet { width: 68px; height: 68px; border-radius: 16px; }
  .pics.items .asset-art { width: 56px; height: 56px; }
  .pics.one .asset-art { width: 84px; height: 84px; }
  .fig b { font-size: 30px; }
  .has-fig .fig b { font-size: 34px; }
  .tile.wide, .tile.pair { grid-column: span 2; }
  .tile.wide .kit-stock { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tile.pair { min-height: 200px; }
  .tile.pair .tile-art { width: 190px; height: 190px; right: -30px; bottom: -48px; }
  .kit-row { grid-template-columns: 44px minmax(0, 1fr); }
  .kit-row > .asset-art, .kit-row > .pet { width: 44px; height: 44px; }
  .tile.big { grid-column: span 2; grid-row: span 2; padding: 28px; border-radius: var(--r-big);
    background-image: radial-gradient(90% 110% at 100% 100%, rgba(191, 0, 191, .2), transparent 62%), radial-gradient(120% 120% at 100% 0%, rgba(191, 0, 191, .12), transparent 60%); }
  .tile.big .pics { min-height: 150px; }
  .tile.big .pics.herd .pet { width: 132px; height: 132px; border-radius: 24px; border-width: 3px; margin-right: -22px; }
  .tile.big .tile-title { font-size: 28px; }
  .tile.big .tile-text { max-width: 30em; font-size: 15px; }
  .tile.big .fig b { font-size: 44px; }
  .tile.big .tile-art { width: 280px; height: 280px; right: -50px; bottom: -70px; }
  .tile.wide .tile-art { width: 200px; height: 200px; right: -34px; bottom: -50px; }
  .foryou .now { margin: 4px 0 22px; }
  .task { padding: 16px 20px; }
}
@media (prefers-reduced-motion: reduce) { .tiles.kit .tile-art { transition: none; } }

/* Shop: one offer with its box to buy (#138): quantity, price and the PKS after; asking in the same box, which lights up;
   the receipt after the purchase instead of a button, with three equal ways on (#160); room under the offer */
.panel.offer { margin-bottom: 28px; }
.offer h2 + .offer-chip, .offer h2 + .note { margin-top: 0; }
.offer-chip { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 14px; padding: 6px 14px; border: 1px solid var(--line); border-radius: 18px;
  color: var(--muted); font-size: 14px; font-weight: 700; }
.note.warn { border-color: rgba(255, 143, 163, .45); color: var(--danger); background: rgba(255, 143, 163, .07); }
.offer-body { display: grid; gap: 4px; }
.offer-about .offer-text { margin-top: 12px; }
.buy-box { margin: 18px 0 0; padding: 16px 18px; border: 1px solid var(--orbit); border-radius: 20px; background: var(--surface-2); max-width: 520px; }
.buy-box.asking { border-color: var(--magenta-text); box-shadow: 0 0 0 1px var(--magenta-text), 0 10px 40px -12px rgba(191, 0, 191, .75); animation: buy-glow 1.2s ease-out 1; }
@keyframes buy-glow { from { box-shadow: 0 0 0 6px rgba(224, 75, 224, .35), 0 10px 40px -12px rgba(191, 0, 191, .75); } }
.buy-box[data-state="start"] .buy-confirm, .buy-box[data-state="ask"] .buy-start { display: none; }
.buy-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 6px 0; color: var(--muted); }
.buy-row b { color: var(--text); font-size: 18px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.buy-row.sum { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 12px; }
.buy-row [data-buy-after] { color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.buy-box + .actions-row { margin-top: 14px; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--orbit); border-radius: 24px; background: var(--bg); }
.stepper button { width: 44px; height: 44px; border: 0; background: none; color: var(--text); font: 700 20px/1 var(--font); cursor: pointer; border-radius: 22px; }
.stepper button:disabled { color: var(--faint); cursor: default; }
.stepper input { width: 48px; height: 44px; border: 0; background: none; color: var(--text); font: 900 18px/1 var(--font); text-align: center; -moz-appearance: textfield; appearance: textfield; }
.stepper input::-webkit-outer-spin-button, .stepper input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.buy-warn { margin: 8px 0 0; color: var(--caution); font-size: 15px; }
.buy-warn a { color: var(--magenta-text); font-weight: 700; }
.buy-go { width: 100%; margin: 12px 0 0; }
.buy-confirm h3 { margin: 0 0 10px; font-size: 18px; }
.buy-confirm p { margin: 0 0 10px; }
.buy-confirm .actions-row { margin: 12px 0 0; }
.buy-room { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; color: var(--muted); font-size: 15px; }
.buy-room svg { flex: none; margin-top: 3px; color: var(--magenta-text); }
.receipt { padding: 18px; border: 1px solid rgba(127, 217, 164, .5); border-radius: 20px; background: linear-gradient(160deg, rgba(127, 217, 164, .1), transparent 60%); }
.receipt-head { display: flex; align-items: center; gap: 14px; margin: 0 0 12px; }
.receipt-head h3 { margin: 0; color: var(--ok); font-size: 22px; line-height: 1.25; }
.receipt-tick { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--ok); color: var(--bg); }
.receipt p { margin: 0 0 10px; }
.receipt-paid { color: var(--muted); }
.receipt-pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); gap: 8px; margin: 4px 0 14px; padding: 0; list-style: none; }
.receipt-pets a { display: grid; justify-items: center; gap: 4px; color: var(--text); text-decoration: none; font-size: 13px; }
.receipt-pets .pet { width: 100%; aspect-ratio: 1; border-radius: 16px; overflow: hidden; }
.receipt-pets small { color: var(--muted); font-variant-numeric: tabular-nums; }
.receipt-sex { display: inline-flex; align-items: center; gap: 3px; font-weight: 700; }
.receipt-sex.m { color: var(--stallion); }
.receipt-sex.f { color: var(--mare); }
.receipt p.receipt-more { margin-top: -4px; color: var(--muted); }
.receipt-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); gap: 10px; margin: 14px 0 0; }
.receipt-ways .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.receipt-ways .btn svg { flex: none; }
@media (min-width: 720px) {
  .offer-body { grid-template-columns: 180px minmax(0, 1fr); gap: 20px; align-items: start; }
  .offer-about .offer-text { margin-top: 0; }
  .offer-about .facts { margin-top: 10px; }
}

/* The filter of the stable (#137, D165): the groups as tabs on the box (on the phone and with many a button with its list),
   the search with its magnifier, the state in words, the genders as rings in the colours of the tiles (filled when on),
   "More filters" for the rest; the order in the bar above the tiles, on the phone a sheet from the bottom. */
.stable-filter { margin: 0 0 12px; }
.stable-filter .filters { margin: 0; }
.stable-filter .filters.tabbed { border-top-left-radius: 0; }
.stable-filter .filter-chips { margin: 10px 0 0; }
.ftools { padding: 8px; }
.ftool { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fsearch { position: relative; flex: 1 1 240px; display: flex; min-width: 0; }
.fsearch svg { position: absolute; left: 12px; top: 50%; translate: 0 -50%; color: var(--muted); pointer-events: none; }
.filters .fsearch input { flex: 1; width: 100%; height: 42px; padding-left: 38px; border-radius: 12px; font-size: 15px; }
.ficons { display: flex; gap: 6px; align-items: center; flex-wrap: nowrap; }
.ficons > * { flex: none; }
.fseg { display: inline-flex; gap: 2px; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.fw { height: 34px; padding: 0 13px; border: 0; border-radius: 9px; background: none; color: var(--muted); font: 700 13px/1 var(--font); cursor: pointer; }
.fw:hover { color: var(--text); background: var(--surface-2); }
.fw[aria-pressed="true"] { background: var(--surface-2); color: var(--text); box-shadow: inset 0 0 0 1.5px var(--magenta-text); }
.ft { display: inline-grid; place-items: center; width: 38px; height: 34px; padding: 0; border: 0; border-radius: 9px; background: none; color: var(--muted); cursor: pointer;
  -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.ft:hover { background: var(--surface-2); }
.ft .sex { width: 22px; height: 22px; background: none; }
.ft.m .sex { color: var(--stallion); box-shadow: inset 0 0 0 1.5px var(--stallion); }
.ft.f .sex { color: var(--mare); box-shadow: inset 0 0 0 1.5px var(--mare); }
.ft.m[aria-pressed="true"] { background: rgba(63, 140, 240, .16); }
.ft.f[aria-pressed="true"] { background: rgba(226, 97, 159, .16); }
.ft.m[aria-pressed="true"] .sex { background: var(--stallion); color: var(--on-group-dark); }
.ft.f[aria-pressed="true"] .sex { background: var(--mare); color: var(--on-group-dark); }
.fmore { display: inline-flex; align-items: center; gap: 7px; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted);
  font: 700 13px/1 var(--font); text-decoration: none; }
.fmore:hover, .fmore[aria-expanded="true"] { color: var(--text); border-color: var(--orbit); }
.fmore[aria-expanded="true"] { background: var(--surface-2); }
.fmore small { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--magenta); color: var(--on-magenta); font-size: 11px; }
.fpanel { margin-top: 10px; padding: 12px 4px 4px; border-top: 1px solid var(--line); }
.fpanel .filter-grid { padding-top: 0; }
.js [data-no-js] { display: none; }
/* the groups: tabs on the box */
.gtabs { display: flex; gap: 2px; overflow-x: auto; scrollbar-width: none; margin-bottom: -1px; position: relative; z-index: 1; }
.gtabs a { flex: none; display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid transparent; border-bottom: 0; border-radius: 12px 12px 0 0;
  color: var(--muted); text-decoration: none; font-size: 14px; font-weight: 700; }
.gtabs a:hover { color: var(--text); }
.gtabs a[aria-current] { background: var(--surface); border-color: var(--line); color: var(--text); box-shadow: inset 0 3px 0 var(--gc, var(--magenta-text)); }
.gtabs small, .fgroup small, .gpop small { color: var(--muted); font-weight: 400; font-size: 12px; font-variant-numeric: tabular-nums; }
.gtabs .c-0 { --gc: var(--group-0); } .gtabs .c-1 { --gc: var(--group-1); } .gtabs .c-2 { --gc: var(--group-2); } .gtabs .c-3 { --gc: var(--group-3); }
.gtabs .c-4 { --gc: var(--group-4); } .gtabs .c-5 { --gc: var(--group-5); } .gtabs .c-6 { --gc: var(--group-6); } .gtabs .c-7 { --gc: var(--group-7); }
.grp-badge.all { background: var(--surface-2); color: var(--muted); padding: 0; min-width: 20px; }
/* a list that opens from its button (details.pop): a click beside it closes it */
details.pop { position: relative; }
details.pop > summary { list-style: none; cursor: pointer; }
details.pop > summary::-webkit-details-marker { display: none; }
details.pop[open] > summary::before { content: ""; position: fixed; inset: 0; z-index: 29; cursor: default; }
.gpop { position: absolute; z-index: 30; top: calc(100% + 6px); left: 0; min-width: 240px; display: grid; gap: 2px; padding: 6px; border: 1px solid var(--orbit); border-radius: 14px;
  background: var(--surface); box-shadow: 0 12px 32px rgba(0, 0, 0, .5); }
.gpop a { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; border-radius: 9px; color: var(--text); text-decoration: none; font-size: 14px; font-weight: 700; white-space: nowrap; }
.gpop a:hover, .gpop a[aria-selected="true"] { background: var(--surface-2); }
.gpop .gname { flex: 1; }
.gpop a svg { color: var(--magenta-text); }
.gpop .sheet-title { display: none; }
.gwrap { display: none; flex: none; }
.fgroup { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 10px 0 9px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2);
  color: var(--text); font: 700 14px/1 var(--font); }
.fgroup > svg { color: var(--muted); }
details.gwrap[open] > .fgroup { border-color: var(--orbit); }
.stable-filter:has(.gtabs.many) .gtabs { display: none; }
.stable-filter:has(.gtabs.many) .gwrap { display: block; }
.stable-filter:has(.gtabs.many) .filters.tabbed { border-top-left-radius: 16px; }
/* the order in the bar above the tiles */
.bar-tools { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.stable-bar .bar-tools .tile-sizes { margin: 0; }
.fsort, .fcycle { display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; color: var(--muted);
  font: 700 13px/1 var(--font); text-decoration: none; }
.fsort:hover, .fcycle:hover, details.sortwrap[open] > .fsort { color: var(--text); border-color: var(--orbit); }
details.sortwrap[open] > .fsort { background: var(--surface-2); }
.fsort .w { color: var(--text); }
.spop { left: auto; right: 0; min-width: 220px; }
.fcycle { display: none; width: 40px; padding: 0; justify-content: center; color: var(--magenta-text); }
@media (max-width: 600px) {
  .fsearch { flex-basis: 100%; }
  .ftool { gap: 8px 6px; }
  .ficons { width: 100%; }
  .ficons .fseg { flex: 1 1 auto; }
  .ficons .fw { flex: 1 1 0; padding: 0 6px; }
  .ficons .ft { flex: 1 1 0; width: auto; }
  .fmore .w { display: none; }
  .fmore { padding: 0 12px; }
  .gtabs { display: none; }
  .stable-filter .filters.tabbed { border-top-left-radius: 16px; }
  .gwrap { display: block; flex: 1 1 100%; }
  .fgroup { width: 100%; }
  .fgroup .gname { flex: 1; text-align: left; }
  .stable-bar { flex-wrap: nowrap; gap: 8px 10px; }
  .stable-count { white-space: nowrap; }
  .bar-tools .tile-sizes { display: none; }
  .fcycle { display: inline-flex; }
  .fsort { width: 40px; padding: 0; justify-content: center; }
  .fsort .w, .fsort .chev { display: none; }
  /* the lists as a sheet from the bottom, a tap beside it closes it */
  details.pop[open] > summary::before { z-index: 70; background: rgba(5, 4, 9, .62); }
  details.pop[open] > .gpop { position: fixed; z-index: 71; top: auto; left: 0; right: 0; bottom: 0; min-width: 0; padding: 8px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    border-radius: 20px 20px 0 0; border: 0; border-top: 1px solid var(--orbit); box-shadow: 0 -12px 40px rgba(0, 0, 0, .5); }
  details.pop[open] > .gpop::before { content: ""; display: block; width: 40px; height: 4px; margin: 0 auto 10px; border-radius: 2px; background: var(--orbit); }
  .gpop .sheet-title { display: flex; align-items: center; gap: 8px; margin: 0 4px 8px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
  .gpop a { height: 50px; padding: 0 12px; border-radius: 12px; font-size: 16px; }
}

/* The room of the stable (#156, D176; variant A, on the phone A1): a field with two bars, living (heart) and unborn
   (crate), with the numbers; over its room a part turns red. The mouse shows the bubble, a click the window (a dialog;
   ?room=1 shows it on the page without script). On the tile two thin lines under the chips. */
.meter i.some { min-width: 3px; }
.tip.cap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; align-items: center; gap: 22px; max-width: 720px; margin: 0 0 16px; padding: 14px 16px 14px 18px;
  border: 1px solid var(--orbit); border-radius: 20px; background: linear-gradient(120deg, var(--surface), rgba(191, 0, 191, .07)); color: var(--text); text-decoration: none; cursor: pointer; }
.tip.cap:hover { border-color: var(--magenta-text); }
.tip.cap.full { border-color: rgba(255, 143, 163, .55); background: linear-gradient(120deg, var(--surface), rgba(255, 143, 163, .08)); }
.cap-part { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 10px; min-width: 0; }
.cap-label { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.cap-label svg { color: var(--magenta-text); }
.cap-num { color: var(--muted); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cap-num b { color: var(--text); font-size: 18px; font-weight: 900; }
.cap-part .meter { grid-column: 1 / -1; max-width: none; height: 6px; margin-top: 4px; }
.cap-part.full .cap-label svg, .cap-part.full .cap-num b { color: var(--danger); }
.cap-part.full .meter i { background: var(--danger); opacity: 1; }
.cap-go { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--muted); }
.cap-go svg { transform: rotate(-90deg); }
.tip.cap:hover .cap-go { color: var(--magenta-text); }
@media (max-width: 599px) {
  .tip.cap { gap: 12px; height: 48px; padding: 0 6px 0 14px; border-radius: 24px; }
  .cap-part { display: flex; align-items: center; gap: 8px; }
  .cap-label span { display: none; }
  .cap-part .meter { flex: 1 1 auto; order: 1; margin: 0; height: 5px; }
  .cap-num { order: 2; }
  .cap-num b { font-size: 15px; }
  .cap-go { width: 34px; height: 34px; }
}

.room-dialog { width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 40px); padding: 0; border: 1px solid var(--line); border-radius: 26px; background: var(--surface); color: var(--text); }
.room-dialog::backdrop { background: rgba(6, 5, 12, .72); }
.room-dialog.inline { position: static; width: auto; max-width: 720px; margin: 0 0 16px; }
.room-body { padding: 18px 22px 22px; }
.room-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 0 14px; }
.room-head h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; }
.room-head h2 svg { color: var(--magenta-text); }
.room-close { display: grid; place-items: center; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 50%; background: none; color: var(--muted); cursor: pointer; }
.room-close:hover { color: var(--text); border-color: var(--orbit); }
.room-full { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 14px; padding: 12px 14px; border: 1px solid rgba(255, 143, 163, .45); border-radius: 14px; background: rgba(255, 143, 163, .07); font-size: 14px; }
.room-full svg { flex: none; margin-top: 1px; color: var(--danger); }
.room-full b { color: var(--danger); }
.room-bars { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 14px 16px; border-radius: 18px; background: var(--bg); }
.room-why { margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.room-sub { margin: 20px 0 8px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.room-src { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.room-src li { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 14px; background: var(--surface-2); }
.room-src li.sum { grid-template-columns: minmax(0, 1fr) auto; margin-top: 4px; padding: 10px; border-top: 1px solid var(--line); border-radius: 0; background: none; }
.room-src .asset-art { width: 40px; height: 40px; }
.room-pic { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--bg); color: var(--magenta-text); }
.room-pic.big { width: 52px; height: 52px; border-radius: 14px; background: var(--surface-2); }
.room-name { display: grid; min-width: 0; }
.room-name small { color: var(--muted); font-size: 12px; }
.room-vals { display: inline-flex; gap: 14px; font-weight: 900; font-variant-numeric: tabular-nums; white-space: nowrap; }
.room-vals > span { display: inline-flex; align-items: center; gap: 4px; }
.room-vals svg { color: var(--magenta-text); }
.room-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); gap: 10px; }
.room-way { display: grid; justify-items: start; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--line); border-radius: 18px; background: var(--bg); }
.room-way .asset-art { width: 52px; height: 52px; }
.room-way small { margin-top: 4px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.room-way b { line-height: 1.35; }
.room-way .btn { margin-top: 6px; }
@media (max-width: 599px) { .room-body { padding: 16px; } .room-bars { gap: 16px; padding: 12px; } .room-bars .cap-label span { display: none; } }

.rooms { position: relative; display: grid; gap: 7px; max-width: 300px; }
.room-row { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto auto; align-items: center; gap: 8px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.room-row svg { color: var(--magenta-text); }
.room-row .meter { max-width: none; height: 4px; }
.room-row b { color: var(--text); font-size: 13px; }
.room-row small { margin-left: -4px; }
.room-row.full svg, .room-row.full b { color: var(--danger); }
.room-row.full .meter i { background: var(--danger); opacity: 1; }

/* The stable as a table (#157, D177; draft 5): picture and name first, the chosen columns after; states as small fields
   with their word, protection and Second Life as symbols, the traits in small type (the sorted one in magenta). The page
   uses the whole width. Wider than the window: picture and name stay, the rest goes sideways; app.js keeps a copy of the
   head on top of the window (.st-head, over the real one) with two arrows and a thin bar to drag. */
main:has(.stable-table) { max-width: none; }
.stable-table { position: relative; margin: 0 0 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.st-scroll { overflow-x: auto; border-radius: 18px; }
.stable-table.js .st-scroll { scrollbar-width: none; }
.stable-table.js .st-scroll::-webkit-scrollbar { display: none; }
.st { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 14px; font-variant-numeric: tabular-nums; }
.st thead th { height: 44px; padding: 0 7px; background: var(--surface-2); color: var(--muted); text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; white-space: nowrap; }
.st thead th:first-child { border-top-left-radius: 17px; }
.st thead th:last-child { border-top-right-radius: 17px; }
.st td, .st tbody th { padding: 6px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; white-space: nowrap; text-align: left; font-weight: 400; }
.st tbody tr:last-child td, .st tbody tr:last-child th { border-bottom: 0; }
.st tbody tr:hover > * { background: var(--surface-hover); }
.st tbody tr:has(.pick input:checked) > * { background: color-mix(in srgb, rgb(224, 75, 224) 8%, var(--surface)); } /* opaque: the fixed column hides what scrolls under it (#185) */
.st .c-who { width: 1%; padding-left: 12px; border-right: 1px solid transparent; background: var(--surface); } /* the line when scrolled does not widen it (#185) */
.st thead .c-who { background: var(--surface-2); }
.st .who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st .who .pick { display: flex; flex: none; }
.st .who .pick input { width: 18px; height: 18px; margin: 0; accent-color: var(--magenta); }
.st .tpic, .st .tpic-sp { flex: none; width: 64px; }
.st thead .tpic-sp { width: 92px; }
.st .tpic .pet { border-radius: 10px; }
.st .tname { display: -webkit-box; width: max-content; max-width: 204px; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; color: var(--text); font-size: 14px; font-weight: 700; line-height: 1.25;
  text-decoration: none; white-space: normal; overflow-wrap: anywhere; }
.st .tname:hover { color: var(--magenta-text); }
.st .sorter { position: relative; display: inline-flex; align-items: center; gap: 4px; height: 44px; color: inherit; text-decoration: none; cursor: pointer; list-style: none; }
.st .sorter::-webkit-details-marker { display: none; }
.st .sorter:hover { color: var(--text); }
.st .sorter.on { color: var(--magenta-text); }
.st .sorter .sb { display: none; }
.st th:hover .sorter .sb { display: inline-flex; position: absolute; right: -15px; opacity: .8; }
.st th.ic, .st td.ic { padding-inline: 5px; text-align: center; }
.st th.ic .sorter { justify-content: center; }
.st .sexplain { display: inline-flex; gap: 1px; color: var(--muted); }
.st .sex { display: inline-grid; place-items: center; width: 22px; height: 22px; }
.st td.num, .st th.num { text-align: right; padding-right: 12px; }
.st td.num { font-weight: 700; }
.st td.num .tip { font-weight: 700; }
.st .tgrp { display: inline-flex; align-items: center; gap: 7px; }
.st .tgrp .gn { max-width: 88px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text); font-size: 13.5px; }
.st .stc { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 3px 8px; border-radius: 10px; background: var(--surface-2); color: var(--faint); cursor: help; }
.st .stc svg { display: block; flex: none; }
.st .stc .cw { display: grid; max-width: 96px; color: inherit; font-size: 13px; font-weight: 700; line-height: 1.15; text-align: left; white-space: normal; }
.st .stc .cw small { color: var(--muted); font-size: 11px; font-weight: 400; }
.st .stc.ok { background: rgba(127, 217, 164, .12); color: var(--ok); }
.st .stc.caution { background: rgba(242, 199, 110, .13); color: var(--caution); }
.st .stc.danger { background: rgba(255, 143, 163, .14); color: var(--danger); }
.st .stc.love { background: rgba(224, 75, 224, .14); color: var(--magenta-text); }
.st .stc.muted { color: var(--muted); }
.st .stc.bare { padding: 3px 4px; background: none; }
.st .stc.bare svg { width: 18px; height: 18px; }
.st td.c-wide .stc { width: 100%; min-width: 0; }
.st td.c-wide .stc .cw { max-width: none; }
.st td.trait { min-width: 62px; max-width: 84px; color: var(--text); font-size: 13px; line-height: 1.25; white-space: normal; }
.st td.trait.on { color: var(--magenta-text); font-weight: 700; }
.st .tlist { display: grid; grid-template-columns: max-content auto; column-gap: 7px; margin: 0; font-size: 11px; line-height: 13px; }
.st .tlist div { display: contents; }
.st .tlist dt { color: var(--muted); }
.st .tlist dd { margin: 0; color: var(--text); white-space: nowrap; }
.st .tlist .on dt, .st .tlist .on dd { color: var(--magenta-text); font-weight: 700; }
.st th.c-traits .chev { display: inline-flex; margin-left: 2px; color: var(--muted); }
.st th.c-traits details { position: relative; }
.st th.c-traits details > summary.sorter { margin: 0; color: inherit; font-size: inherit; font-weight: inherit; }
.st th.c-traits details > summary.sorter.on { color: var(--magenta-text); }
.tpop { left: auto; right: 0; top: calc(100% + 2px); min-width: 190px; text-transform: none; letter-spacing: 0; }
.tpop-title { margin: 4px 10px; color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
/* wider than the window: picture and name stay */
.stable-table.wide .st-scroll .st .c-who { position: sticky; left: 0; z-index: 2; } /* only the real table: the copy of the head keeps its name in place by script (#185) */
.stable-table.wide.scrolled .st .c-who { box-shadow: 6px 0 10px -6px rgba(0, 0, 0, .7); border-right: 1px solid var(--line); }
/* the copy of the head on top of the window, with the arrows and the thin bar */
.st-head { position: sticky; top: 0; z-index: 6; border-radius: 17px 17px 0 0; }
.stable-table.stuck .st-head { box-shadow: 0 10px 24px rgba(0, 0, 0, .55); }
.st-head-in { overflow-x: clip; overflow-y: visible; border-radius: 17px 17px 0 0; }
.st-head .st { table-layout: fixed; width: auto; }
.st-head .st .c-who { position: relative; z-index: 3; }
.stable-table.wide.scrolled .st-head .st .c-who { box-shadow: 6px 0 10px -6px rgba(0, 0, 0, .7); border-right: 1px solid var(--line); }
.st-nav { position: absolute; top: 8px; right: 8px; z-index: 4; display: none; gap: 4px; padding: 2px; border: 1px solid var(--orbit); border-radius: 12px; background: var(--surface); box-shadow: -10px 0 14px var(--surface-2); }
.stable-table.wide .st-nav { display: flex; }
.st-nav button { display: grid; place-items: center; width: 32px; height: 24px; border: 0; border-radius: 9px; background: none; color: var(--text); cursor: pointer; }
.st-nav button:hover { background: var(--surface-2); }
.st-nav button:disabled { color: var(--faint); cursor: default; }
.st-nav button.back svg { transform: rotate(90deg); }
.st-nav button.next svg { transform: rotate(-90deg); }
.st-track { position: absolute; right: 0; bottom: 0; z-index: 4; display: none; height: 6px; cursor: pointer; touch-action: none; }
.stable-table.wide .st-track { display: block; }
.st-track::before { content: ""; position: absolute; inset: 2px 0 0; background: rgba(255, 255, 255, .05); }
.st-track span { position: absolute; top: 2px; bottom: 0; border-radius: 2px; background: #9b7fb8; }
.st-track:hover span, .st-track.drag span { background: var(--magenta-text); }
@media (max-width: 599px) {
  .stable-table { margin-inline: -4px; border-radius: 14px; }
  .st-scroll { border-radius: 14px; }
  .st .c-who { padding-left: 6px; padding-right: 5px; box-shadow: 6px 0 10px -6px rgba(0, 0, 0, .7); border-right: 1px solid var(--line); }
  .st-scroll .st .c-who { position: sticky; left: 0; z-index: 2; }
  .st .who { gap: 5px; }
  .st .tpic { width: 40px; }
  .st thead .tpic-sp { width: 63px; }
  .st .tname { max-width: 104px; font-size: 13.5px; }
  /* #185: no arrows on a phone (a swipe and the thin bar move the table); the traits two by two, so a row is no higher than its picture */
  .stable-table.wide .st-nav { display: none; }
  .st .tlist { width: 100%; grid-template-columns: max-content 1fr max-content 1fr; }
}

/* the button "Columns" in the bar of the table: two ready choices, then each column, the single traits in two rows */
.cpop { left: auto; right: 0; min-width: 280px; }
.fcols .w { color: var(--text); }
.cpop .presets { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin: 2px 2px 6px; }
.cpop .presets a { display: grid; gap: 1px; height: auto; padding: 8px 10px; border: 1px solid var(--line); border-radius: 10px; white-space: normal; font-size: 13.5px; }
.cpop .presets a small { color: var(--muted); font-size: 11.5px; font-weight: 400; line-height: 1.25; }
.cpop .presets a[aria-current="true"] { border-color: var(--magenta-text); background: rgba(224, 75, 224, .1); }
.cpop a.colpick { height: 36px; }
.colpick .box { display: grid; place-items: center; flex: none; width: 18px; height: 18px; border: 1.5px solid var(--orbit); border-radius: 5px; color: transparent; }
.colpick[aria-checked="true"] .box { border-color: var(--magenta); background: var(--magenta); color: var(--on-magenta); }
.cpop .colpick .box svg { color: inherit; }
.colsep { margin: 8px 8px 2px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.colparts { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; }

/* A piece of a special building (#158, D178): its sign (unused green, used, much used in warning colours), a bar like a
   tank gauge (green, yellow below half, red below a quarter) and what is left; where it rests; its controls. */
.gauge { display: grid; gap: 4px; min-width: 0; }
.gauge .wear { justify-self: start; padding: 1px 8px; border-radius: 8px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.wear-unused { background: rgba(127, 217, 164, .14); color: var(--ok); }
.wear-used { background: var(--surface-2); color: var(--muted); }
.wear-worn { background: rgba(255, 160, 110, .16); color: #FFB27A; }
.gauge .meter { max-width: 260px; height: 6px; }
.gauge.g-ok .meter i { background: var(--ok); opacity: .9; }
.gauge.g-caution .meter i { background: var(--caution); opacity: 1; }
.gauge.g-danger .meter i { background: var(--danger); opacity: 1; }
.gauge-text { color: var(--muted); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.gauge-shop { color: var(--muted); font-size: 12.5px; }
.piece-line { margin: 4px 0 12px; }
.piece-state { display: block; margin-top: 4px; color: var(--muted); font-size: 12.5px; }
.piece-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.piece-controls form { margin: 0; }
.animal-gauge { display: block; padding: 2px 0 4px; }
.piece-gift { margin: 0 0 16px; }
.piece-gift h3 { margin: 0 0 6px; font-size: 16px; }

/* The search of the marketplace (#161, D179; draft 1 with the suggestions of draft 2): the kinds as tabs with their
   symbol (on the phone a button with their list), a chosen ware, trait or seller as a chip in the field, the goods of a
   kind as picture buttons, Alle · PKS · L$; the suggestions under the field; on the cards the price in its colour
   (PKS magenta, L$ green), the price of a piece and how it is bought. */
.mtabs a svg { color: var(--magenta-text); }
.msearch { flex-wrap: nowrap; align-items: center; gap: 6px; }
.msearch .fchip { position: relative; z-index: 1; flex: none; display: inline-flex; align-items: center; gap: 6px; height: 28px; margin-left: 34px; padding: 0 8px 0 10px; border-radius: 14px;
  background: rgba(224, 75, 224, .16); color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.msearch .fchip + .fchip { margin-left: 0; }
.msearch .fchip span { color: var(--muted); font-size: 15px; line-height: 1; }
.msearch:has(.fchip) input { padding-left: 12px; }
.msearch:has(.fchip) { border-radius: 12px; background: var(--bg); }
.mkind .kic, .gpop .kic { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--surface-2); color: var(--magenta-text); }
.mgoods { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.gchip { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 10px 0 3px; border: 1px solid var(--line); border-radius: 17px; color: var(--text); text-decoration: none;
  font-size: 13px; font-weight: 700; }
.gchip .asset-art { width: 28px; height: 28px; border-radius: 14px; }
.gchip small { color: var(--muted); font-weight: 400; }
.gchip:hover { border-color: var(--orbit); }
.gchip.on { border-color: var(--magenta-text); background: rgba(224, 75, 224, .12); box-shadow: inset 0 0 0 1px var(--magenta-text); }
.msuggest { position: fixed; z-index: 60; display: grid; gap: 2px; max-height: min(70vh, 460px); overflow-y: auto; padding: 8px; border: 1px solid var(--orbit); border-radius: 16px;
  background: var(--surface); box-shadow: 0 16px 40px rgba(0, 0, 0, .55); }
.msuggest .sg-title { margin: 8px 10px 2px; color: var(--muted); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.msuggest a { display: flex; align-items: center; gap: 10px; padding: 6px 10px; border-radius: 10px; color: var(--text); text-decoration: none; font-size: 14px; }
.msuggest a:hover, .msuggest a.on { background: var(--surface-2); }
.msuggest .sg-text { display: grid; }
.msuggest small { color: var(--muted); font-size: 12px; }
.msuggest mark { background: none; color: var(--magenta-text); font-weight: 700; }
.msuggest .sg-foot { margin: 6px 10px 2px; padding-top: 8px; border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.mbar .fwatch.on { color: var(--magenta-text); border-color: rgba(224, 75, 224, .5); }
.wpop { left: auto; right: 0; min-width: 280px; max-width: min(360px, calc(100vw - 32px)); }
.wpop .wtext { margin: 2px 6px 8px; color: var(--muted); font-size: 13px; white-space: normal; }
.wpop form { margin: 0 4px 6px; }
.wpop .btn { display: inline-flex; gap: 6px; align-items: center; max-width: 100%; white-space: normal; text-align: left; }
.wrow { display: flex; align-items: center; gap: 6px; padding: 2px 4px; border-radius: 9px; }
.wrow.on { background: var(--surface-2); }
.wrow a { flex: 1; height: auto; min-height: 34px; padding: 6px 6px; white-space: normal; font-size: 13.5px; }
.wrow form { margin: 0; }
.wdel { display: grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: 8px; background: none; color: var(--muted); cursor: pointer; }
.wdel:hover { background: var(--surface); color: var(--danger); }
.mcards .mprice { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.mprice b { padding: 2px 9px; border-radius: 9px; font-size: 13px; font-variant-numeric: tabular-nums; }
.mprice b.pks { background: rgba(224, 75, 224, .16); color: var(--magenta-text); }
.mprice b.ls { background: rgba(127, 217, 164, .14); color: var(--ok); }
.mprice small { color: var(--muted); font-size: 12px; }
.mcards .mhow { display: flex; align-items: center; gap: 5px; font-size: 12px; }
.mhow.now { color: var(--ok); }
.mhow.stand { color: var(--muted); }
.tiles-s .mprice small, .tiles-s .mhow { display: none; }

/* The pages of the Tamer Game (#163, D180; drafts of 10.11.2026) in the look of the Tame Spots (D116): the cockpit of a
   host (My Ankhs: credits, the land right now, a card per Ankh, who tames, the latest tames), My tames (bars, the unicorns
   as tiles, the places) and the start page (banner, the popular Tame Spots, "For you", the steps). Bars of a share are
   .meter with its classes w0 … w100 (CSP: no style attributes). */
.hd-page { gap: 22px; }
.hd-hero { min-height: 280px; }
.hd-banner { filter: saturate(1.05); object-position: 50% 40%; }
.hd-hero::after { background: linear-gradient(90deg, rgba(11, 10, 16, .94) 0%, rgba(11, 10, 16, .82) 45%, rgba(11, 10, 16, .35) 100%), linear-gradient(0deg, rgba(11, 10, 16, .7), transparent 60%); }
.tm-hero::after { background: linear-gradient(90deg, rgba(11, 10, 16, .92) 0%, rgba(11, 10, 16, .7) 45%, rgba(11, 10, 16, .05) 100%); }
.hd-card { padding: 18px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); min-width: 0; }
.hd-label { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hd-label svg { color: var(--magenta-text); }
.hd-big { margin: 6px 0 0; font-size: 40px; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; }
.hd-sub { margin: 8px 0 0; color: var(--muted); font-size: 13.5px; }
.hd-sub b { color: var(--text); }
.hd-hint { margin: 10px 0 0; color: var(--faint); font-size: 12.5px; line-height: 1.45; }
.hd-note { color: var(--faint); font-size: 13px; }
.hd-top { display: grid; grid-template-columns: 1.15fr 1.3fr 1fr; gap: 14px; align-items: stretch; }
.hd-packs { display: flex; gap: 8px; margin-top: 14px; }
.hd-pack { flex: 1; display: grid; gap: 1px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface-2); text-align: center; }
.hd-pack b { font-size: 15px; font-variant-numeric: tabular-nums; }
.hd-pack small { color: var(--caution); font-weight: 700; font-size: 12px; }
.hd-now { display: flex; flex-direction: column; }
.hd-herd { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.hd-herd li { display: grid; gap: 4px; justify-items: center; min-width: 0; color: var(--muted); font-size: 11.5px; }
.hd-herd li span:last-child { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-herd .pet { border-radius: 12px; }
.hd-herd li.taming .pet { outline: 2px solid var(--ok); outline-offset: 1px; }
.hd-now .hd-sub:last-child { margin-top: auto; padding-top: 10px; }
.hd-rules { display: flex; flex-direction: column; gap: 10px; }
.hd-kv { display: grid; gap: 8px; margin: 4px 0 0; }
.hd-kv div { display: flex; justify-content: space-between; gap: 10px; align-items: center; font-size: 13.5px; }
.hd-kv dt { color: var(--muted); }
.hd-kv dd { margin: 0; text-align: right; }
.hd-pill { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12.5px; font-weight: 700; }
.hd-pill.ok { background: rgba(127, 217, 164, .12); color: var(--ok); }
.hd-btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 38px; padding: 0 16px; border-radius: 19px; border: 1px solid var(--orbit);
  background: var(--surface-2); color: var(--text); font: 700 14px var(--font); text-decoration: none; cursor: pointer; white-space: nowrap; }
.hd-btn.ghost { background: transparent; }
.hd-btn.ghost:hover { background: var(--surface-hover); }
.hd-btn.primary { border-color: var(--magenta); background: var(--magenta); color: var(--on-magenta); }
.hd-btn.danger { color: var(--danger); border-color: rgba(255, 143, 163, .35); }
.hd-btn small { color: var(--muted); font-weight: 400; }
.hd-h2row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.hd-h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-size: 19px; }
.hd-h2 svg { color: var(--magenta-text); }
.hd-ankhs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.hd-ankh { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); overflow: hidden; }
.hd-ankh.st-live { border-color: rgba(127, 217, 164, .28); }
.hd-ankh.st-off .hd-pic img, .hd-ankh.st-offline .hd-pic img { filter: grayscale(.85) brightness(.6); }
.hd-pic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; background: var(--surface-2); color: var(--faint); overflow: hidden; }
.hd-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hd-pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11, 10, 16, .55), transparent 40%, transparent 70%, rgba(21, 19, 29, .9)); }
.hd-state, .hd-no { position: absolute; top: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 7px; padding: 4px 10px; border-radius: 999px; background: rgba(11, 10, 16, .82); font-size: 12.5px; font-weight: 700; }
.hd-state { left: 12px; }
.hd-no { right: 12px; color: var(--muted); font-weight: 400; }
.hd-body { display: grid; gap: 14px; padding: 4px 18px 18px; }
.hd-titlerow { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; }
.hd-titlerow > div:first-child { display: grid; gap: 3px; min-width: 0; }
.hd-reward { display: grid; justify-items: end; gap: 2px; flex: none; }
.hd-reward .sp-ls { font-size: 22px; }
.hd-reward small { color: var(--faint); font-size: 11.5px; }
.hd-chart { display: grid; gap: 4px; }
.hd-bars { display: block; width: 100%; height: 46px; }
.tm-chart .hd-bars { height: 70px; margin-top: 12px; }
.hd-bars rect.b { fill: var(--magenta); opacity: .72; }
.hd-bars rect.today { fill: var(--magenta-text); }
.hd-bars rect.z { fill: var(--orbit); }
.hd-bars rect:hover { opacity: 1; fill: var(--magenta-text); }
.hd-axis { display: flex; justify-content: space-between; color: var(--faint); font-size: 11px; }
.hd-figs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 0; }
.hd-figs div { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--surface-2); min-width: 0; }
.hd-figs dt { color: var(--faint); font-size: 11.5px; }
.hd-figs dd { margin: 0; font-weight: 900; font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-figs dd.small { font-weight: 400; font-size: 13px; }
.hd-figs dd.small .sp-last { font-size: 13px; color: var(--text); }
.hd-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hd-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12.5px; }
.hd-chips svg { color: var(--faint); }
.hd-actions { display: flex; justify-content: space-between; gap: 10px; padding-top: 12px; border-top: 1px solid var(--line); }
.hd-two { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 14px; align-items: start; }
.hd-who { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.hd-who li { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 6px 0; }
.hd-av { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--surface-2); color: var(--magenta-text); font-weight: 900; }
.hd-whoname { display: grid; gap: 5px; min-width: 0; }
.hd-whoname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.hd-whonum { display: grid; justify-items: end; font-variant-numeric: tabular-nums; }
.hd-whonum small { color: var(--caution); font-size: 12px; }
.hd-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.hd-day { margin: 12px 0 4px; color: var(--faint); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hd-feed { display: grid; margin: 0; padding: 0; list-style: none; }
.hd-feed li { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 6px 0; }
.hd-feed li + li { border-top: 1px solid var(--line); }
.hd-feed .pet { width: 44px; border-radius: 10px; }
.hd-feedmain { display: grid; min-width: 0; }
.hd-feedmain b { font-size: 14px; }
.hd-feedmain small { color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hd-feedend { display: grid; justify-items: end; gap: 1px; }
.hd-feedend .sp-coin { width: 18px; height: 18px; font-size: 8px; }
.hd-feedend small { color: var(--faint); font-size: 12px; font-variant-numeric: tabular-nums; }
.hd-more { margin: 14px 0 0; }

/* My tames */
.tm-top { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; }
.tm-next { display: flex; flex-direction: column; gap: 10px; color: var(--text); text-decoration: none;
  background: radial-gradient(circle at 100% 0%, rgba(191, 0, 191, .28), transparent 60%), var(--surface); }
.tm-next:hover { border-color: var(--orbit); }
.tm-nexttitle { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; }
.tm-next .hd-btn { margin-top: auto; align-self: flex-start; border-color: var(--magenta); background: var(--magenta); color: var(--on-magenta); }
.tm-herd { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.tm-uni { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); overflow: hidden; }
.tm-uni .pet { border-radius: 0; }
.tm-uni-body { display: grid; gap: 3px; padding: 10px 12px 12px; }
.tm-uni-name { display: flex; align-items: center; gap: 5px; margin: 0; font-weight: 700; }
.tm-uni-name svg { color: var(--faint); }
.tm-uni-place { margin: 0; color: var(--muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tm-uni-foot { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin: 4px 0 0; }
.tm-uni-foot .sp-ls, .tm-uni-foot .sp-assets { font-size: 14px; gap: 5px; }
.tm-uni-foot .sp-coin { width: 18px; height: 18px; font-size: 8px; }
.tm-uni-foot .asset-art.chip { width: 22px; height: 22px; }
.tm-uni-foot .asset-art.chip img { width: 100%; height: 100%; object-fit: contain; }
.tm-uni-foot small { color: var(--faint); font-size: 11.5px; white-space: nowrap; }
.tm-rank { grid-template-columns: 34px 64px minmax(0, 1fr) 140px 110px 120px 20px; }
@container sp (max-width: 700px) {
  .hd-top, .hd-two, .tm-top { grid-template-columns: minmax(0, 1fr); }
  .hd-ankhs { grid-template-columns: minmax(0, 1fr); }
  .hd-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-herd { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tm-rank { grid-template-columns: 20px 56px minmax(0, 1fr) auto; }
  .hd-hero { min-height: 0; }
  .hd-big { font-size: 34px; }
}
@container sp (min-width: 701px) and (max-width: 900px) { .tm-herd { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.tg-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.tg-cta .btn { display: inline-flex; align-items: center; gap: 8px; }
.tg-sec { margin-top: 28px; }
.tg-sechead { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.tg-sechead h2 { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 20px; }
.tg-sechead a { color: var(--magenta-text); font-size: 14px; text-decoration: none; white-space: nowrap; }
.tg-spots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tg-spot { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); overflow: hidden; }
.tg-img { position: relative; display: block; aspect-ratio: 16 / 9; background: var(--surface-2); }
.tg-img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-img .sp-medal { position: absolute; top: 10px; left: 10px; }
.tg-body { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px 14px; }
.tg-name { margin: 0; font-weight: 700; font-size: 16px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-meta { margin: 0; color: var(--muted); font-size: 13px; }
.tg-meta b { color: var(--text); }
.tg-body .sp-reward { margin-top: 4px; }
.tg-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.tg-card { display: flex; flex-direction: column; color: var(--text); text-decoration: none; transition: border-color .15s; }
.tg-card:hover { border-color: var(--orbit); }
.tg-card .hd-big small { font-size: 15px; font-weight: 400; color: var(--muted); }
.tg-card .hd-bars { height: 40px; margin-top: 12px; }
.tg-herd { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.tg-herd .pet { border-radius: 12px; }
.tg-credits { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.tg-credits > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.tg-credits svg { color: var(--magenta-text); }
.tg-credits .hd-meter { margin: 0; }
.tg-credits .hd-sub { margin: 0; }
.tg-more { margin-top: auto; padding-top: 14px; color: var(--magenta-text); font-size: 14px; display: inline-flex; align-items: center; gap: 6px; }
.tg-empty { margin: 10px 0 0; font-size: 16px; font-weight: 700; }
.tg-title { margin: 8px 0 0; font-size: 22px; font-weight: 700; line-height: 1.25; }
.tg-facts { display: grid; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; font-size: 14px; }
.tg-facts li { display: flex; align-items: center; gap: 8px; }
.tg-facts svg { color: var(--ok); }
.tg-become { background: linear-gradient(135deg, color-mix(in srgb, var(--magenta) 14%, var(--surface)), var(--surface) 60%); }
.tg-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; }
.tg-steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 12px; row-gap: 2px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-tile); background: var(--surface); }
.tg-steps .tg-n { grid-row: span 2; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--magenta); color: var(--on-magenta); font-weight: 900; }
.tg-steps span:last-child { color: var(--muted); font-size: 13.5px; }
.tg-page > .tg-cards:last-child { margin-top: 14px; }
@media (max-width: 760px) {
  .tg-spots { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 78%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
  .tg-spot { scroll-snap-align: start; }
  .tg-cards, .tg-steps { grid-template-columns: minmax(0, 1fr); }
  .tg-cta .btn { flex: 1 1 auto; justify-content: center; }
}
.hd-top { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
.hd-rules { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 22px; padding: 12px 18px; }
.hd-rule { color: var(--muted); font-size: 13.5px; }
.hd-rule b { color: var(--text); }
.hd-herd { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.hd-herd li { font-size: 12.5px; }
.hd-hero .sp-hero-text { max-width: 820px; }
.hd-banner { filter: blur(5px) saturate(1.1); transform: scale(1.08); }
.hd-state { color: var(--text); }
.hd-hero::after { background: linear-gradient(90deg, rgba(11, 10, 16, .92) 0%, rgba(11, 10, 16, .7) 45%, rgba(11, 10, 16, .05) 100%); }
.hd-pill.warn { background: rgba(242, 199, 110, .12); color: var(--caution); }
.meter.hd-meter { max-width: none; height: 8px; margin-top: 12px; border-radius: 4px; }
.meter.hd-meter i { border-radius: 4px; background: linear-gradient(90deg, var(--magenta), var(--magenta-text)); opacity: 1; }
.meter.hd-meter.low i { background: var(--caution); }
.meter.hd-bar { max-width: none; height: 5px; }
.meter.hd-bar i { background: var(--magenta); opacity: 1; }
.hd-filter a { display: inline-flex; align-items: center; height: 30px; padding: 0 12px; border: 1px solid var(--line); border-radius: 15px; color: var(--muted); font: 700 12.5px var(--font); text-decoration: none; }
.hd-filter a[aria-current] { border-color: var(--magenta); background: rgba(191, 0, 191, .16); color: var(--text); }
.hd-actions { align-items: center; }
.pet.none { display: block; aspect-ratio: 1; border-radius: 10px; background: var(--surface-2); }
.tg-visitor { margin-top: 14px; }
@container sp (max-width: 700px) { .hd-top { grid-template-columns: minmax(0, 1fr); } }

/* The settings of a new Tamer Ankh (#164, D190; draft 1 of #163), since #182 (D193) a panel on the page of the Ankh:
   choices as chips, limits with − / +, the cost of a day in magenta, what waits for the confirmation in caution; the
   buttons stay at the bottom of the screen while the page scrolls. */
.aw-panel { border: 1px solid var(--line); border-radius: 22px; background: var(--side); }
.aw-scroll { padding: 4px 26px 18px; }
.aw-panel .aw-foot { position: sticky; bottom: 0; z-index: 2; border-radius: 0 0 22px 22px; padding: 14px 26px; }
.ak-todo { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border: 1px solid rgba(242, 199, 110, .45); border-radius: 16px; background: rgba(242, 199, 110, .07);
  color: var(--text); font-weight: 700; text-decoration: none; }
.ak-todo svg:first-child { color: var(--caution); }
.ak-todo span { flex: 1; }
.ak-todo:hover { border-color: var(--caution); }
.aw-done { margin: 14px 0 0; }
.aw-sec { display: grid; gap: 10px; padding: 18px 0; border-bottom: 1px solid var(--line); }
.aw-values > .aw-sec:last-child, .aw-acts { border-bottom: 0; }
.aw-t { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 700; font-size: 15px; }
.aw-t svg { color: var(--magenta-text); }
.aw-t label { cursor: pointer; }
.aw-t2 { margin: 0; font-size: 14px; font-weight: 700; }
.aw-d { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.45; }
.aw-tag { padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 11.5px; font-weight: 400; }
.aw-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.aw-row > div { display: grid; gap: 3px; }
.aw-power { padding-top: 14px; }
.aw-switch { flex: none; position: relative; width: 48px; height: 28px; cursor: pointer; }
.aw-switch input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.aw-switch span { position: absolute; inset: 0; border-radius: 14px; background: var(--orbit); transition: background-color .2s; }
.aw-switch span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: var(--text); transition: transform .2s; }
.aw-switch input:checked + span { background: var(--ok); }
.aw-switch input:checked + span::after { transform: translateX(20px); background: var(--bg); }
.aw-switch input:focus-visible + span { outline: 2px solid var(--magenta-text); outline-offset: 2px; }
.aw-switch input:disabled + span { opacity: .45; }
.aw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.aw-chip { position: relative; display: inline-grid; justify-items: center; min-width: 58px; padding: 6px 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface);
  color: var(--text); font: 700 13.5px var(--font); cursor: pointer; }
.aw-chip input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.aw-chip small { color: var(--faint); font-size: 11px; font-weight: 400; }
.aw-chip:has(input:checked) { border-color: var(--magenta); background: rgba(191, 0, 191, .2); box-shadow: inset 0 0 0 1px var(--magenta); }
.aw-chip:has(input:checked) small { color: var(--magenta-text); }
.aw-chip:has(input:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.aw-rewards .aw-chip { min-width: 64px; }
.aw-seg { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.aw-seg .aw-chip { min-width: 0; padding: 8px 14px; border-radius: 19px; }
.aw-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.aw-steps > div { display: grid; gap: 6px; padding: 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--surface); }
.aw-steps > div > span:first-child { color: var(--muted); font-size: 12.5px; }
.aw-step { display: flex; align-items: center; justify-content: space-between; gap: 4px; }
.aw-step select { flex: 1; min-width: 0; height: 32px; padding: 0; border: 0; background: none; color: var(--text); font: 900 20px var(--font); text-align: center; text-align-last: center;
  font-variant-numeric: tabular-nums; appearance: none; cursor: pointer; }
.aw-step select option { background: var(--surface); font-size: 15px; }
.aw-step button { flex: none; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--orbit); background: var(--surface-2); color: var(--text); font: 700 16px var(--font); cursor: pointer; }
.aw-step button:hover { border-color: var(--magenta-text); }
.aw-cost { display: grid; gap: 6px; padding: 12px 14px; border-radius: 14px; background: linear-gradient(135deg, rgba(191, 0, 191, .16), rgba(242, 199, 110, .08)); border: 1px solid rgba(191, 0, 191, .35); }
.aw-cost p { margin: 0; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.aw-cost ul { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; font-size: 14px; color: var(--muted); }
.aw-cost ul b { color: var(--text); font-size: 17px; font-variant-numeric: tabular-nums; }
.aw-cost small { color: var(--muted); font-size: 12.5px; }
.aw-range { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.aw-radar { width: 96px; height: 96px; }
.aw-radar .r0 { fill: none; stroke: var(--orbit); stroke-dasharray: 3 4; }
.aw-radar .r1 { fill: rgba(191, 0, 191, .22); stroke: var(--magenta-text); stroke-width: 1.5; transition: r .2s; }
.aw-radar .c { fill: var(--text); }
.aw-range .aw-chip { min-width: 52px; }
.aw-float { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 14px; align-items: center; }
.aw-preview { display: grid; justify-items: center; gap: 4px; padding: 12px 8px 6px; border-radius: 14px; background: radial-gradient(circle at 50% 120%, #22402f, #0d1a14); }
.aw-floattext { min-height: 34px; color: #80FFCC; font-size: 11.5px; line-height: 1.35; text-align: center; text-shadow: 0 0 6px rgba(0, 0, 0, .8); }
.aw-uni { color: var(--text); }
.aw-uni .pet { width: 64px; border-radius: 10px; background: transparent; }
.aw-float .aw-seg { margin-top: 8px; }
.aw-input { display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--surface); color: var(--faint); }
.aw-input:focus-within { border-color: var(--magenta-text); }
.aw-input input { flex: 1; min-width: 0; height: 100%; padding: 0; border: 0; background: none; color: var(--text); font: 400 14px var(--font); outline: none; }
.aw-wait { margin-top: 12px; padding: 14px 16px; border: 1px solid rgba(242, 199, 110, .45); border-radius: 18px; background: rgba(242, 199, 110, .07); }
.aw-wait .aw-t svg { color: var(--caution); }
.aw-wait .hd-btn { justify-self: start; }
.aw-changes { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
.aw-changes li { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 10px; background: var(--surface-2); font-size: 14px; }
.aw-changes li span { flex: 1 1 auto; color: var(--muted); }
.aw-changes s, .aw-changes svg { color: var(--faint); }
.aw-changes b { color: var(--caution); }
.aw-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr)); gap: 10px; }
.aw-way { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; align-content: start; gap: 4px 12px; padding: 14px; border: 1px solid var(--line); border-radius: 18px;
  background: var(--surface); cursor: pointer; }
.aw-way > input[type="radio"] { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.aw-way-ic { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--surface-2); color: var(--magenta-text); }
.aw-way small { color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.aw-way select { position: relative; z-index: 1; grid-column: 1 / -1; min-width: 0; height: 36px; margin-top: 6px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font: 400 14px var(--font); }
.aw-way:has(input[type="radio"]:checked) { border-color: var(--magenta); background: rgba(191, 0, 191, .12); box-shadow: inset 0 0 0 1px var(--magenta); }
.aw-way:has(input[type="radio"]:focus-visible) { outline: 2px solid var(--text); outline-offset: 2px; }
.aw-form:has(input[name="replace"][value="-1"]:checked) .aw-values { display: none; }
.aw-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 14px 0 0; color: var(--muted); font-size: 13.5px; }
.aw-copy svg { color: var(--magenta-text); }
.aw-copy a { padding: 3px 10px; border: 1px solid var(--line); border-radius: 999px; color: var(--text); font-weight: 700; font-size: 13px; text-decoration: none; }
.aw-copy a:hover, .aw-copy a[aria-current] { border-color: var(--magenta-text); color: var(--magenta-text); }
.aw-acts { gap: 8px; }
.aw-acts .hd-btn { justify-self: start; }
.aw-danger summary { list-style: none; cursor: pointer; }
.aw-danger summary::-webkit-details-marker { display: none; }
.aw-danger[open] { display: grid; gap: 8px; padding: 12px; border: 1px solid rgba(255, 143, 163, .35); border-radius: 16px; }
.aw-danger[open] .hd-btn { justify-self: start; }
.aw-foot { display: grid; gap: 10px; border-top: 1px solid var(--line); background: var(--surface); }
.aw-also { display: flex; flex-wrap: wrap; gap: 8px 18px; }
.aw-check { position: relative; display: inline-flex; align-items: center; gap: 10px; font-size: 14px; cursor: pointer; }
.aw-check input { position: absolute; opacity: 0; width: 22px; height: 22px; margin: 0; cursor: pointer; }
.aw-box { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 6px; border: 1px solid var(--orbit); background: var(--surface-2); color: transparent; }
.aw-check input:checked + .aw-box { border-color: var(--magenta); background: var(--magenta); color: var(--on-magenta); }
.aw-check input:focus-visible + .aw-box { outline: 2px solid var(--magenta-text); outline-offset: 2px; }
.aw-rule { display: flex; gap: 8px; padding: 16px 0 4px; }
.aw-rule svg { flex: none; margin-top: 2px; color: var(--caution); }
.aw-btns { display: flex; justify-content: flex-end; gap: 10px; }
.aw-form[data-dirty] .aw-foot { box-shadow: 0 -1px 0 var(--caution) inset; }
@media (max-width: 599px) {
  .aw-scroll { padding: 4px 16px 16px; }
  .aw-panel .aw-foot { padding: 12px 16px; }
  .aw-steps { gap: 6px; }
  .aw-steps > div { padding: 8px; }
  .aw-step button { width: 26px; height: 26px; }
  .aw-step select { font-size: 17px; }
  .aw-float { grid-template-columns: minmax(0, 1fr); }
  .aw-range { grid-template-columns: 72px minmax(0, 1fr); }
  .aw-radar { width: 72px; height: 72px; }
}

/* Owner Events on My Ankhs (#180, D191): a card per event with its state in colour (runs: green, planned: magenta,
   waits for the confirmation at the Ankh: caution), what it sets, its Ankhs, the most a start costs and the actions. */
.ev-sec { display: grid; gap: 12px; }
.ev-sec .hd-h2row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; }
.ev-sec .note { margin: 0; }
.ev-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; }
.ev-card { display: grid; gap: 8px; align-content: start; padding: 14px 16px; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.ev-card.ev-live { border-color: rgba(127, 217, 164, .45); background: linear-gradient(135deg, rgba(127, 217, 164, .08), var(--surface) 60%); }
.ev-card.ev-plan { border-color: rgba(191, 0, 191, .45); }
.ev-card.ev-wait { border-color: rgba(242, 199, 110, .4); }
.ev-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 10px; }
.ev-top b { display: inline-flex; align-items: center; gap: 7px; font-size: 16px; }
.ev-top b svg { color: var(--magenta-text); }
.ev-state { padding: 2px 10px; border-radius: 999px; background: var(--surface-2); color: var(--muted); font-size: 12.5px; font-weight: 700; }
.ev-live .ev-state { color: var(--ok); background: rgba(127, 217, 164, .12); }
.ev-plan .ev-state { color: var(--magenta-text); background: rgba(191, 0, 191, .14); }
.ev-wait .ev-state { color: var(--caution); background: rgba(242, 199, 110, .1); }
.ev-vals, .ev-ankhs, .ev-cost { margin: 0; color: var(--muted); font-size: 13.5px; }
.ev-ankhs { display: flex; align-items: center; gap: 6px; }
.ev-ankhs svg { color: var(--faint); }
.ev-cost { color: var(--text); }
.ev-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 4px; }
.ev-acts form { display: contents; }
.ev-plan { display: flex !important; flex-wrap: wrap; align-items: center; gap: 8px; }
.ev-at { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-size: 12.5px; }
.ev-at input { height: 36px; padding: 0 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2); color: var(--text); font: 400 13.5px var(--font); color-scheme: dark; }
.ev-hint { display: inline-flex; align-items: center; gap: 6px; color: var(--caution); font-size: 13px; }
.ev-remove { margin: 4px 0 0; }
/* a running Owner Event on the Tame Spots (#180): green like "live", with the minutes left */
.sp-event { display: inline-flex; align-items: center; gap: 4px; height: 20px; margin-right: 4px; padding: 0 8px; border-radius: 10px; background: rgba(127, 217, 164, .16); color: var(--ok);
  font-size: 11px; font-weight: 900; letter-spacing: .02em; white-space: nowrap; vertical-align: 2px; }

/* The page of an Ankh and of an Owner Event on My Ankhs (#182, D193): path, head with the other Ankhs, on the computer
   the card of the Ankh on the left (stays while the settings scroll), the settings on the right; one column on the phone. */
.ap-page { display: grid; gap: 14px; }
.ap-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--muted); font-size: 13px; }
.ap-crumbs a { color: var(--muted); text-decoration: none; }
.ap-crumbs a:hover { color: var(--text); }
.ap-crumbs svg { transform: rotate(-90deg); color: var(--faint); }
.ap-crumbs span { color: var(--text); font-weight: 700; }
.ap-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 20px; }
.ap-head h1 { margin: 4px 0 0; font-weight: 300; font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.6rem); line-height: 1.1; }
.ap-switch { display: flex; flex-wrap: wrap; gap: 6px; }
.ap-switch a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line); border-radius: 16px; color: var(--text); font-size: 13px; font-weight: 700; text-decoration: none; }
.ap-switch a:hover { border-color: var(--magenta-text); }
.ap-grid { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 22px; align-items: start; }
.ap-card .hd-figs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ap-side { position: sticky; top: 18px; }
.ap-card .hd-body { display: grid; gap: 12px; padding: 14px 16px 16px; }
.ap-card .sp-tp { justify-self: start; }
@media (max-width: 899px) {
  .ap-grid { grid-template-columns: minmax(0, 1fr); }
  .ap-side { position: static; }
  .ap-card .hd-chart, .ap-card .hd-figs { display: none; }
}
.ap-one { max-width: 820px; }
.ap-main > .note { margin: 0 0 12px; }

/* My Ankhs lean (#182, D193): the Ankhs that call as rows, the quiet ones folded, who tames and the feed folded with a peek */
.hr-ankhs { display: grid; gap: 12px; }
.hr-count { display: inline-flex; align-items: center; gap: 7px; color: var(--muted); font-size: 13px; font-weight: 700; }
.hr-rows, .hr-qrows, .hr-tiles { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.hr-row { display: grid; grid-template-columns: 64px minmax(170px, 1.4fr) minmax(140px, 1fr) 72px 120px 84px auto; align-items: center; gap: 14px; padding: 8px 12px 8px 8px;
  border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.hr-row.st-live { border-color: rgba(127, 217, 164, .28); }
.hr-row.st-warn { border-color: rgba(242, 199, 110, .4); }
.hr-pic { display: grid; place-items: center; width: 64px; height: 46px; overflow: hidden; border-radius: 11px; background: var(--surface-2); color: var(--magenta-text); }
.hr-pic img { width: 100%; height: 100%; object-fit: cover; }
.hr-name { display: grid; gap: 2px; min-width: 0; }
.hr-name b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.hr-name small { display: inline-flex; align-items: center; gap: 4px; overflow: hidden; color: var(--muted); font-size: 12px; white-space: nowrap; }
.hr-state { display: inline-flex; align-items: center; gap: 7px; min-width: 0; color: var(--muted); font-size: 13px; line-height: 1.25; }
.hr-state .sp-dot { flex: none; }
.hr-row.st-live .hr-state { color: var(--ok); }
.hr-row.st-warn .hr-state { color: var(--caution); }
.hr-bars .hd-bars { display: block; width: 120px; height: 30px; }
.hr-num { display: grid; justify-items: end; color: var(--muted); font-size: 12.5px; white-space: nowrap; }
.hr-num b { color: var(--text); font-size: 16px; }
.hr-num small { font-size: 11.5px; }
.hr-acts { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.hd-btn.small { height: 32px; padding: 0 12px; font-size: 13px; }
.hr-tp { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line); color: var(--muted); }
.hr-tp:hover { color: var(--text); border-color: var(--orbit); }
.hr-old { display: inline-flex; align-items: center; gap: 5px; color: var(--faint); font-size: 12px; }
.hr-quiet { border-top: 1px solid var(--line); padding-top: 10px; }
.hr-quiet summary { display: flex; align-items: center; gap: 10px; padding: 6px 4px; color: var(--muted); font-size: 13.5px; cursor: pointer; list-style: none; }
.hr-quiet summary::-webkit-details-marker { display: none; }
.hr-quiet summary span { flex: 1; }
.hr-quiet summary b { color: var(--text); }
.hr-quiet[open] summary > svg:last-child { transform: rotate(180deg); }
.hr-qrows li { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) auto auto; align-items: center; gap: 14px; padding: 8px 12px; border-radius: 14px; background: var(--bg); }
.hr-qrows .hr-name b { color: var(--muted); font-weight: 700; }
.hr-since { color: var(--faint); font-size: 12.5px; }
.hr-tiles { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hr-tile { display: grid; overflow: hidden; border: 1px solid var(--line); border-radius: 18px; background: var(--surface); }
.hr-tile.st-live { border-color: rgba(127, 217, 164, .28); }
.hr-tpic { position: relative; display: grid; place-items: center; aspect-ratio: 16 / 7; background: var(--surface-2); color: var(--magenta-text); }
.hr-tpic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hr-tpic .hd-state { top: 8px; left: 8px; font-size: 11.5px; padding: 3px 8px; }
.hr-tbody { display: grid; gap: 8px; padding: 10px 12px 12px; }
.hr-tname { display: grid; gap: 2px; margin: 0; min-width: 0; }
.hr-tname b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hr-tname small { color: var(--muted); font-size: 12px; }
.hr-tline { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hr-tline .hr-num { display: block; }
.hr-tacts { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.hr-fold { display: block; }
.hr-fold > summary { display: flex; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.hr-fold > summary::-webkit-details-marker { display: none; }
.hr-fold > summary .hd-h2 { margin: 0; white-space: nowrap; }
.hr-peek { flex: 1; min-width: 0; overflow: hidden; color: var(--muted); font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
.hr-peek b { color: var(--text); }
.hr-fold > summary > svg:last-child { flex: none; color: var(--muted); transition: transform .2s; }
.hr-fold[open] > summary { margin-bottom: 14px; }
.hr-fold[open] > summary > svg:last-child { transform: rotate(180deg); }
.hr-two { align-items: start; }
@media (max-width: 1100px) { .hr-row { grid-template-columns: 56px minmax(0, 1.5fr) minmax(0, 1fr) 64px 96px auto; } .hr-bars { display: none; } }
@media (max-width: 699px) {
  .hr-row { grid-template-columns: 52px minmax(0, 1fr) auto; grid-template-areas: "pic name acts" "pic state num"; row-gap: 4px; }
  .hr-row .hr-pic { grid-area: pic; width: 52px; height: 52px; }
  .hr-row .hr-name { grid-area: name; }
  .hr-row .hr-state { grid-area: state; font-size: 12px; }
  .hr-row .hr-num { grid-area: num; }
  .hr-row .hr-acts { grid-area: acts; }
  .hr-row .hr-rw { display: none; }
  .hr-row .hr-acts .hd-btn { width: 32px; padding: 0; gap: 0; }
  .hr-row .hr-acts .hd-btn span { display: none; }
  .hr-qrows li { grid-template-columns: minmax(0, 1fr) auto; }
  .hr-qrows .hr-since, .hr-qrows .hr-num { display: none; }
  .hr-peek { display: none; }
}