.headless-canvas { display: block; outline: none; touch-action: none; }
.headless-canvas:focus-visible { outline: 2px solid #ffe9a9; outline-offset: -2px; }
.headless-roster { width:100%; border-collapse:collapse; table-layout:fixed; font:600 13px/1.35 "Segoe UI",Roboto,system-ui,sans-serif; font-variant-numeric:tabular-nums; color:#eadbc6; }
.headless-roster th { color:#c9ad81; font-size:10px; text-align:left; padding:3px 5px 7px; }
.headless-roster td { padding:7px 5px; border-top:1px solid #88643f55; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.headless-roster th:first-child { width:58%; }
.headless-roster th:nth-child(2) { width:21%; }
.headless-roster th:last-child,.headless-roster td:last-child { text-align:right; color:#ffe5a2; }
.headless-roster .is-you { background:#efd18618; color:#fff1cf; }
@font-face { font-family: Bungee; src: url('./assets/fonts/Bungee.ttf?v=5441637e') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: NunitoSans; src: url('./assets/fonts/NunitoSans-Bold.ttf?v=be7ca2e4') format('truetype'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Grenze Gotisch'; src: url('./assets/fonts/GrenzeGotisch-Bold.ttf?v=d1439423') format('truetype'); font-weight: 400 700; font-display: swap; }
@font-face { font-family: 'Pirata One'; src: url('./assets/fonts/PirataOne.ttf?v=7895745e') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Lilita One'; src: url('./assets/fonts/LilitaOne.ttf?v=942fa84d') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Titan One'; src: url('./assets/fonts/TitanOne.ttf?v=45b5fd45') format('truetype'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Bangers'; src: url('./assets/fonts/Bangers.ttf?v=93dfcc23') format('truetype'); font-weight: 400; font-display: swap; }
.headless-results-art { height: 100%; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 18px; border: 1px solid #88643f; border-radius: 6px; background: linear-gradient(90deg,#241a29e8,#392735b8,#241a29e8),url('./assets/ember-valley.png?v=e79874c3') center 55%/cover; color: #ffe5ac; }
.headless-results-art img { width: 43px; height: 55px; object-fit: contain; }
.headless-results-art strong { display: block; font: 16px Bungee,system-ui,sans-serif; }
.headless-results-art span { display: block; text-align: center; font: 700 14px NunitoSans,system-ui,sans-serif; color: #e9cb99; }

.headless-loadout-preview { display:block; width:100%; height:100%; border-radius:8px; background:linear-gradient(#291d2b66,#291d2baa),url('./assets/ember-valley.png?v=e79874c3') center/cover; }

[data-mm-part="preview"] { border:1px solid #88643f; border-radius:8px; }

[data-mm-part="row"] button[aria-pressed] { height:80px; min-height:80px; }

/* Head portraits identify the rider; retain their accessible labels. */
[data-mm-part="row"]:first-child button[aria-pressed] > span:last-child {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap;
}

/* Use the complete sprite rather than the avatar painter's face zoom. */
[data-mm-part="row"]:first-child button[aria-pressed] > span:first-child { width:64px; height:64px; flex-shrink:0; margin:auto; }
[data-mm-part="row"]:first-child button[aria-pressed] img { position:static; width:100%; height:100%; transform:none; object-fit:contain; }
[data-mm-part="row"]:first-child button[aria-pressed] canvas { display:none; }

.headless-canvas { transition:filter 450ms ease-out; }
.headless-canvas.is-respawning { filter:blur(3px); }
@media (prefers-reduced-motion:reduce) { .headless-canvas { transition:none; } }

/* Parchment racks and dark leather cards, using the native carousel parts. */
[data-mm-part="rows"] { padding:0; border-radius:8px; background:#e4c184; }
[data-mm-part="row"] { padding:0 5px; border-radius:6px; background:#69402022; color:#472b18; }
[data-mm-part="row"] > div:first-child, [data-mm-part="row"] > div:first-child span { color:#472b18; text-shadow:0 1px #ffe9b4; font-weight:800; }
[data-mm-part="row"] button { border:2px solid #77502b; background:linear-gradient(#754b2d,#402a20); color:#fff0c5; box-shadow:inset 0 1px #b9874d,0 2px 2px #4a291633; }
[data-mm-part="row"] button[aria-pressed] { background:radial-gradient(ellipse at 50% 30%,#654332,#2e211c); border-radius:7px; }
[data-mm-part="row"] button[aria-pressed="true"] { border-color:#ffe095; background:radial-gradient(ellipse at 50% 35%,#9b6429,#49311f); box-shadow:inset 0 0 0 1px #f6bb4d,0 0 8px #e9a532; }
[data-mm-part="row"] button:focus-visible { outline:3px solid #fff6d5; outline-offset:2px; }
[data-mm-part="row"] button:disabled { opacity:.45; }
[data-mm-part="row"] button[aria-pressed] > span:last-child { color:#fff0c5; }
[data-mm-part="preview"] { overflow:hidden; box-sizing:border-box; border:5px ridge #946334; border-radius:8px; box-shadow:0 2px 5px #28170888; }
.headless-loadout-preview { border-radius:3px; }

.headless-roster { width:252px; max-width:calc(100vw - 32px); background:#30241eef; border:1px solid #88643f; border-radius:6px; }
.headless-roster th { padding-top:8px; }
[data-mm-part="chassis"] button[aria-pressed]:has(img) > span:last-child { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
[data-mm-part="chassis"] button[aria-pressed]:has(img) img { position:static; width:100%; height:100%; transform:none; object-fit:contain; }
[data-mm-part="chassis"] button[aria-pressed]:has(img) canvas { display:none; }
.headless-entry-preview { height:100%; min-height:140px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:16px; background:linear-gradient(#291d2b66,#291d2baa),url('./assets/ember-valley.png?v=e79874c3') center/cover; }
.headless-entry-preview img:first-child { width:100px; height:100px; object-fit:contain; padding:12px; border:3px solid; border-radius:50%; background:#2e211ccc; }
.headless-entry-preview img:last-child { width:170px; max-height:70px; object-fit:contain; }

[data-mm-part="chassis"], [data-mm-part="slots"], [data-mm-part="catalog"] { background:#e4c184; color:#472b18; border-radius:7px; padding:8px; }
[data-mm-part="chassis"] button[aria-pressed]:has(img), [data-mm-part="slots"] button, [data-mm-part="catalog"] button { border:2px solid #77502b; border-radius:7px; color:#fff0c5; background:radial-gradient(ellipse at 50% 30%,#654332,#2e211c); }
[data-mm-part="chassis"] button[aria-pressed="true"]:has(img), [data-mm-part="catalog"] button[aria-pressed="true"] { border-color:#ffe095; box-shadow:inset 0 0 0 1px #f6bb4d,0 0 8px #e9a532; }
[data-mm-part="chassis"] button[aria-pressed]:has(img) > span:first-child { width:64px; height:64px; flex-shrink:0; margin:auto; }
[data-mm-part="identity"] { color:#472b18; }
.headless-entry-preview { width:100%; }

[data-mm-part="chassis"] div:has(> button[aria-pressed] img) { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
[data-mm-part="chassis"] button[aria-pressed]:has(img) { width:100%; height:80px; min-height:80px; padding:4px; box-sizing:border-box; }
[data-mm-part="chassis"] button[aria-pressed]:has(img) img { transform:none !important; width:100% !important; height:100% !important; }
[data-mm-part="identity"] span { color:#472b18; }
/* The engine keeps accessible names; reveal the same labels on hover/focus. */
[data-mm-part="row"] button[aria-pressed], [data-mm-part="chassis"] button[aria-pressed]:has(img) { position:relative; }
[data-mm-part="row"] button[aria-pressed]:is(:hover,:focus-visible) > span:last-child,
[data-mm-part="chassis"] button[aria-pressed]:has(img):is(:hover,:focus-visible) > span:last-child {
 position:absolute; inset:auto 2px 2px; width:auto; max-width:none; height:auto; padding:3px 4px; margin:0; transform:none; text-align:center; clip-path:none; white-space:normal; overflow:visible;
 background:#261c16f5; color:#fff0c5; border-radius:3px; font:700 11px/1.2 NunitoSans,system-ui,sans-serif; z-index:1;
}
/* World switcher chip (bottom-left, placed in the chat bubble's row by game.js) and its world list. */
.headless-corner { position:absolute; left:12px; z-index:2; display:flex; gap:8px; align-items:flex-end; }
.headless-world-chip { position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:1px; min-width:44px; min-height:44px; padding:7px 14px 8px; border:1px solid #88643f; border-radius:8px; background:#392a27e6; color:#fff0cf; cursor:pointer; text-align:left; box-shadow:0 2px 10px #0006; }
.headless-world-chip strong { font:700 16px/1.1 NunitoSans,system-ui,sans-serif; letter-spacing:.02em; color:#efd186; }
.headless-world-chip span { font:600 11px/1.2 NunitoSans,system-ui,sans-serif; color:#d8bf96; }
.headless-world-chip:hover, .headless-world-chip:focus-visible { border-color:#efd186; outline:none; }
.headless-world-list { display:flex; flex-direction:column; gap:6px; min-width:min(320px,70vw); }
.headless-world-row { min-height:44px; padding:8px 14px; border:1px solid #88643f; border-radius:8px; background:#513b2e; color:#fff0cf; font:700 16px/1.2 NunitoSans,system-ui,sans-serif; text-align:left; cursor:pointer; }
.headless-world-row:hover:not(:disabled), .headless-world-row:focus-visible { border-color:#efd186; outline:none; }
.headless-world-row:disabled { opacity:.65; cursor:default; }
.headless-world-note { margin:6px 2px 0; color:#d8bf96; font:600 13px/1.35 NunitoSans,system-ui,sans-serif; }
.headless-world-chip[hidden] { display:none; }
.headless-hq-chip span { color:#efd186; }
.headless-hq-stats { color:#d8bf96; font:600 12px/1.45 NunitoSans,system-ui,sans-serif; }

/* $ tuning panel (outside the stage; local to this browser). */
.headless-tune { position:fixed; top:12px; right:12px; z-index:2147483000; width:360px; max-width:calc(100vw - 24px); max-height:calc(100vh - 24px); overflow:auto; box-sizing:border-box; padding:12px; border:1px solid #88643f; border-radius:10px; background:#241a16f7; color:#f3e2c4; font:600 12px/1.35 NunitoSans,system-ui,sans-serif; box-shadow:0 10px 30px #0009; }
.headless-tune-head { position:sticky; top:-12px; display:flex; gap:6px; align-items:center; margin:-12px -12px 8px; padding:10px 12px; background:#241a16; border-bottom:1px solid #5d4330; }
.headless-tune-head strong { flex:1; font:700 15px NunitoSans,system-ui,sans-serif; color:#efd186; }
.headless-tune button { min-height:30px; padding:4px 10px; border:1px solid #88643f; border-radius:6px; background:#513b2e; color:#fff0cf; font:700 12px NunitoSans,system-ui,sans-serif; cursor:pointer; }
.headless-tune button:hover, .headless-tune button:focus-visible { border-color:#efd186; outline:none; }
.headless-tune-note { margin:0 0 8px; color:#cdb48e; font-weight:600; }
.headless-tune fieldset { margin:0 0 10px; padding:6px 8px 8px; border:1px solid #5d4330; border-radius:8px; }
.headless-tune legend { padding:0 4px; color:#efd186; font-weight:800; }
.headless-tune-row { display:grid; grid-template-columns:1fr 120px 44px; gap:6px; align-items:center; margin:4px 0; }
.headless-tune-row input[type=range] { width:100%; accent-color:#e9a532; }
.headless-tune-row input[type=color] { grid-column:2 / span 2; width:100%; height:24px; padding:0; border:1px solid #88643f; border-radius:4px; background:none; }
.headless-tune-row output { text-align:right; font-variant-numeric:tabular-nums; color:#fff0cf; }
.headless-tune-row.is-fonts { grid-template-columns:1fr; }
.headless-tune-font { display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; }
.headless-tune-font b { font-size:22px; font-weight:400; line-height:1.15; color:#ffe9a9; }
.headless-tune-font small { color:#cdb48e; font-weight:600; }
.headless-tune-font.is-on { border-color:#ffe095; box-shadow:inset 0 0 0 1px #f6bb4d; background:#6b4a2b; }
.headless-tune-json { display:block; width:100%; box-sizing:border-box; height:160px; margin:0 0 6px; padding:6px; border:1px solid #5d4330; border-radius:6px; background:#17110e; color:#f3e2c4; font:12px/1.35 ui-monospace,Menlo,Consolas,monospace; resize:vertical; }