/* Solstone — deepslate, lapis and gold. */
/* Fonts are bundled so Solstone works without internet (SIL OFL, see fonts/). */
@font-face { font-family: "Pixelify Sans"; src: url("fonts/pixelify-sans-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/pixelify-sans-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Pixelify Sans"; src: url("fonts/pixelify-sans-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Atkinson Hyperlegible"; src: url("fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
:root {
  --deepslate: #0f1424;
  /* Glass surfaces: translucent so the night sky behind the app shows through. */
  --tuff: rgba(44, 52, 74, .46);
  --tuff-2: rgba(78, 90, 120, .42);
  --basalt: #3d4559;
  --glass-edge: rgba(255, 255, 255, .11);
  --glass-hi: rgba(255, 255, 255, .14);
  --glass-blur: blur(14px) saturate(140%);
  --well: rgba(6, 8, 14, .42);
  --line: rgba(255, 255, 255, .07);
  --bone: #ebe6d9;
  --muted: #a0a6b0;
  --faint: #737a86;
  --lapis: #4d74d6;
  --lapis-soft: #2f4170;
  --gold: #f2c14e;
  --gold-deep: #b98a1c;
  --copper: #5fb59a;
  --redstone: #e0503f;
  --slot: #8b8b8b;
  --slot-dark: #373737;
  --slot-light: #ffffff;
  --panel-mc: #c6c6c6;

  --font-display: "Pixelify Sans", "Courier New", monospace;
  --font-body: "Atkinson Hyperlegible", system-ui, sans-serif;
  --radius-s: 4px;
  --radius-m: 8px;
  --rail: 232px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: linear-gradient(#0a0e1c 0%, #121a2e 55%, #1b2133 100%) fixed;
  color: var(--bone);
  font: 16px/1.5 var(--font-body);
  -webkit-font-smoothing: antialiased;
}
img.px, .px img { image-rendering: pixelated; }
a { color: inherit; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 600; letter-spacing: .01em; margin: 0; line-height: 1.15; }
h1 { font-size: 2.25rem; }
h2 { font-size: 1.45rem; }
h3 { font-size: 1.1rem; }
p { margin: 0; }
.muted { color: var(--muted); }
.faint { color: var(--faint); }
/* Data numbers use the hyperlegible face: pixel digits like 5/8/S are too easy to misread. */
.num { font-family: var(--font-body); font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ shell */
.shell {
  display: grid; grid-template-columns: var(--rail) minmax(0, 1fr); min-height: 100vh; position: relative; z-index: 1;
}
#app-sky { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; pointer-events: none; z-index: 0; opacity: .9; }
body.logged-out #app-sky { display: none; }
.rail {
  background: linear-gradient(180deg, rgba(20, 25, 40, .62), rgba(14, 18, 30, .7));
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
  border-right: 1px solid var(--glass-edge);
  padding: 18px 12px;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  display: flex; flex-direction: column; gap: 18px;
}
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; padding: 0 6px; }
.brand img { image-rendering: pixelated; border-radius: 3px; }
.brand span { font-family: var(--font-display); font-size: 1.35rem; font-weight: 600; }
.rail-servers { display: flex; flex-direction: column; gap: 4px; }
.rail-item {
  display: grid; grid-template-columns: 36px 1fr; gap: 10px; align-items: center;
  padding: 8px; border-radius: var(--radius-m); text-decoration: none; color: var(--muted);
}
.rail-item:hover { background: rgba(255,255,255,.06); color: var(--bone); }
.rail-item[aria-current="page"] { background: rgba(255,255,255,.09); color: var(--bone); box-shadow: inset 3px 0 0 var(--gold); }
.rail-item .name { font-weight: 700; font-size: .95rem; line-height: 1.2; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item .sub { font-size: .8rem; color: var(--faint); }
.server-icon { width: 36px; height: 36px; border-radius: 4px; image-rendering: pixelated; background: var(--basalt); display: grid; place-items: center; font-family: var(--font-display); color: var(--bone); position: relative; }
.server-icon img { width: 100%; height: 100%; border-radius: 4px; image-rendering: pixelated; }
.status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--faint); display: inline-block; flex: none; }
.server-icon .status-dot { position: absolute; right: -3px; bottom: -3px; border: 2px solid #151a2a; }
.status-dot.on { background: var(--copper); }
.status-dot.crash { background: var(--redstone); }

.rail-foot { margin-top: auto; padding: 0 4px; }
.channel { font-size: .75rem; font-weight: 700; color: #151a2a; background: var(--gold); padding: 2px 8px; border-radius: 999px; }

main { padding: 28px clamp(16px, 4vw, 48px) 64px; max-width: 1280px; width: 100%; min-width: 0; outline: none; }
main:focus, main:focus-visible { outline: none; }

/* ------------------------------------------------------------ server header */
.server-head { display: grid; grid-template-columns: 72px 1fr auto; gap: 20px; align-items: center; margin-bottom: 22px; }
.server-head .big-icon { width: 72px; height: 72px; border-radius: 6px; image-rendering: pixelated; background: var(--basalt); display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; }
.server-head .big-icon img { width: 72px; height: 72px; border-radius: 6px; image-rendering: pixelated; }
.motd { font-family: var(--font-display); font-size: 1.05rem; margin-top: 4px; color: var(--muted); }
.facts { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; font-size: .9rem; color: var(--muted); }
.facts b { color: var(--bone); font-weight: 700; }
.state-pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px 4px 10px; border-radius: 999px; background: var(--tuff); font-weight: 700; font-size: .9rem; }
.head-actions { display: flex; gap: 8px; align-items: center; }
.icon-btn { background: var(--tuff); border: 1px solid var(--basalt); border-radius: var(--radius-m); padding: 8px 12px; cursor: pointer; }
.icon-btn:hover { background: var(--tuff-2); }

.tabs { display: flex; gap: 4px; border-bottom: 2px solid rgba(255,255,255,.1); margin-bottom: 24px; overflow-x: auto; }
.tabs a {
  font-family: var(--font-display); font-size: 1.05rem; text-decoration: none; color: var(--muted);
  padding: 10px 14px 9px; border-bottom: 3px solid transparent; margin-bottom: -2px; white-space: nowrap;
}
.tabs a:hover { color: var(--bone); }
.tabs a[aria-current="page"] { color: var(--bone); border-bottom-color: var(--gold); }

.section { margin-bottom: 36px; }
.section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.panel { background: var(--tuff); border-radius: var(--radius-m); padding: 18px; }
.empty { background: var(--tuff); border: 2px dashed var(--basalt); border-radius: var(--radius-m); padding: 28px; color: var(--muted); }
.empty h3 { color: var(--bone); margin-bottom: 6px; }
.empty code, .kv code { background: var(--well); padding: 1px 6px; border-radius: 3px; font-size: .9em; }
.notice { background: rgba(90, 66, 20, .45); border-left: 4px solid var(--gold); padding: 10px 14px; border-radius: var(--radius-s); margin-bottom: 18px; font-size: .92rem; }

/* ------------------------------------------------------------ glass
   Larger surfaces get a soft blur, a light top edge and a faint sheen, like the sign-in card.
   Small repeated tiles (advancements, feed rows) stay translucent without blur to keep
   scrolling smooth. */
.panel, .server-card, .player-card, .board, .stat-strip, .table-wrap, .general-grid, .rules, .empty,
.tl-session, .mod, .where-row, .adv, .pl-row, .glass {
  border: 1px solid var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px rgba(0, 0, 0, .18);
  background-image: linear-gradient(160deg, rgba(255,255,255,.06), rgba(255,255,255,0) 55%);
}
.panel, .server-card, .player-card, .board, .stat-strip, .table-wrap, .general-grid, .rules, .glass {
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
}
.empty { border-style: dashed; border-color: rgba(255,255,255,.16); }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --tuff: rgba(36, 42, 60, .92); --tuff-2: rgba(58, 66, 88, .95); }
}

/* ------------------------------------------------------------ home */
.home-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.server-card { display: grid; grid-template-columns: 56px 1fr; gap: 14px; padding: 18px; background: var(--tuff); border-radius: var(--radius-m); text-decoration: none; border: 1px solid transparent; }
.server-card:hover { border-color: rgba(255,255,255,.24); }
.server-card .server-icon { width: 56px; height: 56px; }
.server-card h2 { font-size: 1.25rem; }
.who { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.who img { width: 24px; height: 24px; border-radius: 3px; image-rendering: pixelated; }

/* ------------------------------------------------------------ players */
.player-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.player-card {
  display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center;
  padding: 14px; background: var(--tuff); border-radius: var(--radius-m); text-decoration: none; border: 1px solid transparent;
}
.player-card:hover { border-color: rgba(255,255,255,.24); }
.player-card.is-online { box-shadow: inset 3px 0 0 var(--copper), inset 0 1px 0 var(--glass-hi), 0 10px 30px rgba(0,0,0,.18); }
.head { width: 56px; height: 56px; border-radius: 4px; image-rendering: pixelated; background: var(--basalt); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.6rem; overflow: hidden; }
.head img { width: 100%; height: 100%; image-rendering: pixelated; }
.player-card .pname { font-family: var(--font-display); font-size: 1.25rem; line-height: 1.1; display: flex; align-items: center; gap: 8px; }
.player-card .meta { font-size: .85rem; color: var(--muted); margin-top: 2px; }
.player-card .line { display: flex; gap: 12px; margin-top: 6px; font-size: .85rem; color: var(--muted); align-items: center; }
.lvl { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; padding: 0 6px; height: 22px; border-radius: 3px; background: #2b2a1c; color: var(--gold); font-family: var(--font-display); font-size: .95rem; text-shadow: 1px 1px 0 #3f3000; }
.op-badge { font-family: var(--font-body); font-size: .7rem; font-weight: 700; background: var(--lapis-soft); color: #c9d6ff; padding: 1px 6px; border-radius: 3px; }

/* ------------------------------------------------------------ overview: players beside activity */
.overview { display: grid; grid-template-columns: minmax(260px, 330px) minmax(0, 1fr); gap: 26px; align-items: start; }
.ov-side { position: sticky; top: 18px; max-height: calc(100vh - 36px); overflow-y: auto; padding-right: 2px; }
.pl-group { display: grid; gap: 6px; margin-bottom: 16px; }
.pl-label { font-size: .78rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 0 2px 2px; }
.pl-none { margin: 0 2px 14px; font-size: .92rem; }
.pl-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px 10px;
  background-color: var(--tuff); border-radius: var(--radius-m); text-decoration: none; }
.pl-row:hover { border-color: rgba(255,255,255,.24); }
.pl-row.is-online { box-shadow: inset 3px 0 0 var(--copper), inset 0 1px 0 var(--glass-hi); background-color: rgba(48, 74, 70, .42); }
.head.sm { width: 40px; height: 40px; font-size: 1.1rem; }
.pr-main { min-width: 0; }
.pr-name { font-family: var(--font-display); font-size: 1.08rem; line-height: 1.15; display: flex; align-items: center; gap: 6px; }
.pr-name .lvl { min-width: 24px; height: 18px; font-size: .8rem; }
.pr-sub { display: flex; flex-wrap: wrap; gap: 2px 10px; font-size: .8rem; color: var(--muted); margin-top: 2px; }
.pr-sub .live-tag { font-weight: 700; }
.pr-val { font-weight: 700; font-size: .9rem; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.1; }
.pr-val small { display: block; font-weight: 400; color: var(--faint); font-size: .72rem; }

/* ------------------------------------------------------------ player page */
.back { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); text-decoration: none; margin-bottom: 14px; font-size: .95rem; }
.back:hover { color: var(--bone); }
.player-hero { display: grid; grid-template-columns: 150px 1fr; gap: 28px; align-items: end; margin-bottom: 26px; }
.body-render { width: 150px; height: 240px; display: grid; place-items: end center; }
.body-render img { max-width: 100%; max-height: 100%; image-rendering: pixelated; filter: drop-shadow(0 10px 8px rgba(0,0,0,.35)); }
.body-render .fallback { width: 120px; height: 120px; }
.player-hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.presence { display: flex; flex-wrap: wrap; gap: 8px 16px; align-items: center; margin-top: 8px; color: var(--muted); font-size: .95rem; }
.live-tag { display: inline-flex; align-items: center; gap: 6px; color: var(--copper); font-weight: 700; }
.live-tag .status-dot { animation: pulse 2s infinite; }
@keyframes pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .live-tag .status-dot { animation: none; } }

.vitals { display: grid; grid-template-columns: auto auto; gap: 6px 26px; margin-top: 18px; justify-content: start; }
.hud-row { display: flex; gap: 1px; align-items: center; }
.hud-row img, .hud-row svg { width: 20px; height: 20px; image-rendering: pixelated; }
.hud-row.food { flex-direction: row-reverse; justify-content: flex-end; }
.xp { grid-column: 1 / -1; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; max-width: 420px; }
.xp .lvl-num { font-family: var(--font-display); font-size: 1.6rem; color: #80ff20; text-shadow: 2px 2px 0 #1a3a00; min-width: 2ch; text-align: center; }
.xp-bar { height: 10px; background: #1b1d10; border: 2px solid #000; position: relative; }
.xp-bar > span { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#b8f05a, #7ec61c); }

.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { background: var(--tuff); border-radius: 999px; padding: 4px 12px; font-size: .88rem; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.chip b { color: var(--bone); }
.chip img { width: 18px; height: 18px; image-rendering: pixelated; }

.stat-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 1px; background: var(--line); border-radius: var(--radius-m); overflow: hidden; margin-bottom: 30px; }
.stat-strip > div { background: rgba(30, 36, 54, .5); padding: 14px 16px; }
.stat-strip .v { font-weight: 700; font-size: 1.55rem; line-height: 1.15; font-variant-numeric: tabular-nums; }
.stat-strip .k { font-size: .82rem; color: var(--muted); }

/* ------------------------------------------------------------ Minecraft inventory */
.inv-layout { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.mc-panel {
  background: var(--panel-mc); color: #3f3f3f; padding: 12px 14px 14px; border-radius: 6px;
  box-shadow: inset 3px 3px 0 #fff, inset -3px -3px 0 #555, 0 0 0 2px #000;
  display: inline-block;
}
.mc-panel h3 { font-family: var(--font-display); font-weight: 500; font-size: 1rem; color: #404040; margin: 0 0 6px 2px; }
.mc-grid { display: grid; grid-template-columns: repeat(9, var(--slot-size, 48px)); gap: 0; }
.inv-top { display: grid; grid-template-columns: var(--slot-size, 48px) 1fr; gap: 14px; margin-bottom: 12px; align-items: end; }
.armor-col { display: grid; gap: 0; }
.inv-stage { display: flex; align-items: flex-end; gap: 10px; }
.inv-stage .mini-body { width: 96px; height: 150px; background: #000; display: grid; place-items: end center; box-shadow: inset 2px 2px 0 #373737, inset -2px -2px 0 #fff; }
.inv-stage .mini-body img { max-height: 140px; image-rendering: pixelated; }
.hotbar-gap { height: 10px; }
.slot {
  width: var(--slot-size, 48px); height: var(--slot-size, 48px); position: relative;
  background: var(--slot);
  box-shadow: inset 2px 2px 0 var(--slot-dark), inset -2px -2px 0 var(--slot-light);
  display: grid; place-items: center; cursor: default;
}
.slot.filled { cursor: help; }
.slot.filled:hover { background: #a6a6a6; }
.slot.selected { box-shadow: inset 2px 2px 0 var(--slot-dark), inset -2px -2px 0 var(--slot-light), 0 0 0 3px #fff, 0 0 0 5px #000; z-index: 1; }
.slot .ghost { width: 70%; height: 70%; opacity: .28; image-rendering: pixelated; }
.item { width: 78%; height: 78%; position: relative; display: grid; place-items: center; }
.item img { width: 100%; height: 100%; image-rendering: pixelated; }
.item .placeholder {
  width: 100%; height: 100%; border-radius: 3px; display: grid; place-items: center;
  font-family: var(--font-display); font-size: .78rem; color: #fff; text-shadow: 1px 1px 0 #000; line-height: 1; text-align: center;
  background: var(--ph, #6b5a8e); box-shadow: inset 2px 2px 0 rgba(255,255,255,.25), inset -2px -2px 0 rgba(0,0,0,.3);
}
.item.glint::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(190,120,255,.55) 45%, rgba(255,200,255,.25) 52%, transparent 65%);
  background-size: 250% 250%; mix-blend-mode: screen;
  -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
  animation: glint 3.2s linear infinite;
}
@keyframes glint { from { background-position: 120% 0; } to { background-position: -120% 0; } }
@media (prefers-reduced-motion: reduce) { .item.glint::after { animation: none; background-position: 50% 0; } }
.count {
  position: absolute; right: 3px; bottom: 0; font-family: var(--font-display); font-size: 1.05rem; line-height: 1;
  color: #fff; text-shadow: 2px 2px 0 #3f3f3f; pointer-events: none;
}
.dura { position: absolute; left: 6px; right: 6px; bottom: 5px; height: 4px; background: #000; pointer-events: none; }
.dura > span { display: block; height: 2px; }
.container-mark { position: absolute; top: 3px; right: 4px; width: 8px; height: 8px; background: var(--gold); box-shadow: 1px 1px 0 #000; pointer-events: none; }

/* Minecraft tooltip */
.mc-tooltip {
  position: fixed; z-index: 100; pointer-events: none; max-width: 340px;
  background: rgba(16, 0, 16, .94); color: #fff; padding: 7px 10px 8px;
  border: 2px solid #120212; box-shadow: inset 0 0 0 2px #2a0b5e;
  font-family: var(--font-display); font-size: 1rem; line-height: 1.3; border-radius: 3px;
}
.mc-tooltip .t-name { color: #fff; }
.mc-tooltip .t-name.ench { color: #55ffff; }
.mc-tooltip .t-name.custom { font-style: italic; }
.mc-tooltip .t-ench { color: #aaaaaa; }
.mc-tooltip .t-lore { color: #aa00aa; font-style: italic; }
.mc-tooltip .t-dim { color: #555555; font-size: .85rem; }
.mc-tooltip .t-blue { color: #5555ff; }
.mc-tooltip .t-neg { color: #ff5555; }
.mc-tooltip .t-attrs { margin-top: 4px; }
.mod-slots { margin-top: 16px; display: block; width: fit-content; }
.mc-tooltip .t-hint { color: #ffaa00; font-size: .85rem; margin-top: 3px; }
.mc-tooltip .mini-grid { display: grid; grid-template-columns: repeat(9, 26px); margin-top: 6px; --slot-size: 26px; }
.mc-tooltip .mini-grid .count { font-size: .7rem; right: 1px; }
.mc-tooltip .mini-grid .slot { box-shadow: inset 1px 1px 0 var(--slot-dark), inset -1px -1px 0 var(--slot-light); }

/* ------------------------------------------------------------ stats */
.toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px; }
.input, select.input {
  background: var(--well); border: 1px solid var(--basalt); border-radius: var(--radius-m); color: var(--bone);
  padding: 9px 12px; font: inherit; min-width: 0;
}
.input:focus { border-color: var(--lapis); outline: none; }
.seg { display: inline-flex; background: var(--well); border-radius: var(--radius-m); padding: 3px; gap: 2px; flex-wrap: wrap; }
.seg button { border: 0; background: none; padding: 6px 12px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 700; font-size: .9rem; }
.seg button[aria-pressed="true"] { background: var(--tuff-2); color: var(--bone); }
table.data { width: 100%; border-collapse: collapse; font-size: .95rem; }
table.data th { text-align: right; font-weight: 700; color: var(--muted); font-size: .82rem; padding: 8px 10px; border-bottom: 1px solid var(--basalt); white-space: nowrap; cursor: pointer; user-select: none; }
table.data th:first-child, table.data td:first-child { text-align: left; }
table.data th[aria-sort] { color: var(--bone); }
table.data td { padding: 6px 10px; border-bottom: 1px solid var(--line); text-align: right; font-variant-numeric: tabular-nums; }
table.data td.zero { color: #4f5661; }
table.data tr:hover td { background: var(--line); }
.namecell { display: flex; align-items: center; gap: 10px; }
.namecell .item { width: 28px; height: 28px; flex: none; }
.namecell .item .placeholder { font-size: .55rem; }
.table-wrap { overflow-x: auto; background: var(--tuff); border-radius: var(--radius-m); padding: 6px 8px; }

.general-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 0 28px; background: var(--tuff); border-radius: var(--radius-m); padding: 8px 18px; }
.general-grid .row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: .95rem; }
.general-grid .row span:last-child { font-weight: 700; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ advancements */
.adv-cats { display: grid; gap: 28px; }
.adv-cat-head { display: grid; grid-template-columns: 1fr auto; gap: 6px 16px; align-items: center; margin-bottom: 12px; }
.adv-progress { grid-column: 1 / -1; height: 6px; background: var(--well); border-radius: 3px; overflow: hidden; }
.adv-progress span { display: block; height: 100%; background: var(--gold); }
.adv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.adv { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: center; padding: 10px; background: var(--tuff); border-radius: var(--radius-m); }
.adv.locked { opacity: .55; }
.adv .frame { width: 46px; height: 46px; display: grid; place-items: center; background: #7a7a7a; box-shadow: inset 2px 2px 0 #b5b5b5, inset -2px -2px 0 #3d3d3d; }
.adv .frame .item { width: 30px; height: 30px; }
.adv.done .frame { background: #c99a2e; box-shadow: inset 2px 2px 0 #f5d77d, inset -2px -2px 0 #7a5410; }
.adv .frame.goal { border-radius: 14px; }
.adv .frame.challenge { clip-path: polygon(15% 0, 85% 0, 100% 15%, 100% 85%, 85% 100%, 15% 100%, 0 85%, 0 15%); }
.adv .frame.challenge { background: #6e4f86; }
.adv.done .frame.challenge { background: #a04fbf; box-shadow: inset 2px 2px 0 #d895f0, inset -2px -2px 0 #4f1e66; }
.adv .t { font-weight: 700; font-size: .95rem; line-height: 1.25; }
.adv .d { font-size: .82rem; color: var(--muted); line-height: 1.3; }
.adv .when { font-size: .75rem; color: var(--faint); margin-top: 2px; }

/* ------------------------------------------------------------ leaderboards */
.boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.board { background: var(--tuff); border-radius: var(--radius-m); padding: 16px 18px; }
.board h3 { margin-bottom: 10px; }
.board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.board li { display: grid; grid-template-columns: 22px 28px 1fr auto; gap: 10px; align-items: center; }
.board li .rank { font-weight: 700; color: var(--faint); text-align: right; }
.board li:first-child .rank { color: var(--gold); }
.board li img, .board li .mini-head { width: 28px; height: 28px; border-radius: 3px; image-rendering: pixelated; }
.board li a { text-decoration: none; font-weight: 700; }
.board li .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.bar-bg { grid-column: 3 / -1; height: 4px; background: var(--well); border-radius: 2px; margin-top: -4px; }
.bar-bg span { display: block; height: 100%; border-radius: 2px; background: var(--lapis); }
.board li:first-child .bar-bg span { background: var(--gold); }

/* ------------------------------------------------------------ world */
.world-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 20px; margin-bottom: 30px; }
.sky { border-radius: var(--radius-m); padding: 22px; position: relative; overflow: hidden; min-height: 190px; display: flex; flex-direction: column; justify-content: flex-end; min-width: 0; }
.sky .orb { position: absolute; width: 46px; height: 46px; image-rendering: pixelated; }
.sky h2 { font-size: 2.2rem; }
.sky .sub { color: rgba(255,255,255,.85); }
.sky .debug { margin-top: 10px; font-size: .85rem; }
.sky .debug summary { cursor: pointer; color: rgba(255,255,255,.85); font-weight: 700; }
.sky .debug pre { white-space: pre-wrap; overflow-wrap: anywhere; background: rgba(0,0,0,.35); padding: 10px; border-radius: 6px; max-height: 260px; overflow: auto; font: .8rem/1.45 ui-monospace, monospace; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; font-size: .95rem; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; overflow-wrap: anywhere; }
.copy { background: none; border: 1px solid var(--basalt); border-radius: 4px; padding: 0 6px; font-size: .78rem; margin-left: 6px; cursor: pointer; color: var(--muted); }
.copy:hover { color: var(--bone); }
.map-frame { width: 100%; height: min(70vh, 640px); border: 0; border-radius: var(--radius-m); background: #000; display: block; }
.where { display: grid; gap: 8px; }
.where-row { display: grid; grid-template-columns: 32px 1fr auto; gap: 12px; align-items: center; padding: 10px 12px; background: var(--tuff); border-radius: var(--radius-m); text-decoration: none; }
.where-row img, .where-row .mini-head { width: 32px; height: 32px; border-radius: 3px; image-rendering: pixelated; }
.coords { color: var(--muted); font-variant-numeric: tabular-nums; font-size: .92rem; }
.dim-tag { font-size: .78rem; padding: 2px 8px; border-radius: 999px; font-weight: 700; }
.dim-overworld { background: #23402a; color: #8fe3a3; }
.dim-the_nether { background: #4a1f1d; color: #ff9d8f; }
.dim-the_end { background: #33294a; color: #d7c6ff; }
.dim-other { background: var(--tuff-2); color: var(--muted); }
.dims { display: grid; gap: 10px; }
.dim-bar { display: grid; grid-template-columns: 130px 1fr auto; gap: 12px; align-items: center; font-size: .92rem; }
.dim-bar .bar-bg { grid-column: auto; margin: 0; height: 10px; border-radius: 5px; }
.rules { columns: 2 260px; column-gap: 28px; background: var(--tuff); border-radius: var(--radius-m); padding: 10px 18px; }
.rules div { break-inside: avoid; display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--line); border-top: 0; box-shadow: none; background: none; font-size: .9rem; }
.rules .on { color: var(--copper); font-weight: 700; }
.rules .off { color: var(--faint); }

/* ------------------------------------------------------------ mods */
.mods { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.mod { background: var(--tuff); border-radius: var(--radius-m); padding: 14px 16px; }
.mod .mn { font-weight: 700; display: flex; justify-content: space-between; gap: 10px; }
.mod .mv { color: var(--faint); font-weight: 400; font-size: .88rem; white-space: nowrap; }
.mod p { color: var(--muted); font-size: .88rem; margin-top: 4px; }

/* ------------------------------------------------------------ modal / toast */
.modal-backdrop { position: fixed; inset: 0; background: rgba(6,8,16,.55); display: grid; place-items: center; z-index: 50; padding: 16px; }
.modal { background: linear-gradient(160deg, rgba(48, 56, 80, .78), rgba(26, 31, 48, .86)); border: 1px solid var(--glass-edge); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-radius: 10px; padding: 22px; width: min(520px, 100%); max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.modal h2 { margin-bottom: 14px; }
.modal label { display: grid; gap: 4px; margin-bottom: 14px; font-weight: 700; font-size: .92rem; }
.modal label small { font-weight: 400; color: var(--muted); }
.modal .actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px; }
.btn { border: 0; border-radius: var(--radius-m); padding: 9px 16px; font-weight: 700; cursor: pointer; background: var(--tuff-2); }
.btn.primary { background: var(--lapis); color: #fff; }
.btn:hover { filter: brightness(1.1); }
.check { display: flex !important; grid-template-columns: none; align-items: center; gap: 8px; }
.toast { position: fixed; top: calc(14px + env(safe-area-inset-top, 0px)); left: 50%; transform: translateX(-50%); background: rgba(16, 20, 32, .88); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--basalt); padding: 10px 16px; border-radius: var(--radius-m); z-index: 120; font-size: .92rem; }

.skeleton { color: var(--faint); padding: 40px 0; }

/* ------------------------------------------------------------ rail footer */
.rail-foot { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.rail-btn { background: none; border: 0; color: var(--muted); cursor: pointer; padding: 8px; border-radius: var(--radius-m); font-weight: 700; font-size: .9rem; width: 100%; text-align: left; }
.rail-btn:hover { background: var(--tuff); color: var(--bone); }
a.rail-btn { text-decoration: none; display: block; }
a.rail-btn[hidden] { display: none; }

/* ------------------------------------------------------------ charts */
.chart { width: 100%; min-height: 60px; }
.chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.chart .grid { stroke: rgba(255,255,255,.08); stroke-width: 1; }
.chart .axis { fill: var(--faint); font: 12px var(--font-body); }
.chart .line { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.chart .down { fill: rgba(224, 80, 63, .12); }
.chart .target { stroke: var(--muted); stroke-dasharray: 4 4; stroke-width: 1; }
.chart .cross { stroke: var(--muted); stroke-width: 1; }
.chart .dot { stroke: var(--tuff); stroke-width: 2; }
.chart .hit { fill: transparent; cursor: crosshair; }
.chart-tip { position: fixed; z-index: 90; pointer-events: none; background: rgba(16, 20, 32, .9); border: 1px solid var(--basalt); border-radius: var(--radius-m); padding: 8px 10px; font-size: .88rem; box-shadow: 0 8px 24px rgba(0,0,0,.4); min-width: 140px; }
.chart-tip .tt-when { color: var(--muted); font-size: .8rem; margin-bottom: 2px; }
.chart-tip .tt-val { font-weight: 700; }
.chart-tip .tt-row { display: grid; grid-template-columns: 10px 1fr auto; gap: 8px; align-items: center; }
.chart-tip .tt-row b { font-variant-numeric: tabular-nums; }
.sw { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 4px 0 10px; font-size: .88rem; color: var(--muted); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.today-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.today-row .chip { background: var(--tuff-2); }
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 16px; }
.charts h3 { margin-bottom: 8px; }
.stat-strip .status { font-size: .82rem; font-weight: 700; margin-top: 4px; }
.status.good { color: var(--copper); }
.status.warn { color: var(--gold); }
.status.bad { color: var(--redstone); }
.two-col { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; }

/* ------------------------------------------------------------ feed + sessions */
.feed { list-style: none; margin: 0; padding: 0; background: var(--tuff); border-radius: var(--radius-m); padding: 6px 0; }
.feed-day { font-family: var(--font-display); color: var(--muted); padding: 10px 16px 4px; font-size: .95rem; }
.feed-item { display: grid; grid-template-columns: 22px 70px 1fr; gap: 8px; padding: 6px 16px; align-items: baseline; font-size: .93rem; }
.feed-item:hover { background: var(--line); }
.feed-empty { padding: 16px; color: var(--muted); }
.ev-icon { text-align: center; color: var(--faint); }
.ev-join .ev-icon { color: var(--copper); }
.ev-leave .ev-icon { color: var(--faint); }
.ev-death .ev-icon { color: var(--redstone); }
.ev-advancement .ev-icon { color: var(--gold); }
.ev-server .ev-icon { color: var(--lapis); }
.ev-time { color: var(--faint); font-size: .82rem; font-variant-numeric: tabular-nums; }
.ev-msg { overflow-wrap: anywhere; }
.ev-chat .ev-msg b { color: #c9d6ff; }
.adv-name { color: #8fe36f; }
.btn.more { margin-top: 10px; }
.timeline { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.timeline > .feed-day { padding: 12px 2px 0; }
.tl-session { background: var(--tuff); border-radius: var(--radius-m); box-shadow: inset 4px 0 0 var(--pc); padding: 12px 16px 10px 18px; }
.tl-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; }
.tl-who { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; }
.tl-who img, .tl-who .mini-head { width: 26px; height: 26px; border-radius: 3px; image-rendering: pixelated; }
.tl-who b { color: var(--bone); }
.tl-range { color: var(--muted); font-variant-numeric: tabular-nums; display: inline-flex; gap: 8px; align-items: center; }
.tl-dur { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.tl-sum { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: .86rem; color: var(--muted); }
.cnt span { margin-right: 2px; }
.cnt.ev-death span { color: var(--redstone); }
.cnt.ev-advancement span { color: var(--gold); }
.nested { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.09); padding-top: 4px; }
.nested .feed-item { padding: 4px 0; grid-template-columns: 22px 66px 1fr; }
.nested .feed-item:hover { background: none; }
.tl-group { box-shadow: none; position: relative; }
.tl-group::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; border-radius: var(--radius-m) 0 0 var(--radius-m); background: var(--stripe); }
.tl-together { font-family: var(--font-display); font-size: 1.02rem; }
.tl-people { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 8px; }
.tl-each { font-size: .85rem; font-weight: 400; }
.tl-group .ev-join .ev-msg, .tl-group .ev-leave .ev-msg { color: var(--muted); }
.tl-loose { padding: 2px 16px; }
.tl-loose .nested { border-top: 0; margin: 0; padding: 0; }
.tl-loose .feed-item { color: var(--muted); }
/* bundled routine lines (catches, game moments): one line that opens */
.nested .feed-item.ev-bundle { display: block; padding: 2px 0; }
.ev-bundle summary { display: grid; grid-template-columns: 22px auto 1fr; gap: 8px; align-items: baseline; cursor: pointer; padding: 2px 0; list-style: none; }
.ev-bundle summary::-webkit-details-marker { display: none; }
.ev-bundle summary .ev-msg::after { content: " ▸"; color: var(--faint); }
.ev-bundle details[open] summary .ev-msg::after { content: " ▾"; }
.ev-bundle summary:hover .ev-msg b, .ev-bundle summary:focus-visible .ev-msg b { text-decoration: underline; }
.ev-bundle .nested { margin: 2px 0 6px 30px; padding-left: 10px; border-left: 2px solid var(--line); }
.link-btn { background: none; border: 0; color: #9fb6f0; cursor: pointer; padding: 4px 0; font-weight: 700; font-size: .88rem; }
.link-btn:hover { text-decoration: underline; }
.toggle { display: inline-flex !important; align-items: center; gap: 8px; font-weight: 700; font-size: .92rem; color: var(--muted); cursor: pointer; }
.sessions { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sessions li { display: flex; gap: 10px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .92rem; flex-wrap: wrap; }
.sessions li .muted { flex: 1; min-width: 160px; }
.sessions .dur { font-weight: 700; font-variant-numeric: tabular-nums; }
fieldset.checks { border: 1px solid var(--basalt); border-radius: var(--radius-m); padding: 10px 14px 4px; margin: 0 0 14px; }
fieldset.checks legend { font-weight: 700; font-size: .92rem; padding: 0 4px; }
fieldset.checks .check { font-weight: 400; margin-bottom: 8px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.limits { display: grid; gap: 6px; margin-bottom: 8px; }
.limit-row { display: grid !important; grid-template-columns: 1fr 110px auto; align-items: center; gap: 10px; margin: 0 !important; font-weight: 700; }
.limit-row .input { padding: 6px 10px; }
.digest-preview { white-space: pre-wrap; background: var(--well); border-radius: var(--radius-m); padding: 10px 12px; font: .88rem/1.5 var(--font-body); margin: 6px 0 10px; }
.warn-fact, .warn-fact b { color: var(--gold) !important; }
.modal .actions { align-items: center; }

/* ------------------------------------------------------------ accounts */
body.logged-out .shell { display: none; }
#login-root[hidden] { display: none; }
#login-root { min-height: 100vh; display: grid; place-items: center; padding: 32px 16px 18vh; position: relative; overflow: hidden;
  background: linear-gradient(#0a0e1c 0%, #141a2c 55%, #1d2233 100%); }
#login-sky { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; pointer-events: none; }
.login-wrap { position: relative; z-index: 1; width: min(400px, 100%); display: grid; gap: 14px; }
.login-status[hidden] { display: none; }
.login-status { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; padding: 14px 18px;
  border-radius: 14px; text-decoration: none; background-color: rgba(255,255,255,.05); }
.login-status:hover { border-color: rgba(255,255,255,.26); }
.login-status small { display: block; color: var(--muted); font-size: .85rem; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .login-card, .login-status { background: rgba(40, 45, 58, .94); }
}
.login-card { width: 100%; border-radius: 14px; padding: 28px; display: grid; gap: 12px; position: relative;
  /* Frosted glass: the fireworks show through, softly blurred. */
  background: linear-gradient(160deg, rgba(255,255,255,.13) 0%, rgba(255,255,255,.05) 45%, rgba(255,255,255,.08) 100%);
  backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: 0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.22), inset 0 -1px 0 rgba(0,0,0,.25); }
.login-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.10) 0%, transparent 32%); }
.login-card img { image-rendering: pixelated; border-radius: 6px; width: 64px; height: 64px; filter: drop-shadow(0 0 14px rgba(255,150,40,.35)); }
.login-title h1 { font-size: 2.1rem; }
.tagline { color: rgba(235,230,217,.72); font-size: .95rem; margin-top: 2px; }
.login-card label { display: grid; gap: 4px; font-weight: 700; font-size: .92rem; }
.login-card .input { background: rgba(10,12,18,.45); border-color: rgba(255,255,255,.14); }
.login-card .input:focus { border-color: #f2a43a; box-shadow: 0 0 0 3px rgba(242,164,58,.18); }
.login-error { color: #ffb3a8; min-height: 1.2em; font-size: .9rem; }
.admin-only { display: none !important; }
body.is-admin .admin-only { display: block !important; }
.account { position: relative; width: 100%; }
.account-menu { position: fixed; min-width: 200px; background: rgba(16, 20, 32, .86); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--basalt); border-radius: var(--radius-m); padding: 6px; z-index: 200; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
body.logged-out .account-menu { display: none; }
.account-menu button { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 6px; cursor: pointer; }
.account-menu button:hover { background: var(--tuff-2); }
.account-role { padding: 6px 10px 8px; color: var(--muted); font-size: .82rem; border-bottom: 1px solid var(--basalt); margin-bottom: 4px; }

/* ------------------------------------------------------------ buttons and small inputs */
.btn.danger { background: #6b2a24; color: #ffd9d3; }
.btn.sm { padding: 6px 10px; font-size: .86rem; }
.btn:disabled { opacity: .55; cursor: default; }
.input.sm { padding: 6px 8px; font-size: .88rem; }
.input.grow { flex: 1; min-width: 120px; }
.num-in { width: 80px; }
.small { font-size: .85rem; }
.btn-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.chip-btn { border: 0; cursor: pointer; font: inherit; font-size: .85rem; }
.chip-btn:hover { background: var(--tuff-2); color: var(--bone); }
.chip-x { background: none; border: 0; color: var(--muted); cursor: pointer; font-size: 1rem; line-height: 1; padding: 0 0 0 4px; }
.chip-x:hover { color: #ff9d8f; }

/* ------------------------------------------------------------ control */
.ctl-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; margin-bottom: 20px; }
.ctl-top h3, .ctl-side h3 { margin-bottom: 10px; }
.ctl-state { margin-bottom: 10px; }
.bc-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.bc-form .check { grid-column: 1 / -1; display: flex; gap: 8px; align-items: center; color: var(--muted); }
.ctl-main { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 20px; margin-bottom: 30px; align-items: start; }
.ctl-side { display: grid; gap: 16px; }
.console { background: #0e1013; border-radius: var(--radius-m) var(--radius-m) 0 0; height: 420px; overflow-y: auto; padding: 10px 12px; font: .8rem/1.5 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; color: #c8ccd3; border: 1px solid var(--line); border-bottom: 0; }
.console .ln { white-space: pre-wrap; overflow-wrap: anywhere; }
.console .warn { color: #e6c06a; }
.console .err { color: #ff8a7a; }
.console .chat { color: #b9c9ff; }
.console .join { color: #8fe3a3; }
.console .cmd { color: var(--gold); margin-top: 4px; }
.console .reply { color: #fff; }
.console .sys { color: var(--faint); text-align: center; }
.cmd-form { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; align-items: center; background: #0e1013; border: 1px solid var(--line); border-radius: 0 0 var(--radius-m) var(--radius-m); padding: 8px 8px 8px 12px; margin-bottom: 10px; }
.cmd-form span { color: var(--gold); font-family: ui-monospace, monospace; }
.cmd-form input { background: none; border: 0; color: var(--bone); font: .9rem ui-monospace, monospace; outline: none; min-width: 0; }
.ctl-row { display: grid; gap: 6px; margin-bottom: 12px; }
.ctl-row > span { font-size: .85rem; color: var(--muted); font-weight: 700; }
.ctl-row .seg { width: fit-content; }
.rules-ctl { display: grid; gap: 2px; }
.switch-row { display: flex !important; justify-content: space-between; align-items: center; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; margin: 0 !important; font-weight: 400 !important; cursor: pointer; }
.switch-row input[type="checkbox"] { appearance: none; width: 38px; height: 22px; border-radius: 11px; background: var(--basalt); position: relative; cursor: pointer; flex: none; transition: background .15s; }
.switch-row input[type="checkbox"]::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--bone); transition: transform .15s; }
.switch-row input[type="checkbox"]:checked { background: var(--copper); }
.switch-row input[type="checkbox"]:checked::after { transform: translateX(16px); }
@media (prefers-reduced-motion: reduce) { .switch-row input, .switch-row input::after { transition: none; } }
.ctl-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 340px), 1fr)); gap: 12px; }
.ctl-player { display: grid; gap: 8px; }
.cp-head { display: flex; align-items: center; gap: 10px; font-size: 1.05rem; }
.cp-head img { width: 32px; height: 32px; border-radius: 4px; image-rendering: pixelated; }
.ctl-player form { margin: 0; }
.lists { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.lists h3 { margin-bottom: 8px; }
.lists .chips { margin-top: 0; }
.bed-form { display: grid; gap: 4px; max-width: 640px; }
.bed-form > label { display: grid; gap: 4px; font-weight: 700; font-size: .92rem; margin-bottom: 10px; }
.bed-form > label small { font-weight: 400; color: var(--muted); }
.bed-form .check { font-weight: 400; display: flex; gap: 8px; align-items: center; }
.bed-form .row2 label { display: grid; gap: 4px; font-weight: 700; font-size: .92rem; margin-bottom: 10px; }
.day-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.day-checks .check { margin-bottom: 6px; }
.audit { list-style: none; margin: 0; padding: 0; display: grid; }
.audit li { display: grid; grid-template-columns: 150px 110px 1fr; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: .9rem; align-items: baseline; }
.audit li.failed .a-what { color: #ff9d8f; }
.audit .a-time { color: var(--faint); font-size: .82rem; }
.audit .a-who { font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
.audit code { background: var(--well); padding: 1px 6px; border-radius: 3px; font-size: .85em; overflow-wrap: anywhere; }
.audit .a-result { display: block; color: var(--muted); font-size: .82rem; margin-top: 2px; overflow-wrap: anywhere; }
.users-table td { vertical-align: middle; }
.users-table td, .users-table th { text-align: left !important; }
.row-actions { display: flex; gap: 6px; justify-content: flex-end; }
.add-user { margin-top: 14px; }
.add-user h3 { margin-bottom: 10px; }
.add-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 10px; align-items: end; }
.add-grid label { display: grid; gap: 4px; font-weight: 700; font-size: .9rem; }
.add-grid label small { font-weight: 400; color: var(--muted); }

/* ------------------------------------------------------------ responsive */
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); background: none; }
  .rail { min-width: 0; position: static; height: auto; flex-direction: row; align-items: center; padding: 10px 12px; overflow-x: auto; gap: 12px; }
  .brand span { display: none; }
  .rail-servers { flex-direction: row; }
  .rail-item { grid-template-columns: 36px; padding: 4px; }
  .rail-item > div:last-child { display: none; }
  .rail-foot { margin: 0 0 0 auto; }
  .world-top { grid-template-columns: 1fr; }
  .two-col { grid-template-columns: 1fr; }
  .overview { grid-template-columns: 1fr; }
  .ov-side { position: static; max-height: none; overflow: visible; }
  .ctl-top, .ctl-main, .lists { grid-template-columns: 1fr; }
  .add-grid { grid-template-columns: 1fr; }
  .audit li { grid-template-columns: 1fr; gap: 2px; }
  .account { width: auto; }
  .rail-foot { flex-direction: row; align-items: center; }
  .rail-btn span { display: none; }
}
@media (max-width: 640px) {
  main { padding-top: 18px; }
  h1 { font-size: 1.8rem; }
  .server-head { grid-template-columns: 52px 1fr; gap: 14px; }
  .server-head .big-icon, .server-head .big-icon img { width: 52px; height: 52px; }
  .head-actions { grid-column: 1 / -1; }
  .player-hero { grid-template-columns: 90px 1fr; gap: 16px; align-items: center; }
  .body-render { width: 90px; height: 150px; }
  .mc-panel { --slot-size: calc((100vw - 64px) / 9); padding: 10px; }
  .inv-stage .mini-body { display: none; }
  .vitals { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------ public status page (big screen) */
body.status-page { min-height: 100vh; }
#status-sky { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; pointer-events: none; z-index: 0; }
.sp { position: relative; z-index: 1; max-width: 1680px; margin: 0 auto; padding: 18px clamp(16px, 3vw, 40px) 48px; }
.sp-top { display: flex; align-items: center; gap: 18px; margin-bottom: 18px; flex-wrap: wrap; }
.sp-servers { display: flex; gap: 6px; flex-wrap: wrap; flex: 1; }
.sp-servers a { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; text-decoration: none; color: var(--muted);
  background: rgba(255,255,255,.05); border: 1px solid var(--glass-edge); font-weight: 700; font-size: .92rem; }
.sp-servers a[aria-current="page"] { color: var(--bone); background: rgba(255,255,255,.12); }
.sp-servers a b { background: rgba(95,181,154,.25); color: #9fe3c9; border-radius: 999px; padding: 0 7px; font-size: .8rem; }
.sp-right { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.sp-updated { display: inline-flex; align-items: center; gap: 8px; font-size: .88rem; color: var(--muted); }
.sp-updated .status-dot { animation: pulse 2s infinite; }
.sp-btn { background: rgba(255,255,255,.06); border: 1px solid var(--glass-edge); border-radius: var(--radius-m); padding: 6px 12px; cursor: pointer;
  text-decoration: none; font-weight: 700; font-size: .9rem; color: var(--bone); }
.sp-btn:hover { background: rgba(255,255,255,.12); }
.sp-loading { padding: 40px 0; }
.sp-hero { border-radius: 16px; padding: 20px 22px; display: grid; gap: 18px; margin-bottom: 18px; }
.sp-hero-id { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.sp-icon { width: 64px; height: 64px; border-radius: 8px; background: var(--basalt); display: grid; place-items: center; font-family: var(--font-display); font-size: 2rem; overflow: hidden; }
.sp-icon img { width: 100%; height: 100%; image-rendering: pixelated; }
.sp-hero h1 { font-size: clamp(1.8rem, 3.2vw, 2.8rem); }
.state-pill.live { color: var(--copper); }
.sp-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.sp-tile { background: rgba(8,10,18,.32); border: 1px solid var(--line); border-radius: 12px; padding: 12px 16px; }
.sp-tile .v { font-weight: 700; font-size: clamp(1.4rem, 2.2vw, 2rem); line-height: 1.15; font-variant-numeric: tabular-nums; }
.sp-tile .v.sm { font-size: clamp(1.1rem, 1.6vw, 1.4rem); }
.sp-tile .v small { font-size: .55em; color: var(--muted); font-weight: 700; }
.sp-tile .k { color: var(--muted); font-size: .88rem; margin-top: 2px; }
.sky-tile { background: linear-gradient(135deg, rgba(95,142,232,.35), rgba(169,200,255,.12)); }
.sky-tile.night { background: linear-gradient(135deg, rgba(11,18,48,.6), rgba(29,42,85,.4)); }
.sp-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr); gap: 18px; align-items: start; }
.sp-col { display: grid; gap: 18px; min-width: 0; }
.sp-players { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 430px), 1fr)); gap: 16px; }
.sp-player { border-radius: 16px; padding: 18px; display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 18px; align-items: start; }
.sp-players.solo .sp-player { grid-template-columns: 150px minmax(0, 1fr); }
/* five or more online: smaller cards, two to a row, so everyone fits on a screen or two */
.sp-players.many { grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 12px; align-items: start; }
.sp-players.many .sp-player { grid-template-columns: 64px minmax(0, 1fr); padding: 12px; gap: 12px; border-radius: 12px; }
.sp-players.many .sp-body { min-height: 0; }
.sp-players.many .sp-body img { max-height: 120px; }
.sp-players.many .sp-body .face { --s: 56px !important; }
.sp-players.many .sp-info h2 { font-size: 1.15rem; overflow-wrap: anywhere; }
.sp-players.many .sp-vitals { margin-top: 8px; gap: 4px; }
.sp-players.many .hud-row.hearts { max-width: calc(10 * 15px); }
.sp-players.many .hud-row img, .sp-players.many .hud-row svg { width: 14px; height: 14px; }
.sp-players.many .sp-info .chips, .sp-players.many .sp-gear { margin-top: 8px; }
.sp-body { display: grid; place-items: end center; min-height: 180px; }
.sp-body img { max-width: 100%; max-height: 230px; image-rendering: pixelated; filter: drop-shadow(0 10px 10px rgba(0,0,0,.4)); }
.sp-body img.fallback { width: 88px; height: 88px; border-radius: 6px; }
.sp-info h2 { font-size: clamp(1.5rem, 2.4vw, 2.1rem); display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sp-info h2 .lvl { font-size: 1.05rem; height: 26px; }
.sp-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; color: var(--muted); font-size: .9rem; margin-top: 4px; }
.sp-vitals { display: grid; gap: 6px; margin-top: 12px; }
.sp-vitals .xp { grid-column: auto; max-width: 300px; }
.hud-row.hearts { flex-wrap: wrap; max-width: calc(10 * 21px); }
.hp-num { font-weight: 700; font-size: .85rem; margin-left: 8px; }
.sp-info .chips { margin-top: 12px; }
.sp-gear { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; margin-top: 12px; }
.sp-held { display: inline-flex; align-items: center; gap: 10px; }
.sp-held small { display: block; color: var(--faint); font-size: .75rem; line-height: 1.1; }
.sp-held b { font-size: .95rem; }
.sp-armor { display: inline-flex; gap: 4px; }
.sp-item { width: 34px; height: 34px; border-radius: 6px; background: rgba(8,10,18,.4); border: 1px solid var(--line); display: grid; place-items: center; position: relative; flex: none; }
.sp-item img { width: 26px; height: 26px; image-rendering: pixelated; }
.sp-item.empty { opacity: .35; }
.sp-item.missing::before { content: "?"; color: var(--faint); font-weight: 700; }
.sp-item.glint::after { content: ""; position: absolute; inset: 4px; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(190,120,255,.55) 45%, rgba(255,200,255,.25) 52%, transparent 65%);
  background-size: 250% 250%; mix-blend-mode: screen; -webkit-mask: var(--mask) center / contain no-repeat; mask: var(--mask) center / contain no-repeat;
  animation: glint 3.2s linear infinite; }
.sp-effects { margin-top: 8px; }
.sp-empty { border-radius: 16px; padding: 28px; }
.sp-empty h2 { font-size: clamp(1.5rem, 2.4vw, 2rem); margin-bottom: 6px; }
.sp-recent-wrap { border-radius: 16px; }
.sp-recently { margin-top: 18px; }
.sp-recently h3 { font-size: 1rem; color: var(--muted); margin-bottom: 10px; }
.sp-recently ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 18px; }
.sp-recently li { display: flex; align-items: center; gap: 10px; }
.sp-recently img { width: 32px; height: 32px; border-radius: 4px; image-rendering: pixelated; }
.sp-recently small { display: block; color: var(--faint); font-size: .78rem; }
.sp-panel { border-radius: 16px; padding: 16px 18px; }
.sp-h { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.sp-h h2 { font-size: 1.25rem; }
.sp-h a { font-size: .85rem; }
.sp-map canvas { display: block; width: 100%; aspect-ratio: 4 / 3; border-radius: 10px; border: 1px solid var(--line); }
.sp-dims { margin-bottom: 10px; }
.sp-webmap { width: 100%; height: 420px; border: 0; border-radius: 10px; background: #000; display: block; }
.sp-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.sp-feed li { display: grid; grid-template-columns: 22px 86px 1fr; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: .92rem; align-items: baseline; }
.sp-feed li:last-child { border-bottom: 0; }
.sp-off { position: relative; z-index: 1; width: min(420px, calc(100% - 32px)); margin: 18vh auto 0; padding: 28px; border-radius: 16px; display: grid; gap: 12px; justify-items: start; }
.sp-off img { image-rendering: pixelated; border-radius: 6px; }
@media (max-width: 1100px) { .sp-grid { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  .sp-hero-id { grid-template-columns: 48px minmax(0, 1fr); }
  .sp-hero-id .state-pill { grid-column: 1 / -1; justify-self: start; }
  .sp-icon { width: 48px; height: 48px; }
  .sp-player, .sp-players.solo .sp-player { grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding: 14px; }
  .sp-body { min-height: 120px; }
  .sp-feed li { grid-template-columns: 20px 70px 1fr; }
  .sp-updated { display: none; }
}

/* ------------------------------------------------------------ player heads (cut from the skin) */
.face { position: relative; display: inline-block; flex: none; width: var(--s); height: var(--s); border-radius: 3px; overflow: hidden;
  background: var(--basalt); vertical-align: middle; }
.face::after { content: ""; position: absolute; inset: 0; image-rendering: pixelated; background-repeat: no-repeat;
  background-image: var(--skin), var(--skin), var(--skin2), var(--skin2); background-size: calc(var(--s) * 8) auto;
  background-position: calc(var(--s) * -5) calc(var(--s) * -1), calc(var(--s) * -1) calc(var(--s) * -1),
    calc(var(--s) * -5) calc(var(--s) * -1), calc(var(--s) * -1) calc(var(--s) * -1); }
.face-init { position: absolute; inset: 0; display: grid; place-items: center; font-family: var(--font-display);
  font-size: calc(var(--s) * .5); color: var(--muted); }
.who .face { margin-right: 2px; }

/* ------------------------------------------------------------ fireworks control */
.sky-ctl { position: fixed; right: 16px; bottom: 16px; z-index: 40; display: flex; gap: 4px; padding: 4px; border-radius: 999px; background-color: rgba(16, 20, 32, .55); }
.sky-ctl button { border: 0; background: none; cursor: pointer; border-radius: 999px; padding: 6px 10px; font-weight: 700; font-size: .85rem; color: var(--muted);
  display: inline-flex; align-items: center; gap: 8px; }
.sky-ctl button:hover { background: rgba(255,255,255,.08); color: var(--bone); }
.sky-launch { font-size: 1.05rem !important; padding: 4px 10px !important; }
.sky-sw { width: 28px; height: 16px; border-radius: 8px; background: var(--basalt); position: relative; transition: background .15s; }
.sky-sw::after { content: ""; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--bone); transition: transform .15s; }
.sky-auto[aria-pressed="true"] { color: var(--bone); }
.sky-auto[aria-pressed="true"] .sky-sw { background: var(--copper); }
.sky-auto[aria-pressed="true"] .sky-sw::after { transform: translateX(12px); }
body.logged-out .sky-ctl { display: none; }
@media (prefers-reduced-motion: reduce) { .sky-sw, .sky-sw::after { transition: none; } }
@media (max-width: 640px) { .sky-ctl { right: 10px; bottom: 10px; } .sky-auto span:last-child { display: none; } }

/* ------------------------------------------------------------ fireworks settings */
.fw-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 18px; margin-bottom: 14px; }
.fw-kind { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.fw-kind .check { font-weight: 400; font-size: .92rem; }
.fw-try { padding: 2px 9px; font-size: .75rem; }
.fw-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.fw-row > span { min-width: 110px; font-weight: 700; font-size: .92rem; }
.fw-colors { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid rgba(255,255,255,.15); background: var(--c); cursor: pointer; opacity: .3; }
.fw-swatch[aria-pressed="true"] { opacity: 1; border-color: #fff; box-shadow: 0 0 10px var(--c); }

/* ------------------------------------------------------------ firework editor */
.fwe-head { margin-bottom: 18px; }
.fwe-head p { max-width: 760px; margin-top: 6px; }
.fwe { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(340px, 1fr); gap: 20px; align-items: start; }
.fwe-left { display: grid; gap: 16px; position: sticky; top: 18px; }
.fwe-preview { border-radius: 14px; overflow: hidden; padding: 0; background-color: rgba(8, 11, 22, .55); }
.fwe-preview canvas { display: block; width: 100%; aspect-ratio: 16 / 10; image-rendering: pixelated;
  background: linear-gradient(#0a0e1c 0%, #141a2c 60%, #1d2233 100%); }
.fwe-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; border-top: 1px solid var(--line); }
.fwe-bar .btn.primary { font-size: 1.02rem; padding: 10px 18px; }
.fwe-loopck { font-weight: 700; font-size: .9rem; color: var(--muted); }
.fwe-save { display: grid; gap: 10px; }
.fwe-save > label:first-child { display: grid; gap: 4px; font-weight: 700; font-size: .92rem; }
.fwe-gallery .section-head { margin-bottom: 8px; }
#fwe-list { display: grid; gap: 6px; }
.fwe-card { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 12px; align-items: center; padding: 10px 12px;
  background-color: var(--tuff); border: 1px solid var(--glass-edge); border-radius: var(--radius-m); }
.fwe-card.current { border-color: var(--gold); }
.fwe-card-main { display: grid; gap: 2px; min-width: 0; }
.fwe-card-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.fwe-card-acts .check { font-weight: 700; color: var(--muted); }
.fwe-dots { display: flex; gap: 4px; margin-top: 2px; }
.fwe-dots i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.fwe-controls { display: grid; gap: 14px; }
.fwe-sec h3 { margin-bottom: 12px; }
.fwe-patterns { display: grid; grid-template-columns: repeat(auto-fill, minmax(86px, 1fr)); gap: 6px; }
.fwe-patterns button { display: grid; justify-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--radius-m); cursor: pointer;
  background: var(--well); border: 1px solid var(--line); font-weight: 700; font-size: .85rem; color: var(--muted); }
.fwe-patterns button span { font-size: 1.3rem; line-height: 1.2; }
.fwe-patterns button[aria-pressed="true"] { border-color: var(--gold); color: var(--bone); background: rgba(242,193,78,.12); }
.fwe-sliders { display: grid; gap: 10px; }
.fwe-slider { display: grid; grid-template-columns: 1fr auto; gap: 2px 10px; font-size: .9rem; font-weight: 700; }
.fwe-slider b { font-weight: 700; color: var(--gold); font-variant-numeric: tabular-nums; }
.fwe-slider input { grid-column: 1 / -1; width: 100%; accent-color: var(--gold); }
.fwe-colors { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.fwe-color { display: inline-flex; align-items: center; gap: 2px; }
.fwe-color input[type=color] { width: 46px; height: 38px; border: 1px solid var(--line); border-radius: 8px; background: none; padding: 2px; cursor: pointer; }
.fwe-dyes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.fw-swatch.sm { width: 22px; height: 22px; opacity: .9; box-shadow: none; border-color: rgba(255,255,255,.2); }
.fwe-modes { margin-bottom: 6px; }
.fwe-painter { margin-top: 14px; display: grid; gap: 10px; }
.fwe-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.fwe-brush { width: 32px; height: 32px; border-radius: 8px; border: 2px solid rgba(255,255,255,.18); background: var(--c); cursor: pointer; }
.fwe-brush.eraser { background: var(--well); color: var(--muted); font-size: 1rem; }
.fwe-brush[aria-pressed="true"] { border-color: #fff; box-shadow: 0 0 0 2px var(--gold); }
.fwe-grid { --cell: min(15px, calc((100vw - 90px) / var(--n))); display: grid; grid-template-columns: repeat(var(--n), var(--cell));
  width: fit-content; background: #05070d; border: 1px solid var(--line); touch-action: none; user-select: none; cursor: crosshair; }
.fwe-grid span { width: var(--cell); height: var(--cell); box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); }
.fwe-grid span.on { box-shadow: inset 0 0 0 1px rgba(0,0,0,.25); }
.fwe-stamps { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
@media (max-width: 1100px) { .fwe { grid-template-columns: 1fr; } .fwe-left { position: static; } }
body.on-editor .sky-ctl { display: none; }

.fwe-launches { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 10px; }
.fwe-styles, .fwe-frames { margin-bottom: 10px; }
.fwe-sec > .check { margin: 4px 0 12px; font-weight: 700; font-size: .9rem; }
.fwe-stage { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 10px 12px; margin-bottom: 10px; background: var(--well); display: grid; gap: 10px; }
.fwe-stage-head { display: flex; justify-content: space-between; align-items: center; }
.fwe-actions { display: flex; flex-wrap: wrap; gap: 6px; }
.fwe-actions button { border: 1px solid var(--line); background: rgba(255,255,255,.04); border-radius: 999px; padding: 5px 12px; cursor: pointer; font-weight: 700; font-size: .85rem; color: var(--muted); }
.fwe-actions button[aria-pressed="true"] { border-color: var(--gold); color: var(--bone); background: rgba(242,193,78,.12); }
.fwe-select { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: .9rem; }
.fwe-grid span.ghost { background: rgba(255,255,255,.12); }

/* ------------------------------------------------------------ show bar: sounds, music, hide */
.sky-ctl { transition: opacity .4s; }
.sky-ctl.faded { opacity: 0; }
.sky-ctl .sky-sound, .sky-ctl .sky-music, .sky-ctl .sky-hide { font-size: 1rem; padding: 4px 9px; }
.sky-ctl .sky-music.playing { color: var(--gold); text-shadow: 0 0 8px rgba(242,193,78,.6); }
.sky-ctl button[hidden] { display: none; }
.music-pop { position: fixed; z-index: 45; width: min(320px, calc(100vw - 20px)); border-radius: 14px; padding: 14px; display: grid; gap: 10px;
  background-color: rgba(16, 20, 32, .82); }
.music-pop[hidden] { display: none; }
.mp-now { display: grid; gap: 2px; }
.mp-now b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mp-ctl { display: flex; gap: 6px; align-items: center; }
.mp-ctl button { border: 1px solid var(--line); background: rgba(255,255,255,.05); border-radius: 999px; width: 38px; height: 38px; cursor: pointer; font-size: 1rem; }
.mp-ctl .mp-play { width: 46px; height: 46px; font-size: 1.2rem; background: var(--lapis); border-color: transparent; }
.mp-ctl button[aria-pressed="true"] { border-color: var(--gold); }
.mp-vol { display: grid; grid-template-columns: 22px 1fr; align-items: center; gap: 6px; }
.mp-vol input { width: 100%; accent-color: var(--gold); }
.mp-list { margin: 0; padding: 0; list-style: none; max-height: 200px; overflow-y: auto; display: grid; gap: 2px; counter-reset: t; }
.mp-list button { width: 100%; text-align: left; background: none; border: 0; color: var(--muted); padding: 5px 8px; border-radius: 6px; cursor: pointer; font-size: .88rem; }
.mp-list button:hover { background: rgba(255,255,255,.06); color: var(--bone); }
.mp-list button[aria-current="true"] { color: var(--gold); font-weight: 700; }
.fw-countdown { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; pointer-events: none;
  font-family: var(--font-display); font-size: min(38vw, 340px); color: #fff; text-shadow: 0 0 40px rgba(255, 210, 120, .8), 0 8px 0 rgba(0,0,0,.35); }
.fw-countdown.msg { font-size: min(9vw, 96px); text-align: center; padding: 0 20px; }
.fw-countdown[hidden] { display: none; }
body.ui-hidden .shell, body.ui-hidden .sp, body.ui-hidden #login-root, body.ui-hidden .music-pop { display: none !important; }
body.ui-hidden #app-sky { opacity: 1; }
/* While watching the sky, the pointer hides only when the mouse has been still (the bar fades then too). */
body.ui-hidden.pointer-idle, body.ui-hidden.pointer-idle * { cursor: none; }

/* editor tabs; the preview stays in view while you scroll */
.fwe-head .tabs { margin: 10px 0 12px; }
.fwe-tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 2px; margin-bottom: 12px; position: sticky; top: 0; z-index: 4; padding: 6px; border-radius: 12px;
  background: rgba(16, 20, 32, .75); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border: 1px solid var(--glass-edge); }
.fwe-tabs button { flex: none; border: 0; background: none; color: var(--muted); font-weight: 700; font-size: .9rem; padding: 7px 11px; border-radius: 8px; cursor: pointer; }
.fwe-tabs button[aria-selected="true"] { background: rgba(242,193,78,.16); color: var(--bone); box-shadow: inset 0 -2px 0 var(--gold); }
.fwe-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 12px; }
.fwe-row > span { min-width: 90px; font-weight: 700; font-size: .92rem; }
@media (max-width: 1100px) {
  .fwe-left { display: contents; }
  .fwe-preview { position: sticky; top: 0; z-index: 6; order: 0; }
  .fwe-preview canvas { aspect-ratio: 16 / 8; }
  .fwe-controls { order: 1; }
  .fwe-save { order: 2; }
  .fwe-gallery { order: 3; }
  .fwe-tabs { position: static; }
  .fwe-bar { gap: 6px; padding: 8px; }
  .fwe-bar .btn { padding: 7px 10px; font-size: .88rem; }
  .fwe-bar .btn.primary { padding: 8px 14px; }
  .fwe-loopck { font-size: .82rem; }
}

/* ------------------------------------------------------------ firework settings page */
.fws-tabs { margin-bottom: 16px; }
.fws-events { display: grid; gap: 4px; }
.fws-event { padding: 8px 0; border-bottom: 1px solid var(--line); }
.fws-ev-head { border-bottom: 0 !important; }
.fws-ev-opts { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; font-size: .9rem; font-weight: 700; color: var(--muted); }
.fws-ev-opts label { display: inline-flex; gap: 6px; align-items: center; }
.fws-join { display: grid; gap: 6px; }
.fws-join-row { display: grid; grid-template-columns: 28px minmax(100px, 160px) minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.fws-cal { display: grid; gap: 8px; }
.fws-cal-row { display: grid; grid-template-columns: 36px minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--well); }
.fws-cal-row.off { opacity: .55; }
.fws-emoji { font-size: 1.6rem; text-align: center; }
.fws-cal-edit { border: 1px solid var(--gold); border-radius: var(--radius-m); padding: 14px; background: var(--well); display: grid; gap: 10px; }
.fws-grid { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.fws-grid > label { display: grid; gap: 4px; font-weight: 700; font-size: .88rem; }
.fws-grid > label.check, .fws-grid > label.fws-when, .fws-grid > label.inl { display: flex; align-items: center; gap: 6px; }
.fws-grid > label.wide { flex: 1 1 260px; }
.fws-sub { font-weight: 700; font-size: .9rem; margin-top: 4px; }
.fws-kinds { display: flex; flex-wrap: wrap; gap: 6px; }
.fws-kinds .chip { cursor: pointer; border: 1px solid var(--line); }
.fws-kinds .chip input { display: none; }
.fws-kinds .chip.on { border-color: var(--gold); color: var(--bone); background: rgba(242,193,78,.14); }
.fws-upload { display: flex; gap: 12px; align-items: center; margin: 14px 0; }
.fws-upload .btn { cursor: pointer; }
.fws-tracks { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fws-tracks li { display: grid; grid-template-columns: 24px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; }
.icon-btn:disabled { opacity: .35; cursor: default; }
@media (max-width: 640px) { .fws-tracks li { grid-template-columns: 24px 1fr; } .fws-join-row { grid-template-columns: 28px 1fr; } }

/* frequency controls */
.fw-sub { margin: 0 0 10px; display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; font-size: 1.05rem; }
.fw-kinds { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); }
.fw-kind { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.fw-kind.off .fw-kname, .fws-creator.off .fws-creator-head b, .fws-design.off .fws-dname { opacity: .45; }
.fw-kname { font-size: .92rem; }
.seg.freq { padding: 2px; }
.seg.freq button { padding: 4px 8px; font-size: .78rem; }
.seg.freq button[aria-pressed="true"][data-freq="0"] { background: rgba(224, 80, 63, .3); }
.fws-community { margin-top: 16px; }
.fws-creators { display: grid; gap: 8px; }
.fws-creator { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 8px 12px; background: var(--well); }
.fws-creator-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; }
.fws-creator-head .seg { margin-left: auto; }
.fws-designs { display: grid; gap: 6px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--line); }
.fws-design { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center; }
.fws-dname { font-weight: 700; font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) { .fw-kind { grid-template-columns: 1fr auto; } .fw-kind .seg { grid-column: 1 / -1; } .fws-design { grid-template-columns: auto 1fr auto; } .fws-design .seg { grid-column: 1 / -1; } }

/* show builder */
.fws-sky { margin-bottom: 16px; }
.fws-shows { display: grid; gap: 8px; }
.fws-show-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px 12px; align-items: center; padding: 10px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-m); background: var(--well); }
.fws-show-row .fws-timeline { grid-column: 1 / -1; }
.fws-timeline { position: relative; height: 14px; border-radius: 7px; background: rgba(255,255,255,.06); margin: 4px 6px; }
.fws-timeline i { position: absolute; top: 3px; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--lapis); box-shadow: 0 0 6px rgba(77,116,214,.8); }
.fws-timeline i.big { background: var(--gold); box-shadow: 0 0 8px rgba(242,193,78,.9); width: 10px; height: 10px; top: 2px; }
.fws-timeline i.mine { background: #ff8fc0; box-shadow: 0 0 6px rgba(255,143,192,.8); }
.fws-show-edit { border: 1px solid var(--gold); border-radius: var(--radius-m); padding: 14px; background: var(--well); display: grid; gap: 10px; }
.fws-steps { display: grid; gap: 4px; position: relative; }
.fws-step { display: grid; grid-template-columns: 18px 80px minmax(0, 1fr) 70px 130px 28px 28px; gap: 6px; align-items: center; }
.fws-step.fws-head { font-weight: 700; }
.fws-step.dragging { opacity: .45; }
.fws-grip { cursor: grab; touch-action: none; user-select: none; color: var(--faint); text-align: center; font-size: 1.05rem; line-height: 1; padding: 6px 0; }
.fws-grip:hover { color: var(--bone); }
.fws-step.dragging .fws-grip { cursor: grabbing; }
.fws-drop { position: absolute; left: 0; right: 0; height: 3px; border-radius: 2px; background: var(--gold); pointer-events: none; }
.fws-dup { font-size: .9rem; }
.fws-hint { margin: 2px 0 0; }
@media (max-width: 640px) {
  .fws-step { grid-template-columns: 18px 60px 1fr 52px 28px; }
  .fws-step select[data-f="where"] { grid-column: 2 / 4; }
  .fws-step.fws-head span:nth-child(n+5) { display: none; }
}

/* ------------------------------------------------------------ announcement banners */
.main-col { min-width: 0; display: flex; flex-direction: column; }
#app-board { padding: 16px clamp(16px, 4vw, 48px) 0; max-width: 1280px; width: 100%; }
#app-board + main { padding-top: 18px; }
.board-stack { display: grid; gap: 8px; }
.board-stack[hidden] { display: none; }
#sp-board { margin-bottom: 16px; }
.login-wrap #login-board { margin-bottom: 2px; }
.bn { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--glass-edge); border-left: 4px solid var(--lapis);
  background: linear-gradient(90deg, rgba(47, 65, 112, .55), rgba(20, 25, 40, .55));
  backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.bn-party { border-left-color: var(--gold); background: linear-gradient(90deg, rgba(120, 86, 20, .55), rgba(60, 30, 70, .5), rgba(20, 25, 40, .55)); }
.bn-heads { border-left-color: #ff9d3d; background: linear-gradient(90deg, rgba(110, 54, 20, .6), rgba(20, 25, 40, .55)); }
.bn-emoji { font-size: 1.6rem; line-height: 1; }
.bn-text { min-width: 0; display: grid; }
.bn-text b { font-family: var(--font-display); font-weight: 600; font-size: 1.12rem; line-height: 1.25; }
.bn-text small { color: var(--muted); font-size: .88rem; }
.bn-cd { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 1.1rem; padding: 4px 12px; border-radius: 999px;
  background: rgba(0, 0, 0, .35); border: 1px solid var(--glass-edge); white-space: nowrap; }
.bn-cd.soon { color: var(--gold); border-color: rgba(242, 193, 78, .5); }
.bn-x { background: none; border: 0; color: var(--faint); font-size: 1.3rem; cursor: pointer; padding: 0 4px; line-height: 1; }
.bn-x:hover { color: var(--bone); }
.bn:not(:has(.bn-cd)) { grid-template-columns: auto minmax(0, 1fr) auto; }
.bn:not(:has(.bn-emoji)) { grid-template-columns: minmax(0, 1fr) auto auto; }
body.ui-hidden .board-stack:not(#sp-board) { display: none !important; }
@media (max-width: 640px) {
  .bn { grid-template-columns: auto minmax(0, 1fr) auto; padding: 8px 10px; gap: 8px; }
  .bn-cd { grid-column: 2 / -1; justify-self: start; font-size: 1rem; }
  .bn-text b { font-size: 1rem; }
}

/* ------------------------------------------------------------ Announcements page */
.ann-list { display: grid; gap: 14px; }
.ann-row { display: grid; gap: 8px; padding-bottom: 14px; border-bottom: 1px solid var(--line); }
.ann-row.off .bn, .ann-row.ended .bn { opacity: .5; }
.ann-meta { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; font-size: .86rem; color: var(--muted); }
.ann-state { font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--well); }
.ann-state.live { color: var(--copper); }
.ann-state.later { color: var(--gold); }
.ann-btns { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.ann-on { border: 0 !important; padding: 0 !important; }
.ann-edit { margin-top: 12px; }
.ann-edit .actions, #ann-body .actions { display: flex; gap: 8px; }
.ann-preview { margin-bottom: 4px; }
.ann-picks { display: flex; flex-wrap: wrap; gap: 4px; }
.ann-picks .btn { padding: 4px 8px; font-size: 1.05rem; }
.ann-full { display: grid; gap: 4px; font-weight: 700; font-size: .88rem; }
.ann-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; font-weight: 400; }
.ann-bdays { display: grid; gap: 8px; }
.ann-bday { display: grid; grid-template-columns: 28px minmax(110px, 160px) 130px 70px minmax(120px, 1fr) auto auto auto; gap: 8px; align-items: center; }
.ann-bt-list { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 900px) { .ann-bday { grid-template-columns: 28px 1fr 1fr; } .ann-bday > :nth-child(5), .ann-bday > :nth-child(6) { grid-column: 2 / -1; } }

/* ------------------------------------------------------------ recap cards */
.rc-wrap { margin-bottom: 22px; }
.rc-nav { display: flex; gap: 6px; align-items: center; }
.rc-nav .input { width: auto; }
.rc-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 14px; }
.rc-card { background: var(--tuff); border: 1px solid var(--glass-edge); border-radius: var(--radius-m); padding: 14px 16px; display: grid; gap: 10px; align-content: start; }
.sp-recap .rc-card { background: var(--well); margin-bottom: 10px; }
.rc-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; }
.rc-head h3 { font-size: 1.1rem; }
.rc-head .muted { font-size: .86rem; }
.rc-players { display: flex; flex-wrap: wrap; gap: 8px 14px; }
.rc-who { display: inline-flex; gap: 8px; align-items: center; }
.rc-who b { display: block; font-size: .92rem; line-height: 1.1; }
.rc-who small { color: var(--muted); font-size: .8rem; }
.rc-lines { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: .92rem; }
.rc-lines li { display: grid; grid-template-columns: 24px 1fr; gap: 6px; align-items: baseline; }
.rc-ic { text-align: center; }
.rc-otd { margin-top: 14px; display: grid; gap: 8px; }
.rc-otd h3 { font-size: 1.05rem; }
.rc-otd-row { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 12px; padding: 8px 0; border-top: 1px solid var(--line); font-size: .92rem; }
.rc-otd-when b { display: block; color: var(--gold); }
.rc-otd-when small { color: var(--muted); }
.rc-otd-what { display: grid; gap: 4px; }
.rc-faces { display: flex; gap: 3px; }
@media (max-width: 640px) { .rc-otd-row { grid-template-columns: 1fr; gap: 4px; } }

/* ------------------------------------------------------------ TV mode */
.tv-clock { display: none; font-family: var(--font-display); font-size: 1.6rem; }
body.tv .tv-clock { display: inline; }
body.tv #sp-tv { background: rgba(242, 193, 78, .25); }
body.tv .sp { max-width: none; height: 100vh; display: flex; flex-direction: column; padding-bottom: 12px; overflow: hidden; }
body.tv .sp-main { flex: 1; min-height: 0; display: flex; flex-direction: column; max-width: none; padding: 0; }
body.tv .sp-updated { display: none; }
body.tv .sp-top { margin-bottom: 12px; }
body.tv #sp-board { margin-bottom: 12px; }
body.tv .bn-text b { font-size: clamp(1.1rem, 1.6vw, 1.6rem); }
body.tv .bn-cd { font-size: clamp(1.1rem, 1.6vw, 1.7rem); }
body.tv-idle.tv, body.tv-idle.tv * { cursor: none; }
.tv-stage { position: relative; flex: 1; min-height: 0; }
.tv-slide { position: absolute; inset: 0; display: flex; flex-direction: column; opacity: 0; transform: translateY(14px);
  transition: opacity .7s ease, transform .7s ease; pointer-events: none; }
.tv-slide.on { opacity: 1; transform: none; pointer-events: auto; }
.tv-title { font-size: clamp(1.6rem, 2.6vw, 2.6rem); margin: 0 0 14px; text-shadow: 0 2px 0 rgba(0,0,0,.4); }
.tv-sub { color: var(--muted); }
.tv-scroll { flex: 1; min-height: 0; overflow: hidden; }
.tv-inner { will-change: transform; }
.tv-inner .sp-hero { margin-bottom: 16px; }
.tv-slide[data-slide="map"] .tv-inner { height: 100%; display: flex; flex-direction: column; }
.tv-map { flex: 1; min-height: 260px; border-radius: 16px; overflow: hidden; }
.tv-map canvas { width: 100%; height: 100%; display: block; }
.tv-boards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 18px; }
.tv-board { border-radius: 16px; padding: 18px 22px; }
.tv-board h3 { font-size: clamp(1.1rem, 1.6vw, 1.6rem); margin-bottom: 12px; }
.tv-board ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.tv-board li { display: grid; grid-template-columns: 26px 36px minmax(0, 1fr) auto; gap: 12px; align-items: center; font-size: clamp(1rem, 1.3vw, 1.35rem); }
.tv-board li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-board .rank { color: var(--faint); font-weight: 700; text-align: right; }
.tv-board li:first-child .rank, .tv-board li:first-child .val { color: var(--gold); }
.tv-board .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.tv-recap { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.tv-recap-days { display: grid; gap: 16px; }
.rc-card.big { padding: 20px 24px; gap: 14px; backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); background: rgba(20, 25, 40, .55); }
.rc-card.big .rc-head h3 { font-size: clamp(1.3rem, 2vw, 2rem); }
.rc-card.big .rc-head .muted, .rc-card.big .rc-lines { font-size: clamp(1rem, 1.3vw, 1.35rem); }
.rc-card.big .rc-who b { font-size: clamp(1rem, 1.3vw, 1.3rem); }
.tv-otd { border-radius: 16px; padding: 18px 22px; }
.rc-otd.big { margin-top: 0; }
.rc-otd.big h3 { font-size: clamp(1.3rem, 2vw, 2rem); }
.rc-otd.big .rc-otd-row { font-size: clamp(1rem, 1.25vw, 1.3rem); grid-template-columns: 1fr; gap: 6px; }
.tv-feed { border-radius: 16px; padding: 14px 22px; }
.tv-feed .sp-feed li { font-size: clamp(1rem, 1.35vw, 1.4rem); grid-template-columns: 30px 140px 1fr; padding: 8px 0; }
.tv-news { display: grid; gap: 18px; }
.tv-news-item { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 24px; align-items: center; padding: 26px 30px;
  border-radius: 18px; border-left: 8px solid var(--lapis); }
.tv-news-item.bn-party { border-left-color: var(--gold); }
.tv-news-item.bn-heads { border-left-color: #ff9d3d; }
.tv-news-emoji { font-size: clamp(3rem, 5vw, 5rem); line-height: 1; }
.tv-news-item h2 { font-size: clamp(1.8rem, 3.2vw, 3.4rem); }
.tv-news-item p { font-size: clamp(1.1rem, 1.6vw, 1.7rem); color: var(--muted); margin: 6px 0 0; }
.bn-cd.big { font-size: clamp(2rem, 4vw, 4.4rem); padding: 10px 28px; font-family: var(--font-display); }
.tv-dots { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 20px; padding-top: 12px; font-size: .95rem; color: var(--muted); text-shadow: 0 1px 2px #000; position: relative; z-index: 2; }
.tv-dots button { position: relative; padding: 4px 2px 6px; background: none; border: 0; color: inherit; font: inherit; text-shadow: inherit; cursor: pointer; }
.tv-dots button:hover { color: var(--bone); }
.tv-dots button.on { color: var(--bone); font-weight: 700; }
.tv-dots i { position: absolute; left: 0; bottom: 0; height: 3px; width: 0; background: var(--gold); border-radius: 2px; }
.tv-dots button.on i { animation: tvbar var(--dur) linear forwards; }
@keyframes tvbar { to { width: 100%; } }
body:not(.tv) .tv-stage, body:not(.tv) .tv-dots { display: none; }
@media (max-width: 1100px) { .tv-recap { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .tv-news-item { grid-template-columns: auto 1fr; } .tv-news-item .bn-cd { grid-column: 1 / -1; } }
@media (prefers-reduced-motion: reduce) { .tv-slide { transition: none; } }
.bn-more { justify-self: start; background: none; border: 0; color: var(--muted); font-weight: 700; font-size: .88rem; cursor: pointer; padding: 0 6px; }
.bn-more:hover { color: var(--bone); }
.board-stack.ticker { position: relative; }
.board-stack.ticker .bn { animation: bnin .5s ease; }
@keyframes bnin { from { opacity: 0; transform: translateY(-6px); } }
.bn-dots { position: absolute; right: 18px; bottom: -10px; display: flex; gap: 5px; }
.bn-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.25); }
.bn-dots i.on { background: var(--gold); }
@media (prefers-reduced-motion: reduce) { .board-stack.ticker .bn { animation: none; } }
.sp-main { max-width: none; padding: 0; }

/* ------------------------------------------------------------ make your own sound */
.sfx { border: 1px solid var(--glass-edge); border-radius: var(--radius-m); background: var(--well); padding: 12px; margin: 4px 0 14px; display: grid; gap: 10px; }
.sfx-top { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.sfx-wave { width: 100%; height: 72px; display: block; border-radius: 6px; background: rgba(0, 0, 0, .35); }
.sfx-play { display: grid; gap: 4px; justify-items: center; }
.sfx-makers { display: flex; flex-wrap: wrap; gap: 4px; }
.sfx-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); gap: 10px; }
.sfx-group { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 6px 10px 8px; margin: 0; min-width: 0; }
.sfx-group legend { font-family: var(--font-display); font-size: .95rem; padding: 0 4px; color: var(--gold); }
.sfx-group .fwe-sliders { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 4px 14px; }
.sfx-groups { grid-template-columns: 1fr; }

/* ------------------------------------------------------------ firework preview window */
.pv { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; padding: 20px; background: rgba(5, 7, 14, .72);
  backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); animation: pvin .2s ease; }
@keyframes pvin { from { opacity: 0; } }
.pv-box { width: min(1100px, 100%); max-height: 100%; display: flex; flex-direction: column; gap: 12px; padding: 16px 18px;
  border-radius: 16px; border: 1px solid var(--glass-edge); background: rgba(16, 20, 32, .92); box-shadow: 0 20px 60px rgba(0,0,0,.5); }
.pv-head { display: flex; justify-content: space-between; align-items: start; gap: 12px; }
.pv-head h2 { font-size: 1.4rem; }
.pv-x { font-size: 1.4rem; }
.pv-stage { position: relative; height: min(62vh, 560px); min-height: 260px; border-radius: 12px; overflow: hidden; background: #0b0f1d; }
.pv-stage canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.pv-msg { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); padding: 6px 16px; border-radius: 999px; white-space: nowrap;
  font-family: var(--font-display); font-size: 1.15rem; background: rgba(16, 20, 32, .7); border: 1px solid var(--glass-edge); pointer-events: none; }
.pv-msg[hidden], .pv-count[hidden] { display: none; }
.pv-count { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; font-family: var(--font-display);
  font-size: min(30vh, 220px); color: #fff; text-shadow: 0 0 40px rgba(255, 210, 120, .8), 0 6px 0 rgba(0,0,0,.35); }
.pv-foot { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.pv-foot .muted { flex: 1; }
@media (max-width: 640px) { .pv { padding: 8px; } .pv-box { padding: 12px; } .pv-stage { height: 55vh; } .pv-foot .muted { display: none; } }

/* editor: new firework vs editing a saved one */
.fwe-mode { margin: 0 0 14px; }
.fwe-mode-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px 16px; padding: 10px 14px;
  border-radius: 12px; border: 1px solid var(--glass-edge); background: rgba(20, 25, 40, .6); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); }
.fwe-mode-bar.editing { border-color: var(--gold); background: linear-gradient(90deg, rgba(120, 86, 20, .45), rgba(20, 25, 40, .6)); box-shadow: 0 0 0 1px rgba(242, 193, 78, .25); }
.fwe-mode-what { font-size: 1.05rem; }
.fwe-dirty { color: var(--gold); font-weight: 700; font-size: .92rem; }
.fwe-mode-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.fwe.editing .fwe-preview { box-shadow: 0 0 0 2px rgba(242, 193, 78, .55); }
.sfx-lib { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sfx-lib select { flex: 1 1 180px; min-width: 0; }
.sfx-lib input { flex: 1 1 140px; min-width: 0; }

/* ------------------------------------------------------------ sky controls in the sidebar */
.rail-sky { width: 100%; }
.rail-sky:empty { display: none; }
.sky-dock { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; padding: 6px; margin-bottom: 4px; border-radius: 12px; background: rgba(0, 0, 0, .18); border: 1px solid var(--line); }
.sky-dock button { border: 0; background: none; color: var(--muted); cursor: pointer; border-radius: 8px; padding: 7px 6px; font-weight: 700; font-size: .84rem;
  display: inline-flex; align-items: center; gap: 6px; justify-content: flex-start; }
.sky-dock button:hover { background: rgba(255,255,255,.07); color: var(--bone); }
.sky-dock .sky-auto[aria-pressed="true"] { color: var(--bone); }
.sky-ctl.has-dock { display: none; }
body.ui-hidden .sky-ctl.has-dock { display: flex; }
@media (max-width: 900px) {
  .rail-sky { width: auto; }
  .sky-dock { display: flex; padding: 2px; margin: 0; background: none; border: 0; }
  .sky-dock button span:not(.sky-sw) { display: none; }
  .sky-dock .sky-auto span:last-child { display: none; }
}

/* ------------------------------------------------------------ popover: volume, playlist, equalizer */
.music-pop { width: min(340px, calc(100vw - 20px)); right: auto; bottom: auto; }
.music-pop h4 { margin: 0; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; display: flex; gap: 8px; align-items: baseline; }
.vol-row { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; grid-template-areas: "btn label val" "btn range range"; column-gap: 10px; row-gap: 2px; align-items: center; }
.vol-row button { grid-area: btn; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: rgba(255,255,255,.05); cursor: pointer; font-size: 1rem; }
.vol-row button[aria-pressed="true"] { background: rgba(224, 80, 63, .25); border-color: rgba(224, 80, 63, .5); }
.vol-row span { grid-area: label; font-weight: 700; font-size: .9rem; }
.vol-row input { grid-area: range; width: 100%; accent-color: var(--gold); }
.vol-row b { grid-area: val; font-size: .8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.eq-presets { display: flex; flex-wrap: wrap; gap: 4px; }
.eq-presets .btn[aria-pressed="true"] { border-color: var(--gold); color: var(--gold); }
.eq-row { display: grid; grid-template-columns: 82px 1fr 58px; gap: 8px; align-items: center; font-size: .88rem; font-weight: 700; }
.eq-row input { accent-color: var(--gold); width: 100%; }
.eq-row b { font-size: .8rem; color: var(--muted); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ the music bar */
.mbar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); z-index: 41; width: min(760px, calc(100vw - 28px));
  display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 8px 12px;
  border-radius: 18px; background-color: rgba(16, 20, 32, .72); transition: opacity .4s, width .25s; }
body:not(.logged-out):not(.status-page) .mbar { left: calc(50% + var(--rail) / 2); width: min(760px, calc(100vw - var(--rail) - 28px)); }
.mbar.faded { opacity: 0; pointer-events: none; }
.mb-btns { display: flex; gap: 2px; align-items: center; }
.mb-btns button { border: 0; background: none; color: var(--muted); cursor: pointer; width: 34px; height: 34px; border-radius: 50%; font-size: .95rem; display: grid; place-items: center; }
.mb-btns button:hover { background: rgba(255,255,255,.08); color: var(--bone); }
.mb-btns button[aria-pressed="true"] { color: var(--gold); }
.mb-btns .mb-play { width: 42px; height: 42px; background: var(--gold); color: #1a1406; font-size: 1.05rem; }
.mb-btns .mb-play:hover { background: #ffd56a; color: #1a1406; }
.mb-viz { width: 64px; height: 28px; display: block; }
.mb-mid { min-width: 0; display: grid; gap: 2px; }
.mb-title { display: flex; gap: 8px; align-items: baseline; min-width: 0; }
.mb-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.mb-sub { font-size: .76rem; color: var(--faint); white-space: nowrap; }
.mb-seek { display: grid; grid-template-columns: 36px minmax(0, 1fr) 36px; gap: 8px; align-items: center; font-size: .75rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.mb-seek .mb-d { text-align: right; }
.mb-seek input { -webkit-appearance: none; appearance: none; width: 100%; height: 14px; background: none; cursor: pointer; --p: 0%; }
.mb-seek input::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--gold) var(--p), rgba(255,255,255,.15) var(--p)); }
.mb-seek input::-moz-range-track { height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); }
.mb-seek input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--gold); }
.mb-seek input::-webkit-slider-thumb { -webkit-appearance: none; width: 12px; height: 12px; border-radius: 50%; background: var(--bone); margin-top: -4px; }
.mb-seek input::-moz-range-thumb { width: 12px; height: 12px; border: 0; border-radius: 50%; background: var(--bone); }
/* small: play, title, expand */
body.has-mbar main { padding-bottom: 110px; }
body.has-mbar .sp { padding-bottom: 96px; }
body.ui-hidden .mbar { display: grid; }
body.logged-out .mbar { display: none; }
@media (max-width: 900px) {
  body:not(.logged-out):not(.status-page) .mbar { left: 50%; width: calc(100vw - 16px); }
}
@media (max-width: 640px) {
  .mbar { grid-template-columns: auto minmax(0, 1fr) auto; bottom: 8px; width: calc(100vw - 16px); gap: 8px; padding: 6px 8px; }
  .mb-viz { display: none; }
  .mb-btns button[data-mb="prev"] { display: none; }
  body.has-mbar .sky-ctl:not(.has-dock) { bottom: 72px; }
}

/* ------------------------------------------------------------ Up next (music pop-up) */
.music-pop { max-height: min(70vh, 620px); grid-template-rows: auto; overflow: hidden; }
.mq-list { max-height: min(46vh, 420px); }
.mq-list button { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 4px 6px; }
.mq-list img { width: 34px; height: 34px; border-radius: 4px; object-fit: cover; background: rgba(255,255,255,.06); }
.mq-list b { display: block; font-weight: 700; font-size: .88rem; color: var(--bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-list small { display: block; font-size: .76rem; color: var(--faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mq-list i { font-style: normal; font-size: .76rem; color: var(--faint); font-variant-numeric: tabular-nums; }
.mq-list button[aria-current="true"] b { color: var(--gold); }
.mq-more { font-size: .88rem; font-weight: 700; text-decoration: none; }
.mb-art { position: relative; width: 64px; height: 28px; display: grid; grid-template-columns: auto 1fr; gap: 6px; align-items: center; }
.mb-art img { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; }
.mb-art img:not([hidden]) + .mb-viz { width: 30px; }
@media (max-width: 640px) { .mb-art { display: none; } }

/* ------------------------------------------------------------ Music page */
.mu-head { margin-bottom: 6px; }
.mu-head p { margin-top: 4px; }
.mu-tabs { margin-bottom: 14px; }
.mu-search { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.mu-search input { flex: 1 1 260px; }
.mu-search[hidden] { display: none; }
.mu-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; flex-wrap: wrap; }
.mu-bar .muted { margin-right: auto; }
.mu-art { display: inline-block; flex: none; width: 40px; height: 40px; border-radius: 6px; overflow: hidden;
  background: linear-gradient(135deg, #2f4170, #5a3a6e); position: relative; }
.mu-art::before { content: "♪"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.35); font-size: 1.1em; }
.mu-art img { position: relative; width: 100%; height: 100%; object-fit: cover; display: block; }
.mu-art.sm { width: 40px; height: 40px; }
.mu-art.big { width: 100%; height: auto; aspect-ratio: 1; font-size: 2rem; }
.mu-art.hero { width: 160px; height: 160px; border-radius: 10px; font-size: 3rem; box-shadow: 0 10px 30px rgba(0,0,0,.4); }
.mu-art.round { border-radius: 50%; }
.mu-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mu-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) 54px auto; gap: 12px; align-items: center; padding: 4px 8px; border-radius: 8px; }
.mu-row:hover { background: rgba(255,255,255,.05); }
.mu-row.now { background: rgba(242, 193, 78, .1); }
.mu-row.now .mu-main b { color: var(--gold); }
.mu-row.is-blocked { opacity: .55; }
.mu-row.is-unapproved { opacity: .75; }
.mu-n { text-align: center; color: var(--faint); font-variant-numeric: tabular-nums; }
.mu-main { min-width: 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer; padding: 4px 0; font: inherit; }
.mu-main b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-main small { display: block; color: var(--muted); font-size: .84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-main i { font-style: normal; color: var(--gold); }
.mu-src { font-size: .7rem; padding: 0 6px; }
.mu-dur { color: var(--faint); font-size: .85rem; text-align: right; font-variant-numeric: tabular-nums; }
.mu-acts { display: flex; gap: 2px; align-items: center; }
.mu-acts .mu-block { opacity: .45; }
.mu-row:hover .mu-block { opacity: 1; }
.mu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 16px; }
.mu-card { display: grid; gap: 6px; text-decoration: none; color: inherit; padding: 8px; border-radius: 10px; }
.mu-card:hover { background: rgba(255,255,255,.05); }
.mu-card b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .92rem; }
.mu-card small { color: var(--muted); font-size: .8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-card.is-blocked { opacity: .5; }
.mu-artists { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 6px; }
.mu-artist { display: flex; gap: 12px; align-items: center; padding: 8px; border-radius: 10px; text-decoration: none; color: inherit; }
.mu-artist:hover { background: rgba(255,255,255,.05); }
.mu-artist .mu-art { width: 48px; height: 48px; }
.mu-artist b, .mu-artist small { display: block; }
.mu-artist small { color: var(--muted); font-size: .82rem; }
.mu-back { display: inline-block; margin-bottom: 10px; font-weight: 700; text-decoration: none; }
.mu-hero { display: flex; gap: 20px; align-items: flex-end; margin-bottom: 18px; flex-wrap: wrap; }
.mu-hero h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); }
.mu-hero p { margin: 4px 0 10px; }
.mu-hero .btn-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.mu-title { font-family: var(--font-display); font-size: 1.6rem; padding: 4px 10px; max-width: 520px; }
.mu-sub { font-size: 1.05rem; margin: 16px 0 8px; }
.mu-pls { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; }
.mu-pl { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border-radius: 12px; background: var(--tuff); border: 1px solid var(--glass-edge); text-decoration: none; color: inherit; }
.mu-pl:hover { border-color: rgba(255,255,255,.25); }
.mu-pl-ic { font-size: 1.6rem; }
.mu-pl b, .mu-pl small { display: block; }
.mu-pl small { color: var(--muted); font-size: .82rem; }
.mu-pl .mu-sched { color: var(--gold); }
.mu-radio-set { margin-bottom: 14px; display: grid; gap: 8px; }
.mu-radio-set .check { flex-wrap: wrap; }
.mu-md { display: inline-flex; gap: 4px; }
.mu-menu { position: fixed; z-index: 70; display: grid; gap: 2px; padding: 8px; border-radius: 12px; background-color: rgba(16, 20, 32, .92); min-width: 220px; max-height: 50vh; overflow-y: auto; }
.mu-menu b { font-size: .85rem; padding: 2px 8px 6px; color: var(--muted); }
.mu-menu button { border: 0; background: none; color: var(--bone); text-align: left; padding: 7px 10px; border-radius: 8px; cursor: pointer; font: inherit; font-size: .9rem; display: flex; justify-content: space-between; gap: 10px; }
.mu-menu button:hover { background: rgba(255,255,255,.08); }
.mu-menu small { color: var(--faint); }
.mu-lib { display: grid; gap: 16px; max-width: 900px; }
.mu-code { background: var(--well); padding: 10px 12px; border-radius: 8px; font-size: .85rem; overflow-x: auto; }
.mu-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mu-blk-h { font-weight: 700; font-size: .85rem; color: var(--muted); margin: 10px 0 6px; }
@media (max-width: 640px) {
  .mu-row { grid-template-columns: 36px minmax(0, 1fr) auto; }
  .mu-dur { display: none; }
  .mu-art.hero { width: 110px; height: 110px; }
}
.mu-artist.is-blocked { opacity: .5; }
.fws-overlap, .mu-overlap { display: block; font-size: .78rem; color: #e8b85c; opacity: .85; margin-top: 2px; }
.fws-cal-edit > .fws-overlap { margin: 0 0 4px; }

/* ------------------------------------------------------------ the bottom bar: music + fireworks */
.mbar { grid-template-columns: minmax(0, 1fr) auto; gap: 10px; width: min(900px, calc(100vw - 28px)); padding: 6px 8px 6px 10px; }
body:not(.logged-out):not(.status-page) .mbar { width: min(900px, calc(100vw - var(--rail) - 28px)); }
.mb-music { display: grid; grid-template-columns: auto 64px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-width: 0; }
.mbar.no-music { width: auto; grid-template-columns: auto; }
body:not(.logged-out):not(.status-page) .mbar.no-music { width: auto; }
.mbar.no-music .mb-music { display: none; }
.mb-sky { display: flex; align-items: center; gap: 2px; padding-left: 10px; border-left: 1px solid var(--line); }
.mbar.no-music .mb-sky { border-left: 0; padding-left: 0; }
.mb-sky button { border: 0; background: none; color: var(--muted); cursor: pointer; height: 36px; min-width: 36px; padding: 0 8px; border-radius: 999px;
  font-size: 1rem; display: inline-flex; align-items: center; gap: 7px; font-weight: 700; }
.mb-sky .sky-auto { font-size: .82rem; }
.mb-sky button:hover { background: rgba(255,255,255,.08); color: var(--bone); }
.mb-sky .sky-auto[aria-pressed="true"] { color: var(--bone); }
.mq-head { display: flex; align-items: center; gap: 6px; }
.mq-head h4 { margin-right: auto; }
.mq-tool { border: 1px solid var(--line); background: rgba(255,255,255,.04); color: var(--muted); border-radius: 999px; padding: 3px 10px; font-size: .8rem; font-weight: 700; cursor: pointer; }
.mq-tool:hover { color: var(--bone); }
.mq-tool[aria-pressed="true"] { color: var(--gold); border-color: rgba(242, 193, 78, .5); }
.mq-head .mq-tool:first-child:not([data-mq="shuffle"]) { margin-right: 4px; }
body.ui-hidden .music-pop:not([hidden]) { display: grid !important; }
body.ui-hidden .mbar { display: grid; }
body.on-editor:not(.ui-hidden) .mb-launch, body.on-editor:not(.ui-hidden) .mb-sky .sky-auto { display: none; }
body.on-editor .mbar.no-music { display: none; }
.sky-ctl { display: none !important; }
@media (max-width: 900px) { body:not(.logged-out):not(.status-page) .mbar { width: calc(100vw - 16px); } }
@media (max-width: 640px) {
  .mbar { grid-template-columns: minmax(0, 1fr) auto; }
  .mb-music { grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; }
  .mb-art { display: none; }
  .mb-btns button[data-mb="prev"] { display: none; }
  .mb-sky { padding-left: 6px; }
  .mb-sky .sky-auto span:last-child, .mb-sky .mb-launch, .mb-sub { display: none; }
  .mb-seek { grid-template-columns: minmax(0, 1fr); }
  .mb-seek .mb-t, .mb-seek .mb-d { display: none; }
}
.fwe-brush.add { background: var(--well); color: var(--muted); font-size: 1rem; border-style: dashed; }
.fwe-brush-pick { position: relative; display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; background: var(--well);
  border: 2px solid rgba(255,255,255,.18); cursor: pointer; font-size: 1rem; }
.fwe-brush-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.fwe-brush-pick.off { opacity: .35; cursor: default; }
.world-sky { display: contents; }

/* TV mode: the slides, with what's playing and recent events always beside them */
.tv-wrap { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) clamp(260px, 22vw, 380px); gap: 18px; }
.tv-main { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.tv-side { min-height: 0; display: flex; flex-direction: column; gap: 14px; overflow: hidden; }
body.tv:has(.mbar:not(.no-music)) .tv-wrap { margin-bottom: 72px; }
.tv-side-box { border-radius: 16px; padding: 14px 16px; }
.tv-side-box h3 { font-size: 1.15rem; margin-bottom: 8px; }
.tv-events { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.tv-events li { display: grid; grid-template-columns: 28px minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 10px; align-items: center;
  font-size: clamp(.9rem, 1vw, 1.05rem); animation: tvev .6s ease; }
.tv-events li > .face, .tv-events li > .tv-ev-ic { grid-row: span 2; }
.tv-ev-ic { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 6px; background: rgba(255,255,255,.08); }
.tv-ev-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.3; }
.tv-ev-ic-sm { opacity: .8; }
.tv-events li.ev-death .tv-ev-ic-sm { color: #ff8a7a; }
.tv-events li.ev-advancement .tv-ev-ic-sm, .tv-events li.ev-level .tv-ev-ic-sm { color: var(--gold); }
.tv-events li.ev-join .tv-ev-ic-sm { color: var(--copper); }
.tv-events time { font-size: .8rem; color: var(--muted); }
@keyframes tvev { from { opacity: 0; transform: translateX(10px); } }
.tv-np { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 12px; align-items: center; }
.tv-np-art { width: 64px; height: 64px; border-radius: 8px; overflow: hidden; background: linear-gradient(135deg, #2f4170, #5a3a6e); position: relative; }
.tv-np-art::before { content: "♪"; position: absolute; inset: 0; display: grid; place-items: center; color: rgba(255,255,255,.4); font-size: 1.6rem; }
.tv-np-art img { position: relative; width: 100%; height: 100%; object-fit: cover; }
.tv-np small { display: block; color: var(--gold); font-weight: 700; font-size: .8rem; }
.tv-music:not(.playing) .tv-np small { color: var(--muted); }
.tv-np b { display: block; font-size: 1.1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tv-np span:not(.tv-np-art) { color: var(--muted); font-size: .9rem; }
.tv-np-bar { height: 4px; border-radius: 2px; background: rgba(255,255,255,.15); margin-top: 12px; overflow: hidden; }
.tv-np-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width 1s linear; }
.tv-np-times { display: flex; justify-content: space-between; font-size: .75rem; color: var(--faint); margin-top: 4px; font-variant-numeric: tabular-nums; }
.tv-np-next { margin: 8px 0 0; font-size: .85rem; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 1000px) { .tv-wrap { grid-template-columns: 1fr; } .tv-side { display: none; } }
@media (prefers-reduced-motion: reduce) { .tv-events li { animation: none; } }

/* ------------------------------------------------------------ give items */
.modal.gv-modal { width: min(640px, calc(100vw - 32px)); }
.gv-label { margin: 10px 0 6px; }
.gv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; max-height: min(46vh, 360px); overflow-y: auto; padding: 2px; }
.gv-item { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 8px; border-radius: var(--radius-s); border: 1px solid var(--line); background: var(--well); color: inherit; font: inherit; font-size: .86rem; text-align: left; cursor: pointer; }
.gv-item span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gv-item .item { flex: none; width: 28px; height: 28px; }
.gv-item:hover { border-color: var(--glass-hi); }
.gv-item.on { border-color: var(--gold); background: rgba(242, 193, 78, .12); }
.gv-pick { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 8px 10px; border-radius: var(--radius-m); background: var(--well); }
.gv-pick .item { width: 36px; height: 36px; }
.gv-amount { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 12px 0 4px; }
.gv-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.gv-chips .chip { cursor: pointer; }
.hero-actions { margin-top: 14px; }
#gv-q { width: 100%; }
.gv-chips .chip.on { border-color: var(--gold); color: var(--gold); }
.modal.mc-modal { width: min(720px, calc(100vw - 32px)); }
.mc-sum { margin: 12px 0 8px; display: grid; gap: 4px; }
.mc-sum .warn { color: var(--redstone); }
.mc-out { max-height: 40vh; overflow: auto; font-size: .78rem; background: var(--well); padding: 10px; border-radius: var(--radius-s); white-space: pre-wrap; word-break: break-all; }
.hidden-list { display: grid; gap: 8px; max-width: 720px; }
.hidden-row { display: flex; align-items: center; gap: 10px; }
.hidden-row button { margin-left: auto; }
#quiet-times.off { opacity: .45; }

/* ------------------------------------------------------------ picking songs */
.mu-rows.pickable .mu-row { grid-template-columns: 22px 40px minmax(0, 1fr) 54px auto; }
.mu-pick { width: 18px; height: 18px; accent-color: var(--gold); cursor: pointer; margin: 0; }
.mu-row.picked { background: rgba(242, 193, 78, .1); }
.mu-selbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: 96px; z-index: 60; display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  padding: 10px 14px; border-radius: var(--radius-m); border: 1px solid var(--gold-deep); background: rgba(16, 20, 32, .92); max-width: calc(100vw - 32px); }
@media (max-width: 640px) { .mu-rows.pickable .mu-row { grid-template-columns: 22px 36px minmax(0, 1fr) auto; } .mu-selbar { bottom: 84px; } }

/* ------------------------------------------------------------ chat */
.chat-wrap { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: 10px; height: clamp(320px, calc(100dvh - 400px), 760px); padding: 12px; margin-bottom: 96px; }
.chat-log { overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding-right: 4px; }
.cm { display: grid; grid-template-columns: 64px 22px auto minmax(0, 1fr); gap: 8px; align-items: baseline; padding: 3px 6px; border-radius: 6px; }
.cm time { color: var(--faint); font-size: .78rem; font-variant-numeric: tabular-nums; }
.cm .face { align-self: center; }
.cm b { white-space: nowrap; }
.cm > span:last-child { overflow-wrap: anywhere; }
.cm.web { background: rgba(77, 116, 214, .14); }
.cm.web b { color: #8fb0ff; }
.cm.dm b { color: #d79bff; }
.cm.sys { grid-template-columns: 64px 22px minmax(0, 1fr); color: var(--muted); font-size: .88rem; }
.cm-from { text-align: center; }
.cm-day { text-align: center; color: var(--faint); font-size: .8rem; margin: 10px 0 4px; }
.chat-send { display: flex; gap: 8px; }
.chat-send select { max-width: 40%; }
.chat-note { margin: 0; }
@media (max-width: 640px) {
  .chat-wrap { height: clamp(300px, calc(100dvh - 330px), 640px); margin-bottom: 84px; }
  .cm { grid-template-columns: 22px auto minmax(0, 1fr); }
  .cm time { display: none; }
  .cm.sys { grid-template-columns: 22px minmax(0, 1fr); }
  .chat-send { flex-wrap: wrap; } .chat-send select { max-width: none; flex: 1 1 100%; }
}

/* ------------------------------------------------------------ challenges */
.ch-intro { margin: -4px 0 18px; max-width: 760px; }
.ch-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 360px), 1fr)); gap: 14px; }
.ch-card { display: grid; gap: 10px; }
.ch-card.ch-running { border-color: var(--gold-deep); }
.ch-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.ch-head h3 { margin: 0; }
.ch-emoji { font-size: 1.8rem; }
.ch-acts { display: flex; gap: 6px; align-items: center; }
.ch-live { color: var(--gold); font-weight: 700; }
.ch-prize { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ch-prize .item, .ch-pick .item, .ch-gift .item { width: 26px; height: 26px; }
.ch-result { margin: 0; font-weight: 700; }
.ch-scores { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.ch-scores li { display: grid; grid-template-columns: 20px 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.ch-scores li.win .val, .ch-scores li.win .rank { color: var(--gold); }
.ch-scores .rank { color: var(--faint); text-align: right; }
.ch-scores .val { font-weight: 700; font-variant-numeric: tabular-nums; }
.ch-form { display: grid; gap: 14px; }
.ch-form h3 { margin: 0; }
.ch-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.ch-kind { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; padding: 8px 10px; border-radius: var(--radius-m); border: 1px solid var(--line); background: var(--well); cursor: pointer; }
.ch-kind input { position: absolute; opacity: 0; pointer-events: none; }
.ch-kind span { grid-row: span 2; font-size: 1.4rem; }
.ch-kind small { color: var(--muted); }
.ch-kind.on { border-color: var(--gold); background: rgba(242, 193, 78, .12); }
.ch-kind:focus-within { outline: 2px solid var(--lapis); }
.ch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 12px 18px; align-items: start; }
.ch-grid label { display: grid; gap: 4px; }
.ch-when, .ch-prizes { display: grid; gap: 6px; }
.ch-when label.check { display: flex; align-items: center; gap: 8px; }
.ch-form .lbl { font-weight: 700; font-size: .92rem; }
.ch-pick { display: inline-flex; align-items: center; gap: 8px; justify-self: start; }
.ch-second { display: flex; gap: 6px; align-items: center; }
.ch-gift { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0; }

/* ------------------------------------------------------------ races */
.play-switch { display: inline-flex; margin: 0 0 14px; }
.play-switch a { padding: 6px 14px; text-decoration: none; color: var(--muted); }
.play-switch a[aria-current="page"] { color: var(--bone); background: rgba(242, 193, 78, .14); font-weight: 700; }
.rc-edit { display: grid; gap: 12px; margin-bottom: 96px; }
.rc-top { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 12px; }
.rc-top label { display: grid; gap: 4px; min-width: min(100%, 320px); }
.rc-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(280px, 1fr); gap: 14px; align-items: start; }
.rc-map { position: relative; height: min(64vh, 620px); border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); }
.rm-canvas { width: 100%; height: 100%; display: block; cursor: crosshair; touch-action: none; }
.rm-zoom { position: absolute; right: 10px; top: 10px; display: grid; gap: 6px; }
.rm-zoom .icon-btn { background: rgba(16, 20, 32, .85); }
.rm-note { position: absolute; left: 10px; top: 10px; background: rgba(8, 10, 18, .7); padding: 2px 8px; border-radius: 4px; }
.rm-note:empty { display: none; }
.rc-side { display: grid; gap: 10px; }
.rc-here { flex-wrap: wrap; }
.rc-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; max-height: min(52vh, 520px); overflow-y: auto; }
.rc-points li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 6px; border-radius: var(--radius-s); background: var(--well); border: 1px solid transparent; }
.rc-points li.sel { border-color: var(--gold); }
.rc-pt { display: grid; gap: 4px; }
.rc-pt .num-in { width: 56px; padding: 2px 6px; }
.rc-badge { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: .8rem; background: #4cd964; color: #101826; }
.rc-badge.s { background: var(--bone); }
.rc-badge.f { background: var(--gold); }
.rc-acts { display: flex; gap: 2px; }
.rs-form { display: grid; gap: 12px; }
.rs-form label { display: grid; gap: 4px; }
.rs-form label.check { display: flex; align-items: center; gap: 8px; }
.rs-prizes { display: grid; grid-template-columns: auto 1fr; gap: 8px 12px; align-items: center; }
@media (max-width: 900px) { .rc-grid { grid-template-columns: 1fr; } .rc-map { height: 52vh; } }

/* ------------------------------------------------------------ fishing pack */
.ch-kind.off { opacity: .5; cursor: not-allowed; }
.fish-panel { display: grid; gap: 12px; }
.fish-panel p { margin: 0; }
.fish-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.fish-steps code { word-break: break-all; }
.fish-qs { display: flex; flex-wrap: wrap; gap: 8px; }
.fish-q { padding: 3px 10px; border-radius: 999px; background: var(--well); font-weight: 700; font-size: .88rem; }
.fish-q small { font-weight: 400; color: var(--muted); }
.fq-gray { color: #aaa; } .fq-white { color: #fff; } .fq-green { color: #55ff55; } .fq-aqua { color: #55ffff; } .fq-gold { color: #ffaa00; }
.fish-guide summary { cursor: pointer; font-weight: 700; }
.fish-guide td:first-child { display: flex; align-items: center; gap: 8px; }
.fish-guide .item { width: 24px; height: 24px; }
.fish-recent { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fish-recent li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; }

/* ------------------------------------------------------------ games */
.gm-pick { align-content: start; }
.gm-pick p { margin: 0; }
.modal.gm-modal { width: min(760px, calc(100vw - 24px)); max-height: calc(100dvh - 32px); overflow-y: auto; }
.gm-form { display: grid; gap: 12px; }
.gm-form label { display: grid; gap: 4px; }
.gm-form label.check { display: flex; align-items: center; gap: 8px; }
.gm-map { position: relative; height: min(42vh, 360px); border-radius: var(--radius-m); overflow: hidden; border: 1px solid var(--line); }
.gm-where, .gm-opts, .gm-prize, .gm-items { display: grid; gap: 6px; }
.gm-where p { margin: 0; }
.gm-chosen { font-weight: 700; }
.gm-opts { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.gm-opts label.check { grid-column: 1 / -1; }
.gm-items { grid-template-columns: none; display: flex; flex-wrap: wrap; align-items: center; }
.gm-items .lbl { width: 100%; }
.gm-items .item { width: 20px; height: 20px; }
.gm-form .lbl { font-weight: 700; font-size: .92rem; }
.gm-players { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.gm-players li { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.gm-role { font-size: .85rem; color: var(--muted); }
.gm-role.seeker { color: var(--redstone); } .gm-role.hider { color: var(--copper); }
.echo-note { margin: 0 0 14px; }
.fish-ok { color: var(--copper); margin: 0; }

/* Happening now: running contests, races and games on the status page and TV */
.sp-live { margin: 0 0 18px; }
.sp-live-h { display: flex; align-items: center; gap: 8px; font-size: 1.05rem; margin: 0 0 10px; }
.live-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); }
.live-grid.big { grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 22px; }
.live-card { border-radius: 16px; padding: 14px 16px; min-width: 0; }
.live-card header { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.live-card header > div { flex: 1; min-width: 0; }
.live-card h3 { margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-card header p { margin: 2px 0 0; font-size: .85rem; }
.live-emoji { font-size: 1.7rem; line-height: 1; }
.live-cd { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.25rem; padding: 4px 10px; border-radius: 10px; background: rgba(255, 200, 80, .16); color: var(--gold); white-space: nowrap; }
.live-rows { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.live-rows li { display: flex; align-items: center; gap: 10px; min-width: 0; }
.live-rows li b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.live-rows li small { opacity: .65; white-space: nowrap; }
.live-rows .rank { width: 1.4em; text-align: right; opacity: .6; font-variant-numeric: tabular-nums; }
.live-rows .val { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.live-rows li.lead .val, .live-rows li.lead b { color: var(--gold); }
.live-grid.big .live-card { padding: 20px 24px; }
.live-grid.big h3 { font-size: clamp(1.3rem, 2vw, 2rem); }
.live-grid.big header p { font-size: clamp(.95rem, 1.2vw, 1.25rem); }
.live-grid.big .live-emoji { font-size: clamp(2rem, 3vw, 3rem); }
.live-grid.big .live-cd { font-size: clamp(1.6rem, 2.6vw, 2.8rem); padding: 6px 16px; }
.live-grid.big .live-rows { gap: 10px; }
.live-grid.big .live-rows li { font-size: clamp(1.05rem, 1.5vw, 1.6rem); }
.gm-row, .gm-wide { grid-column: 1 / -1; }
.gm-row { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; }
.gm-row label { display: grid; gap: 4px; }
.gm-row select { width: auto; }
.ch-lure { display: grid; gap: 4px; }
.ch-lure[hidden] { display: none; }
.ch-lure select { max-width: 420px; }
.fish-files { margin: 8px 0; } .fish-files ul { margin: 6px 0 0; padding-left: 18px; display: grid; gap: 4px; } .fish-files summary { cursor: pointer; }
.ch-hot { display: grid; gap: 8px; } .ch-hot[hidden] { display: none; }
.gm-team { font-size: .75em; padding: 1px 6px; border-radius: 6px; margin-left: 4px; } .gm-team.red { background: rgba(224,80,63,.25); color: #ff8b7e; } .gm-team.blue { background: rgba(80,140,240,.25); color: #8fb8ff; }
.mu-more { margin: 6px 0 10px; } .mu-more summary { cursor: pointer; color: var(--muted, #9aa); }

/* Coming up */
.up-list { list-style: none; margin: 0; padding: 6px 0; }
.up-item { display: flex; align-items: center; gap: 12px; padding: 10px 16px; border-top: 1px solid rgba(255, 255, 255, .06); }
.up-item:first-child { border-top: 0; }
.up-item.live { background: rgba(80, 200, 120, .08); }
.up-emoji { font-size: 1.5rem; width: 1.6em; text-align: center; flex: none; }
.up-main { flex: 1; min-width: 0; display: grid; gap: 2px; }
.up-main b a { color: inherit; text-decoration: none; }
.up-main b a:hover { text-decoration: underline; }
.up-when { flex: none; font-variant-numeric: tabular-nums; font-weight: 600; white-space: nowrap; }
.up-day .section-head h2 { font-size: 1.05rem; }

/* Saved fireworks: filters and collections */
.fwe-filter { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.fwe-filter input[type=search] { flex: 1 1 140px; min-width: 0; }
.fwe-filter select { width: auto; }
.fwe-limit { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; flex-basis: 100%; }
.fwe-group { margin-bottom: 8px; }
.fwe-group > summary { cursor: pointer; padding: 6px 2px; list-style: revert; }
.fwe-group-list { display: grid; gap: 8px; margin-top: 4px; }
.fwe-move { width: auto; max-width: 150px; }

/* Teleport everyone to a spot and back */
.gather-box { display: grid; gap: 8px; margin: 6px 0; }
.gather-pick { display: grid; gap: 8px; padding: 10px 12px; border-radius: 12px; background: rgba(90, 200, 255, .06); border: 1px solid rgba(90, 200, 255, .2); }
.gather-pick .btn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.gather-pick select { width: auto; }
.gather-map { position: relative; height: 240px; border-radius: 10px; overflow: hidden; }
.gather-map .rm-canvas { width: 100%; height: 100%; display: block; }

/* Compatibility check */
.ck-intro p { margin: 0 0 8px; }
.ck-summary { font-size: 1.15rem; padding: 12px 16px; border-radius: 12px; margin-bottom: 10px; }
.ck-summary.ok { background: rgba(80, 200, 120, .12); }
.ck-summary.bad { background: rgba(224, 80, 63, .14); }
.ck-area { font-size: 1rem; margin: 16px 0 6px; }
.ck-list { list-style: none; margin: 0; padding: 4px 0; }
.ck-row { display: flex; gap: 12px; padding: 8px 14px; border-top: 1px solid rgba(255, 255, 255, .06); }
.ck-row:first-child { border-top: 0; }
.ck-mark { width: 1.4em; font-weight: 800; flex: none; text-align: center; }
.ck-row.ok .ck-mark { color: #6fdc8c; }
.ck-row.bad .ck-mark { color: #ff7b6b; }
.ck-row.skip .ck-mark { color: var(--muted, #9aa); }
.ck-main { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ck-main pre { white-space: pre-wrap; word-break: break-word; }
.ck-fix { color: #ffd36b; }

/* Fishing journal */
.fq-light_purple { color: #ff55ff; }
.fj-players { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.fj-players .chip-btn { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px; background: var(--well); border: 1px solid var(--line); color: inherit; cursor: pointer; font-weight: 600; }
.fj-players .chip-btn.on { border-color: var(--gold); background: rgba(255, 200, 80, .12); }
.fj-head { display: grid; gap: 10px; margin-bottom: 14px; }
.fj-progress { display: grid; gap: 6px; font-size: 1.05rem; }
.fj-bar { height: 10px; border-radius: 999px; background: var(--well); overflow: hidden; }
.fj-bar i { display: block; height: 100%; background: linear-gradient(90deg, #4fb0ff, #7dffb0); }
.fj-stats { display: flex; gap: 18px; }
.fj-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.fj-card { display: grid; gap: 4px; padding: 10px 12px; border-radius: 12px; background: var(--panel, rgba(20, 25, 40, .6)); border: 1px solid var(--line); }
.fj-card:not(.got) { opacity: .7; border-style: dashed; }
.fj-top { display: flex; align-items: center; gap: 8px; }
.fj-unknown { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 8px; background: var(--well); font-weight: 800; color: var(--muted); }
.fj-mine { color: var(--gold); font-weight: 700; }
.fj-recent { list-style: none; margin: 0; padding: 6px 0; }
.fj-recent li { display: flex; align-items: center; gap: 8px; padding: 6px 14px; flex-wrap: wrap; }
.fj-top > :first-child { width: 32px; height: 32px; flex: none; overflow: hidden; }
.fj-top b { line-height: 1.2; }

/* fishing with the Tide mod */
.fj-dark .item-img { filter: brightness(0) opacity(.45); }
.tf-stars { margin-left: auto; color: #e2b24a; font-size: .8rem; letter-spacing: -1px; white-space: nowrap; }
.tf-top { list-style: none; margin: 2px 0 0; padding: 0; display: grid; gap: 2px; font-size: .88rem; }
.tf-top li { display: grid; grid-template-columns: 14px 16px 1fr auto; align-items: center; gap: 6px; }
.tf-top .rank { color: var(--muted); font-weight: 700; }
.tf-tiers { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 210px), 1fr)); }
.tf-tier { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; padding: 8px 10px; border-radius: 10px; background: var(--well); }
.tf-tier .fj-bar { grid-column: 1 / -1; height: 6px; }
.tf-tier.done { outline: 1px solid var(--gold); }
.tf-tier.done b { color: var(--gold); }
.tf-tier > span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tf-tier .tf-stars { margin-left: 4px; }
.tf-tier.done .fj-bar i { background: linear-gradient(90deg, #e2b24a, #ffe08a); }
.tf-level { display: flex; gap: 12px; align-items: center; }
.tf-level > div { flex: 1; display: grid; gap: 4px; }
.tf-lv { font-size: 1.15rem; }
.tf-anglers { list-style: none; margin: 0; padding: 6px 0; }
.tf-anglers li { display: grid; grid-template-columns: minmax(120px, 1fr) auto minmax(0, 1.2fr) 2fr auto; align-items: center; gap: 10px; padding: 6px 14px; }
.tf-anglers .linkish { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; color: inherit; cursor: pointer; padding: 0; font: inherit; text-align: left; }
.tf-anglers .fj-bar { height: 6px; }
@media (max-width: 640px) { .tf-anglers li { grid-template-columns: 1fr auto; } .tf-anglers li > :nth-child(n+3) { grid-column: 1 / -1; } }
.tf-group { margin: 18px 0 8px; font-size: 1rem; display: flex; gap: 8px; align-items: baseline; }
.fj-recent .item { width: 20px; height: 20px; }
.chip-link { color: inherit; text-decoration: none; }
.chip-link:hover { border-color: var(--gold); }

/* family modpack (Mods tab) */
.pk { display: grid; gap: 10px; margin-bottom: 26px; }
.pk h3 { margin: 10px 0 0; font-size: 1rem; }
.pk-steps { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.pk-copy { display: flex; gap: 8px; align-items: center; margin-top: 6px; flex-wrap: wrap; }
.pk-copy code, .pk code { word-break: break-all; }
.pk-list { display: grid; gap: 4px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }
.pk-item { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border-radius: 8px; background: var(--well); }
.pk-item .icon-btn { margin-left: auto; }
.pk-item img, .pk-hit img { border-radius: 4px; flex: none; }
.pk-search { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-search .input[name=q] { flex: 1; min-width: 180px; }
.pk-hits { display: grid; gap: 6px; }
.pk-hit { display: flex; gap: 10px; align-items: center; text-align: left; padding: 8px 10px; border-radius: 10px; background: var(--well); border: 1px solid var(--line); color: inherit; cursor: pointer; font: inherit; }
.pk-hit > span:nth-child(2) { flex: 1; display: grid; }
.pk-hit small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pk-paste textarea { width: 100%; margin: 8px 0; }
.pk .linkish { background: none; border: 0; color: var(--accent, #7dc4ff); cursor: pointer; padding: 0; font: inherit; text-decoration: underline; }
.pk-t { display: grid; min-width: 0; flex: 1; }
.pk-t b, .pk-t small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* fishing reset (admin) */
.tf-reset { display: flex; justify-content: flex-end; margin-top: 10px; }
.fr-form { display: grid; gap: 12px; }
.fr-form .check { display: flex; gap: 10px; align-items: flex-start; }
.fr-form .check span { display: grid; gap: 2px; }
.fr-form .check small { color: var(--muted); }
.row-end { display: flex; justify-content: flex-end; gap: 8px; }