:root {
  --bg0: #07040e;
  --bg1: #160a24;
  --panel: #1a1028e6;
  --text: #f7f0ff;
  --muted: #b9a4d4;
  --magenta: #ff2d95;
  --cyan: #2de2e6;
  --amber: #ffb020;
  --violet: #7b5cff;
  --line: #4a3368;
  --ok: #3ecf8e;
  --floor: #241438;
  --card-w: 78px;
  --card-h: 112px;
  --hand-dock-h: 10.4rem;
  --atlas-w: 1120;
  --atlas-h: 1200;
  --radius: 18px;
  --stage-zoom: 1;
  --hand-zoom: 1;
  --ui-scale: 1;
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
html { min-width: 360px; }
html.invite-join #screen-splash .splash-dock,
html.invite-join #screen-splash .splash-auth,
html.invite-join #discoSplashStage {
  visibility: hidden;
  pointer-events: none;
}
.join-overlay {
  display: none;
}
html.invite-join .join-overlay {
  display: grid !important;
  place-items: center;
  position: fixed;
  inset: 0;
  z-index: 40;
  background: #07040ecc;
  pointer-events: all;
}
.join-overlay-kicker {
  margin: 0;
  font-size: .78rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted);
}
.join-overlay-code {
  margin: .35rem 0 0;
  font-family: "Syne", sans-serif;
  font-size: clamp(1.8rem, 6vw, 3rem);
  letter-spacing: .18em;
  color: var(--cyan);
}
body {
  font-family: "Outfit", system-ui, sans-serif;
  color: var(--text);
  background: #050208;
  overflow: hidden;
}

.winner-cols {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
}
.winner-cols[hidden] { display: none !important; }
.viz-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}

#app {
  position: relative;
  z-index: 1;
  height: 100%;
  min-height: 100dvh;
  min-width: 360px;
  display: flex;
  flex-direction: column;
  padding-top: var(--safe-t);
  padding-right: var(--safe-r);
  padding-bottom: var(--safe-b);
  padding-left: var(--safe-l);
}

.top {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: .4rem;
  padding: .45rem .7rem;
  border-bottom: 1px solid #ffffff14;
  background: #0a061288;
  backdrop-filter: blur(8px);
  z-index: 12;
  flex-shrink: 0;
  overflow: visible;
}
.top-left {
  justify-self: start;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: .35rem .55rem;
  max-width: min(100%, 28rem);
  overflow: visible;
}
.help-btn {
  width: 2rem;
  height: 2rem;
  padding: 0;
  border-radius: 999px;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  background: #1a1028ee;
  border: 1px solid #ffffff33;
  color: #fff;
}
.header-backpack-btn {
  height: 2.2rem;
  padding: 0 .75rem;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #1a1028ee;
  border: 1px solid #ffffff33;
  color: var(--text);
  white-space: nowrap;
}
.daily-fact {
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: clamp(.78rem, 2.1vw, .95rem);
  letter-spacing: .04em;
  color: var(--cyan);
  text-decoration: none;
  max-width: 30ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  display: inline-block;
}
.daily-fact:hover { filter: brightness(1.15); text-decoration: underline; }

