/* Press Start 2P (SIL OFL, see fonts/OFL-PressStart2P.txt), served from here: no third-party font site. */
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/press-start-2p-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Press Start 2P"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/press-start-2p-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* Courier Prime (SIL OFL, see fonts/OFL-CourierPrime.txt): the cozy theme's terminal-style font. */
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/courier-prime-latin-ext-400-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/public/fonts/courier-prime-latin-400-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/public/fonts/courier-prime-latin-ext-700-normal.woff2") format("woff2");
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap;
  src: url("/public/fonts/courier-prime-latin-700-normal.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ---------------------------------------------------------------- design tokens (design/tokens.css)
   Two themes: cozy (light, the default) and gamey (dark). The device's dark setting picks gamey unless the
   person chose a theme with the top-bar button (public/theme.js sets data-theme on <html>).
   The short names below them (--bg, --panel, --grass...) are what the older page styles use: they point at
   the tokens so every tab follows the theme before it is redesigned. */
:root {
  --surface-primary: #f5f1ed;
  --surface-secondary: #fef9f6;
  --surface-tertiary: #f0ece8;
  --text-primary: #2c2c2c;
  --text-secondary: #6b6b6b;
  --text-tertiary: #99999a;
  --brand-primary: #d4a574;
  --brand-secondary: #c9785d;
  --accent-success: #a8d5a8;
  --accent-warning: #f4c77a;
  --accent-danger: #e88d8d;
  --border-light: #e8e4e0;
  --border-strong: #ddd6d0;
  --overlay-dark: rgba(44, 44, 44, 0.5);
  --space-2: 8px; --space-4: 16px; --space-6: 24px; --space-8: 32px; --space-12: 48px; --space-16: 64px;
  --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 999px;
  --shadow-sm: 0 2px 4px rgba(90, 60, 30, 0.10);
  --shadow-md: 0 4px 8px rgba(90, 60, 30, 0.14);
  --shadow-lg: 0 8px 16px rgba(90, 60, 30, 0.18);
  --shadow-xl: 0 12px 24px rgba(90, 60, 30, 0.24);
  --font-body: "Courier Prime", "Courier New", ui-monospace, monospace;
  --font-display: "Courier Prime", "Courier New", ui-monospace, monospace;
  --display-scale: 1;            /* the pixel font runs wide: gamey shrinks display text */
  --on-brand: #2c2c2c;           /* text on a brand-primary button */
  --brand-hover: #dcb487;
  --focus-ring: 0 0 0 3px rgba(212, 165, 116, 0.45);
  --code-bg: #f3ebe2;
  --ok-text: #3f7d3f;            /* readable versions of the accents, for text on the page */
  --warn-text: #9a6512;
  --bad-text: #b23c3c;
  --tag-bg: #f1dcc8; --tag-text: #7a4a2e;

  /* the older names */
  --bg: var(--surface-primary);
  --panel: var(--surface-secondary);
  --panel-2: var(--surface-tertiary);
  --line: var(--border-strong);
  --text: var(--text-primary);
  --muted: var(--text-secondary);
  --grass: #5fa35f;
  --grass-dark: var(--accent-success);
  --dirt: var(--brand-secondary);
  --gold: #e3a940;
  --red: #d9534f;
  --blue: #3b8fd0;
  --radius: var(--radius-lg);
  --shadow: var(--shadow-sm);
  --navbar-line: var(--brand-secondary);
  --topbar-h: 64px;
  --menu-w: 232px;
  --menu-line-1: #7fb77f; --menu-line-2: #e3a940; --menu-line-3: #6aa9d8;
  --menu-line-4: #d98080; --menu-line-5: #a58bc9; --menu-line-6: #d4a574;
  --pixel-font: var(--font-display);
  font-family: var(--font-body);
  color-scheme: light;
}
/* gamey: greys, Minecraft green for buttons, purple for tags and bars */
:root[data-theme="gamey"] {
  --surface-primary: #1a1a1a;
  --surface-secondary: #2d2d2d;
  --surface-tertiary: #3d3d3d;
  --text-primary: #f0f0f0;
  --text-secondary: #b0b0b0;
  --text-tertiary: #808080;
  --brand-primary: #6cd56c;
  --brand-secondary: #9b4f9b;
  --accent-success: #5dd65d;
  --accent-warning: #ffc857;
  --accent-danger: #ff6b6b;
  --border-light: #4a4a4a;
  --border-strong: #5a5a5a;
  --overlay-dark: rgba(0, 0, 0, 0.7);
  --shadow-sm: 0 2px 0 rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 0 rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 6px 0 rgba(0, 0, 0, 0.5), 0 0 0 2px rgba(108, 213, 108, 0.35);
  --shadow-xl: 0 10px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(108, 213, 108, 0.35);
  --font-body: ui-rounded, "SF Pro Rounded", "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Press Start 2P", "Courier New", monospace;
  --display-scale: .72;
  --on-brand: #1a1a1a;
  --brand-hover: #84e184;
  --focus-ring: 0 0 0 3px rgba(108, 213, 108, 0.55);
  --code-bg: #121212;
  --ok-text: #6cd56c;
  --warn-text: #ffc857;
  --bad-text: #ff8a8a;
  --tag-bg: #9b4f9b; --tag-text: #fff;
  --grass: #6cd56c;
  --grass-dark: #3fa83f;
  --dirt: #c17f3f;
  --gold: #ffc857;
  --red: #ff6b6b;
  --blue: #4fc3f7;
  --navbar-line: var(--brand-secondary);
  --menu-line-1: #34d399; --menu-line-2: #fbbf24; --menu-line-3: #38bdf8;
  --menu-line-4: #fb7185; --menu-line-5: #a78bfa; --menu-line-6: #fb923c;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--text); font-size: 16px; }
h2 { font-size: 1.1rem; margin: 0; }
h3 { font-size: 1rem; margin: 18px 0 8px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.top { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: var(--topbar-h); background: var(--panel);
  border-bottom: 3px solid var(--navbar-line);
  /* the shadow sits below the purple seam, so the bar reads as a layer floating over the page */
  box-shadow: 0 6px 12px -5px rgba(0, 0, 0, .65);
  position: sticky; top: 0; z-index: 20; flex-wrap: nowrap; }
.brand { font-family: var(--pixel-font); font-weight: 800; font-size: .78rem; display: flex; align-items: center; gap: 0; white-space: nowrap; color: #fff; }
.brand-family { color: var(--gold); }
.brand-forge { color: #c084fc; }

/* ---------------------------------------------------------------- side menu (launcher-style, with submenus) */
.shell { display: flex; align-items: flex-start; }
.side-menu { width: var(--menu-w); flex: 0 0 var(--menu-w); background: var(--panel);
  border-right: 2px solid var(--line); position: sticky; top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h)); overflow-y: auto; padding: 6px 0 16px; }
.menu-group { border-bottom: 1px solid var(--line); }
.menu-group:last-child { border-bottom: 0; }
/* the color bar marks the main section (Play / Family / Server); a different accent per group */
.menu-group-title { cursor: pointer; list-style: none; padding: 10px 14px; font-weight: 700; font-size: .78rem;
  text-transform: uppercase; letter-spacing: .08em; color: #fff; user-select: none;
  border-bottom: 2px solid var(--menu-line-1); }
.side-menu > .menu-group:nth-of-type(6n+1) > .menu-group-title { border-bottom-color: var(--menu-line-1); }
.side-menu > .menu-group:nth-of-type(6n+2) > .menu-group-title { border-bottom-color: var(--menu-line-2); }
.side-menu > .menu-group:nth-of-type(6n+3) > .menu-group-title { border-bottom-color: var(--menu-line-3); }
.side-menu > .menu-group:nth-of-type(6n+4) > .menu-group-title { border-bottom-color: var(--menu-line-4); }
.side-menu > .menu-group:nth-of-type(6n+5) > .menu-group-title { border-bottom-color: var(--menu-line-5); }
.side-menu > .menu-group:nth-of-type(6n+6) > .menu-group-title { border-bottom-color: var(--menu-line-6); }
.menu-group-title::before { content: ""; display: inline-block; width: 0; }
.menu-items { display: flex; flex-direction: column; }
/* subsections stay plain: no color bar, just a faint divider so rows are still distinct */
.side-menu button[role="tab"] { display: block; width: 100%; text-align: left; background: none; border: 0;
  border-bottom: 1px solid var(--line); padding: 10px 16px; cursor: pointer; color: var(--muted);
  font-family: var(--pixel-font); font-size: .62rem; line-height: 1.5; letter-spacing: .02em; text-transform: uppercase; }
.menu-items button:last-child { border-bottom: 0; }
.menu-items button:hover { background: var(--panel-2); color: var(--text); }
.side-menu button[role="tab"][aria-selected="true"] { background: var(--panel-2); color: var(--text);
  box-shadow: inset 3px 0 0 var(--grass); }
/* a tab this server can't do without file/Docker access (an RCON-only server); title explains why */
.side-menu button[role="tab"].cap-disabled { opacity: .4; cursor: not-allowed; }
.side-menu button[role="tab"].cap-disabled:hover { background: none; color: var(--muted); }
.me { margin-left: auto; display: flex; align-items: center; gap: 10px; color: var(--muted); font-family: var(--pixel-font); font-size: .62rem; }
.me button, .me select, .me label { font-family: var(--pixel-font); font-size: .62rem; }
.me input { width: 130px; background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: 5px 8px; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: var(--muted); display: inline-block; }
.dot.ok { background: var(--grass); } .dot.bad { background: var(--red); }

main { padding: 16px; min-width: 0; flex: 1 1 auto; }
.tab { display: grid; grid-template-columns: 280px 1fr; gap: 16px; align-items: start; }
.side { background: var(--panel); border-radius: var(--radius); padding: 12px; position: sticky; top: calc(var(--topbar-h) + 16px); max-height: calc(100vh - var(--topbar-h) - 32px); overflow: auto; }
.combined-side { height: calc(100vh - var(--topbar-h) - 32px); overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.resource-pane { flex: 1 1 50%; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
#live-mobs { width: 100%; margin-bottom: 2px; }
.live-mobs { width: 100%; }
.resource-list { min-height: 0; overflow-y: auto; }
.side-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 10px; gap: 8px; }
.work { background: var(--panel); border-radius: var(--radius); padding: 16px; min-height: 60vh; }
.work.single { grid-column: 1 / -1; }
.empty { color: var(--muted); text-align: center; padding: 80px 20px; font-size: 1.1rem; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.cards li { background: var(--panel-2); border-radius: 8px; padding: 10px 12px; cursor: pointer; border: 2px solid transparent; }
.cards li:hover { border-color: var(--line); }
.cards li.active { border-color: var(--grass); }
.cards .name { font-weight: 700; }
.cards .sub { color: var(--muted); font-size: .85rem; margin-top: 3px; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.finding-marks { color: var(--gold); font-weight: 700; white-space: nowrap; }

.badge { font-size: .75rem; padding: 2px 7px; border-radius: 99px; background: var(--line); font-weight: 700; white-space: nowrap; }
.badge.published { background: var(--grass-dark); }
.badge.published-but-changed { background: #8a6a1e; }
.badge.draft { background: #4b5563; }
.badge.external { background: #3b4f6b; }
.check-ok { color: var(--grass); }
.chat-server-tag { display: inline-block; margin-left: 4px; padding: 1px 5px; border-radius: 99px; background: var(--blue); color: #10202a; font-size: .68rem; font-weight: 800; vertical-align: middle; }
.registry-only > *:not(#server-registry):not(#server-archived) { display: none; }
.server-remove { margin-top: .5rem; }
.archived-server { border-top: 1px solid var(--line, #ddd); padding: .5rem 0; }
.archived-server ul { margin: .25rem 0; }
.no-server-banner { margin: .5rem 1rem; }
.check-fail { color: var(--red); }

.container-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-top: 10px; }
.container-metric { background: var(--panel-2); border: 1px solid var(--line); border-radius: 9px; padding: 10px; }
.container-metric h4 { margin: 0 0 9px; color: var(--text); overflow-wrap: anywhere; }
.metric-grid { display: grid; gap: 8px; }
.metric-grid > div { display: grid; grid-template-columns: 72px 1fr auto; align-items: center; gap: 7px; font-size: .82rem; }
.metric-grid b { color: var(--muted); font-size: .72rem; text-transform: uppercase; }
.metric-meter { height: 9px; min-width: 55px; background: var(--bg); border-radius: 99px; overflow: hidden; }
.metric-fill { display: block; height: 100%; border-radius: inherit; background: var(--grass); transition: width .25s ease; }
.metric-fill.blue { background: var(--blue); }
.metric-number, .metric-detail { color: var(--text); white-space: nowrap; text-align: right; }
.metric-detail { grid-column: 2 / -1; color: var(--muted); overflow-wrap: anywhere; }

.btn { background: var(--panel-2); border: 0; border-radius: 8px; padding: 9px 14px; font-weight: 700; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .05s; }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.primary { background: var(--grass); color: #10200a; }
.btn.gold { background: var(--gold); color: #2a1e00; }
.btn.danger { background: var(--red); color: #fff; }
.btn.small { padding: 5px 9px; font-size: .85rem; }
.btn:disabled { opacity: .45; cursor: not-allowed; transform: none; }
.row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.drop { display: block; border: 3px dashed var(--line); border-radius: var(--radius); padding: 22px 10px; text-align: center; cursor: pointer; margin-bottom: 12px; color: var(--muted); }
.drop b { color: var(--text); }
.drop.over { border-color: var(--grass); background: rgba(109, 187, 69, .08); }

.split { display: grid; grid-template-columns: minmax(280px, 1.1fr) 1fr; gap: 16px; }
.viewer { height: 380px; background: radial-gradient(circle at 50% 30%, #3d4a35, #1a2016); border-radius: var(--radius); position: relative; overflow: hidden; }
.viewer canvas { width: 100% !important; height: 100% !important; display: block; }
.anims { margin-top: 8px; }
.anims .btn.on { background: var(--blue); color: #061525; }
.title-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.title-row h2 { font-size: 1.4rem; }
.facts { color: var(--muted); font-size: .9rem; margin: 8px 0; }

.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.findings li { padding: 8px 10px; border-radius: 8px; background: var(--panel-2); border-left: 5px solid var(--muted); }
.findings li.error { border-color: var(--red); }
.findings li.warning { border-color: var(--gold); }
.findings li.info { border-color: var(--blue); }
.findings .fix { color: var(--muted); font-size: .88rem; margin-top: 3px; }
.allgood { padding: 10px 12px; background: rgba(109, 187, 69, .15); border-radius: 8px; border-left: 5px solid var(--grass); font-weight: 700; }

.field { display: grid; gap: 4px; margin-bottom: 12px; }
.field label { font-weight: 700; font-size: .92rem; display: flex; justify-content: space-between; }
.field .hint { color: var(--muted); font-size: .82rem; }
.server-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0 18px; margin-top: 10px; }
#mail-in-more { display: contents; }
#mail-in-more[hidden] { display: none; }
.field input[type=text], .field input[type=password], .field select, .field input[type=number] { background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: 7px 9px; width: 100%; }
.field input[type=range] { width: 100%; accent-color: var(--grass); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.checks label { background: var(--panel-2); padding: 7px 9px; border-radius: 8px; cursor: pointer; display: flex; gap: 8px; align-items: center; }
.drops .drop-row { display: grid; grid-template-columns: 1fr 70px 80px auto; gap: 6px; margin-bottom: 6px; }
.drops input { background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: 6px 8px; width: 100%; }

.code { position: relative; }
.code textarea { width: 100%; min-height: 160px; background: #11150e; border: 2px solid var(--line); border-radius: 8px; padding: 10px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.45; tab-size: 2; resize: vertical; }
.code textarea.bad { border-color: var(--red); }
pre.yaml { background: #11150e; border-radius: 8px; padding: 10px; font-size: 13px; overflow: auto; max-height: 340px; margin: 0; }
.yk { color: #9fd67a; } .yc { color: #7d8a70; } .ys { color: #f2c14e; } .yn { color: #7cc4ff; }

.steps { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 6px; }
.steps li { padding: 8px 10px; background: var(--panel-2); border-radius: 8px; display: flex; gap: 10px; }
.steps .ic { width: 22px; text-align: center; font-weight: 900; }
.steps .ok .ic { color: var(--grass); } .steps .failed .ic { color: var(--red); } .steps .skipped .ic { color: var(--muted); }
.steps .detail { color: var(--muted); font-size: .88rem; word-break: break-word; }

table.versions { width: 100%; border-collapse: collapse; font-size: .92rem; }
table.versions td, table.versions th { padding: 6px 8px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
table.versions th { color: var(--muted); font-weight: 600; }
.diff { font-family: ui-monospace, Menlo, monospace; font-size: 13px; background: #11150e; border-radius: 8px; padding: 8px; max-height: 300px; overflow: auto; white-space: pre; }
.diff .add { color: #9fd67a; background: rgba(109, 187, 69, .12); display: block; }
.diff .del { color: #ff9a92; background: rgba(229, 83, 75, .12); display: block; }

.status-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
.status-card { background: var(--panel-2); border-radius: var(--radius); padding: 14px; border-left: 6px solid var(--muted); }
.status-card.ok { border-color: var(--grass); } .status-card.bad { border-color: var(--red); }
.log-work { height: calc(100vh - 150px); min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 12px; }
.log-status, .log-history { min-height: 0; overflow: hidden; }
.log-status { flex: 0 0 auto; }
.log-history { flex: 1 1 auto; display: flex; flex-direction: column; }
.log-history h2 { flex: 0 0 auto; margin-bottom: 10px; }
.log-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; }

.modal-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .55); display: grid; place-items: center; z-index: 20; padding: 16px; }
.modal { background: var(--panel); border-radius: var(--radius); padding: 18px; width: min(560px, 100%); border-top: 5px solid var(--grass); }
.tpl { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0; max-height: min(50vh, 360px); overflow-y: auto; }
.tpl button { text-align: left; padding: 12px; }

#toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel-2); border: 2px solid var(--line); padding: 10px 16px; border-radius: 10px; opacity: 0; transition: opacity .2s; pointer-events: none; max-width: 90vw; z-index: 30; }
#toast.show { opacity: 1; }
#toast.bad { border-color: var(--red); }

@media (max-width: 900px) {
  .tab { grid-template-columns: 1fr; }
  .side { position: static; max-height: none; }
  .combined-side { height: 70vh; }
  .split, .grid2, .checks { grid-template-columns: 1fr; }
  .me { margin-left: 0; }
}
.tab > *, .split > *, .grid2 > * { min-width: 0; }
.work { overflow-x: auto; }
.log-work { overflow-x: hidden; }
@media (max-width: 900px) { main { padding: 10px; } .drops .drop-row { grid-template-columns: 1fr 56px 64px auto; } }
.lang { background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: 5px 6px; font-weight: 700; }
.rename-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1.2fr); gap: 8px; align-items: center; margin-bottom: 6px; }
.rename-row .old { color: var(--muted); overflow: hidden; text-overflow: ellipsis; }
.rename-row input { background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: 6px 8px; width: 100%; }
.rename-row input.changed { border-color: var(--gold); }
#renames .facts { margin-top: 0; }
#rename-save { margin-top: 4px; }
.cleanup { width: 100%; margin-bottom: 10px; }
.clean-list { display: grid; gap: 6px; max-height: 50vh; overflow: auto; }
.clean-row { display: flex; justify-content: space-between; align-items: center; gap: 8px; background: var(--panel-2); padding: 8px 10px; border-radius: 8px; }
.map-work { padding: 0; overflow: hidden; display: flex; flex-direction: column; min-height: calc(100vh - 110px); }
.map-bar { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 8px 12px; }
iframe.map { flex: 1; width: 100%; border: 0; min-height: 70vh; background: #000; }

/* ---------------------------------------------------------------- login portal */
.portal { min-height: 100vh; display: grid; place-items: center; padding: 16px;
  background: radial-gradient(circle at 50% 0%, #2f3b27 0%, var(--bg) 60%); }
.portal-box { width: min(560px, 100%); background: var(--panel); border-radius: 16px; padding: 22px;
  border-top: 6px solid var(--grass); box-shadow: 0 10px 30px rgba(0, 0, 0, .4); }
.portal-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.portal-top h1 { font-size: 1.5rem; margin: 0; flex: 1; }
.portal-box h2 { font-size: 1.3rem; margin: 6px 0 8px; }
.portal-form { display: grid; gap: 12px; margin-top: 10px; }
.portal-form label { display: grid; gap: 5px; font-weight: 700; }
.portal-form input, .row input, .row select, .copyline code, .link-row input {
  background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: 9px 10px; min-width: 0; }
.portal-form input:focus, .row input:focus, .link-row input:focus { outline: none; border-color: var(--grass); }
.portal-error { color: #ffb4ae; min-height: 1.3em; font-weight: 700; }
.captcha-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; width: min(300px, 100%); margin: 2px auto; padding: 5px; background: #c6c6c6; border: 3px solid #373737;
  border-right-color: #fff; border-bottom-color: #fff; border-radius: 2px; }
.captcha-tile { aspect-ratio: 1; min-width: 0; display: grid; place-items: center; padding: 2px; cursor: pointer; background: #8b8b8b; border: 2px solid #373737;
  border-right-color: #fff; border-bottom-color: #fff; border-radius: 0; }
.captcha-tile:hover, .captcha-tile:focus-visible { background: #a3a3a3; outline: none; }
.captcha-tile.selected { background: #c5f5c5; outline: 2px solid var(--brand-primary); outline-offset: -2px; }
.captcha-tile img { width: 62%; max-width: 28px; image-rendering: pixelated; }
.btn.big { padding: 12px 18px; font-size: 1.05rem; }
.profiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; margin-top: 12px; }
.profile { display: grid; justify-items: center; gap: 6px; padding: 18px 10px; border-radius: 14px; cursor: pointer;
  background: var(--panel-2); border: 3px solid transparent; box-shadow: var(--shadow); }
.profile:hover, .profile:focus-visible { border-color: var(--grass); outline: none; }
.profile.parent { border-color: var(--dirt); }
.avatar { width: 64px; height: 64px; border-radius: 12px; display: grid; place-items: center; font-size: 2rem; font-weight: 800;
  background: var(--grass-dark); box-shadow: inset 0 -10px 0 var(--dirt); }
.avatar.small { width: 30px; height: 30px; font-size: 1rem; border-radius: 7px; box-shadow: inset 0 -5px 0 var(--dirt); }
.profile.parent .avatar { background: #5b6b8c; }
.pname { font-weight: 800; font-size: 1.1rem; }
.prole { color: var(--muted); font-size: .85rem; }
.pin-dots { display: flex; gap: 12px; justify-content: center; margin: 14px 0 6px; }
.pin-dots span { width: 18px; height: 18px; border-radius: 50%; border: 3px solid var(--line); }
.pin-dots span.on { background: var(--grass); border-color: var(--grass); }
.pinpad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 10px auto 14px; max-width: 300px; }
.pinpad button { font-size: 1.6rem; font-weight: 800; padding: 16px 0; border-radius: 12px; border: 0; cursor: pointer;
  background: var(--panel-2); box-shadow: var(--shadow); }
.pinpad button:active { transform: translateY(2px); box-shadow: none; }
.pinpad button.ok { background: var(--grass); color: #10200a; }
.pinpad button:disabled { opacity: .4; cursor: not-allowed; }

/* ---------------------------------------------------------------- app additions */
.me-name { font-weight: 700; color: var(--text); }
.me-voice { background: none; border: 0; cursor: pointer; font-size: 1.1em; padding: 0 4px; }
.me-voice:disabled { opacity: .5; cursor: progress; }
.btn.armed { background: var(--gold); color: #2a2000; }
.row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0; }
.card { background: var(--panel-2); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0; }
.card .title-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.warning { color: #ffd98a; margin: 6px 0; }
.badge.changed { background: #8a6a1e; }
.plugin.off { opacity: .75; }
.plugin-upload { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0; }
.family, .players { display: grid; grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); gap: 12px; }
.person, .player { margin: 0; }
.link-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 8px 0; }
.link-row input { width: 170px; }
.chip { border-radius: 99px; }
label.check { display: flex; align-items: center; gap: 6px; color: var(--muted); }
.stats { font-size: .95rem; margin: 6px 0; }
.stats-players { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 12px; }
.stats-player { margin: 0; }
.stats-player h3 { margin-top: 0; color: var(--text); text-transform: none; letter-spacing: 0; }
.stats-table { margin-top: 8px; }
.stats-scroll { overflow-x: auto; max-width: 100%; }
.stats-sort { background: none; border: 0; color: inherit; font-weight: 700; cursor: pointer; padding: 0; white-space: nowrap; }
.stats-table td[data-stat] { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.stats-table th, .stats-table td { padding: 6px 8px; }
.stats-player-name { white-space: nowrap; }
.row input[type="number"] { width: 90px; }
.xyz { display: inline-flex; gap: 6px; }
.xyz input { width: 80px !important; }
.places { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.log { width: 100%; border-collapse: collapse; font-size: .92rem; }
.log th, .log td { text-align: left; padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.log tr.bad td { color: #ffb4ae; }
.map-steps { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0; counter-reset: step; }
.map-steps li { counter-increment: step; padding: 8px 12px; border-radius: 99px; background: var(--panel-2); color: var(--muted); font-weight: 700; }
.map-steps li::before { content: counter(step) ". "; }
.map-steps li.done { background: var(--grass-dark); color: var(--text); }
.map-steps li.done::before { content: "✔ "; }
.map-steps li.now { background: var(--gold); color: #2a2000; }
.map-state { background: var(--panel-2); border-radius: var(--radius); padding: 14px; }
.map-state h3 { margin-top: 0; color: var(--text); text-transform: none; letter-spacing: 0; font-size: 1.1rem; }
.copyline { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0; }
.copyline code { font-family: ui-monospace, Menlo, monospace; font-size: .9rem; overflow-wrap: anywhere; }

@media (max-width: 600px) {
  .top { gap: 8px; padding: 0 10px; }
  .shell { flex-direction: column; }
  .side-menu { width: 100%; flex-basis: auto; position: static; height: auto; max-height: 42vh;
    border-right: 0; border-bottom: 2px solid var(--line); }
  .me { margin-left: auto; gap: 6px; min-width: 0; flex-wrap: wrap; justify-content: flex-end; }
  .brand { min-width: 0; }
  .family, .players { grid-template-columns: 1fr; }
  .link-row input, .row input { flex: 1 1 120px; }
  .log thead { display: none; }
  .log tr { display: grid; grid-template-columns: 1fr 1fr; padding: 6px 0; border-bottom: 1px solid var(--line); }
  .log td { border: 0; padding: 2px 4px; }
  .portal-box { padding: 16px; }
  .profiles { grid-template-columns: repeat(2, 1fr); }
}

.map-mode { margin-top: 14px; }
.map-mode-box { margin-top: 10px; }
.map-mode-box summary { cursor: pointer; color: var(--muted); font-weight: 700; }

/* ---------------------------------------------------------------- EliteMobs editor */
.em-form { display: grid; gap: 10px; }
.em-card { background: var(--panel-2); border-radius: var(--radius); padding: 0; }
.em-card > summary { cursor: pointer; padding: 12px 14px; font-weight: 800; list-style: none; }
.em-card > summary::before { content: "▸ "; color: var(--muted); }
.em-card[open] > summary::before { content: "▾ "; }
.em-body { padding: 0 14px 14px; }
.em-body h4 { margin: 12px 0 6px; color: var(--muted); font-size: .9rem; }
.em-body select, .em-body input[type="text"], .em-body input[type="number"], .em-body textarea {
  background: var(--bg); border: 2px solid var(--line); border-radius: 8px; padding: 7px 9px; width: 100%; }
.em-body textarea { resize: vertical; font: inherit; }
.em-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0; padding: 8px; background: var(--bg); border-radius: 8px; }
.em-row select { flex: 1 1 200px; width: auto; }
.em-row .mini { display: flex; align-items: center; gap: 6px; color: var(--muted); font-size: .9rem; }
.em-row .mini input[type="number"] { width: 70px; }
.checks label.off { opacity: .55; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip-check { background: var(--bg); border-radius: 99px; padding: 5px 10px; font-size: .9rem; cursor: pointer; }
.swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.swatch input { display: none; }
.swatch span { display: block; width: 26px; height: 26px; border-radius: 6px; border: 3px solid transparent; cursor: pointer; }
.swatch input:checked + span { border-color: var(--text); }
.c-white span { background: #fff; } .c-yellow span { background: #ff5; } .c-gold span { background: #fa0; }
.c-red span { background: #f55; } .c-dark_red span { background: #a00; } .c-pink span { background: #f5f; }
.c-purple span { background: #a0a; } .c-blue span { background: #55f; } .c-aqua span { background: #5ff; }
.c-green span { background: #5f5; } .c-dark_green span { background: #0a0; } .c-gray span { background: #aaa; }

.em-row .loot-find { flex: 0 1 150px; width: 150px; }
.drop-row select { min-width: 0; }

/* Admin tab: one line per player (owner request, Sprint 5). Wraps inside the row on phones; the page never scrolls sideways. */
.plist { display: flex; flex-direction: column; gap: 6px; }
.prow { display: grid; grid-template-columns: minmax(120px, 1.2fr) 90px 70px 60px minmax(130px, 1fr) 120px minmax(300px, 3fr); gap: 8px; align-items: center;
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel-2); }
.prow.phead { background: transparent; border: none; font-weight: 600; font-size: .85em; padding-bottom: 0; }
.player-face { width: 28px; height: 28px; border-radius: 4px; object-fit: cover; vertical-align: middle; margin-right: 6px; background: var(--panel-2); image-rendering: pixelated; }
.player-face-fallback { display: inline-grid; place-items: center; color: var(--muted); font-weight: 800; }
.prow .pc-actions { display: flex; flex-wrap: nowrap; gap: 6px; align-items: center; white-space: nowrap; }
.prow .grp { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.prow .grp select { max-width: 150px; }
.prow .grp input[type=number] { width: 58px; }
.prow .grp input[data-f=place], .prow .grp input[data-f=text] { width: 110px; }
@media (max-width: 1100px) {
  .prow { grid-template-columns: 1fr auto auto auto; }
  .prow.phead { display: none; }
  .prow .pc-name { grid-column: 1 / -1; }
  .player-face { width: 24px; height: 24px; }
  .prow .pc-actions { grid-column: 1 / -1; flex-wrap: wrap; white-space: normal; }
}
@media (max-width: 480px) {
  .prow { grid-template-columns: 1fr 1fr; }
  .prow .grp select, .prow .grp input[data-f=place], .prow .grp input[data-f=text] { max-width: 100%; flex: 1 1 120px; }
}

/* Share dialog (import / export) */
.modal.share { width: min(900px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.modal.share .row { flex-wrap: wrap; }
.share-btn { margin: 0 0 8px; }
.report input.sh-id { width: 150px; max-width: 100%; }
.report td { word-break: break-word; }
.ok-box { background: var(--grass-dark); border-radius: var(--radius); padding: 8px 12px; margin: 8px 0; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
@media (max-width: 600px) {
  table.report thead { display: none; }
  table.report tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.report td { display: block; border: none; padding: 2px 0; }
}
.modal.share a.btn { color: var(--text); text-decoration: none; }

/* Help popups (Sprint 5 task 04) */
.help-popover { position: absolute; z-index: 40; background: #fff8d6; color: #2a2410; border-radius: 8px; padding: 8px 10px;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .45); font-size: .9rem; line-height: 1.35; pointer-events: none; }
.help-q { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--panel-2); color: var(--muted); font-size: .75rem; font-weight: 700; cursor: help;
  vertical-align: middle; }
.help-q:focus-visible { outline: 2px solid var(--gold); }
@media (hover: none) { .help-q { width: 26px; height: 26px; font-size: .85rem; } }

/* Mob preview (Sprint 5 task 05) */
.look-stage { position: relative; min-height: 120px; }
.look-stage .viewer { min-height: 260px; }
.nametag { position: absolute; top: 8px; left: 50%; transform: translateX(-50%); z-index: 2; max-width: 90%;
  padding: 2px 8px; background: rgba(0, 0, 0, .45); border-radius: 3px; font-family: "Minecraft", monospace; font-size: 1rem;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, .6); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.look-placeholder + .nametag, .look-placeholder:not([hidden]) ~ .nametag { position: static; }
.nametag.nt-faint { opacity: .55; }
.nametag.nt-gone { text-decoration: line-through; opacity: .5; }
.look-placeholder { display: flex; gap: 12px; align-items: center; padding: 48px 16px 18px; border: 2px dashed var(--line);
  border-radius: var(--radius); color: var(--muted); }
.look-placeholder .ph-icon { font-size: 2.2rem; filter: grayscale(1); }
.nt-black { color: #000; } .nt-dark_blue { color: #00a; } .nt-dark_green { color: #0a0; } .nt-dark_aqua { color: #0aa; }
.nt-dark_red { color: #a00; } .nt-dark_purple { color: #a0a; } .nt-gold { color: #fa0; } .nt-gray { color: #aaa; }
.nt-dark_gray { color: #555; } .nt-blue { color: #55f; } .nt-green { color: #5f5; } .nt-aqua { color: #5ff; }
.nt-red { color: #f55; } .nt-light_purple { color: #f5f; } .nt-yellow { color: #ff5; } .nt-white { color: #fff; }
.slots { display: flex; flex-wrap: wrap; gap: 6px; }
.slot { position: relative; width: 64px; min-height: 64px; padding: 4px 2px; border: 3px solid #373737; border-right-color: #fff4;
  border-bottom-color: #fff4; background: #8b8b8b; color: #1b1b1b; display: flex; flex-direction: column; align-items: center;
  font-size: .68rem; text-align: center; line-height: 1.1; }
.slot.empty { opacity: .55; }
.slot-icon { font-size: 1.6rem; line-height: 1.3; }
.slot-count { position: absolute; right: 4px; top: 26px; font-weight: 700; color: #fff; text-shadow: 1px 1px 0 #000; }
.slot-chance { font-weight: 700; }
.slot.t-diamond { background: #6fd3d0; } .slot.t-golden { background: #e8c75a; } .slot.t-iron { background: #c9c9c9; }
.slot.t-netherite { background: #6b5f63; color: #fff; } .slot.t-leather { background: #b07b50; } .slot.t-chainmail { background: #9a9a9a; }
.slot.t-wooden { background: #a88654; } .slot.t-stone { background: #9c9c9c; } .slot.t-turtle { background: #7fbf6a; }
.look h4 { margin: 12px 0 6px; color: var(--muted); }
.em-form, .em-form > *, .em-body, .em-body > * { min-width: 0; }
.em-row { flex-wrap: wrap; }
.em-body select, .em-row select, .em-row input[type=search] { max-width: 100%; min-width: 0; }

/* Worlds tab (Sprint 5 task 09): rows stack on phones */
table.worlds .wl-copy-name { width: 150px; max-width: 100%; }
@media (max-width: 600px) {
  table.worlds thead { display: none; }
  table.worlds tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.worlds td { display: block; border: none; padding: 2px 0; }
  table.worlds td.row { display: flex; flex-wrap: wrap; gap: 6px; }
  #wl-add input { flex: 1 1 100%; min-width: 0; }
}

/* Whitelist tab: rows stack on phones */
@media (max-width: 600px) {
  table.wl-table thead { display: none; }
  table.wl-table tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.wl-table td { display: block; border: none; padding: 2px 0; }
  #wl-add-form input, #wl-add-form select { flex: 1 1 100%; min-width: 0; }
}

/* Settings tab */
.set-row { display: grid; grid-template-columns: 1fr minmax(180px, 280px); gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); }
.set-row:last-child { border-bottom: none; }
.set-control { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.set-control input[type=text] { width: 100%; }
.set-control input[type=number] { width: 90px; }
@media (max-width: 600px) {
  .set-row { grid-template-columns: 1fr; }
  table.set-history thead { display: none; }
  table.set-history tr { display: block; border-bottom: 1px solid var(--line); padding: 6px 0; }
  table.set-history td { display: block; border: none; padding: 2px 0; }
}

/* Backups tab */
.warning-card { border-left: 4px solid var(--gold); }
@media (max-width: 600px) {
  table.bk-table thead { display: none; }
  table.bk-table tr { display: block; border-bottom: 1px solid var(--line); padding: 8px 0; }
  table.bk-table td { display: block; border: none; padding: 2px 0; }
  table.bk-table td.row { display: flex; flex-wrap: wrap; gap: 6px; }
}

/* Voice stays visible in Chat, while its connection lives in app/static/app/voice.js. */
.voice-panel { margin-top: 0; padding: 10px 8px; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); }
.voice-panel h3 { margin: 0; font-size: .85rem; }
.voice-panel .actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.voice-panel .btn { padding: 6px 8px; font-size: .78rem; }
.voice-recording-participant { display: flex; align-items: center; gap: 8px; margin-top: 8px; padding: 8px; border-radius: 8px; background: var(--warning-bg); color: var(--text); font-size: .82rem; }
.voice-recording-participant b { color: var(--accent); }

/* Chat tab */
.chat-shell { height: calc(100vh - 150px); min-height: 420px; display: flex; flex-direction: column; gap: 10px; }
.chat-head { flex: 0 0 auto; }
.chat-upper { flex: 1 1 auto; min-height: 0; overflow: hidden; display: grid; grid-template-columns: 15% minmax(0, 1fr); gap: 12px; }
.chat-sidebar { min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 12px; }
.chat-users, .chat-history { min-width: 0; min-height: 0; overflow: hidden; background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px; }
.chat-sidebar .chat-users { flex: 1 1 auto; }
.chat-sidebar .voice-panel { flex: 0 0 auto; }
.chat-users h3 { margin: 0 0 8px; font-size: .8rem; }
.chat-users-list { display: grid; gap: 6px; overflow-y: auto; max-height: 100%; }
.chat-user { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 5px 4px; border-radius: 7px; }
.chat-user-recording { background: color-mix(in srgb, var(--warn-text) 10%, transparent); }
.chat-recording-face { display: grid; place-items: center; background: transparent; font-size: 1.1rem; }
.chat-user-name { min-width: 0; flex: 1; overflow: hidden; }
.chat-user-name b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chat-user-name small { display: block; font-size: .7rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-user-connected .chat-user-name small { color: var(--grass); }
.chat-user-mmm .chat-user-name small { color: var(--gold); }
.chat-user-disconnected { opacity: .65; }
.chat-user-disconnected .chat-user-name small { color: var(--muted); }
.chat-face { width: 28px; height: 28px; flex: 0 0 28px; object-fit: cover; border-radius: 5px; image-rendering: pixelated; background: var(--panel-2); }
.chat-face-fallback { display: grid; place-items: center; color: var(--muted); font-weight: 800; }
.chat-color { width: 11px; height: 11px; flex: 0 0 11px; border-radius: 3px; border: 1px solid rgba(0,0,0,.2); }
.chat-log { height: 100%; overflow-y: auto; padding: 4px 8px; font-size: .95rem; line-height: 1.35; }
.chat-line { overflow-wrap: anywhere; margin: 8px 0 12px; max-width: min(78%, 720px); }
.chat-line.chat-server { max-width: 88%; }
.chat-line.chat-other { margin-left: auto; }
.chat-line.chat-other .chat-meta { text-align: right; }
.chat-meta { color: var(--muted); font-size: .78rem; margin: 0 8px 3px; }
.chat-bubble { border-radius: 14px; padding: 8px 12px; color: #263321; box-shadow: 0 2px 3px rgba(0,0,0,.2); }
.chat-bubble-server { background: var(--panel-2); color: var(--text); border: 1px solid var(--line); }
.chat-me .chat-bubble { font-style: italic; }
.chat-from-server { color: var(--gold); font-weight: 700; }
.chat-at { margin-right: 4px; }
.chat-send { display: flex; gap: 8px; flex: 0 0 auto; }
.chat-send input { flex: 1; min-width: 0; background: var(--bg); border: 2px solid var(--line); border-radius: 10px; padding: 11px 13px; }
.chat-send input:focus { outline: none; border-color: var(--grass); }
.chat-send input:disabled { opacity: .55; }
@media (max-width: 700px) {
  .chat-shell { height: calc(100vh - 165px); min-height: 420px; }
  .chat-upper { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .chat-sidebar { min-height: 0; }
  .chat-users-list { display: flex; overflow-x: auto; max-height: 70px; }
  .chat-user { min-width: 130px; }
  .chat-line { max-width: 90%; }
}
.family-head { grid-column: 1 / -1; margin: 14px 0 0; }
.family-heading, .family-account { display: inline-flex; align-items: center; gap: 8px; }
.family-face { margin-right: 0; }
.family-account .player-face { flex: 0 0 28px; }
.people-list .family-row th { text-align: left; padding-top: 14px; font-size: 1rem; border-bottom: 1px solid var(--line, #444); }
.people-list td { vertical-align: middle; }
.people-list td.right { text-align: right; }
.people-list .person-edit td { background: rgba(127, 127, 127, .06); }
.edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 16px; padding: 6px 0; }
.edit-grid label { display: flex; flex-direction: column; gap: 4px; font-size: .9rem; }

/* Settings -> Servers: one card per server */
.server-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 10px; }
.server-card { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--line); border-radius: var(--radius); border-top: 4px solid var(--line); background: var(--panel); }
.server-card.is-online { border-top-color: var(--grass); }
.server-card header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.server-card h4 { margin: 0 0 2px; }
.server-card footer { margin-top: auto; flex-wrap: wrap; gap: 6px; }
.player-count b { font-size: 1.5em; }
.player-count span { color: var(--muted, inherit); font-size: .9em; }
.player-list { list-style: none; margin: 4px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.player-list li { padding: 2px 8px; border-radius: 999px; background: var(--line); font-size: .9em; }
.modal.wide { width: min(760px, 100%); max-height: calc(100vh - 32px); overflow-y: auto; }
.server-ports { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; }
.server-ports .grid2 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 560px) { .server-ports .grid2 { grid-template-columns: 1fr; } }
.server-families { border-top: 1px solid var(--line); margin-top: 12px; padding-top: 8px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
.server-families h3, .server-families p { flex-basis: 100%; margin: 4px 0; }
.deploy-panel { margin-top: 12px; }
.deploy-table { width: 100%; border-collapse: collapse; }
.deploy-table td, .deploy-table th { padding: 4px 6px; text-align: left; border-bottom: 1px solid var(--line); }
.deploy-one { margin-top: 6px; }

/* Blockbench editor (0B-library tasks 06-09): full screen, MMM's own copy */
.bb-bg { padding: 0; }
.bb-shell { background: var(--panel); width: 100vw; height: 100vh; display: flex; flex-direction: column; }
.bb-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 12px; border-bottom: 2px solid var(--line); }
.bb-bar h2 { margin: 0 auto 0 0; font-size: 1rem; }
.bb-bar input { min-width: 0; flex: 0 1 220px; }
.bb-result:empty { display: none; }
.bb-result { padding: 6px 12px; max-height: 30vh; overflow: auto; }
#bb-frame { flex: 1; border: 0; width: 100%; background: #1e1e1e; }
.bb-new { width: 100%; margin: 6px 0; }

/* World Forge */
.wf-feature { display: flex; flex-wrap: wrap; gap: 4px 16px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.wf-feature .wf-slider { display: flex; align-items: center; gap: 8px; flex: 1 1 200px; }
.wf-feature input[type=range] { flex: 1; }
.wf-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.wf-checks { list-style: none; padding: 0; margin: 6px 0; font-size: .9rem; }
.wf-checks li.ok { color: var(--grass); } .wf-checks li.bad { color: var(--red); }
.wf-map-wrap { max-width: 480px; }
#wf-map { width: 100%; height: auto; touch-action: none; cursor: grab; border-radius: 8px; image-rendering: pixelated; }
.wf-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: .85rem; margin: 6px 0; }
.wf-legend i { display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; border-radius: 2px; }
.wf-structs { list-style: none; padding: 0; font-size: .9rem; }
.wf-mark { display: inline-block; width: 18px; text-align: center; background: #000; color: #fff; border-radius: 3px; }
.list-tools { display: flex; gap: 6px; margin: 6px 0; } .list-tools input { flex: 1 1 auto; min-width: 0; } .list-tools select { flex: 0 1 45%; min-width: 0; }
.read-only { background: var(--panel-2); padding: 6px 10px; border-radius: 8px; }
.owner { margin-left: 8px; }

/* Family Gallery */
.gallery-filters { flex-wrap: wrap; margin: 10px 0; }
.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.gallery-item { margin: 0; padding: 0; overflow: hidden; cursor: pointer; }
.gallery-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; background: #000; }
.gallery-item figcaption { padding: 8px 10px; }
.gallery-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.gallery-big { width: 100%; max-height: 60vh; object-fit: contain; background: #000; border-radius: 8px; }

/* Skin Studio */
.skin-studio { display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
.skin-list { list-style: none; padding: 0; margin: 8px 0 0; }
.skin-list li { display: flex; gap: 8px; align-items: center; padding: 6px; border-radius: 8px; cursor: pointer; }
.skin-list li.active, .skin-list li:hover { background: var(--panel-2); }
.skin-list canvas { width: 32px; height: 32px; image-rendering: pixelated; border-radius: 4px; background: #333; }
.skin-tools, .skin-options, .skin-palette { flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.skin-tools input[type=text], #sk-name { flex: 1 1 140px; min-width: 0; }
.swatch { width: 22px; height: 22px; border-radius: 4px; border: 2px solid var(--line); cursor: pointer; padding: 0; }
.skin-panes { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
#sk-canvas { width: min(512px, 100%); height: auto; image-rendering: pixelated; touch-action: none; cursor: crosshair; border-radius: 6px; }
.skin-3d { flex: 1 1 260px; min-width: 0; max-width: 420px; }
.skin-3d canvas { width: 100% !important; height: auto !important; }
@media (max-width: 900px) { .skin-studio { grid-template-columns: 1fr; } }

/* Seed Explorer and Scrapbook */
.seed-list, .scrap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin-top: 8px; }
.seed-card code { overflow-wrap: anywhere; }
.scrap-card img { width: calc(100% + 2 * var(--card-pad, 12px)); margin: -12px -12px 8px; aspect-ratio: 16 / 9; object-fit: cover; display: block; border-radius: var(--radius) var(--radius) 0 0; }
.scrap-edit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.scrap-edit input { flex: 1 1 140px; min-width: 0; }

/* NPC Forge */
.npc-forge { display: grid; grid-template-columns: 240px 1fr; gap: 12px; }
.np-topic input:first-child { flex: 0 1 120px; } .np-topic input + input { flex: 1 1 200px; }
.np-rules { display: grid; gap: 8px; margin: 6px 0; } .np-rule ul { margin: 4px 0 6px 18px; padding: 0; }
#np-rules-json { width: 100%; font-family: ui-monospace, Menlo, monospace; font-size: .85rem; }
.np-actions { flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 900px) { .npc-forge { grid-template-columns: 1fr; } }

/* Live game */
.live-stage { background: #111; border-radius: 10px; min-height: 180px; display: grid; place-items: center; margin: 12px 0; overflow: hidden; }
.live-stage .empty { color: #bbb; }
.live-video { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.live-list { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }

/* Minecraft Wiki and Challenges (0A) */
.wiki { align-items: start; }
.wiki-results { display: flex; flex-direction: column; gap: .3em; max-height: 70vh; overflow: auto; }
.wiki-hit { text-align: left; }
.wiki-facts th { text-align: left; padding-right: 1em; font-weight: 600; }
.wiki-grid { display: grid; gap: 3px; margin: .6em 0; }
.wiki-cell { height: 4.2em; word-break: break-word; line-height: 1.1; padding: 1px; border: 2px solid var(--line, #888); border-radius: 4px; font-size: .62em; display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden; }
.row.wrap { flex-wrap: wrap; }
.wf-lg { cursor: pointer; }
.wf-lg:hover, .wf-lg:focus { outline: 2px solid var(--grass, #4c4); outline-offset: 1px; }
.chip { display: inline-flex; gap: .4em; align-items: center; border: 2px solid var(--line, #888); border-radius: 8px; padding: 2px 6px; }
#wf-map { touch-action: none; cursor: crosshair; }

/* Login pictures and the item picker */
.mc-icon { width: 1.5em; height: 1.5em; image-rendering: pixelated; vertical-align: middle; display: inline-block; flex: none; }
.mc-icon-fb { width: auto; height: auto; }
.mc-icon-none { display: none; }
.item-select-hidden { position: absolute; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; overflow: hidden; }
.item-pick { display: inline-flex; align-items: center; gap: .4em; min-width: 12em; max-width: 100%; justify-content: flex-start; }
.item-pick .caret { margin-left: auto; opacity: .7; }
.item-pop { position: absolute; z-index: 50; width: min(26em, calc(100vw - 32px)); max-height: 60vh; display: flex; flex-direction: column; gap: .4em; padding: .6em; box-shadow: 0 8px 24px #0008; }
.item-grid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(9em, 1fr)); gap: 4px; }
.item-opt { display: flex; align-items: center; gap: .4em; text-align: left; padding: 4px 6px; border-radius: 6px; border: 1px solid transparent; background: transparent; color: inherit; cursor: pointer; font-size: .85em; }
.item-opt:hover, .item-opt:focus, .item-opt.on { border-color: var(--grass, #4c4); background: #ffffff10; }
.item-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-pop-list { width: min(30em, calc(100vw - 32px)); }
.item-pop-list .item-grid { grid-template-columns: 1fr; }
.wiki-cell .mc-icon { width: 2.4em; height: 2.4em; }

/* sub-pages under one menu entry (World Forge / Seed Explorer, Gallery pictures / places) */
.subtabs { display: flex; gap: .4em; flex-wrap: wrap; margin: 0 0 .8em; }
.subtabs button { background: var(--panel); color: inherit; border: 2px solid var(--line); border-radius: 999px; padding: 5px 14px; cursor: pointer; font: inherit; }
.subtabs button[aria-selected="true"] { border-color: var(--grass, #4c4); background: #ffffff14; font-weight: 700; }

/* Structure Forge (last_sprint/S06-S08) */
.st-parts { margin: 8px 0 12px; }
.st-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; margin-top: 8px; }
.st-card.on { outline: 2px solid var(--gold); }
.st-blocks { display: flex; gap: 4px; min-height: 28px; }
.st-blocks .mc-icon { width: 24px; height: 24px; }
.st-detail { margin-top: 12px; }
.st-view { width: 100%; height: min(60vh, 420px); background: var(--bg); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; touch-action: none; }
.st-view canvas { display: block; width: 100%; height: 100%; }
.st-placement { justify-content: space-between; border-top: 1px solid var(--line); padding: 6px 0; }
.st-placement.undone span:first-child { text-decoration: line-through; color: var(--muted); }
.st-report.bad { border-color: var(--red); }
.st-report ul { margin: 4px 0 8px 18px; padding: 0; }
.st-tools { flex-wrap: wrap; }
.st-tools .btn, .st-recent .btn { min-width: 36px; }
.st-recent .mc-icon { width: 20px; height: 20px; }
.st-build-views { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; align-items: start; margin: 8px 0; }
.st-layer { width: 100%; max-width: 420px; height: auto; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 6px; cursor: crosshair; touch-action: manipulation; }
@media (max-width: 720px) { .st-build-views { grid-template-columns: 1fr; } .st-view { height: 320px; } }
.st-detail .title-row { flex-wrap: wrap; }
.st-detail select, .st-builder select { max-width: 100%; min-width: 0; }
.st-builder input[type=number] { width: 4.5em; }

/* Item Forge (forge_sprint/I04) */
.it-action { flex-wrap: wrap; border-top: 1px solid var(--line); padding: 6px 0; }
.it-action input[type=number] { width: 5em; }
.it-chest .row { flex-wrap: wrap; margin: 4px 0; }
.it-chest input[type=number] { width: 5em; }

/* Texture packs (forge_sprint/P03-P04) */
.pk-work { display: grid; grid-template-columns: minmax(0, 320px) minmax(0, 1fr); gap: 12px; align-items: start; margin: 8px 0; }
#pk-canvas { width: 100%; max-width: 320px; aspect-ratio: 1; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 6px; cursor: crosshair; touch-action: none;
  background: repeating-conic-gradient(#555 0% 25%, #333 0% 50%) 50% / 20px 20px; }
.pk-preview { width: 128px; height: 128px; image-rendering: pixelated; border: 1px solid var(--line); border-radius: 6px; margin-top: 8px; }
.pk-chips { flex-wrap: wrap; margin: 6px 0; }
.pk-chips .mc-icon { width: 16px; height: 16px; }
@media (max-width: 720px) { .pk-work { grid-template-columns: 1fr; } }

/* Wiki model viewer (forge_sprint/W02) */
.mcv { width: 160px; height: 160px; margin: 8px auto; perspective: 600px; cursor: grab; touch-action: none; user-select: none; }
.mcv:active { cursor: grabbing; }
.mcv-stage { width: 100%; height: 100%; display: grid; place-items: center; }
.mcv-model { position: relative; width: 80px; height: 80px; transform-style: preserve-3d; }
.mcv-face { position: absolute; inset: 0; background-size: cover; image-rendering: pixelated; backface-visibility: hidden; }
.mcv-front { transform: translateZ(40px); }
.mcv-back { transform: rotateY(180deg) translateZ(40px); filter: brightness(.8); }
.mcv-left { transform: rotateY(-90deg) translateZ(40px); filter: brightness(.7); }
.mcv-right { transform: rotateY(90deg) translateZ(40px); filter: brightness(.85); }
.mcv-top { transform: rotateX(90deg) translateZ(40px); filter: brightness(1.1); }
.mcv-bottom { transform: rotateX(-90deg) translateZ(40px); filter: brightness(.55); }
.mcv-layer { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: pixelated; }
.mcv-item .mcv-layer:not(:first-child):not(:last-child) { filter: brightness(.7); }
.wiki-lore p { line-height: 1.6; margin: .6em 0; }
.wiki-top { display: flex; gap: 16px; align-items: flex-start; flex-wrap: wrap; }
.wiki-top > .wiki-read { flex: 1 1 260px; }
.repo-out pre { white-space: pre-wrap; word-break: break-all; }
/* Quests (forge_sprint/Q01) */
.quest-steps { margin: .4em 0; padding-left: 1.4em; }
.quest-steps li { margin: .25em 0; }
.quest-steps .q-done { opacity: .7; }
.quest-steps .q-now { font-weight: 700; }
.quest-edit { padding-left: 1.4em; }
.quest-edit input[type=text] { min-width: 8em; }

/* Forge Master (docs/mcp.md): a chat with bubbles, tool steps, Yes/No questions and cards of what was made */
.fm-log { background: var(--panel); border-radius: var(--radius); padding: 12px; height: min(62vh, 640px); overflow-y: auto;
  display: flex; flex-direction: column; gap: 8px; }
.fm-msg { display: flex; }
.fm-me { justify-content: flex-end; }
.fm-bubble { max-width: min(560px, 85%); padding: 9px 13px; border-radius: 14px; line-height: 1.4; white-space: pre-wrap; overflow-wrap: anywhere; }
.fm-me .fm-bubble { background: var(--grass-dark); color: #0b1a10; border-bottom-right-radius: 4px; }
.fm-bot .fm-bubble { background: var(--panel-2); border-bottom-left-radius: 4px; }
.fm-thinking .fm-bubble { color: var(--muted); }
.fm-step { color: var(--muted); font-size: .85rem; padding-left: 6px; }
.fm-step.ok::first-letter { color: var(--grass); }
.fm-step.no::first-letter { color: var(--red); }
.fm-step.grown-up { color: var(--gold); }
.fm-card, .fm-confirm { max-width: min(560px, 90%); margin: 0; border-left: 4px solid var(--blue); }
.fm-card-mob { border-left-color: var(--red); }
.fm-card-tool { border-left-color: var(--navbar-line); }
.fm-card-npc { border-left-color: var(--gold); }
.fm-card-quest { border-left-color: var(--grass); }
.fm-confirm { border-left-color: var(--gold); display: grid; gap: 8px; }
.fm-confirm.said-yes { opacity: .7; border-left-color: var(--grass); }
.fm-confirm.said-no { opacity: .55; border-left-color: var(--muted); }
.fm-pic { font-size: 1.4rem; display: inline-flex; }
.fm-pic .mc-icon { width: 32px; height: 32px; }
.fm-facts { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 6px 0; font-size: .9rem; }
.fm-fact b { color: var(--muted); font-weight: 600; }
.fm-input { margin-top: 10px; gap: 8px; }
.fm-input input { flex: 1; min-width: 0; }
.fm-card-model { border-left-color: var(--dirt); }
.fm-card-structure { border-left-color: var(--blue); }
.fm-viewer { height: 260px; margin: 6px 0; }
.fm-card-skin { border-left-color: var(--menu-line-4); }
.fm-skin { image-rendering: pixelated; background: var(--panel); border-radius: 6px; display: block; margin: 6px 0; }

/* Map tab click actions (mapactions.js) */
.map-wrap { position: relative; flex: 1; display: flex; min-height: 70vh; }
.map-wrap iframe.map { flex: 1; }
.map-menu { position: absolute; z-index: 20; width: min(300px, calc(100% - 16px)); max-height: calc(100% - 16px); overflow: auto; padding: 10px 12px; display: flex; flex-direction: column; gap: 6px; box-shadow: 0 6px 24px rgba(0, 0, 0, .45); }
.map-menu-head { font-weight: 700; padding-right: 24px; }
.map-menu-x { position: absolute; top: 6px; right: 8px; background: none; border: 0; font-size: 16px; cursor: pointer; color: inherit; }
.map-menu-body { display: flex; flex-direction: column; gap: 6px; }
.map-menu-act { text-align: left; }
.map-stats { display: flex; flex-direction: column; gap: 2px; font-size: 13px; letter-spacing: -1px; }
.map-stats .facts { letter-spacing: normal; }
#map-actions-hint { margin: 0 12px 6px; }

/* vanilla mob models (Plugins tab, Wiki, mob preview) */
.look-placeholder.look-placeholder-note { padding: 6px 10px; border-style: solid; border-width: 1px; font-size: .9rem; }
.vanilla-stage .viewer, .look-vanilla .viewer { height: 280px; }
.vanilla-try { max-width: 520px; margin-top: 8px; }
.wiki-vanilla { min-width: 260px; flex: 1 1 280px; }
.fm-reasoning { max-width: min(560px, 90%); background: var(--panel-2); border-radius: 10px; padding: 6px 10px; color: var(--muted); font-size: .85rem; }
.fm-reasoning summary { cursor: pointer; }
.fm-reasoning-text { white-space: pre-wrap; max-height: 220px; overflow-y: auto; margin-top: 4px; font-style: italic; }
.fm-card-recipe { border-left-color: var(--grass); }
.fm-recipe { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0; }
.fm-recipe .wiki-grid { margin: 0; }
.fm-arrow { font-size: 1.6rem; color: var(--muted); }
.fm-result { display: inline-flex; align-items: center; gap: 4px; }
.fm-result .wiki-cell { width: 4.2em; border-color: var(--gold); }
.fm-loose { display: flex; gap: 8px; flex-wrap: wrap; }
.fm-loose-item { display: inline-flex; align-items: center; gap: 2px; }
.fm-loose-item .wiki-cell, .fm-result .wiki-cell { width: 4.2em; }
.fm-pre { background: var(--bg); border-radius: 6px; padding: 6px 8px; margin: 6px 0; overflow-x: auto; font-size: .85em; }
.fm-bubble code { background: var(--bg); padding: 0 4px; border-radius: 4px; }
.fm-item { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.fm-item .mc-icon { width: 1.3em; height: 1.3em; image-rendering: pixelated; vertical-align: -0.2em; }
.fm-item .mc-icon-none { display: none; }

/* ================================================================ Redesign: shell (docs/redesign.md, design/)
   Last in the file on purpose: these rules restyle the older ones above with the design tokens. */
body { background: var(--surface-primary); color: var(--text-primary); font-family: var(--font-body); line-height: 1.45; }
h1, h2, .title-row h2, .side-head h2, .portal-top h1 { font-family: var(--font-display); letter-spacing: .01em; line-height: 1.35; }
h2 { font-size: calc(1.15rem * var(--display-scale)); }
.title-row h2 { font-size: calc(1.45rem * var(--display-scale)); }
h3 { font-family: var(--font-display); font-size: calc(.95rem * var(--display-scale)); color: var(--text-secondary); letter-spacing: .04em; }
a { color: var(--brand-secondary); }
:root[data-theme="gamey"] a { color: var(--brand-primary); }
:focus-visible { outline: none; box-shadow: var(--focus-ring); }

/* ---------------------------------------------------------------- top bar */
.top { height: var(--topbar-h); padding: 0 var(--space-6); gap: var(--space-4); background: var(--surface-secondary);
  border-bottom: 3px solid var(--brand-secondary); box-shadow: var(--shadow-md); }
.brand { font-family: var(--font-display); font-size: calc(1.25rem * var(--display-scale)); color: var(--text-primary); font-weight: 700; }
.brand-family { color: var(--brand-primary); }
.brand-forge { color: var(--brand-secondary); }
:root:not([data-theme="gamey"]) .brand-family { color: #b9814a; }
.brand::before { content: ""; width: 26px; height: 26px; margin-right: 10px; border-radius: 6px; flex: none;
  background: linear-gradient(#7fb77f 0 35%, #8b5a3c 35% 100%); box-shadow: var(--shadow-sm), inset 0 -4px 0 rgba(0,0,0,.18); }
:root[data-theme="gamey"] .brand::before { border-radius: 0; background: linear-gradient(#5dd65d 0 35%, #7a4f2d 35% 100%); }
.me { font-family: var(--font-body); font-size: .95rem; color: var(--text-secondary); gap: var(--space-2); }
.me button, .me select, .me label { font-family: var(--font-body); font-size: .9rem; }
.me-name { font-weight: 700; color: var(--text-primary); }
.lang, .theme-btn { min-height: 40px; background: var(--surface-tertiary); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); padding: 4px 10px; font-weight: 700; cursor: pointer; color: var(--text-primary); }
.theme-btn { min-width: 40px; font-size: 1.1rem; line-height: 1; }
.theme-btn:hover, .lang:hover { border-color: var(--brand-primary); }
.me-voice { min-width: 40px; min-height: 40px; border-radius: var(--radius-md); }
.me-voice:hover { background: var(--surface-tertiary); }
.dot { width: 14px; height: 14px; box-shadow: 0 0 0 3px var(--surface-tertiary); }
.dot.ok { background: var(--accent-success); } .dot.bad { background: var(--accent-danger); }
:root[data-theme="gamey"] .dot { border-radius: 2px; }

/* ---------------------------------------------------------------- side menu */
.side-menu { background: var(--surface-secondary); border-right: 1px solid var(--border-light); padding: var(--space-2) 0 var(--space-4);
  box-shadow: var(--shadow-sm); }
.menu-group { border-bottom: 0; padding: var(--space-2) var(--space-2) 0; }
.menu-group-title { text-transform: none; font-family: var(--font-display); font-size: calc(.82rem * var(--display-scale)); color: var(--text-tertiary);
  padding: var(--space-2) 10px 6px; border-bottom: 0; cursor: default; }
.side-menu > .menu-group > .menu-group-title { border-bottom: 2px solid var(--menu-line-1); }
.menu-group-title::before { content: ""; display: inline-block; width: 10px; height: 10px; margin-right: 8px; vertical-align: 0;
  border-radius: 3px; background: var(--menu-line-1); }
.side-menu > .menu-group:nth-of-type(2) > .menu-group-title::before { background: var(--menu-line-3); }
.side-menu > .menu-group:nth-of-type(3) > .menu-group-title::before { background: var(--menu-line-2); }
.side-menu > .menu-group:nth-of-type(4) > .menu-group-title::before { background: var(--menu-line-4); }
:root[data-theme="gamey"] .menu-group-title::before { border-radius: 0; }
.menu-items { gap: 2px; }
.side-menu button[role="tab"] { min-height: 44px; border: 0; border-radius: var(--radius-md); padding: 10px 12px;
  color: var(--text-secondary); font-family: var(--font-display); font-size: calc(.95rem * var(--display-scale));
  text-transform: none; letter-spacing: 0; line-height: 1.4; transition: background .12s, color .12s; }
/* no forced capitals: the pixel font has no accented capitals (Í in ESTADÍSTICAS) */
:root[data-theme="gamey"] .side-menu button[role="tab"] { border-radius: 0; }
.menu-items button:hover { background: var(--surface-tertiary); color: var(--text-primary); }
.side-menu button[role="tab"][aria-selected="true"] { background: var(--surface-tertiary); color: var(--text-primary); font-weight: 700;
  box-shadow: inset 4px 0 0 var(--brand-primary); }
:root:not([data-theme="gamey"]) .side-menu button[role="tab"][aria-selected="true"] { background: #f6e8d9; }
.side-menu button[role="tab"].cap-disabled:hover { background: none; color: var(--text-secondary); }

/* ---------------------------------------------------------------- page, panels, cards */
main { padding: var(--space-6); }
.tab { gap: var(--space-6); }
.work, .side { background: var(--surface-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md); }
.work { padding: var(--space-6); }
.side { top: calc(var(--topbar-h) + var(--space-6)); }
.empty { color: var(--text-secondary); }
.card { background: var(--surface-secondary); border: 1px solid var(--border-light); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm); padding: var(--space-4); }
.work .card, .modal .card { background: var(--surface-primary); }
:root[data-theme="gamey"] .work .card, :root[data-theme="gamey"] .modal .card { background: var(--surface-tertiary); }
.cards { gap: var(--space-2); }
.cards li { background: var(--surface-primary); border: 2px solid var(--border-light); border-radius: var(--radius-md); min-height: 44px; }
:root[data-theme="gamey"] .cards li { background: var(--surface-tertiary); border-color: transparent; }
.cards li:hover { border-color: var(--border-strong); }
.cards li.active { border-color: var(--brand-primary); box-shadow: var(--shadow-sm); }
.facts, .hint, .field .hint { color: var(--text-secondary); }

/* Action cards (design/COMPONENTS.md): what a kid can do next on a tab, one card each. */
.action-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: var(--space-6); margin: var(--space-4) 0; }
.action-card { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); min-height: 160px; padding: var(--space-4) var(--space-6);
  text-align: left; cursor: pointer; color: var(--text-primary); background: var(--surface-secondary); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform .15s, box-shadow .15s, border-color .15s; font: inherit; }
.work .action-card { background: var(--surface-primary); }
:root[data-theme="gamey"] .work .action-card { background: var(--surface-tertiary); border-radius: 0; }
.action-card:hover { transform: translateY(-2px) scale(1.02); box-shadow: var(--shadow-lg); border-color: var(--brand-primary); }
.action-card[aria-pressed="true"], .action-card.on { border: 2px solid var(--brand-primary); }
.action-card .ac-icon { font-size: 2.6rem; line-height: 1; width: 56px; height: 56px; display: grid; place-items: center;
  border-radius: var(--radius-md); background: var(--surface-tertiary); }
.action-card .ac-icon img { width: 40px; height: 40px; image-rendering: pixelated; }
.action-card .ac-title { font-family: var(--font-display); font-size: calc(1.15rem * var(--display-scale)); font-weight: 700; line-height: 1.4; }
.action-card .ac-desc { color: var(--text-secondary); font-size: .95rem; }

/* ---------------------------------------------------------------- buttons */
.btn { min-height: 44px; padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); font-family: var(--font-body);
  font-weight: 700; background: var(--surface-tertiary); color: var(--text-primary); border: 1px solid var(--border-strong);
  box-shadow: var(--shadow-sm); transition: transform .08s, box-shadow .15s, background .15s; display: inline-flex; align-items: center;
  justify-content: center; gap: 6px; text-decoration: none; }
.btn:hover { box-shadow: var(--shadow-md); }
.btn:active { transform: translateY(2px); box-shadow: none; }
.btn.primary { background: var(--brand-primary); color: var(--on-brand); border-color: transparent; }
.btn.primary:hover { background: var(--brand-hover); box-shadow: var(--shadow-lg); }
.btn.gold, .btn.armed { background: var(--accent-warning); color: #2c2200; border-color: transparent; }
.btn.danger { background: var(--accent-danger); color: #2c1010; border-color: transparent; }
:root[data-theme="gamey"] .btn.danger { color: #1a0505; }
.btn.small { min-height: 36px; padding: 4px 12px; font-size: .9rem; }
.btn.big { min-height: 52px; padding: 12px 22px; font-size: 1.1rem; }
:root[data-theme="gamey"] .btn { border-radius: 2px; border-width: 2px; border-color: #1a1a1a; box-shadow: inset 0 -4px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.12); }
:root[data-theme="gamey"] .btn:hover { box-shadow: inset 0 -4px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.12), 0 0 12px rgba(108,213,108,.35); }
:root[data-theme="gamey"] .btn:active { box-shadow: inset 0 3px 0 rgba(0,0,0,.35); transform: none; }
.btn:disabled:hover { box-shadow: var(--shadow-sm); }
.anims .btn.on { background: var(--brand-secondary); color: #fff; }
.drop { border: 2px dashed var(--border-strong); border-radius: var(--radius-lg); color: var(--text-secondary); background: var(--surface-primary); }
.drop.over { border-color: var(--brand-primary); }

/* ---------------------------------------------------------------- form fields */
input[type=text], input[type=search], input[type=password], input[type=number], input[type=email], input:not([type]), select, textarea,
.field input[type=text], .field input[type=password], .field select, .field input[type=number],
.portal-form input, .row input, .row select, .link-row input, .em-body select, .em-body input[type="text"], .em-body input[type="number"],
.em-body textarea, .drops input, .rename-row input, .chat-send input {
  background: var(--surface-secondary); color: var(--text-primary); border: 1px solid var(--border-strong); border-radius: var(--radius-md);
  min-height: 40px; padding: 6px 12px; }
:root:not([data-theme="gamey"]) :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) { background: #fffdfb; }
:root[data-theme="gamey"] :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) { background: var(--surface-primary); border-radius: 2px; }
:is(input, select, textarea):focus { outline: none; border-color: var(--brand-primary); box-shadow: var(--focus-ring); }
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
input[type=checkbox], input[type=radio], input[type=range] { accent-color: var(--brand-primary); }
:root:not([data-theme="gamey"]) input[type=checkbox], :root:not([data-theme="gamey"]) input[type=radio], :root:not([data-theme="gamey"]) input[type=range] { accent-color: #b9814a; }
.field label { font-size: .95rem; }
.checks label, .chip-check, .em-row, .read-only, .clean-row, .steps li, .findings li { background: var(--surface-primary); }
:root[data-theme="gamey"] :is(.checks label, .chip-check, .em-row, .read-only, .clean-row, .steps li, .findings li) { background: var(--surface-tertiary); }
.code textarea, pre.yaml, .diff, .fm-pre, .fm-bubble code { background: var(--code-bg); color: var(--text-primary); }
:root:not([data-theme="gamey"]) .yk { color: #3f7d3f; } :root:not([data-theme="gamey"]) .yc { color: #8a8a7a; }
:root:not([data-theme="gamey"]) .ys { color: #9a6512; } :root:not([data-theme="gamey"]) .yn { color: #2f6fa3; }
:root:not([data-theme="gamey"]) .diff .add { color: #2f6b2f; } :root:not([data-theme="gamey"]) .diff .del { color: #a33; }

/* ---------------------------------------------------------------- tags, badges, messages */
.badge, .chip { font-family: var(--font-body); }
.badge { background: var(--tag-bg); color: var(--tag-text); border-radius: var(--radius-full); padding: 2px 10px; }
.badge.published { background: var(--accent-success); color: #123312; }
.badge.published-but-changed, .badge.changed { background: var(--accent-warning); color: #3a2a00; }
.badge.draft { background: var(--surface-tertiary); color: var(--text-secondary); }
.badge.external { background: #cfe1f2; color: #1d3f5f; }
:root[data-theme="gamey"] .badge { border-radius: 2px; }
:root[data-theme="gamey"] .badge.external { background: #3b4f6b; color: #e6f0ff; }
.check-ok, .wf-checks li.ok, .steps .ok .ic { color: var(--ok-text); }
.check-fail, .wf-checks li.bad, .steps .failed .ic { color: var(--bad-text); }
.warning { color: var(--warn-text); }
.portal-error, .log tr.bad td { color: var(--bad-text); }
.allgood { background: color-mix(in srgb, var(--accent-success) 25%, transparent); border-left-color: var(--accent-success); border-radius: var(--radius-md); }
.ok-box { background: color-mix(in srgb, var(--accent-success) 35%, transparent); }
.no-server-banner { position: sticky; z-index: 19; top: calc(var(--topbar-h) + .5rem); margin: 0 0 1rem;
  display: flex; align-items: center; gap: .75rem;
  background: color-mix(in srgb, var(--accent-warning) 25%, var(--surface-secondary)); border: 1px solid var(--accent-warning);
  border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); box-shadow: var(--shadow-lg); }
.no-server-banner .no-server-dismiss { margin-left: auto; flex: 0 0 auto; min-width: 36px; }
.chat-user-connected .chat-user-name small { color: var(--ok-text); }
.chat-user-mmm .chat-user-name small, .chat-from-server, .fm-step.grown-up { color: var(--warn-text); }
.fm-me .fm-bubble { background: var(--brand-primary); color: var(--on-brand); }
.item-opt:hover, .item-opt:focus, .item-opt.on { border-color: var(--brand-primary); background: var(--surface-tertiary); }
.chat-users, .chat-history, .fm-log { background: var(--surface-primary); }

/* ---------------------------------------------------------------- sub-tabs: underline (design/LAYOUT.md "Tab Navigation") */
.subtabs { gap: var(--space-2); border-bottom: 2px solid var(--border-light); margin: 0 0 var(--space-6); flex-wrap: wrap; }
.subtabs button { background: none; border: 0; border-radius: 0; min-height: 44px; padding: 8px var(--space-4); margin-bottom: -2px;
  border-bottom: 3px solid transparent; color: var(--text-secondary); font-family: var(--font-display); font-size: calc(1rem * var(--display-scale)); }
.subtabs button:hover { color: var(--text-primary); }
.subtabs button[aria-selected="true"] { background: none; color: var(--text-primary); border-bottom-color: var(--brand-primary); font-weight: 700; }

/* ---------------------------------------------------------------- modal (an in-page panel: no browser dialogs) */
.modal-bg { background: var(--overlay-dark); z-index: 40; }
.modal { background: var(--surface-secondary); border: 1px solid var(--border-light); border-top: 5px solid var(--brand-primary);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-xl); }
:root[data-theme="gamey"] .modal { border-radius: 2px; }
.volume-inventory-scroll { max-width: 100%; overflow-x: auto; }
.volume-inventory-table { width: 100%; min-width: 900px; table-layout: fixed; border-collapse: collapse; }
.volume-inventory-table th, .volume-inventory-table td { padding: .65rem .55rem; border-bottom: 1px solid var(--border-light); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.volume-inventory-table th { color: var(--text-secondary); font-family: var(--font-display); }
.volume-inventory-table th:nth-child(1) { width: 17%; }
.volume-inventory-table th:nth-child(2) { width: 11%; }
.volume-inventory-table th:nth-child(3) { width: 20%; }
.volume-inventory-table th:nth-child(4) { width: 15%; }
.volume-inventory-table th:nth-child(5) { width: 15%; }
.volume-inventory-table th:nth-child(6) { width: 22%; }
.volume-container-name { display: block; margin: .2rem 0 0; overflow-wrap: anywhere; }
.volume-inventory-actions { display: flex; flex-wrap: wrap; gap: .35rem; }
.server-volume-result { display: block; margin: .35rem 0 0; }
.volume-search-status { display: flex; align-items: center; gap: .65rem; min-height: 2rem; margin: .5rem 0; }
.volume-search-spinner { display: inline-block; width: 1.15rem; height: 1.15rem; flex: 0 0 auto; border: 3px solid var(--border-strong); border-top-color: var(--brand-primary); border-radius: 50%; animation: volume-search-spin .8s linear infinite; }
.server-form-loading { display: flex; align-items: center; gap: 1rem; min-height: 150px; padding: 1.25rem; margin: .75rem 0; border: 1px solid var(--border-light); border-radius: var(--radius); background: var(--panel); }
.server-form-loading .volume-search-spinner { width: 2rem; height: 2rem; border-width: 4px; }
.server-form-loading b { font-size: 1.05rem; }
.server-form-loading .facts { margin: .35rem 0 0; }
@keyframes volume-search-spin { to { transform: rotate(360deg); } }
.volume-browser-modal { width: min(760px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); overflow: auto; overscroll-behavior: contain; }
.volume-browser-content { max-height: min(55vh, 560px); overflow: auto; border: 1px solid var(--border-light); padding: .7rem; margin: .7rem 0; }
.volume-file-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .3rem; }
.volume-file-list .btn { width: 100%; min-width: 0; text-align: left; overflow-wrap: anywhere; }
.volume-file-entry { display: block; padding: .55rem .7rem; overflow-wrap: anywhere; color: var(--text-secondary); }
.volume-browser-path { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: .5rem; margin-bottom: .5rem; overflow-wrap: anywhere; }
.volume-browser-modal > .btn { margin-top: .35rem; }
@media (prefers-reduced-motion: reduce) { .volume-search-spinner { animation: none; } }
@media (max-width: 700px) {
  .volume-inventory-table { min-width: 0; }
  .volume-inventory-table thead { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
  .volume-inventory-table, .volume-inventory-table tbody, .volume-inventory-table tr { display: block; width: 100%; }
  .volume-inventory-table tr { padding: .45rem 0; border-bottom: 1px solid var(--border-light); }
  .volume-inventory-table td { display: grid; grid-template-columns: minmax(6rem, 30%) minmax(0, 1fr); gap: .5rem; padding: .35rem .2rem; border: 0; }
  .volume-inventory-table td::before { content: attr(data-label); font-weight: 700; color: var(--text-secondary); }
  .volume-inventory-table td:last-child { display: block; }
  .volume-inventory-table td:last-child::before { display: block; margin-bottom: .35rem; }
  .volume-browser-modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: var(--space-4); }
  .volume-browser-content { max-height: 52dvh; }
}

/* ---------------------------------------------------------------- toast: bottom right on desktop, bottom centre on phones */
#toast { left: auto; right: var(--space-6); bottom: var(--space-6); transform: translateY(8px); background: var(--surface-secondary);
  color: var(--text-primary); border: 1px solid var(--border-light); border-left: 6px solid var(--accent-success);
  border-radius: var(--radius-md); padding: var(--space-4); box-shadow: var(--shadow-lg); max-width: min(420px, 90vw); z-index: 60;
  transition: opacity .2s, transform .2s; font-weight: 700; }
#toast.show { transform: none; }
#toast.bad { border-color: var(--border-light); border-left-color: var(--accent-danger); }

/* ---------------------------------------------------------------- login portal */
.portal { background: radial-gradient(circle at 50% 0%, color-mix(in srgb, var(--brand-primary) 30%, var(--surface-primary)) 0%, var(--surface-primary) 60%); }
.portal-box { background: var(--surface-secondary); border: 1px solid var(--border-light); border-top: 6px solid var(--brand-primary);
  border-radius: var(--radius-xl); box-shadow: var(--shadow-xl); padding: var(--space-6); }
.portal-top h1 { font-size: calc(1.5rem * var(--display-scale)); }
.profile { background: var(--surface-primary); border: 2px solid var(--border-light); box-shadow: var(--shadow-md); }
.profile:hover, .profile:focus-visible { border-color: var(--brand-primary); box-shadow: var(--shadow-lg); }
.profile.parent { border-color: var(--brand-secondary); }
.pinpad button { background: var(--surface-tertiary); color: var(--text-primary); box-shadow: var(--shadow-sm); }
.pinpad button.ok { background: var(--brand-primary); color: var(--on-brand); }
.pin-dots span { border-color: var(--border-strong); }
.pin-dots span.on { background: var(--brand-primary); border-color: var(--brand-primary); }

/* ---------------------------------------------------------------- phones and tablets */
@media (max-width: 900px) { main { padding: var(--space-4); } .work { padding: var(--space-4); } }
@media (max-width: 640px) {
  :root { --topbar-h: 56px; }
  .top { padding: 0 var(--space-2); gap: 6px; }
  .brand { font-size: calc(1rem * var(--display-scale)); }
  .brand::before { width: 20px; height: 20px; margin-right: 6px; }
  .me-name { display: none; }
  main { padding: var(--space-2); }
  .side-menu { box-shadow: none; }
  .action-cards { grid-template-columns: 1fr; gap: var(--space-4); }
  .action-card { min-height: 0; }
  #toast { left: 50%; right: auto; transform: translateX(-50%); }
  #toast.show { transform: translateX(-50%); }
  .btn.primary.wide-on-phone { width: 100%; }
}
/* the field rules above also catch checkboxes inside rows: keep those their normal size */
input[type=checkbox], input[type=radio] { min-height: 0; padding: 0; width: 18px; height: 18px; border: 0; box-shadow: none; flex: none; }
.side-head h2 { white-space: nowrap; }
:root[data-theme="gamey"] :is(.work, .side, .card, .action-card, .portal-box) { border-radius: 4px; }
@media (max-width: 640px) {
  .top { flex-wrap: nowrap; }
  .me { flex-wrap: nowrap; gap: 4px; }
  .me .btn.small, #logout { min-height: 36px; padding: 4px 8px; }
  .lang, .theme-btn, .me-voice { min-height: 36px; min-width: 36px; padding: 2px 6px; }
}

/* Messages (the notice board) */
.msg-badge { background: var(--red); color: #fff; border-radius: 999px; font-size: .7rem; padding: 0 6px; margin-left: 6px; }
.msg-card.unread { border-left: 4px solid var(--gold); }
.msg-card.msg-help { border-left: 4px solid var(--gold); }
.msg-card.msg-rules { border-left: 4px solid var(--red); }
.msg-text { white-space: pre-wrap; overflow-wrap: anywhere; margin: 4px 0; }
.msg-new textarea { width: 100%; margin: 6px 0; }

/* ---------------------------------------------------------------- owner's shell tweaks (2026-10-01)
   Brand: no block icon, "Family" yellow and "Forge" purple in both themes. */
.brand::before { content: none; }
.brand-family, :root:not([data-theme="gamey"]) .brand-family { color: #e0a526; }
.brand-forge { color: #8e4fc2; }
:root[data-theme="gamey"] .brand-family { color: #ffd166; }
:root[data-theme="gamey"] .brand-forge { color: #c084fc; }

/* Side menu: a thin colour line under each category name instead of the square, and an accordion
   ("sandwich"): pressing a category opens it and closes the others (app.js sets .open). */
.menu-group-title::before { content: none; }
.menu-group { padding: 0 var(--space-2); }
.menu-group-title { cursor: pointer; display: flex; align-items: center; justify-content: space-between; min-height: 44px;
  margin: var(--space-2) 0 4px; padding: 8px 10px; color: var(--text-secondary); border-bottom: 2px solid var(--menu-line-1);
  border-radius: 0; user-select: none; }
.side-menu > .menu-group:nth-of-type(1) > .menu-group-title { border-bottom-color: var(--menu-line-1); }
.side-menu > .menu-group:nth-of-type(2) > .menu-group-title { border-bottom-color: var(--menu-line-3); }
.side-menu > .menu-group:nth-of-type(3) > .menu-group-title { border-bottom-color: var(--menu-line-2); }
.side-menu > .menu-group:nth-of-type(4) > .menu-group-title { border-bottom-color: var(--menu-line-4); }
.menu-group-title::after { content: "▸"; font-family: var(--font-body); font-size: .9rem; transition: transform .2s; }
.menu-group.open > .menu-group-title { color: var(--text-primary); }
.menu-group.open > .menu-group-title::after { transform: rotate(90deg); }
.menu-group-title:hover { color: var(--text-primary); }
.menu-group > .menu-items { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s ease; }
.menu-group > .menu-items > .menu-inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.menu-group.open > .menu-items { grid-template-rows: 1fr; }
@media (prefers-reduced-motion: reduce) { .menu-group > .menu-items, .menu-group-title::after { transition: none; } }

/* ================================================================ Player Forge (redesign 2026-10-01) */
.work.pf-work { padding: var(--space-6); }
.pf-back { background: #3fa83f; color: #fff; border-color: transparent; }
.pf-back:hover { background: #4cbc4c; }
:root[data-theme="gamey"] .pf-back { border-color: #1a1a1a; }

/* home: two tall cards, centred */
.pf-home { min-height: calc(100vh - var(--topbar-h) - 2 * var(--space-6) - 2 * var(--space-6) - 2px); display: flex; gap: var(--space-8);
  justify-content: center; align-items: center; flex-wrap: wrap; }
.pf-card { width: min(300px, 100%); height: min(440px, 72vh); display: flex; flex-direction: column; background: var(--surface-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
  transition: transform .15s, box-shadow .15s; }
:root[data-theme="gamey"] .pf-card { background: var(--surface-tertiary); border-radius: 4px; }
.pf-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
.pf-shot { flex: 1 1 auto; display: grid; place-items: center; font-size: 4.5rem; min-height: 0; }
.pf-shot-studio { background: linear-gradient(#7ec0ff, #d6efff 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
.pf-shot-gallery { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
.pf-go { margin: calc(-1 * var(--space-6)) auto var(--space-2); position: relative; min-width: 60%; }
.pf-card-title { margin: var(--space-2) var(--space-4) 0; text-align: center; color: var(--text-primary); }
.pf-card-desc { min-height: 4.4em; margin: 6px var(--space-4) var(--space-4); text-align: center; color: var(--text-secondary); font-size: .95rem; }

/* Skin Studio: fills the rest of the window, no page scroll */
.ss { --ss-h: calc(100vh - var(--topbar-h) - 2 * var(--space-6) - 2 * var(--space-6) - 2px);
  height: var(--ss-h); min-height: 520px; display: grid; gap: var(--space-4);
  grid-template-columns: 272px minmax(0, 1fr) minmax(240px, 340px); grid-template-rows: auto minmax(0, 1fr); }
.ss-top-left, .ss-top-mid, .ss-top-right { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.ss-top-mid input { width: min(420px, 100%); font-size: 1.05rem; }
.ss-top-right { justify-content: flex-end; }
.ss-top-right select { flex: 1 1 auto; min-width: 0; max-width: 260px; }
.pf-help { width: 44px; padding: 0; font-size: 1.2rem; }
.ss-tools { display: flex; flex-direction: column; gap: 10px; min-height: 0; overflow-y: auto; padding-right: 2px; }

/* 1: tools like Minecraft inventory slots */
.ss-inv { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; padding: 6px; background: #c6c6c6; border: 3px solid #373737;
  border-right-color: #fff; border-bottom-color: #fff; border-radius: 2px; }
.ss-slot { aspect-ratio: 1; min-height: 0; font-size: 1.15rem; cursor: pointer; background: #8b8b8b; border: 3px solid #373737;
  border-right-color: #ffffff; border-bottom-color: #ffffff; border-radius: 0; display: grid; place-items: center; padding: 0; }
.ss-slot:hover { background: #a3a3a3; }
.ss-slot.on { background: #c5f5c5; outline: 3px solid var(--brand-primary); outline-offset: -1px; }
#sk-undo, #sk-redo { font-weight: 900; color: #1b1b1b; }

/* 2: colours, then three rows for your own */
.ss-palette { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; }
.ss-colour { aspect-ratio: 1; width: 100%; min-height: 0; padding: 0; border: 1px solid rgba(0,0,0,.25); border-radius: 3px; cursor: pointer; }
.ss-colour.on { outline: 3px solid var(--text-primary); outline-offset: 1px; position: relative; z-index: 1; }
.ss-custom { padding-top: 4px; border-top: 1px dashed var(--border-strong); }
.ss-empty { background: repeating-linear-gradient(45deg, var(--surface-tertiary) 0 3px, transparent 3px 6px); border-style: dashed; cursor: default; }
.ss-add { display: grid; place-items: center; font-weight: 900; background: var(--surface-tertiary); color: var(--text-primary); position: relative; overflow: hidden; }
.ss-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; min-height: 0; padding: 0; border: 0; }

/* 3 and 5: pairs of toggles */
.ss-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ss-pair .btn { min-height: 40px; padding: 4px 6px; font-size: .85rem; }
.ss-pair .btn.on { background: var(--brand-primary); color: var(--on-brand); border-color: transparent; }

/* 4: the little player; press a part to hide or show it */
.ss-body { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 0; background: var(--surface-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius-md); }
:root[data-theme="gamey"] .ss-body { background: var(--surface-tertiary); }
.ss-body .pf-row { display: flex; gap: 3px; }
.pf-part { padding: 0; min-height: 0; cursor: pointer; border: 2px solid rgba(0,0,0,.35); border-radius: 2px; opacity: .3; transition: opacity .12s; }
.pf-part.on { opacity: 1; }
.pf-part:hover { outline: 2px solid var(--brand-primary); }
.pf-head { width: 26px; height: 26px; background: #c69c6d; }
.pf-body { width: 26px; height: 38px; background: #1e90ff; }
.pf-arm { width: 13px; height: 38px; background: #c69c6d; }
.pf-leg { width: 12px; height: 36px; background: #2b2b6b; }

/* A: the paint area (wheel zooms, scrolls when zoomed) */
.ss-paint { min-height: 0; overflow: auto; display: grid; place-items: center; background: var(--surface-primary);
  border: 1px solid var(--border-light); border-radius: var(--radius-lg); box-shadow: inset 0 2px 6px rgba(0,0,0,.12); }
:root[data-theme="gamey"] .ss-paint { background: #141414; border-radius: 4px; }
.ss-paint #sk-canvas { image-rendering: pixelated; touch-action: none; cursor: crosshair; border-radius: 4px; margin: 4px; max-width: none; }

/* B, E, C, D */
.ss-side { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
.ss-3d { position: relative; flex: 1 1 auto; min-height: 0; border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--border-light);
  background: var(--surface-tertiary); }
.ss-3d canvas { position: absolute; inset: 0; width: 100% !important; height: 100% !important; display: block; }
.ss-3d canvas.ss-bg { z-index: 0; } .ss-3d canvas:not(.ss-bg) { z-index: 1; cursor: grab; }
.ss-actions { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-2); }
.ss-actions .btn { padding: 8px; }
.ss-help-modal { width: min(620px, 100%); max-height: calc(100vh - 48px); overflow-y: auto; }
.ss-help-modal .title-row { justify-content: space-between; flex-wrap: nowrap; }
.ss-tips { padding-left: 0; list-style: none; display: grid; gap: var(--space-2); }

/* gallery: pages of cards that fit, no scroll */
.pf-gallery { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6) - 2 * var(--space-6) - 2px); min-height: 420px;
  display: flex; flex-direction: column; gap: var(--space-4); }
.pf-gallery-grid { flex: 1 1 auto; min-height: 0; display: grid; gap: 16px; align-content: start; overflow: hidden; }
.pf-pager { display: flex; justify-content: space-between; align-items: center; }
.pf-skin { aspect-ratio: 3 / 4; min-height: 0; display: flex; flex-direction: column; background: var(--surface-primary); border: 1px solid var(--border-light);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden; }
:root[data-theme="gamey"] .pf-skin { background: var(--surface-tertiary); border-radius: 4px; }
.pf-skin-pic { position: relative; flex: 1 1 auto; min-height: 0; background: linear-gradient(#7ec0ff, #d6efff); display: grid; place-items: center; }
.pf-skin-pic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pf-skin-pic canvas { height: 80%; image-rendering: pixelated; }
.pf-skin-name { position: absolute; top: 0; left: 0; right: 0; margin: 0; padding: 6px 10px; background: rgba(0,0,0,.45); color: #fff;
  font-size: calc(1rem * var(--display-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; }
.pf-skin-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 8px 8px 0; }
.pf-skin-author { padding: 6px 10px 8px; font-size: .85rem; color: var(--text-secondary); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* phones and small tablets: one column, the page scrolls */
@media (max-width: 900px) {
  .ss { height: auto; grid-template-columns: 1fr; grid-template-rows: none; }
  .ss-top-left { order: 1; } .ss-top-right { order: 2; } .ss-top-mid { order: 3; } .ss-paint { order: 4; height: min(92vw, 520px); }
  .ss-tools { order: 5; overflow: visible; } .ss-side { order: 6; } .ss-3d { height: 340px; flex: none; }
  .ss-palette { grid-template-columns: repeat(12, 1fr); }
  .pf-gallery { height: auto; } .pf-gallery-grid { overflow: visible; }
  .pf-home { min-height: 0; gap: var(--space-6); padding: var(--space-4) 0; }
  .work.pf-work { padding: var(--space-4); }
}

/* ---------------------------------------------------------------- Player Forge, round 2 (reference: "Bloque base")
   No grey panel behind the tab: its pieces sit on the page itself. Card buttons in the display font. */
.work.pf-work { background: transparent; border: 0; box-shadow: none; padding: 0; }
.ss, .pf-gallery { --ss-h: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); height: var(--ss-h); }
.pf-home { min-height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); }
.btn, .pf-go, .ss-pair .btn, .pf-skin-actions .btn { font-family: var(--font-display); font-size: calc(.95rem * var(--display-scale)); letter-spacing: .02em; }
.btn.big { font-size: calc(1.05rem * var(--display-scale)); }

/* home cards: picture ~70 %, a button bridging picture and text, a small label, the title, one line */
.pf-card { height: min(460px, 76vh); width: min(300px, 100%); overflow: visible; background: var(--surface-secondary); border-radius: var(--radius-lg); }
:root[data-theme="gamey"] .pf-card { background: #f4f1e8; color: #1f2a1f; border-color: #1a1a1a; }
.pf-shot { flex: 0 0 68%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; border-bottom: 3px solid #fff; }
:root[data-theme="gamey"] .pf-shot { border-radius: 4px 4px 0 0; }
.pf-card-text { position: relative; flex: 1 1 auto; padding: 34px var(--space-4) var(--space-4); }
.pf-go { position: absolute; top: 0; left: 20%; width: 60%; transform: translateY(-50%); margin: 0; min-height: 44px; display: flex;
  justify-content: space-between; align-items: center; gap: 8px; padding: 0 14px; cursor: pointer; color: #fff; background: #5b8a3c;
  border: 0; border-radius: var(--radius-md); box-shadow: var(--shadow-md); text-transform: uppercase; }
.pf-go:hover { background: #6a9c48; box-shadow: var(--shadow-lg); }
:root[data-theme="gamey"] .pf-go { border-radius: 2px; box-shadow: inset 0 -4px 0 rgba(0,0,0,.28), 0 4px 0 rgba(0,0,0,.4); }
.pf-kicker { font-family: var(--font-display); font-size: calc(.72rem * var(--display-scale)); color: #5b8a3c; text-transform: uppercase; letter-spacing: .06em; }
.pf-card .pf-card-title { margin: 4px 0 0; text-align: left; color: inherit; text-transform: none; font-size: calc(1.15rem * var(--display-scale)); }
.pf-card .pf-card-desc { margin: 6px 0 0; text-align: left; min-height: 0; font-size: .9rem; }
:root[data-theme="gamey"] .pf-card .pf-card-desc { color: #5b625b; }

/* the left column fills the whole height: tools, colours and toggles spread to the bottom edge */
.ss-tools { justify-content: space-between; overflow: visible; }
.ss-inv { grid-template-columns: repeat(4, 1fr); }
.ss-slot { font-size: 1.35rem; }
.ss-paint { background: #141414; }
:root:not([data-theme="gamey"]) .ss-paint { background: var(--surface-tertiary); }
.ss-3d { box-shadow: var(--shadow-md); }
.ss-pair .btn, .ss-actions .btn { white-space: nowrap; font-size: calc(.8rem * var(--display-scale)); padding: 4px 6px; gap: 4px; }
.ss-actions .btn.big { font-size: calc(.9rem * var(--display-scale)); }
.ss-actions { grid-template-columns: 1fr 1fr; }

/* ---------------------------------------------------------------- Player Forge, round 3: cards follow the theme, float */
:root { --card-bg: #fffdf8; --card-text: #2c2c2c; --card-sub: #6b6b6b; --card-accent: #b9814a; --card-btn: #b9814a; --card-btn-hover: #c8925a;
  --card-float: 0 2px 0 rgba(90,60,30,.06), 0 14px 28px -6px rgba(90,60,30,.28), 0 30px 60px -20px rgba(90,60,30,.25); }
:root[data-theme="gamey"] { --card-bg: #2d2d2d; --card-text: #f0f0f0; --card-sub: #b0b0b0; --card-accent: #6cd56c; --card-btn: #3fa83f; --card-btn-hover: #4cbc4c;
  --card-float: 0 0 0 2px #0d0d0d, 0 18px 34px -6px rgba(0,0,0,.85), 0 0 36px 2px rgba(108,213,108,.28); }
.pf-card, :root[data-theme="gamey"] .pf-card { background: var(--card-bg); color: var(--card-text); border: 0; box-shadow: var(--card-float); }
.pf-card:hover { transform: translateY(-6px); box-shadow: var(--card-float), 0 24px 40px -12px rgba(0,0,0,.35); }
.pf-kicker { color: var(--card-accent); }
.pf-card .pf-card-desc, :root[data-theme="gamey"] .pf-card .pf-card-desc { color: var(--card-sub); }
.pf-shot { border-bottom-color: var(--card-bg); }
.pf-go, :root[data-theme="gamey"] .pf-go { justify-content: center; text-align: center; padding: 0 8px; min-height: 52px; left: 12%; width: 76%;
  font-size: calc(1.25rem * var(--display-scale)); background: var(--card-btn); color: #fff; }
.pf-go:hover { background: var(--card-btn-hover); }
:root:not([data-theme="gamey"]) .pf-go { color: #2c2c2c; }

/* gallery cards (reference: the square "ficha"): picture ~80 %, a light strip with the author and a tag */
.pf-gallery-grid { padding: 6px 6px 28px; }
.pf-skin, :root[data-theme="gamey"] .pf-skin { aspect-ratio: auto; height: auto; background: var(--card-bg); color: var(--card-text); border: 0; box-shadow: var(--card-float);
  border-radius: var(--radius-lg); transition: transform .15s; }
:root[data-theme="gamey"] .pf-skin { border-radius: 4px; }
.pf-skin:hover { transform: translateY(-4px); }
.pf-skin-pic { aspect-ratio: 1 / 1; flex: none; border-radius: inherit; border-bottom-left-radius: 0; border-bottom-right-radius: 0; overflow: hidden; }
.pf-skin-name { font-family: var(--font-display); text-transform: none; padding: 8px 10px; background: linear-gradient(rgba(0,0,0,.6), rgba(0,0,0,0)); text-align: left; }
.pf-skin-actions { position: absolute; left: 8px; right: 8px; bottom: 8px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pf-mini { min-height: 36px; min-width: 0; padding: 0 6px; border: 0; border-radius: var(--radius-md); cursor: pointer; white-space: nowrap; overflow: hidden;
  text-overflow: ellipsis; font-family: var(--font-display); font-size: calc(.8rem * var(--display-scale)); background: var(--card-btn); color: #fff;
  box-shadow: 0 3px 8px rgba(0,0,0,.35); }
:root:not([data-theme="gamey"]) .pf-mini { color: #2c2c2c; }
.pf-mini-alt { background: rgba(255,255,255,.92); color: #2c2c2c; }
:root[data-theme="gamey"] .pf-mini { border-radius: 2px; box-shadow: inset 0 -3px 0 rgba(0,0,0,.28), 0 3px 8px rgba(0,0,0,.5); }
.pf-mini:hover { filter: brightness(1.08); }
.pf-skin-strip { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; min-height: 0; }
.pf-skin-author { padding: 0; font-family: var(--font-display); font-size: calc(.85rem * var(--display-scale)); color: var(--card-text); }
.pf-skin-tag { font-family: var(--font-display); font-size: calc(.7rem * var(--display-scale)); color: var(--card-accent); white-space: nowrap; text-transform: uppercase; }
.pf-mini { min-height: 40px; font-size: calc(.85rem * var(--display-scale)); }
.pf-skin-name { font-size: calc(1.05rem * var(--display-scale)); padding: 10px 12px 18px; }
.pf-gallery-grid { padding: 24px 24px 40px; margin: -24px -24px 0; }

/* Game icons (game-icons.net, CC BY 3.0, see public/icons/LICENSE.txt), drawn in the button's own text colour */
.gi { display: inline-block; width: 1.35em; height: 1.35em; flex: none; background: currentColor; vertical-align: -0.3em;
  -webkit-mask: var(--gi) center / contain no-repeat; mask: var(--gi) center / contain no-repeat; }
.btn .gi { margin: 0 2px; }

/* Player Forge, round 4 (owner): a button that does something right away is green with white text, in both themes;
   a switched-on toggle is the same green and keeps white text. */
:root { --action: #3fa83f; --action-hover: #4cbc4c; --action-text: #ffffff; }
.pf-work :is(#sk-save, #sk-export, .pf-help, .pf-mini, .pf-mini-alt, .pf-back, #pf-prev, #pf-next, .ss-pair .btn.on),
:root:not([data-theme="gamey"]) .pf-work :is(.pf-mini, .pf-mini-alt) {
  background: var(--action); color: var(--action-text); border-color: transparent; }
.pf-work :is(#sk-save, #sk-export, .pf-help, .pf-mini, .pf-mini-alt, .pf-back, #pf-prev, #pf-next, .ss-pair .btn.on):hover:not(:disabled) {
  background: var(--action-hover); color: var(--action-text); }
.pf-work :is(#pf-prev, #pf-next):disabled { background: var(--surface-tertiary); color: var(--text-tertiary); }
.pf-work :is(.pf-go) { color: #fff; }
#sk-save .pf-help /* Player Forge, round 5 (owner, cozy mode): the action colour follows the theme (cozy brown, gamey green),
   buttons on cards are white and bold, neutral buttons stand out from the cream page. */
:root { --action: #a8693a; --action-hover: #b97a48; --action-text: #ffffff; }
:root[data-theme="gamey"] { --action: #3fa83f; --action-hover: #4cbc4c; --action-text: #ffffff; }
:root { --card-btn: var(--action); --card-btn-hover: var(--action-hover); }
.pf-go, :root:not([data-theme="gamey"]) .pf-go, .pf-mini, :root:not([data-theme="gamey"]) .pf-mini { color: #fff; font-weight: 700; }
:root:not([data-theme="gamey"]) .pf-go { font-weight: 700; text-shadow: 0 1px 0 rgba(0,0,0,.25); }
.pf-card { height: auto; min-height: min(440px, 72vh); }
.pf-shot { flex: 0 0 300px; }
.pf-card .pf-card-desc { font-size: .85rem; line-height: 1.35; margin-bottom: 0; }
.pf-card-text { padding-bottom: var(--space-6); }
/* cozy: unselected buttons are white with a visible border and shadow, not the page's cream */
:root:not([data-theme="gamey"]) .pf-work .btn:not(.on):not(#sk-save):not(#sk-export):not(.pf-help):not(.pf-back):not(#pf-prev):not(#pf-next):not(.mf-act):not(.gl-import) {
  background: #fffdf8; border: 1px solid #cdbfae; box-shadow: 0 2px 4px rgba(90,60,30,.15); }
:root:not([data-theme="gamey"]) .pf-work :is(select, input[type=text], input:not([type])) { border-color: #cdbfae; }
:root:not([data-theme="gamey"]) .ss-body { background: #fffdf8; border-color: #cdbfae; }
/* cozy action colour: the reference's moss green (owner, round 6) */
:root { --action: #4f7a35; --action-hover: #5e8c41; --card-accent: #4f7a35; }
:root[data-theme="gamey"] { --action: #3fa83f; --action-hover: #4cbc4c; --card-accent: #6cd56c; }

/* Minecraft item icons (McIcons, MIT; see public/mcicons/LICENSE.txt): full-colour pixel pictures, not masks */
.gi { background: var(--gi) center / contain no-repeat; -webkit-mask: none; mask: none; image-rendering: pixelated; }
.ss-slot .gi { width: 70%; height: 70%; }

/* transparent swatch: a checkerboard */
.ss-clear { background: repeating-conic-gradient(#d0d0d0 0% 25%, #ffffff 0% 50%) 50% / 8px 8px; }
.ss-top-mid { gap: var(--space-2); }
.ss-top-mid input { flex: 1 1 auto; }
.ss-import { flex: none; cursor: pointer; }
/* gallery: Delete for the author, small and quiet until armed (second click confirms) */
.pf-del { margin-left: auto; min-height: 30px; padding: 0 8px; border: 1px solid var(--accent-danger); border-radius: var(--radius-sm); background: transparent;
  color: var(--bad-text); cursor: pointer; font-family: var(--font-display); font-size: calc(.7rem * var(--display-scale)); }
.pf-del.armed { background: var(--accent-danger); color: #1a0505; }
.pf-skin-strip .pf-skin-tag { margin-left: 8px; }

/* Icons: public/icons.js names the picture for each button; arrows and "?" are plain text (owner, 2026-10-02) */
.gi { width: 1.35em; height: 1.35em; }
#sk-save .gi { width: 1.9em; height: 1.9em; vertical-align: -0.55em; }
.ff-arrow { font-family: system-ui, sans-serif; font-size: 1.25em; line-height: 1; margin: 0 2px; }
.pf-help { font-family: var(--font-display); font-size: calc(1.3rem * var(--display-scale)); }

/* Skin Studio left column: quick tooltips on hover (and keyboard focus) */
.ss-tools [data-tip] { position: relative; }
.ss-tools [data-tip]:hover::after, .ss-tools [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translateX(-50%); z-index: 30;
  width: max-content; max-width: 220px; padding: 6px 10px; border-radius: var(--radius-sm); pointer-events: none;
  background: #1d1d21; color: #fff; border: 1px solid #000; box-shadow: var(--shadow-md);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600; line-height: 1.3; text-align: center; white-space: normal; }
:root[data-theme="gamey"] .ss-tools [data-tip]:hover::after { background: #2a0f33; border-color: #9b4f9b; }
/* the left edge: tooltips start at the item instead of centring, so they never go off the column */
.ss-tools .ss-slot:nth-child(4n+1)[data-tip]:hover::after, .ss-palette > :nth-child(12n+1)[data-tip]:hover::after,
.ss-palette > :nth-child(12n+2)[data-tip]:hover::after, .ss-pair > :first-child[data-tip]:hover::after { left: 0; transform: none; }
.ss-tools .ss-slot:nth-child(4n)[data-tip]:hover::after, .ss-palette > :nth-child(12n)[data-tip]:hover::after,
.ss-palette > :nth-child(12n-1)[data-tip]:hover::after, .ss-pair > :last-child[data-tip]:hover::after { left: auto; right: 0; transform: none; }

/* gallery: no sideways scroll on desktop; the cards' shadow room is padding, not negative margins */
.work.pf-work { overflow-x: hidden; }
.pf-gallery-grid { margin: 0; padding: 12px 12px 32px; }
/* the author's small ✕ */
.pf-skin-strip { justify-content: space-between; }
.pf-del, .pf-del.armed { margin-left: auto; width: 28px; height: 28px; min-height: 0; padding: 0; display: grid; place-items: center; border: 0;
  border-radius: var(--radius-sm); background: transparent; color: var(--card-sub); font-size: 1rem; font-family: system-ui, sans-serif; }
.pf-del:hover { background: var(--accent-danger); color: #1a0505; }

/* Delete panel (public/confirm.js): slide all the way right and hold for a second */
.ff-confirm-bg { z-index: 80; }
.ff-confirm { width: min(440px, 100%); border-top-color: var(--accent-danger); text-align: center; }
.ff-confirm h2 { margin: 0 0 var(--space-2); }
.ff-confirm p { color: var(--text-secondary); margin: 0 0 var(--space-6); }
.ff-slide { position: relative; height: 56px; border-radius: var(--radius-full); background: var(--surface-tertiary); border: 2px solid var(--border-strong);
  overflow: hidden; user-select: none; touch-action: none; }
.ff-slide-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--accent-danger) 55%, transparent); }
.ff-slide.holding .ff-slide-fill { background: var(--accent-danger); animation: ff-hold 1s linear; }
@keyframes ff-hold { from { filter: brightness(1); } to { filter: brightness(.75); } }
.ff-slide-text { position: absolute; inset: 0; display: grid; place-items: center; padding: 0 60px 0 64px; font-family: var(--font-display);
  font-size: calc(.8rem * var(--display-scale)); color: var(--text-secondary); pointer-events: none; }
.ff-slide-thumb { position: absolute; top: 4px; left: 4px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; cursor: grab;
  background: var(--accent-danger); color: #fff; font-weight: 900; box-shadow: var(--shadow-md); touch-action: none; }
.ff-slide.dragging .ff-slide-thumb { cursor: grabbing; }
.ff-slide:not(.dragging) .ff-slide-thumb { transition: transform .2s; }
:root[data-theme="gamey"] .ff-slide, :root[data-theme="gamey"] .ff-slide-thumb { border-radius: 4px; }
.ff-confirm-actions { margin-top: var(--space-6); display: flex; justify-content: center; }
/* Mode switch window (public/confirm_mode.js): three calm sliders, one per thing the admin agrees to */
.ff-mode-switch { text-align: left; max-height: 90vh; overflow-y: auto; }
.ff-mode-switch .ms-list { margin: 0 0 var(--space-4); padding-left: var(--space-6); color: var(--text-secondary); }
.ff-mode-switch .ms-password { display: grid; gap: var(--space-2); margin: var(--space-4) 0; }
.ff-mode-switch .ms-slide { margin-bottom: var(--space-3); }
.ff-slide-calm .ff-slide-fill { background: color-mix(in srgb, var(--accent-primary, var(--accent-danger)) 45%, transparent); }
.ff-slide-calm .ff-slide-thumb { background: var(--accent-primary, var(--accent-danger)); }
.ff-slide-calm.done .ff-slide-fill { background: var(--accent-primary, var(--accent-danger)); }
.ff-slide-calm.done .ff-slide-text::before { content: "✓ "; }
.ff-mode-switch .ff-confirm-actions { gap: var(--space-3); }

/* ================================================================ Monster Forge (redesign 2026-10-02) */
/* Reuses the Player Forge pieces (.pf-*); only the pictures and the classic-mode switch live here. */
/* Cards view: only the new work area shows. Classic mode (.mf-classic): the old list + editor, with a Back button. */
#tab-mobs:not(.mf-classic) > :not(#mobs-work) { display: none !important; }
#tab-mobs:not(.mf-classic) { display: block; }
#tab-mobs.mf-classic > #mobs-work { display: none; }
#tab-mobs:not(.mf-classic) .mf-return { display: none; }
.mf-return { flex: none; align-self: flex-start; }
.mf-top { margin-bottom: var(--space-4); }
.mf-sub { min-height: calc(100vh - var(--topbar-h) - 2 * var(--space-6) - 44px - var(--space-4)); }
.mf-shot-model { background: linear-gradient(#9fd3ff, #d6efff 70%, #7a7a7a 70%, #7a7a7a 76%, #4f4f4f 76%); }
.mf-shot-create { background: linear-gradient(#f3c6ff, #ffe9f7 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
.mf-shot-play { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
.mf-shot-modelNew { background: linear-gradient(#7ec0ff, #d6efff 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
.mf-shot-modelGallery { background: linear-gradient(#3a2a1e, #6b4a2e 70%, #7a7a7a 70%, #7a7a7a 76%, #4f4f4f 76%); }
.mf-pic-model { background: linear-gradient(#d6efff, #9fd3ff); }
.mf-pic-mob { background: linear-gradient(#24326a, #0b1030); }
.mf-pic { font-size: clamp(2.5rem, 6vw, 4.5rem); }
@media (max-width: 900px) { .mf-sub { min-height: 0; } }

/* Blockbench window (Monster Forge redesign): Back top-left, Save (chest) and ? top-right, action colour */
.bb-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; gap: var(--space-2); align-items: center; padding: 8px 12px; }
.bb-mid { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.bb-mid h2 { margin: 0; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bb-mid input { flex: 0 1 320px; min-width: 0; }
.bb-action { background: var(--action); color: var(--action-text); border-color: transparent; font-family: var(--font-display); }
.bb-action:hover:not(:disabled) { background: var(--action-hover); color: var(--action-text); }
.bb-action:disabled { background: var(--surface-tertiary); color: var(--text-tertiary); }
.bb-save .gi { width: 1.9em; height: 1.9em; vertical-align: -0.55em; }
.bb-help { width: 44px; padding: 0; font-size: calc(1.3rem * var(--display-scale)); }
#bb-help-panel { z-index: 90; }

/* ================================================================ Monster Forge inside screens (owner sketches 2026-10-02) */
/* Mob creator, Model viewer, Deploy mob: one top row, three columns, fill the window, no page scroll. */
.mf-ed { --mf-h: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); height: var(--mf-h); min-height: 560px; display: grid; gap: var(--space-4);
  grid-template-columns: 240px minmax(0, 1fr) minmax(260px, 330px); grid-template-rows: auto minmax(0, 1fr); }
.mf-ed-top { grid-column: 1 / -1; display: grid; grid-template-columns: 240px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; }
.mf-ed-mid { display: flex; align-items: center; gap: var(--space-4); min-width: 0; }
.mf-ed-name-send { display: flex; align-items: center; gap: var(--space-2); flex: 1 1 auto; min-width: 0; }
.mf-ed-name-send input { flex: 1 1 auto; min-width: 0; }
.mf-ed-name-send .btn { flex: 0 0 auto; }
.mf-ed-mid > input, .mf-ed-mid > select { flex: 1 1 auto; min-width: 0; font-size: 1.05rem; min-height: 44px; }
.mf-ed-right { display: flex; align-items: center; gap: var(--space-2); justify-content: flex-end; }
.mf-ed-right select { min-width: 180px; max-width: 280px; min-height: 44px; }
.mf-model-ed, .mf-deploy-ed { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); }
.mf-model-ed .mf-ed-top, .mf-deploy-ed .mf-ed-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.mf-deploy-ed .mf-ed-mid > select { max-width: 420px; }

/* action buttons: the theme's action colour, white text (CONSTRAINTS §4) */
.mf-work :is(.mf-act, .mf-actions .btn, .mf-wide, .mf-step.on, .mf-anim.on, .mf-anim-names, .mf-modal-actions .btn.primary),
.mf-modal :is(.btn.primary, .mf-act) { background: var(--action); color: var(--action-text); border-color: transparent; }
.mf-work :is(.mf-actions .btn, .mf-wide, .mf-anim-names):hover:not(:disabled), .mf-modal .btn.primary:hover:not(:disabled) { background: var(--action-hover); color: var(--action-text); }
.mf-work :is(.mf-actions .btn, .mf-wide, .mf-anim-names):disabled { background: var(--surface-tertiary); color: var(--text-tertiary); }
.mf-work .mf-side .btn.mf-wide.mf-remove { background: #b3261e; color: #fff; }
.mf-work .mf-side .btn.mf-wide.mf-remove:hover:not(:disabled) { background: #c8372e; color: #fff; }
.mf-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mf-actions .btn, .mf-wide { width: 100%; white-space: nowrap; }
#mc-save .gi, #mv-save .gi { width: 1.9em; height: 1.9em; vertical-align: -0.55em; }

/* the 12 name colours (Mob creator, top row) */
.mf-colours { flex: none; display: grid; grid-template-columns: repeat(6, 22px); gap: 3px; padding: 4px; background: #c6c6c6; border: 3px solid #373737;
  border-right-color: #fff; border-bottom-color: #fff; }
.mf-colour { width: 22px; height: 18px; min-height: 0; padding: 0; border: 2px solid #373737; border-radius: 0; background: var(--c); cursor: pointer; }
.mf-colour.on { outline: 3px solid var(--action); outline-offset: 0; border-color: #fff; }
.mf-colour:hover { filter: brightness(1.1); }

/* numbered steps, the left column: arrow-shaped like the sketch, top to bottom */
.mf-steps { display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-2); min-height: 0; }
.mf-step { flex: 1 1 0; max-height: 76px; min-height: 44px; display: flex; align-items: center; gap: var(--space-2); padding: 0 28px 0 10px; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: calc(.85rem * var(--display-scale)); color: var(--text-primary); background: var(--surface-secondary);
  border: 2px solid var(--border-strong); border-radius: var(--radius-md); clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 50%, calc(100% - 18px) 100%, 0 100%); }
:root:not([data-theme="gamey"]) .mf-step:not(.on) { background: #fffdf8; border-color: #cdbfae; }
:root[data-theme="gamey"] .mf-step { border-radius: 2px; }
.mf-step:hover:not(.on) { filter: brightness(1.05); }
.mf-step-n { flex: none; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: var(--card-accent); color: #fff; font-weight: 700; }
.mf-step.on .mf-step-n { background: #fff; color: var(--action); }
.mf-step-label { min-width: 0; line-height: 1.25; }

/* the middle pane */
.mf-pane { min-height: 0; display: flex; flex-direction: column; background: var(--surface-secondary); border: 2px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; }
:root:not([data-theme="gamey"]) .mf-pane { background: #fffdf8; border-color: #cdbfae; }
:root[data-theme="gamey"] .mf-pane { border-radius: 4px; }
.mf-pane-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: var(--space-6); }
.mf-pane-body h3 { margin-top: 0; font-family: var(--font-display); }
.mf-pane-status { flex: none; padding: 8px var(--space-6); border-top: 1px solid var(--border-light); min-height: 40px; display: flex; align-items: center; }
.mf-status-ok { color: var(--good-text, #2e7d32); font-weight: 700; }
.mf-status-bad { background: none; border: 0; padding: 0; color: var(--bad-text); font-weight: 700; cursor: pointer; text-decoration: underline; font: inherit; }
.mf-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: var(--space-4) var(--space-6); }
.mf-field { margin-bottom: var(--space-4); }
.mf-field input[type=range] { width: 100%; }
.mf-checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); margin: var(--space-2) 0 var(--space-4); }
.mf-pick-btn { display: flex; align-items: center; gap: var(--space-2); width: 100%; justify-content: flex-start; }
.mf-pick-btn .mf-item { width: 28px; height: 28px; }
.mf-yaml { max-height: none; min-height: 160px; }
.mf-pane .code textarea { min-height: 140px; }

/* right column */
.mf-side { min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); justify-content: space-between; }
.st-texture-note { margin: 0; padding: 8px 10px; border-radius: var(--radius-md); background: var(--surface-tertiary, #f3eadc); color: var(--text-primary); }
.mf-preview { flex: 1 1 auto; min-height: 180px; overflow: hidden; border-radius: var(--radius-lg); background: var(--surface-secondary); }
.mf-preview .look { height: 100%; display: flex; flex-direction: column; }
.mf-preview .look-stage { flex: 1 1 auto; min-height: 0; }
.mf-preview .look-stage .viewer, .mf-preview .look-view { height: 100%; }
.mf-preview :is(h4, .slots, .look-icons, .look-notes) { display: none; }
.mf-preview .anims { padding: 4px 8px; display: flex; flex-wrap: wrap; gap: 4px; }
.mf-slot-group { flex: none; }
.mf-slot-title { font-family: var(--font-display); font-size: calc(.75rem * var(--display-scale)); color: var(--card-accent); text-transform: uppercase; letter-spacing: .05em;
  margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.mf-inv { grid-template-columns: repeat(6, 1fr); }
.mf-slot { position: relative; }
.mf-slot .mf-item { width: 72%; height: 72%; image-rendering: pixelated; }
.mf-slot-empty .mf-item { opacity: .28; filter: grayscale(1); }
.mf-slot-add { font-size: 1.6rem; font-weight: 900; color: #373737; }
.mf-count { position: absolute; right: 2px; bottom: 0; color: #fff; font-weight: 900; font-size: .8rem; text-shadow: 1px 1px 0 #3f3f3f; font-family: var(--font-display); }
.mf-chance { position: absolute; left: 2px; top: 0; color: #ffe27a; font-size: .6rem; font-weight: 700; text-shadow: 1px 1px 0 #3f3f3f; }
.mf-item { image-rendering: pixelated; }
/* tooltips for the right column's slots and the colours (CONSTRAINTS §6) */
.mf-ed [data-tip] { position: relative; }
.mf-ed [data-tip]:hover::after, .mf-ed [data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; right: 0; bottom: calc(100% + 8px); z-index: 30; width: max-content; max-width: 240px; padding: 6px 10px;
  border-radius: var(--radius-sm); pointer-events: none; background: #1d1d21; color: #fff; border: 1px solid #000; box-shadow: var(--shadow-md);
  font-family: var(--font-body); font-size: .85rem; font-weight: 600; line-height: 1.3; text-align: center; white-space: normal; text-transform: none; }
:root[data-theme="gamey"] .mf-ed [data-tip]:hover::after { background: #2a0f33; border-color: #9b4f9b; }
.mf-colours [data-tip]:hover::after { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: calc(100% + 8px); }

/* item picker modal */
.mf-modal-bg { z-index: 70; }
.mf-modal { width: min(560px, 100%); max-height: calc(100vh - 48px); display: flex; flex-direction: column; }
.mf-modal-wide { width: min(860px, 100%); }
.mf-modal-body { min-height: 0; overflow-y: auto; }
.mf-pick-find { width: 100%; margin-bottom: var(--space-2); }
.mf-pick-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); max-height: 46vh; overflow-y: auto; }
.mf-pick-grid .ss-slot .mf-item { width: 75%; height: 75%; }
.mf-slot-none { font-size: 1.3rem; color: #373737; font-weight: 900; }
.mf-pick-name { min-height: 1.4em; margin: 6px 0; font-weight: 700; }
.mf-drop-extra { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-6); align-items: center; padding-top: var(--space-2); border-top: 1px solid var(--border-light); }
.mf-modal-actions { justify-content: flex-end; margin-top: var(--space-4); }

/* Model viewer */
.mf-mv-left { min-height: 0; display: grid; grid-template-rows: minmax(0, 1.6fr) auto minmax(0, 1fr); gap: var(--space-4); }
.mf-mv-view { min-height: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-secondary); }
.mf-mv-view .viewer { height: 100%; }
.mf-anims { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.mf-anim { min-height: 40px; }
.mf-anim-odd { border-style: dashed; }
.mf-anim-names { margin-left: auto; width: 44px; padding: 0; }
.mf-mv-history, .mf-checks-list { min-height: 0; overflow-y: auto; background: var(--surface-secondary); border: 2px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-4); }
:root:not([data-theme="gamey"]) :is(.mf-mv-history, .mf-checks-list, .mf-live) { background: #fffdf8; border-color: #cdbfae; }
.mf-checks-list { flex: 1 1 auto; }
.mf-hist-row { border-radius: var(--radius-sm); }
.mf-hist-row.on { background: color-mix(in srgb, var(--action) 18%, transparent); }
.mf-hist-pick { width: 100%; display: flex; flex-wrap: wrap; gap: 6px; align-items: baseline; text-align: left; background: none; border: 0; padding: 8px; cursor: pointer; color: inherit; font: inherit; }
.mf-hist-pick:hover { background: color-mix(in srgb, var(--action) 10%, transparent); }
.mf-check-row { padding: 8px 10px; border-left: 4px solid var(--good-text, #3fa83f); margin-bottom: 6px; border-radius: 2px; background: color-mix(in srgb, var(--surface-primary) 60%, transparent); }
.mf-check-row.error { border-color: var(--accent-danger); }
.mf-check-row.warning { border-color: #e0a800; }
.mf-check-row.info { border-color: #4a90d9; }
.mf-check-msg { font-size: .88rem; margin-top: 4px; }
.mf-check-msg .fix { color: var(--text-secondary); font-size: .82rem; }
.mf-std { list-style: none; padding: 0; margin: var(--space-2) 0 var(--space-4); }
.mf-std li { padding: 3px 0; }
.mf-std li.missing { color: var(--text-secondary); }
.mf-renames .rename-row { display: grid; grid-template-columns: minmax(80px, 1fr) auto minmax(120px, 1.2fr) auto; gap: 8px; align-items: center; margin-bottom: 6px; }

/* Deploy mob */
.mf-map { position: relative; min-height: 0; border-radius: var(--radius-lg); overflow: hidden; background: var(--surface-secondary); }
.mf-map iframe.map { width: 100%; height: 100%; border: 0; display: block; }
.mf-map-hint { position: absolute; left: 12px; bottom: 12px; padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(0,0,0,.6); color: #fff; font-size: .85rem; pointer-events: none; }
.mf-map-menu { position: absolute; z-index: 20; width: 240px; display: flex; flex-direction: column; gap: 8px; }
.mf-map-menu-row { display: flex; align-items: center; gap: 8px; }
.mf-map-menu-row .mf-item, .mf-live-head .mf-item, .clean-row .mf-item { width: 24px; height: 24px; vertical-align: middle; }
.mf-live { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--surface-secondary); border: 2px solid var(--border-strong); border-radius: var(--radius-lg); padding: var(--space-4); }
.mf-live-count { margin-left: auto; text-transform: none; color: var(--text-secondary); font-family: var(--font-body); font-size: .85rem; letter-spacing: 0; }
.mf-live-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mf-live-head { width: 100%; display: flex; align-items: center; gap: 8px; padding: 8px; background: none; border: 0; border-bottom: 1px solid var(--border-light); cursor: pointer; color: inherit; font: inherit; text-align: left; }
.mf-live-head span { flex: 1 1 auto; }
.mf-live-group.mine .mf-live-head { font-weight: 700; }
.mf-live-row { width: 100%; display: flex; justify-content: space-between; gap: 8px; padding: 6px 8px 6px 40px; background: none; border: 0; cursor: pointer; color: inherit; font: inherit; text-align: left; }
.mf-live-row:hover, .mf-live-head:hover { background: color-mix(in srgb, var(--action) 10%, transparent); }
.mf-where { display: flex; flex-direction: column; gap: var(--space-2); margin-bottom: var(--space-4); }
.mf-where-opt { display: grid; grid-template-columns: auto auto 1fr; gap: 8px; align-items: center; padding: 8px; border: 1px solid var(--border-light); border-radius: var(--radius-sm); }
.mf-where-opt select { grid-column: 2 / -1; }
.mf-where-opt .facts { grid-column: 2 / -1; }
.mf-remove-list { max-height: 30vh; overflow-y: auto; }

/* phones: one column, the page may scroll (CONSTRAINTS §1) */
@media (max-width: 900px) {
  .mf-ed, .mf-model-ed, .mf-deploy-ed { height: auto; min-height: 0; grid-template-columns: 1fr; grid-template-rows: none; }
  .mf-ed-top, .mf-model-ed .mf-ed-top, .mf-deploy-ed .mf-ed-top { grid-template-columns: auto 1fr; }
  .mf-ed-mid { grid-column: 1 / -1; order: 3; flex-wrap: wrap; }
  .mf-steps { flex-direction: row; flex-wrap: wrap; }
  .mf-step { flex: 1 1 140px; clip-path: none; }
  .mf-pane-body { max-height: none; }
  .mf-preview { min-height: 260px; }
  .mf-mv-left { grid-template-rows: none; }
  .mf-mv-view, .mf-map { height: 60vh; }
  .mf-mv-history, .mf-checks-list, .mf-live { max-height: 50vh; }
}
.mf-modal .title-row { justify-content: space-between; align-items: center; }
.mf-modal .title-row h2 { margin: 0; }

/* Player Forge in the Monster Forge style (owner, 2026-10-02): groups with small green titles, framed work areas */
.ss-tools { justify-content: space-between; gap: var(--space-2); overflow: visible; padding-right: 0; }
.ss-group { display: flex; flex-direction: column; gap: 6px; }
.ss-group .mf-slot-title { margin-bottom: 0; }
.ss-paint, .ss-3d { border: 2px solid var(--border-strong); border-radius: var(--radius-lg); overflow: hidden; }
:root:not([data-theme="gamey"]) :is(.ss-paint, .ss-3d) { border-color: #cdbfae; }
:root[data-theme="gamey"] :is(.ss-paint, .ss-3d) { border-radius: 4px; }
.ss-side { overflow: visible; display: flex; flex-direction: column; gap: var(--space-4); justify-content: space-between; min-height: 0; }
.ss-3d { flex: 1 1 auto; min-height: 0; }
.ss-bg-group select { width: 100%; }
.pf-gallery-top { gap: var(--space-4); }
/* the left column always fits: the mannequin box gives up height first */
.ss-tools { overflow: hidden; }
/* tools as one hotbar row (8 slots) so every group fits the window */
.ss-tools .ss-inv { grid-template-columns: repeat(8, 1fr); gap: 2px; padding: 4px; }
.ss-tools .ss-slot { border-width: 2px; }
.ss-tools .ss-slot:nth-child(4n+1)[data-tip]:hover::after, .ss-tools .ss-slot:nth-child(4n)[data-tip]:hover::after { left: 50%; right: auto; transform: translateX(-50%); }
.ss-tools .ss-slot:first-child[data-tip]:hover::after { left: 0; transform: none; }
.ss-tools .ss-slot:last-child[data-tip]:hover::after { left: auto; right: 0; transform: none; }
.ss-tools .ss-palette { gap: 3px; }
.ss-side { overflow: hidden; padding-right: 0; }
.ss-tools > .ss-group:has(.ss-body) { flex: 0 1 auto; min-height: 0; }
.ss-tools .ss-body { flex: 0 1 auto; min-height: 0; overflow: hidden; }
/* a slightly smaller mannequin so the column fits in both themes */
.ss-tools .ss-body { padding: 8px; gap: 2px; justify-content: center; }
.ss-tools .pf-head { width: 22px; height: 22px; }
.ss-tools .pf-body { width: 22px; height: 32px; }
.ss-tools .pf-arm { width: 11px; height: 32px; }
.ss-tools .pf-leg { width: 11px; height: 30px; }
.ss-tools .ss-body > *, .ss-tools .pf-part { flex-shrink: 0; }
.ss-tools .ss-body { padding: 3px 8px; gap: 1px; }
.ss-tools .ss-group { gap: 3px; }

/* Skin Studio left column grows with the window (owner, 2026-10-02): no empty gaps between groups.
   The mannequin box takes the spare height and the figure scales with it; tall windows get the big 4x2 tool slots. */
.ss-tools { justify-content: flex-start; gap: var(--space-3, 12px); }
.ss-tools > .ss-group:has(.ss-body) { flex: 1 1 auto; min-height: 0; }
.ss-tools .ss-body { flex: 1 1 auto; min-height: 84px; container-type: size; padding: 4px 8px; gap: 1px; }
.ss-tools .ss-body { --u: min(1.05cqh, 2cqw); }
.ss-tools .pf-head { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.ss-tools .pf-body { width: calc(var(--u) * 22); height: calc(var(--u) * 32); }
.ss-tools .pf-arm { width: calc(var(--u) * 11); height: calc(var(--u) * 32); }
.ss-tools .pf-leg { width: calc(var(--u) * 11); height: calc(var(--u) * 30); }
@media (min-height: 860px) {
  .ss-tools .ss-inv { grid-template-columns: repeat(4, 1fr); gap: 4px; padding: 6px; }
  .ss-tools .ss-slot { border-width: 3px; }
  .ss-tools .ss-slot:nth-child(4n+1)[data-tip]:hover::after { left: 0; transform: none; }
  .ss-tools .ss-slot:nth-child(4n)[data-tip]:hover::after { left: auto; right: 0; transform: none; }
}

/* Monster Forge nitpicks (owner, 2026-10-02) */
/* name colours: the same swatches as the Skin Studio palette, one row of 12 */
.mf-names { flex: none; width: calc(12 * 26px + 11 * 3px); grid-template-columns: repeat(12, 26px); gap: 3px; }
.mf-names .ss-colour { width: 26px; height: 26px; }
.mf-names [data-tip]:hover::after { right: auto; left: 50%; transform: translateX(-50%); bottom: auto; top: calc(100% + 8px); }
/* preview: no animation buttons (the Model viewer has them); the notes sit under the picture, never over it */
.mf-preview .anims, .mf-preview .look-vanilla .row .btn { display: none; }
.mf-preview .look-stage { display: flex; flex-direction: column; }
.mf-preview .look-view, .mf-preview .look-vanilla { flex: 1 1 auto; min-height: 0; order: 1; }
.mf-preview .look-vanilla { display: flex; flex-direction: column; }
.mf-preview .look-vanilla[hidden], .mf-preview .look-view[hidden] { display: none; }
.mf-preview .vanilla-stage { flex: 1 1 auto; min-height: 0; }
.mf-preview .vanilla-stage .viewer, .mf-preview .look-vanilla .viewer { height: 100%; }
.mf-preview .nametag { position: absolute !important; top: 8px; }
.mf-preview .look-placeholder.look-placeholder-note { order: 2; border: 0; border-top: 1px solid var(--border-light); border-radius: 0; margin: 0; padding: 8px 12px; }
.mf-preview .look-placeholder.look-placeholder-note .ph-icon { display: none; }
.mf-preview .look-notes { display: block; order: 3; padding: 0 12px 8px; }
.mf-preview .look-vanilla .row { padding: 6px 12px 0; margin: 0; }
/* info texts use the small display font of the green titles */
.mf-preview :is(.look-placeholder-note, .look-notes .facts, .look-vanilla .facts), .mf-pane-status, .mf-pane-status * {
  font-family: var(--font-display); font-size: calc(.72rem * var(--display-scale)); line-height: 1.45; letter-spacing: .02em; }
.mf-preview :is(.look-placeholder-note, .look-notes .facts, .look-vanilla .facts) { color: var(--text-secondary); }
.mf-pane-status .mf-status-ok { color: var(--card-accent); text-transform: uppercase; }
.mf-pane-status .mf-status-bad { text-transform: uppercase; }
/* form rows: every field starts at the top, inputs, dropdowns and pickers are the same height */
.mf-grid2 { align-items: start; }
.mf-field { display: flex; flex-direction: column; gap: 6px; }
.mf-field > label { margin: 0; }
.mf-pane .mf-field :is(input[type=text], select, .mf-pick-btn) { height: 44px; min-height: 44px; padding-top: 0; padding-bottom: 0; box-sizing: border-box; }
.mf-pane .mf-field textarea { min-height: 88px; }
.mf-pane .mf-field .mf-check { min-height: 22px; }
.mf-slot-empty .mf-item { opacity: .45; }

/* Deploy: the spot picked on the map, and typed coordinates */
.mf-map-hint.on { background: var(--action); }
.mf-xyz { grid-column: 2 / -1; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.mf-xyz label { display: flex; align-items: center; gap: 4px; font-weight: 700; }
.mf-xyz input { width: 90px; height: 36px; }
.mf-live-divider { margin: 10px 0 2px; font-family: var(--font-display); font-size: calc(.65rem * var(--display-scale)); color: var(--text-secondary); text-transform: uppercase; letter-spacing: .05em; }

/* ================================================================ Every other tab in the Monster Forge style (2026-10-02)
   One restyle of the shared building blocks (.work, .card, .title-row, h3, .btn, tables, sub-tabs, fields), so every
   tab looks like the redesigned ones without changing what it does. Player/Monster Forge (.pf-work) are left alone. */
:root { --ff-frame: var(--border-strong); --ff-panel: var(--surface-secondary); }
:root:not([data-theme="gamey"]) { --ff-frame: #cdbfae; --ff-panel: #fffdf8; }

/* no grey panel behind a tab: its pieces sit on the page (CONSTRAINTS §1) */
.work.single:not(.pf-work), #tab-mobs.mf-classic .work { background: transparent; border: 0; box-shadow: none; padding: 0; min-height: 0; }

/* page title: display font, with its buttons on the same line; the line under it is the page's one-line help */
.work:not(.pf-work) > .title-row h2, .work:not(.pf-work) > h2 { font-family: var(--font-display); }
.work:not(.pf-work) > .title-row { margin-bottom: var(--space-2); }
.work:not(.pf-work) > .title-row + .facts, .work:not(.pf-work) > h2 + .facts { margin: 0 0 var(--space-4); }

/* section titles: the small green titles ("HISTORY", "CHECKS") */
.work:not(.pf-work) h3, .work:not(.pf-work) h4, .modal h3 {
  font-family: var(--font-display); font-size: calc(.75rem * var(--display-scale)); color: var(--card-accent);
  text-transform: uppercase; letter-spacing: .05em; margin: var(--space-4) 0 6px; }

/* panels: framed, rounded, on the page colour (cards, side lists, split columns, status cards) */
.work:not(.pf-work) :is(.card, .status-card, .side, .metric-detail), .work:not(.pf-work) > .split > div,
#tab-mobs.mf-classic .side {
  background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); box-shadow: none; }
:root[data-theme="gamey"] .work:not(.pf-work) :is(.card, .status-card, .side), :root[data-theme="gamey"] .work:not(.pf-work) > .split > div { border-radius: 4px; }
.work:not(.pf-work) > .split > div { padding: var(--space-4); min-width: 0; }
.work:not(.pf-work) .card .card { border-width: 1px; }
.work:not(.pf-work) .card > .title-row h3, .work:not(.pf-work) .card > h3:first-child { margin-top: 0; }

/* buttons: an action is the theme's action colour with white text; delete is dark red; others are neutral */
.work:not(.pf-work) .btn:is(.primary, .gold), .modal .btn:is(.primary, .gold), .work:not(.pf-work) .btn.armed {
  background: var(--action); color: var(--action-text); border-color: transparent; }
.work:not(.pf-work) .btn:is(.primary, .gold):hover:not(:disabled), .modal .btn:is(.primary, .gold):hover:not(:disabled) { background: var(--action-hover); color: var(--action-text); }
.work:not(.pf-work) .btn.danger, .modal .btn.danger { background: #b3261e; color: #fff; border-color: transparent; }
.work:not(.pf-work) .btn.danger:hover:not(:disabled), .modal .btn.danger:hover:not(:disabled) { background: #c8372e; color: #fff; }
.work:not(.pf-work) .btn:disabled, .modal .btn:disabled { background: var(--surface-tertiary); color: var(--text-tertiary); }
:root:not([data-theme="gamey"]) .work:not(.pf-work) .btn:not(.primary):not(.gold):not(.danger):not(.armed):not(.on):not(:disabled),
:root:not([data-theme="gamey"]) .modal .btn:not(.primary):not(.gold):not(.danger):not(:disabled) {
  background: #fffdf8; border: 1px solid #cdbfae; box-shadow: 0 2px 4px rgba(90,60,30,.15); color: var(--text-primary); }
.work:not(.pf-work) .btn.small, .modal .btn.small { min-height: 36px; font-size: calc(.8rem * var(--display-scale)); }

/* fields: the same height in a row, labels in bold, hints small */
.work:not(.pf-work) :is(input[type=text], input[type=number], input[type=search], input[type=password], input:not([type]), select),
.modal :is(input[type=text], input[type=number], input[type=search], input[type=password], input:not([type]), select) { min-height: 44px; box-sizing: border-box; }
.work:not(.pf-work) .grid2 { align-items: start; }
:root:not([data-theme="gamey"]) .work:not(.pf-work) :is(input, select, textarea):not([type=checkbox]):not([type=radio]):not([type=range]) { border-color: #cdbfae; }

/* tables: framed, the header row in the small green title font */
.work:not(.pf-work) table:is(.versions, .deploy-table, .bk-table, .wl-table, .worlds, .stats-table) {
  border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); border-collapse: separate; border-spacing: 0; overflow: hidden; background: var(--ff-panel); }
.work:not(.pf-work) table th { font-family: var(--font-display); font-size: calc(.68rem * var(--display-scale)); color: var(--card-accent);
  text-transform: uppercase; letter-spacing: .04em; font-weight: 400; }
.work:not(.pf-work) table tr:last-child > td { border-bottom: 0; }

/* empty states: a dashed frame, the small display font */
.work:not(.pf-work) .empty { border: 2px dashed var(--ff-frame); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-4);
  font-family: var(--font-display); font-size: calc(.8rem * var(--display-scale)); line-height: 1.6; }

/* sub-tabs (World Forge, Adventure Forge, Gallery…): a row of buttons, the open one in the action colour */
.subtabs { border-bottom: 0; gap: var(--space-2); margin: 0 0 var(--space-4); }
.subtabs button { min-height: 44px; padding: 0 var(--space-4); border: 2px solid var(--ff-frame); border-radius: var(--radius-md); margin: 0;
  background: var(--ff-panel); color: var(--text-primary); font-family: var(--font-display); font-size: calc(.85rem * var(--display-scale)); }
:root[data-theme="gamey"] .subtabs button { border-radius: 2px; }
.subtabs button:hover { filter: brightness(1.05); }
.subtabs button[aria-selected="true"] { background: var(--action); color: var(--action-text); border-color: transparent; font-weight: 400; }

/* badges stay small, in the body font */
.work:not(.pf-work) .badge { font-size: .72rem; }
/* card homes for the other tabs (forge_home.js): pictures as sky / ground scenes like Player and Monster Forge */
.fh-shot-worldforge { background: linear-gradient(#7ec0ff, #d6efff 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
.fh-shot-seeds { background: linear-gradient(#b8e994, #e8f8d8 70%, #6b8f3a 70%, #6b8f3a 76%, #5c3a1e 76%); }
.fh-shot-structures { background: linear-gradient(#ffd59e, #fff1dc 70%, #7a7a7a 70%, #7a7a7a 76%, #4f4f4f 76%); }
.fh-shot-packs { background: linear-gradient(#f3c6ff, #ffe9f7 70%, #4fb3c4 70%, #4fb3c4 76%, #2d6f7a 76%); }
.fh-shot-challenges { background: linear-gradient(#ffcf5c, #fff3cf 70%, #b3261e 70%, #b3261e 76%, #6e1712 76%); }
.fh-shot-quests { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
.fh-shot-gallery { background: linear-gradient(#9fd3ff, #d6efff 70%, #c69c6d 70%, #c69c6d 76%, #8d5524 76%); }
.fh-shot-scrapbook { background: linear-gradient(#ffe0b2, #fff6e8 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
.fh-shot-tools { background: linear-gradient(#c7b5ff, #efe9ff 70%, #3a2a1e 70%, #3a2a1e 76%, #1f160f 76%); }
.fh-shot-chests { background: linear-gradient(#ffd59e, #fff1dc 70%, #8b5a3c 70%, #8b5a3c 76%, #5c3a1e 76%); }
#home-work .pf-home, #itemforge-work.pf-work .pf-home { flex-wrap: wrap; }
/* the Back button: first in a sub-tab row, or before a part's title */
.subtabs .fh-back, .fh-back { background: var(--action); color: var(--action-text); border: 0; font-family: var(--font-display); }
.subtabs .fh-back:hover { background: var(--action-hover); filter: none; }
.subtabs .fh-back { margin-right: var(--space-4); }
.work:not(.pf-work) > .title-row .fh-back { margin-right: var(--space-2); }
/* every card home: one row, cards share the tallest card's height and shrink a bit when there are four */
.pf-home { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(200px, 300px); justify-content: center; align-content: center;
  align-items: stretch; gap: var(--space-6); }
.pf-home > .pf-card { width: auto; height: auto; }
@media (max-width: 900px) { .pf-home { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: minmax(0, 340px); } }
/* Forge Master's chat and the map: framed like the other work areas */
.fm-log, .map-wrap, .chat-log { background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); }
.map-bar { flex-wrap: wrap; justify-content: flex-start; padding: 0 0 var(--space-2); }
.map-bar .btn { white-space: nowrap; }
.map-bar .facts { margin: 0; flex: 1 1 200px; }
.map-wrap { overflow: hidden; }

/* ================================================================ Item Forge editors (owner sketches 2026-10-02) */
.it-ed, .ch-ed { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.it-ed .mf-ed-top, .ch-ed .mf-ed-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.it-left, .ch-left { min-height: 0; display: grid; gap: var(--space-4); }
.it-left { grid-template-rows: minmax(0, 1fr) auto; }
.ch-left { grid-template-rows: auto minmax(0, 1fr); }
.it-a { min-height: 0; }

/* A: the kind (inventory slots with a label) and the base item */
.it-kinds { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); }
.it-kind { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 6px 8px; min-width: 84px; background: none; border: 2px solid transparent;
  border-radius: var(--radius-md); cursor: pointer; color: inherit; font-family: var(--font-display); font-size: calc(.72rem * var(--display-scale)); }
.it-kind .ss-slot { width: 52px; height: 52px; }
.it-kind .mf-item { width: 75%; height: 75%; }
.it-kind.on { border-color: var(--action); background: color-mix(in srgb, var(--action) 14%, transparent); }
.it-kind:hover:not(:disabled) { background: color-mix(in srgb, var(--action) 8%, transparent); }
.it-base { margin-left: auto; border-style: dashed; border-color: var(--ff-frame); }
.it-base:disabled { opacity: .5; cursor: default; }
.it-pages { margin-bottom: var(--space-4); }
.it-stat { display: grid; grid-template-columns: minmax(150px, 220px) minmax(0, 1fr) 130px; gap: var(--space-4); align-items: center; padding: 6px 0;
  border-bottom: 1px solid var(--border-light); opacity: .7; }
.it-stat.on { opacity: 1; }
.it-stat output { font-family: var(--font-display); font-size: calc(.75rem * var(--display-scale)); color: var(--card-accent); text-align: right; }
.it-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.mf-work .it-chip.on { background: var(--action); color: var(--action-text); border-color: transparent; }
.it-action { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--border-light); }
.it-action input[type=number] { width: 80px; }

/* B: what it has */
.it-b { min-height: 0; max-height: 160px; overflow-y: auto; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); }
.it-b-list { display: flex; flex-wrap: wrap; gap: 6px; }
.it-has { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 10px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--action) 18%, transparent);
  font-size: .85rem; font-weight: 600; }
.it-has-x { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; }
.it-has-x:hover { background: #b3261e; color: #fff; }

/* C: the item and its tooltip, like in the game */
.it-c { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.it-stage { flex: 1 1 auto; min-height: 140px; display: grid; place-items: center; border-radius: var(--radius-lg); border: 2px solid var(--ff-frame);
  background: radial-gradient(circle at 50% 45%, #3b4f6b, #141a24); overflow: hidden; position: relative; }
.it-stage > .mf-item { width: min(55%, 150px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.it-stage.glint > .mf-item { animation: it-glint 2.6s linear infinite; }
@keyframes it-glint { 0%, 100% { filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)) brightness(1); } 50% { filter: drop-shadow(0 0 14px #b07cff) brightness(1.25) saturate(1.3); } }
.it-3d, .it-3d .viewer { width: 100%; height: 100%; }
.it-tooltip { background: rgba(16, 0, 16, .94); border: 2px solid #2d0a63; outline: 2px solid #100010; border-radius: 4px; padding: 8px 10px;
  font-family: var(--font-display); font-size: calc(.72rem * var(--display-scale)); line-height: 1.55; color: #fff; }
.it-tt-name.ench { color: #55ffff; }
.it-tt-ench { color: #aaaaaa; }
.it-tt-lore { color: #aaaaaa; }
.it-tt-when { color: #aaaaaa; margin-top: 6px; }
.it-tt-stat { color: #5555ff; }
#ie-look, #ce-block { width: 100%; min-height: 44px; }
#ie-icon { width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem; }
#ie-icon img { width: 28px; height: 28px; object-fit: contain; }
.it-d textarea { width: 100%; resize: none; }

/* Chest editor: the container window like in the game */
.ch-a { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ch-gui { background: #c6c6c6; border: 3px solid #fff; border-right-color: #555; border-bottom-color: #555; border-radius: 4px; padding: 8px 10px 10px; box-shadow: 0 0 0 2px #000; }
.ch-gui-title { font-family: var(--font-display); font-size: calc(.8rem * var(--display-scale)); color: #404040; margin: 0 0 6px 2px; min-height: 1.2em; }
.ch-grid { display: grid; grid-template-columns: repeat(9, 48px); gap: 2px; }
.ch-slot { width: 48px; height: 48px; position: relative; }
.ch-slot .mf-item { width: 78%; height: 78%; }
.ch-slot.ch-off { background: repeating-linear-gradient(45deg, #7a7a7a 0 4px, #8b8b8b 4px 8px); opacity: .45; cursor: not-allowed; }
.ch-slot.over { outline: 3px solid var(--action); outline-offset: -3px; background: #c5f5c5; }
.ch-slot.full { cursor: grab; }
.ch-b { min-height: 0; display: flex; flex-direction: column; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); }
.ch-b-top { display: flex; align-items: center; gap: var(--space-4); }
.ch-b-top .mf-slot-title { margin: 0; flex: 1; }
.ch-b-top input { width: min(260px, 50%); }
.ch-b-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-top: var(--space-2); }
.ch-inv { grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); margin-bottom: var(--space-2); }
.ch-item { cursor: grab; }
.ch-item .mf-item { width: 75%; height: 75%; }
.ch-stage > .mf-item { width: min(60%, 170px); }
.ch-edit { display: flex; align-items: center; gap: var(--space-4); }
.ch-edit .ss-slot { width: 64px; height: 64px; }
.ch-edit .mf-item { width: 78%; }
.ch-ed [data-tip]:hover::after { right: auto; left: 50%; transform: translateX(-50%); }
.it-placed .mf-item { width: 22px; height: 22px; vertical-align: middle; }

@media (max-width: 900px) {
  .it-ed, .ch-ed { grid-template-columns: 1fr; height: auto; }
  .it-stat { grid-template-columns: 1fr; }
  .ch-grid { grid-template-columns: repeat(9, minmax(0, 1fr)); width: 100%; }
  .ch-slot { width: auto; aspect-ratio: 1; height: auto; }
  .ch-a, .ch-gui { width: 100%; }
}
.fh-shot-deploy { background: linear-gradient(#9fd3ff, #d6efff 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
.fh-shot-toolNew { background: linear-gradient(#ffcf5c, #fff3cf 70%, #7a7a7a 70%, #7a7a7a 76%, #4f4f4f 76%); }
.fh-shot-toolGallery, .fh-shot-chestGallery { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
.fh-shot-chestNew { background: linear-gradient(#ffd59e, #fff1dc 70%, #8b5a3c 70%, #8b5a3c 76%, #5c3a1e 76%); }
/* Chest editor right column: the picture and the description take the room (owner, 2026-10-02) */
.ch-ed .mf-side { justify-content: flex-start; }
.ch-ed .ch-c { flex: 3 1 0; min-height: 160px; display: flex; }
.ch-ed .ch-c .it-stage { flex: 1; }
.ch-ed .ch-stage > .mf-item { width: min(70%, 240px); }
.ch-ed .it-d { flex: 2 1 0; min-height: 120px; display: flex; flex-direction: column; }
.ch-ed .it-d textarea { flex: 1; min-height: 80px; }
/* the stack number, like in the game: bottom right, white with a dark shadow */
.ch-slot .mf-count { right: 3px; bottom: 1px; font-size: .95rem; text-shadow: 2px 2px 0 #3f3f3f; }

/* ================================================================ Redesign round 2 (owner, 2026-10-02 evening) */
/* Every gallery's top row: Back · (filters) · Import · ? */
.pf-gallery-top { display: flex; align-items: center; gap: var(--space-4); }
.gl-mid { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.gl-mid select, .gl-mid input { min-height: 44px; max-width: 280px; }
.pf-work .gl-import, :root:not([data-theme="gamey"]) .pf-work .btn.gl-import { background: var(--action); color: var(--action-text); border-color: transparent;
  font-family: var(--font-display); white-space: nowrap; cursor: pointer; display: inline-flex; align-items: center; }
.pf-work .gl-import:hover { background: var(--action-hover); }
.pf-gallery-top .pf-help { flex: none; }
.gl-import[data-tip] { position: relative; }
.gl-import[data-tip]:hover::after { content: attr(data-tip); position: absolute; right: 0; top: calc(100% + 8px); z-index: 30; width: max-content; max-width: 260px;
  padding: 6px 10px; border-radius: var(--radius-sm); background: #1d1d21; color: #fff; font-family: var(--font-body); font-size: .85rem; font-weight: 600;
  line-height: 1.3; white-space: normal; pointer-events: none; }

/* NPC Forge (owner sketch 00_npc_forge.png): steps · pane · 3D, what it wears, what it carries */
.np-ed .mf-side { justify-content: flex-start; }
.np-preview { position: relative; background: radial-gradient(circle at 50% 40%, #6aa9d8, #24486b); border: 2px solid var(--ff-frame); }
.np-preview canvas, .np-preview .viewer { width: 100%; height: 100%; display: block; }
.np-egg { height: 100%; display: grid; place-items: center; }
.np-egg .mf-item { width: min(45%, 140px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.np-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-bottom: var(--space-4); }
.np-kinds .it-kind { min-width: 0; }
.np-kinds .it-kind b { text-align: center; line-height: 1.2; }
.np-skins { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: var(--space-2); }
.np-skin { width: 86px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 4px; border: 2px solid var(--border-light); border-radius: var(--radius-md);
  background: linear-gradient(#7ec0ff, #d6efff); cursor: pointer; color: #2c2c2c; font: inherit; }
.np-skin img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-sm); }
.np-skin span { width: 100%; aspect-ratio: 1; display: grid; place-items: center; font-weight: 900; }
.np-skin b { font-size: .75rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-skin.on { border-color: var(--action); outline: 3px solid var(--action); }
.np-rows { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--space-2); }
.np-row { display: grid; grid-template-columns: 160px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.np-rel { grid-template-columns: 160px 140px 28px minmax(0, 1fr) auto; }
.np-sched { grid-template-columns: 64px auto 64px 140px minmax(0, 1fr) auto; }
.np-row .bad, .np-pane .bad, input.bad, textarea.bad { border-color: var(--accent-danger) !important; }
.np-x { width: 36px; min-width: 36px; padding: 0; }
.np-rules { display: flex; flex-direction: column; gap: 6px; margin: var(--space-4) 0; }
.np-rule { display: flex; justify-content: space-between; gap: 8px; align-items: center; padding: 8px 10px; border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.np-json textarea { width: 100%; font-family: ui-monospace, monospace; font-size: .85rem; }
.np-slot-off { background: repeating-linear-gradient(45deg, #7a7a7a 0 4px, #8b8b8b 4px 8px); opacity: .45; cursor: default; }
.np-next { font-weight: 900; color: #373737; font-size: 1.1rem; }
.np-next:disabled { opacity: .5; cursor: default; }
.np-lock { margin: 0; }
.mf-pic-npc { background: linear-gradient(#7ec0ff, #d6efff 72%, #5fa83a 72%); }
.mf-pic-npc canvas { height: 78%; image-rendering: pixelated; }
.mf-pic-npc .mf-item { width: 40%; height: auto; }
.fh-shot-npcNew { background: linear-gradient(#c7b5ff, #efe9ff 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
.fh-shot-npcGallery { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
.fh-shot-npcDeploy { background: linear-gradient(#9fd3ff, #d6efff 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
@media (max-width: 900px) { .np-row, .np-rel, .np-sched { grid-template-columns: 1fr; } }
/* gallery tiles: the picture fills the card's square, centred (items, chests, NPCs and the other forges) */
.mf-tile .pf-skin-pic > .mf-pic { position: absolute; inset: 0; display: grid; place-items: center; }
.mf-tile .mf-pic > .mf-item { width: 46%; height: auto; aspect-ratio: 1; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
.mf-tile .mf-pic > canvas { height: 74%; image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0,0,0,.35)); }
.mf-tile .mf-pic > img:not(.mf-item) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mf-pic-tool { background: radial-gradient(circle at 50% 45%, #3b4f6b, #141a24); }
.mf-pic-chest { background: linear-gradient(#ffe0b2, #fff6e8 72%, #8b5a3c 72%); }

/* Adventure Forge · Challenges (00_challenges.png): B the details, A the card (taller than wide), C the prizes */
.ch2-ed { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.ch2-ed .mf-ed-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.ch2-ed .mf-side { justify-content: flex-start; }
.ch2-a { flex: 1 1 auto; min-height: 0; display: flex; justify-content: center; align-items: stretch; overflow: hidden; }
.ch2-a .ch-card { width: min(100%, 300px); }
.ch2-prizes, .qe-prize-inv { grid-template-columns: repeat(5, 1fr); }
.ch2-xyz { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-bottom: var(--space-2); }
.ch2-xyz input { width: 110px; }
.ch2-b textarea, .qe-ed textarea { width: 100%; resize: vertical; }
.ch-card { display: flex; flex-direction: column; min-height: 0; background: var(--card-bg); color: var(--card-text); border-radius: var(--radius-lg); box-shadow: var(--card-float);
  overflow: hidden; border: 3px solid #b88a3b; }
:root[data-theme="gamey"] .ch-card { border-radius: 4px; border-color: #6cd56c; }
.ch-card-top { position: relative; flex: 0 0 auto; aspect-ratio: 16 / 10; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 40%, #ffe9a8, #e3a73a 70%, #a3641d); }
.ch-card-kill_mobs .ch-card-top { background: radial-gradient(circle at 50% 40%, #ffb3a8, #c4402f 70%, #6e1712); }
.ch-card-reach_place .ch-card-top { background: radial-gradient(circle at 50% 40%, #c8f0ff, #3f9bd8 70%, #1d4f80); }
.ch-card-survive .ch-card-top { background: radial-gradient(circle at 50% 40%, #d8ffc8, #4fa83a 70%, #24561b); }
.ch-card-most_damage .ch-card-top { background: radial-gradient(circle at 50% 40%, #e9d0ff, #8f4fc9 70%, #47206e); }
.ch-card-pic .mf-item { width: clamp(56px, 34%, 110px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 6px 8px rgba(0,0,0,.45)); }
.ch-live { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: var(--radius-full); background: #b3261e; color: #fff; font-family: var(--font-display);
  font-size: calc(.7rem * var(--display-scale)); animation: ff-pulse 2.4s ease-in-out infinite; }
@keyframes ff-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.ch-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: 10px 14px 12px; overflow: hidden; }
.ch-card-kicker { font-family: var(--font-display); font-size: calc(.68rem * var(--display-scale)); color: var(--card-accent); text-transform: uppercase; letter-spacing: .04em; }
.ch-card-title { margin: 0; font-size: calc(1.05rem * var(--display-scale)); line-height: 1.25; }
.ch-card-desc { margin: 0; font-size: .85rem; color: var(--card-sub); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.ch-card-facts { display: flex; flex-direction: column; gap: 4px; }
.ch-fact { display: flex; align-items: center; gap: 6px; font-size: .85rem; }
.ch-fact .mf-item { width: 22px; height: 22px; }
.ch-card-prizes { margin-top: auto; }
.ch-card-slots { display: flex; gap: 3px; padding: 3px; background: #c6c6c6; border: 2px solid #373737; border-right-color: #fff; border-bottom-color: #fff; width: max-content; }
.ch-card-slots .ss-slot { width: 34px; height: 34px; border-width: 2px; cursor: default; }
.ch-card-slots .mf-item { width: 75%; height: 75%; }
.ch-card-author { font-family: var(--font-display); font-size: calc(.68rem * var(--display-scale)); color: var(--card-sub); }
.ch-tile { display: flex; flex-direction: column; gap: 8px; min-height: 0; }
.ch-tile .ch-card { flex: 1 1 auto; }
.ch-tile-actions { display: flex; gap: 6px; align-items: center; }
.ch-tile-actions .pf-mini { flex: 1 1 0; }
.ch-tile-actions .pf-mini[data-edit] { flex: 0.8 1 0; }
.ch-tile-actions .pf-del { margin-left: 0; }
.ch-runs { display: flex; flex-direction: column; gap: var(--space-4); }
.ch-run { padding: var(--space-2) var(--space-4); border: 1px solid var(--border-light); border-radius: var(--radius-md); }
.fh-shot-chNew { background: linear-gradient(#ffcf5c, #fff3cf 70%, #b3261e 70%, #b3261e 76%, #6e1712 76%); }
.fh-shot-chGallery, .fh-shot-qGallery { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
.fh-shot-qNew { background: linear-gradient(#ffe0b2, #fff6e8 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }

/* Adventure Forge · Quests (00_quests.png): kinds of steps · A with Add and Clean · B the steps in order */
.qe-ed { grid-template-columns: 200px minmax(0, 1fr) minmax(300px, 380px); }
.qe-kinds { display: flex; flex-direction: column; gap: 6px; min-height: 0; overflow-y: auto; }
.qe-kind { flex: 1 1 0; max-height: 72px; min-height: 48px; display: flex; align-items: center; gap: 8px; padding: 4px 8px; text-align: left; cursor: pointer;
  font-family: var(--font-display); font-size: calc(.72rem * var(--display-scale)); color: var(--text-primary); background: var(--surface-secondary);
  border: 2px solid var(--border-strong); border-radius: var(--radius-md); }
:root:not([data-theme="gamey"]) .qe-kind:not(.on) { background: #fffdf8; border-color: #cdbfae; }
.qe-kind .ss-slot { flex: none; width: 40px; height: 40px; }
.qe-kind .mf-item { width: 75%; height: 75%; }
.qe-kind.on { background: var(--action); color: var(--action-text); border-color: transparent; }
.qe-prizes { margin-top: var(--space-2); border-style: dashed; }
.qe-a-actions { flex: none; display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2); padding: var(--space-2) var(--space-6) var(--space-4); border-top: 1px solid var(--border-light); }
.qe-a-actions[hidden] { display: none; }
.qe-preview { display: grid; place-items: center; height: 120px; margin-bottom: var(--space-4); border-radius: var(--radius-lg); background: radial-gradient(circle at 50% 45%, #3b4f6b, #141a24); }
.qe-preview .mf-item { width: 84px; height: 84px; }
.qe-inv { display: grid; grid-template-columns: repeat(9, 44px); gap: 2px; padding: 6px; background: #c6c6c6; border: 3px solid #373737; border-right-color: #fff; border-bottom-color: #fff;
  width: max-content; margin-bottom: var(--space-4); }
.qe-inv .ss-slot { width: 44px; height: 44px; cursor: default; position: relative; }
.qe-inv .mf-item { width: 78%; height: 78%; }
.qe-tower { display: flex; flex-direction: column-reverse; align-items: center; gap: 0; height: 150px; overflow: hidden; margin-bottom: var(--space-4);
  border-radius: var(--radius-lg); background: linear-gradient(#9fd3ff, #d6efff 80%, #5fa83a 80%); padding: 6px 0; }
.qe-tower span { line-height: 0; }
.qe-tower .mf-item { width: 22px; height: 22px; display: block; }
.qe-says { display: flex; align-items: center; gap: 10px; margin-top: var(--space-4); padding: 10px 12px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--action) 14%, transparent); }
.qe-says .mf-item { width: 32px; height: 32px; }
.qe-b { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); padding: var(--space-4); }
.qe-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.qe-step { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 4px; border-radius: var(--radius-md); border: 1px solid var(--border-light); }
.qe-step.on { border-color: var(--action); background: color-mix(in srgb, var(--action) 12%, transparent); }
.qe-n { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--card-accent); color: #fff; font-weight: 800; font-size: .8rem; }
.qe-step-open { display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.qe-step-open span { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
.qe-step-open .mf-item { flex: none; width: 26px; height: 26px; }
.qe-step-tools { display: flex; gap: 2px; }
.qe-step-tools .btn { min-width: 30px; width: 30px; min-height: 30px; padding: 0; }
.mf-pic-quest { background: linear-gradient(#ffe7b8, #f6d08a 60%, #c88a3a); }
.qe-tile .mf-pic > .mf-item { width: 34%; }
.qe-tile-facts { position: absolute; left: 10px; right: 10px; top: 46px; display: flex; justify-content: space-between; font-family: var(--font-display);
  font-size: calc(.7rem * var(--display-scale)); color: #3a2a10; }
.qe-tile-kinds { position: absolute; left: 8px; right: 8px; bottom: 56px; display: flex; flex-wrap: wrap; gap: 3px; justify-content: center; }
.qe-tile-kinds .ss-slot { width: 30px; height: 30px; border-width: 2px; cursor: default; }
.qe-tile-kinds .mf-item { width: 75%; height: 75%; }
.qe-live { top: 46px; right: auto; left: 50%; transform: translateX(-50%); }
.pf-mini-edit { height: 28px; min-height: 0; padding: 0 8px; font-family: var(--font-display); font-size: calc(.7rem * var(--display-scale)); border: 0; border-radius: var(--radius-sm); background: transparent; color: var(--card-sub); cursor: pointer; margin-left: auto; }
.pf-mini-edit:hover { background: var(--action); color: #fff; }
.pf-mini-edit + .pf-del { margin-left: 0; }
@media (max-width: 900px) { .ch2-ed, .qe-ed { grid-template-columns: 1fr; } .qe-kinds { flex-direction: row; flex-wrap: wrap; } .qe-kind { flex: 1 1 150px; } .qe-inv { grid-template-columns: repeat(9, minmax(0, 1fr)); width: 100%; } }
.ch-card-title { text-transform: none; font-family: var(--font-display); color: var(--card-text); letter-spacing: 0; }

/* World Forge · Seed Explorer (00_seed_explorer.png): A the map as big as fits · B structures · C colours */
.sd-ed { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); }
.sd-ed .mf-ed-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.sd-seed { flex: 1 1 auto; display: flex; min-width: 0; }
.sd-seed input { flex: 1 1 auto; min-width: 0; min-height: 44px; font-size: 1.05rem; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.sd-seed .btn { border-top-left-radius: 0; border-bottom-left-radius: 0; padding: 0 14px; font-family: var(--font-display); }
.sd-ed #sd-spawn { min-height: 44px; padding: 0 14px; white-space: nowrap; font-family: var(--font-display); }
.sd-a { position: relative; min-height: 0; border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); overflow: hidden; background: #101418; }
.sd-map { position: absolute; inset: 0; }
.sd-map .empty { margin: var(--space-6); }
.sm-canvas { display: block; cursor: grab; touch-action: none; }
.sm-canvas:active { cursor: grabbing; }
.sm-tip { position: absolute; z-index: 3; pointer-events: none; transform: translate(-50%, calc(-100% - 16px)); padding: 4px 10px; border: 1px solid #fff; border-radius: var(--radius-sm);
  background: rgba(0,0,0,.88); color: #fff; font-size: .85rem; white-space: nowrap; }
.sm-tip.below { transform: translate(-50%, 18px); }
.sd-zoom { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.sd-zoom .btn { width: 40px; min-width: 40px; min-height: 40px; padding: 0; font-size: 1.2rem; font-weight: 900; }
.sd-info { position: absolute; left: 10px; right: 64px; bottom: 10px; padding: 6px 10px; border-radius: var(--radius-sm); background: rgba(0,0,0,.66); color: #fff;
  font-size: .85rem; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sd-info code { color: #ffe14d; }
.sd-b { flex: 1.4 1 0; min-height: 0; display: flex; flex-direction: column; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); }
.sd-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.sd-row { display: flex; align-items: center; gap: 8px; padding: 4px; background: none; border: 0; border-radius: var(--radius-sm); color: inherit; font: inherit; text-align: left; cursor: pointer; }
.sd-row:hover { background: color-mix(in srgb, var(--action) 12%, transparent); }
.sd-row .ss-slot { position: relative; flex: none; width: 38px; height: 38px; border-width: 2px; }
.sd-row .mf-item { width: 72%; height: 72%; }
.sd-mark { position: absolute; right: -2px; bottom: -4px; min-width: 16px; padding: 0 2px; border-radius: 3px; background: #000; color: #fff; font-size: .65rem; text-align: center; }
.sd-row-text { display: flex; flex-direction: column; min-width: 0; }
.sd-row-text b { font-size: .88rem; }
.sd-c { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); }
.sd-legend { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; align-content: start; }
.sd-lg { display: flex; align-items: center; gap: 6px; padding: 3px 4px; background: none; border: 0; border-radius: var(--radius-sm); color: inherit; font: inherit; font-size: .8rem; text-align: left; cursor: pointer; min-width: 0; }
.sd-lg i { flex: none; width: 14px; height: 14px; border: 1px solid rgba(0,0,0,.4); border-radius: 2px; }
.sd-lg .facts { margin-left: auto; font-size: .72rem; }
.sd-lg.on { background: var(--action); color: var(--action-text); }
.sd-lg.on .facts { color: inherit; }
.mf-pic-seed { background: linear-gradient(#5fa83a, #2f5a2a); cursor: pointer; }
.sd-tile-sub { position: absolute; left: 0; right: 0; top: 40px; padding: 0 12px; color: #fff; font-size: .8rem; text-shadow: 0 1px 2px #000; }
.sd-one { grid-template-columns: 1fr; }

/* World Forge · Find a world (00_world_finder.png): A the wishes · B the worlds found · C Find! */
.wf-ed { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); }
.wf-ed .mf-ed-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.wf-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; margin-bottom: var(--space-4); }
.wf-feat { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; gap: 2px 10px; align-items: center; padding: 8px; border: 2px solid var(--border-light); border-radius: var(--radius-md); }
.wf-feat .ss-slot { grid-row: 1 / 3; width: 44px; height: 44px; }
.wf-feat .mf-item { width: 75%; height: 75%; }
.wf-feat.on { border-color: var(--action); background: color-mix(in srgb, var(--action) 10%, transparent); }
.wf-nice { grid-column: 1 / -1; display: flex; flex-direction: column; }
.wf-nice input { width: 100%; }
.wf-biomes { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: var(--space-4); }
.wf-biome { display: inline-flex; align-items: center; gap: 6px; padding: 4px 4px 4px 8px; border-radius: var(--radius-full); border: 1px solid var(--border-light); }
.wf-biome i { width: 14px; height: 14px; border-radius: 3px; background: var(--bc); border: 1px solid rgba(0,0,0,.35); }
.wf-biome .np-x { width: 28px; min-width: 28px; min-height: 28px; }
#wf-biome-add { max-width: 240px; }
.wf-b { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); }
.wf-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.wf-row { display: flex; align-items: center; gap: 8px; padding: 6px; border: 1px solid var(--border-light); border-radius: var(--radius-md); cursor: pointer; }
.wf-row.on { border-color: var(--action); background: color-mix(in srgb, var(--action) 12%, transparent); }
.wf-badge { flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--surface-tertiary); font-weight: 900; }
.wf-badge.ok { background: #ffd166; color: #3a2a10; }
.wf-row-text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.wf-row-text code { font-size: .85rem; overflow: hidden; text-overflow: ellipsis; }
.wf-row-text .facts { font-size: .75rem; }
.wf-open { flex: none; width: 40px; min-width: 40px; padding: 0; font-size: 1.1rem; }
.wf-warn { color: var(--bad-text, #b3261e); }
.wf-find { font-size: calc(1.1rem * var(--display-scale)); letter-spacing: .05em; }
.wf-tile-seed { position: absolute; left: 12px; right: 12px; bottom: 58px; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.55); color: #ffe14d; font-size: .75rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; }
.fh-shot-wfNew { background: linear-gradient(#7ec0ff, #d6efff 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
.fh-shot-wfGallery, .fh-shot-sdGallery { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
.fh-shot-sdNew { background: linear-gradient(#b8e994, #e8f8d8 70%, #6b8f3a 70%, #6b8f3a 76%, #5c3a1e 76%); }
@media (max-width: 900px) { .sd-ed, .wf-ed { grid-template-columns: 1fr; } .sd-a { height: 60vh; } .sd-b, .sd-c, .wf-b { max-height: 50vh; } }
.wf-open .mf-item { width: 26px; height: 26px; }

/* World Forge · Structures (00_structures.png): A builder · C blocks (tabs) · B 3D · Structure / Decoration */
.st-ed { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px); grid-template-rows: auto minmax(0, 1fr) minmax(170px, 34%); }
.st-ed .mf-ed-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.st-ed .mf-side { grid-column: 2; grid-row: 2 / 4; }
.st-a { grid-column: 1; grid-row: 2; min-height: 0; display: flex; flex-direction: column; gap: 6px; padding: var(--space-2); background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); }
.st-c { grid-column: 1; grid-row: 3; min-height: 0; display: flex; flex-direction: column; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); padding: 0 var(--space-2) var(--space-2); }
.st-toolbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.st-tools { grid-template-columns: repeat(6, 38px); gap: 2px; padding: 3px; }
.st-toolbar > .st-actions { grid-template-columns: repeat(7, 38px); flex: 0 0 auto; }
.st-tools .ss-slot { width: 38px; height: 38px; border-width: 2px; }
.st-tools .mf-item, .st-blocks .mf-item { width: 75%; height: 75%; }
.st-dir { width: 44px; min-width: 44px; padding: 0; font-size: 1.1rem; }
.st-floor { display: flex; align-items: center; gap: 6px; margin-left: auto; font-family: var(--font-display); font-size: calc(.75rem * var(--display-scale)); }
.st-floor .btn { width: 40px; min-width: 40px; padding: 0; }
#se-start { max-width: 190px; }
.st-layer-wrap { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; overflow: hidden; background: #1b1c1e; border-radius: var(--radius-md); }
.st-layer { image-rendering: pixelated; cursor: crosshair; }
.st-count { margin: 0; }
.st-tabs { display: flex; align-items: flex-end; gap: 2px; margin: 0 0 -2px 4px; }
.st-tab { width: 48px; height: 40px; display: grid; place-items: center; padding: 0; background: #8b8b8b; border: 2px solid #373737; border-bottom: 0; border-radius: 4px 4px 0 0; cursor: pointer; }
.st-tab .mf-item { width: 26px; height: 26px; }
.st-tab.on { background: #c6c6c6; height: 46px; position: relative; z-index: 1; }
.st-tabs input { margin-left: auto; min-height: 38px; max-width: 240px; margin-bottom: 4px; }
.st-blocks { flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); align-content: start; }
.st-blocks .ss-slot { min-height: 42px; }
.st-b { flex: 1 1 auto; min-height: 0; border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); overflow: hidden; background: linear-gradient(#9fd3ff, #d6efff); }
.st-b .s3d-canvas { width: 100%; height: 100%; display: block; }
.st-kind { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.st-kind .btn { display: flex; align-items: center; justify-content: center; gap: 6px; font-family: var(--font-display); }
.st-kind .btn .mf-item { width: 24px; height: 24px; }
.mf-work .st-kind .btn.on { background: var(--action); color: var(--action-text); border-color: transparent; }
.mf-pic-structure { background: linear-gradient(#9fd3ff, #d6efff 72%, #5fa83a 72%); }
.st-foot-row { display: flex; gap: var(--space-4); align-items: center; }
.st-foot-row > span:last-child { display: flex; flex-direction: column; }
.st-cube { flex: none; width: 64px; height: 64px; display: grid; place-items: center; position: relative; }
.st-cube::before { content: ""; width: calc(56px * min(1, var(--w) / max(var(--w), var(--l)))); height: calc(56px * min(1, var(--l) / max(var(--w), var(--l)))); min-width: 6px; min-height: 6px;
  border: 3px solid #ffd166; background: rgba(255,209,102,.2); border-radius: 2px; }
.st-foot { flex: none; padding: var(--space-2) var(--space-4); background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); }
.mf-deploy-ed .mf-ed-mid #sd2-turn { flex: 0 0 auto; max-width: 200px; }
.fh-shot-stNew { background: linear-gradient(#ffd59e, #fff1dc 70%, #7a7a7a 70%, #7a7a7a 76%, #4f4f4f 76%); }
.fh-shot-stGallery { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
.fh-shot-stDeploy { background: linear-gradient(#9fd3ff, #d6efff 70%, #5fa83a 70%, #5fa83a 76%, #8b5a3c 76%); }
@media (max-width: 900px) { .st-ed { grid-template-rows: none; } .st-ed .mf-side, .st-a, .st-c { grid-column: auto; grid-row: auto; } .st-a { height: 60vh; } .st-c { height: 40vh; } .st-b { min-height: 300px; } }
.st-layer-wrap { position: relative; }
.st-layer { position: absolute; max-width: calc(100% - 8px); max-height: calc(100% - 8px); }

/* World Forge · Texture packs (00_texture_pages.png): tools, colours, pictures, Paint this! · A paint · B preview · C changes */
.pk-ed { grid-template-columns: 290px minmax(0, 1fr) minmax(260px, 330px); }
.pk-left { min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.pk-tools { grid-template-columns: repeat(6, 1fr); gap: 2px; padding: 3px; }
.pk-tools .ss-slot .gi { width: 70%; height: 70%; }
.pk-colours { display: grid; grid-template-columns: repeat(8, 1fr); gap: 3px; }
.pk-colours .ss-colour { aspect-ratio: 1; height: auto; min-height: 0; border: 2px solid #373737; border-radius: 0; padding: 0; cursor: pointer; }
.pk-colours .ss-colour.on { outline: 3px solid var(--action); outline-offset: 0; border-color: #fff; }
#pe-colour { margin-left: auto; width: 44px; height: 26px; padding: 0; border: 0; background: none; }
.pk-pick-group { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.pk-kinds { display: flex; align-items: flex-end; gap: 2px; margin: 0 0 -2px 2px; }
.pk-kinds input { margin-left: auto; min-height: 36px; width: 120px; margin-bottom: 3px; }
.pk-picks { flex: 1 1 auto; min-height: 0; overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); align-content: start; }
.pk-picks .ss-slot { min-height: 40px; }
.pk-picks .mf-item { width: 75%; height: 75%; }
.pk-picks .pk-changed { background: #c5f5c5; }
.pk-paint-this { flex: none; font-size: calc(1rem * var(--display-scale)); }
.pk-a { min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.pk-canvas-wrap { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; border: 2px solid var(--ff-frame); border-radius: var(--radius-lg);
  background: repeating-conic-gradient(#d9d9d9 0 25%, #f4f4f4 0 50%) 0 0 / 24px 24px; }
:root[data-theme="gamey"] .pk-canvas-wrap { background: repeating-conic-gradient(#2a2a2e 0 25%, #36363b 0 50%) 0 0 / 24px 24px; }
#pe-canvas { image-rendering: pixelated; cursor: crosshair; box-shadow: 0 0 0 2px #000, 0 10px 24px rgba(0,0,0,.35); touch-action: none; }
.pk-empty { margin: var(--space-6); max-width: 420px; }
.pk-now { margin: 0; }
.pk-b { flex: 1 1 0; min-height: 160px; display: flex; }
.pk-b > * { flex: 1; }
.pk-cube { border-radius: var(--radius-lg); border: 2px solid var(--ff-frame); background: radial-gradient(circle at 50% 45%, #9fd3ff, #3d6f9e); overflow: hidden; }
.pk-cube canvas { width: 100%; height: 100%; display: block; }
.pk-item img { width: min(55%, 150px); image-rendering: pixelated; filter: drop-shadow(0 8px 10px rgba(0,0,0,.45)); }
.pk-c { flex: 1.2 1 0; min-height: 0; display: flex; flex-direction: column; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4); }
.pk-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 3px; }
.pk-row { display: flex; align-items: center; gap: 6px; border-radius: var(--radius-sm); }
.pk-row.on { background: color-mix(in srgb, var(--action) 16%, transparent); }
.pk-row-open { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 4px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.pk-row-open img { width: 32px; height: 32px; image-rendering: pixelated; border: 1px solid var(--border-light); background: repeating-conic-gradient(#ccc 0 25%, #fff 0 50%) 0 0 / 8px 8px; }
.pk-row-open span { display: flex; flex-direction: column; font-size: .85rem; }
.mf-pic-pack { background: linear-gradient(#f3c6ff, #ffe9f7); }
.mf-pic-pack.pk-tiled { background-size: 25% 25%; image-rendering: pixelated; background-repeat: repeat; }
.pk-on { top: 44px; right: auto; left: 10px; }
.fh-shot-pkNew { background: linear-gradient(#f3c6ff, #ffe9f7 70%, #4fb3c4 70%, #4fb3c4 76%, #2d6f7a 76%); }
.fh-shot-pkGallery { background: linear-gradient(#24326a, #0b1030 70%, #2f5a2a 70%, #2f5a2a 76%, #4a3020 76%); }
@media (max-width: 900px) { .pk-ed { grid-template-columns: 1fr; } .pk-canvas-wrap { height: 70vw; } .pk-picks { max-height: 40vh; } }

/* Forge Master (00_forge_master.png): A the chats · B the Forge Master's head · C the chat · D what you write */
.fm-ed { grid-template-columns: 280px minmax(0, 1fr); }
.fm-ed .mf-ed-top { grid-template-columns: 280px minmax(0, 1fr) auto; }
.fm-title { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; align-items: center; padding: 0 14px; border: 2px solid var(--ff-frame); border-radius: var(--radius-md);
  background: var(--ff-panel); font-family: var(--font-display); font-size: calc(.9rem * var(--display-scale)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fm-left { min-height: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.fm-status { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 9px 12px; background: var(--ff-panel); border: 2px solid var(--ff-frame); border-radius: var(--radius-md); }
.fm-status span { font-size: .86rem; }
.fm-status small { flex: 1 1 100%; color: var(--muted); }
.fm-status button { margin-left: auto; }
.fm-sessions { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); background: var(--ff-panel); border: 2px solid var(--ff-frame);
  border-radius: var(--radius-lg); padding: var(--space-2) var(--space-4) var(--space-4); }
.fm-sessions .mf-slot-title select { margin-left: auto; min-height: 32px; font-size: .8rem; text-transform: none; letter-spacing: 0; }
.fm-new { width: 100%; }
.fm-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.fm-session { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; background: none; border: 1px solid var(--border-light); border-radius: var(--radius-md);
  color: inherit; font: inherit; text-align: left; cursor: pointer; }
.fm-session b { font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; }
.fm-session .facts { font-size: .72rem; }
.fm-session:hover { background: color-mix(in srgb, var(--action) 10%, transparent); }
.fm-session.on { border-color: var(--action); background: color-mix(in srgb, var(--action) 16%, transparent); }
.fm-face { flex: 0 0 34%; min-height: 160px; border: 2px solid var(--ff-frame); border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(circle at 50% 30%, #ffe7b8, #c88a3a 70%, #6b4423); position: relative; }
.fm-face[data-pic] { background-position: center 54% !important; }
.pf-skin-pic::after { content: ""; display: none; position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 38px; height: 38px;
  background: url("/public/pictures/ai_watermark.png") center / contain no-repeat; pointer-events: none; }
.pf-skin[data-generator="forge_master"] .pf-skin-pic::after { display: block; }
.ch-card[data-generator="forge_master"] .ch-card-top { position: relative; }
.ch-card[data-generator="forge_master"] .ch-card-top::after { content: ""; position: absolute; right: 8px; bottom: 8px; z-index: 3; width: 38px; height: 38px;
  background: url("/public/pictures/ai_watermark.png") center / contain no-repeat; pointer-events: none; }
.fm-face canvas, .fm-face .viewer, .fm-skin-view { width: 100%; height: 100%; display: block; }
.fm-skin-view canvas { width: 100%; height: 100%; display: block; }
.fm-face.talking > .fm-skin-view { animation: fm-talk .5s ease-in-out infinite alternate; }
.fm-face-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fm-face-fx span { position: absolute; display: none; font-size: 1.35rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); animation: fm-float 2.2s ease-out infinite; }
.fm-face[data-state="thinking"] .fm-face-fx span:nth-child(1), .fm-face[data-state="thinking"] .fm-face-fx span:nth-child(4),
.fm-face[data-state="chatting"] .fm-face-fx span:nth-child(2), .fm-face[data-state="chatting"] .fm-face-fx span:nth-child(3) { display: block; }
.fm-face-fx span:nth-child(1) { left: 12%; bottom: 35%; } .fm-face-fx span:nth-child(2) { right: 12%; bottom: 42%; }
.fm-face-fx span:nth-child(3) { right: 20%; bottom: 20%; animation-delay: .7s; } .fm-face-fx span:nth-child(4) { left: 22%; bottom: 52%; animation-delay: 1s; }
@keyframes fm-talk { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes fm-float { from { opacity: 0; transform: translateY(8px) scale(.8); } 25% { opacity: 1; } to { opacity: 0; transform: translateY(-38px) scale(1.1); } }
.fm-chat { min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.fm-ai-disclosure { margin: 0; padding: var(--space-2) var(--space-3); border: 1px solid var(--ff-frame); border-radius: var(--radius); color: var(--text-secondary); font-size: .92rem; }
.fm-ed .fm-log { flex: 1 1 auto; min-height: 0; max-height: none; height: auto; overflow-y: auto; padding: var(--space-4); }
.fm-input { display: grid; grid-template-columns: minmax(0, 1fr) 160px; gap: var(--space-2); }
.fm-input input { min-height: 52px; font-size: 1.05rem; }
.fm-rules { max-width: 640px; }
.fm-rules-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); margin: 8px 0; }
.fm-rules ul { margin: 4px 0 0; padding-left: 18px; }
.fm-rules li { margin: 2px 0; font-size: .88rem; }
.fm-do { color: #2e7d32; } .fm-dont { color: #b3261e; }
:root[data-theme="gamey"] .fm-do { color: #6cd56c; } :root[data-theme="gamey"] .fm-dont { color: #ff7b72; }
@media (max-width: 900px) { .fm-ed, .fm-ed .mf-ed-top { grid-template-columns: 1fr; } .fm-rules-cols { grid-template-columns: 1fr; } .fm-face { display: none; } .fm-ed .fm-log { height: 60vh; } }
.fm-rules { white-space: normal; }

/* Play · Map (owner, round 2): one top row, buttons share the width, ? on the right; the map takes the rest */
.play-map { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); min-height: 420px; display: flex; flex-direction: column; gap: var(--space-2); }
.play-top { display: flex; gap: var(--space-2); align-items: center; }
.play-top > .btn:not(.pf-help) { flex: 1 1 0; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; justify-content: center; text-align: center; }
.play-top .pf-help { flex: none; }
.play-live { flex: none; }
.play-map > .facts { margin: 0; }
.play-map .map-wrap { flex: 1 1 auto; min-height: 0; }
.play-map .map-wrap iframe.map { width: 100%; height: 100%; border: 0; display: block; }

/* Play · Stats (owner, round 2): top row · eight podiums (4 × 2, ~75 %) · the table (~25 %, right-aligned) */
.play-stats { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); min-height: 520px; display: grid; grid-template-rows: auto 3fr 1fr; gap: var(--space-4); }
.play-top select { flex: 1 1 0; min-height: 44px; }
.play-since { flex: 1 1 0; margin: 0; }
.stats-podiums { min-height: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.stats-podiums > .empty { grid-column: 1 / -1; }
.podium { min-height: 0; display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; background: var(--card-bg); color: var(--card-text); border-radius: var(--radius-lg); box-shadow: var(--card-float); overflow: hidden; }
:root[data-theme="gamey"] .podium { border-radius: 4px; }
.podium-title { display: flex; align-items: center; gap: 6px; font-family: var(--font-display); font-size: calc(.72rem * var(--display-scale)); color: var(--card-accent); text-transform: uppercase; }
.podium-title .mf-item { width: 22px; height: 22px; }
.podium-first { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; }
.podium-first .player-face { width: clamp(34px, 5vh, 56px); height: clamp(34px, 5vh, 56px); border-radius: 6px; image-rendering: pixelated; }
.podium-first b { font-family: var(--font-display); font-size: calc(1rem * var(--display-scale)); }
.podium-first span { font-weight: 800; color: var(--card-accent); }
.podium-rest { margin: 0; padding: 0 0 0 18px; font-size: .8rem; }
.podium-rest li { display: flex; align-items: center; gap: 6px; }
.podium-rest .player-face { width: 18px; height: 18px; border-radius: 3px; }
.podium-rest span { margin-left: auto; font-weight: 700; }
.stats-table-box { min-height: 0; overflow: hidden; display: flex; }
.stats-table-box .stats-scroll { flex: 1; overflow: auto; }
.stats-table-box :is(th, td) { text-align: right; }
.stats-table-box .stats-sort { text-align: right; width: 100%; justify-content: flex-end; }
.stats-table-box td.stats-player-name { text-align: left; }
.stats-table-box th:first-child, .stats-table-box th:first-child .stats-sort { text-align: left; justify-content: flex-start; }
@media (max-width: 900px) { .play-stats { height: auto; grid-template-rows: none; } .stats-podiums { grid-template-columns: 1fr 1fr; grid-template-rows: none; } }

/* Play · Chat (owner, round 2): all the height; Live merged in: Go live · Screenshot · Live streams; red dot for who is live;
   watching someone: the video fills the chat, the chat floats at the bottom without bubbles, fading towards the middle */
.chat-shell2 { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); min-height: 460px; }
.chat-top .badge { flex: none; }
.chat-top select { flex: 1 1 0; min-height: 44px; }
.mf-work .chat-top #chat-golive.on, .play-work #chat-golive.on { background: #b3261e; color: #fff; border-color: transparent; }
.chat-stage { position: relative; min-width: 0; min-height: 0; display: flex; }
.chat-stage > .chat-history { flex: 1; }
.chat-live { display: none; }
.chat-stage.watching .chat-live, .chat-stage.streams .chat-live { display: block; position: absolute; inset: 0; border-radius: var(--radius-lg); overflow: hidden; background: #000; }
.chat-live .live-video, .chat-tile .live-video { width: 100%; height: 100%; object-fit: contain; display: block; }
.chat-stage.streams > .chat-history { visibility: hidden; }
.chat-stage.watching > .chat-history { position: absolute; left: 0; right: 0; bottom: 0; height: 50%; z-index: 2; background: transparent; border: 0; pointer-events: none;
  -webkit-mask-image: linear-gradient(to top, #000 55%, transparent); mask-image: linear-gradient(to top, #000 55%, transparent); }
.chat-stage.watching .chat-log { background: transparent; border: 0; display: flex; flex-direction: column; justify-content: flex-end; }
.chat-stage.watching .chat-line { max-width: 100%; margin: 2px 12px; }
.chat-stage.watching .chat-bubble { background: none !important; box-shadow: none; padding: 0; color: #fff; text-shadow: 0 1px 3px #000, 0 0 2px #000; }
.chat-stage.watching .chat-meta { color: #ddd; text-shadow: 0 1px 2px #000; margin: 0; display: inline; }
.chat-stage.watching .chat-line.chat-other { margin-left: 12px; }
.chat-stage.watching .chat-line.chat-other .chat-meta { text-align: left; }
.chat-live-name { position: absolute; top: 10px; left: 10px; z-index: 3; display: flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-full);
  background: rgba(0,0,0,.6); color: #fff; font-family: var(--font-display); font-size: calc(.75rem * var(--display-scale)); }
.chat-live-close { position: absolute; top: 10px; right: 10px; z-index: 3; }
.live-dot { display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: #e53935; vertical-align: middle;
  box-shadow: 0 0 0 0 rgba(229,57,53,.6); animation: live-pulse 2.2s ease-in-out infinite; }
@keyframes live-pulse { 0% { box-shadow: 0 0 0 0 rgba(229,57,53,.55); opacity: 1; } 70% { box-shadow: 0 0 0 7px rgba(229,57,53,0); opacity: .75; } 100% { box-shadow: 0 0 0 0 rgba(229,57,53,0); opacity: 1; } }
.chat-user.is-live { cursor: pointer; }
.chat-user.is-live:hover { background: color-mix(in srgb, #e53935 12%, transparent); }
.chat-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--n), minmax(0, 1fr)); grid-auto-rows: minmax(0, 1fr); gap: 4px; padding: 4px; }
.chat-tile { position: relative; background: #111; border-radius: var(--radius-md); overflow: hidden; }
.chat-live > .empty { margin: var(--space-6); color: #ddd; }

/* Gallery · Pictures and Places (owner, round 2): gallery cards, a viewer with previous / next */
.pf-work .gl-snap, :root:not([data-theme="gamey"]) .pf-work .btn.gl-snap { background: var(--action); color: var(--action-text); border-color: transparent; font-family: var(--font-display); white-space: nowrap; }
.gl-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.gl-tags span { padding: 1px 8px; border-radius: var(--radius-full); background: color-mix(in srgb, var(--action) 20%, transparent); font-size: .75rem; font-weight: 700; }
.gl-tile .gl-tags { position: absolute; left: 10px; right: 10px; top: 42px; }
.gl-tile .gl-tags span { background: rgba(0,0,0,.55); color: #fff; }
a.pf-mini { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; }
.mf-pic-place { background: linear-gradient(#ffe0b2, #fff6e8 72%, #5fa83a 72%); }
.gv-modal { width: min(1100px, 100%); }
.gv { display: grid; grid-template-columns: 52px minmax(0, 1fr) 52px; gap: 8px; align-items: center; }
.gv-arrow { height: 52px; min-width: 52px; padding: 0; font-size: 1.3rem; }
.gv-fig { margin: 0; display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.gv-fig img { width: 100%; max-height: 62vh; object-fit: contain; border-radius: var(--radius-md); background: #000; }
.gv-fig figcaption { display: flex; flex-direction: column; gap: 6px; }
.gv-pic { display: grid; place-items: center; height: 220px; border-radius: var(--radius-md); background: radial-gradient(circle at 50% 45%, #ffe0b2, #c88a3a); }
.gv-pic .mf-item { width: 120px; height: 120px; }
.gs-ways { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-2); }

/* ---------------------------------------------------------------- Wiki (owner, 2026-10-02): category cards, galleries, page modal */
.wk-home .fh-shot { background: radial-gradient(circle at 50% 45%, var(--card-bg), var(--ff-frame, #cdbfae)); }
.wk-home .fh-shot .mf-item { width: 96px; height: 96px; image-rendering: pixelated; }
#wiki-work .gl-mid { display: flex; gap: var(--space-2); flex: 1; min-width: 0; }
#wiki-work .gl-mid input[type="search"] { flex: 1; min-width: 0; }
#wiki-work .wk-cat { font-family: var(--font-display); color: var(--card-accent); text-transform: uppercase; margin: 0 0 var(--space-2); }
.mf-pic-wk { display: grid; place-items: center; cursor: pointer; background: radial-gradient(circle at 50% 45%, #5d6b55, #2c3328); }
.mf-pic-wk .wk-emoji { font-size: 3.4rem; }
@media (max-width: 900px) { .wk-home .pf-home { grid-template-columns: 1fr; } #wiki-work .gl-mid { flex-wrap: wrap; } }

/* Status (owner, 2026-10-02): the cards say at a glance if all is good (green) or not (red) again */
.work .status-card.ok, .work:not(.pf-work) .status-card.ok { border-color: var(--grass); border-left-width: 8px;
  background: color-mix(in srgb, var(--grass) 14%, var(--ff-panel, var(--panel-2))); }
.work .status-card.bad, .work:not(.pf-work) .status-card.bad { border-color: var(--red); border-left-width: 8px;
  background: color-mix(in srgb, var(--red) 14%, var(--ff-panel, var(--panel-2))); }
.status-card.ok > b::before { content: "● "; color: var(--grass); }
.status-card.bad > b::before { content: "● "; color: var(--red); }

/* Wiki, owner nitpicks 2026-10-02: small cards in two rows, centred pictures, the page in game-style boxes */
.wk-home .pf-home { grid-auto-flow: row; grid-auto-columns: auto; grid-template-columns: repeat(4, minmax(0, 220px)); gap: var(--space-6) var(--space-8); }
.wk-home .pf-home > .pf-card { min-height: 0; }
.wk-home .pf-shot { flex: none; height: 130px; }
.wk-home .fh-shot .mf-item { width: 72px; height: 72px; }
.wk-home .pf-card .pf-card-desc { min-height: 2.7em; }
.mf-pic-wk > .mf-pic { position: absolute; inset: 0 0 52px; display: grid; place-items: center; margin: 0; }
.mf-pic-wk > .mf-pic .mf-item { position: static; width: 42%; height: auto; max-height: 70%; object-fit: contain; image-rendering: pixelated; }
.wk-modal { max-height: 74vh; overflow-y: auto; padding-right: 6px; display: flex; flex-direction: column; gap: 4px; }
.wk-head { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: var(--space-4); align-items: stretch; }
.wk-stage { display: grid; place-items: center; min-height: 200px; border-radius: 6px; border: 2px solid var(--ff-frame, #555);
  background: radial-gradient(circle at 50% 45%, #5d6b55, #20261c); overflow: hidden; }
.wk-stage .mf-item { width: 60%; height: auto; image-rendering: pixelated; }
.wk-stage .wk-emoji { font-size: 4rem; }
/* the game's tooltip: near-black with a purple frame */
.wk-box { position: relative; background: rgba(16, 0, 16, .94); color: #fff; border: 3px solid #25015b; outline: 2px solid #100010;
  box-shadow: inset 0 0 0 2px #5000aa66; border-radius: 3px; padding: 12px 14px; line-height: 1.45; }
.wk-box p { margin: 0 0 8px; } .wk-box p:last-child { margin-bottom: 0; }
.wk-box h4 { color: #ffaa00 !important; margin: 10px 0 6px !important; }
.wk-box-title { font-family: var(--font-display); color: #55ffff; font-size: calc(.95rem * var(--display-scale)); margin-bottom: 2px; }
.wk-box-sub { color: #aaaaaa; font-size: .8rem; margin-bottom: 6px; display: flex; align-items: center; gap: 8px; }
.wk-note { margin-bottom: 6px; } .wk-note .pf-del { margin-left: auto; }
/* stats as inventory-style tiles */
.wk-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.wk-stat { display: flex; flex-direction: column; gap: 4px; padding: 8px 10px; background: #8b8b8b; color: #fff;
  border: 2px solid; border-color: #373737 #ffffff #ffffff #373737; border-radius: 2px; }
.wk-stat-k { font-family: var(--font-display); font-size: calc(.55rem * var(--display-scale)); color: #3f3f3f; text-transform: uppercase; }
.wk-stat-v { font-family: var(--font-display); font-size: calc(.85rem * var(--display-scale)); text-shadow: 2px 2px 0 #3f3f3f; }
.wk-craft { display: inline-block; padding: 10px; background: #c6c6c6; border: 3px solid; border-color: #fff #555 #555 #fff; border-radius: 3px; }
.wk-craft .wiki-cell { background: #8b8b8b; border: 2px solid; border-color: #373737 #fff #fff #373737; }
.wk-recipe-choice { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.wk-recipe-choice span { color: var(--card-accent); font-weight: 700; }
.wk-links { display: flex; flex-wrap: wrap; gap: 4px; }
.wk-link .mf-item { width: 80%; height: auto; } .wk-link .wk-emoji { font-size: 1.6rem; }
.wk-add { margin-top: 6px; } .wk-add input { flex: 1; }
@media (max-width: 900px) { .wk-head { grid-template-columns: 1fr; } }

/* Players (owner, 2026-10-02): the buttons of a player go on their own line under the player, never on top of each other */
.prow { grid-template-columns: minmax(180px, 1.4fr) 90px 70px 70px minmax(150px, 1fr) 150px; row-gap: 10px; }
.prow.phead > :last-child { display: none; }
.prow .pc-actions { grid-column: 1 / -1; flex-wrap: wrap; white-space: nowrap; padding-top: 8px; border-top: 1px dashed var(--ff-frame, var(--line)); }
.prow .pc-name { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; }
.prow .grp { flex-wrap: nowrap; }

/* Map (owner, 2026-10-02): the top buttons show their whole text; they wrap to a second line if they must */
.play-top { flex-wrap: wrap; gap: 6px; }
.play-top > .btn:not(.pf-help) { flex: 1 1 auto; min-width: max-content; overflow: visible; font-size: calc(.58rem * var(--display-scale)); padding-inline: 8px; }
.play-top > .facts { flex: none; font-size: .8rem; white-space: nowrap; }
.play-work:has(.map-mode-box) .play-map { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6) - 40px); }

/* Family and Administration (owner, 2026-10-02): theme buttons on the left, one theme at a time on the right */
.work.secd { display: grid; grid-template-columns: 240px minmax(0, 1fr); column-gap: var(--space-6); align-content: start; }
.work.secd > * { grid-column: 2; min-width: 0; }
.work.secd > .sec-nav { grid-column: 1; grid-row: 1 / span 60; align-self: start; position: sticky; top: var(--space-4);
  justify-content: flex-start; }
.sec-nav .mf-step { flex: none; min-height: 44px; max-height: none; padding-block: 4px; }
.sec-nav { gap: 6px; }
.sec-nav .mf-step.on { background: var(--action); color: #fff; border-color: var(--action); }
.sec-off { display: none !important; }
.work.secd .split, .work.secd .grid2.settings-grid { display: block; }

/* First-login child notice and its copy in kid Settings. */
.kid-notice-backdrop { position: fixed; z-index: 1000; inset: 0; display: grid; place-items: center; overflow: auto; padding: 1rem; background: rgb(0 0 0 / 68%); }
.kid-notice-dialog { width: min(44rem, 100%); max-height: min(92vh, 58rem); overflow: auto; border: 3px solid var(--accent); box-shadow: 0 1rem 4rem rgb(0 0 0 / 45%); }
.kid-notice-dialog h2, .kid-settings h2 { margin-top: 0; }
.kid-notice-list { display: grid; gap: .45rem; margin: 1rem 0; padding: 0; list-style: none; }
.kid-notice-line { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr); align-items: start; gap: .55rem; padding: .55rem .7rem; border-radius: .7rem; background: var(--panel-2, rgb(127 127 127 / 10%)); font-size: 1rem; line-height: 1.45; }
.kid-notice-icon { font-size: 1.25rem; text-align: center; }
.kid-notice-dialog .row { justify-content: flex-end; }
@media (max-width: 520px) {
  .kid-notice-backdrop { padding: .5rem; }
  .kid-notice-dialog { max-height: 96vh; }
  .kid-notice-line { font-size: .92rem; padding: .45rem .5rem; }
}
.work.secd.log-work { display: grid; height: auto; overflow: visible; }
@media (max-width: 900px) { .work.secd { grid-template-columns: 1fr; } .work.secd > .sec-nav { grid-row: auto; grid-column: 1; position: static; flex-direction: row; flex-wrap: wrap; } .work.secd > * { grid-column: 1; } }

/* Servers as a gallery: a picture on top (grass when it's on, bedrock when it's off), the name over it */
.server-cards { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 20px; }
.server-card { padding: 0; overflow: hidden; border: 0; border-radius: var(--radius-lg); background: var(--card-bg); color: var(--card-text); box-shadow: var(--card-float); }
.server-card > :not(.srv-pic) { margin-inline: 12px; }
.server-card footer { margin-bottom: 12px; }
.srv-pic { height: 120px; display: grid; place-items: center; background: linear-gradient(#7ec0ff, #d6efff 70%, #5fa83a 70%); }
.server-card.is-offline .srv-pic { background: linear-gradient(#4a4f58, #2b2f36); filter: saturate(.6); }
.srv-pic .mf-item { width: 64px; height: 64px; image-rendering: pixelated; }
.server-card header h4 { font-family: var(--font-display); text-transform: none; color: var(--card-text); }

.wk-modal > h4 { color: var(--card-accent); }
.bb-base { flex: 0 1 240px; min-width: 160px; height: 44px; }

/* Messages as a cork board (owner, 2026-10-02): pinned notes on top, the writing box in the bottom fifth */
.mb { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); display: flex; flex-direction: column; gap: var(--space-2); }
.mb-top { justify-content: space-between; }
.mb-cork { flex: 1 1 auto; min-height: 0; display: grid; gap: 22px 18px; padding: 26px 22px; border-radius: 6px; overflow: hidden;
  border: 10px solid #8a5a33; box-shadow: inset 0 0 18px rgba(0,0,0,.45), var(--card-float);
  background-color: #c49a6c;
  background-image: radial-gradient(rgba(90,55,25,.35) 1px, transparent 1.6px), radial-gradient(rgba(255,240,210,.25) 1px, transparent 1.6px);
  background-size: 9px 9px, 13px 13px; background-position: 0 0, 4px 6px; }
.mb-note { position: relative; display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: 22px 14px 10px; background: #fff8c6; color: #3a2e1a;
  transform: rotate(var(--tilt, 0deg)); box-shadow: 0 6px 12px -4px rgba(0,0,0,.45); border-radius: 2px; }
.mb-note.mb-help { background: #d9f2ff; } .mb-note.mb-rules { background: #ffd9d4; }
.mb-note.unread { outline: 3px solid #e2b33c; }
.mb-note:hover { transform: rotate(0deg) scale(1.02); z-index: 1; }
/* the classic red tack */
.mb-pin { position: absolute; top: -9px; left: 50%; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a80, #e53935 45%, #8e1b16); box-shadow: 2px 4px 4px rgba(0,0,0,.45); }
.mb-pin::after { content: ""; position: absolute; left: 9px; top: 18px; width: 3px; height: 7px; background: #7d7d7d; border-radius: 1px; }
.mb-head { display: flex; gap: 6px; align-items: baseline; font-family: var(--font-display); font-size: calc(.72rem * var(--display-scale)); }
.mb-to { font-family: inherit; opacity: .75; }
.mb-text { flex: 1 1 auto; min-height: 0; overflow: auto; font-size: .98rem; line-height: 1.35; white-space: pre-wrap; overflow-wrap: anywhere; }
.mb-foot { display: flex; align-items: center; gap: 6px; font-size: .75rem; color: #6b5a3a; flex-wrap: wrap; }
.mb-acts { margin-left: auto; display: flex; gap: 4px; align-items: center; }
.mb-acts .pf-mini { min-height: 28px; padding: 2px 8px; font-size: .62rem; }
.mb-acts .pf-del { color: #8e1b16; }
.mb-empty { grid-column: 1 / -1; grid-row: 1 / -1; display: grid; place-items: center; font-family: var(--font-display); color: #4a3218; }
.mb-pager { margin: 0; }
.mb-write { flex: 0 0 20%; min-height: 110px; display: grid; grid-template-columns: 220px minmax(0, 1fr) auto; gap: var(--space-3); align-items: stretch;
  padding: var(--space-3); border: 2px solid var(--ff-frame, var(--line)); border-radius: var(--radius-lg); background: var(--ff-panel, var(--panel)); }
.mb-write textarea { resize: none; height: 100%; min-height: 0; }
.mb-write .mb-to { margin: 0; align-self: start; }
.mb-send { align-self: end; min-width: 140px; }
@media (max-width: 900px) { .mb { height: auto; } .mb-cork { min-height: 420px; } .mb-write { grid-template-columns: 1fr; } }

/* The pixel font has no accented capitals (CONSTRAINTS §7): in Spanish, titles keep their own case */
:root[data-theme="gamey"]:lang(es) :is(.mf-slot-title, .work h3, .work h4, .modal h3, .modal h4, .pf-kicker, .wk-cat, .wk-stat-k) { text-transform: none; }

/* ---------------------------------------------------------------- Pictures (round 3): public/pictures/{cozy,gamey}/
   Swapping a PNG there changes the picture; see public/pictures/README.md. */
:root { --site-bg: url('/public/pictures/cozy/backgrounds/background_cozy.png');
  --login-bg: url('/public/pictures/cozy/backgrounds/login_cozy.png');
  --site-scrim: color-mix(in srgb, var(--surface-primary) 84%, transparent); }
:root[data-theme="gamey"] { --site-bg: url('/public/pictures/gamey/backgrounds/background_gamey.png');
  --login-bg: url('/public/pictures/gamey/backgrounds/login_gamey.png');
  --site-scrim: color-mix(in srgb, var(--surface-primary) 80%, transparent); }
body { background: linear-gradient(var(--site-scrim), var(--site-scrim)), var(--site-bg) center / cover no-repeat fixed; }
[data-pic] { background: var(--pic-cozy) center / cover no-repeat !important; }
:root[data-theme="gamey"] [data-pic] { background: var(--pic-gamey) center / cover no-repeat !important; }
.pf-shot[data-pic] > span { display: none; }

/* Login: the logo picture fills the page; the box sits under the word "Family", left, centred in height */
.portal { background: var(--login-bg) left center / cover no-repeat; display: flex; align-items: center;
  justify-content: flex-start; padding: 24px 24px 24px 11vw; }
.portal-box { width: min(520px, 38vw); min-width: 340px; margin-top: 12vh;
  background: color-mix(in srgb, var(--surface-secondary) 70%, transparent); backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); border-color: color-mix(in srgb, var(--border-light) 60%, transparent); }
.portal-top h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.portal-top .logo { display: none; }
.portal-top { justify-content: flex-end; }
@media (max-width: 900px) {
  .portal { padding: 30vh 16px 16px; align-items: flex-start; justify-content: center; background-position: 20% top; }
  .portal-box { width: 100%; min-width: 0; margin-top: 0; }
}

/* Play · Stats (owner, round 3): an adventurers' guild board of wanted posters */
.stats-podiums { padding: 18px; border-radius: var(--radius-lg); border: 6px solid #5c3a1e;
  background: repeating-linear-gradient(90deg, #7a4f2b 0 46px, #6b4424 46px 48px), #7a4f2b;
  box-shadow: inset 0 0 0 2px #3d2512, inset 0 6px 18px rgba(0, 0, 0, .45), var(--card-float); }
:root[data-theme="gamey"] .stats-podiums { border-radius: 4px; }
.podium.wanted { position: relative; overflow: visible; border-radius: 3px; padding: 14px 12px 10px;
  background: radial-gradient(circle at 30% 20%, #fbf0d4, #ead3a2 70%, #d9b97e); color: #3b2414;
  box-shadow: 2px 4px 0 rgba(0, 0, 0, .35); transform: rotate(-1.2deg); }
.podium.wanted:nth-child(even) { transform: rotate(1.1deg); }
.podium.wanted:nth-child(3n) { transform: rotate(-.4deg); }
.podium.wanted::before { content: ""; position: absolute; top: 5px; left: 50%; width: 10px; height: 10px; margin-left: -5px;
  border-radius: 50%; background: radial-gradient(circle at 35% 35%, #d8d8d8, #555); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
.wanted-head { text-align: center; font-family: var(--font-display); font-size: calc(1rem * var(--display-scale));
  letter-spacing: .12em; text-transform: uppercase; color: #7a1f12; border-bottom: 2px solid #7a4f2b; padding-bottom: 2px; }
.podium.wanted .podium-title { justify-content: center; color: #5c3a1e; }
.wanted-what { margin: 0; text-align: center; font-size: .75rem; font-style: italic; line-height: 1.2; color: #5c3a1e; }
.podium.wanted .podium-first .player-face { border: 3px solid #5c3a1e; }
.podium.wanted .wanted-reward { color: #7a1f12; font-family: var(--font-display); font-size: calc(.75rem * var(--display-scale)); }
.podium.wanted .podium-rest { color: #3b2414; }
.podium.wanted .facts { color: #5c3a1e; text-align: center; }
.stats-table-box { background: var(--card-bg); border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: var(--radius-lg); }

/* Families (owner, round 3, sketch 01_family): A people on the left, B-E panes stacked on the right, no page scroll */
.fam-screen { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); min-height: 520px; display: flex; flex-direction: column; gap: var(--space-3); }
.fam-screen > .title-row { margin: 0; }
.fam-grid { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(320px, 30%); gap: var(--space-4); }
.fam-a, .fam-pane { background: var(--card-bg); color: var(--card-text); border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: var(--radius-lg); padding: 12px 14px; min-height: 0; }
:root[data-theme="gamey"] :is(.fam-a, .fam-pane) { border-radius: 4px; }
.fam-a { display: flex; flex-direction: column; gap: 6px; }
.fam-a > .facts { margin: 0; }
.fam-scroll { flex: 1 1 auto; min-height: 0; overflow: auto; }
.fam-side { min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); overflow: auto; }
.fam-pane h3 { margin: 0 0 8px; }
.fam-pane form.row { display: flex; flex-wrap: wrap; gap: 6px; }
.fam-pane form.row > * { flex: 1 1 140px; min-width: 0; }
.fam-pane form.row > button { flex: 0 0 auto; }
.fam-pane .facts { font-size: .8rem; margin: 6px 0 0; }
.fam-b { flex: 1 1 auto; display: flex; flex-direction: column; }
.fam-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; overflow: auto; min-height: 0; }
.fam-item { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 6px 8px; border-radius: 6px; background: var(--surface-primary); }
.fam-item.off { opacity: .6; }
.fam-item .fam-name { flex: 1 1 100%; display: flex; justify-content: space-between; gap: 6px; }
.fam-item .check { font-size: .85rem; display: inline-flex; align-items: center; gap: 4px; }
.fam-item .pf-del { margin-left: auto; }
@media (max-width: 900px) { .fam-screen { height: auto; } .fam-grid { grid-template-columns: 1fr; } }
.fam-pane form.row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; }
.fam-pane form.row > * { min-width: 0; }
.fam-pane form.row > span > input { width: 100%; box-sizing: border-box; }
.fam-pane form.row > button { grid-column: 1 / -1; justify-self: end; }
.fam-c form.row { grid-template-columns: minmax(0, 1fr) auto; }
.fam-c form.row > button { grid-column: auto; }

/* Family and Administration → Users: role-separated account lists with expandable edit rows. */
.account-screen { display: flex; flex-direction: column; gap: var(--space-3); min-width: 0; }
.users-screen { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); min-height: 520px; }
.users-toolbar { gap: 8px; }
.users-view-switch { display: inline-flex; gap: 4px; padding: 3px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--surface-primary); }
.users-list-wrap { flex: 1 1 auto; min-height: 0; }
.users-list-wrap table { min-height: 0; }
.users-groups-list { flex: 1 1 auto; min-height: 0; overflow: auto; }
.users-groups-list .fam-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 290px), 1fr)); }
.account-top-row { align-items: center; flex-wrap: wrap; gap: var(--space-3); }
.account-top-row > div:first-child { min-width: min(100%, 280px); }
.account-top-row h2, .account-top-row p { margin-top: 0; margin-bottom: 4px; }
.account-top-row .row { flex-wrap: wrap; justify-content: flex-end; }
.account-list-wrap { width: 100%; overflow-x: auto; border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: var(--radius-lg); background: var(--card-bg); }
.account-list { width: 100%; min-width: 820px; margin: 0; }
.account-list td, .account-list th { vertical-align: middle; }
.account-edit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); gap: 14px; align-items: start; }
.account-edit-section { min-width: 0; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--card-bg); }
.account-edit-section > label { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.account-edit-section .facts { margin: 4px 0 8px; }
.account-delete-section { border-color: var(--danger, #a8442c); }
.account-delete-section .btn { margin-top: 4px; }
.account-edit-grid > label, .account-modal-body > label { min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.account-edit-grid .row, .account-modal .row { align-items: center; flex-wrap: wrap; }
.account-edit-grid .row > input { min-width: 0; flex: 1 1 120px; }
.account-player-list { display: grid; gap: 5px; }
.account-player-list .row { justify-content: space-between; }
.account-groups { min-width: 0; display: flex; flex-wrap: wrap; gap: 7px 14px; }
.account-groups legend { font-weight: 700; }
.account-groups .check { display: inline-flex; gap: 5px; align-items: center; }
.account-groups .facts { flex-basis: 100%; }
.person-edit > td { background: var(--surface-primary); }
.user-limit-setting { display: flex; align-items: end; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--card-bg); }
.user-limit-setting label { display: grid; gap: 4px; }
.user-limit-setting input { width: 8ch; }
.admin-groups { padding: 10px 12px; border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: var(--radius-lg); background: var(--card-bg); }
.admin-groups h3 { margin: 0 0 8px; }
.account-modal-bg { z-index: 1100; }
.account-modal { width: min(520px, calc(100vw - 28px)); max-height: min(88vh, 720px); overflow: auto; }
.account-modal > .row { justify-content: flex-start; gap: 10px; margin-top: 8px; }
.account-modal-body { display: grid; gap: 12px; margin: 12px 0 18px; }
.account-modal-body input, .account-modal-body select { width: 100%; box-sizing: border-box; }
.account-modal-body fieldset { min-width: 0; margin: 0; padding: 10px 12px; }
.account-modal-body .calendar-reminders { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
.account-modal-body .calendar-reminders legend { grid-column: 1 / -1; }
.account-modal-body .calendar-reminders .check, .account-modal-body .permission-option .check { display: flex; align-items: center; gap: 8px; }
.account-modal-body .calendar-reminders input[type="checkbox"], .account-modal-body .permission-option input[type="checkbox"] { width: auto; }
.account-modal-body .permission-option { padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.account-modal-body .permission-option p { margin: 6px 0 0; }
.account-modal-body .confirm-slider-label { display: grid; gap: 8px; }
.account-modal-body input[type="range"] { padding: 0; accent-color: var(--brand-primary); }
@media (max-width: 700px) {
  .account-top-row { align-items: stretch; }
  .account-top-row > .row { justify-content: flex-start; }
  .account-top-row > .row .btn { flex: 1 1 130px; }
  .account-list { min-width: 740px; }
  .account-edit-grid { grid-template-columns: minmax(0, 1fr); }
  .users-screen { height: auto; min-height: 0; }
  .account-modal-body .calendar-reminders { grid-template-columns: minmax(0, 1fr); }
  .user-limit-setting { align-items: center; }
  .user-limit-setting .facts { flex-basis: 100%; }
}

/* Players (owner, round 3, sketch 01_players): A players of every server with pages; B server picture and
   weather/time buttons; C saved places in pages. Diagnostics and controls determine the page height. */
.pl-screen { min-height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); display: flex; flex-direction: column; gap: var(--space-3); }
.pl-screen > .title-row { margin: 0; }
.pl-screen > .pl-pane { flex: 0 0 auto; }
.pl-grid { flex: 1 0 auto; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 26%); gap: var(--space-4); }
.pl-a, .pl-pane { background: var(--card-bg); color: var(--card-text); border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: var(--radius-lg); padding: 12px 14px; min-height: 0; }
:root[data-theme="gamey"] :is(.pl-a, .pl-pane) { border-radius: 4px; }
.pl-a { display: flex; flex-direction: column; gap: 8px; }
.pl-a .plist { flex: 1 1 auto; min-height: 0; overflow: auto; container-type: inline-size; }
/* Player rows must fit their pane, which is narrower than the browser beside the world controls. */
@container (max-width: 850px) {
  .plist .prow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .plist .prow.phead { display: none; }
  .plist .prow .pc-name { grid-column: 1 / -1; }
  .plist .prow > span { min-width: 0; overflow-wrap: anywhere; }
  .plist .prow select { max-width: 100%; }
  .plist .prow .grp { flex-wrap: wrap; max-width: 100%; }
  .plist .prow .pc-actions { white-space: normal; }
}
@container (max-width: 480px) {
  .plist .prow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pl-pager { margin-top: auto; display: flex; justify-content: space-between; align-items: center; }
.pl-side { min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); }
.pl-b { flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px; }
.pl-b select { min-height: 40px; }
.pl-pic { height: clamp(90px, 18vh, 170px); border-radius: 6px; background-color: var(--surface-tertiary); border: 2px solid var(--ff-frame, var(--border-strong)); }
.pl-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.pl-buttons .btn { width: 100%; }
.pl-buttons input { min-width: 0; }
.pl-c { flex: 1 0 auto; display: flex; flex-direction: column; }
.pl-c h3 { margin: 0 0 6px; }
.pl-c .places { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; flex: 1 1 auto; min-height: 0; overflow: auto; }
.pl-c .places li { display: flex; justify-content: space-between; align-items: center; gap: 6px; font-size: .85rem; }
.pl-place-pager { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.pl-server { margin-left: 4px; }
@media (max-width: 900px) { .pl-screen { height: auto; } .pl-grid { grid-template-columns: 1fr; } }
.pl-time { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; }
.pl-time .btn { width: auto; white-space: nowrap; }
.pl-pic[data-pic] { background-position: center 30% !important; }

/* Shared shape for the round-3 Administration screens: a title row, a big pane A on the left, panes on the right */
:is(.wl-screen, .wo-screen, .bk-screen, .lg-screen) { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); min-height: 520px; display: flex; flex-direction: column; gap: var(--space-3); }
:is(.wl-screen, .wo-screen, .bk-screen, .lg-screen) > .title-row { margin: 0; }
:is(.wl-grid, .wo-grid) { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 30%); gap: var(--space-4); }
:is(.wl-a, .wl-pane, .wo-a, .wo-pane, .bk-pane, .lg-pane) { background: var(--card-bg); color: var(--card-text); border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: var(--radius-lg); padding: 12px 14px; min-height: 0; }
:root[data-theme="gamey"] :is(.wl-a, .wl-pane, .wo-a, .wo-pane, .bk-pane, .lg-pane) { border-radius: 4px; }
:is(.wl-a, .wo-a) { display: flex; flex-direction: column; }
:is(.wl-a, .wo-a, .wl-pane, .wo-pane) h3 { margin: 0 0 8px; }
:is(.wl-scroll, .wo-scroll) { flex: 1 1 auto; min-height: 0; overflow: auto; }
:is(.wl-side, .wo-side) { min-height: 0; display: flex; flex-direction: column; gap: var(--space-3); overflow: auto; }
.wl-form { display: grid; gap: 8px; }
.wl-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wl-servers { position: relative; }
.wl-servers > summary { list-style: none; cursor: pointer; white-space: nowrap; }
.wl-servers > summary::-webkit-details-marker { display: none; }
.wl-pick > summary { width: 100%; box-sizing: border-box; text-align: left; }
.wl-menu { display: grid; gap: 4px; padding: 8px 10px; }
.wl-servers[open] > .wl-menu { position: absolute; z-index: 20; right: 0; min-width: 220px; background: var(--card-bg); border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: 6px; box-shadow: var(--shadow-lg); }
.wl-pick[open] > .wl-menu { left: 0; right: auto; }
.wl-confirm { margin: 0 0 12px; }
.wl-c { flex: 1 1 auto; }
.wl-switches { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.wl-switches li { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
@media (max-width: 900px) { :is(.wl-screen, .wo-screen, .bk-screen, .lg-screen) { height: auto; } :is(.wl-grid, .wo-grid) { grid-template-columns: 1fr; } }

/* Plugins and Settings (owner, round 3, sketches 01_plugins / 01_settings): the theme buttons share the whole
   height, each with a line of help under it; the chosen theme is one framed pane that scrolls inside */
.work.secd { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); min-height: 480px; grid-template-rows: minmax(0, 1fr); align-content: stretch; overflow: hidden; }
.work.secd > .sec-nav { grid-row: 1; position: static; align-self: stretch; height: 100%; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; }
.sec-nav .sec-item { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; justify-content: center; gap: 6px; }
.sec-nav .sec-item .mf-step { flex: 0 0 auto; width: 100%; }
.sec-help { margin: 0; font-size: .8rem; line-height: 1.3; color: var(--text-secondary, var(--card-sub)); padding: 0 6px; }
.work.secd > .sec-pane { grid-row: 1; min-height: 0; overflow: auto; background: var(--card-bg); color: var(--card-text); border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: var(--radius-lg); padding: 12px 16px; }
:root[data-theme="gamey"] .work.secd > .sec-pane { border-radius: 4px; }
@media (max-width: 900px) { .work.secd { height: auto; overflow: visible; } .work.secd > .sec-nav { height: auto; flex-direction: row; flex-wrap: wrap; } .sec-nav .sec-item { flex: 1 1 200px; } .sec-help { display: none; } }
.wo-form { display: grid; gap: 8px; }
.wo-form input[type="file"] { min-width: 0; max-width: 100%; }
.wo-form .btn { justify-self: end; }
.wo-pane .facts { font-size: .8rem; }
.wo-c { flex: 1 1 auto; }
.wo-c .wn-structs { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0; }
.wo-a #wl-restart:empty { display: none; }
.bk-top { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.bk-top .btn { min-height: 48px; }
.bk-pane { flex: 1 1 auto; overflow: auto; }
.bk-pane[hidden] { display: none; }
.bk-pane .bk-table thead th { position: sticky; top: -12px; background: var(--card-bg); z-index: 1; }
.storage-files { margin-top: 10px; }
.storage-files > summary { cursor: pointer; font-weight: 650; }
.storage-file-list { max-height: 280px; overflow: auto; margin: 8px 0; border: 1px solid var(--line); border-radius: 8px; }
.storage-file { display: grid; grid-template-columns: minmax(0, 1fr) minmax(120px, .35fr); gap: 12px; padding: 7px 10px; border-bottom: 1px solid var(--line); }
.storage-file:last-child { border-bottom: 0; }
.storage-file code { overflow-wrap: anywhere; }
@media (max-width: 600px) { .storage-file { grid-template-columns: 1fr; gap: 3px; } }
.sec-pane > .sec-title { font-size: calc(1rem * var(--display-scale)); margin: 4px 0 10px; }
.srv-pic { position: relative; }
.server-card.is-offline .srv-pic { filter: grayscale(.7) brightness(.7); }
.srv-pic-btn { cursor: pointer; }
/* Log (owner, round 3): one screen again, status cards on top and the log below in a frame */
#log-work { height: calc(100vh - var(--topbar-h) - 2 * var(--space-6)); }
#log-work .log-history { background: var(--card-bg); color: var(--card-text); border: 2px solid var(--ff-frame, var(--border-strong)); border-radius: var(--radius-lg); padding: 10px 14px; }
:root[data-theme="gamey"] #log-work .log-history { border-radius: 4px; }
#log-work .log-history thead th { position: sticky; top: 0; background: var(--card-bg); }

/* Stats posters (owner, round 3 nitpicks): straight, no tack, sepia like a coloured bounty poster; the title is the
   theme and the line saying what it measures sits above the winner */
.podium.wanted, .podium.wanted:nth-child(even), .podium.wanted:nth-child(3n) { transform: none; }
.podium.wanted::before { display: none; }
.podium.wanted { padding: 10px 12px; gap: 6px; border: 3px solid #8a6a3f;
  background: radial-gradient(ellipse at 50% 40%, #f1dfb6 0%, #e2c48e 60%, #c9a46a 100%); color: #4a3018;
  box-shadow: inset 0 0 22px rgba(110, 70, 25, .45), 2px 4px 0 rgba(0, 0, 0, .35); filter: sepia(.25); }
.wanted-head { display: flex; align-items: center; justify-content: center; gap: 6px; letter-spacing: .04em;
  font-size: calc(.78rem * var(--display-scale)); color: #6b2a12; border-bottom: 3px double #8a6a3f; padding-bottom: 4px; }
.wanted-head .mf-item { width: 22px; height: 22px; }
.podium.wanted .wanted-what { flex: 0 0 auto; }
.podium.wanted .podium-first { flex: 1 1 auto; justify-content: center; }
.podium.wanted .podium-first .player-face { border-color: #6b4a22; filter: sepia(.35); }

/* The brand is a picture (public/pictures/<theme>/brand/logo_text_<theme>.png) */
.brand-pic { width: clamp(120px, 14vw, 190px); height: calc(var(--topbar-h) - 16px); background: url('/public/pictures/cozy/brand/logo_text_cozy.png') left center / contain no-repeat; }
:root[data-theme="gamey"] .brand-pic { background-image: url('/public/pictures/gamey/brand/logo_text_gamey.png'); }

/* Bars test (owner): html[data-bars] = "glass" (translucent), "bumpy" (raised like buttons), "glass bumpy" */
:root { --bar-glass: color-mix(in srgb, var(--surface-secondary) 78%, transparent); }
:root[data-bars~="glass"] .top { background: var(--bar-glass); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
:root[data-bars~="glass"] .side-menu { background: var(--bar-glass); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
:root[data-bars~="bumpy"] .top { box-shadow: inset 0 2px 0 rgba(255, 255, 255, .18), inset 0 -4px 0 rgba(0, 0, 0, .35), 0 4px 0 rgba(0, 0, 0, .3); }
:root[data-bars~="bumpy"] .side-menu { border-radius: 8px; box-shadow: inset 3px 3px 0 rgba(255, 255, 255, .15), inset -4px -4px 0 rgba(0, 0, 0, .35), 4px 4px 0 rgba(0, 0, 0, .3); }
:root[data-bars~="bumpy"] .side-menu button { box-shadow: inset 2px 2px 0 rgba(255, 255, 255, .12), inset -2px -2px 0 rgba(0, 0, 0, .3); border-radius: 4px; margin-block: 2px; }
/* posters: nothing overlaps when the font is wider (cozy) */
.podium.wanted .wanted-what { font-size: .72rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.podium.wanted .podium-first { min-height: 0; overflow: hidden; gap: 0; }
.podium.wanted .podium-first .player-face { width: clamp(26px, 4vh, 44px); height: clamp(26px, 4vh, 44px); }
.podium.wanted .podium-first b { font-size: calc(.85rem * var(--display-scale)); line-height: 1.2; }
.podium.wanted .podium-rest { flex: 0 0 auto; }
/* Stats: the server chooser takes half of the Check again button's room */
.play-top .stats-servers { flex: 1 1 0; }
.play-top .stats-servers > summary { width: 100%; box-sizing: border-box; min-height: 44px; display: flex; align-items: center; justify-content: center; }

/* Groups (owner 2026-10-03): the admin's group picker per person in the Families list */
.group-pick { position: relative; }
.group-pick > summary { cursor: pointer; list-style: none; white-space: nowrap; }
.group-pick > summary::-webkit-details-marker { display: none; }
.group-pick-list { position: absolute; z-index: 20; display: grid; gap: 4px; min-width: 170px; padding: 8px 10px;
  background: var(--panel, #222); border: 2px solid var(--line, #444); box-shadow: 0 6px 18px rgba(0,0,0,.35); }
#group-picker-wrap select { max-width: 160px; }
.fam-side > .fam-pane { flex-shrink: 0; }  /* the side column scrolls instead of squeezing its panes */
.fam-g form.row { grid-template-columns: minmax(0, 1fr) auto; }
.fam-g form.row > button { grid-column: auto; }
.fam-g .fam-item { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fam-g .fam-item .fam-name { flex: 1 1 auto; }
.fam-g .group-rename { flex: 1 1 120px; min-width: 0; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
@media (max-width: 600px) { #group-picker-wrap select { max-width: 92px; } }  /* phones: keep the top bar on one line */

/* Colour scheme (owner 2026-10-03): the admin picks it in Settings → Look; app.js puts the chosen colours on <html>.
   Buttons, back buttons and subtitles take their colour only from these tokens, so one setting changes them all. */
html:root, html:root[data-theme] {
  --ff-btn: #8e4fc2; --ff-btn-hover: #a066d6; --ff-btn-text: #ffffff;
  --ff-back: #f2b318; --ff-back-hover: #ffc847; --ff-back-text: #2a1b00;
  --ff-sub: #6cd56c;
  --action: var(--ff-btn); --action-hover: var(--ff-btn-hover); --action-text: var(--ff-btn-text);
  --card-btn: var(--ff-btn); --card-btn-hover: var(--ff-btn-hover); --card-accent: var(--ff-sub);
}
html:root:not([data-theme="gamey"]) { --ff-sub-shown: color-mix(in srgb, var(--ff-sub) 70%, #000); --card-accent: var(--ff-sub-shown); }
.btn.primary, .pf-go, .pinpad button.ok, .pf-help, .mf-act { background: var(--ff-btn) !important; color: var(--ff-btn-text) !important; }
.btn.primary:hover:not(:disabled), .pf-go:hover, .pf-help:hover:not(:disabled), .mf-act:hover:not(:disabled) { background: var(--ff-btn-hover) !important; }
.pf-back, .pf-work .pf-back, .mf-work .pf-back { background: var(--ff-back) !important; color: var(--ff-back-text) !important; }
.pf-back:hover:not(:disabled) { background: var(--ff-back-hover) !important; }
:root[data-theme="gamey"] .btn:hover { box-shadow: inset 0 -4px 0 rgba(0,0,0,.28), inset 0 2px 0 rgba(255,255,255,.12), 0 0 12px color-mix(in srgb, var(--ff-btn) 45%, transparent); }
.pf-kicker, .mf-slot-title, .sec-pane h3, .sec-title { color: var(--card-accent); }
.colours-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; margin: 8px 0; }
.colours-row label { display: grid; gap: 6px; }
.colours-row input[type=color] { width: 100%; height: 40px; padding: 2px; border: 2px solid var(--ff-frame); background: transparent; cursor: pointer; }
.colours-presets { display: flex; flex-wrap: wrap; gap: 8px; }
.colours-presets .btn { display: inline-flex; align-items: center; gap: 6px; }
.colours-swatch { display: inline-flex; }
.colours-swatch i { width: 12px; height: 12px; display: inline-block; border: 1px solid #0006; }
.sec-nav .sec-nav-extra { margin-top: auto; display: grid; gap: 6px; padding-top: var(--space-3); }
.sec-nav .sec-nav-extra .btn { width: 100%; }
.sec-nav .sec-nav-extra .facts { font-size: .78rem; margin: 0; }
/* Forge Master (owner 2026-10-03): the chats chooser goes under its subtitle, full width, instead of beside it */
.fm-sessions .mf-slot-title { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.fm-sessions .mf-slot-title select { margin-left: 0; width: 100%; }
/* The background stays the same size on every screen (owner 2026-10-03): a screen that scrolls used to add a
   scrollbar, which narrowed the window and rescaled the cover image. */
html { scrollbar-gutter: auto; }
/* Card pictures (owner 2026-10-03): an item picture sits in the middle of its card. `.pf-skin-pic img` (a skin's
   full-card picture) made every item picture absolute too, which pinned it to the top-left corner. */
.mf-tile .pf-skin-pic .mf-pic > .mf-item, .pf-skin-pic .mf-item { position: static; inset: auto; object-fit: cover; }
/* Animated items (compass, clock...) are a strip of frames: show the first one, square. */
.mf-item { aspect-ratio: 1; object-fit: cover; object-position: top; }
.fam-pane .acc-field { display: grid; gap: 4px; font-size: .8rem; color: var(--text-secondary); min-width: 0; }
.fam-pane .acc-field > :is(input, select) { width: 100%; box-sizing: border-box; }
.fam-pane #acc-secret-slot { display: contents; }
/* Servers (owner 2026-10-03): bigger cards with a taller picture, using the room the screen had left empty */
.registry-only .server-cards { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.registry-only .srv-pic { height: clamp(180px, 30vh, 300px); overflow: hidden; }
.registry-only .srv-pic .mf-item { width: 112px; height: 112px; }
.registry-only #server-registry { min-height: calc(100vh - var(--topbar-h, 64px) - 220px); }
/* Wiki page (owner 2026-10-03): the 3D render gets a wider column so the model has room and its buttons read */
.wk-head { grid-template-columns: minmax(280px, 38%) minmax(0, 1fr); }
.wk-stage .wiki-vanilla { min-width: 0; width: 100%; align-self: stretch; display: flex; flex-direction: column; }
.wk-stage .wiki-vanilla .row { flex-wrap: wrap; gap: 6px; padding: 6px; }
.wk-stage .wiki-vanilla .btn { white-space: normal; text-align: center; }
/* Wiki home (owner 2026-10-03): bigger cards, and the picture sits fully inside its sky */
.wk-home .pf-home { grid-template-columns: repeat(var(--wk-cols, 4), minmax(0, 270px)); }
/* the pictures are square: a near-square sky, aimed at the top where the object is, so nothing is cut */
.wk-home .pf-shot { height: auto; aspect-ratio: 5 / 4; }
.wk-home .pf-shot[data-pic] { background-position: center 22% !important; }
.wk-home .fh-shot { display: grid; place-items: center; padding-bottom: 46px; }
.wk-home .fh-shot .mf-item { width: 84px; height: 84px; }
/* Blockbench top bar (owner 2026-10-03): Back · title · base model · Save · ? all on one row */
.bb-bar { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
/* Structure builder (owner 2026-10-03): the floor is drawn at its own size so every block is a square
   (an older rule stretched the canvas to the full width, turning squares into rectangles) */
.st-layer-wrap .st-layer { width: auto; height: auto; max-width: calc(100% - 8px); max-height: calc(100% - 8px); aspect-ratio: auto; }
/* Card thumbnails of models and mobs (owner 2026-10-03) */
.mf-thumb-slot { display: grid; place-items: center; width: 100%; height: 100%; }
.mf-thumb-slot .mf-item { width: 46%; height: auto; }
.mf-tile .pf-skin-pic .mf-pic img.mf-thumb { position: static; inset: auto; width: 82%; height: 82%; object-fit: contain; filter: drop-shadow(0 8px 10px rgba(0,0,0,.4)); }
/* Gallery cards (owner 2026-10-03): their buttons wrap onto a second line instead of being cut to "Desca…" */
.ch-tile-actions { flex-wrap: wrap; }
.ch-tile-actions .pf-mini { flex: 1 1 auto; min-width: max-content; }
.pf-skin-actions .pf-mini { letter-spacing: 0; padding-inline: 4px; }
.fam-g .btn.small { font-family: var(--font-body, inherit); font-size: .78rem; min-height: 30px; padding: 0 10px; }
/* Phones (owner 2026-10-03): an editor's top row wraps instead of piling Back on top of the History menu */
@media (max-width: 900px) {
  .mf-ed-top, .mf-model-ed .mf-ed-top, .mf-deploy-ed .mf-ed-top, .it-ed .mf-ed-top, .ch-ed .mf-ed-top, .ch2-ed .mf-ed-top,
  .sd-ed .mf-ed-top, .wf-ed .mf-ed-top, .st-ed .mf-ed-top, .fm-ed .mf-ed-top { display: flex; flex-wrap: wrap; align-items: center; }
  .mf-ed-top > * { min-width: 0; }
  .mf-ed-top > .pf-back { flex: 0 1 auto; }
  .mf-ed-top > :is(select, .mf-ed-right, .pf-help) { flex: 0 0 auto; margin-left: auto; }
  .mf-ed-top > :is(input, .mf-ed-name, .fm-title) { order: 5; flex: 1 1 100%; }
}
/* Players (owner 2026-10-04): the server's picture is square and whole; the world buttons are small and compact */
.pl-pic { flex: 0 0 auto; height: auto; aspect-ratio: 1 / 1; width: 100%; }
.pl-pic[data-pic] { background-position: center !important; background-size: cover !important; }
.pl-buttons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.pl-buttons .btn { min-height: 30px; padding: 2px 4px; font-family: var(--font-body, inherit); font-size: .74rem; font-weight: 700; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pl-time input { min-height: 30px; }
/* Backups and Worlds (owner 2026-10-04): smaller buttons so each row keeps its shape */
:is(#tab-backups, #tab-worlds) .btn { min-height: 32px; padding: 2px 10px; font-size: calc(.72rem * var(--display-scale, 1)); white-space: nowrap; }
:is(#tab-backups, #tab-worlds) td input { max-width: 150px; min-height: 32px; }
/* Structure builder, big 3D (owner 2026-10-04): the 3D view in the big pane, the floor plan in the side column */
.st-ed .st-a > .st-b { flex: 1 1 auto; min-height: 0; }
.st-ed .mf-side > .st-layer-wrap { flex: 1 1 auto; min-height: 180px; }
.st-swap.on { background: var(--ff-btn); color: var(--ff-btn-text); }
.st-b canvas { cursor: crosshair; }
/* Big 3D layout (owner 2026-10-04): 3D on the whole left, blocks in the right column, Structure/Decoration in the toolbar */
.st-ed.st-big3d .st-a { grid-row: 2 / 4; }
.st-ed.st-big3d .mf-side > .st-c { grid-column: auto; grid-row: auto; flex: 1 1 auto; min-height: 0; }
.st-ed.st-big3d .st-tabs input { max-width: 120px; }
.st-toolbar .st-kind { display: flex; gap: 4px; grid-template-columns: none; }
.st-toolbar .st-kind .btn { min-height: 38px; padding: 0 8px; font-size: calc(.7rem * var(--display-scale, 1)); }
.st-ed.st-big3d .st-floor { display: none; }  /* floors are for the plan view; in 3D you build on any face */

/* Power (owner 2026-10-04): little pixel badges from pictures/<theme>/power/<band>.png */
.pw { display: flex; flex-direction: column; gap: 12px; height: calc(100vh - var(--topbar-h) - 48px); min-height: 360px; }
.pw-list { flex: 1; min-height: 0; overflow-y: auto; padding-right: 4px; }
.pw-on { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; margin-left: 6px; font-size: .85em; }
.pw-why .chip.on { background: rgba(92,196,92,.25); }
.pw .btn.on { outline: 2px solid currentColor; }
.pw-badge { display: inline-block; width: 20px; height: 20px; vertical-align: middle; image-rendering: pixelated; }
.pw-badge.big { width: 40px; height: 40px; flex: none; }
.pw-badge[data-pic] { background-size: contain !important; }
.pw-legend { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.pw-list { display: flex; flex-direction: column; gap: 6px; }
.pw-row { flex: none; display: flex; gap: 12px; align-items: center; padding: 8px 12px; border-radius: 10px; background: var(--panel, rgba(0,0,0,.04)); border-left: 5px solid #ccc; }
.pw-gentle { border-left-color: #5cc45c; } .pw-normal { border-left-color: #e8cf3a; } .pw-tough { border-left-color: #f08a2c; }
.pw-boss { border-left-color: #d8402f; } .pw-dragon { border-left-color: #9b4fd6; } .pw-broken { border-left-color: #2b2b2e; }
.pw-why { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.pw-why .chip { font-size: .8em; padding: 1px 8px; border-radius: 999px; background: rgba(0,0,0,.08); }
.pw-table { border-collapse: collapse; margin: 8px 0; }
.pw-table th, .pw-table td { padding: 4px 6px; text-align: left; font-weight: normal; white-space: nowrap; }
.pw-table input { width: 80px; }
@media (max-width: 700px) { .pw-levels { overflow-x: auto; } }

/* Music Forge: Family Forge's compact tracker, with its own colours in both themes. */
.mu-ed { --p8-bg: var(--trk-bg, #1f2a26); --p8-bg2: var(--trk-head, #141c19); --p8-ink: var(--trk-text, #e9f2e4); --p8-dim: #7d8a84;
  --p8-red: var(--trk-cursor, #8e4fc2); --p8-blue: #7ec8e3; --p8-green: #6cd56c; --p8-yellow: var(--trk-accent, #f2b318); --p8-orange: #ff9f43; --p8-pink: #e7a0d6;
  display: grid; grid-template-columns: minmax(0, 1fr) 300px; grid-template-rows: auto minmax(0, 1fr); gap: var(--space-4);
  height: calc(100vh - var(--topbar-h) - 48px); min-height: 560px; outline: none; }
.mu-top { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.mu-name { flex: 1 1 180px; min-width: 120px; font-size: 1.05rem; }
.mu-play, .mu-stop { min-width: 44px; font-size: 1.1rem; }
.mu-play { color: var(--p8-green); } .mu-stop { color: var(--p8-red); }
.mu-tempo { display: inline-flex; align-items: center; gap: 4px; }
.mu-tempo input { width: 80px; }
.mu-history { max-width: 190px; }
.mu-left { display: grid; grid-template-rows: minmax(0, 1fr) auto auto; gap: var(--space-2); min-height: 0; }
.mu-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2); min-height: 0; }
.mu-card { background: var(--p8-bg); color: var(--p8-ink); border-radius: var(--radius-md); display: flex; flex-direction: column; min-height: 0;
  font-family: "Courier New", ui-monospace, monospace; border: 2px solid transparent; }
.mu-card.focus { border-color: var(--p8-yellow); }
.mu-card header { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; background: var(--p8-bg2);
  border-radius: var(--radius-md) var(--radius-md) 0 0; color: var(--p8-pink); font-size: .85rem; }
.mu-card header select { font-size: .8rem; padding: 0 4px; min-height: 0; }
.mu-scroll { overflow-y: auto; flex: 1; min-height: 0; container-type: size; scroll-snap-type: y mandatory; }
.mu-cell:nth-child(16n+1) { scroll-snap-align: start; }
.mu-card, .mu-slot, .mu-wave, .mu-mode .btn, .mu-c-head, .mu-cards header { font-family: "Press Start 2P", "Courier New", monospace; }
.mu-e-right { margin-left: auto; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; justify-content: flex-end; }
.mu-mode { display: flex; gap: 4px; } .mu-mode .btn { font-size: .62rem; } .mu-mode .btn.on { background: var(--p8-red); color: var(--p8-ink); border-color: var(--p8-yellow); }
.mu-samp-tile.empty { opacity: .55; }
.mu-black small { color: #ccc; }
.mu-cell { display: grid; grid-template-columns: 2.4em minmax(4.6em, 2fr) repeat(3, minmax(1.4em, 1fr)); align-items: center; gap: 4px; padding: 0 8px; cursor: pointer;
  height: calc(100cqh / 16); font-size: clamp(.5rem, min(3.2cqh, 2.6cqw), .85rem); white-space: nowrap; }
.mu-cell.beat .mu-i { color: var(--p8-orange); }
.mu-cell .mu-i { color: var(--p8-dim); }
.mu-cell .mu-c0 { color: var(--p8-ink); } .mu-cell .mu-c1 { color: var(--p8-pink); } .mu-cell .mu-c2 { color: var(--p8-blue); } .mu-cell .mu-c3 { color: var(--p8-green); }
.mu-cell.cur { background: rgba(255, 241, 232, .12); }
.mu-cell.cur .on { background: var(--p8-red); color: var(--p8-ink); border-radius: 2px; }
.mu-cell.now { background: rgba(0, 228, 54, .25); }
.mu-row-e { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; }
.mu-row-e > *, .mu-e-right > * { flex-shrink: 0; }
.mu-row-e .mu-e-right { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.mu-drums { display: flex; height: 100%; gap: 6px; }
.mu-drums button { flex: 1; min-width: 0; }
.mu-waves { display: flex; gap: 4px; flex-wrap: wrap; }
.mu-wave { width: 66px; height: 44px; border-radius: var(--radius-sm); border: 2px solid var(--line); background: var(--p8-bg); color: var(--p8-ink);
  display: grid; place-items: center; line-height: 1.2; cursor: pointer; font-family: "Press Start 2P", "Courier New", monospace; }
.mu-wave b { font-size: .7rem; } .mu-wave small { font-size: .5rem; color: var(--p8-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mu-wave.on small { color: var(--p8-ink); }
.mu-wave.on { border-color: var(--p8-yellow); background: var(--p8-red); }
.mu-vol, .mu-oct { display: inline-flex; align-items: center; gap: 4px; }
.mu-vol input { width: 90px; } .mu-oct b { min-width: 1.2em; text-align: center; }
.mu-piano { height: 110px; }
.mu-keys { position: relative; height: 100%; display: grid; grid-template-columns: repeat(var(--whites), minmax(0, 1fr)); gap: 2px; }
.mu-white { background: #fff; color: #333; border: 1px solid var(--line); border-radius: 0 0 6px 6px; display: flex; flex-direction: column;
  justify-content: flex-end; align-items: center; font-size: .7rem; padding-bottom: 4px; cursor: pointer; }
.mu-white small, .mu-black small { color: #999; font-size: .6rem; }
.mu-black { position: absolute; top: 0; height: 60%; width: calc(100% / var(--whites) * .62); left: calc(100% / var(--whites) * var(--at) - 100% / var(--whites) * .31);
  background: #222; color: #ddd; border: 0; border-radius: 0 0 4px 4px; font-size: .55rem; display: flex; align-items: flex-end; justify-content: center;
  padding-bottom: 3px; cursor: pointer; z-index: 1; }
.mu-white:active, .mu-black:active { background: var(--p8-yellow); color: #000; }
.mu-right { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; }
.mu-c { flex: 1; min-height: 0; background: var(--p8-bg); color: var(--p8-ink); border-radius: var(--radius-md); padding: 8px; display: flex; flex-direction: column; gap: 6px; overflow: hidden; }
.mu-c-head { display: flex; align-items: center; justify-content: space-between; color: var(--p8-pink); }
.mu-slots { display: flex; flex-wrap: wrap; gap: 4px; overflow-y: auto; align-content: flex-start; }
.mu-slot { width: 60px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; padding: 3px; border-radius: 4px; border: 2px solid var(--p8-dim);
  background: var(--p8-bg2); color: var(--p8-ink); font: .72rem "Courier New", monospace; cursor: pointer; }
.mu-slot-n { grid-column: 1 / -1; color: var(--p8-orange); text-align: left; }
.mu-slot i { font-style: normal; color: var(--p8-blue); }
.mu-slot.on { border-color: var(--p8-yellow); } .mu-slot.loop { box-shadow: inset 0 -3px 0 var(--p8-green); }
.mu-slot.now { background: rgba(0, 228, 54, .3); }
.mu-slot-add { place-items: center; display: grid; font-size: 1.3rem; grid-template-columns: 1fr; color: var(--p8-green); }
.mu-slot { position: relative; }
/* a pattern that is playing blinks a small play sign on its icon; Pause freezes it */
.mu-slot-play { position: absolute; top: 2px; right: 4px; color: var(--p8-green); font-size: .7rem; line-height: 1; animation: mu-blink 1s steps(1, end) infinite; }
.mu-ed[data-paused="1"] .mu-slot-play { animation-play-state: paused; }
@keyframes mu-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .mu-slot-play { animation: none; } }
.mu-c .mu-slots { flex: 1 1 auto; min-height: 0; }
.mu-stopall { width: 100%; justify-content: center; flex: none; }
.mu-stopall .mu-ico { width: 16px; height: 16px; }
.mu-rep-now code { color: var(--p8-yellow); }
.mu-c input[type=search] { width: 100%; }
.mu-sounds { overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 2px; }
.mu-snd { display: flex; gap: 4px; align-items: center; }
.mu-snd-pick { flex: 1; text-align: left; background: none; border: 0; color: var(--p8-ink); font: .78rem "Courier New", monospace; cursor: pointer; padding: 2px; }
.mu-snd.on .mu-snd-pick, .mu-snd-pick:hover { color: var(--p8-yellow); }
.mu-fx-title { font-weight: bold; }
.mu-fx { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.mu-fxb { display: flex; flex-direction: column; align-items: center; padding: 4px; border-radius: var(--radius-sm); border: 2px solid var(--line);
  background: var(--panel); color: var(--text); cursor: pointer; font: inherit; font-size: .72rem; }
.mu-fxb[aria-pressed=true] { border-color: var(--p8-red); background: var(--p8-bg); color: var(--p8-ink); }
.mu-save { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); }
.mu-export-progress { display: grid; gap: 4px; margin: var(--space-2) 0; color: var(--muted); font-size: .82rem; }
.mu-export-progress progress { width: 100%; height: 10px; accent-color: var(--action); }
.mu-down { display: flex; flex-direction: column; gap: var(--space-2); }
.mu-down .btn { display: flex; flex-direction: column; align-items: flex-start; text-align: left; width: 100%; }
.mu-down small { opacity: .75; }
.mu-down-pack { display: flex; flex-direction: column; gap: 4px; }
@media (max-width: 1100px) {
  .mu-ed { grid-template-columns: 1fr; height: auto; }
  .mu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); height: 640px; }
  .mu-c { min-height: 220px; }
}

/* Bundle Forge */
.bd-new { display: flex; flex-direction: column; gap: var(--space-4); height: calc(100vh - var(--topbar-h) - 48px); min-height: 480px; }
.bd-new #bd-find { flex: 1; }
.bd-list { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-4); }
.bd-group { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); }
.bd-ghead { display: flex; align-items: center; gap: var(--space-2); cursor: pointer; padding: 4px 0; }
.bd-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px var(--space-4); }
.bd-item { display: grid; grid-template-columns: auto auto 1fr; grid-template-rows: auto auto; column-gap: 8px; align-items: center; cursor: pointer;
  padding: 4px; border-radius: var(--radius-sm); }
.bd-item:hover { background: var(--panel-2); }
.bd-item input { grid-row: 1 / 3; } .bd-ico { grid-row: 1 / 3; font-size: 1.3rem; }
.bd-iname { font-weight: bold; } .bd-meta { grid-column: 3; font-size: .78rem; color: var(--muted); }
.bd-foot { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.bd-foot #bd-name { flex: 1 1 200px; }
.bd-inside { list-style: none; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.mf-sub > .pf-home { min-height: inherit; }
.mu-card header { font-size: .62rem; } .mu-card header select { font-family: inherit; font-size: .55rem; }
.mu-card .empty { font-size: .6rem; line-height: 1.6; padding: 12px; text-align: center; }
.mu-black { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.pw-foot .btn { flex: none; }
.ss-paint { position: relative; }
.ss-paint { display: block; overflow: auto; }
.ss-views { position: absolute; top: 6px; left: 6px; right: 6px; z-index: 2; display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; pointer-events: none; }
.ss-views .btn { pointer-events: auto; opacity: .92; }
.ss-views .btn.on { outline: 2px solid var(--accent, #ffd23f); }
.ss-paint #sk-canvas { margin-top: 40px; }
.ss-views { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; }
.ss-views .btn { font-size: .55rem; padding: 4px 6px; min-height: 0; white-space: nowrap; flex: none; }
.ss-paint #sk-canvas { display: block; margin-top: 34px; }
.ss-zoom { position: absolute; z-index: 2; top: 38px; right: 6px; display: flex; align-items: center; gap: 3px; padding: 2px; background: color-mix(in srgb, var(--surface-primary) 88%, transparent); border-radius: var(--radius-sm); }
.ss-zoom .btn { min-width: 30px; min-height: 28px; padding: 2px 6px; line-height: 1; }
.ss-zoom output { min-width: 3.5em; text-align: center; font-size: .72rem; font-variant-numeric: tabular-nums; }
.ss-zoom .btn:disabled { opacity: .45; cursor: default; }

/* Keep note controls inside their own reserved column, including narrow tracker cards. */
.mu-cell > span { min-width: 0; overflow: hidden; }
.mu-cell .mu-note-fx { display: block; width: 100%; min-width: 0; min-height: 0; height: 1.6em; padding: 0; font: inherit;
  border: 0; border-radius: 0; background: transparent; color: var(--p8-green); cursor: pointer; }
.mu-note-fx option { background: var(--p8-bg); }
.it-recipe { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-3) 0; }
.it-recipe-grid { display: grid; grid-template-columns: repeat(3, 48px); gap: 4px; }
.it-recipe-grid .ss-slot, .it-ingredients .ss-slot { width: 48px; height: 48px; }
.it-recipe-output { display: grid; gap: 4px; max-width: 180px; }
.it-recipe-output input { width: 60px; }
.it-ingredients { display: flex; flex-wrap: wrap; gap: 4px; max-height: 210px; overflow-y: auto; }
.sp-spot { display: flex; flex-wrap: wrap; align-items: end; gap: 6px; margin: 12px 0; }
.sp-spot label { min-width: 0; flex: 1 1 75px; }
.sp-spot input { width: 100%; }
.it-recipe-output > .ss-slot { width: 48px; height: 48px; }
.it-recipe .ss-slot img, .it-ingredients .ss-slot img { width: 36px; height: 36px; object-fit: contain; }
:root:not([data-theme="gamey"]) .mu-ed .mu-cell select.mu-note-fx,
:root[data-theme="gamey"] .mu-ed .mu-cell select.mu-note-fx { appearance: none; background: transparent; border: 0; padding: 0; color: var(--p8-green); }

.mu-record-edits { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.mu-record-edits label { display: flex; flex-direction: column; gap: var(--space-1); flex: 1 1 120px; }
.mu-record-edits input { width: 100%; min-width: 0; }

/* Stays visible above the embedded model editor without covering its save controls. */
#connection-status { position: fixed; bottom: 12px; left: 12px; right: 12px; z-index: 20000; padding: 10px 14px; border: 2px solid #b88624; border-radius: 8px; background: #fff3d0; color: #32240c; font-size: 14px; box-shadow: 0 2px 10px #0004; }
#connection-status[data-state="connected"] { border-color: #44805b; background: #e6f5e9; color: #143821; }
#connection-status[hidden] { display: none; }
#connection-status { pointer-events: none; }
#connection-status button { pointer-events: auto; }

/* Native range controls work with touch and keyboard as well as a mouse. */
.crop-modal { width: min(680px, calc(100vw - 32px)); }
#crop-preview { display: block; max-width: 100%; height: auto; margin: 0 auto; background: #ddd; }
.crop-controls { display: grid; gap: 12px; margin-top: 16px; }
.crop-controls .field { min-width: 0; }
.crop-controls input { width: 100%; min-height: 36px; }

/* Sound effects use a bounded workstation rather than the tracker grid. */
.sf-top { flex-wrap: wrap; min-width: 0; }
.sf-top .mu-name { min-width: 170px; flex: 1; }
.sf-top .mu-history { width: 150px; min-width: 110px; }
.sf-left { display: flex; flex-direction: column; gap: var(--space-2); min-width: 0; min-height: 0; }
.sf-left > .sf-wave-pane { flex: 1 1 auto; }
.sf-wave-pane { display: flex; flex-direction: column; gap: 8px; min-height: 0; min-width: 0; padding: 10px; border-radius: var(--radius-md); background: var(--p8-bg2); color: var(--p8-ink); }
.sf-wave-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.sf-wave-tools label { display: flex; align-items: center; gap: 6px; }
.sf-wave-tools input { width: 90px; }
.sf-wave-scroll { overflow-x: auto; overflow-y: hidden; min-height: 120px; flex: 1; background: var(--p8-bg); }
.sf-wave-inner { position: relative; height: 100%; min-height: 120px; }
.sf-wave-inner canvas { display: block; width: 100%; height: calc(100% - 24px); min-height: 96px; touch-action: none; cursor: crosshair; }
#sf-selection { position: absolute; top: 0; bottom: 24px; background: #77c98b33; border-inline: 2px solid #77c98b; pointer-events: none; }
#sf-playhead { position: absolute; top: 0; bottom: 24px; width: 2px; background: #ffb830; pointer-events: none; }
#sf-playhead[hidden], #sf-selection[hidden] { display: none; }
#sf-timeline { position: relative; height: 24px; font: 11px ui-monospace, monospace; color: var(--p8-ink); }
#sf-timeline span { position: absolute; transform: translateX(-50%); top: 5px; }
#sf-timeline span:first-child { transform: none; }   /* (a label near the right edge is shifted left inline) */
.sf-wave-pane .mu-record-edits { gap: 8px; }
.sf-wave-pane .mu-record-edits label { flex: 1 1 60px; font-size: .75rem; min-width: 0; }
.sf-wave-pane .mu-record-edits input { min-height: 30px; padding: 4px; }
.sf-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sf-actions .btn, .sf-actions select { min-height: 36px; font-size: .75rem; }
.sf-actions [aria-pressed="true"] { background: var(--p8-red); color: #fff; }
.sf-left > p { margin: 0; min-height: 1em; font-size: .75rem; }
.sf-pads { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); height: 110px; gap: 6px; }
.sf-pad-wrap { position: relative; min-width: 0; }
.sf-pad { width: 100%; height: 100%; border: 2px solid var(--line); background: var(--p8-bg); color: var(--p8-ink); border-radius: 8px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; cursor: pointer; }
.sf-pad span { font-size: .7rem; } .sf-pad b { font-size: 1.2rem; }
.sf-pad[data-filled="true"] { border-color: var(--p8-green); }
.sf-pad.on { box-shadow: inset 0 0 0 2px var(--p8-yellow); }
.sf-pad:active { background: var(--p8-red); }
.sf-pad-edit { position: absolute; right: 3px; top: 3px; padding: 0 5px; min-height: 25px; }
.sf-right { min-width: 0; }
.sf-replace, .sf-library { display: flex; flex-direction: column; min-height: 0; min-width: 0; gap: 8px; border: 1px solid var(--line); border-radius: var(--radius-md); padding: 10px; }
.sf-replace #mu-sounds { max-height: 160px; overflow-y: auto; min-height: 0; }
.sf-replace input { width: 100%; min-width: 0; }
#sf-replaces-now { font: .75rem ui-monospace, monospace; overflow-wrap: anywhere; }
.sf-library .facts { font-size: .72rem; margin: 0; }
.sf-load-list { overflow-y: auto; min-height: 0; }
.sf-load-row { display: grid; grid-template-columns: 1em minmax(0, 1fr) auto auto; gap: 5px; align-items: center; margin-bottom: 6px; }
.sf-load-row select { width: 100%; min-width: 0; font-size: .75rem; }
.sf-load-row .btn { padding: 4px 7px; }
.mu-cell .mu-c1, .mu-cell .mu-c2, .mu-cell .mu-c3 { text-align: center; min-width: 0; display: flex; align-items: center; justify-content: center; }
.mu-cell select.mu-note-wave, .mu-cell select.mu-note-fx { width: 100%; min-width: 0; max-width: 100%; text-align: center; text-align-last: center; font-family: ui-monospace, monospace; }
:root .mu-ed .mu-cell select.mu-note-wave { appearance: none; background: transparent; border: 0; padding: 0; color: var(--p8-pink); min-height: 0; }
.mu-note-wave option { background: var(--p8-bg); }
@media (max-width: 850px) {
  .sf-ed { height: auto; grid-template-columns: minmax(0, 1fr); }
  .sf-top { flex-wrap: wrap; }
  .sf-wave-pane { min-height: 300px; }
  .sf-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); height: 190px; }
  .sf-right .sf-recordings { min-height: 220px; }
}
.sf-replace, .sf-library { background: var(--p8-bg2); color: var(--p8-ink); }
.sf-replace .mu-snd-pick { color: var(--p8-ink); }
.sf-library .facts { color: var(--p8-dim); }
.mu-note-choice { display: flex; align-items: center; justify-content: center; position: relative; width: 100%; height: 1.6em; min-width: 0; }
.mu-cell .mu-note-choice select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.mu-choice-icon { pointer-events: none; text-align: center; }
.mu-note-choice:focus-within { outline: 1px solid var(--p8-yellow); }

.mu-note-choice::after { content: ""; position: absolute; right: 0; bottom: 0; border: 3px solid transparent; border-top-color: currentColor; pointer-events: none; opacity: .7; }
:root .sf-ed .sf-actions .btn[aria-pressed="true"] { background: var(--p8-red); color: var(--p8-ink); }
.sf-pad { padding-top: 20px; }
:root .sf-pad-wrap .sf-pad-edit { width: 28px; min-width: 28px; height: 32px; min-height: 32px; padding: 0; font: 14px ui-monospace, monospace; }
.sf-wave-pane .mu-record-edits label { white-space: normal; }
.events-toolbar { display:flex; align-items:center; justify-content:space-between; gap:1rem; margin-bottom:1rem; }
.events-month-nav { display:grid; grid-template-columns:44px minmax(160px,1fr) 44px; align-items:center; gap:.5rem; width:calc((100% - 1rem) * .689); }
.events-month-nav > label { display:flex; justify-content:center; align-items:center; gap:.65rem; font-size:1.15rem; font-weight:700; }
.events-month-nav select { width:auto; min-width:5.5rem; }
.events-actions,.events-bottom { display:flex; gap:.5rem; }
.events-layout { display:grid; grid-template-columns:minmax(0, 2fr) minmax(260px, .9fr); gap:1rem; align-items:start; }
.events-calendar { min-width:0; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; background:var(--panel); }
.events-calendar > header { display:flex; gap:.7rem; align-items:baseline; padding:.8rem 1rem; border-bottom:1px solid var(--line); }
.events-calendar > header b { font-size:1.05rem; }
.events-calendar > header strong { font-size:1.65rem; }
.events-calendar > header span { margin-left:auto; color:var(--muted); }
.events-weekdays,.events-grid { display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); }
.events-weekdays { background:var(--surface); font-size:.78rem; font-weight:700; text-align:center; }
.events-weekdays span { padding:.55rem .1rem; }
.event-day { min-height:104px; padding:.25rem; border-top:1px solid var(--line); border-right:1px solid var(--line); min-width:0; }
.event-day:nth-child(7n) { border-right:0; }
.event-day.outside { opacity:.48; }
.event-day.today { background:color-mix(in srgb,var(--action) 8%,var(--panel)); }
.event-day.chosen { box-shadow:inset 0 0 0 2px var(--action); }
.event-day-number { border:0; background:transparent; border-radius:50%; min-width:1.7rem; height:1.7rem; padding:0; font-weight:700; color:var(--text); cursor:pointer; }
.event-day.today .event-day-number { background:var(--action); color:#fff; }
.event-day-list { display:grid; gap:.15rem; margin-top:.15rem; }
.event-chip { display:flex; align-items:center; gap:.25rem; width:100%; min-width:0; border:0; border-radius:5px; background:var(--surface); color:var(--text); text-align:left; padding:.14rem .22rem; font-size:.72rem; cursor:pointer; }
.event-chip.active { outline:2px solid var(--action); }
.event-chip span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-icon { width:20px; height:20px; object-fit:contain; flex:none; }
.event-context { border:1px solid var(--line); border-radius:var(--radius); padding:1rem; background:var(--panel); }
.event-context h2 { display:flex; align-items:center; gap:.5rem; margin:.1rem 0 .5rem; }
.event-context h3 { margin:1rem 0 .5rem; font-size:.95rem; }
.event-date,.event-context>p { color:var(--muted); }
.event-description { white-space:pre-wrap; overflow:auto; max-height:180px; padding:.6rem 0; }
.event-people { display:flex; flex-wrap:wrap; gap:.5rem; max-height:130px; overflow:auto; }
.event-person { display:grid; justify-items:center; gap:.2rem; font-size:.72rem; }
.event-person small { max-width:78px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.event-head { width:34px; height:34px; display:grid; place-items:center; border-radius:50%; color:#fff; font-weight:700; background:var(--action); }
.events-side { display:grid; gap:.65rem; }
.events-bottom > * { flex:1; }
.event-modal-bg { z-index:10000; }
.event-modal { width:min(780px,96vw); max-height:92vh; overflow:hidden; display:flex; flex-direction:column; }
.event-modal-heading { display:grid; grid-template-columns:1fr 200px; gap:.8rem; }
.event-modal-heading label,.event-modal-body label { display:grid; gap:.35rem; }
.event-modal-body { display:grid; grid-template-columns:1fr 1fr; gap:1rem; overflow:hidden; margin:1rem 0; }
.event-modal-body section:first-child { display:grid; gap:.8rem; align-content:start; min-height:0; }
.event-modal-body textarea { resize:vertical; }
.event-player-select { min-height:0; border:1px solid var(--line); border-radius:var(--radius); padding:.8rem; }
.event-player-select h3 { margin:0 0 .5rem; }
.event-player-list { max-height:45vh; overflow:auto; display:grid; gap:.35rem; }
.event-player-list label { display:flex; align-items:center; gap:.55rem; padding:.35rem; border-radius:6px; cursor:pointer; }
.event-player-list label:hover { background:var(--surface); }
.event-modal footer { display:flex; justify-content:space-between; gap:.6rem; margin-top:auto; }
@media(max-width:850px) { .events-layout { grid-template-columns:1fr; } .events-month-nav { width:100%; } .event-day { min-height:75px; } .event-chip { font-size:0; justify-content:center; } .event-chip .event-icon { width:21px;height:21px; } }
@media(max-width:560px) { .events-toolbar { align-items:stretch; flex-direction:column; } .events-actions { justify-content:flex-end; } .events-month-nav { grid-template-columns:38px minmax(0,1fr) 38px; } .event-day { min-height:52px; padding:.12rem; } .event-day-number { min-width:1.45rem;height:1.45rem; } .event-chip { padding:0; } .event-modal-heading,.event-modal-body { grid-template-columns:1fr; } .event-modal-body { overflow:auto; } .event-player-list { max-height:180px; } }

/* Scene Forge (owner 2026-10-04): the stage on the left in the photo's own shape, the studio panels on the right */
.ph-ed { grid-template-columns: minmax(0, 1fr) minmax(300px, 380px); grid-template-rows: auto minmax(0, 1fr); }
.ph-ed .mf-ed-top { grid-template-columns: auto minmax(0, 1fr) auto; }
.ph-room { min-height: 0; min-width: 0; display: grid; place-items: center; background: repeating-conic-gradient(#d9d9d9 0 25%, #f2f2f2 0 50%) 0 0 / 24px 24px; border-radius: 10px; overflow: hidden; }
.ph-frame { position: relative; box-shadow: 0 6px 24px rgba(0,0,0,.35); }
.ph-canvas { display: block; width: 100% !important; height: 100% !important; touch-action: none; }
.ph-canvas.ph-retro { image-rendering: pixelated; }
.ph-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 1; display: none; background: radial-gradient(ellipse at center, transparent 45%, rgba(0,0,0,.6) 100%); }
.ph-frame.ph-vig-on .ph-vignette { display: block; }
.ph-words { position: absolute; left: 0; right: 0; text-align: center; pointer-events: none; z-index: 2; white-space: pre-line; line-height: 1.3; font-family: "Courier Prime", monospace; text-shadow: .08em .08em 0 rgba(0,0,0,.6); }
.ph-words.ph-pixel { font-family: "Press Start 2P", monospace; }
.ph-words.ph-outline { text-shadow: -.1em 0 #000, .1em 0 #000, 0 -.1em #000, 0 .1em #000, -.07em -.07em #000, .07em .07em #000, -.07em .07em #000, .07em -.07em #000; }
.ph-at-top { top: .7em; } .ph-at-middle { top: 50%; transform: translateY(-50%); } .ph-at-bottom { bottom: .7em; }
.ph-side { justify-content: flex-start; gap: var(--space-3); min-height: 0; }
.ph-tabs { margin: 0; }
.ph-sec-title { margin: 0; font-size: 1rem; }
.ph-panel { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: var(--space-3); padding-right: 4px; }
.ph-label { font-weight: bold; font-size: .9rem; }
.ph-choices, .ph-modes { display: flex; flex-wrap: wrap; gap: 6px; }
.ph-choices .btn, .ph-modes .btn, .ph-adds .btn { min-height: 38px; padding: 4px 10px; font-size: .8rem; display: inline-flex; align-items: center; gap: 6px; }
.ph-choices .btn.on, .ph-modes .btn.on { outline: 3px solid var(--accent, #8e4fc2); }
.ph-choices .mf-item, .ph-adds .mf-item { width: 22px; height: 22px; }
.ph-adds { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.ph-cast { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.ph-actor { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 2px solid transparent; border-radius: 6px; background: rgba(0,0,0,.05); cursor: pointer; text-align: left; font: inherit; }
.ph-actor.on { border-color: var(--accent, #8e4fc2); background: rgba(142,79,194,.12); }
.ph-actor .mf-item { width: 24px; height: 24px; }
.ph-panel textarea { width: 100%; resize: vertical; }
.ph-actions { flex-wrap: wrap; }
.ph-actions .mf-act { flex: 1 1 45%; }
.ph-tile .ph-pic { background: #222 center / cover no-repeat; }
@media (max-width: 900px) { .ph-ed { grid-template-columns: 1fr; grid-template-rows: auto minmax(300px, 50vh) auto; height: auto; } }

/* Deploy map: the pad that nudges the box (owner 2026-10-08) */
.mf-pad { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 8px; align-items: flex-end; padding: 8px; border-radius: var(--radius-sm); background: rgba(0,0,0,.6); }
.mf-pad[hidden] { display: none; }
.mf-pad:focus-visible { outline: 2px solid var(--action); }
.mf-pad-grid { display: grid; grid-template-columns: repeat(3, 2.2rem); grid-auto-rows: 2.2rem; gap: 4px; }
.mf-pad-grid .btn, .mf-pad-side .btn { min-height: 0; padding: 0; line-height: 1; }
.mf-pad-side { display: flex; flex-direction: column; gap: 4px; }
.mf-pad-side .btn { padding: 4px 8px; white-space: nowrap; }

/* Music Forge: the Song · Tracker · Sampler switch and the song timeline (Song mode). */
/* Only the cards' place changes between Tracker and Song; the instrument row and the piano below it stay. */
.mu-left { min-width: 0; }
.mu-main { display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mu-main > .mu-cards { flex: 1; }
.mu-song-view { flex: 1; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
.mu-modes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mu-modebtn { font-family: "Press Start 2P", "Courier New", monospace; font-size: .6rem; padding: 8px 2px; min-height: 40px; }
.mu-modebtn.on { background: var(--p8-red); color: var(--p8-ink); border-color: var(--p8-yellow); }
.mu-song-side { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: var(--space-2); }
.mu-tl-time { margin-left: auto; font-family: "Press Start 2P", "Courier New", monospace; font-size: .62rem; }
.mu-tl-hint { margin: 0; min-height: 1.2em; }
.mu-tl-scroll { flex: 1; min-height: 0; overflow: auto; background: var(--p8-bg); color: var(--p8-ink); border-radius: var(--radius-md); }
.mu-tl { --head: 104px; position: relative; width: calc(var(--head) + var(--lane, 1280px)); min-width: 100%; min-height: 100%; display: flex; flex-direction: column; }
.mu-tl-body { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; }
.mu-ruler { display: flex; height: 26px; background: var(--p8-bg2); position: sticky; z-index: 3; }
.mu-ruler:not(.bottom) { top: 0; }
.mu-ruler.bottom { bottom: 0; margin-top: auto; }
.mu-ruler-lane { position: relative; width: var(--lane); flex: none; height: 100%; }
.mu-ruler-title { display: flex; align-items: center; padding: 0 8px; font-size: .62rem; color: var(--p8-dim); text-transform: uppercase; letter-spacing: .04em; }
.mu-head { flex: 0 0 var(--head); width: var(--head); box-sizing: border-box; position: sticky; left: 0; z-index: 2; background: var(--p8-bg2); }
.mu-mark { position: absolute; top: 5px; bottom: 0; padding-left: 3px; border-left: 1px solid rgba(255, 255, 255, .28); font-size: .66rem; color: var(--p8-dim); white-space: nowrap; }
.mu-mark.major { color: var(--p8-yellow); border-left-color: var(--p8-yellow); font-weight: bold; }
.mu-track { display: flex; flex: 1 1 48px; min-height: 48px; max-height: 84px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.mu-track .mu-head { display: grid; grid-template-columns: 1.5em 1.9em 1.9em; grid-template-rows: auto auto; align-content: center; gap: 2px 4px; padding: 3px 6px; }
.mu-track .mu-head b { font-family: "Press Start 2P", "Courier New", monospace; font-size: .8rem; color: var(--p8-orange); align-self: center; }
.mu-track.solo .mu-head b { color: var(--p8-yellow); }
.mu-track .mu-head input[type=range] { grid-column: 1 / -1; width: 100%; min-width: 0; height: 12px; margin: 0; }
.mu-mini { font: bold .68rem ui-monospace, monospace; min-height: 0; height: 20px; padding: 0; border-radius: 4px; border: 1px solid var(--p8-dim); background: transparent; color: var(--p8-ink); cursor: pointer; }
.mu-mini[aria-pressed=true] { background: var(--p8-red); border-color: var(--p8-yellow); }
.mu-lane { position: relative; width: var(--lane); flex: none; height: 100%;
  background-image: repeating-linear-gradient(to right, rgba(255, 255, 255, .24) 0 1px, transparent 1px calc(var(--px) * 16)),
    repeating-linear-gradient(to right, rgba(255, 255, 255, .08) 0 1px, transparent 1px calc(var(--px) * 4)); }
.mu-track.muted .mu-lane { opacity: .38; }
.mu-clip { position: absolute; top: 4px; bottom: 4px; display: flex; align-items: center; gap: 5px; padding: 0 10px 0 6px; overflow: hidden; box-sizing: border-box;
  border-radius: 6px; border: 2px solid hsl(var(--hue) 65% 62%); background: hsl(var(--hue) 48% 34%); color: #fff; cursor: grab; touch-action: none; user-select: none; }
.mu-clip.sound { border-radius: 14px; background: hsl(var(--hue) 40% 28%); }
.mu-clip.sel { outline: 2px solid var(--p8-yellow); outline-offset: 1px; z-index: 1; }
.mu-clip.dragging { opacity: .45; }
.mu-clip.cut { border-right-style: dashed; }
.mu-clip b { font-family: "Press Start 2P", "Courier New", monospace; font-size: .78rem; }
.mu-clip small { font-size: .64rem; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.mu-clip-resize { position: absolute; right: 0; top: 0; bottom: 0; width: 9px; cursor: ew-resize; background: rgba(255, 255, 255, .26); }
.mu-ghost { position: absolute; top: 4px; bottom: 4px; border: 2px dashed var(--p8-green); border-radius: 6px; background: rgba(108, 213, 108, .18); pointer-events: none; z-index: 2; }
.mu-ghost.bad { border-color: #e8554f; background: rgba(232, 85, 79, .22); }
.mu-playhead { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--p8-yellow); box-shadow: 0 0 6px var(--p8-yellow); pointer-events: none; z-index: 4; }
.mu-lib { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 10px; border-radius: var(--radius-md); background: var(--p8-bg); color: var(--p8-ink); }
.mu-lib h4 { margin: 0 0 6px; font: .66rem "Press Start 2P", "Courier New", monospace; color: var(--p8-pink); }
.mu-lib .facts { color: var(--p8-dim); font-size: .75rem; margin: 6px 0; }
.mu-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px; }
.mu-tile { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; aspect-ratio: 1; min-width: 0; padding: 4px; border-radius: 8px;
  border: 2px solid var(--p8-blue); background: var(--p8-bg2); color: var(--p8-ink); cursor: grab; overflow: hidden; }
.mu-tile.sound { border-color: var(--p8-green); }
.mu-tile b { font: 1.05rem "Press Start 2P", "Courier New", monospace; }
.mu-tile small { max-width: 100%; font-size: .62rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--p8-dim); }
.mu-tile.empty { opacity: .5; }
.mu-tile.armed { background: var(--p8-red); border-color: var(--p8-yellow); }
.mu-tile.armed small { color: var(--p8-ink); }
@media (max-width: 1100px) {
  .mu-main { min-height: 470px; }
  .mu-song-side { min-height: 200px; }
}

/* Item Forge: music discs (the song, its sound, the record's own picture) and the small pixel painter */
.mf-pixel { image-rendering: pixelated; }
.it-disc-ready { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); padding: var(--space-3); border: 1px solid var(--line); border-radius: var(--radius-md); }
.it-disc-ready audio { width: 100%; max-width: 360px; }
.it-disc-error { color: var(--danger, #c0392b); }
#ie-sound-bar { width: 160px; vertical-align: middle; }
.px-painter { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-3); align-items: flex-start; }
.px-tools { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: center; }
.px-tools .btn.on { background: var(--accent, #8e44ad); color: #fff; }
.px-colours { display: flex; flex-wrap: wrap; gap: 4px; max-width: 320px; align-items: center; }
.px-colour { width: 28px; height: 28px; padding: 0; border-radius: 6px; border: 2px solid var(--line); background: var(--c); cursor: pointer; }
.px-colour[aria-pressed=true] { outline: 3px solid var(--ff-frame, #333); outline-offset: 1px; }
.px-canvas { width: min(320px, 100%); aspect-ratio: 1; image-rendering: pixelated; border: 2px solid var(--line); border-radius: 8px; cursor: crosshair; touch-action: none;
  background: repeating-conic-gradient(#d8d8d8 0 25%, #f4f4f4 0 50%) 0 0 / 40px 40px; }

/* Sampler opened from the song maker: the right side is a plain list of recordings. */
.sf-more { display: flex; flex-direction: column; gap: 6px; max-height: 45%; overflow-y: auto; }
.sf-more > summary { cursor: pointer; font-weight: 700; padding: 4px 0; }

/* Arranger tools: trim handle, the place to play from, and the loop band on the ruler. */
.mu-clip-trim { position: absolute; left: 0; top: 0; bottom: 0; width: 9px; cursor: ew-resize; background: rgba(255, 255, 255, .26); }
.mu-clip { padding-left: 14px; }
.mu-ruler-lane[data-seek-lane] { cursor: pointer; }
.mu-seek { position: absolute; top: 0; bottom: 0; width: 0; border-left: 2px solid var(--p8-green); pointer-events: none; z-index: 2; }
.mu-tl-rep { display: inline-flex; align-items: center; gap: 4px; }
.mu-tl-rep input { width: 3.2em; }
.mu-tile { touch-action: none; }
.mu-tile.dragging { opacity: .5; }

/* Redesign 2026-10-09: the Song, Tracker and Sampler share one frame. Left: the work area, a row of controls, the
   piano / pads / song buttons. Right: the three mode buttons, a pane, the effect buttons, Save and Download. */
.mu-ed { --bar-h: 44px; }
.mu-left { display: flex; flex-direction: column; gap: var(--space-2); min-height: 0; min-width: 0; }
.mu-left > .mu-main { flex: 1 1 auto; }
.mu-metro { display: inline-flex; align-items: center; gap: 4px; }
.mu-metro [aria-pressed=true] { background: var(--p8-red); color: var(--p8-ink); border-color: var(--p8-yellow); }
.mu-metro select { max-width: 150px; }
/* One line of buttons under the timeline, as tall as Save / Download so the two rows line up. */
.mu-song-bar { display: flex; align-items: center; gap: var(--space-2); flex-wrap: nowrap; overflow-x: auto; min-height: var(--bar-h); }
.mu-song-bar > * { flex-shrink: 0; }
.mu-song-bar label { display: inline-flex; align-items: center; gap: 4px; }
.mu-song-bar input[type=range] { width: 72px; }
.mu-song-bar { gap: 3px; font-size: .8em; }
.mu-song-bar .btn { font-size: .78rem; padding-left: 6px; padding-right: 6px; white-space: nowrap; }
.mu-song-bar .mu-tl-time { font-size: .55rem; }
.mu-song-bar select { font-size: .78rem; padding-left: 4px; padding-right: 4px; }
.mu-song-bar #mu-tl-times { width: 44px; }
.mu-song-bar .mu-tl-rep { display: inline-flex; gap: 4px; }
.mu-song-bar .btn, .mu-save .btn { min-height: var(--bar-h); }
.mu-drums { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 100%; gap: 6px; }
.mu-drums button { min-width: 0; padding: 2px; font-size: .64rem; line-height: 1.1; overflow: hidden; }
.mu-pname { display: flex; align-items: center; gap: 6px; font-size: .75rem; }
.mu-pname input { flex: 1; min-width: 0; }
.mu-samp-tile { grid-template-columns: 1fr; width: 64px; }
.mu-samp-tile .mu-pn { min-height: 1.1em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--p8-pink); }
/* Smaller icons, so a song's patterns and samples fit on one screen. */
.mu-tiles { grid-template-columns: repeat(auto-fill, minmax(46px, 1fr)); gap: 4px; }
.mu-tile { padding: 2px; gap: 1px; border-radius: 6px; }
.mu-tile b { font-size: .8rem; }
.mu-tile small { font-size: .55rem; }
.mu-lib .mu-tl-hint { margin: 0; }
/* The Sampler: the same frame. Pads are the piano's row; the samples pane is the pattern box's place. */
.sf-right.mu-right { display: flex; flex-direction: column; }
.sf-right .sf-recordings { flex: 1 1 auto; min-height: 120px; }
.sf-rec-list { display: flex; flex-direction: column; gap: 4px; overflow-y: auto; min-height: 0; flex: 1; }
.sf-rec { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 6px; align-items: center; padding: 3px; border: 2px solid transparent; border-radius: 6px; cursor: grab; }
.sf-rec.armed { border-color: var(--p8-yellow); background: rgba(255, 255, 255, .08); }
.sf-rec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.sf-pad-wrap.over .sf-pad, .sf-pad-wrap.armed .sf-pad { border-color: var(--p8-yellow); border-style: dashed; }
.sf-actions { min-height: var(--bar-h); }
.sf-actions .facts { flex: 1; min-width: 8em; margin: 0; }
.sf-actions .btn { min-height: var(--bar-h); }
.sf-actions .btn { min-width: 0; }
.sf-actions #sf-save-changes:disabled { opacity: .5; }
.sf-actions #sf-save-changes:not(:disabled) { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary, #8e4fc2) 55%, transparent); }
.sf-top .btn, .mu-metro .btn { white-space: nowrap; }
.sf-top .mu-name { min-width: 170px; }

/* The words Zoom and Snap give way to their tooltips when the bar would not fit on one line. */
@media (max-width: 1400px) { .mu-song-bar .mu-bar-l { display: none; } }

/* Tracker: the four cards became one pane with four columns, so a selection can run across them. */
.mu-cards { gap: 0; background: var(--p8-bg); border-radius: var(--radius-md); overflow: hidden; border: 2px solid transparent; }
.mu-cards:focus-within { border-color: var(--p8-yellow); }
.mu-col { background: transparent; color: var(--p8-ink); display: flex; flex-direction: column; min-height: 0; min-width: 0;
  font-family: "Courier New", ui-monospace, monospace; border-left: 1px solid rgba(255, 241, 232, .18); }
.mu-col:first-child { border-left: 0; }
.mu-col header { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 8px; background: var(--p8-bg2);
  color: var(--p8-pink); font-size: .62rem; font-family: "Press Start 2P", "Courier New", monospace; }
.mu-cell { user-select: none; -webkit-user-select: none; }
.mu-cell.picked { background: rgba(41, 173, 255, .28); box-shadow: inset 3px 0 0 var(--p8-blue); }
.mu-cell.picked.cur { background: rgba(41, 173, 255, .4); }
.mu-pbar { display: flex; gap: 6px; margin: 6px 0; }
.mu-pbar .btn { flex: 1; min-height: 34px; padding: 0 6px; }
@media (max-width: 1100px) { .mu-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Song: picked blocks, the marquee, the paste mark and the start / finish range. */
.mu-clip.sel { outline: 2px solid var(--p8-yellow); outline-offset: 1px; z-index: 1; }
.mu-marquee { position: absolute; border: 1px dashed var(--p8-yellow); background: rgba(255, 236, 39, .12); pointer-events: none; z-index: 5; }
.mu-pcursor { position: absolute; top: 2px; bottom: 2px; width: 0; border-left: 2px dashed var(--p8-blue); pointer-events: none; z-index: 1; }
.mu-seek.end { border-left-color: #ff004d; }
.mu-range { position: absolute; top: 0; bottom: 0; background: rgba(0, 228, 54, .22); pointer-events: none; z-index: 1; }
.mu-range-body { position: absolute; top: 26px; bottom: 26px; background: rgba(0, 228, 54, .07); border-left: 1px solid var(--p8-green); border-right: 1px solid var(--p8-red); pointer-events: none; z-index: 0; }
.mu-song-bar #mu-tl-loop[aria-pressed=true] { background: var(--p8-green); color: #10200a; }
.mu-song-bar .btn > span[aria-hidden] { display: inline-block; min-width: 1em; text-align: center; }
.mu-song-bar .btn:disabled { opacity: .45; }

/* Desktop polish 2026-10-09: the top row is one line in the Song, the Tracker and the Sampler, with the transport buttons in the
   same place in all three. Play / pause, stop and the big red record dot are drawn (transport.js), not typed letters. */
.mu-transport { display: inline-flex; align-items: center; gap: 6px; flex: none; }
.mu-transport .btn { width: 46px; min-width: 46px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
.mu-transport .mu-mic { width: auto; padding: 0 12px; gap: 6px; }
.mu-ico { width: 20px; height: 20px; flex: none; fill: currentColor; display: block; }
.mu-play { color: var(--p8-green); }
.mu-play .mu-ico-pause { display: none; }
.mu-ed .mu-play[aria-pressed="true"] { background-image: linear-gradient(rgba(108, 213, 108, .32), rgba(108, 213, 108, .32)) !important; border-color: var(--p8-green); }
.mu-play[aria-pressed="true"] .mu-ico-play { display: none; }
.mu-play[aria-pressed="true"] .mu-ico-pause { display: block; }
.mu-stop { color: var(--p8-ink-btn, currentColor); }
.mu-stop .mu-ico { width: 18px; height: 18px; }
.btn.mu-rec { color: #e5262f; }
.mu-rec .mu-ico { width: 22px; height: 22px; filter: drop-shadow(0 0 1px rgba(0, 0, 0, .35)); }
.mu-ed .mu-rec[aria-pressed="true"] { background-image: linear-gradient(rgba(229, 38, 47, .22), rgba(229, 38, 47, .22)) !important; border-color: #e5262f; }
.mu-rec[aria-pressed="true"] .mu-ico { animation: mu-rec-pulse 1s ease-in-out infinite; }
@keyframes mu-rec-pulse { 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .mu-rec[aria-pressed="true"] .mu-ico { animation: none; } }
.mu-rec:disabled, .mu-play:disabled, .mu-stop:disabled { opacity: .45; }
.mu-ed .mu-mic[aria-pressed="true"] { background-image: linear-gradient(rgba(108, 213, 108, .32), rgba(108, 213, 108, .32)) !important; border-color: var(--p8-green); }
.mu-metro .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; }
.mu-metro .mu-ico { width: 18px; height: 18px; }

.mu-top, .sf-top { gap: 6px; }
.mu-top .mu-tempo { flex: none; }
.mu-top .mu-tempo input { width: 64px; padding-inline: 4px; text-align: center; -moz-appearance: textfield; appearance: textfield; }
.mu-top .mu-tempo input::-webkit-inner-spin-button, .mu-top .mu-tempo input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mu-top .mu-history, .sf-top .mu-history { flex: none; width: 140px; max-width: 140px; min-width: 0; font-size: .78rem; padding-inline: 8px 2px; }
.mu-top .mu-metro select { width: 114px; max-width: 114px; font-size: .78rem; padding-inline: 8px 2px; }
.mu-top .pf-help { flex: none; }
@media (min-width: 1000px) {
  .mu-top, .sf-top { flex-wrap: nowrap; min-height: var(--bar-h); }
  .mu-top > *, .sf-top > * { flex: none; }
  .mu-top .mu-name, .sf-top .mu-name { flex: 1 1 120px; min-width: 100px; }
}
/* The words Metronome and Mic give way to their tooltips, so the name box keeps room (the page has a 232 px menu on the left). */
@media (max-width: 1600px) {
  .mu-top .mu-lbl { display: none; }
  .mu-transport .mu-mic { width: 46px; padding: 0; }
}
/* The instrument row: one tidy line when it fits, otherwise it wraps to a second line (never a hidden sideways scroll). */
.mu-row-e { flex-wrap: wrap; overflow: visible; gap: 6px 10px; justify-content: space-between; }
.mu-row-e > .mu-e-a, .mu-row-e > .mu-e-b { flex: 0 1 auto; min-width: 0; max-width: 100%; }
.mu-e-a, .mu-e-b { display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; }
.mu-e-a > *, .mu-e-b > * { flex: none; }
.mu-e-b label { display: inline-flex; align-items: center; gap: 4px; }
.mu-e-b #mu-scale { width: 118px; }
.mu-e-a #mu-wave { width: 120px; }
.mu-e-a #mu-kit { width: 92px; }
.mu-e-a #mu-notefx { width: 104px; }
.mu-e-a #mu-notefx:disabled { opacity: .45; cursor: default; }
.mu-e-a #mu-root { width: 60px; }   /* a sample instrument's natural pitch, next to the instrument menu */
.mu-e-a[data-root] #mu-wave { width: 100px; }   /* ...and the instrument menu gives it the room */
.mu-e-a #mu-root[hidden] { display: none; }
@media (max-width: 999px) { .mu-e-a, .mu-e-b { flex-wrap: wrap; } }
.mu-e-b .mu-oct { gap: 4px; }
.mu-row-e select { min-height: 38px; font-size: .8rem; padding-inline: 8px 2px; }
.mu-row-e label, .mu-row-e .mu-oct { font-size: .75rem; white-space: nowrap; }
.mu-row-e .mu-vol input { width: 72px; }

/* Chords: Single note / Chord / Auto-chord and the kind of chord sit in the gap between the instrument group and the scale group. */
.mu-row-e > .mu-e-c { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px; }
.mu-e-c select { flex: none; }
.mu-e-c #mu-chord-mode { width: 124px; }
.mu-e-c #mu-chord-kind { width: 132px; }
.mu-e-c select:disabled { opacity: .45; cursor: default; }
@media (max-width: 999px) { .mu-row-e > .mu-e-c { flex-wrap: wrap; } }
/* Auto-chord: a key carries its chord's name: the root on top and what kind of chord under it, so long names fit narrow keys. */
.mu-chordkeys .mu-white, .mu-chordkeys .mu-black { overflow: hidden; }
.mu-ck { display: flex; flex-direction: column; align-items: center; line-height: 1.1; max-width: 100%; }
.mu-ck b { font-size: .8rem; }
.mu-ck i { font-style: normal; font-size: .58rem; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-keys .mu-white.down, .mu-keys .mu-black.down { background: var(--p8-yellow); color: #000; }
sup.mu-chord { font-size: .7em; margin-left: 2px; color: var(--p8-yellow); }

/* Song: each track has volume, pan and its own effects; blocks show their notes upright (patterns) or their waveform (recordings). */
.mu-tl { --head: 140px; }
.mu-track .mu-head { grid-template-columns: 1.4em 1.8em 1.8em 2.2em; gap: 3px 4px; }
.mu-track .mu-head .mu-sl { grid-column: span 2; display: flex; align-items: center; gap: 3px; min-width: 0; }
.mu-track .mu-head .mu-sl small { font-size: .5rem; color: var(--p8-dim); width: 2.1em; flex: none; text-transform: uppercase; }
.mu-track .mu-head .mu-sl input[type=range] { grid-column: auto; flex: 1; width: auto; }
.mu-mini.mu-fxo { font-size: .6rem; letter-spacing: -.02em; }
.mu-mini.mu-fxo[aria-pressed=true] { background: var(--p8-blue); color: #10200a; border-color: var(--p8-blue); }
.mu-track .mu-head input.mu-pan { background: linear-gradient(to right, transparent calc(50% - 1px), rgba(255, 255, 255, .55) calc(50% - 1px) calc(50% + 1px), transparent calc(50% + 1px)); }
.mu-fx-modal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 10px 0; }
.mu-fx-modal .mu-fxb { gap: 4px; }
.mu-fx-modal .mu-fxb span { font-size: 1.5rem; }
.mu-clip { flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 0; padding: 2px 10px 2px 14px; }
.mu-clip-top { display: flex; align-items: baseline; gap: 5px; height: 14px; overflow: hidden; flex: none; }
.mu-clip-top b { font-size: .6rem; }
.mu-clip-top small { font-size: .58rem; }
.mu-clip-body { position: absolute; left: 0; right: 0; top: 17px; bottom: 2px; overflow: hidden; pointer-events: none; }
.mu-nt { position: absolute; top: 0; display: block; font-style: normal; font-family: "Courier New", ui-monospace, monospace; font-weight: bold; line-height: 1.02; text-align: left; color: #fff; text-shadow: 0 1px 0 rgba(0, 0, 0, .45); overflow: hidden; }
.mu-nt u { display: block; text-decoration: none; height: 1.02em; }
.mu-wavec { display: block; width: 100%; height: 100%; }
.mu-clip.sound .mu-clip-body { left: 8px; right: 8px; }

/* Tracker, 2026-10-09 evening: text that grows with the pane, the volume as signal bars, a visible focus border, key caps on the drums. */
.mu-cell { font-size: clamp(.55rem, min(calc(100cqh / 16 * .5), calc((100cqw - 40px) / 11.4)), 1.7rem); }
.mu-cell { grid-template-columns: 2.2em minmax(3.8em, 1.2fr) minmax(1.6em, .8fr) minmax(4.4em, 2.2fr) minmax(1.6em, .8fr); }
.mu-cell .mu-choice-icon { font-size: 1.15em; }
.mu-vbars { display: inline-flex; align-items: flex-end; justify-content: center; gap: .12em; height: 1.05em; width: 100%; cursor: pointer; }
.mu-vbars i { display: block; flex: 0 1 .42em; min-width: 3px; background: rgba(255, 255, 255, .18); border-radius: 1px; }
.mu-vbars i:nth-child(1) { height: 22%; } .mu-vbars i:nth-child(2) { height: 33%; } .mu-vbars i:nth-child(3) { height: 44%; }
.mu-vbars i:nth-child(4) { height: 55%; } .mu-vbars i:nth-child(5) { height: 68%; } .mu-vbars i:nth-child(6) { height: 84%; } .mu-vbars i:nth-child(7) { height: 100%; }
.mu-vbars i.on { background: var(--p8-blue); }
.mu-cell.cur .mu-vbars i.on { background: #fff; }
.mu-cell .mu-c2 { overflow: visible; }
/* the pane that has the keyboard */
.mu-cards { border: 2px solid rgba(255, 255, 255, .14); }
.mu-cards:focus-within { border-color: rgba(255, 255, 255, .14); }
.mu-cards.entry { border-color: var(--p8-yellow); box-shadow: 0 0 0 1px var(--p8-yellow); }
.mu-cards.rec { border-color: #e5262f; box-shadow: 0 0 0 1px #e5262f; }
.mu-cards:not(.entry):not(.rec) .mu-cell.cur { background: rgba(255, 241, 232, .05); }
.mu-cards:not(.entry):not(.rec) .mu-cell.cur .on { background: rgba(255, 255, 255, .22); }
#mu-c { border: 2px solid transparent; border-radius: var(--radius-md); }
#mu-c.entry { border-color: var(--p8-yellow); box-shadow: 0 0 0 1px var(--p8-yellow); }
.mu-drums button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; position: relative; }
.mu-drums .mu-key, .mu-white small, .mu-black small { text-transform: uppercase; }
.mu-drums .mu-key { font-size: .62rem; color: #8a7a68; }

/* Hover helpers (tooltip.js) */
.mu-tip { position: fixed; z-index: 200; max-width: 260px; padding: 6px 10px; border-radius: var(--radius-sm); pointer-events: none; background: #1d1d21; color: #fff; border: 1px solid #000;
  box-shadow: var(--shadow-md); font-family: var(--font-body); font-size: .85rem; font-weight: 600; line-height: 1.3; text-align: center; }
:root[data-theme="gamey"] .mu-tip { background: #2a0f33; border-color: #9b4f9b; }

/* Sampler: the key of each pad, and the pad mode button next to Clear. */
.sf-key { position: absolute; left: 6px; top: 5px; min-width: 1.5em; padding: 1px 4px; border-radius: 4px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3);
  font: bold .68rem ui-monospace, monospace; color: var(--p8-ink); text-align: center; }
.sf-pad { position: relative; }
#sf-gate[aria-pressed="true"] { background-image: linear-gradient(rgba(41, 173, 255, .3), rgba(41, 173, 255, .3)) !important; border-color: var(--p8-blue); }

/* ---- Music Forge round 4: icon buttons, the Sampler's fixed right pane, the kind banner, the load and replace windows. */
.mu-pbar { display: grid; grid-template-columns: repeat(auto-fit, minmax(2.1rem, 1fr)); gap: 6px; }
.mu-pbar .btn.mu-pb { display: inline-flex; align-items: center; justify-content: center; min-height: 36px; padding: 0; line-height: 0; }
.mu-pb .mu-ico { width: clamp(16px, 1.4vw, 22px); height: clamp(16px, 1.4vw, 22px); }
.sf-actions .btn, .sf-sample-bar .btn, .mu-save .btn, .sf-wave-tools .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45em; }
.sf-actions .mu-ico, .sf-sample-bar .mu-ico, .mu-save .mu-ico, .sf-wave-tools .mu-ico { width: 1.15em; height: 1.15em; }
.sf-right.mu-right { height: 100%; min-height: 0; overflow: hidden; }
.sf-right .sf-recordings { flex: 1 1 0; min-height: 90px; display: flex; flex-direction: column; overflow: hidden; }
.sf-right > :not(.sf-recordings) { flex: none; }
.sf-sample-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.sf-sample-bar .btn { min-height: var(--bar-h); font-size: .78rem; min-width: 0; }
.sf-sample-bar .btn span, .mu-save .btn span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-kindbar { display: flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: var(--radius-md); font-size: .78rem; border: 1px solid; min-width: 0; }
.mu-kindbar b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: inherit; font-family: inherit; font-size: .8rem; }
.mu-kindbar[data-kind="music"] { background: #2b2038; border-color: #b07cd6; color: #f1e8fb; }
.mu-kindbar[data-kind="sfx"] { background: #1d3026; border-color: var(--p8-green); color: #e6f7e8; }
.sf-pad-tools { position: absolute; right: 3px; top: 3px; display: flex; gap: 2px; }
:root .sf-pad-tools .btn { position: static; width: 24px; min-width: 24px; height: 26px; min-height: 26px; padding: 0; font: 13px ui-monospace, monospace; display: inline-flex; align-items: center; justify-content: center; }
.mu-modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 12px; }
.mu-modal-actions .btn { display: inline-flex; align-items: center; gap: .45em; }
.mu-modal-actions .mu-ico, .mu-lp-foot .mu-ico, .mu-rs-save .mu-ico { width: 1.15em; height: 1.15em; }

/* Load patterns from another song. */
.mu-lp { display: grid; grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr); gap: 10px; height: min(46vh, 380px); }
.mu-lp-songs, .mu-lp-list { overflow-y: auto; min-height: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-md); padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.mu-lp-pats { display: flex; flex-direction: column; min-height: 0; gap: 6px; }
.mu-lp-pats .mu-lp-list { flex: 1; }
.mu-lp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mu-lp-song { display: flex; justify-content: space-between; gap: 8px; text-align: left; background: none; color: inherit; border: 2px solid transparent; border-radius: var(--radius-md); padding: 6px 8px; cursor: pointer; font: inherit; }
.mu-lp-song:hover { background: var(--surface-tertiary); }
.mu-lp-song[aria-selected="true"] { border-color: var(--brand-primary); background: var(--surface-tertiary); }
.mu-lp-song b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-lp-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; border: 2px solid transparent; border-radius: var(--radius-md); padding: 3px 6px; }
.mu-lp-row.on { border-color: var(--brand-primary); background: var(--surface-tertiary); }
.mu-lp-row label { display: flex; align-items: center; gap: 8px; min-width: 0; cursor: pointer; }
.mu-lp-row label span { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-lp-row label i { font-style: normal; color: var(--text-secondary); }
.mu-lp-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 10px; }
.mu-lp-foot .btn { display: inline-flex; align-items: center; gap: .45em; }
@media (max-width: 640px) { .mu-lp { grid-template-columns: minmax(0, 1fr); height: 60vh; grid-template-rows: minmax(70px, 28%) minmax(0, 1fr); } }

/* Replace SFX and the Minecraft sounds list. */
.mu-rs-tools { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; }
.mu-rs-tools input[type="search"] { flex: 1 1 220px; min-width: 0; }
.mu-rs-only { display: inline-flex; align-items: center; gap: 6px; font-size: .85rem; }
.mu-rs-table { height: min(44vh, 360px); overflow-y: auto; border: 1px solid var(--border-strong); border-radius: var(--radius-md); }
.mu-rs-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: center; padding: 4px 8px; border-bottom: 1px solid var(--border-light); }
.mu-rs-row.gs { grid-template-columns: minmax(0, 1fr) auto; }
.mu-rs-row.head { position: sticky; top: 0; z-index: 1; background: var(--surface-tertiary); font-weight: 700; font-size: .8rem; }
.mu-rs-row.set { background: color-mix(in srgb, var(--accent-success) 22%, transparent); }
.mu-rs-row.changed { background: color-mix(in srgb, var(--accent-warning) 40%, transparent); }
.mu-rs-game, .mu-rs-with { display: flex; align-items: center; gap: 6px; min-width: 0; }
.mu-rs-game code { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .8rem; }
.mu-rs-with select { flex: 1; min-width: 0; }
.mu-rs-foot { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.mu-rs-warn { display: flex; align-items: center; gap: 8px; margin: 0; padding: 6px 10px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--accent-warning) 35%, transparent); font-size: .85rem; }
.mu-rs-warn .mu-ico { width: 1.3em; height: 1.3em; flex: none; }
.mu-rs-save { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px; align-items: center; }
.mu-rs-save .btn { display: inline-flex; align-items: center; gap: .45em; min-height: 40px; }
.mu-slide { position: relative; display: block; height: 40px; border-radius: var(--radius-full); background: var(--surface-tertiary); border: 1px solid var(--border-strong); overflow: hidden; }
.mu-slide-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .8rem; pointer-events: none; padding-left: 36px; }
.mu-slide input[type="range"] { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 1; background: transparent; -webkit-appearance: none; appearance: none; cursor: grab; }
.mu-slide input[type="range"]::-webkit-slider-runnable-track { height: 100%; background: transparent; }
.mu-slide input[type="range"]::-moz-range-track { height: 100%; background: transparent; }
.mu-slide input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 40px; height: 40px; border-radius: var(--radius-full); background: var(--bad-text); border: 3px solid var(--surface-secondary); box-shadow: var(--shadow-sm); }
.mu-slide input[type="range"]::-moz-range-thumb { width: 34px; height: 34px; border-radius: var(--radius-full); background: var(--bad-text); border: 3px solid var(--surface-secondary); }
.mu-slide input[type="range"]:disabled { cursor: not-allowed; opacity: .5; }
.mu-rs-modal.unlocked .mu-slide { border-color: var(--ok-text); background: color-mix(in srgb, var(--accent-success) 45%, transparent); }
.mu-rs-modal.unlocked .mu-slide input[type="range"]::-webkit-slider-thumb { background: var(--ok-text); }
.mu-rs-modal.unlocked .mu-slide input[type="range"]::-moz-range-thumb { background: var(--ok-text); }
@media (max-width: 640px) { .mu-rs-row { grid-template-columns: minmax(0, 1fr); gap: 4px; } .mu-rs-save { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 850px) {
  .sf-right.mu-right { height: auto; overflow: visible; }
  .sf-right .sf-recordings { flex: none; min-height: 220px; max-height: 360px; }
}

/* ---- Effects as an inventory: square slots in a grid, the picture only (the name is the hover label), the chosen ones lit. */
.mu-fx, .mu-fx-modal { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
.mu-fx .mu-fxb { aspect-ratio: 1; min-height: 0; padding: 0; display: flex; align-items: center; justify-content: center; border-radius: 2px; border: 3px solid;
  border-color: #373737 #fff #fff #373737; background: #8b8b8b; color: #222; box-shadow: none; cursor: pointer; }
.mu-fx .mu-fxb span { font-size: 1.35rem; line-height: 1; pointer-events: none; }
.mu-fx .mu-fxb:hover { background: #a0a0a0; }
.mu-fx .mu-fxb[aria-pressed=true] { background: #d6d6d6; outline: 3px solid #fff; outline-offset: 0; box-shadow: 0 0 0 2px #000; border-color: #373737 #8b8b8b #8b8b8b #373737; position: relative; z-index: 1; }
.mu-fx-modal { grid-template-columns: repeat(auto-fill, minmax(56px, 56px)); gap: 6px; justify-content: center; }
.mu-fx-modal .mu-fxb span { font-size: 1.7rem; }
/* The right pane is as tall as the left one, with Save and Download on the bottom edge whatever is above them. */
.mu-ed > .mu-right { align-self: stretch; min-height: 0; }
.mu-right > .mu-save { margin-top: auto; }
.sf-right .mu-fx { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* ---- Tracker and Sampler: the right pane lines up with the left one.
   Tracker: the Patterns box ends where the note cards end; the effects and Save sit beside the instrument row and the piano.
   Sampler: the Samples box ends where the waveform pane ends, its two buttons sit on the buttons' row, and the effects and
   Save sit beside the pads. To make that fit, the effect icons are smaller (the composer keeps the big ones: no room there). */
@media (min-width: 1101px) {
  .mu-ed { --mu-row-e-h: 38px; --mu-piano-h: 110px; --mu-fx-title-h: 16px; --mu-fx-gap: 4px; }
  .mu-ed[data-mode="tracker"]:not(.sf-ed) { --mu-bottom-h: calc(var(--mu-row-e-h) + var(--space-2) + var(--mu-piano-h)); }
  .mu-ed.sf-ed { --mu-bottom-h: 110px; } /* the height of .sf-pads */
  .mu-ed { --mu-fx-h: calc(var(--mu-bottom-h, 110px) - var(--mu-fx-title-h) - var(--bar-h) - 2 * var(--mu-fx-gap)); }
  .mu-ed[data-mode="tracker"]:not(.sf-ed) .mu-row-e { box-sizing: border-box; height: var(--mu-row-e-h); overflow-y: hidden; }
  .mu-ed[data-mode="tracker"]:not(.sf-ed) .mu-piano { height: var(--mu-piano-h); }
  .mu-ed[data-mode="tracker"]:not(.sf-ed) .mu-right > .mu-fx-title,
  .mu-ed.sf-ed .mu-right > .mu-fx-title { height: var(--mu-fx-title-h); line-height: var(--mu-fx-title-h); font-size: .85rem; margin-bottom: calc(var(--mu-fx-gap) - var(--space-2)); white-space: nowrap; overflow: hidden; }
  .mu-ed[data-mode="tracker"]:not(.sf-ed) .mu-right > .mu-fx,
  .mu-ed.sf-ed .mu-right > .mu-fx { box-sizing: border-box; height: var(--mu-fx-h); margin-bottom: calc(var(--mu-fx-gap) - var(--space-2)); gap: var(--mu-fx-gap); align-content: center; flex: none; }
  /* Tracker: 13 effects in two rows of 7. */
  .mu-ed[data-mode="tracker"]:not(.sf-ed) .mu-right > .mu-fx { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .mu-ed[data-mode="tracker"]:not(.sf-ed) .mu-right > .mu-fx .mu-fxb span { font-size: 1.1rem; }
  /* Sampler: one row, each icon as tall as the row. */
  .mu-ed.sf-ed .mu-right > .mu-fx { grid-template-columns: repeat(6, var(--mu-fx-h)); justify-content: space-between; }
  .mu-ed.sf-ed .mu-right > .mu-fx .mu-fxb span { font-size: 1.15rem; }
}

/* The catalog is a modal: live model on the left, reusable pieces on the right. */
.bb-shell { position: relative; }
.catalog-modal { position: absolute; inset: 0; z-index: 95; display: flex; align-items: center; justify-content: center;
  padding: 14px; box-sizing: border-box; background: #0009; }
.catalog-modal[hidden], #catalog-detail[hidden] { display: none; }
.catalog-shell { width: min(1400px, 100%); height: min(880px, 94%); display: flex; flex-direction: column; gap: 10px;
  min-width: 0; min-height: 0; padding: 14px; box-sizing: border-box; background: var(--panel); color: var(--text);
  border: 2px solid var(--line); border-radius: var(--radius-lg); overflow: hidden; }
.catalog-header { flex: 0 0 auto; }
.catalog-shell h3, .catalog-shell h4 { margin: 0; text-transform: none; }
.catalog-shell p { font-size: .85rem; margin: 6px 0; }
.catalog-workspace { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 1fr); gap: 12px; }
.catalog-stage, .catalog-browser { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.catalog-stage { overflow: hidden; }
.catalog-browser { overflow: hidden; }
.catalog-filters { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; flex: 0 0 auto; }
.catalog-filters input, .catalog-filters select { width: 100%; min-width: 0; box-sizing: border-box; }
.catalog-paint-option { display: flex; align-items: center; gap: 6px; font-size: .82rem; margin-bottom: 8px; }
.catalog-list { flex: 1; min-height: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 110px), 1fr));
  align-content: start; gap: 6px; overflow-y: auto; overflow-x: hidden; padding: 3px; scroll-padding: 3px; }
.catalog-card { display: flex; flex-direction: column; align-items: center; padding: 5px; min-width: 0;
  border: 1px solid var(--line); border-radius: 6px; background: var(--surface); color: inherit; cursor: pointer;
  font: inherit; font-size: .8rem; overflow-wrap: anywhere; }
.catalog-thumbnail { display: block; position: relative; width: 80px; max-width: 100%; aspect-ratio: 1; flex-shrink: 0; }
.catalog-thumbnail img { display: block; width: 100%; height: 100%; }
.catalog-thumbnail::after { content: ""; position: absolute; left: 4px; bottom: 4px; width: 24px; height: 24px;
  background: url("/public/pictures/ai_watermark.png") center / contain no-repeat; pointer-events: none; }
.catalog-card small { font-size: .7rem; opacity: .75; }
.catalog-card.picked { outline: 2px solid var(--action); outline-offset: -2px; }
#catalog-preview { position: relative; width: 100%; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
#catalog-preview canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
#catalog-detail { flex: 0 0 auto; }
.catalog-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.catalog-actions select { max-width: 100%; min-width: 0; }
#catalog-status { font-size: .85rem; flex: 0 0 auto; }
#catalog-status:empty { display: none; }
 .catalog-footer { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; flex: 0 0 auto; }
.catalog-footer .catalog-paint-option { margin: 0 auto 0 0; }
.catalog-footer select { min-width: 0; max-width: 35%; }
.bb-bar { display: flex; flex-wrap: wrap; gap: 6px; padding: 4px 8px; }
.bb-mid { flex: 1 1 260px; gap: 8px; min-width: 0; }
.bb-mid h2 { flex: 0 1 auto; font-size: .9rem; min-width: 75px; }
.bb-mid input { flex: 1 1 160px; min-width: 100px; }
.bb-bar .bb-action { min-height: 34px; padding: 6px 8px; font-size: .82rem; white-space: nowrap; line-height: 1.2; }
#bb-base { min-width: 0; flex: 1 1 160px; max-width: 280px; box-sizing: border-box; }
#bb-fixes { white-space: nowrap; }
@media (max-width: 600px) {
  .bb-bar { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; grid-template-areas: "back save help" "title title title" "catalog base base" "fixes fixes fixes"; }
  #bb-close { grid-area: back; justify-self: start; }
  .bb-mid { grid-area: title; gap: 8px; }
  #bb-save { grid-area: save; }
  #bb-help { grid-area: help; }
  #bb-catalog { grid-area: catalog; }
  #bb-base { grid-area: base; max-width: none; width: 100%; }
  #bb-fixes { grid-area: fixes; }
  .bb-mid h2 { font-size: .8rem; }
  .bb-mid input { flex: 1 1 130px; width: 130px; min-width: 100px; }
  .bb-bar .bb-action { padding: 4px; min-height: 28px; font-size: .7rem; }
  .catalog-modal { padding: 4px; }
  .catalog-shell { padding: 6px; gap: 6px; width: 100%; height: 96%; }
  .catalog-workspace { gap: 6px; }
  .catalog-filters input, .catalog-filters select { padding: 4px; font-size: .7rem; }
  .catalog-paint-option { font-size: .7rem; }
  .catalog-card { padding: 3px; font-size: .7rem; }
  .catalog-footer { gap: 4px; }
  .catalog-footer .btn { font-size: .75rem; padding: 5px; }
  .catalog-footer select { font-size: .7rem; }
}

/* Keep the name and starting model together; saved versions stay beside Save. */
.bb-mid { display: flex; flex: 1 1 300px; min-width: 220px; }
.bb-mid #bb-name { width: 130px; flex: 1 1 130px; }
.bb-mid #bb-base { grid-area: auto; width: 160px; flex: 1 1 160px; max-width: 210px; }
#bb-history { min-width: 0; max-width: 125px; width: 110px; padding: 6px; font-size: .82rem; }
#bb-animation-panel[hidden] { display: none; }
#animation-preview { position: relative; flex: 1 1 0; min-width: 0; min-height: 0; overflow: hidden; }
#animation-preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.animation-options { overflow-y: auto; gap: 10px; }
.animation-options label { display: flex; flex-direction: column; gap: 4px; font-size: .85rem; }
.animation-options fieldset label, .animation-options label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
.animation-options select, .animation-options input[type=number] { min-width: 0; width: 100%; box-sizing: border-box; }
.animation-options fieldset { min-width: 0; margin: 0; padding: 6px; }
#animation-status { font-size: .85rem; flex: 0 0 auto; }
.bb-history-confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
@media (max-width: 600px) {
  .bb-bar { grid-template-columns: minmax(0, 1fr) auto minmax(0, 100px) auto;
    grid-template-areas: "back save history help" "model model model model" "parts fixes animations animations"; }
  .bb-mid { grid-area: model; min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .bb-mid #bb-name, .bb-mid #bb-base { min-width: 0; width: 100%; max-width: none; }
  #bb-catalog { grid-area: parts; }
  #bb-fixes { grid-area: fixes; }
  #bb-animations { grid-area: animations; }
  #bb-history { grid-area: history; width: 100%; font-size: .7rem; padding: 4px; }
  .animation-options { gap: 6px; }
  .animation-options label, .animation-options .btn, .animation-options select { font-size: .7rem; padding: 3px; }
}

#bb-animation-panel .animation-footer { justify-content: flex-end; }

.bb-shell { width: 100%; height: 100%; min-width: 0; min-height: 0; }
.animation-options { overflow-x: hidden; overflow-wrap: anywhere; }
.animation-options fieldset, .animation-options legend { max-width: 100%; box-sizing: border-box; }
.animation-options input[type=checkbox] { flex-shrink: 0; }
@media (max-width: 600px) {
  .animation-options legend, .animation-options label, .animation-options select { font-size: .65rem; }
}
@media (max-width: 600px) {
  #bb-animation-panel .catalog-workspace { grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); }
}

/* Music Forge draft recovery (app/music_draft.js): the Saved / Draft badge by the name box and the "restore it?" bar */
.mu-draftstate { font-size: calc(.75rem * var(--display-scale, 1)); padding: 2px 10px; border-radius: var(--radius-full); white-space: nowrap;
  background: var(--surface-tertiary); color: var(--text-secondary); }
.mu-draftstate[data-state="draft"] { background: color-mix(in srgb, var(--accent-primary, #c9a227) 25%, var(--surface-tertiary)); color: var(--text-primary); }
.mu-draftstate[data-state="too_big"], .mu-draftstate[data-state="unavailable"] { background: var(--accent-danger); color: #fff; }
.mu-draftbar { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; padding: var(--space-3) var(--space-4); margin-bottom: var(--space-3);
  border: 2px solid var(--border-strong); border-radius: var(--radius-md, 8px); background: var(--surface-secondary, var(--surface-tertiary)); }
.mu-ed > .mu-draftbar { grid-column: 1 / -1; margin-bottom: 0; }
.mu-ed.mu-has-draft { grid-template-rows: auto auto minmax(0, 1fr); }
@media (max-width: 1100px) { .mu-ed.mu-has-draft { grid-template-rows: none; } }

/* ---- Sampler round 9: sixteen pads in two rows, copy / paste, and the slicer.
   The pads take a third of the waveform's height (the waveform pane and the pads share the column 3 : 1). */
.sf-pads { grid-template-columns: repeat(8, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); height: 150px; gap: 5px; }
.sf-pad { padding-top: 18px; }
.sf-pad b { font-size: 1rem; }
.sf-pad span { font-size: .65rem; }
@media (min-width: 1101px) {
  .sf-left > .sf-wave-pane { flex: 3 1 0; }
  .sf-pads { height: auto; flex: 1 1 0; min-height: 124px; }
}
@media (max-width: 850px) {
  .sf-pads { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(0, 1fr)); height: 400px; }
}
.sf-wave-tools .btn[aria-pressed="true"] { background: var(--p8-red); color: #fff; }
.sf-wave-tools .btn:disabled { opacity: .5; }
.sf-slice-tools { display: inline-flex; align-items: center; gap: 4px; }
.sf-slice-tools[hidden] { display: none; }
#sf-duration { margin-inline-start: auto; }

/* Paste: after Copy selection every pad shows it is waiting (dashed); the first press makes one blink with the paste icon. */
.sf-pad-paste { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; border-radius: 8px; pointer-events: none;
  background: color-mix(in srgb, var(--p8-red) 55%, transparent); color: #fff; }
.sf-pad-paste .mu-ico { width: 1.9em; height: 1.9em; }
.sf-pad-wrap[data-paste="ready"] .sf-pad { border-style: dashed; border-color: var(--p8-blue); }
.sf-pad-wrap[data-paste="armed"] .sf-pad { border-color: var(--p8-red); }
.sf-pad-wrap[data-paste="armed"] .sf-pad-paste { display: flex; animation: sf-blink .8s ease-in-out infinite; }
@keyframes sf-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .sf-pad-wrap[data-paste="armed"] .sf-pad-paste { animation: none; } }

/* Choosing pads for the slices: open pads are dashed yellow; a chosen pad shows its number in the order it was pressed. */
.sf-pad-wrap[data-pick="open"] .sf-pad { border-style: dashed; border-color: var(--p8-yellow); }
.sf-pad-wrap[data-pick="chosen"] .sf-pad { border-color: var(--p8-yellow); background: color-mix(in srgb, var(--p8-yellow) 22%, var(--p8-bg)); }
.sf-pad-badge { position: absolute; right: 5px; bottom: 5px; min-width: 1.5em; padding: 0 5px; border-radius: 999px; background: var(--p8-yellow); color: #1a1a1a;
  font: bold .75rem ui-monospace, monospace; text-align: center; pointer-events: none; }
.sf-pad-badge:empty { display: none; }

/* The slice lines: numbered, over the waveform, each one a wide grab area around a thin line. */
#sf-slices { position: absolute; inset: 0 0 24px 0; pointer-events: none; }
.sf-slice { position: absolute; top: 0; bottom: 0; width: 18px; margin-left: -9px; pointer-events: auto; cursor: ew-resize; touch-action: none; outline: none; }
.sf-slice::before { content: ""; position: absolute; left: 8px; width: 2px; top: 0; bottom: 0; background: var(--p8-orange); }
.sf-slice b { position: absolute; left: 11px; top: 2px; min-width: 1.4em; padding: 0 4px; border-radius: 3px; background: var(--p8-orange); color: #1a1a1a;
  font: bold .72rem ui-monospace, monospace; text-align: center; line-height: 1.35; }
.sf-slice:hover::before, .sf-slice:focus-visible::before { width: 4px; left: 7px; box-shadow: 0 0 0 2px color-mix(in srgb, var(--p8-orange) 40%, transparent); }
/* A long hint ("Press the pads the slices should go to...") stays inside the button row instead of making it taller and moving the waveform. */
.sf-actions .facts { font-size: .72rem; line-height: 1.15; max-height: var(--bar-h); overflow: hidden; }

/* Platform setup keeps each choice and its explanation together on small screens. */
#platform-work { width: 100%; max-width: none; }
#platform-work .platform-step-nav { display: grid; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .5rem; margin: 0 0 1rem; }
#platform-work .platform-step-nav .btn { display: inline-flex; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; align-items: center; justify-content: center; text-align: center; line-height: 1.25; white-space: normal; overflow-wrap: anywhere; }
@media (max-width: 900px) { #platform-work .platform-step-nav { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { #platform-work .platform-step-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 360px) { #platform-work .platform-step-nav { grid-template-columns: minmax(0, 1fr); } }
#platform-work .platform-actions { gap: .5rem; margin: .5rem 0 1rem; padding: 2px 2px 6px; }
#platform-work .platform-actions .btn { max-width: 100%; white-space: normal; }
#platform-work #platform-message { flex: 1 1 18rem; min-width: 0; margin: 0 .25rem; }
#platform-work #platform-message:empty { display: none; }
#platform-work .platform-runtime-card h3 { margin-top: 0; }
.platform-option { margin: 1.25rem 0; padding-bottom: 1rem; border-bottom: 1px solid var(--line, #d8d8d8); }
.platform-option > label { display: block; margin-bottom: .45rem; }
.platform-option > input:not([type="checkbox"]), .platform-option > select { box-sizing: border-box; width: 100%; max-width: none; }
.platform-option .facts { max-width: none; line-height: 1.55; margin: .5rem 0; }
#platform-work details { margin: 1rem 0; }
#platform-work [aria-current="step"] { outline: 2px solid currentColor; outline-offset: 2px; }

.server-permissions { display: flex; flex-wrap: wrap; gap: 2px; align-items: center; }
.permission-status { display: inline-flex; border-radius: 4px; }
.permission-status:focus-visible { outline: 2px solid var(--grass); outline-offset: 2px; }
.permission-icon { position: relative; display: inline-flex; width: 22px; height: 22px; align-items: center; justify-content: center; flex-shrink: 0; }
.permission-icon img { image-rendering: pixelated; object-fit: contain; }
.permission-icon.is-blocked::before { content: ""; position: absolute; inset: 1px; border: 2px solid #ff5151; border-radius: 50%; z-index: 1; }
.permission-icon.is-blocked::after { content: ""; position: absolute; width: 22px; height: 2px; background: #ff5151; transform: rotate(-45deg); box-shadow: 0 0 1px #300; z-index: 2; }
.server-permission-fields { margin: 14px 0; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; min-width: 0; }
.server-permission-fields legend { padding-inline: 6px; font-weight: bold; }
.permission-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 12px; }
.permission-options .check { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.permission-options input { accent-color: var(--grass); }
.server-permissions .permission-icon { width: 18px; height: 20px; }
.server-permissions .permission-icon img { width: 16px; height: 16px; }
.server-permissions .permission-icon.is-blocked::before { inset: 1px 0; }
.server-permissions .permission-icon.is-blocked::after { width: 20px; }