/* Tweetboy surfaces. Everything that opens lives inside .shell in one stack
   (game, dim, drawer, status) and moves with these tokens. Only transform,
   opacity and clip-path animate: the emulator iframe shares the main thread. */
:root {
  --dialog-raised: #352b40;
  --dialog-border: #a28bb338;
  --dialog-text: #f1eaf7;
  --dialog-muted: #b9aac8;
  --dialog-accent: #c6b2e1;
  --dialog-danger: #a94260;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in: cubic-bezier(.4, 0, 1, 1);
  --ease-pop: cubic-bezier(.34, 1.45, .64, 1);
  --t-in: 300ms;
  --t-out: 200ms;
  --t-ui: 180ms;
  --hold-ms: 900ms;
}

.shell {
  /* Deck height is 88% of the shell width at a 320:274 aspect ratio. */
  --deck-h: calc(75.35cqw + var(--bottom-clearance));
  --peek-h: calc(118px + var(--bottom-clearance));
  --notch-w: clamp(56px, 15cqw, 72px);
}

/* ---------- Hardware that stays on top ---------- */
.cartridge-slot, .keyboard-shortcut, .sound-toggle, .me-chip { z-index: 7; }
.keyboard-shortcut { transition: background-color var(--t-ui), color var(--t-ui); }
.console[data-surface=open][data-pane=stats] .keyboard-shortcut { background: #493958; color: #fff; }
.presence-dot { flex: none; transition: background-color var(--t-ui), box-shadow var(--t-ui); }
.keyboard-shortcut.offline .presence-dot { background: #807690; box-shadow: none; }
/* The drawer's close button takes this corner in the layouts that cover the header. */
.me-chip {
  position: absolute; right: 2.8%; top: 4px; max-width: 27%; height: calc(var(--header-height) - 8px);
  display: flex; align-items: center; gap: 5px; padding: 0 9px 0 7px;
  border: 0; border-radius: 7px; background: #2b2235; color: #d9cde6;
  font: 600 clamp(8px, 2.8cqw, 11px)/1 system-ui; white-space: nowrap;
  transition: background-color var(--t-ui), color var(--t-ui);
}
.me-chip span { overflow: hidden; text-overflow: ellipsis; }
/* Before you own one, the swatch shows every color; after, it is yours. */
.me-swatch {
  flex: none; width: 9px; height: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px #ffffff40;
  background: var(--me-swatch, conic-gradient(#8571db, #58a6de, #52b781, #d4a550, #dc78b4, #8571db));
}
.me-chip:hover, .console[data-surface=open][data-pane=personal] .me-chip { background: #493958; color: #fff; }
.console:not([data-direction=sheet])[data-surface=open] .me-chip { visibility: hidden; }
@container console (max-width: 220px) { .me-chip { padding: 0 6px; } .me-chip span { display: none; } }
.slot-eject { display: inline-block; transition: transform var(--t-in) var(--ease-out); }
.console[data-surface=open][data-pane=carts] .slot-eject { transform: rotate(180deg); }
.deck, .deck::before, .deck::after { transition: filter var(--t-in) var(--ease-out); }
.console:is([data-direction=tray], [data-direction=sheet])[data-surface=open]:not([data-remap=on]):not([data-detent=peek]) .deck { filter: brightness(.5) saturate(.7); }

/* ---------- Game layer ---------- */
.screen { transition: transform var(--t-in) var(--ease-out); }
.console[data-surface=open]:not([data-remap=on]) .screen { transform: scale(.96); }
.dim {
  position: absolute; inset: 0; z-index: 3;
  background: #07050c; opacity: 0; pointer-events: none;
  transition: opacity var(--t-in) var(--ease-out);
}
.console.is-dimmed .dim { opacity: .62; }

.veil {
  position: absolute; inset: 0; z-index: 3;
  display: grid; place-content: center; justify-items: center; gap: 9px;
  padding: 0 14px; border: 0; background: none; color: #fff; text-align: center;
  opacity: 0; visibility: hidden;
  transition: opacity var(--t-out) var(--ease-in), visibility 0s linear var(--t-out);
}
.veil.on { opacity: 1; visibility: visible; transition: opacity var(--t-in) var(--ease-out), visibility 0s; }
.veil-badge {
  width: 40px; aspect-ratio: 1; border-radius: 50%;
  display: grid; place-items: center; background: #ffffff22;
  transform: scale(.8); transition: transform var(--t-in) var(--ease-pop);
}
.veil.on .veil-badge { transform: none; }
.veil-badge svg { width: 20px; height: 20px; }
.veil b { font: 600 16px/1.2 system-ui; }
.veil small { max-width: 30ch; font: 12px/1.4 system-ui; color: #d8cfe4; }
.veil-action {
  margin-top: 3px; padding: 6px 14px; border-radius: 999px;
  background: var(--dialog-accent); color: #261d31; font: 650 11px/1 system-ui;
}

/* ---------- Status: LCD toast, or the notch pill ---------- */
.toast {
  position: absolute; z-index: 6; left: 50%; bottom: calc(var(--deck-h) + 10px);
  width: max-content; max-width: 86%; padding: 8px 12px; border-radius: 20px;
  background: #171322eb; color: #fff; font: 11px/1.3 system-ui; text-align: center;
  pointer-events: none; opacity: 0; transform: translate(-50%, 6px);
  transition: opacity var(--t-out) var(--ease-in), transform var(--t-out) var(--ease-in);
}
.toast.show {
  opacity: 1; transform: translate(-50%, 0);
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-in) var(--ease-out);
}
.toast.over-menu { background: var(--dialog-raised); box-shadow: 0 0 0 1px var(--dialog-border), 0 6px 16px #0009; }
.console:is([data-direction=hybrid], [data-direction=tray]) .toast:not(.over-menu) {
  top: -1px; bottom: auto; height: calc(var(--header-height) + 26px);
  min-width: calc(var(--notch-w) + 48px); max-width: 88%;
  padding: var(--header-height) 16px 0;
  border: 1px solid #514759; border-top: 0; border-radius: 0 0 16px 16px;
  background: linear-gradient(#332b3c, #211a2a 70%); color: #efe7f8;
  font: 600 11px/25px system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: 1; visibility: hidden; transform: translateX(-50%);
  clip-path: inset(0 calc(50% - var(--notch-w) / 2) 26px round 0 0 12px 12px);
  transition: clip-path var(--t-out) var(--ease-in), visibility 0s linear var(--t-out);
}
.console:is([data-direction=hybrid], [data-direction=tray]) .toast.show:not(.over-menu) {
  visibility: visible; clip-path: inset(0 0 0 round 0 0 16px 16px);
  transition: clip-path var(--t-in) var(--ease-out), visibility 0s;
}

/* ---------- Drawer ---------- */
.surface {
  position: absolute; z-index: 5; inset: 0 0 var(--deck-h);
  overflow: hidden; overflow: clip; pointer-events: none;
}
.console[data-direction=sheet] .surface { bottom: 0; }
.drawer {
  position: absolute; inset: 0; outline: 0;
  pointer-events: auto; visibility: hidden;
  color: var(--dialog-text); font-family: system-ui, sans-serif;
  background: linear-gradient(#2d2536, #201a29 40%, #1a1521);
  clip-path: inset(0 round 0);
  transition: transform var(--t-out) var(--ease-in), clip-path var(--t-out) var(--ease-in), visibility 0s linear var(--t-out);
}
.console[data-from=seam] .drawer, .console[data-from=bottom] .drawer { transform: translateY(100%); }
.console[data-from=notch] .drawer {
  clip-path: inset(0 calc(50% - var(--notch-w) / 2) calc(100% - var(--header-height)) round 0 0 12px 12px);
}
.console:is([data-from=seam], [data-from=bottom]) .drawer { box-shadow: 0 -6px 18px #0006, inset 0 1px 0 #ffffff14; }
.console[data-surface=open]:not([data-remap=on]) .drawer {
  visibility: visible; transform: none; clip-path: inset(0 round 0);
  transition: transform var(--t-in) var(--ease-out), clip-path var(--t-in) var(--ease-out), visibility 0s;
}
/* The spread fills the corner cutouts with bezel black so the shoulders never show; clip-path trims the rest. */
.console[data-direction=sheet] .drawer { --sheet-radius: 18px; border-radius: var(--sheet-radius) var(--sheet-radius) 0 0; box-shadow: 0 0 0 var(--sheet-radius) #000, inset 0 1px 0 #ffffff14; }
.console[data-direction=sheet][data-surface=open]:not([data-remap=on]) .drawer { transform: translateY(calc(100% - var(--deck-h))); }
/* Full height stops under the header so the notch never covers the tabs. */
.console[data-direction=sheet][data-surface=open][data-detent=full]:not([data-remap=on]) .drawer { transform: translateY(var(--top-space)); }
.drawer.dragging, .drawer.instant, .drawer.instant *, .drawer.instant ::before, .drawer.settle *, .drawer.settle ::before { transition: none !important; }

.drawer-inner {
  container: drawer / size;
  display: flex; flex-direction: column; height: 100%;
  opacity: 0; transition: opacity 120ms var(--ease-in);
}
.console[data-surface=open] .drawer-inner { opacity: 1; transition: opacity 220ms var(--ease-out) 60ms; }
.console[data-direction=sheet] .drawer-inner { height: var(--deck-h); }
.console[data-direction=sheet][data-detent=full] .drawer-inner { height: calc(100% - var(--top-space)); }
/* Peek holds one row of controls, so the D-pad and buttons above stay visible as the live preview. */
.console[data-direction=sheet][data-surface=open][data-detent=peek]:not([data-remap=on]) .drawer { transform: translateY(calc(100% - var(--peek-h))); }
.console[data-direction=sheet][data-detent=peek] .drawer-inner { height: var(--peek-h); }

.drawer-strip { position: relative; flex: none; height: var(--top-space); }
.console[data-direction=sheet] .drawer-strip { height: 26px; cursor: grab; touch-action: none; }
.drawer-grip { display: none; }
.console[data-direction=sheet] .drawer-grip {
  display: block; position: absolute; left: 50%; top: 10px;
  width: 36px; height: 4px; margin-left: -18px; border-radius: 2px; background: #ffffff3d;
}
.drawer-close {
  position: absolute; right: 2.8%; top: 4px;
  width: calc(var(--header-height) - 8px); height: calc(var(--header-height) - 8px); padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%;
  background: #28202f; color: #bfb2d0; font: 17px/1 system-ui;
  transition: background-color var(--t-ui), color var(--t-ui);
}
.drawer-close:hover { background: #493958; color: #fff; }
.console[data-direction=sheet] .drawer-close { top: 3px; width: 20px; height: 20px; font-size: 15px; }

.tabs { flex: none; display: flex; align-items: center; gap: 6px; margin: 0 10px 8px; }
.tab-shoulder {
  flex: none; width: 24px; height: 20px; padding: 0; border: 0;
  border-radius: 7px 7px 4px 4px; background: linear-gradient(#efedf4, #c9c4d6);
  color: #5d5470; font: 800 9px/1 system-ui; box-shadow: inset 0 -1px 0 #0003;
  transition: transform 90ms, filter 90ms;
}
.tab-shoulder.pressed, .tab-shoulder:active { transform: scale(.94); filter: brightness(.85); }
.tab-track { position: relative; flex: 1; min-width: 0; display: flex; padding: 3px; border-radius: 10px; background: #120e18a6; }
.tab-track::before {
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: calc((100% - 6px) / var(--tab-count, 4));
  border-radius: 7px; background: #776191; box-shadow: 0 1px 3px #0005;
  transform: translateX(calc(var(--tab-index, 0) * 100%));
  transition: transform var(--t-in) var(--ease-out);
}
.tab-track [role=tab] {
  position: relative; flex: 1; min-width: 0; padding: 7px 2px; border: 0; background: none;
  color: #aa9bbf; font: 600 11px/1 system-ui; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: color var(--t-ui);
}
.tab-track [role=tab][aria-selected=true] { color: #fff; }

.panes { position: relative; flex: 1; min-height: 0; display: grid; }
.pane {
  grid-area: 1 / 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none;
  padding: 2px 12px 16px;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 16px), transparent);
  mask-image: linear-gradient(#000 calc(100% - 16px), transparent);
  opacity: 0; visibility: hidden; transform: translateX(14px);
  transition: opacity 120ms var(--ease-in), transform var(--t-ui) var(--ease-in), visibility 0s linear var(--t-ui);
}
.pane::-webkit-scrollbar { display: none; }
.pane[data-pos=before] { transform: translateX(-14px); }
.pane[data-pos=active] {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-ui) var(--ease-out) 40ms, transform var(--t-in) var(--ease-out), visibility 0s;
}

/* ---------- Focus: the cursor ---------- */
.drawer :focus { outline: none; }
.drawer :focus-visible, .drawer[data-nav] :focus { outline: 2px solid var(--dialog-accent); outline-offset: 2px; }
.drawer .row:focus-visible, .drawer[data-nav] .row:focus { outline-offset: -2px; }

/* ---------- Rows ---------- */
.rows { display: grid; gap: 2px; }
.row {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 34px;
  padding: 7px 10px 7px 14px; border: 0; border-radius: 9px; background: none;
  color: var(--dialog-text); font: 600 12.5px/1.2 system-ui; text-align: left;
  transition: background-color var(--t-ui);
}
.row svg { flex: none; width: 16px; height: 16px; color: var(--dialog-muted); }
.row em, .row kbd { margin-left: auto; font: 500 10.5px/1 var(--mono); font-style: normal; color: var(--dialog-muted); white-space: nowrap; }
.row kbd { padding: 3px 6px; border: 1px solid #83728f; border-radius: 4px; background: #231b30; color: #e9e0f3; }
.row.listening kbd { background: #7b5bac; border-color: #fff; }
.row:hover:not(:disabled) { background: #ffffff0e; }
.row::before {
  content: ""; position: absolute; left: 4px; top: 50%; width: 5px; height: 8px; margin-top: -4px;
  background: currentColor; clip-path: polygon(0 0, 100% 50%, 0 100%);
  opacity: 0; transform: translateX(-3px);
  transition: opacity var(--t-ui), transform var(--t-ui) var(--ease-out);
}
.drawer[data-nav] .row:focus::before { opacity: 1; transform: none; }
.row-primary, .row-primary:hover:not(:disabled) { background: var(--dialog-accent); color: #261d31; }
.row-primary svg { color: #261d31; }
.row.nudge em { color: var(--dialog-accent); }
.row-hold::after {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #a9426070; transform: scaleX(0); transform-origin: left;
  transition: transform 160ms var(--ease-in);
}
.row-hold.holding::after { transform: scaleX(1); transition: transform var(--hold-ms) linear; }
.row-hold.held { animation: row-held 420ms var(--ease-out); }
@keyframes row-held { 30% { background: #a942608c; } }

.now-playing { display: flex; align-items: center; gap: 10px; padding: 2px 2px 10px; }
.now-playing .cart { width: 28px; }
.now-playing .cart-label b { display: none; }
.now-playing > div { min-width: 0; }
.now-playing small { display: block; margin-bottom: 4px; font: 600 8px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase; color: var(--dialog-muted); }
.now-playing b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font: 650 13.5px/1.2 system-ui; }
.drawer .fine { margin: 8px 2px 0; font: 11px/1.45 system-ui; color: var(--dialog-muted); }

/* ---------- Cartridge shelf ---------- */
#cartridge-library { display: flex; flex-direction: column; }
#cartridge-library[data-searching=true] > .rows { order: 1; margin-top: 10px; }
#cartridge-library[data-searching=true] .cartridge-search-results { margin-top: 8px; padding-top: 8px; border-top: 0; }
.cartridge-search {
  display: flex; align-items: center; gap: 8px;
  min-height: 36px; margin: 2px 0 6px; padding: 0 10px;
  border: 1px solid var(--dialog-border); border-radius: 10px; background: #120e1870;
  color: var(--dialog-muted);
}
.cartridge-search:focus-within { border-color: var(--dialog-accent); box-shadow: 0 0 0 1px var(--dialog-accent); }
.cartridge-search svg { flex: none; width: 14px; height: 14px; }
.cartridge-search input {
  flex: 1; min-width: 0; width: 100%; height: 36px; padding: 0;
  border: 0; border-radius: 0; background: none; color: var(--dialog-text);
  font: 400 16px/1.3 system-ui; letter-spacing: 0; -webkit-appearance: none;
}
.cartridge-search input::placeholder { color: var(--dialog-muted); opacity: .8; }
.drawer .cartridge-search input:focus-visible { outline: none; }
.cartridge-empty { margin: 8px 2px; font: 11px/1.4 system-ui; color: var(--dialog-muted); }
.cartridge-search-results { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--dialog-border); }
.result-heading { display: flex; align-items: center; justify-content: space-between; margin: 0 2px 7px; }
.result-heading h3 { margin: 0; color: var(--dialog-text); font: 650 12px/1.3 system-ui; }
.result-heading > span { color: var(--dialog-muted); font: 500 9px/1 var(--mono); }
.cartridge-results { display: grid; gap: 7px; }
.cartridge-result {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 9px;
  padding: 10px 8px; border: 1px solid #ffffff0a; border-radius: 12px; background: #ffffff04;
}
.result-thumbnail {
  position: relative; display: grid; place-items: center; width: 48px; height: 48px; overflow: hidden;
  align-self: start; border: 1px solid #ffffff14; border-radius: 9px; background: #120e18;
}
.result-thumbnail .cart { width: 32px; }
.cartridge-result > div { min-width: 0; }
.cartridge-result b { display: block; color: var(--dialog-text); font: 650 12px/1.25 system-ui; overflow-wrap: anywhere; }
.cartridge-result small { display: block; margin-top: 3px; color: var(--dialog-muted); font: 500 9px/1.3 system-ui; }
.result-description {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden;
  margin: 5px 0 0; color: #e1d6eb; font: 400 11px/1.4 system-ui;
}
.result-description.has-creator { display: block; overflow: visible; -webkit-line-clamp: unset; }
.result-description a, .game-attribution a { color: var(--dialog-accent); text-decoration: underline; text-underline-offset: 2px; }
.result-description a:hover, .game-attribution a:hover { color: var(--dialog-text); }
.drawer .game-attribution { margin: 12px 2px 0; }
.cartridge-result > button {
  min-height: 32px; padding: 7px 8px; border: 1px solid var(--dialog-border);
  border-radius: 8px; background: #c6b2e118; color: var(--dialog-accent); font: 650 10px/1.2 system-ui;
  transition: background-color var(--t-ui);
}
.cartridge-result > button:hover:not(:disabled) { background: #c6b2e12f; }
.cartridge-result > button:disabled { opacity: .45; }
.search-more {
  display: block; width: 100%; min-height: 32px; margin-top: 6px; padding: 7px;
  border: 0; border-radius: 8px; background: #ffffff08; color: var(--dialog-muted); font: 600 11px/1.3 system-ui;
}
@media (pointer: coarse) {
  .cartridge-search, .cartridge-search input { min-height: 44px; }
  .cartridge-result > button, .search-more { min-height: 44px; }
}
@container console (max-width: 340px) {
  .cartridge-result { grid-template-columns: 40px minmax(0, 1fr) auto; gap: 7px; padding: 9px 6px; }
  .result-thumbnail { width: 40px; height: 40px; }
  .cartridge-result > button { padding-inline: 6px; }
}
@container console (max-width: 280px) {
  .cartridge-result { grid-template-columns: 40px minmax(0, 1fr); }
  .cartridge-result > button { grid-column: 2; justify-self: end; }
}

.shelf {
  display: flex; gap: 6px; margin: 0 -12px; padding: 6px 12px 8px;
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x proximity; scroll-padding-inline: 12px; scrollbar-width: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 20px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12px, #000 calc(100% - 20px), transparent);
}
.shelf::-webkit-scrollbar { display: none; }
.shelf > .slot, .slot-wrap { flex: none; width: 88px; scroll-snap-align: start; }
.slot-wrap { position: relative; }
.slot-wrap > .slot { width: 100%; }
.slot {
  position: relative; display: grid; justify-items: center; align-content: start; gap: 4px;
  padding: 9px 4px 8px; border: 0; border-radius: 12px; background: #ffffff08;
  color: var(--dialog-text); text-align: center;
  transition: background-color var(--t-ui), transform var(--t-ui) var(--ease-out), opacity var(--t-ui);
}
.slot:hover:not(:disabled) { background: #ffffff14; }
.slot:active:not(:disabled) { transform: scale(.97); }
.slot .cart { width: 46px; transition: transform var(--t-in) var(--ease-out); }
.slot:hover:not(:disabled) .cart, .drawer[data-nav] .slot:focus .cart { transform: translateY(-3px); }
.slot > b { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.4em; font: 600 10.5px/1.2 system-ui; }
.slot > small { font: 600 7px/1.2 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: var(--dialog-muted); }
.slot.current { background: #7556e822; box-shadow: inset 0 0 0 2px var(--violet); }
.slot.current::after {
  content: "In slot"; position: absolute; top: 5px; right: 5px; padding: 2px 4px; border-radius: 4px;
  background: var(--violet); color: #fff; font: 800 6px/1 var(--mono); letter-spacing: .14em; text-transform: uppercase;
}
.slot.missing { opacity: .45; }
.shelf + .rows { margin-top: 4px; }
.remove-cart {
  position: absolute; z-index: 2; top: 4px; left: 4px; width: 20px; height: 20px; padding: 0;
  display: grid; place-items: center; border: 1px solid var(--dialog-border); border-radius: 50%;
  background: #1b1622e6; color: var(--dialog-muted); font: 14px/1 system-ui;
  transition: background-color var(--t-ui), color var(--t-ui);
}
.remove-cart:hover { background: var(--dialog-danger); color: #fff; }
.slot-confirm {
  position: absolute; inset: 0; z-index: 3; display: grid; align-content: center; gap: 5px; padding: 8px 7px;
  border-radius: 12px; background: #2a1d2bf5; box-shadow: inset 0 0 0 1px #e98fa155; text-align: center;
  opacity: 0; visibility: hidden; transform: scale(.94);
  transition: opacity 120ms var(--ease-in), transform var(--t-ui) var(--ease-in), visibility 0s linear var(--t-ui);
}
.slot-wrap.confirming .slot-confirm {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity var(--t-ui) var(--ease-out), transform var(--t-in) var(--ease-pop), visibility 0s;
}
.slot-wrap.confirming > .slot { opacity: .2; }
.slot-wrap.confirming .remove-cart { visibility: hidden; }
.slot-confirm b { font: 650 11px/1.2 system-ui; }
.slot-confirm button { min-height: 24px; padding: 4px; border: 0; border-radius: 7px; font: 650 10px/1 system-ui; }
.confirm-remove { background: var(--dialog-danger); color: #fff; }
.confirm-keep { background: #ffffff17; color: var(--dialog-text); }
.cart-ghost { position: absolute; z-index: 8; margin: 0; pointer-events: none; will-change: transform; }

/* ---------- Settings ---------- */
.choice { min-width: 0; margin: 0 0 12px; padding: 0; border: 0; }
.choice legend, .pane-label { margin: 0 0 7px; padding: 0; color: #cfc2dd; font: 600 11px/1.2 system-ui; }
.color-options { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.color-options label { position: relative; display: grid; justify-items: center; gap: 5px; padding: 4px 0; color: #bdb0cd; font: 9px/1 system-ui; cursor: pointer; }
.color-options input, .segments input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.color-options span {
  width: 22px; height: 22px; border-radius: 50%; background: var(--swatch);
  box-shadow: inset 0 1px 2px #fff6, 0 2px 3px #0005; pointer-events: none;
  transition: transform var(--t-ui) var(--ease-pop);
}
.color-options input:checked + span { outline: 2px solid #e9def5; outline-offset: 2px; transform: scale(1.08); }
.color-options input:focus-visible + span, .drawer[data-nav] .color-options input:focus + span { outline: 2px solid #fff; outline-offset: 3px; }
.segments { display: flex; gap: 2px; padding: 3px; border-radius: 10px; background: #120e18a6; }
.segments label { position: relative; flex: 1; min-width: 0; }
.segments span {
  display: block; padding: 7px 2px; border-radius: 7px; color: #aa9bbf; text-align: center;
  font: 600 11px/1 system-ui; white-space: nowrap; pointer-events: none;
  transition: background-color var(--t-ui), color var(--t-ui);
}
.segments input:checked + span { background: #776191; color: #fff; box-shadow: 0 1px 3px #0005; }
.segments input:focus-visible + span, .drawer[data-nav] .segments input:focus + span { outline: 2px solid var(--dialog-accent); outline-offset: 1px; }
.keys-settings { margin: 0 0 12px; }
#key-status { min-height: 16px; margin-top: 6px; }
.credits { margin-top: 4px; padding-top: 10px; border-top: 1px solid #ffffff0d; font: 9.5px/1.5 system-ui; color: var(--dialog-muted); }
.credits summary { cursor: pointer; color: #a99cba; font: 600 10.5px system-ui; }
.credits p { margin: 7px 0; }
.credits a { color: var(--violet-deep); }

/* ---------- Stats ---------- */
.stat-tiles { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 6px; margin: 2px 0 10px; }
.stat-tile { display: grid; align-content: space-between; gap: 6px; min-width: 0; padding: 10px 10px 9px; border-radius: 12px; background: #ffffff08; }
.stat-tile b { overflow: hidden; text-overflow: ellipsis; font: 700 21px/1 system-ui; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: #cab1f0; }
.stat-tile span { display: flex; align-items: center; gap: 5px; min-width: 0; font: 600 9.5px/1.25 system-ui; color: var(--dialog-muted); }
.stat-live { background: radial-gradient(ellipse at 20% 0, #70de9b24, transparent 75%), #ffffff06; box-shadow: inset 0 0 0 1px #81dfa024; }
.stat-live b { color: #a0efbc; }
.stat-live span { color: #9ec7ab; }
.stat-live i { position: relative; flex: none; width: 6px; height: 6px; border-radius: 50%; background: #7fe49f; }
.stat-live i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #7fe49f; animation: live-ping 2.2s var(--ease-out) infinite; }
@keyframes live-ping { from { transform: scale(1); opacity: .75; } 70%, to { transform: scale(2.8); opacity: 0; } }
#stat-personal-tile b { color: #8ec5ec; }
.pane .leaderboard-heading { margin-bottom: 7px; }
.pane .leaderboard-heading h3 { font: 600 11px/1.2 system-ui; color: #cfc2dd; }
.pane .players-game { margin-bottom: 5px; padding: 8px 10px; }
#players-games > .fine { margin-top: 0; }
#players-status:empty { display: none; }
/* The community link sits at the foot of Stats, and follows the leaderboard once it grows past the sheet. */
#pane-stats { display: flex; flex-direction: column; }
#pane-stats > * { flex: none; }
#pane-stats > .leaderboard { margin-bottom: 12px; }
.discord-row { margin-top: auto; border: 1px solid #5865f240; background: #5865f212; text-decoration: none; }
.discord-row svg { color: #8f99ff; }
.discord-row:hover { background: #5865f224; }
/* Live motion only runs where someone can see it. */
.console[data-surface=closed] .stat-live i::after,
.pane:not([data-pos=active]) .stat-live i::after { animation-play-state: paused; }

/* ---------- My Tweetboy ---------- */
/* No tab: the header chip opens it, and the drawer strip is its only chrome. */
.console[data-pane=personal] .tabs { display: none; }
.personal { position: relative; display: flex; flex-direction: column; min-height: 100%; }
.personal .flow-title { padding-right: 56px; margin-bottom: 10px; font-size: 15px; }
.flow-progress { position: absolute; top: 4px; right: 0; margin: 0; gap: 5px; }
.flow-progress li { flex: none; gap: 0; font-size: 0; }
.flow-progress li:not(:last-child)::after { display: none; }
.flow-progress li span, .flow-progress li.complete span, .flow-progress li.active span {
  width: 6px; height: 6px; border: 0; border-radius: 3px; font-size: 0; box-shadow: none; background: #ffffff2a;
  transition: width var(--t-in) var(--ease-out), background-color var(--t-ui);
}
.flow-progress li.complete span { background: #89729f; }
.flow-progress li.active span { width: 16px; background: #bca8d8; }
.drawer.in-personal-flow #pane-personal { padding-bottom: 0; -webkit-mask-image: none; mask-image: none; }
.drawer.in-personal-flow .flow-footer { position: sticky; bottom: 0; z-index: 1; padding: 14px 0 14px; background: linear-gradient(#1a152100, #1a1521 12px); }
.personal .color-options input:checked + span, .personal .color-options input:focus-visible + span { outline: 0; transform: none; }
.drawer[data-nav] .personal .color-options label:has(input:focus) { outline: 2px solid var(--dialog-accent); outline-offset: 2px; }

/* Peek: the step's control and its button share one row. */
.console[data-detent=peek] #pane-personal { overflow: hidden; padding-bottom: 10px; }
.console[data-detent=peek] .personal { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 10px; min-height: 0; }
.console[data-detent=peek] .personal > section:not([hidden]) { display: contents; }
.console[data-detent=peek] .personal .flow-title, .console[data-detent=peek] .flow-status { grid-column: 1 / -1; }
.console[data-detent=peek] .flow-status { margin-top: 6px; }
.console[data-detent=peek] .flow-footer { position: static; margin: 0; padding: 0; gap: 4px; background: none; }
.console[data-detent=peek] .flow-footer .primary { min-height: 40px; padding: 10px 18px; }
.console[data-detent=peek] .flow-back { min-height: 40px; padding: 10px 8px; }
.console[data-detent=peek] .owner-name { margin: 0; }
.console[data-detent=peek] .owner-name input { min-height: 40px; margin: 0; padding-block: 9px; }
.console[data-detent=peek] .personal .color-options { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; }
.console[data-detent=peek] .personal .color-options label { min-height: 40px; padding: 0; gap: 0; font-size: 0; }
.console[data-detent=peek] .personal .color-options span { width: 18px; height: 18px; }

/* Owners land on sharing; editing and access sit below it. */
.owner-share {
  display: grid; gap: 3px; width: 100%; margin: 2px 0 4px; padding: 12px 14px;
  border: 1px solid #dfd0ed; border-radius: 12px; background: #c4b1da; color: #2d223a; text-align: left; cursor: pointer;
}
.owner-share b { font: 650 13px/1.2 system-ui; }
.owner-share small { font: 11px/1.3 system-ui; color: #4b3c5d; }
.owner-share:hover:not(:disabled) { background: #d2c1e5; }
.owner-share:disabled { opacity: .45; cursor: default; }

/* The composer previews the post itself: its text, the generated card and the link. */
.in-share-ready [data-personal-view="share/link"]:not([hidden]) { flex: 1; min-height: 0; align-items: stretch; }
.share-ready .flow-title { margin: 0 0 10px; padding-right: 0; font-size: 18px; text-align: left; }
.tweet-preview {
  flex: 1; min-height: 0; margin: 0; display: flex; flex-direction: column; gap: 9px;
  padding: 12px; border: 1px solid #ffffff14; border-radius: 14px; background: #ffffff05;
}
.tweet-preview p { margin: 0; font: 13px/1.4 system-ui; color: #eee6f7; }
.tweet-card { position: relative; flex: 1; min-height: 140px; border: 1px solid #ffffff12; border-radius: 12px; background: #0b0910; overflow: hidden; }
.tweet-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tweet-card:has(img[hidden])::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, #0000 30%, #ffffff0d 50%, #0000 70%) 0 0 / 250% 100%;
  animation: card-shimmer 1.2s linear infinite;
}
@keyframes card-shimmer { to { background-position: -250% 0; } }
.tweet-preview figcaption { display: flex; align-items: center; gap: 8px; min-height: 28px; font: 11px/1 var(--mono); color: #a596b5; }
#share-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#copy-share { flex: none; padding: 6px 10px; border: 1px solid #ffffff22; border-radius: 7px; background: none; color: #dfd2ec; font: 600 11px system-ui; cursor: pointer; }
#copy-share:hover { background: #ffffff0e; }
.personal .copy-fallback { display: block; width: 100%; min-width: 0; margin-top: 8px; padding: 9px 10px; border: 1px solid var(--dialog-border); border-radius: 8px; background: #120e18; color: var(--dialog-text); font: 400 16px/1.3 system-ui; }

@container drawer (max-height: 300px) {
  .tabs { margin-bottom: 6px; }
  .tab-track [role=tab], .segments span { padding-block: 6px; }
  .now-playing { padding-bottom: 6px; }
  .now-playing .cart { width: 24px; }
  .row { min-height: 30px; padding-block: 5px; }
  .choice { margin-bottom: 9px; }
  .shelf { padding-block: 4px 6px; }
}
/* Narrow sheets give the L/R chips' room to the tab labels; the L and R keys still step through them. */
@container drawer (max-width: 340px) { .tab-shoulder { display: none; } }
/* Big shells scale the menu like a device screen; below 540px the drawer is too short to afford it. */
@container console (min-width: 540px) { .tabs, .panes { zoom: 1.15; } .shell { --peek-h: calc(136px + var(--bottom-clearance)); } }
@container console (min-width: 600px) { .tabs, .panes { zoom: 1.3; } .shell { --peek-h: calc(153px + var(--bottom-clearance)); } }
@container console (min-width: 660px) { .tabs, .panes { zoom: 1.45; } .shell { --peek-h: calc(171px + var(--bottom-clearance)); } }

/* ---------- Keycaps on the real controller ---------- */
.paused-key {
  position: absolute; left: 50%; top: 50%; z-index: 3; pointer-events: none;
  padding: 4px 7px; border: 1px solid #f0e6fa99; border-radius: 5px;
  background: #392743e8; color: #f9f2ff; box-shadow: 0 2px 3px #0005;
  font: 600 clamp(10px, 3cqw, 14px)/1 var(--mono); white-space: nowrap;
  opacity: 0; transform: translate(-50%, -50%) translateY(4px) scale(.92);
  transition: opacity 120ms var(--ease-in), transform 160ms var(--ease-in);
}
.face-btn .paused-key { left: 75%; top: 80%; }
.shoulder .paused-key { left: 75%; top: 70%; }
.small-control .paused-key { top: 50%; padding: 3px 5px; }
.show-control-keys .paused-key {
  opacity: 1; transform: translate(-50%, -50%);
  transition: opacity var(--t-ui) var(--ease-out) calc(var(--i, 0) * 24ms), transform var(--t-in) var(--ease-pop) calc(var(--i, 0) * 24ms);
}
.console[data-remap=on] .deck [data-control] { cursor: pointer; }
.console[data-remap=on] .deck [data-control]:hover .paused-key, .deck .listening .paused-key { background: #7b5bac; border-color: #fff; }
.deck .listening .paused-key { animation: keycap-listen 1s var(--ease-out) infinite; }
@keyframes keycap-listen { 50% { box-shadow: 0 0 0 4px #c6b2e155; } }

@media (hover: none) {
  .paused-key, .keys-settings { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .deck .listening .paused-key, .row-hold.held, .stat-live i::after, .tweet-card::before { animation: none; }
}