.splash-screen {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.splash-auth {
  position: absolute;
  top: .7rem;
  right: .85rem;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .45rem;
}
.splash-roadmap-btn {
  position: absolute;
  top: .7rem;
  left: .85rem;
  z-index: 3;
  font-family: "Syne", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .42rem .72rem;
  border: 1px solid #ffffff28;
  border-radius: 999px;
  color: #f0e8ff;
  background: #2a1840cc;
  box-shadow: 0 6px 16px #00000055;
  cursor: pointer;
}
.splash-roadmap-btn:hover {
  border-color: #ff2d95aa;
  background: #3a2458;
}
.splash-fundraiser {
  position: absolute;
  top: 3.15rem;
  left: .85rem;
  z-index: 3;
  width: min(16.5rem, calc(100vw - 7.5rem));
  padding: .55rem .65rem .6rem;
  border: 1px solid #ffffff22;
  border-radius: 14px;
  background: linear-gradient(165deg, #2a1840ee, #14081cee);
  box-shadow: 0 10px 24px #00000066;
}
.splash-fundraiser-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .5rem;
  margin-bottom: .35rem;
}
.splash-fundraiser-label {
  font-family: "Syne", sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffb020;
}
.splash-fundraiser-pct {
  font-size: .72rem;
  font-weight: 700;
  color: #f0e8ff;
}
.splash-fundraiser-track,
.roadmap-fundraiser-track {
  height: .55rem;
  border-radius: 999px;
  background: #ffffff14;
  overflow: hidden;
}
.splash-fundraiser-fill,
.roadmap-fundraiser-fill {
  height: 100%;
  width: 0%;
  border-radius: inherit;
  background: linear-gradient(90deg, #ff2d95, #ffb020 55%, #2de2e6);
  transition: width .45s ease;
}
.splash-fundraiser-copy {
  margin: .45rem 0 0;
  font-size: .68rem;
  line-height: 1.35;
  color: #c8bed8;
}
.roadmap-fundraiser {
  margin: 0 0 1.15rem;
  padding: .85rem .9rem .95rem;
  border: 1px solid #ffffff18;
  border-radius: 14px;
  background: #1a0f2ccc;
}
.roadmap-fundraiser h3 {
  margin: 0 0 .45rem;
  font-family: "Syne", sans-serif;
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #ffb020;
}
.roadmap-fundraiser-meta {
  margin: .45rem 0 .35rem;
  font-size: .82rem;
  font-weight: 700;
  color: #f0e8ff;
}
.roadmap-fundraiser-copy {
  margin: 0;
  font-size: .86rem;
  line-height: 1.45;
  color: #c8bed8;
}
@media (max-width: 520px) {
  .splash-fundraiser {
    top: 3rem;
    width: min(14.5rem, calc(100vw - 5.5rem));
    padding: .45rem .55rem .5rem;
  }
  .splash-fundraiser-copy { display: none; }
}
.roadmap-card {
  max-width: min(748.8px, 94vw);
  max-height: min(82vh, 680px);
  overflow: auto;
}
.roadmap-blog {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.roadmap-lead,
.roadmap-body {
  margin: 0 0 1rem;
  color: #d8d0e8;
  line-height: 1.5;
  font-size: .92rem;
}
.roadmap-body a {
  color: #2de2e6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.roadmap-body:last-of-type {
  margin-bottom: 1.25rem;
}
.roadmap-section {
  margin: 0 0 1.05rem;
  padding: 0 0 1.05rem;
  border-bottom: 1px solid #ffffff14;
}
.roadmap-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
.roadmap-section h3 {
  margin: 0 0 .4rem;
  font-family: "Syne", sans-serif;
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: .04em;
  color: #ffb020;
}
.roadmap-section p {
  margin: 0;
  line-height: 1.5;
  color: #c8bed8;
  font-size: .92rem;
}
.roadmap-contact {
  margin-top: .55rem !important;
}
.roadmap-contact a {
  color: #2de2e6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.sign-in-btn {
  position: static;
  font-size: .78rem;
  font-weight: 700;
  background: #5865F2;
  border: none;
  color: #fff;
  padding: .4rem .7rem;
}
.dev-persona-btn {
  font-family: "Syne", sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  border: 1px solid #ffffff33;
  color: #fff;
  padding: .38rem .62rem;
  background: #3a2a52;
  box-shadow: 0 6px 14px #00000055;
}
.dev-persona-btn.mode-user {
  background: linear-gradient(160deg, #5a6b8a, #2a3550);
}
.dev-persona-btn.mode-cap {
  background: linear-gradient(160deg, #ff8a3d, #c44a1a);
  outline: 1px solid #ffd4a888;
}
.dev-persona-btn.mode-vip {
  background: linear-gradient(160deg, #ffb020, #ff2d95);
  outline: 1px solid #ffe08a;
  box-shadow: 0 0 14px #ff2d9555;
}
.dev-persona-btn.hidden {
  display: none;
}
.dev-cog-btn {
  font-size: 1.05rem;
  line-height: 1;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: 1px solid #ffffff33;
  border-radius: 8px;
  color: #ffe8c8;
  background: #2a2438;
  box-shadow: 0 6px 14px #00000055;
  cursor: pointer;
}
.dev-cog-btn:hover {
  background: #3a3148;
}
.dev-cog-btn.hidden {
  display: none;
}
.dev-tools-card {
  max-width: min(624px, 94vw);
  max-height: min(88vh, 720px);
  overflow: auto;
}
.dev-tool-block {
  margin: 0 0 1rem;
  padding-bottom: .75rem;
  border-bottom: 1px solid #ffffff14;
}
.dev-tool-block:last-child {
  border-bottom: none;
  margin-bottom: 0;
}
.dev-tool-block h3 {
  margin: 0 0 .45rem;
  font-size: .85rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.dev-console-log {
  font-family: ui-monospace, Consolas, monospace;
  font-size: .68rem;
  line-height: 1.35;
  max-height: 9.5rem;
  overflow: auto;
  padding: .5rem .55rem;
  background: #0e0c14;
  border: 1px solid #ffffff18;
  border-radius: 8px;
  white-space: pre-wrap;
  word-break: break-word;
  color: #c8d0e0;
}
.dev-tool-row {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: .45rem;
}
.dev-inline-label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .78rem;
  margin: 0 0 .45rem;
}
.dev-inline-label input[type='number'] {
  width: 6rem;
  max-width: 100%;
}
.dev-tool-status {
  min-height: 1.1em;
  margin: .35rem 0 0;
  font-size: .72rem;
  color: var(--muted);
}
.btn-host-locked {
  opacity: .45;
  filter: grayscale(0.35);
  cursor: not-allowed;
}
.disco-splash-stage {
  position: relative;
  flex: 1;
  min-height: 12rem;
  overflow: hidden;
  padding: 0.4rem 0.6rem 1.7rem;
}
html.mobile-landscape .disco-splash-stage {
  min-height: 5.5rem;
  padding: 0.2rem 0.45rem 0.85rem;
}
.splash-ticker-segment {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.splash-ticker-track:not(.splash-ticker-static) {
  flex-wrap: nowrap;
}
html.mobile-landscape .splash-ticker-track.splash-ticker-static {
  flex-wrap: nowrap;
  width: max-content;
  max-width: none;
  overflow: visible;
}
/* Only the reduced-motion static ticker needs scrolling; the marquee scrolls itself. */
html.mobile-landscape .splash-ticker-viewport:has(.splash-ticker-static) {
  overflow-x: auto;
}
.disco-word {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(3.2rem, 12vmax, 7.2rem);
  letter-spacing: .08em;
  color: #fff;
  white-space: nowrap;
  text-shadow: 0 0 18px #ff2d95, 0 0 36px #7b5cff, 2px 0 #2de2e6, -2px 0 #ff2d95;
  pointer-events: none;
  will-change: transform;
}
.disco-word.static {
  left: 50%;
  top: 42%;
  transform: translate(-50%, -50%);
}
.disco-word.maintenance {
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  font-size: clamp(2.4rem, 9vmin, 5.6rem);
  white-space: nowrap;
}
html.maintenance-mode .disco-splash-stage {
  perspective: 900px;
}
html.maintenance-mode .disco-word.maintenance:not(.static) {
  animation: disco-maint-yaw 8s ease-in-out infinite;
}
@keyframes disco-maint-yaw {
  0%, 100% { transform: translate(-50%, -50%) rotateY(-18deg); }
  50% { transform: translate(-50%, -50%) rotateY(18deg); }
}
@media (prefers-reduced-motion: reduce) {
  html.maintenance-mode .disco-word.maintenance {
    animation: none;
    transform: translate(-50%, -50%);
  }
}
/* Floor is locked while the origin is down; header + hamburger stay usable. */
html.maintenance-mode #app { pointer-events: none; }
html.maintenance-mode .top,
html.maintenance-mode #menuPanel { pointer-events: auto; }
.disco-word.ghost {
  opacity: 0.3;
}
.splash-dock {
  position: relative;
  flex-shrink: 0;
  width: 100%;
}
.splash-stairs {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-evenly;
  align-items: stretch;
  gap: clamp(.4rem, 1.6vw, .9rem);
  width: 100%;
  padding: 0.35rem clamp(0.55rem, 2.2vw, 1.4rem) 0.55rem;
  flex-shrink: 0;
}
.splash-ticker {
  position: relative;
  z-index: 1;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  border-top: 1px solid #ffffff12;
  background: linear-gradient(180deg, #0a0612cc 0%, #12081fee 100%);
  padding: 0.42rem 0 calc(0.55rem + var(--safe-b));
  pointer-events: none;
}
.splash-ticker-viewport {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 6%, #000 94%, transparent 100%);
}
.splash-ticker-track {
  display: flex;
  width: max-content;
  animation: splash-ticker-scroll 52s linear infinite;
  will-change: transform;
}
.splash-ticker-track.splash-ticker-static {
  width: 100%;
  animation: none;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: 0.2rem 0;
}
.splash-ticker-item {
  padding: 0 0.85rem;
  white-space: nowrap;
  font-family: "Outfit", system-ui, sans-serif;
  font-size: clamp(0.62rem, 1.6vw, 0.74rem);
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #c8b8e8;
}
.splash-ticker-sep {
  color: #ff2d9588;
  font-size: 0.45rem;
  line-height: 1;
}
@keyframes splash-ticker-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
html.photosensitive .splash-ticker-track {
  animation-duration: 72s;
}
@media (prefers-reduced-motion: reduce) {
  .splash-ticker-track {
    animation: none;
    width: 100%;
    flex-wrap: wrap;
    justify-content: center;
  }
}
.stair {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(.58rem, 1.55vw + .28rem, .88rem);
  letter-spacing: .03em;
  text-transform: uppercase;
  border: none;
  color: #fff;
  flex: 1 1 0;
  min-width: 0;
  height: auto;
  min-height: 3.15rem;
  padding: .45rem .35rem;
  display: grid;
  place-items: center;
  text-align: center;
  line-height: 1.12;
  overflow: hidden;
  box-sizing: border-box;
  white-space: nowrap;
  max-width: 100%;
}
.stair-create {
  background: linear-gradient(160deg, #ff2d95, #7b5cff);
  box-shadow: 0 12px 28px #ff2d9555;
}
.stair-join {
  background: linear-gradient(160deg, #2de2e6, #3a7cff);
  box-shadow: 0 10px 22px #2de2e644;
}
.stair-stats {
  background: linear-gradient(160deg, #ffb020, #ff6b3d);
  box-shadow: 0 8px 18px #ffb02044;
}
.stair-market {
  background: linear-gradient(160deg, #7b5cff, #3ecf8e);
  box-shadow: 0 8px 16px #7b5cff44;
}
.stair-feedback {
  background: linear-gradient(160deg, #5a6b8a, #2a3550);
  box-shadow: 0 8px 16px #2a355044;
  font-size: clamp(.48rem, 1.25vw + .22rem, .68rem);
  letter-spacing: .02em;
  line-height: 1.15;
  white-space: normal;
  padding: .4rem .3rem;
}
@media (max-width: 520px) {
  .stair {
    font-size: clamp(.5rem, 2.6vw, .72rem);
    letter-spacing: .02em;
    padding: .4rem .22rem;
  }
  .stair-feedback {
    font-size: clamp(.42rem, 2.2vw, .58rem);
  }
}
.stair:hover { filter: brightness(1.12); }
html.photosensitive .stair {
  transform: none;
}

.page-shell {
  width: min(960px, 94vw);
  margin: 1.4rem auto;
  padding: 1.2rem 1.3rem 1.5rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.profile-shell {
  max-height: calc(100dvh - 4.2rem);
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
  overflow: hidden;
}
.profile-scroll {
  overflow: auto;
  scrollbar-gutter: stable;
  min-height: 0;
  flex: 1;
  padding-bottom: .75rem;
}
.profile-save-bar {
  flex-shrink: 0;
  padding: .7rem 0 .85rem;
  border-top: 1px solid var(--line);
  background: var(--panel);
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: center;
}
.lobby-menu-bar,
.market-menu-bar {
  display: flex;
  align-items: center;
  margin-top: 0;
  padding: .7rem 0 .85rem;
  border-top: 1px solid var(--line);
  flex-shrink: 0;
  background: var(--panel);
  gap: .55rem;
}
.lobby-menu-bar {
  justify-content: center;
}
.market-menu-bar {
  justify-content: flex-start;
}
.lobby-menu-bar .ghost,
.market-menu-bar .ghost,
.profile-save-bar .ghost {
  min-width: 9rem;
}
.page-shell h1 {
  font-family: "Syne", sans-serif;
  margin: 0 0 .4rem;
}
.page-back {
  position: absolute;
  left: .7rem;
  top: .55rem;
  z-index: 5;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border-radius: 10px;
  font-size: 1.15rem;
  background: #1a1028ee;
  border: 1px solid #ffffff33;
}
#screen-lobby, #screen-join, #screen-stats, #screen-market { position: relative; }
#screen-market {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.create-lobby { width: min(640px, 94vw); }
.create-head { display: flex; justify-content: space-between; align-items: flex-start; gap: .6rem; }
.create-head-code {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.create-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem 1rem;
  align-items: end;
  justify-content: space-between;
  margin: .6rem 0 .35rem;
}
.create-toolbar-left label {
  margin-bottom: 0;
}
.create-toolbar-tutorial {
  display: grid;
  gap: .35rem;
  align-self: end;
}
.create-toolbar-tutorial-spacer {
  font-size: .85rem;
  line-height: 1.2;
  visibility: hidden;
  user-select: none;
  pointer-events: none;
}
.create-toolbar .lobby-tutorial-btn {
  margin: 0;
}
.create-toolbar-left,
.create-toolbar-right {
  display: flex;
  flex-wrap: wrap;
  gap: .55rem;
  align-items: end;
}
.create-actions-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .55rem 1rem;
  margin: 0 0 .6rem;
}
.create-actions-row .player-fill-check {
  margin-bottom: 0;
}
.player-fill-check {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  user-select: none;
}
.player-fill-check input {
  width: 1.05rem;
  height: 1.05rem;
  accent-color: var(--cyan);
}
.create-toolbar-right {
  margin-left: auto;
}
.create-toolbar-right .primary,
.create-toolbar-right .ghost {
  white-space: nowrap;
}
.lobby-timer { font-variant-numeric: tabular-nums; }
.lobby-slots { display: grid; gap: .55rem; margin: .8rem 0; }
.seat-slot {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .5rem;
  align-items: center;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #12081f;
}
.seat-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  width: 9.5rem;
  border-radius: 999px;
  overflow: hidden;
  border: 1px solid #ffffff22;
}
.seat-toggle button {
  border: none;
  border-radius: 0;
  padding: .35rem .2rem;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #2a243388;
  color: #ffffff66;
}
.seat-toggle button.on-ai { background: #2de2e6; color: #051018; }
.seat-toggle button.on-player { background: #ff2d95; color: #fff; }
.seat-toggle button:disabled {
  opacity: .5;
  cursor: not-allowed;
}
.slot-actions {
  display: flex;
  align-items: center;
  gap: .45rem;
}
button.kick-slot,
button.btn-kick {
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .28rem .55rem;
  background: #5a1824;
  color: #ffb4c0;
  border: 1px solid #ff2d9555;
}
.start-overlay {
  position: absolute;
  inset: 0;
  background: #07040ecc;
  display: grid;
  place-items: center;
  align-content: center;
  z-index: 8;
  font-family: "Syne", sans-serif;
}
.start-overlay #startOverlayCount { font-size: 4rem; }
.yes-green { background: #1f8a4c; border: none; font-weight: 700; }
.no-red { background: #b4233a; border: none; font-weight: 700; }
.join-browser {
  width: min(980px, 96vw);
  margin: 2rem auto;
  padding: 1.2rem 1.3rem 1.5rem;
  background: linear-gradient(165deg, #0a0614ee 0%, #14081fee 45%, #0c1028ee 100%);
  border: 1px solid #4a336888;
  border-radius: var(--radius);
  box-shadow: 0 18px 50px #00000099, inset 0 0 0 1px #2de2e618;
}
.join-browser-head { display: flex; justify-content: space-between; gap: .8rem; align-items: end; flex-wrap: wrap; }
.join-tools { display: flex; gap: .45rem; }
.join-tools input { min-width: 12rem; }
.bf-cols, .bf-row {
  display: grid;
  grid-template-columns: 2.2rem 1fr 1.2fr 5.2rem 4.6rem 4.2rem;
  gap: .6rem;
  align-items: center;
  padding: .45rem .7rem;
}
.bf-cols { color: var(--muted); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.bf-list { display: grid; gap: .28rem; }
.bf-row {
  background: #12081f;
  border: 1px solid #ffffff14;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.bf-row:hover { background: #1c102c; border-color: #2de2e655; }
.bf-av {
  width: 1.7rem; height: 1.7rem; border-radius: 4px; object-fit: cover; background: #2a1a40;
}
.market-backpack-btn {
  height: 2.2rem;
  padding: 0 .75rem;
  border-radius: 10px;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #1a1028ee;
  border: 1px solid #ffffff33;
  color: var(--text);
}
.market-backpack-btn-lg {
  height: 4.4rem;
  padding: 0 1.5rem;
  font-size: 1.56rem;
  border-radius: 14px;
  letter-spacing: .08em;
}
.career-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(10rem, 13.5rem);
  gap: 1rem 1.4rem;
  align-items: start;
  margin-bottom: .85rem;
}
.career-id-top {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
}
.career-avatar { width: 72px; height: 72px; border-radius: 14px; object-fit: cover; background: #1a1028; flex-shrink: 0; }
.career-id { flex: 1; min-width: 0; }
.career-col-plaque {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.profile-plaque-label {
  font-size: .72rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--muted);
}
.profile-plaque-wrap {
  width: 138px;
}
.profile-plaque-wrap .plaque-shell.profile-live-plaque {
  width: 138px;
  min-width: 138px;
  min-height: 158px;
  pointer-events: none;
  text-align: center;
}
.profile-plaque-wrap .plaque-shell.profile-live-plaque .plaque {
  width: 100%;
  min-height: 158px;
}
.profile-plaque-wrap .mini-hand { display: none; }
.profile-style-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .45rem;
  margin: 0 0 .85rem;
}
.profile-style-row .bp-open {
  flex: 0 1 9.6rem;
}
.profile-signin-hint {
  margin: 0 0 .7rem;
}
.profile-orb-balance {
  margin-left: auto;
}
.profile-charm-hand-block {
  margin: 0 0 1.1rem;
}
.profile-charm-hand-btns {
  display: flex;
  justify-content: center;
  gap: .45rem;
  margin: 0 0 .55rem;
}
.profile-charm-hand-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
}
.profile-charm-hand {
  display: flex;
  justify-content: center;
  gap: clamp(.18rem, 1.1vw, .35rem);
  width: 100%;
  max-width: min(44rem, 100%);
  overflow-x: hidden;
  padding: .2rem .1rem .35rem;
}
.profile-charm-hand.charm-hand-strip {
  flex: none;
  min-width: 0;
}
.profile-charm-slot {
  flex: 1 1 0;
  min-width: 0;
  width: auto;
  max-width: 3.1rem;
  height: auto;
  aspect-ratio: 49 / 69;
  border-radius: 8px;
  border: 1px solid color-mix(in srgb, var(--charm-wash, #2de2e6) 38%, #ffffff44);
  background:
    linear-gradient(180deg, #ffffff20, transparent 46%),
    color-mix(in srgb, color-mix(in srgb, var(--charm-wash, #2de2e6) 36%, #d8d4e0) 22%, transparent);
  box-shadow: 0 4px 12px #00000055;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: grid;
  place-items: center;
}
.profile-charm-slot.empty {
  opacity: .38;
  border-style: dashed;
  background: #12081fcc;
  box-shadow: none;
}
.profile-charm-slot.filled {
  cursor: pointer;
}
.profile-charm-slot .charm-sprite,
.profile-charm-slot .charm-fallback {
  max-width: 78%;
  max-height: 78%;
  width: auto;
  height: auto;
  object-fit: contain;
  font-size: 1.15rem;
  line-height: 1;
}
.profile-charm-count {
  font-size: .78rem;
  letter-spacing: .06em;
  color: var(--muted);
}

/* Enlarged glass-card clone on hover/touch — PNG only, no name label. */
.charm-glass-preview {
  position: fixed;
  z-index: 80;
  left: 0;
  top: 0;
  width: clamp(5.5rem, 16vw, 7.5rem);
  aspect-ratio: 49 / 69;
  border-radius: 12px;
  border: 1px solid color-mix(in srgb, var(--charm-wash, #2de2e6) 42%, #ffffff66);
  background:
    linear-gradient(180deg, #ffffff24, transparent 42%),
    color-mix(in srgb, color-mix(in srgb, var(--charm-wash, #2de2e6) 42%, #d8d4e0) 28%, transparent);
  box-shadow: 0 10px 28px #00000088, 0 0 24px color-mix(in srgb, var(--charm-wash, #2de2e6) 35%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: grid;
  place-items: center;
  pointer-events: none;
  transform: translate(-50%, calc(-100% - 10px));
  opacity: 0;
  transition: opacity .12s ease;
}
.charm-glass-preview.is-on {
  opacity: 1;
}
.charm-glass-preview.is-below {
  transform: translate(-50%, 10px);
}
.charm-glass-preview img,
.charm-glass-preview .charm-fallback {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  font-size: clamp(2.4rem, 8vw, 3.6rem);
  line-height: 1;
}
#screen-stats.profile-guest .career-id input,
#screen-stats.profile-guest .name-size-row button,
#screen-stats.profile-guest .bp-open,
#screen-stats.profile-guest .creator-color-swatch,
#screen-stats.profile-guest #careerSave {
  pointer-events: none;
  opacity: .45;
}
@media (max-width: 720px) {
  .career-head {
    grid-template-columns: 1fr;
    justify-items: stretch;
  }
  .career-col-plaque { order: -1; }
}
.career-id h1 {
  margin: 0 0 .45rem;
  font-size: clamp(1.35rem, 3.2vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  word-break: break-word;
}
#careerName[data-name-scale="small"] {
  font-size: clamp(1.05rem, 2.5vw, 1.45rem);
}
#careerName[data-name-scale="large"] {
  font-size: clamp(1.6rem, 3.8vw, 2.15rem);
}
.career-id label { margin-bottom: .45rem; }
.name-size-row {
  display: flex;
  gap: .35rem;
  margin: -.15rem 0 .55rem;
}
.name-size-row button {
  flex: 1;
  font-size: .72rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .38rem .25rem;
  background: #1a1028;
  border: 1px solid #ffffff22;
}
.name-size-row button.on {
  background: #2de2e622;
  border-color: #2de2e6;
  color: #2de2e6;
}
#careerDisplayName {
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: .02em;
}
.career-vip.locked { opacity: .45; pointer-events: none; }
.profile-metrics h2,
.profile-winnings h3,
.plaque-creator h2 {
  font-family: "Syne", sans-serif;
  margin: 0 0 .45rem;
  font-size: 1.05rem;
}
.profile-metrics {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: 1rem 1.4rem;
  align-items: start;
  margin: 0 0 1.1rem;
}
.profile-totals,
.profile-dance { min-width: 0; }
.totals-axes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
}
.totals-axes li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: .75rem;
  font-size: .88rem;
}
.totals-axes .axis-label { font-weight: 700; color: var(--muted); }
.totals-axes .axis-val {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  text-align: right;
  word-break: break-word;
}
.profile-dance .stats-radar-row {
  grid-template-columns: max-content 1fr;
  gap: .55rem .85rem;
  justify-content: stretch;
  align-items: center;
}
.profile-dance .stats-radar {
  grid-column: auto;
  justify-self: center;
  padding-left: 0;
  width: clamp(132px, 18vw, 180px);
  height: clamp(132px, 18vw, 180px);
}
.profile-winnings { margin: 0 0 1.1rem; width: 100%; }
@media (max-width: 720px) {
  .profile-metrics {
    grid-template-columns: 1fr;
  }
  .profile-dance .stats-radar-row {
    grid-template-columns: max-content auto;
    justify-content: center;
  }
}
.profile-openers {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .45rem;
  margin: 0 0 .7rem;
}
.plaque-opener-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
  margin: 0 0 1.1rem;
}
.bp-open {
  font-size: .82rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .55rem .45rem;
  background: #2a1840;
  border: 1px solid #ffffff22;
}
.bp-open:hover { border-color: #2de2e688; }
.plaque-creator {
  margin: 0 auto 1rem;
  max-width: 44rem;
  text-align: center;
}
.creator-head {
  display: flex;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  gap: .45rem .75rem;
  margin-bottom: .2rem;
}
.creator-head h2 { margin: 0; }
.creator-beta-note {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffb020;
  font-weight: 700;
}
.creator-vip-cta {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: .35rem .7rem;
  border-radius: 8px;
  border: 1px solid #ffb020aa;
  background: linear-gradient(135deg, #ff2d9533, #ffb02044);
  color: #ffe7a8;
  cursor: pointer;
}
.creator-vip-cta:hover { border-color: #ffb020; }
.plaque-creator.vip-locked > .muted,
.plaque-creator.vip-locked .creator-layout {
  opacity: .42;
  pointer-events: none;
  filter: grayscale(.35);
}
.plaque-creator.vip-locked .creator-vip-cta {
  pointer-events: auto;
}
.career-name-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  flex-wrap: wrap;
}
.career-name-row .badge {
  display: inline-block;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid #ffffff44;
  border-radius: 999px;
  padding: .08rem .4rem;
  background: #ffffff14;
  flex-shrink: 0;
}
.bp-tile-preview.bp-slot-preview {
  background-size: cover;
  background-position: center;
  background-color: #1a0820;
}
.plaque-creator > .muted { margin: 0 auto .65rem; max-width: 30rem; }
.creator-layout {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: .85rem 1rem;
}
.creator-tools {
  display: grid;
  gap: .35rem;
  align-content: start;
  text-align: left;
  min-width: 8.2rem;
  max-width: 10rem;
}
.creator-tools button.on { background: #ff2d95; color: #fff; }
.creator-hint {
  margin: -.15rem 0 .1rem;
  font-size: .62rem;
  line-height: 1.3;
}
.creator-size {
  display: grid;
  gap: .2rem;
  margin: .15rem 0 0;
  font-size: .68rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
}
.creator-size input {
  width: 100%;
  accent-color: #ff2d95;
}
.creator-brush-preview {
  display: grid;
  place-items: center;
  height: 72px;
  margin: .15rem 0;
  border: 1px dashed #ffffff22;
  border-radius: 10px;
  background: #0a061488;
}
.creator-brush-ring {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #ffffffcc;
  box-shadow: none;
  transition: width .12s, height .12s, box-shadow .12s, background .12s;
}
.creator-color-wrap { position: relative; }
.fav-color-row {
  margin-top: .55rem;
  display: grid;
  gap: .3rem;
}
.fav-color-label {
  font-size: .78rem;
  font-weight: 700;
}
.creator-color-swatch {
  width: 100%;
  height: 2rem;
  border-radius: 8px;
  border: 1px solid #ffffff44;
  background: #ff2d95;
  padding: 0;
}
.creator-color-pop {
  position: absolute;
  left: 0;
  top: calc(100% + .35rem);
  z-index: 8;
  width: 11.5rem;
  padding: .55rem;
  border-radius: 12px;
  background: #1a1028ee;
  border: 1px solid #ffffff33;
  box-shadow: 0 12px 32px #00000088;
  display: grid;
  gap: .4rem;
}
.creator-color-pop.hidden { display: none; }
.creator-color-native {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--muted);
}
.creator-color-native input[type="color"] {
  width: 2.2rem;
  height: 1.6rem;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
}
.creator-swatches {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: .28rem;
}
.creator-swatches button {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 6px;
  border: 1px solid #ffffff33;
  padding: 0;
  min-height: 0;
}
.creator-color-close {
  font-size: .72rem;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.creator-layers {
  display: flex;
  justify-content: center;
  gap: .35rem;
  margin: 0 0 .4rem;
  width: 100%;
}
.creator-layers button {
  font-size: .62rem;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: .32rem .55rem;
  background: #1a1028;
  border: 1px solid #ffffff22;
  min-width: 4.5rem;
}
.creator-layers button.on {
  background: #2de2e622;
  border-color: #2de2e6;
  color: #2de2e6;
  box-shadow: none;
}
.creator-stage {
  position: relative;
  width: 256px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}
#creatorCanvas {
  width: 256px;
  height: 256px;
  background:
    linear-gradient(45deg, #140a22 25%, transparent 25%) 0 0 / 16px 16px,
    linear-gradient(-45deg, #140a22 25%, transparent 25%) 0 8px / 16px 16px,
    linear-gradient(45deg, transparent 75%, #140a22 75%) 8px -8px / 16px 16px,
    linear-gradient(-45deg, transparent 75%, #140a22 75%) -8px 0 / 16px 16px,
    #0a0614;
  border: 1px solid #ffffff22;
  border-radius: 10px;
  cursor: crosshair;
  touch-action: none;
  display: block;
}
.creator-preview-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: .45rem;
  min-width: 0;
  flex: 0 0 auto;
  overflow: visible;
  padding: 1.6rem 1.6rem 1.4rem 1.8rem;
}
.creator-focus-row { font-size: .72rem; }
.creator-zoom-row {
  display: grid;
  gap: .2rem;
  width: 100%;
  max-width: 11rem;
  font-size: .68rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: center;
}
.creator-zoom-row input[type="range"] { width: 100%; }
.creator-send-row {
  margin: 1rem auto 0;
  max-width: 28rem;
  display: grid;
  gap: .4rem;
  justify-items: center;
}
.creator-send-status {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .04em;
  color: #ffb020;
  text-align: center;
}
.creator-send-status.ok { color: #3ecf8e; }
.creator-send-status.wait { color: var(--muted); }
#creatorSend:disabled {
  opacity: .45;
  pointer-events: none;
}
.plaque-shell.creator-preview {
  width: 138px;
  min-width: 138px;
  min-height: 158px;
  pointer-events: none;
  --c: #ff2d95;
  text-align: center;
  transform: scale(var(--preview-zoom, 1));
  transform-origin: top center;
}
.plaque-shell.creator-preview .plaque {
  width: 100%;
  min-height: 158px;
}
.plaque-shell.creator-preview.focus-bg .plaque-fg,
.plaque-shell.creator-preview.focus-bg .name-plate,
.plaque-shell.creator-preview.focus-bg > .mini-hand { visibility: hidden; }
.plaque-shell.creator-preview > .mini-hand {
  display: flex;
  justify-content: center;
  margin-top: .2rem;
  margin-bottom: var(--shape-hand-hang, -2.35rem);
  min-height: 36px;
  padding: 0 2px;
  position: relative;
  z-index: 5;
}
.plaque-shell.creator-preview > .mini-hand .card-face {
  width: 34px !important;
  height: 48px !important;
  border-radius: 5px !important;
  margin-left: -14px;
  box-shadow: 0 6px 14px #00000099, 0 0 0 1px #ffffff22;
}
.plaque-shell.creator-preview > .mini-hand .card-face:first-child { margin-left: 0; }
.modal-card.backpack-card {
  --bp-tile: 152px;
  --bp-gap: 12px;
  --bp-cols: 4;
  position: relative;
  width: min(1100px, 94vw);
  height: min(86vh, 40rem);
  max-width: none;
  max-height: none;
  display: flex;
  flex-direction: column;
  padding: 1.05rem 1.2rem 1rem;
  border: 1px solid #7b5cff88;
  box-shadow: 0 24px 70px #000000cc, 0 0 0 1px #ff2d9522, 0 0 48px #7b5cff33;
  overflow: hidden;
}
.modal-card.backpack-card.bp-mobile-max {
  padding: 1.5% 1.5% 1.2%;
  border-radius: 12px;
}
.backpack-card .modal-head h2 {
  font-size: clamp(1.15rem, 2.4vw, 1.55rem);
  letter-spacing: .12em;
  font-weight: 800;
}
.bp-bundle-note {
  margin: 0 0 .55rem;
  padding: 0 .1rem;
  font-size: .72rem;
  line-height: 1.35;
  color: var(--muted);
  font-style: italic;
  flex-shrink: 0;
}
.backpack-card .icon-x {
  color: #ff2d95;
  font-size: 1.55rem;
}
.backpack-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: .35rem;
  margin: 0 0 .7rem;
  overflow-x: auto;
  overflow-y: hidden;
  flex-shrink: 0;
  padding-bottom: .2rem;
  max-height: calc(2.55rem * 2 + .7rem);
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 4%, #000 96%, transparent 100%);
}
.backpack-card.bp-mobile-max .backpack-tabs {
  flex-wrap: wrap;
  max-height: calc(2.4rem * 2 + .55rem);
  overflow-x: auto;
  overflow-y: hidden;
}
.backpack-tabs button {
  flex: 0 0 auto;
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .38rem .7rem .42rem;
  background: #2a1840;
  border: 1px solid #ffffff22;
  border-radius: 999px;
  color: #c8bed8;
  box-shadow: none;
}
.backpack-tabs button.on {
  background: #2a1840;
  color: #fff;
  border-color: #ff2d95;
  box-shadow: 0 2px 0 0 #ff2d95, 0 6px 14px #ff2d9555;
}
.bp-filters {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .55rem .85rem;
  margin: 0 0 .7rem;
  flex-shrink: 0;
}
.bp-filter {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  font-size: .68rem;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.bp-filter.hidden { display: none !important; }
.bp-filter select {
  font: inherit;
  text-transform: none;
  letter-spacing: 0;
  min-width: 9.5rem;
  color: #eee;
  background: #1e1230;
  border: 1px solid #ffffff22;
  border-radius: 8px;
  padding: .32rem .5rem;
}
.backpack-grid {
  display: grid;
  grid-template-columns: repeat(var(--bp-cols), var(--bp-tile));
  gap: var(--bp-gap);
  justify-content: center;
  align-content: start;
  overflow: auto;
  scrollbar-gutter: stable;
  min-height: 0;
  flex: 1;
  padding: .25rem .15rem .55rem;
}
.bp-tile {
  position: relative;
  width: var(--bp-tile);
  height: calc(var(--bp-tile) * 1.22);
  background: #0d0718;
  border: 1px solid #7b5cff44;
  border-radius: 14px;
  padding: .55rem .45rem .45rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
}
.bp-tile.on {
  border-color: #2de2e6;
  box-shadow: 0 0 0 1px #2de2e6, 0 0 18px #2de2e666;
}
.bp-tile.equipped {
  border-color: #ff2d95;
  box-shadow: 0 0 0 1px #ff2d95, 0 0 16px #ff2d9566;
}
.bp-tile.locked { opacity: .55; }
.bp-tile-mark {
  position: absolute;
  top: .38rem;
  right: .38rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: #2de2e6;
  color: #051018;
  font-size: .72rem;
  font-weight: 800;
  line-height: 1.05rem;
  display: grid;
  place-items: center;
}
.bp-tile.locked .bp-tile-mark { display: none; }
.bp-tile-swatch {
  width: 78%;
  height: calc(var(--bp-tile) * 0.32);
  border-radius: 8px;
  margin: .35rem 0 .1rem;
  border: 1px solid #ffffff22;
  flex-shrink: 0;
}
.bp-tile-preview {
  width: 86%;
  height: calc(var(--bp-tile) * 0.52);
  border-radius: 8px;
  margin-bottom: .05rem;
  border: none;
  background: transparent;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.bp-font-sample {
  font-size: calc(var(--bp-tile) * 0.34);
  line-height: 1;
  color: #fff;
  letter-spacing: .02em;
  max-width: 100%;
  padding: 0 .15rem;
  white-space: nowrap;
}
.bp-shape-sil {
  width: calc(var(--bp-tile) * 0.42);
  height: calc(var(--bp-tile) * 0.34);
  background: linear-gradient(160deg, #ff2d95aa, #7b5cff88 55%, #26143f);
  border: 2px solid #2de2e6;
  box-shadow: 0 0 10px #ff2d9555;
}
.bp-shape-sil[data-shape="rectangle"] { border-radius: 6px; }
.bp-shape-sil[data-shape="sphere"] { border-radius: 50%; width: calc(var(--bp-tile) * 0.34); }
.bp-shape-sil[data-shape="roundedCube"] {
  border-radius: 28%;
  width: calc(var(--bp-tile) * 0.34);
  height: calc(var(--bp-tile) * 0.34);
}
.bp-shape-sil[data-shape="rhombus"] {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-color: transparent;
  filter: drop-shadow(0 0 4px #2de2e6);
}
.bp-shape-sil[data-shape="hexagon"] {
  border-radius: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  border-color: transparent;
  filter: drop-shadow(0 0 4px #2de2e6);
  width: calc(var(--bp-tile) * 0.4);
  height: calc(var(--bp-tile) * 0.34);
}
.bp-shape-sil[data-shape="capsule"] {
  border-radius: 999px;
  width: calc(var(--bp-tile) * 0.26);
  height: calc(var(--bp-tile) * 0.38);
}
.bp-shape-sil[data-shape="ticket"] {
  border-radius: 4px;
  border-style: dashed;
  background:
    radial-gradient(circle at 0 50%, #0a0614 0 6px, transparent 7px),
    radial-gradient(circle at 100% 50%, #0a0614 0 6px, transparent 7px),
    linear-gradient(160deg, #ff2d95aa, #7b5cff88 55%, #26143f);
}
.bp-shape-sil[data-shape="arcade"] {
  border-radius: 0;
  clip-path: polygon(8% 0, 92% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  border-color: transparent;
  filter: drop-shadow(0 0 4px #2de2e6);
}
.bp-chassis-sil {
  width: calc(var(--bp-tile) * 0.42);
  height: calc(var(--bp-tile) * 0.34);
  box-sizing: border-box;
  border: 2px solid var(--sil-stroke, #ff2d95);
  background: var(--sil-fill, #26143f);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 10px color-mix(in srgb, var(--sil-stroke, #ff2d95) 40%, transparent);
}
.bp-chassis-sil[data-shape="sphere"] {
  border-radius: 50%;
  width: calc(var(--bp-tile) * 0.34);
  height: calc(var(--bp-tile) * 0.34);
}
.bp-chassis-sil[data-shape="roundedCube"] {
  border-radius: 28%;
  width: calc(var(--bp-tile) * 0.34);
  height: calc(var(--bp-tile) * 0.34);
}
.bp-chassis-sil[data-shape="rhombus"] {
  border-radius: 0;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  filter: drop-shadow(0 0 4px var(--sil-stroke, #ff2d95));
  border-color: transparent;
}
.bp-chassis-sil[data-shape="hexagon"] {
  border-radius: 0;
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
  filter: drop-shadow(0 0 4px var(--sil-stroke, #ff2d95));
  border-color: transparent;
}
.bp-chassis-sil[data-shape="capsule"] {
  border-radius: 999px;
  width: calc(var(--bp-tile) * 0.26);
  height: calc(var(--bp-tile) * 0.38);
}
.bp-chassis-sil[data-shape="ticket"] {
  border-style: dashed;
  border-radius: 4px;
}
.bp-chassis-sil[data-shape="arcade"] {
  border-radius: 0;
  clip-path: polygon(8% 0, 92% 0, 100% 18%, 100% 100%, 0 100%, 0 18%);
  filter: drop-shadow(0 0 4px var(--sil-stroke, #ff2d95));
  border-color: transparent;
}
.bp-chassis-sil[data-stroke="path"] {
  border-color: transparent;
}
.bp-chassis-sil > .bp-vfx-sil {
  position: absolute;
  inset: 8%;
  width: auto;
  height: auto;
  border: 0;
  opacity: .85;
}
.bp-vfx-sil {
  width: 72%;
  height: 62%;
  border-radius: 8px;
  border: 2px solid #ff2d95;
  background: #14081c;
  position: relative;
  overflow: hidden;
}
.bp-vfx-sil[data-vfx="none"] { opacity: .55; }
.bp-vfx-sil[data-vfx="stars"]::before,
.bp-vfx-sil[data-vfx="stars"]::after {
  content: "";
  position: absolute;
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 12px 8px #ff2d95, 28px 18px #2de2e6, 8px 28px #ffb020, 36px 6px #fff8;
}
.bp-vfx-sil[data-vfx="soundwave"] {
  background:
    repeating-linear-gradient(90deg, transparent 0 4px, #2de2e655 4px 6px),
    #14081c;
}
.bp-vfx-sil[data-vfx="ripples"] {
  background:
    radial-gradient(circle at 50% 50%, transparent 20%, #2de2e644 22%, transparent 28%),
    radial-gradient(circle at 50% 50%, transparent 40%, #ff2d9544 42%, transparent 48%),
    #14081c;
}
.bp-vfx-sil[data-vfx="sonic"] {
  background: linear-gradient(120deg, transparent 30%, #7b5cff66 50%, transparent 70%), #14081c;
}
.bp-vfx-sil[data-vfx="sonar"] {
  background:
    conic-gradient(from 0deg, #2de2e655 0 8%, transparent 8% 100%),
    #14081c;
}
.bp-vfx-sil[data-vfx="arcade"] {
  background:
    repeating-linear-gradient(0deg, #ffffff11 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #ff2d9533, #2de2e633),
    #14081c;
}
.bp-tagline-sil {
  font-size: calc(var(--bp-tile) * 0.28);
  font-weight: 700;
  letter-spacing: .04em;
}
.bp-tagline-sil[data-tagline-style="glow"] { text-shadow: 0 0 8px #ff2d95, 0 0 14px #2de2e6; }
.bp-tagline-sil[data-tagline-style="rainbow"] {
  background: linear-gradient(90deg, #ff2d95, #ffb020, #2de2e6, #7b5cff, #ff2d95);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bp-tagline-sil[data-tagline-style="neonPulse"] { color: #2de2e6; text-shadow: 0 0 10px #2de2e6; }
.bp-tagline-sil[data-tagline-style="chromeSheen"] {
  background: linear-gradient(180deg, #fff, #9aa4b2 45%, #fff);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.bp-plate-sil {
  position: relative;
  display: block;
  width: 88%;
  height: 46%;
  background: transparent;
  border: 0;
  padding: 0;
  box-sizing: border-box;
  overflow: visible;
}
.bp-plate-sil .dot {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  width: 18px;
  height: 18px;
  margin: 0;
  transform: translateY(-50%);
  border-radius: 50%;
  background: #6a3c8c;
  border: 2px solid #ff2d95;
}
.bp-plate-sil .bar {
  position: absolute;
  left: 8px;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  height: 14px;
  margin: 0;
  background: #14081c;
  border: 1px solid #ff2d95;
  border-radius: 2px 8px 8px 2px;
  box-sizing: border-box;
}
.bp-plate-sil[data-plate="pin"] .bar { border-radius: 2px 8px 8px 2px; }
.bp-plate-sil[data-plate="ticket"] .bar { border-radius: 2px; border-style: dashed; }
.bp-plate-sil[data-plate="vinyl"] .bar { border-color: #d4af37; }
.bp-plate-sil[data-plate="neon"] .bar { border-radius: 999px; box-shadow: 0 0 8px #ff2d9566; }
.bp-plate-sil[data-plate="chrome"] .bar {
  background: linear-gradient(180deg, #cfd8e0, #6a7380);
  border-color: #e8eef4;
}
.bp-plate-sil[data-plate="arcade"] .bar { border-radius: 8px 8px 2px 2px; border-width: 2px; }
.bp-tile-name {
  font-size: calc(var(--bp-tile) * 0.092);
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bp-tile-status {
  font-size: calc(var(--bp-tile) * 0.078);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #2de2e6;
  margin-top: auto;
}
.bp-tile.locked .bp-tile-status {
  color: #9aa0b8;
  font-size: .95rem;
}
.bp-tile.on .bp-tile-status { color: #2de2e6; }
.backpack-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-top: .4rem;
  padding-top: .65rem;
  border-top: 1px solid #ffffff14;
  flex-shrink: 0;
}
.backpack-foot .actions { margin-top: 0; }
.backpack-card #backpackApply {
  min-width: 6.4rem;
  box-shadow: 0 0 18px #ff2d9588, 0 8px 24px #ff2d9544;
}
.backpack-card #backpackCancel {
  border-color: #7b5cff88;
}
.orb-support-card {
  position: relative;
  width: min(42rem, 94vw);
  max-height: min(92vh, 40rem);
  overflow: auto;
  padding: 1.1rem 1.15rem 1.25rem;
  background:
    radial-gradient(ellipse at 12% 0%, #ff2d9522 0%, transparent 45%),
    radial-gradient(ellipse at 88% 8%, #2de2e618 0%, transparent 40%),
    #0c0614;
  border: 1px solid #7b5cff66;
}
.orb-support-x {
  position: absolute;
  top: -.45rem;
  right: -.45rem;
  z-index: 3;
  width: 2.35rem;
  height: 2.35rem;
  font-size: 1.65rem;
  line-height: 1;
  border-radius: 999px;
  background: #1a1028;
  border: 1px solid #ffffff44;
  box-shadow: 0 4px 14px #00000088;
}
.orb-support-top {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: .85rem;
  margin-bottom: 1rem;
  padding-right: 2rem;
}
.orb-support-hello {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}
.orb-support-hello-text {
  margin: 0;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(1.15rem, 3.5vw, 1.65rem);
  letter-spacing: .04em;
  color: #fff;
  text-shadow: 0 0 .5rem #ff2d9666;
}
.orb-support-plaque-wrap {
  width: min(11.5rem, 42vw);
  transform-origin: top left;
}
.orb-support-plaque-wrap .plaque-shell.orb-support-plaque {
  width: 138px;
  min-width: 138px;
  min-height: 158px;
  pointer-events: none;
  text-align: center;
}
.orb-support-plaque-wrap .plaque-shell.orb-support-plaque .plaque {
  width: 100%;
  min-height: 158px;
}
.orb-support-plaque-wrap .mini-hand {
  display: none;
}
.orb-support-ask {
  margin: 0;
  max-width: 34rem;
  font-size: .95rem;
  line-height: 1.45;
  color: #c8d4e0;
}
.orb-support-packs {
  margin-top: .25rem;
}
.orb-support-foot {
  display: flex;
  justify-content: center;
  margin-top: 1rem;
}
.orb-support-foot #orbSupportNotNow {
  min-width: 8.5rem;
}
@media (min-width: 640px) {
  .orb-support-top {
    grid-template-columns: auto minmax(0, 1fr);
    align-items: start;
    gap: 1.1rem;
  }
  .orb-support-ask {
    padding-top: .35rem;
  }
}
#backpackEquipped {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9b7dff;
}
#backpackEquipped strong {
  color: #2de2e6;
  font-weight: 800;
  margin-left: .2rem;
}
#backpackEquipped .bp-coins {
  color: var(--amber, #ffb020);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: .28rem;
}
#backpackEquipped .bp-orb-ico {
  width: .95rem;
  height: .95rem;
  object-fit: contain;
  vertical-align: middle;
}
.bp-tile.locked .bp-tile-status {
  color: var(--amber, #ffb020);
  letter-spacing: 0.02em;
}
.bp-equip-ack {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
  z-index: 4;
  font-family: "Syne", sans-serif;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-weight: 800;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 18px #ff2d95, 0 0 32px #7b5cff;
  background: #12081ecc;
}
.bp-equip-ack.hidden { display: none; }
.bp-zoom {
  display: flex;
  align-items: center;
  gap: .4rem;
  margin: 0;
  font-size: .62rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.bp-zoom input {
  width: 7.5rem;
  accent-color: #ff2d95;
}
@media (max-width: 720px) {
  .profile-openers { grid-template-columns: 1fr 1fr; }
  .creator-layout { gap: .7rem; }
  .creator-stage,
  #creatorCanvas {
    width: min(256px, 72vw);
    height: auto;
    aspect-ratio: 1;
  }
  #creatorCanvas { height: auto; }
}
.market-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(11.5rem, 1fr));
  gap: .7rem;
}
.market-shell {
  position: relative;
  flex: 1;
  min-height: 0;
  max-height: calc(100dvh - 4.2rem);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding-bottom: 0;
}
.market-scroll {
  overflow-y: auto;
  scrollbar-gutter: stable;
  min-height: 0;
  flex: 1;
  padding-bottom: .75rem;
  -webkit-overflow-scrolling: touch;
}
.market-head-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: .75rem;
  flex-wrap: wrap;
}
.market-head-row h1 { margin: 0; }
.market-why-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  margin: 0 0 .85rem;
}
.market-why-row .market-micro-why {
  flex: 1;
  min-width: 12rem;
  margin: 0;
}
.market-orb-balance {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin-left: auto;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: .95rem;
  letter-spacing: .04em;
  color: #2de2e6;
  white-space: nowrap;
}
.market-orb-balance img {
  width: 1.55rem;
  height: 1.55rem;
  object-fit: contain;
  filter: drop-shadow(0 0 .35rem #ff2d9588);
}
.orb-packs {
  margin: .85rem 0 1.4rem;
}
.market-vip {
  margin: .75rem 0 1.1rem;
}
.market-vip-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .85rem 1.1rem;
  flex-wrap: wrap;
  padding: .85rem 1rem;
  border-radius: 12px;
  border: 1px solid #ffb02066;
  background:
    linear-gradient(135deg, #ff2d9518, #ffb02014),
    #1a0c24;
}
.market-vip-card.is-active {
  border-color: #ffb020aa;
  background:
    linear-gradient(135deg, #ff2d9528, #ffb02022),
    #22102e;
}
.market-vip-title {
  margin: 0 0 .2rem;
  font-family: "Syne", sans-serif;
  font-size: .95rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #ffe7a8;
}
.market-vip-blurb {
  margin: 0;
  font-size: .82rem;
  color: #d8c8e8;
  max-width: 36rem;
  line-height: 1.35;
}
.market-vip-cta {
  flex-shrink: 0;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: .78rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: .55rem 1rem;
  border-radius: 9px;
  border: 1px solid #ffb020aa;
  background: linear-gradient(135deg, #ff2d9544, #ffb02055);
  color: #ffe7a8;
  cursor: pointer;
}
.market-vip-cta:hover {
  border-color: #ffd27a;
  filter: brightness(1.06);
}
.market-vip-cta:disabled {
  opacity: .85;
  cursor: default;
  filter: none;
}
.orb-packs-title {
  margin: 0 0 .65rem;
  font-family: "Syne", sans-serif;
  font-size: .78rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #9b7dff;
}
.orb-pack-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 720px) {
  .orb-pack-grid {
    grid-template-columns: 1fr;
  }
}
.orb-pack-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 1px solid #7b5cff55;
  border-radius: .55rem;
  background: #0a0612;
  overflow: hidden;
  cursor: pointer;
  text-align: left;
  color: inherit;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.orb-pack-card:hover,
.orb-pack-card:focus-visible {
  border-color: #2de2e6;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #2de2e644, 0 .4rem 1.2rem #ff2d9522;
  outline: none;
}
.orb-pack-card.is-busy {
  opacity: 0.6;
  pointer-events: none;
  cursor: wait;
}
.orb-pack-card.is-busy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: #0a061288;
  pointer-events: none;
}
.orb-pack-art {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #000;
}
.orb-pack-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
}
.orb-pack-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6.5% 7%;
  box-sizing: border-box;
}
.orb-pack-overlay .orb-pack-name {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(.72rem, 2.4vw, 1.05rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 .35rem #000, 0 0 .7rem #ff2d95aa, 0 1px 0 #000;
  line-height: 1.15;
  max-width: 72%;
}
.orb-pack-overlay .orb-pack-price {
  align-self: flex-end;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(.85rem, 2.8vw, 1.2rem);
  color: #2de2e6;
  text-shadow: 0 0 .4rem #000, 0 0 .55rem #2de2e688;
  background: #0a0612cc;
  border: 1px solid #2de2e666;
  border-radius: .35rem;
  padding: .22em .45em;
}
.orb-pack-meta {
  padding: .55rem .65rem .7rem;
  background: linear-gradient(180deg, #12081f 0%, #0a0612 100%);
}
.orb-pack-meta .orb-pack-blurb {
  margin: 0;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #9b7dff;
}
.orb-pack-meta .orb-pack-amount {
  margin: .2rem 0 0;
  font-family: "Syne", sans-serif;
  font-weight: 700;
  font-size: .92rem;
  color: #ffb020;
}
.charm-packs-market {
  margin: 1.35rem 0 1rem;
}
.market-charm-lede {
  margin: -.15rem 0 .65rem;
  font-size: .78rem;
  color: var(--muted);
}
.charm-pack-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .75rem;
}
@media (max-width: 720px) {
  .charm-pack-grid {
    grid-template-columns: 1fr;
  }
}
.charm-pack-card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-align: left;
  padding: 0;
  border: 1px solid #7b5cff55;
  border-radius: .55rem;
  background: #0a0612;
  color: inherit;
  cursor: pointer;
  overflow: hidden;
  transition: border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.charm-pack-card:hover:not(:disabled),
.charm-pack-card:focus-visible:not(:disabled) {
  border-color: #ff8a3d88;
  transform: translateY(-2px);
  box-shadow: 0 0 0 1px #ff8a3d44, 0 .4rem 1.2rem #ff2d9522;
  outline: none;
}
.charm-pack-card.owned,
.charm-pack-card:disabled {
  opacity: .62;
  cursor: default;
  transform: none;
  box-shadow: none;
}
.charm-pack-art {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #000;
}
.charm-pack-art img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  pointer-events: none;
  user-select: none;
}
.charm-pack-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6% 7%;
  box-sizing: border-box;
  background: linear-gradient(180deg, #00000066 0%, transparent 35%, transparent 55%, #0a0612cc 100%);
}
.charm-pack-overlay .charm-pack-name {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(.72rem, 2.2vw, 1rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 .35rem #000, 0 0 .7rem #ff2d95aa, 0 1px 0 #000;
  line-height: 1.15;
  max-width: 80%;
}
.charm-pack-overlay .charm-pack-price {
  align-self: flex-end;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(.78rem, 2.4vw, 1.05rem);
  color: #ffb020;
  text-shadow: 0 0 .4rem #000, 0 0 .55rem #ffb02088;
  background: #0a0612cc;
  border: 1px solid #ffb02066;
  border-radius: .35rem;
  padding: .22em .45em;
}
.charm-pack-overlay .charm-pack-price.owned-tag {
  color: #2de2e6;
  border-color: #2de2e666;
  text-shadow: 0 0 .4rem #000, 0 0 .55rem #2de2e688;
}
.charm-pack-body {
  padding: .55rem .65rem .7rem;
  background: linear-gradient(180deg, #12081f 0%, #0a0612 100%);
}
.charm-pack-previews {
  display: flex;
  flex-wrap: wrap;
  gap: .25rem;
  min-height: 2.4rem;
  margin-bottom: .45rem;
  align-items: center;
}
.charm-pack-previews .charm-sprite {
  width: 1.75rem;
  height: 1.75rem;
  object-fit: contain;
}
.charm-pack-fallback {
  font-size: 1.4rem;
}
.charm-pack-name {
  display: block;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .04em;
  color: #ffe8c8;
}
.charm-pack-blurb {
  margin: .2rem 0 0;
  font-size: .68rem;
  line-height: 1.3;
  color: var(--muted);
}
.charm-pack-meta {
  margin: .2rem 0 0;
  font-size: .72rem;
  font-weight: 700;
  color: #9b7dff;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.charm-singles-market {
  margin: 1.2rem 0 1rem;
}
.charm-singles-market-wrap {
  display: grid;
  gap: 1.1rem;
}
.charm-singles-pack-title {
  margin: 0 0 .55rem;
  font-family: "Syne", sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
}
.charm-singles-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(6.5rem, 1fr));
  gap: .55rem;
}
.charm-single-card {
  display: grid;
  gap: .35rem;
  justify-items: center;
  padding: .55rem .45rem .5rem;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #12081fcc;
  color: var(--text);
  cursor: pointer;
  transition: transform .12s, filter .12s, border-color .12s;
  text-align: center;
}
.charm-single-card:hover:not(:disabled),
.charm-single-card:focus-visible:not(:disabled) {
  border-color: #7b5cff88;
  transform: translateY(-1px);
}
.charm-single-card.owned,
.charm-single-card:disabled {
  opacity: .72;
  cursor: default;
}
.charm-single-face {
  width: 3.25rem;
  height: 3.25rem;
  display: grid;
  place-items: center;
}
.charm-single-sprite {
  width: 3rem;
  height: 3rem;
  object-fit: contain;
}
.charm-single-name {
  font-size: .68rem;
  line-height: 1.2;
  font-weight: 700;
  color: var(--text);
}
.charm-single-price {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #2de2e6;
}
.charm-single-price.owned-tag {
  color: #3ecf8e;
}
.market-sku-tba {
  position: relative;
  min-height: 10rem;
  display: grid;
  place-items: center;
  margin: 1rem 0 1.25rem;
  padding: 1rem;
  border: 1px dashed #7b5cff44;
  border-radius: .6rem;
  overflow: hidden;
}
.market-sku-note {
  position: relative;
  z-index: 1;
  margin: 0;
  text-align: center;
  color: var(--muted);
  font-size: .85rem;
  max-width: 22rem;
}
.market-tba-wrap {
  position: relative;
  min-height: 16rem;
  display: grid;
  place-items: center;
}
.market-tba {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(3.5rem, 14vw, 7rem);
  letter-spacing: 0.14em;
  line-height: 0.9;
  color: #ff2d9588;
  border: 0.12em solid #ff2d9544;
  border-radius: 0.08em;
  padding: 0.08em 0.18em 0.12em;
  transform: rotate(-18deg);
  box-shadow: 0.12em 0.12em 0 #7b5cff33;
  text-transform: uppercase;
  pointer-events: none;
  user-select: none;
  background: #ff2d950a;
  position: absolute;
  opacity: .55;
}
.market-tile {
  background: #12081f;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .75rem;
  min-height: 8.5rem;
}
.market-tile h3 { margin: 0 0 .25rem; font-size: .95rem; }
.market-tile p { margin: 0; color: var(--muted); font-size: .8rem; }
.market-tile .soon-tag { margin-top: .5rem; color: var(--amber); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.speech-cloud {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%);
  min-width: 4.5rem;
  width: 120%;
  max-width: none;
  box-sizing: border-box;
  padding: .35rem .55rem;
  background: #fff;
  color: #1a1028;
  font-size: .78rem;
  border-radius: 18px 18px 18px 6px;
  z-index: 12;
  pointer-events: none;
  animation: cloudWiggle 2.4s ease-in-out infinite;
}
@keyframes cloudWiggle {
  0%, 100% { border-radius: 18px 16px 20px 8px; }
  50% { border-radius: 14px 22px 12px 16px; }
}
html.photosensitive .speech-cloud { animation: none; }
.seat-btn.btn-bubble {
  background: #3a3a48ee;
  font-size: .72rem;
  font-weight: 800;
}
.seat-btn.btn-charm {
  background: #4a2a6aee;
  font-size: .9rem;
  line-height: 1;
}
.seat-btn.btn-charm.is-locked {
  opacity: .45;
  filter: grayscale(0.35);
  cursor: not-allowed;
}
.bubble-entry {
  position: fixed;
  left: 50%;
  bottom: 7.5rem;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.bubble-entry.hidden { display: none !important; }
.bubble-entry input { min-width: min(18rem, 70vw); }
.chat-char-note {
  font-style: italic;
  font-size: .72rem;
  color: var(--muted);
  white-space: nowrap;
}

.charms-drawer {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 14;
  display: none;
  pointer-events: none;
}
body.page-game .charms-drawer:not([hidden]) {
  display: flex;
}
.charms-drawer-tab {
  writing-mode: vertical-rl;
  pointer-events: auto;
  padding: .55rem .28rem;
  border-radius: 10px 0 0 10px;
  border: 1px solid #ffffff33;
  border-right: none;
  background: #1a1028ee;
  color: #fff;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .72rem;
  min-width: 1.7rem;
  cursor: pointer;
}
.charms-drawer-tab.is-open {
  background: #3a2060ee;
  border-color: #ffffff66;
}
.charms-drawer-tab.is-locked {
  opacity: .45;
  filter: grayscale(0.35);
}

body.charm-hand-open {
  --hand-dock-h: calc(10.4rem + var(--card-h) + 2.4rem);
}

.charm-hand {
  position: relative;
  display: flex;
  align-items: center;
  gap: .2rem;
  width: 100%;
  margin-bottom: .2rem;
  pointer-events: auto;
}
.charm-hand.hidden { display: none !important; }
.charm-hand-strip {
  display: flex;
  gap: .45rem;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: .2rem .15rem .35rem;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.charm-more {
  flex: 0 0 auto;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: .35rem .18rem;
  border: 1px solid #ffffff28;
  border-radius: 8px;
  background: #1a1028cc;
  color: var(--muted);
  font-family: "Syne", sans-serif;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .14em;
  cursor: pointer;
  min-height: calc(var(--card-h) * 0.92);
}
.charm-more-r { transform: none; writing-mode: vertical-rl; }
.charm-more.is-dim { opacity: .38; }
.charm-strip-empty { margin: .4rem .2rem .6rem; }
.charm-card {
  flex: 0 0 auto;
  width: var(--card-w);
  height: var(--card-h);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: .15rem;
  padding: .28rem .22rem .22rem;
  border: 1px solid color-mix(in srgb, var(--charm-wash, #2de2e6) 40%, #ffffff55);
  border-radius: 10px;
  background:
    linear-gradient(180deg, #ffffff22, transparent 42%),
    color-mix(in srgb, color-mix(in srgb, var(--charm-wash, #2de2e6) 42%, #d8d4e0) 27%, transparent);
  box-shadow: 0 6px 16px #00000055;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.charm-card-face {
  flex: 1;
  width: 100%;
  display: grid;
  place-items: center;
  min-height: 0;
}
.charm-card-face .charm-sprite,
.charm-card-face .charm-fallback {
  max-width: 82%;
  max-height: 82%;
  width: auto;
  height: auto;
  object-fit: contain;
  font-size: clamp(1.6rem, 5vw, 2.6rem);
  line-height: 1;
}
.charm-card-name {
  font-size: .52rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--text) 78%, transparent);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.charm-fallback { font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif; }

.plaque-shell { position: relative; overflow: visible; }
.charm-cover {
  position: absolute;
  inset: 0;
  z-index: 18;
  display: grid;
  place-items: center;
  pointer-events: none;
  overflow: visible;
  background: none;
}
.charm-cover-spin {
  width: 168%;
  height: 168%;
  display: grid;
  place-items: center;
  transform-origin: center center;
  animation: charmCoverPlay var(--charm-ms, 4s) ease-in-out forwards;
  animation-fill-mode: both;
  animation-delay: inherit;
}
.charm-cover .charm-sprite,
.charm-cover .charm-fallback {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  font-size: clamp(3.4rem, 16vw, 7.2rem);
  line-height: 1;
  filter: drop-shadow(0 0 14px #ff2d9566);
}
.charm-cover.charm-cover-safe .charm-cover-spin {
  animation: none;
  opacity: .92;
  transform: scale(1.05);
}
@keyframes charmCoverPlay {
  0% { opacity: 0; transform: scale(.62) rotate(0deg); }
  14% { opacity: 1; transform: scale(.92) rotate(calc(var(--charm-spin, 12deg) * 0.18)); }
  72% { opacity: 1; transform: scale(1.18) rotate(var(--charm-spin, 12deg)); }
  100% { opacity: 0; transform: scale(1.32) rotate(var(--charm-spin, 12deg)); }
}

.charm-quick-panel {
  position: fixed;
  right: calc(var(--safe-r) + .45rem);
  bottom: calc(var(--hand-dock-h) + var(--safe-b) + .35rem);
  z-index: 19;
  width: min(13.5rem, 42vw);
  max-height: min(11.5rem, 30vh);
  display: none;
}
.charm-quick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .35rem .45rem .25rem .65rem;
  border-bottom: 1px solid #ffffff12;
  font-size: .72rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
}
.charm-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .25rem;
  padding: .4rem;
  overflow-y: auto;
  overscroll-behavior: contain;
}
.charm-quick-btn {
  aspect-ratio: 1;
  min-height: 2.35rem;
  padding: 0;
  border: 1px solid #ffffff18;
  border-radius: 10px;
  background: #ffffff08;
  font-size: 1.35rem;
  line-height: 1;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  image-rendering: auto;
}
.charm-quick-btn:hover { background: #ffffff18; border-color: #ffffff33; }
.charm-quick-btn:active { transform: scale(.94); }
.charm-quick-btn .charm-sprite {
  width: 1.65rem;
  height: 1.65rem;
  object-fit: contain;
  image-rendering: auto;
  pointer-events: none;
}

.bp-charm-preview {
  display: flex;
  align-items: center;
  justify-content: center;
}
.bp-charm-char {
  font-size: calc(var(--bp-tile) * 0.38);
  line-height: 1;
}
.bp-charm-sprite {
  width: calc(var(--bp-tile) * 0.52);
  height: calc(var(--bp-tile) * 0.52);
  object-fit: contain;
  image-rendering: auto;
}
.bp-tile.bp-pack-tile {
  border-color: #ffb02055;
  background: linear-gradient(165deg, #ffb02012, #7b5cff10);
}

.charm-burst {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  font-size: clamp(1.45rem, 5.2vw, 2.4rem);
  width: clamp(1.6rem, 6vw, 2.8rem);
  height: clamp(1.6rem, 6vw, 2.8rem);
  display: grid;
  place-items: center;
  line-height: 1;
  z-index: 13;
  pointer-events: none;
  font-family: "Segoe UI Emoji", "Apple Color Emoji", "Noto Color Emoji", sans-serif;
  filter: drop-shadow(0 0 8px #ff2d9566);
  animation: charmPop 2.4s ease-out forwards;
  max-width: min(12vw, 3.2rem);
  max-height: min(12vw, 3.2rem);
}
.charm-burst .charm-burst-sprite {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.seat[data-slot="west"] .charm-burst {
  right: calc(100% + clamp(2px, 0.8vw, 8px));
  left: auto;
}
.seat:not([data-slot="west"]) .charm-burst {
  left: calc(100% + clamp(2px, 0.8vw, 8px));
}
html.mobile-landscape .charm-burst {
  font-size: clamp(1.2rem, 4.5vw, 1.9rem);
  width: clamp(1.3rem, 5vw, 2.2rem);
  height: clamp(1.3rem, 5vw, 2.2rem);
}
@keyframes charmPop {
  0% { opacity: 0; transform: translateY(-50%) scale(.4); }
  12% { opacity: 1; transform: translateY(-50%) scale(1.15); }
  28% { transform: translateY(-50%) scale(1); }
  100% { opacity: 0; transform: translateY(-58%) scale(.92); }
}
html.photosensitive .charm-burst { animation: charmPopSafe 2.4s ease-out forwards; }
@keyframes charmPopSafe {
  0% { opacity: 0; }
  10% { opacity: 1; }
  100% { opacity: 0; }
}

.how-to-card { width: min(640px, 94vw); max-height: 86vh; overflow: auto; }
.how-to-section { margin: 0 0 1rem; }
.how-to-section-h {
  margin: 0 0 .55rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: .04em;
}
.how-to-steps { display: grid; gap: .85rem; }
.how-to-step {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9.5rem;
  gap: .7rem;
  align-items: start;
  padding-bottom: .75rem;
  border-bottom: 1px solid #ffffff14;
}
.how-to-step h3 { margin: 0 0 .25rem; font-size: 1rem; }
.how-to-step p { margin: 0; color: var(--muted); font-size: .88rem; line-height: 1.4; }
.how-to-gif {
  width: 9.5rem;
  aspect-ratio: 4 / 3;
  border-radius: 10px;
  border: 1px dashed #ffffff33;
  background: #12081f;
  object-fit: cover;
  display: grid;
  place-items: center;
  color: #ffffff55;
  font-size: .7rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.how-to-cards-h { margin: 1rem 0 .45rem; font-size: .95rem; }
.how-to-cards { display: grid; gap: .45rem; }
.how-to-card-row {
  display: grid;
  grid-template-columns: 4.2rem 1fr;
  gap: .45rem;
  font-size: .85rem;
}
.how-to-card-row strong { color: var(--cyan); font-family: "Syne", sans-serif; }
.how-to-card-row span { color: var(--muted); }

body.page-game .daily-fact { display: none; }
body.page-splash .room-code-hud { display: none !important; }

.top-center {
  justify-self: center;
  text-align: center;
  min-width: 0;
}
.top-right {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .55rem;
}

.zoom-cluster {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: .35rem;
}
.zoom-hint-chip {
  position: absolute;
  left: 0;
  top: calc(100% + .35rem);
  z-index: 6;
  display: flex;
  align-items: center;
  gap: .4rem;
  max-width: min(18rem, 72vw);
  padding: .35rem .45rem .35rem .55rem;
  border-radius: 8px;
  background: #14081eee;
  border: 1px solid #ff2d9588;
  box-shadow: 0 10px 24px #00000099;
  color: #f4eefc;
  font-size: .68rem;
  line-height: 1.3;
  letter-spacing: .02em;
  pointer-events: auto;
}
.zoom-hint-chip.hidden { display: none; }
.zoom-hint-chip button {
  flex-shrink: 0;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border-radius: 6px;
  font-size: 1rem;
  line-height: 1;
  background: #ff2d9522;
  border: 1px solid #ff2d9566;
  color: #ff9ec8;
}
.hand-zoom-cluster {
  opacity: .95;
}
.zoom-btn {
  width: 1.7rem;
  height: 1.7rem;
  padding: 0;
  border-radius: 8px;
  font-weight: 800;
  line-height: 1;
  background: #12081fcc;
  flex-shrink: 0;
}
#viewSlider {
  width: clamp(4.5rem, 12vw, 7.5rem);
  height: 1.15rem;
  padding: 0;
  accent-color: var(--magenta);
  background: transparent;
  border: none;
}
.view-mode-btn {
  min-width: 3.4rem;
  height: 1.55rem;
  padding: 0 .4rem;
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: 800;
  border-radius: 8px;
  background: #1a1028;
  border: 1px solid #ffffff33;
  color: #fff;
}
.zoom-cluster[data-mode="hand"] #viewSlider { accent-color: var(--cyan); }
.zoom-cluster[data-mode="ring"] #viewSlider { accent-color: var(--amber, #ffb020); }
.zoom-cluster[data-mode="stage"] .view-mode-btn { border-color: #ff2d9588; color: #ff9ec8; }
.zoom-cluster[data-mode="hand"] .view-mode-btn { border-color: #2de2e688; color: #2de2e6; }
.zoom-cluster[data-mode="ring"] .view-mode-btn { border-color: #ffb02088; color: #ffb020; }

.room-code-hud {
  appearance: none;
  -webkit-appearance: none;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: 1.15rem;
  background-color: transparent;
  background-image: linear-gradient(90deg, var(--magenta), var(--cyan), var(--amber), var(--violet), var(--magenta));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 0 12px #ff2d9544);
  animation: disco-hue 6s linear infinite;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.room-code-hud[data-copied] {
  filter: drop-shadow(0 0 12px #3ecf8e88);
}
@keyframes disco-hue {
  to { background-position: 200% center; }
}
.hud { font-size: .72rem; margin-top: .05rem; }
.muted { color: var(--muted); }

.itch-link {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .82rem;
  color: #fff;
  text-decoration: none;
  filter: drop-shadow(0 0 8px #ffffff88);
}
.itch-link:hover { filter: brightness(1.2) drop-shadow(0 0 12px #ffffffaa); }
.heart-link {
  color: #ff7a18;
  font-size: 1.35rem;
  text-decoration: none;
  line-height: 1;
  filter: drop-shadow(0 0 8px #ff7a1888);
}
.heart-link:hover { filter: brightness(1.15); }

.hamburger {
  width: 2.15rem;
  height: 2.15rem;
  padding: .35rem;
  display: grid;
  gap: 4px;
  place-content: center;
  background: transparent;
  border-color: #ffffff22;
}
.hamburger span {
  display: block;
  width: 1.15rem;
  height: 2px;
  background: #fff;
  border-radius: 2px;
}

.menu-panel {
  position: absolute;
  top: calc(var(--safe-t) + 3.4rem);
  right: calc(var(--safe-r) + .55rem);
  z-index: 14;
  display: flex;
  flex-direction: column;
  min-width: 13rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: .4rem;
  box-shadow: 0 16px 40px #000000aa;
}
.menu-panel button {
  text-align: left;
  background: transparent;
  border: none;
  padding: .55rem .7rem;
  border-radius: 10px;
}
.menu-panel button:hover:not(:disabled) { background: #ffffff12; }
.menu-panel button:disabled { opacity: .45; cursor: default; }
.menu-panel .soon {
  font-size: .68rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-left: .35rem;
}
.menu-panel .danger { color: #ff8aa8; }

.screen { flex: 1; min-height: 0; }
.hidden { display: none !important; }

.lobby-card {
  width: min(440px, 92vw);
  margin: 2.2rem auto;
  padding: 1.5rem 1.55rem 1.65rem;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 18px 50px #00000066, 0 0 40px #ff2d9522;
  backdrop-filter: blur(12px);
  animation: rise .45s ease-out;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}
.lobby-card h1 {
  font-family: "Syne", sans-serif;
  margin: 0 0 .35rem;
  font-size: 1.85rem;
}
.lede { color: var(--muted); margin: 0 0 1.1rem; line-height: 1.45; }
.lede.tight { margin-bottom: .7rem; font-size: .85rem; }
.market-micro-why {
  margin: -0.55rem 0 1.15rem;
  max-width: 36rem;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--muted);
}
.market-micro-why em {
  font-style: italic;
  color: #b8a4d8;
}
.feedback-card {
  width: min(60.5rem, 96vw);
  max-height: min(92vh, 40rem);
  overflow: auto;
}
.feedback-card .feedback-to {
  color: #2de2e6;
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: nowrap;
}
@media (max-width: 520px) {
  .feedback-card .feedback-to {
    white-space: normal;
    overflow-wrap: anywhere;
  }
}
.feedback-form label {
  margin-bottom: .7rem;
}
.feedback-fields {
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}
.feedback-form.feedback-locked .feedback-fields {
  opacity: .38;
  filter: grayscale(.7) brightness(.72);
  pointer-events: none;
  user-select: none;
}
.feedback-form.feedback-locked #feedbackSubmit {
  opacity: .38;
  filter: grayscale(.7) brightness(.72);
  pointer-events: none;
  cursor: not-allowed;
}
.feedback-gate {
  margin: 0 0 .85rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: #ffffff10;
  border: 1px solid #ffffff28;
  color: #d7dde8;
  font-size: .88rem;
  line-height: 1.35;
}
.feedback-actions {
  margin-top: .35rem;
}
.feedback-form textarea {
  resize: vertical;
  min-height: 7rem;
  font: inherit;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #12081f;
  color: var(--text);
  padding: .58rem .75rem;
}
.feedback-consent {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  font-size: .82rem;
  line-height: 1.4;
  color: #c8d4e0;
  cursor: pointer;
}
.feedback-form .check-row input[type="checkbox"] {
  appearance: auto;
  -webkit-appearance: checkbox;
  width: 1.2rem;
  height: 1.2rem;
  min-width: 1.2rem;
  margin: .12rem 0 0;
  padding: 0;
  flex-shrink: 0;
  background: #fff;
  border: 2px solid var(--magenta);
  accent-color: var(--magenta);
  cursor: pointer;
}
.feedback-hint {
  margin: -0.35rem 0 .75rem;
  font-size: .75rem;
}
.feedback-status {
  margin: 0 0 .75rem;
  min-height: 1.2em;
  font-size: .85rem;
}
.feedback-status.ok { color: #3ecf8e; }
.feedback-status.err { color: #ff8aa8; }
label { display: grid; gap: .35rem; font-size: .85rem; color: var(--muted); margin-bottom: .8rem; }
input, select, button {
  font: inherit;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #12081f;
  color: var(--text);
  padding: .58rem .75rem;
}
button { cursor: pointer; transition: transform .12s, filter .12s; }
button.primary {
  background: linear-gradient(120deg, var(--magenta), var(--violet));
  border: none;
  font-weight: 700;
  box-shadow: 0 8px 24px #ff2d9544;
}
button.ghost { background: transparent; }
button:hover { filter: brightness(1.1); transform: translateY(-1px); }
.actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.join-row { display: flex; gap: .5rem; margin-top: 1rem; }
.code { text-transform: uppercase; letter-spacing: .2em; width: 7rem; text-align: center; }
.code-big { font-size: 1.2rem; margin-bottom: 0; }
.code-big span { font-family: "Syne", sans-serif; letter-spacing: .18em; color: var(--cyan); }
.lobby-tutorial-btn {
  display: block;
  margin: 0;
  width: fit-content;
  font-size: 1.22rem;
  letter-spacing: .04em;
  text-transform: none;
  padding: .34rem .84rem;
}
.lobby-panel { margin-top: 1.2rem; padding-top: 1rem; border-top: 1px solid var(--line); }
#lobbyList { list-style: none; padding: 0; margin: 0 0 .8rem; }
#lobbyList li {
  display: flex; align-items: center; gap: .55rem;
  padding: .4rem 0; font-size: .95rem;
}
.dot { width: 10px; height: 10px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }

#screen-game {
  display: flex;
  flex-direction: column;
  position: relative;
  min-height: 0;
  flex: 1;
}

.floor-slot {
  position: relative;
  flex: 1;
  min-height: 0;
  container-type: size;
  display: grid;
  place-items: center;
  overflow: visible;
  touch-action: none;
  padding: clamp(0.35rem, 1.2vmin, 0.75rem);
  padding-bottom: calc(var(--hand-dock-h) + var(--safe-b));
  z-index: 2;
  pointer-events: none;
}
#screen-game.spectating .floor-slot {
  padding-bottom: calc(5.6rem + var(--safe-b));
}

.card-help {
  position: absolute;
  left: .55rem;
  top: .45rem;
  z-index: 6;
  max-width: min(16.5rem, 42vw);
  padding: .45rem .55rem .5rem;
  border-radius: 10px;
  background: #12081cd4;
  border: 1px solid #ffffff22;
  box-shadow: 0 8px 22px #00000066;
  pointer-events: none;
}
.card-help-name {
  font-weight: 700;
  font-size: 1.05rem;
  margin: 0 0 .18rem;
  color: #fff;
}
.card-help-body {
  font-size: .72rem;
  line-height: 1.35;
  color: var(--muted);
}

.log-drawer {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 14;
  display: none;
  align-items: stretch;
  pointer-events: none;
  max-height: min(58vh, 420px);
}
.log-drawer-tab,
.log-drawer-panel {
  pointer-events: auto;
}
body.page-lobby .log-drawer,
body.page-game .log-drawer {
  display: flex;
}
.log-drawer-tab {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  padding: .55rem .28rem;
  border-radius: 0 10px 10px 0;
  border: 1px solid #ffffff33;
  border-left: none;
  background: #1a1028ee;
  color: #fff;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: .12em;
  font-size: .72rem;
  min-width: 1.7rem;
  flex-shrink: 0;
}
.log-drawer-tab:hover {
  filter: brightness(1.12);
  transform: rotate(180deg);
}
.log-drawer-tab.has-unread {
  background: #2de2e633;
  border-color: #2de2e6;
  box-shadow: 0 0 12px #2de2e666;
  color: #2de2e6;
}
.log-drawer-panel {
  width: 0;
  overflow: hidden;
  background: #12081cf2;
  border: 1px solid #ffffff22;
  border-left: none;
  border-radius: 0 12px 12px 0;
  box-shadow: 8px 0 28px #00000066;
  opacity: 0;
  transition: width .22s ease, opacity .18s ease;
}
.log-drawer.open .log-drawer-panel {
  width: min(16.5rem, 44vw);
  opacity: 0.8;
  padding: .55rem .65rem .65rem;
}
.log-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .4rem;
  margin-bottom: .4rem;
}
.log-drawer.open .chat-pane {
  max-height: min(38vh, 280px);
  min-height: min(38vh, 280px);
}
.lobby-chat-form {
  display: flex;
  align-items: center;
  gap: .35rem;
  margin-top: .45rem;
}
.lobby-chat-form.hidden { display: none; }
.lobby-chat-form input {
  flex: 1;
  min-width: 0;
  padding: .35rem .45rem;
}
.lobby-chat-form button {
  flex-shrink: 0;
  padding: .35rem .55rem;
}
#chatLines .chat-line {
  display: grid;
  gap: .1rem;
  margin-bottom: .4rem;
  color: #efe8f8;
}
#chatLines .chat-line-name {
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .04em;
}

.floor-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  width: min(96%, calc(100dvh - 11rem));
  max-width: 100%;
  max-height: 100%;
  height: auto;
}
@supports (width: 1cqw) {
  .floor-wrap {
    width: min(94cqw, 92cqh);
    height: min(94cqw, 92cqh);
  }
}

.floor-wrap::before {
  content: "";
  position: absolute;
  inset: 1.5%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 50% 45%, #3a1f5e 0%, var(--floor) 42%, #12081c 72%, transparent 73%),
    repeating-conic-gradient(
      from 0deg,
      #ff2d9518 0deg 12deg,
      #2de2e618 12deg 24deg,
      #ffb02018 24deg 36deg,
      #7b5cff18 36deg 48deg
    );
  box-shadow:
    inset 0 0 0 2px #ffffff18,
    inset 0 0 60px #00000088,
    0 0 40px #ff2d9544,
    0 0 70px #2de2e633,
    0 0 100px #7b5cff33,
    0 0 130px #ffb02022;
  pointer-events: none;
  z-index: 0;
}

.table-stage {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  transform: translate(var(--stage-pan-x, 0px), var(--stage-pan-y, 0px)) scale(var(--stage-zoom));
  z-index: 2;
  pointer-events: none;
}
body.table-drag-on .floor-wrap {
  pointer-events: auto;
  cursor: grab;
}
body.table-drag-on .floor-wrap.is-panning {
  cursor: grabbing;
}
.recenter-btn {
  position: absolute;
  right: .55rem;
  top: .45rem;
  z-index: 8;
  pointer-events: auto;
  padding: .32rem .7rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  background: #1a1028ee;
  border: 1px solid #ffffff44;
  box-shadow: 0 6px 16px #00000066;
}

.ring { position: absolute; inset: 0; z-index: 4; }

.seat {
  position: absolute;
  left: 50%; top: 50%;
  width: 22%;
  max-width: 138px;
  min-width: 82px;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(var(--r)) rotate(calc(-1 * var(--a)));
  text-align: center;
  transition: transform .7s ease-in-out;
  z-index: 5;
  overflow: visible;
  pointer-events: auto;
}
.seat-card,
.plaque-shell {
  position: relative;
  z-index: 1;
  overflow: visible;
  min-height: 158px;
  width: 100%;
}
.seat-card .plaque,
.plaque-shell .plaque,
.plaque {
  padding: var(--shape-pad, .15rem .3rem .2rem);
  min-height: var(--shape-min-h, 158px);
  max-height: var(--shape-min-h, 158px);
  height: var(--shape-min-h, 158px);
  box-sizing: border-box;
  border-radius: var(--shape-radius, 16px);
  aspect-ratio: var(--shape-aspect, auto);
  background: transparent;
  border: var(--shape-border-w, 2px) solid var(--plaque-border, color-mix(in srgb, var(--c, #fff) 80%, #ffffff88));
  box-shadow:
    0 10px 28px #00000066,
    0 0 16px color-mix(in srgb, var(--plaque-border, var(--c)) 45%, transparent),
    inset 0 1px 0 #ffffff33;
  overflow: hidden;
  position: relative;
  z-index: 1;
}
/* Circle-family chassis: respect --shape-max-w so they do not outgrow the seat. */
.plaque-shell[data-shape="sphere"],
.plaque-shell[data-shape="roundedCube"] {
  max-width: var(--shape-max-w, 100%);
  margin-inline: auto;
}
.plaque[data-shape="sphere"],
.plaque[data-shape="roundedCube"] {
  max-width: var(--shape-max-w, 100%);
  width: 100%;
  height: auto;
  min-height: 0;
  max-height: none;
  margin-inline: auto;
}
/* Path-stroke chassis: clip fill only; outline is an SVG polygon (CSS border cannot follow clip-path). */
.plaque[data-stroke="path"] {
  border: none !important;
  box-shadow: none !important;
  background: transparent;
  overflow: visible;
  border-radius: 0;
  -webkit-clip-path: none !important;
  clip-path: none !important;
  filter: none;
}
.plaque[data-stroke="path"] .plaque-bg {
  border-radius: 0;
  box-shadow: none;
  -webkit-clip-path: var(--shape-clip);
  clip-path: var(--shape-clip);
}
.plaque-path-stroke {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 4;
  pointer-events: none;
  overflow: visible;
}
.plaque-path-stroke polygon {
  fill: none;
  stroke: var(--plaque-border, var(--c, #ff2d95));
  stroke-width: 2.4;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--plaque-border, var(--c, #ff2d95)) 55%, transparent));
}
.plaque[data-border-style="dashed"] {
  border-style: dashed;
}
.plaque-shell .name-plate {
  z-index: 6;
  top: var(--shape-np-top, -16px);
}
.plaque-bg {
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  background: var(--plaque-bg, linear-gradient(180deg, #4a2c72ee, #26143fcc));
  overflow: hidden;
  backdrop-filter: blur(6px);
}
.plaque-bg.has-pattern::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .92;
  pointer-events: none;
}
.plaque-bg[data-pattern="neon-grid"]::before {
  background:
    linear-gradient(#ff2d9522 1px, transparent 1px),
    linear-gradient(90deg, #2de2e622 1px, transparent 1px),
    radial-gradient(circle at 30% 20%, #ff2d9533, transparent 55%);
  background-size: 14px 14px, 14px 14px, 100% 100%;
}
.plaque-bg[data-pattern="vinyl-rings"]::before {
  background:
    repeating-radial-gradient(circle at 50% 50%, #d4af3722 0 3px, transparent 4px 10px),
    radial-gradient(circle at 50% 50%, #120c08 0 18%, transparent 19%);
}
.plaque-bg[data-pattern="strobe-dots"]::before {
  background-image:
    radial-gradient(circle at 20% 30%, #fff 0 1.2px, transparent 2px),
    radial-gradient(circle at 70% 40%, #ff2d95 0 1px, transparent 2px),
    radial-gradient(circle at 40% 75%, #2de2e6 0 1.1px, transparent 2px),
    radial-gradient(circle at 80% 70%, #ffb020 0 1px, transparent 2px);
  background-size: 28px 28px;
}
.plaque-bg[data-pattern="haze-waves"]::before {
  background:
    repeating-linear-gradient(115deg, #b8a0d828 0 8px, transparent 8px 18px),
    radial-gradient(ellipse at 50% 0%, #7b5cff33, transparent 60%);
}
.plaque-bg[data-pattern="bass-bars"]::before {
  background:
    repeating-linear-gradient(90deg, #ffb02033 0 4px, transparent 4px 12px),
    linear-gradient(180deg, transparent 40%, #ffb02022);
}
.plaque-bg[data-pattern="disco-tiles"]::before {
  background:
    linear-gradient(45deg, #7b5cff33 25%, transparent 25%),
    linear-gradient(-45deg, #ff2d9533 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #2de2e633 75%),
    linear-gradient(-45deg, transparent 75%, #ffb02033 75%);
  background-size: 18px 18px;
  background-position: 0 0, 0 9px, 9px -9px, -9px 0;
}
.plaque-bg[data-pattern="chrome-scan"]::before {
  background:
    repeating-linear-gradient(180deg, #c8d4e022 0 2px, transparent 2px 7px),
    linear-gradient(120deg, #ffffff18, transparent 40%, #c8d4e022);
}
.plaque-bg[data-pattern="pulse-rings"]::before {
  background:
    repeating-radial-gradient(circle at 50% 60%, #2de2e633 0 2px, transparent 3px 12px);
}
.plaque-bg[data-pattern="glitter-dust"]::before {
  background-image:
    radial-gradient(circle at 15% 20%, #fff 0 1px, transparent 1.6px),
    radial-gradient(circle at 60% 35%, #e0a0ff 0 1.2px, transparent 2px),
    radial-gradient(circle at 35% 70%, #ff2d95 0 1px, transparent 1.8px),
    radial-gradient(circle at 80% 65%, #fff8 0 1px, transparent 1.5px);
  background-size: 22px 22px, 30px 30px, 26px 26px, 18px 18px;
}
.plaque-bg[data-pattern="capsule-mesh"]::before {
  background:
    linear-gradient(#00ffc822 1px, transparent 1px),
    linear-gradient(90deg, #00ffc822 1px, transparent 1px),
    radial-gradient(circle at 70% 30%, #00ffc828, transparent 50%);
  background-size: 10px 10px, 10px 10px, 100% 100%;
}
.bp-chassis-sil.bp-pattern-sil[data-pattern]::before {
  content: "";
  position: absolute;
  inset: 8%;
  border-radius: inherit;
  opacity: .85;
  pointer-events: none;
}
.bp-chassis-sil.bp-pattern-sil[data-pattern="neon-grid"]::before {
  background: linear-gradient(#ff2d9544 1px, transparent 1px), linear-gradient(90deg, #2de2e644 1px, transparent 1px);
  background-size: 8px 8px;
}
.bp-chassis-sil.bp-pattern-sil[data-pattern="vinyl-rings"]::before {
  background: repeating-radial-gradient(circle at 50% 50%, #d4af3744 0 2px, transparent 3px 7px);
}
.bp-chassis-sil.bp-pattern-sil[data-pattern="strobe-dots"]::before,
.bp-chassis-sil.bp-pattern-sil[data-pattern="glitter-dust"]::before {
  background-image: radial-gradient(circle at 30% 30%, #fff 0 1px, transparent 1.5px), radial-gradient(circle at 70% 60%, #ff2d95 0 1px, transparent 1.5px);
  background-size: 10px 10px;
}
.bp-chassis-sil.bp-pattern-sil[data-pattern="haze-waves"]::before,
.bp-chassis-sil.bp-pattern-sil[data-pattern="chrome-scan"]::before {
  background: repeating-linear-gradient(115deg, #ffffff33 0 4px, transparent 4px 10px);
}
.bp-chassis-sil.bp-pattern-sil[data-pattern="bass-bars"]::before {
  background: repeating-linear-gradient(90deg, #ffb02055 0 3px, transparent 3px 8px);
}
.bp-chassis-sil.bp-pattern-sil[data-pattern="disco-tiles"]::before {
  background: linear-gradient(45deg, #7b5cff55 25%, transparent 25%), linear-gradient(-45deg, #ff2d9555 25%, transparent 25%);
  background-size: 10px 10px;
}
.bp-chassis-sil.bp-pattern-sil[data-pattern="pulse-rings"]::before {
  background: repeating-radial-gradient(circle at 50% 50%, #2de2e655 0 2px, transparent 3px 8px);
}
.bp-chassis-sil.bp-pattern-sil[data-pattern="capsule-mesh"]::before {
  background: linear-gradient(#00ffc855 1px, transparent 1px), linear-gradient(90deg, #00ffc855 1px, transparent 1px);
  background-size: 7px 7px;
}
.plaque-vfx {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: inherit;
}
.plaque[data-stroke="path"] .plaque-vfx {
  border-radius: 0;
  -webkit-clip-path: var(--shape-clip);
  clip-path: var(--shape-clip);
}
.plaque-shell[data-vfx]:not([data-vfx="none"]):not([data-vfx=""]) .plaque-bg {
  background-color: color-mix(in srgb, var(--plaque-bg, #26143f) 78%, transparent);
}
.plaque-fg {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 100%;
  height: 100%;
  pointer-events: none;
}
.plaque[data-stroke="path"] .plaque-fg {
  min-height: 100%;
}
/* Name plate — one structure for all designs (your sketch):
   circle overlaps left of bar; designs only restyle the bar.
   Near full plaque width so 10–20 char name / tagline fit. */
.name-plate {
  --np-icon: 3rem;
  --np-bar-h: 1.72rem;
  --np-overlap: 1.35rem;
  --np-border: var(--plaque-border, var(--c, #ff2d95));
  --np-bg: #14081c;
  position: absolute;
  top: -16px;
  left: -18px;
  right: 2%;
  width: auto;
  z-index: 6;
  box-sizing: border-box;
  height: var(--np-icon);
  background: transparent;
  border: 0;
  box-shadow: none;
  padding: 0;
  pointer-events: none;
  overflow: visible;
}
.name-plate-vfx {
  position: absolute;
  left: calc(var(--np-overlap) - 8%);
  right: -8%;
  top: 50%;
  height: calc(var(--np-bar-h) + 14px);
  transform: translateY(-50%);
  z-index: 0;
  pointer-events: none;
  overflow: visible;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 50%, transparent 100%);
}
.name-plate > .avatar,
.plaque .name-plate > .avatar {
  position: absolute;
  left: 0;
  top: 50%;
  z-index: 2;
  width: var(--np-icon) !important;
  height: var(--np-icon) !important;
  min-width: var(--np-icon);
  min-height: var(--np-icon);
  margin: 0 !important;
  transform: translateY(-50%) !important;
  font-size: 1.08rem;
  border-width: 2px;
  flex: none;
}
.name-tag {
  position: absolute;
  left: var(--np-overlap);
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
  box-sizing: border-box;
  height: var(--np-bar-h);
  min-width: 0;
  padding: .14rem .45rem .12rem calc(var(--np-icon) - var(--np-overlap) + .28rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0;
  text-align: left;
  overflow: hidden;
  background: color-mix(in srgb, var(--np-bg, #14081c) 91%, transparent);
  border: 1px solid color-mix(in srgb, var(--np-border, var(--plaque-border, var(--c, #ff2d95))) 70%, #fff);
  box-shadow: 0 4px 12px #00000088, 0 0 10px color-mix(in srgb, var(--np-border, var(--plaque-border, var(--c))) 35%, transparent);
  border-radius: 3px 10px 10px 3px;
}
.name-tag .name-row {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: row;
  gap: .18rem;
  min-width: 0;
  height: .95rem;
  flex-shrink: 0;
}
.name-tag .name {
  text-align: left;
  flex: 1 1 auto;
  min-width: 0;
  font-size: .72rem;
  line-height: 1.05;
}
.name-tag .badge { font-size: .48rem; padding: .02rem .22rem; }
.name-tag .tagline {
  display: block;
  margin: 0;
  text-align: left;
  min-height: .72rem;
  height: .72rem;
  line-height: .72rem;
  font-size: .5rem;
}
/* Designs = look only (bar chrome). Structure stays icon-over-bar. */
.name-plate[data-plate="pin"] .name-tag {
  border-radius: 3px 11px 11px 3px;
}
.name-plate[data-plate="ticket"] .name-tag {
  border-radius: 2px;
  border-style: dashed;
  background: #1a1008ee;
}
.name-plate[data-plate="vinyl"] .name-tag {
  border-radius: 2px;
  border-color: #d4af37;
  box-shadow: inset 0 0 0 1px #d4af3755, 0 4px 10px #00000088;
  background: #120c08ee;
}
.name-plate[data-plate="neon"] .name-tag {
  border-radius: 999px;
  box-shadow: 0 0 12px #ff2d9566, 0 4px 10px #00000088;
}
.name-plate[data-plate="chrome"] .name-tag {
  border-radius: 4px;
  background: linear-gradient(180deg, #cfd8e0ee, #6a7380ee);
  border-color: #e8eef4;
}
.name-plate[data-plate="chrome"] .name,
.name-plate[data-plate="chrome"] .tagline {
  color: var(--name-color, #111);
  text-shadow: none;
}
.name-plate[data-plate="arcade"] .name-tag {
  border-radius: 8px 8px 3px 3px;
  border-width: 2px;
  background: #081418ee;
}
.plaque-bg.has-photo {
  background-image: var(--plaque-photo);
  background-size: cover;
  background-position: center;
}
.plaque-bg.has-alpha {
  -webkit-mask-image: var(--plaque-alpha);
  mask-image: var(--plaque-alpha);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-mode: luminance;
  mask-mode: luminance;
}
.plaque[data-shape="sphere"] .plaque-fg,
.plaque[data-shape="roundedCube"] .plaque-fg {
  min-height: 0;
}
.plaque[data-notch="ticket"] {
  background:
    radial-gradient(circle at 0 50%, transparent 0 7px, transparent 8px),
    radial-gradient(circle at 100% 50%, transparent 0 7px, transparent 8px);
}
.plaque[data-notch="ticket"] .plaque-bg {
  background-image:
    radial-gradient(circle at 0 50%, #0a0614 0 7px, transparent 8px),
    radial-gradient(circle at 100% 50%, #0a0614 0 7px, transparent 8px);
  background-blend-mode: normal;
}
.plaque[data-shape="capsule"] .plaque-fg {
  min-height: var(--shape-min-h, 158px);
}

/* Plaque / name-plate VFX (behind art; brim past border) */
.plaque-vfx::before,
.plaque-vfx::after,
.name-plate-vfx::before,
.name-plate-vfx::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.plaque-shell[data-vfx="stars"] .plaque-vfx::before,
.name-plate[data-vfx="stars"] .name-plate-vfx::before {
  background-image:
    radial-gradient(circle at 18% 22%, #fff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 72% 30%, #ff2d95 0 1px, transparent 1.6px),
    radial-gradient(circle at 40% 68%, #2de2e6 0 1.1px, transparent 1.7px),
    radial-gradient(circle at 82% 72%, #ffb020 0 1px, transparent 1.5px),
    radial-gradient(circle at 55% 18%, #fff8 0 1px, transparent 1.5px);
  animation: vfxTwinkle 1.8s ease-in-out infinite alternate;
  opacity: .9;
}
.plaque-shell[data-vfx="stars"] .plaque-vfx::after,
.name-plate[data-vfx="stars"] .name-plate-vfx::after {
  background-image:
    radial-gradient(circle at 28% 48%, #fff 0 1px, transparent 1.5px),
    radial-gradient(circle at 62% 58%, #7b5cff 0 1.2px, transparent 1.8px),
    radial-gradient(circle at 12% 78%, #ffffffaa 0 1px, transparent 1.5px);
  animation: vfxTwinkle 2.4s ease-in-out infinite alternate-reverse;
}
@keyframes vfxTwinkle {
  from { opacity: .35; filter: brightness(0.85); }
  to { opacity: 1; filter: brightness(1.25); }
}

.plaque-shell[data-vfx="soundwave"] .plaque-vfx::before,
.name-plate[data-vfx="soundwave"] .name-plate-vfx::before {
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 5px,
      color-mix(in srgb, var(--plaque-border, #2de2e6) 55%, transparent) 5px 7px
    );
  mask-image: linear-gradient(180deg, transparent 10%, #000 35% 65%, transparent 90%);
  -webkit-mask-image: linear-gradient(180deg, transparent 10%, #000 35% 65%, transparent 90%);
  animation: vfxBars 0.9s ease-in-out infinite alternate;
  transform-origin: center;
}
@keyframes vfxBars {
  from { transform: scaleY(0.45); opacity: .55; }
  to { transform: scaleY(1.05); opacity: .95; }
}

.plaque-shell[data-vfx="ripples"] .plaque-vfx::before,
.plaque-shell[data-vfx="ripples"] .plaque-vfx::after,
.name-plate[data-vfx="ripples"] .name-plate-vfx::before,
.name-plate[data-vfx="ripples"] .name-plate-vfx::after {
  border-radius: 50%;
  border: 2px solid color-mix(in srgb, var(--plaque-border, #2de2e6) 70%, transparent);
  inset: 18%;
  animation: vfxRipple 2.4s ease-out infinite;
  opacity: 0;
}
.plaque-shell[data-vfx="ripples"] .plaque-vfx::after,
.name-plate[data-vfx="ripples"] .name-plate-vfx::after {
  animation-delay: 1.2s;
}
@keyframes vfxRipple {
  0% { transform: scale(0.35); opacity: .75; }
  100% { transform: scale(1.45); opacity: 0; }
}

.plaque-shell[data-vfx="sonic"] .plaque-vfx::before,
.name-plate[data-vfx="sonic"] .name-plate-vfx::before {
  background: linear-gradient(
    115deg,
    transparent 20%,
    color-mix(in srgb, var(--plaque-border, #7b5cff) 55%, transparent) 48%,
    transparent 72%
  );
  animation: vfxSonic 2.2s linear infinite;
}
@keyframes vfxSonic {
  from { transform: translateX(-35%); opacity: .2; }
  40% { opacity: .85; }
  to { transform: translateX(35%); opacity: .2; }
}

.plaque-shell[data-vfx="sonar"] .plaque-vfx::before,
.name-plate[data-vfx="sonar"] .name-plate-vfx::before {
  background: conic-gradient(
    from 0deg,
    color-mix(in srgb, var(--plaque-border, #2de2e6) 70%, transparent) 0 12%,
    transparent 12% 100%
  );
  border-radius: 50%;
  inset: 8%;
  animation: vfxSonar 2.8s linear infinite;
  opacity: .55;
  mask-image: radial-gradient(circle, transparent 28%, #000 32% 70%, transparent 74%);
  -webkit-mask-image: radial-gradient(circle, transparent 28%, #000 32% 70%, transparent 74%);
}
@keyframes vfxSonar {
  to { transform: rotate(360deg); }
}

.plaque-shell[data-vfx="arcade"] .plaque-vfx::before,
.name-plate[data-vfx="arcade"] .name-plate-vfx::before {
  background:
    repeating-linear-gradient(0deg, #ffffff14 0 1px, transparent 1px 4px),
    radial-gradient(circle at 20% 30%, #ffb02088 0 1.5px, transparent 2px),
    radial-gradient(circle at 70% 60%, #ff2d9588 0 1.5px, transparent 2px),
    radial-gradient(circle at 45% 75%, #2de2e688 0 1.2px, transparent 2px);
  animation: vfxArcade 1.6s steps(2) infinite;
}
@keyframes vfxArcade {
  0%, 49% { filter: brightness(1); opacity: .7; }
  50%, 100% { filter: brightness(1.2); opacity: .95; }
}

.name-plate[data-vfx]:not([data-vfx="none"]) .name-plate-vfx {
  filter: saturate(1.1);
}

/* Tagline styles */
.tagline[data-tagline-style="glow"] {
  text-shadow: 0 0 6px #ff2d95aa, 0 0 12px #2de2e666;
}
.tagline[data-tagline-style="rainbow"] {
  background: linear-gradient(90deg, #ff2d95, #ffb020, #2de2e6, #7b5cff, #ff2d95);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tagRainbow 3.2s linear infinite;
}
@keyframes tagRainbow {
  to { background-position: 220% 0; }
}
.tagline[data-tagline-style="neonPulse"] {
  color: #2de2e6;
  text-shadow: 0 0 6px #2de2e6, 0 0 14px #2de2e688;
  animation: tagNeon 1.4s ease-in-out infinite alternate;
}
@keyframes tagNeon {
  from { opacity: .65; text-shadow: 0 0 4px #2de2e6; }
  to { opacity: 1; text-shadow: 0 0 10px #2de2e6, 0 0 18px #ff2d9588; }
}
.tagline[data-tagline-style="chromeSheen"] {
  background: linear-gradient(110deg, #9aa4b2 0%, #fff 35%, #6a7380 55%, #e8eef4 75%, #9aa4b2 100%);
  background-size: 220% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: tagChrome 3.6s ease-in-out infinite;
}
@keyframes tagChrome {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

html.photosensitive .plaque-vfx,
html.photosensitive .name-plate-vfx,
html.photosensitive .tagline[data-tagline-style] {
  animation: none !important;
}
html.photosensitive .plaque-vfx::before,
html.photosensitive .plaque-vfx::after,
html.photosensitive .name-plate-vfx::before,
html.photosensitive .name-plate-vfx::after {
  animation: none !important;
}
html.photosensitive .tagline[data-tagline-style="rainbow"],
html.photosensitive .tagline[data-tagline-style="chromeSheen"],
html.photosensitive .tagline[data-tagline-style="neonPulse"] {
  animation: none !important;
  color: inherit;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
  text-shadow: none;
}

.plaque .plaque-bg.has-custom {
  background-color: var(--plaque-bg, #26143f);
  background-image: var(--plaque-custom);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.plaque .plaque-bg.has-custom.has-photo {
  background-image: var(--plaque-custom), var(--plaque-photo);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* Spotlight halo lives on the shell so path-stroke plaques (inline box-shadow:none
   + overflow/filter clip on .plaque) still show whose turn it is. No blink. */
.seat.active {
  z-index: 6;
}
.seat.active .plaque-shell {
  filter:
    drop-shadow(0 0 2px #ffffffee)
    drop-shadow(0 0 10px var(--c, #ff2d95))
    drop-shadow(0 0 22px var(--c, #ff2d95))
    drop-shadow(0 0 34px #2de2e688);
}
.seat.active .seat-card .plaque,
.seat.active .plaque-shell .plaque:not([data-stroke="path"]),
.seat.active .plaque:not([data-stroke="path"]) {
  border-color: #fff;
  box-shadow:
    0 0 0 3px #ffffffcc,
    0 0 22px var(--c, #ff2d95),
    0 10px 28px #00000066;
}
.seat.active .plaque[data-stroke="path"] .plaque-path-stroke polygon {
  stroke: #fff;
  stroke-width: 3.4;
  filter:
    drop-shadow(0 0 2px #fff)
    drop-shadow(0 0 8px var(--c, #ff2d95))
    drop-shadow(0 0 16px var(--c, #ff2d95));
}
.plaque-shell.plaque-hit .plaque,
.plaque.plaque-hit {
  animation: plaqueHit .9s ease-out;
}
.seat.sat-out .plaque-shell .plaque,
.seat.sat-out .plaque,
.plaque-shell.plaque-sat-out .plaque,
.plaque.plaque-sat-out {
  filter: grayscale(0.85) brightness(0.45);
  opacity: 0.55;
  box-shadow: none;
}
.plaque-afk {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: .18em;
  font-size: .95rem;
  color: #fff;
  text-shadow: 0 2px 8px #000;
  z-index: 3;
  pointer-events: none;
}
.plaque-strike {
  position: absolute;
  top: -6px;
  right: -6px;
  left: auto;
  width: 1.35rem;
  height: 1.35rem;
  border-radius: 4px;
  background: #c81e1e;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  line-height: 1.35rem;
  text-align: center;
  z-index: 4;
  box-shadow: 0 2px 8px #00000088;
  pointer-events: none;
}
@keyframes plaqueHit {
  0% { filter: brightness(1.8) saturate(1.6); box-shadow: 0 0 28px #ff2d95; }
  100% { filter: none; }
}
.seat .avatar,
.plaque-shell .avatar,
.plaque .avatar {
  width: clamp(36px, 8vmin, 52px);
  height: clamp(36px, 8vmin, 52px);
  margin: 0 auto .3rem;
  border-radius: 50%;
  border: 3px solid var(--c, #fff);
  background:
    radial-gradient(circle at 35% 30%, #ffffff66, transparent 45%),
    linear-gradient(145deg, #6a3c8c, #2a1450);
  display: grid; place-items: center;
  font-family: "Syne", sans-serif;
  font-weight: 800; font-size: 1rem;
  letter-spacing: .02em;
  color: #fff;
  box-shadow: 0 0 12px color-mix(in srgb, var(--c) 50%, transparent), inset 0 -6px 12px #00000044;
  transition: box-shadow .25s, transform .25s;
  overflow: hidden;
}
.plaque-shell > .name-plate > .avatar {
  margin: 0 !important;
  border-color: var(--np-border, var(--c, #fff));
}
.avatar.has-pfp img,
.bp-avatar-sil.has-pfp img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
}
.avatar[data-avatar="neon"] {
  background: radial-gradient(circle at 40% 35%, #fff8, transparent 40%), radial-gradient(circle, #ff2d95, #2a0840);
  box-shadow: 0 0 14px #ff2d9588;
}
.avatar[data-avatar="vinyl"] {
  background:
    radial-gradient(circle at 50% 50%, #1a1008 0 28%, transparent 29%),
    repeating-radial-gradient(circle at 50% 50%, #d4af37 0 2px, #120c08 3px 6px);
  border-color: #d4af37;
}
.avatar[data-avatar="orb"] {
  background: radial-gradient(circle at 30% 28%, #ffffffaa, #2de2e6 35%, #083048 70%, #041018);
}
.avatar[data-avatar="star"]::before {
  content: "★";
  font-size: 1.15em;
  line-height: 1;
  color: #ffb020;
  text-shadow: 0 0 8px #ffb02088;
}
.avatar[data-avatar="star"] {
  background: linear-gradient(145deg, #3a2060, #14081c);
}
.avatar[data-avatar="pulse"] {
  background: radial-gradient(circle at 50% 50%, #2de2e6 0 18%, #061820 45%, #2de2e655 70%, #061820);
  box-shadow: 0 0 16px #2de2e688;
}
.avatar[data-avatar="chrome"] {
  background: linear-gradient(145deg, #f4f7fa, #6a7380 45%, #cfd8e0 70%, #4a5560);
  border-color: #e8eef4;
  color: #222;
}
.bp-avatar-sil {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 2px solid #ff2d95;
  background: linear-gradient(145deg, #6a3c8c, #2a1450);
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 800;
  overflow: hidden;
}
.bp-avatar-sil[data-avatar="discord"] { background: #5865f2; }
.bp-avatar-sil[data-avatar="neon"] {
  background: radial-gradient(circle, #ff2d95, #2a0840);
  box-shadow: 0 0 10px #ff2d9588;
}
.bp-avatar-sil[data-avatar="vinyl"] {
  background: repeating-radial-gradient(circle at 50% 50%, #d4af37 0 2px, #120c08 3px 5px);
  border-color: #d4af37;
}
.bp-avatar-sil[data-avatar="orb"] {
  background: radial-gradient(circle at 30% 28%, #fff, #2de2e6 40%, #041018);
}
.bp-avatar-sil[data-avatar="star"]::before { content: "★"; color: #ffb020; }
.bp-avatar-sil[data-avatar="pulse"] {
  background: radial-gradient(circle, #2de2e6 0 20%, #061820 55%);
}
.bp-avatar-sil[data-avatar="chrome"] {
  background: linear-gradient(145deg, #f4f7fa, #6a7380);
  border-color: #e8eef4;
  color: #222;
}
.seat.active .name-plate > .avatar,
.seat.active .plaque .name-plate > .avatar {
  box-shadow: 0 0 0 2px #ffffff88, 0 0 14px var(--c);
  transform: translateY(-50%) !important;
}
.seat .name,
.plaque-shell .name,
.plaque .name {
  font-size: .8rem;
  font-weight: 700;
  color: var(--name-color, #fff);
  white-space: normal;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  word-break: break-word;
  text-shadow: 0 1px 4px #00000088;
  max-width: 100%;
  line-height: 1.15;
}
.plaque-shell[data-name-scale="small"] .name-plate .name { font-size: .58rem; }
.plaque-shell[data-name-scale="med"] .name-plate .name { font-size: .66rem; }
.plaque-shell[data-name-scale="large"] .name-plate .name { font-size: .74rem; }
.seat .badge {
  display: inline-block;
  font-size: .55rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #f4ecff;
  border: 1px solid #ffffff44;
  border-radius: 999px;
  padding: .04rem .32rem;
  background: #ffffff14;
  flex-shrink: 0;
}
.seat .badge.ai { color: #b8ffff; border-color: #2de2e688; }
.seat .badge.vip,
.name-tag .badge.vip,
.career-name-row .badge.vip {
  color: #ffe7a8;
  border-color: #ffb020aa;
  background: linear-gradient(135deg, #ff2d9522, #ffb02033);
}
.seat .tagline,
.plaque-shell .tagline,
.plaque .tagline {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  margin: .12rem .15rem 0;
  font-size: .55rem;
  font-style: italic;
  font-weight: 400;
  color: #e8d8ffcc;
  line-height: 1.15;
  max-width: 100%;
  overflow: hidden;
  word-break: break-word;
  white-space: normal;
}
.name-plate .tagline {
  margin: 0;
  min-height: .78rem;
  max-height: 1.4rem;
  height: auto;
  line-height: 1.1;
  font-size: .48rem;
}
.seat .mini-hand,
.plaque-shell > .mini-hand {
  display: flex;
  justify-content: center;
  margin-top: .2rem;
  margin-bottom: var(--shape-hand-hang, -2.35rem);
  min-height: 36px;
  padding: 0 2px;
  position: relative;
  z-index: 5;
  pointer-events: none;
}
.seat .mini-hand .card-face,
.plaque-shell > .mini-hand .card-face {
  width: 34px !important;
  height: 48px !important;
  border-radius: 5px !important;
  margin-left: -14px;
  box-shadow: 0 6px 14px #00000099, 0 0 0 1px #ffffff22;
}
.seat[data-slot="south"] .mini-hand {
  margin-bottom: calc(var(--shape-hand-hang, -2.35rem) - 0.35rem);
}
.seat[data-slot="south"] .mini-hand .card-face {
  width: 42px !important;
  height: 60px !important;
  margin-left: -16px;
  border-radius: 6px !important;
}
.seat .mini-hand .card-face:first-child,
.plaque-shell > .mini-hand .card-face:first-child { margin-left: 0; }
.plaque-shell.creator-preview > .mini-hand {
  margin-bottom: var(--shape-hand-hang, -2.35rem);
}
.plaque-shell.creator-preview > .mini-hand .card-face {
  width: 34px !important;
  height: 48px !important;
  border-radius: 5px !important;
  margin-left: -14px;
  box-shadow: 0 6px 14px #00000099, 0 0 0 1px #ffffff22;
}
.plaque-shell.creator-preview > .mini-hand .card-face:first-child { margin-left: 0; }

.seat-dock {
  position: absolute;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 6;
  pointer-events: auto;
}
.seat[data-slot="south"] .seat-dock,
.seat[data-slot="north"] .seat-dock,
.seat[data-slot="east"] .seat-dock {
  left: calc(100% - 14px);
  top: 6px;
}
.seat[data-slot="west"] .seat-dock {
  right: calc(100% - 14px);
  left: auto;
  top: 6px;
}
.seat-btn {
  width: 28px;
  height: 28px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid #ffffff33;
  background: #1a2440ee;
  color: #fff;
  display: grid;
  place-items: center;
  box-shadow: 0 4px 10px #00000066;
}
.seat-btn svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
}
.seat-btn.btn-profile { background: #1a4a58ee; }
.seat-btn.btn-plaque-gear { background: #3a3a48ee; }
.seat-btn.btn-kick {
  background: #5a1824ee;
  font-size: .68rem;
  width: auto;
  min-width: 3.1rem;
  height: 1.7rem;
  padding: 0 .5rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.seat-btn:hover { filter: brightness(1.15); }

.center-pile {
  position: absolute;
  left: 50%; top: 50%;
  width: 0;
  height: 0;
  z-index: 3;
  pointer-events: none;
}
.card-face {
  width: var(--card-w);
  height: var(--card-h);
  border-radius: 10px;
  overflow: hidden;
  background-image: url('/assets/cards/atlas.png');
  background-repeat: no-repeat;
  box-shadow: 0 10px 24px #00000077, 0 0 0 1px #ffffff18;
  border: 1px solid #ffffff28;
}

.disco-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: clamp(96px, 17.5vmin, 140px);
  height: clamp(96px, 17.5vmin, 140px);
  overflow: visible;
  display: grid;
  place-items: center;
  aspect-ratio: 1 / 1;
}
.disco-aura {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--orb-glow, #2de2e6) 55%, transparent) 0%,
    transparent 68%
  );
  filter: blur(8px);
  opacity: .85;
  animation: aura-breathe 2.4s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}
@keyframes aura-breathe {
  0%, 100% { transform: scale(0.92); opacity: .55; }
  50% { transform: scale(1.08); opacity: .95; }
}
.timer-ring {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: rotate(-90deg);
  z-index: 2;
}
.timer-track {
  fill: none;
  stroke: #ffffff22;
  stroke-width: 5;
}
.timer-arc {
  fill: none;
  stroke: var(--timer-glow, var(--orb-glow, #2de2e6));
  stroke-width: 5;
  stroke-linecap: round;
  stroke-dasharray: 276.46;
  stroke-dashoffset: 0;
  transition: stroke .35s;
  filter: drop-shadow(0 0 8px color-mix(in srgb, var(--timer-glow, var(--orb-glow, #2de2e6)) 70%, transparent));
}
.disco-stage.timer-urgent .timer-arc {
  animation: timer-urgent-pulse 0.85s ease-in-out infinite;
}
@keyframes timer-urgent-pulse {
  0%, 100% { stroke-width: 5; opacity: 1; }
  50% { stroke-width: 6.5; opacity: 0.88; }
}
.cha-ring {
  pointer-events: none;
}
.cha-seg {
  fill: none;
  stroke: #3a3a42;
  stroke-width: 3.2;
  stroke-linecap: butt;
  stroke-dasharray: 90 218;
  transition: stroke .25s, filter .25s;
}
.cha-seg.on {
  stroke: var(--cha-ring, #ff2d95);
  filter: drop-shadow(0 0 4px var(--cha-ring, #ff2d95));
  animation: chaEnergy 1.1s linear infinite;
}
.cha-ring.burst .cha-seg.on {
  animation: chaBurstFlash .45s ease-out;
}
@keyframes chaEnergy {
  0% { stroke-opacity: .75; }
  50% { stroke-opacity: 1; }
  100% { stroke-opacity: .75; }
}
@keyframes chaBurstFlash {
  0% { stroke-width: 6; }
  100% { stroke-width: 3.2; }
}
.disco-ball {
  --orb-a: #ff2d95;
  --orb-b: #2de2e6;
  --orb-c: #ffb020;
  --orb-d: #7b5cff;
  --orb-glow: #2de2e6;
  --disco-spin-period: 28s;
  position: relative;
  width: 68%;
  height: 68%;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  place-items: center;
  overflow: hidden;
  box-shadow:
    0 0 22px color-mix(in srgb, var(--orb-glow) 70%, transparent),
    0 0 48px color-mix(in srgb, var(--orb-a) 45%, transparent),
    0 0 72px color-mix(in srgb, var(--orb-b) 35%, transparent),
    inset 0 -12px 20px #00000077,
    inset 0 0 0 2px #ffffff44;
  z-index: 1;
  transition: box-shadow .45s ease;
}
.disco-ball.ejecting {
  z-index: 12;
  transition: none;
  will-change: transform;
}
.deck-count {
  position: absolute;
  left: 50%;
  bottom: -1.35rem;
  transform: translateX(-50%);
  z-index: 3;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(.62rem, 1.8vmin, .78rem);
  letter-spacing: .08em;
  color: #f4ecff;
  text-shadow: 0 1px 4px #000;
  white-space: nowrap;
  pointer-events: none;
}
.disco-facets {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.disco-facets.disco-facets-css {
  background:
    radial-gradient(circle at 28% 22%, #ffffffee 0 5%, transparent 7%),
    radial-gradient(circle at 72% 68%, #ffffff28 0 14%, transparent 20%),
    repeating-conic-gradient(
      from 0deg,
      var(--orb-a) 0deg 18deg,
      var(--orb-c) 18deg 36deg,
      var(--orb-b) 36deg 54deg,
      var(--orb-d) 54deg 72deg
    );
  animation: disco-spin var(--disco-spin-period, 3.6s) linear infinite;
}
.disco-body-host {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.disco-body-spin {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
}
.disco-body-spin.on {
  animation: disco-spin var(--disco-spin-period, 28s) linear infinite;
}
.disco-body-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: center center;
}
.disco-body-hue {
  filter: saturate(1.08) brightness(1.03);
}
.disco-body-tint {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(
    circle at 35% 30%,
    color-mix(in srgb, var(--orb-glow) 55%, transparent),
    color-mix(in srgb, var(--orb-a) 25%, transparent) 45%,
    transparent 72%
  );
  mix-blend-mode: color-dodge;
  opacity: 0.55;
}
.disco-body-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
.disco-ball[data-body="canvas3d"] .disco-facets,
.disco-ball[data-body="mirror"] .disco-facets,
.disco-ball[data-body="image"] .disco-facets,
.disco-ball[data-body="video"] .disco-facets {
  background: none;
  animation: none;
}
.disco-ball.flash .disco-facets.disco-facets-css {
  animation-duration: .35s;
}
.disco-ball.urgent .disco-facets.disco-facets-css {
  animation-duration: .8s;
}
.disco-ball.flash {
  animation: orb-flash .55s ease-out;
}
@keyframes orb-flash {
  0% { filter: brightness(1.8) saturate(1.4); transform: scale(1.08); }
  100% { filter: none; transform: scale(1); }
}
.disco-shine {
  position: absolute;
  inset: 12%;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 25%, #ffffff99, transparent 52%),
    radial-gradient(circle at 65% 75%, #ffffff18, transparent 48%);
  pointer-events: none;
  z-index: 2;
}
.disco-core {
  position: relative;
  z-index: 3;
  display: grid;
  place-items: center;
  text-align: center;
  padding: .1rem .15rem;
  max-width: 86%;
  max-height: 76%;
  overflow: hidden;
  pointer-events: none;
}
.orb-face {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: clamp(1.05rem, 3.6vmin, 1.65rem);
  letter-spacing: .04em;
  line-height: 1;
  color: #fff;
  white-space: nowrap;
  overflow: visible;
  max-width: 100%;
  transform-origin: center center;
  text-shadow:
    0 0 8px #000,
    0 0 16px color-mix(in srgb, var(--orb-glow) 80%, transparent),
    0 2px 4px #000000cc;
}
.orb-face.orb-face--digit {
  font-size: clamp(1.55rem, 5.2vmin, 2.45rem);
  letter-spacing: .02em;
}
.orb-face.orb-face--tag {
  font-size: clamp(1.1rem, 3.8vmin, 1.75rem);
  letter-spacing: .06em;
}
@keyframes disco-spin {
  to { transform: rotate(360deg); }
}

.god-rays {
  position: fixed;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: visible;
  mix-blend-mode: screen;
  opacity: 0;
  visibility: hidden;
}
.god-rays.is-on {
  opacity: 1;
  visibility: visible;
}
.god-rays-hub {
  position: absolute;
  width: 0;
  height: 0;
  left: 50%;
  top: 45%;
  --orb-glow: #2de2e6;
  --flash: 0.8;
  --burst-ms: 1.2s;
}
.god-bloom {
  position: absolute;
  left: 0;
  top: 0;
  width: 160vmax;
  height: 160vmax;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0.12);
  background: radial-gradient(
    circle,
    color-mix(in srgb, var(--orb-glow) 88%, #fff) 0%,
    color-mix(in srgb, var(--orb-glow) 42%, transparent) 16%,
    color-mix(in srgb, var(--orb-glow) 12%, transparent) 38%,
    transparent 58%
  );
  opacity: 0;
  pointer-events: none;
}
.god-rays.is-burst .god-bloom {
  animation: god-bloom var(--burst-ms) ease-out forwards;
}
@keyframes god-bloom {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.08); }
  10% { opacity: var(--flash); transform: translate(-50%, -50%) scale(0.42); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.08); }
}
.god-ray-spin {
  position: absolute;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  animation: ray-orbit var(--spin) linear infinite;
  animation-delay: var(--delay);
}
@keyframes ray-orbit {
  from { transform: rotate(var(--ang)); }
  to { transform: rotate(calc(var(--ang) + (360deg * var(--dir, 1)))); }
}
.god-ray {
  position: absolute;
  left: 0;
  top: 0;
  width: var(--len);
  height: var(--base);
  transform: translateY(-50%) scaleY(var(--fat)) scaleX(0.04);
  transform-origin: 0 50%;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--hue) 92%, #fff) 0%,
    color-mix(in srgb, var(--hue) 52%, transparent) 12%,
    color-mix(in srgb, var(--hue) 22%, transparent) 34%,
    color-mix(in srgb, var(--hue) 8%, transparent) 64%,
    transparent 100%
  );
  clip-path: polygon(0 46%, 0 54%, 100% 100%, 100% 0);
  opacity: 0;
  filter: blur(var(--blur));
  will-change: transform, opacity;
  animation: ray-cast var(--life, 1.2s) ease-out forwards;
  animation-delay: var(--stagger, 0s);
}
@keyframes ray-cast {
  0% {
    opacity: 0;
    transform: translateY(-50%) scaleY(var(--fat)) scaleX(0.04);
  }
  12% {
    opacity: var(--op);
    transform: translateY(-50%) scaleY(var(--fat)) scaleX(1);
  }
  100% {
    opacity: 0;
    transform: translateY(-50%) scaleY(calc(var(--fat) * 1.08)) scaleX(1.2);
  }
}

.hand-dock {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  flex-shrink: 0;
  padding: .4rem .75rem calc(.4rem + var(--safe-b));
  background: linear-gradient(180deg, transparent, #000000cc 32%);
  border-top: 1px solid #ffffff10;
  z-index: 15;
  pointer-events: auto;
}
.your-turn-banner {
  text-align: center;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: .14em;
  font-size: .78rem;
  color: #ff9ec8;
  margin: 0 0 .25rem;
  animation: your-turn-pulse 1.4s ease-in-out infinite;
}
.your-turn-banner.hidden { display: none; }
@keyframes your-turn-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .55; }
}
.hand-dock.hand-flash {
  animation: handFlash .7s ease-out;
}
@keyframes handFlash {
  0% { filter: brightness(1.55); }
  100% { filter: brightness(1); }
}
.hand-dock.spectating {
  padding-top: .55rem;
  z-index: 15;
}
.hand {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 0;
  width: 100%;
  min-height: calc(var(--card-h) * var(--hand-zoom, 1));
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 .35rem .15rem;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  transform: scale(var(--hand-zoom, 1));
  transform-origin: bottom center;
}
.hand-dock.spectating .hand {
  min-height: 0;
}
.spectate-note {
  width: 100%;
  text-align: center;
  color: var(--muted);
  font-size: .92rem;
  padding: .65rem 1rem;
  border: 1px dashed #ffffff22;
  border-radius: 12px;
  background: #00000044;
}
.hand .card-face {
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: transform .15s, outline .15s, opacity .15s, box-shadow .15s;
  pointer-events: auto;
}
.hand .card-face:hover {
  transform: translateY(-10px) scale(1.03);
  box-shadow: 0 16px 28px #00000088, 0 0 18px #ffffff22;
  z-index: 5;
}
.hand .card-face.legal {
  outline: 2px solid var(--ok);
  outline-offset: 3px;
  box-shadow: 0 0 18px #3ecf8e55;
}
.hand .card-face.dim { opacity: .42; cursor: default; }
.hand-actions {
  display: flex; justify-content: center; gap: .5rem; margin-top: .4rem;
}
.hand-actions .primary { min-width: 140px; }
#btnDraw.need-draw {
  box-shadow:
    0 0 0 3px #ffb020,
    0 0 18px #ffb020cc,
    0 0 32px #ffb02066;
  border-color: #ffb020;
  color: #1a1028;
  background: #ffb020;
}

.banner {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  padding: 0 .6rem;
  border-radius: 0;
  background: none;
  font-family: "Syne", sans-serif;
  font-size: 1.15rem;
  text-align: center;
  z-index: 8;
  max-width: min(96%, 52rem);
  box-shadow: none;
  animation: banner-in .4s ease-out;
  pointer-events: none;
}
@keyframes banner-in {
  from { opacity: 0; transform: translate(-50%, -42%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}
.banner-kicker {
  display: inline-block;
  font-family: "Anton", sans-serif;
  font-size: clamp(.85rem, 2.8vmin, 1.35rem);
  letter-spacing: .22em;
  color: #fff;
  text-transform: uppercase;
  margin: 0 0 .35rem;
  padding: .28rem .78rem .26rem;
  border-radius: 999px;
  background: #0a0614d4;
  border: 1px solid #ffffff28;
  box-shadow: 0 8px 22px #000000aa, 0 0 16px #05020899;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 6px #00000088;
}
#bannerTitle {
  font-family: "Russo One", sans-serif;
  font-size: clamp(2.6rem, 11vmin, 7rem);
  line-height: .88;
  letter-spacing: .02em;
  color: #fff;
  -webkit-text-stroke: 0.11em #ff7a18;
  paint-order: stroke fill;
  transform: skewX(-12deg);
  filter:
    drop-shadow(-0.1em 0.08em 0 #3ecbff)
    drop-shadow(0 0 0.03em #140808)
    drop-shadow(0 8px 18px #00000088);
  word-break: break-word;
}
.banner-sub {
  display: inline-block;
  margin-top: .55rem;
  padding: .32rem .8rem;
  font-family: "Outfit", sans-serif;
  font-size: .82rem;
  font-weight: 600;
  letter-spacing: .02em;
  color: #f7f0ff;
  border-radius: 999px;
  background: #0a0614d4;
  border: 1px solid #ffffff28;
  box-shadow: 0 8px 22px #000000aa, 0 0 16px #05020899;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  text-shadow: 0 1px 6px #00000088;
}

.cinema-layer {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  overflow: hidden;
}
.cinema-word {
  position: absolute;
  left: 50%;
  top: 50%;
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  white-space: nowrap;
  transform: translate(-50%, -50%) scale(.35);
  opacity: 0;
  pointer-events: none;
}
.cinema-word.freeze {
  color: #c8eeff;
  -webkit-text-stroke: 2px #3a7cff;
  paint-order: stroke fill;
  text-shadow: 0 0 18px #7ec8ff, 0 0 42px #2de2e6;
  animation: cinemaFreeze 1.05s ease-out forwards;
  font-size: clamp(2.2rem, 9vmin, 5.2rem);
}
.cinema-word.clap {
  color: #e8f7ff;
  -webkit-text-stroke: 1.5px #5aa8ff;
  paint-order: stroke fill;
  text-shadow: 0 0 14px #7ec8ff, 0 0 28px #ffffff88;
  animation: cinemaClap .85s ease-out forwards;
  font-size: clamp(1.8rem, 7vmin, 4.2rem);
}
.cinema-word.cha-burst {
  color: #ffd0ea;
  -webkit-text-stroke: 2px #ff2d95;
  paint-order: stroke fill;
  text-shadow: 0 0 18px #ff2d95, 0 0 40px #ff7ad9;
  animation: cinemaFreeze 1.2s ease-out forwards;
  font-size: clamp(1.6rem, 6.5vmin, 3.8rem);
  text-transform: none;
  letter-spacing: .04em;
}
.cinema-word.shuffle {
  color: #ffe9a8;
  -webkit-text-stroke: 2px #ffb020;
  paint-order: stroke fill;
  text-shadow: 0 0 18px #ffb020, 0 0 40px #ff2d95;
  animation: cinemaShuffle 2.2s ease-out forwards;
  font-size: clamp(1.8rem, 7vmin, 4.4rem);
}
@keyframes cinemaShuffle {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); }
  12% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.2); }
}
@keyframes cinemaFreeze {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(-6deg); }
  18% { opacity: 1; transform: translate(-50%, -50%) scale(1.12) rotate(5deg); }
  38% { transform: translate(-50%, -50%) scale(1.02) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.55) rotate(0deg); }
}
@keyframes cinemaClap {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); }
  22% { opacity: 1; transform: translate(-50%, -50%) scale(1.18); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(1.7); }
}

.session-notice {
  margin: 0 0 .75rem;
  padding: .55rem .7rem;
  border-radius: 10px;
  background: #ff2d9522;
  border: 1px solid #ff2d9555;
  color: #ffe6f4;
  font-size: .88rem;
}
.splash-screen .session-notice {
  position: absolute;
  left: 50%;
  top: 3.2rem;
  transform: translateX(-50%);
  z-index: 4;
  width: min(28rem, 90vw);
}
.check-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-top: .75rem;
}
.check-row input[type="checkbox"] {
  width: 1.15rem;
  height: 1.15rem;
  padding: 0;
  accent-color: var(--magenta);
}
.settings-hint {
  margin: .2rem 0 0;
  padding: 0 .1rem 0 1.65rem;
  color: #9a8fb0;
  font-size: .72rem;
  line-height: 1.35;
}
.settings-hint strong {
  color: #ff9ec8;
  font-weight: 700;
}

.modal {
  position: fixed; inset: 0;
  background: #00000099;
  display: grid; place-items: center;
  z-index: 20;
  backdrop-filter: blur(4px);
}
.modal-card {
  background: #1a1028;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 1.2rem 1.4rem;
  width: min(360px, 92vw);
  box-shadow: 0 20px 60px #000000aa;
}
.modal-card.settings-card {
  width: min(420px, 94vw);
  max-height: min(92vh, 36rem);
  overflow: auto;
}
.settings-columns {
  display: flex;
  flex-direction: column;
  gap: .85rem;
}
.settings-legal {
  margin-top: 1rem;
  padding-top: .85rem;
  border-top: 1px solid #ffffff14;
}
.settings-legal h3 {
  margin: 0 0 .5rem;
  font-family: "Syne", sans-serif;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #ffb020;
}
.settings-legal-row {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}
.legal-card {
  width: min(1123.2px, 94vw);
  max-width: min(1123.2px, 94vw);
  max-height: min(82vh, 680px);
  display: flex;
  flex-direction: column;
}
.legal-doc {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  scrollbar-gutter: stable;
  padding-right: .35rem;
  color: #d8d0e8;
  font-size: .9rem;
  line-height: 1.55;
}
.legal-doc h1 {
  margin: 0 0 .5rem;
  font-family: "Syne", sans-serif;
  font-size: 1.1rem;
  color: #ff2d95;
}
.legal-doc h2 {
  margin: 1.1rem 0 .35rem;
  font-family: "Syne", sans-serif;
  font-size: .95rem;
  font-weight: 800;
  color: #c9b8ff;
}
.legal-doc p,
.legal-doc li {
  margin: 0 0 .6rem;
  color: #c8bed8;
}
.legal-doc ul {
  margin: 0 0 .6rem;
  padding-left: 1.15rem;
}
.legal-doc li {
  margin: 0 0 .3rem;
}
.legal-doc a {
  color: #2de2e6;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.legal-doc .meta {
  color: #9a8fb0;
  font-size: .82rem;
}
.legal-doc .note {
  border-left: 3px solid #ff2d95;
  padding: .6rem .8rem;
  margin: .8rem 0;
  background: rgba(255, 45, 149, .08);
  font-size: .86rem;
}
.legal-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  flex-wrap: wrap;
  margin-top: .75rem;
  padding-top: .7rem;
  border-top: 1px solid #ffffff14;
}
.legal-doc-status {
  color: #9a8fb0;
  font-size: .88rem;
}
.settings-col label { display: block; margin-bottom: .15rem; }
.settings-col input[type="range"] {
  display: block;
  width: 100%;
  margin-top: .45rem;
}
html.mobile-landscape .modal-card.settings-card,
html.mobile-landscape .modal-card.stats-card,
html.mobile-landscape .modal-card:not(.backpack-card):not(.feedback-card):not(.how-to-card):not(.stats-card):not(.orb-support-card):not(.dev-tools-card):not(.roadmap-card):not(.legal-card) {
  width: min(92vw, 52rem);
  max-height: min(88vh, 28rem);
  overflow: auto;
}
/* Legal keeps its own inner scroller; a card-level one would double the scrollbar. */
html.mobile-landscape .modal-card.legal-card {
  width: min(94vw, 78rem);
  max-height: min(88vh, 30rem);
  overflow: hidden;
}
html.mobile-landscape .settings-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .75rem 1.25rem;
  align-items: start;
}
html.mobile-landscape .settings-columns::before {
  content: "";
  position: absolute;
}
html.mobile-landscape .modal-card.settings-card .settings-columns {
  position: relative;
}
html.mobile-landscape .modal-card.settings-card .settings-columns::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #ffffff22;
  pointer-events: none;
}
html.mobile-landscape .feedback-card {
  width: min(96vw, 56rem);
  max-height: 88vh;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  margin-bottom: .6rem;
}
.modal-head h2 { margin: 0; font-family: "Syne", sans-serif; font-size: 1.2rem; }

.modal-card.charm-buy-card {
  width: min(360px, 92vw);
}
.charm-buy-card #charmBuyAsk {
  margin: 0.2rem 0 0;
  font-size: 1.02rem;
  line-height: 1.4;
}
.charm-buy-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.1rem;
}

.stats-meta {
  display: flex;
  align-items: center;
  gap: .55rem;
  margin-bottom: .75rem;
}
.stats-wl {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  letter-spacing: .06em;
}

.stats-card {
  container-type: inline-size;
  container-name: stats;
  width: min(22.5rem, 92vw);
  max-width: 92vw;
  max-height: min(88vh, 36rem);
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
}
.stats-columns {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  min-width: 0;
}
.stats-col { min-width: 0; }
.stats-radar-row {
  display: grid;
  grid-template-columns: minmax(0, max-content) minmax(0, 1fr);
  gap: .75rem 1rem;
  align-items: center;
  justify-items: stretch;
}
.stats-card .stats-radar-row {
  grid-template-columns: minmax(0, 1fr);
  gap: .75rem;
}
.stats-axes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: .4rem;
  width: max-content;
  max-width: 100%;
  min-width: 0;
  grid-column: 1;
}
.stats-card .stats-axes {
  width: auto;
}
.stats-trend-wrap { margin-top: 0; width: 100%; max-width: 100%; }
.stats-trend-wrap h3 {
  margin: 0 0 .35rem;
  font-family: "Syne", sans-serif;
  font-size: .82rem;
  font-weight: 800;
}
.stats-trend {
  width: 100%;
  max-width: 100%;
  height: clamp(120px, 22vw, 168px);
  display: block;
}
.trend-grid { stroke: #ffffff18; stroke-width: 1; }
.trend-line { fill: none; stroke: #ffb020; stroke-width: 2; }
.trend-dot { stroke: #fff; stroke-width: .8; }
.trend-label { fill: #c8bed8; font-size: 7px; }
.trend-legend {
  display: flex;
  gap: .55rem;
  flex-wrap: wrap;
  font-size: .62rem;
  color: var(--muted);
  margin-top: .3rem;
}
.trend-legend i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-right: .2rem;
  vertical-align: middle;
}

.plaque-form label { margin-bottom: .45rem; }
.plaque-vip {
  margin-top: .55rem;
  padding: .45rem;
  border: 1px dashed #ffb02066;
  border-radius: 10px;
  background: #ffb02010;
}
.plaque-vip.locked { opacity: .72; }
.vip-lock {
  font-size: .68rem;
  color: #ffb020;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 .25rem;
}
.stats-axes li {
  display: flex;
  align-items: baseline;
  justify-content: flex-start;
  gap: 1.1rem;
  font-size: .88rem;
}
.stats-axes .axis-label { font-weight: 700; min-width: 0; }
.stats-axes .axis-val {
  font-family: "Syne", sans-serif;
  font-weight: 800;
  font-size: 1.05rem;
  min-width: 2.2ch;
  text-align: right;
}
.stats-radar {
  width: clamp(132px, 22vw, 200px);
  height: clamp(132px, 22vw, 200px);
  justify-self: end;
  grid-column: auto;
  padding-left: 0;
  max-width: 100%;
}
.stats-card .stats-radar {
  width: min(180px, 70%);
  height: auto;
  aspect-ratio: 1;
  margin: 0 auto;
  justify-self: center;
}
@container stats (min-width: 28rem) {
  .stats-card .stats-radar-row {
    grid-template-columns: minmax(0, 1fr) auto;
  }
  .stats-card .stats-radar {
    width: clamp(140px, 36cqi, 200px);
    height: clamp(140px, 36cqi, 200px);
    margin: 0;
    justify-self: end;
  }
}
html.mobile-landscape .stats-card {
  overflow-x: hidden;
  overflow-y: auto;
}
html.mobile-landscape .stats-columns {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: .75rem 1.25rem;
  align-items: start;
  position: relative;
}
html.mobile-landscape .stats-columns::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  background: #ffffff22;
  pointer-events: none;
}
html.mobile-landscape .stats-card .stats-radar-row {
  grid-template-columns: minmax(0, 1fr) auto;
}
html.mobile-landscape .stats-card .stats-radar {
  width: clamp(120px, 22vw, 168px);
  height: clamp(120px, 22vw, 168px);
  margin: 0;
  justify-self: end;
}
html.mobile-landscape .stats-card .stats-trend {
  height: clamp(110px, 28vh, 168px);
}
@media (max-width: 720px) {
  .stats-radar-row {
    grid-template-columns: minmax(0, 1fr);
    justify-items: stretch;
  }
  .stats-radar {
    width: min(180px, 55vw);
    height: auto;
    aspect-ratio: 1;
    margin: 0 auto;
    justify-self: center;
  }
  .profile-dance .stats-radar-row {
    grid-template-columns: max-content auto;
    justify-content: center;
  }
  .profile-dance .stats-radar {
    width: clamp(120px, 36vw, 160px);
    height: clamp(120px, 36vw, 160px);
    margin: 0;
    justify-self: start;
  }
}
.radar-grid {
  fill: none;
  stroke: #ffffff22;
  stroke-width: 1;
}
.radar-axis {
  stroke: #ffffff18;
  stroke-width: 1;
}
.radar-fill {
  fill: #ffffff1f;
  stroke: none;
}
.radar-fill-group {
  opacity: 0.92;
}
.radar-stroke {
  fill: none;
  stroke: #ffffff66;
  stroke-width: 1.5;
}
.radar-spoke {
  stroke-width: 1.6;
  stroke-linecap: round;
  opacity: 0.9;
}
.radar-tip {
  stroke: #0a0612;
  stroke-width: 0.6;
}

.plaque-shape-picks {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .45rem;
}
.plaque-shape-picks button {
  padding: .55rem .4rem;
  border-radius: 10px;
  background: #ffffff10;
  border: 1px solid #ffffff22;
  color: #fff;
  font-weight: 700;
}
.plaque-shape-picks button.on {
  border-color: var(--cyan);
  box-shadow: 0 0 12px #2de2e644;
}
.icon-x {
  width: 2rem;
  height: 2rem;
  padding: 0;
  font-size: 1.4rem;
  line-height: 1;
  background: transparent;
}
.chat-card { width: min(420px, 94vw); min-height: 240px; }
.chat-tabs { display: flex; gap: .35rem; }
.tab {
  background: transparent;
  border-color: #ffffff22;
  padding: .35rem .7rem;
  font-weight: 700;
}
.tab.on {
  background: #ffffff14;
  border-color: var(--cyan);
  color: var(--cyan);
}
.chat-pane {
  max-height: 40vh;
  min-height: min(38vh, 280px);
  overflow: auto;
  font-size: .82rem;
  color: var(--muted);
}
.chat-pane div { margin-bottom: .28rem; }
.key-picks { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; margin-top: .8rem; }
.key-picks button {
  min-height: 3.1rem;
  border: 3px solid transparent;
  color: #fff;
  font-weight: 800;
  letter-spacing: .04em;
  text-shadow: 0 1px 2px #000000aa, 0 0 8px #00000088;
}
.key-picks .magenta { background: var(--magenta); }
.key-picks .cyan { background: var(--cyan); }
.key-picks .amber { background: var(--amber); color: #1a1028; text-shadow: none; }
.key-picks .violet { background: var(--violet); }
.slide-picks { display: grid; gap: .45rem; margin-top: .8rem; }
.slide-picks button {
  min-height: 2.6rem;
  background: #14081c;
  color: #fff;
  font-weight: 800;
  border: 3px solid var(--c, #ff2d95);
}
.slide-picks .slide-name { color: #fff; }

@media (max-width: 640px) {
  :root { --card-w: 58px; --card-h: 84px; }
  .room-code-hud { font-size: .95rem; letter-spacing: .12em; }
  .itch-link { font-size: .7rem; }
  #viewSlider { width: 4.2rem; }
  .seat {
    width: 24%;
    min-width: 100px;
    max-width: 128px;
  }
  .name-plate {
    left: 0;
    right: 0;
    --np-icon: 2.55rem;
    --np-bar-h: 1.5rem;
    --np-overlap: 1.1rem;
  }
  /* Sphere + roundedCube were too wide vs rectangle on portrait (Cap visual test 3 N6). */
  .seat .plaque-shell[data-shape="sphere"],
  .seat .plaque-shell[data-shape="roundedCube"],
  .seat .plaque-shell[data-shape="circle"] {
    width: auto;
    max-width: var(--shape-max-w, 100px);
    margin-inline: auto;
  }
  .seat .plaque[data-shape="sphere"],
  .seat .plaque[data-shape="roundedCube"],
  .seat .plaque[data-shape="circle"] {
    width: 100%;
    max-width: var(--shape-max-w, 100px);
    height: auto;
    min-height: 0;
    max-height: none;
    aspect-ratio: var(--shape-aspect, 0.78 / 1);
    margin-inline: auto;
  }
}
@media (max-width: 640px) and (orientation: portrait) {
  .top {
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: .3rem 4%;
    padding-inline: 2.5%;
  }
  body.page-lobby .top-center {
    justify-self: center;
    width: 100%;
    padding-inline: 2%;
  }
  body.page-game #roomCodeHud {
    position: fixed;
    top: calc(var(--safe-t) + 3.2rem);
    right: calc(var(--safe-r) + .5rem);
    left: auto;
    z-index: 13;
    font-size: .88rem;
    letter-spacing: .12em;
  }
}
/* Cap Q29: mobile landscape ~70% UI baseline (Chromium / Discord WebView). */
html.mobile-landscape {
  zoom: 0.7;
  --ui-scale: 0.7;
  --card-w: 70px;
  --card-h: 100px;
  --hand-dock-h: 9.2rem;
}
html.mobile-landscape body.charm-hand-open {
  --hand-dock-h: calc(9.2rem + var(--card-h) + 2rem);
}
html.mobile-landscape .seat {
  width: 18%;
  min-width: 64px;
  max-width: 108px;
}
@media (orientation: landscape) and (max-height: 500px) {
  :root { --card-w: 48px; --card-h: 68px; }
  .lobby-card { margin: .6rem auto; padding: 1rem; }
  .hand { min-height: calc(var(--card-h) + 4px); }
}
html.mobile-landscape.keyboard-soft-zoom {
  zoom: 0.6;
}
html.keyboard-soft-zoom:not(.mobile-landscape) {
  zoom: 0.88;
}
@media (min-width: 900px) {
  html:not(.disco-activity) .how-to-card { width: min(768px, 94vw); }
  html:not(.disco-activity) .settings-card { width: min(504px, 94vw); }
  html:not(.disco-activity) .feedback-card { width: min(72.6rem, 96vw); }
  html:not(.disco-activity) .roadmap-card { width: min(900px, 94vw); max-width: min(900px, 94vw); }
  html:not(.disco-activity) .backpack-card { width: min(1320px, 96vw); }
  html:not(.disco-activity) .orb-support-card { width: min(50.4rem, 94vw); }
  html:not(.disco-activity) .stats-card { width: min(640px, 94vw); max-height: min(88vh, 40rem); }
}
@media (prefers-reduced-motion: reduce) {
  .disco-stage.timer-urgent .timer-arc { animation: none; }
  .cinema-word.freeze,
  .cinema-word.clap,
  .cinema-word.cha-burst,
  .cinema-word.shuffle { animation: cinemaSafe 1.2s ease-out forwards; transform: translate(-50%, -50%) scale(1); }
  .hand-dock.hand-flash { animation: none; }
}
html.photosensitive .winner-cols {
  mix-blend-mode: normal;
  opacity: .88;
}
html.photosensitive .god-rays,
html.photosensitive .viz-bg { display: none; }
html.photosensitive .disco-facets,
html.photosensitive .disco-aura,
html.photosensitive .disco-ball.flash { animation: none; }
html.photosensitive .disco-body-spin.on { animation: none; }
html.photosensitive .disco-stage.timer-urgent .timer-arc { animation: none; }
html.photosensitive .cinema-word.freeze,
html.photosensitive .cinema-word.clap,
html.photosensitive .cinema-word.cha-burst,
html.photosensitive .cinema-word.shuffle,
.cinema-word.safe {
  animation: cinemaSafe 1.2s ease-out forwards;
  transform: translate(-50%, -50%) scale(1);
}
html.photosensitive .hand-dock.hand-flash { animation: none; }
html.photosensitive .your-turn-banner { animation: none; }
@keyframes cinemaSafe {
  0% { opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { opacity: 0; }
}