:root {
  --ink:#2d1b33;
  --muted:#7f718a;
  --quiet:#a597af;
  --paper:#fffaf2;
  --paper-strong:#ffffff;
  --wash:#f7f1f9;
  --line:rgba(45,27,51,0.11);
  --line-strong:rgba(45,27,51,0.18);
  --teal:#4ecdc4;
  --teal-dark:#2a9d8f;
  --violet:#8b6eea;
  --pink:#f47b8f;
  --gold:#f5b942;
  --orange:#eb7a18;
  --danger:#bd3d46;
  --shadow:0 18px 42px rgba(45,27,51,0.13);
  --soft-shadow:0 8px 22px rgba(45,27,51,0.09);
  --sidebar-width:230px;
  --header-height:68px;
}

* { box-sizing:border-box; }
html { min-height:100%; background:var(--paper); }
body {
  min-width:320px;
  min-height:100vh;
  margin:0;
  color:var(--ink);
  font-family:'Nunito','Segoe UI',system-ui,sans-serif;
  background:#f9f6f3;
}

button, input, select { font:inherit; }
button { color:inherit; }
button, a, select { -webkit-tap-highlight-color:transparent; }
button:focus-visible, input:focus-visible, select:focus-visible, a:focus-visible {
  outline:3px solid rgba(78,205,196,0.35);
  outline-offset:2px;
}
button:disabled { cursor:not-allowed; opacity:0.55; }
img, canvas { display:block; max-width:100%; }
a { color:inherit; }
[hidden] { display:none !important; }
.session-loader { display:none; }
body.auth-restoring .auth-gate,
body.auth-restoring .community-app { visibility:hidden; }
body.auth-restoring .session-loader {
  position:fixed; inset:0; z-index:200; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:14px; background:#fffaf2;
  color:#8a7d91; font-size:11px; font-weight:900; letter-spacing:.5px;
}
.session-loader img { width:min(230px,58vw); animation:sessionLogo 1.8s ease-in-out infinite; }
@keyframes sessionLogo { 0%,100%{transform:translateY(0);opacity:.88} 50%{transform:translateY(-4px);opacity:1} }

.eyebrow {
  margin:0 0 7px;
  color:#7359bd;
  font-size:11px;
  font-weight:900;
  letter-spacing:1.4px;
}

.primary-button,
.secondary-button,
.text-button,
.icon-button,
.load-more-button,
.header-create-button {
  border:0;
  border-radius:8px;
  cursor:pointer;
  font-weight:900;
  transition:transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.primary-button {
  min-height:44px;
  padding:0 18px;
  background:#e97812;
  color:#fff;
  box-shadow:inset 0 -3px 0 rgba(129,62,4,0.28), 0 8px 18px rgba(233,120,18,0.2);
}
.primary-button:hover { transform:translateY(-1px); background:#f28720; }
.primary-button:active { transform:translateY(1px); }

.secondary-button {
  min-height:42px;
  padding:0 16px;
  border:1px solid var(--line-strong);
  background:#fff;
}
.secondary-button:hover { background:#faf7fc; }

.text-button {
  min-height:38px;
  padding:0 12px;
  background:transparent;
  color:#665572;
}
.text-button:hover { background:rgba(45,27,51,0.06); }

.icon-button {
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  background:#fff;
  border:1px solid var(--line);
  font-size:20px;
}

/* Account gate */
.auth-gate {
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(420px,1.1fr) minmax(420px,0.9fr);
  background:var(--paper);
}

.auth-art {
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:56px clamp(34px,6vw,90px) 48px;
  background:
    linear-gradient(rgba(255,250,242,0.14),rgba(255,250,242,0.14)),
    repeating-linear-gradient(0deg, transparent 0 54px, rgba(45,27,51,0.035) 55px 56px),
    repeating-linear-gradient(90deg, transparent 0 54px, rgba(45,27,51,0.035) 55px 56px),
    #f1ecef;
  border-right:1px solid var(--line);
}

.auth-brand-lockup,
.droplee-line,
.auth-art-copy { position:relative; z-index:1; }
.auth-logo { width:min(310px,72%); }
.auth-brand-lockup p {
  margin:8px 0 0 5px;
  color:#786b80;
  font-size:13px;
  font-weight:900;
  letter-spacing:1.3px;
  text-transform:uppercase;
}

.droplee-line {
  height:min(38vh,360px);
  display:flex;
  align-items:flex-end;
  justify-content:center;
  gap:clamp(0px,1vw,12px);
  margin:30px -20px 20px;
}
.droplee-line img {
  width:clamp(100px,14vw,190px);
  height:clamp(100px,14vw,190px);
  object-fit:contain;
  filter:drop-shadow(0 18px 16px rgba(45,27,51,0.14));
  animation:authDropleeFloat 5s ease-in-out infinite;
}
.droplee-line img:nth-child(2) { animation-delay:-1.2s; }
.droplee-line img:nth-child(3) { animation-delay:-2.4s; }
.droplee-line img:nth-child(4) { animation-delay:-3.6s; }
@keyframes authDropleeFloat { 0%,100% { transform:translateY(0) rotate(-1deg); } 50% { transform:translateY(-8px) rotate(1deg); } }

.auth-art-copy { max-width:580px; }
.auth-art-copy strong { display:block; font-size:clamp(25px,3vw,42px); line-height:1.05; }
.auth-art-copy span { display:block; max-width:530px; margin-top:12px; color:#665771; font-size:15px; line-height:1.5; }

.auth-panel {
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:58px clamp(38px,7vw,104px) 32px;
  background:#fffdf9;
}
.auth-mobile-brand { display:none; }
.open-beta-word {
  margin-left:8px;
  color:#248f82;
  font-weight:900;
  letter-spacing:0;
}
.auth-copy h1 { max-width:480px; margin:0; font-size:clamp(32px,3.8vw,50px); line-height:1.04; letter-spacing:0; }
.auth-copy > p:last-child { margin:12px 0 0; color:var(--muted); line-height:1.5; }

.auth-tabs {
  display:grid;
  grid-template-columns:1fr 1fr;
  margin:34px 0 24px;
  border-bottom:1px solid var(--line);
}
.auth-tab {
  position:relative;
  min-height:45px;
  padding:0 8px;
  border:0;
  background:transparent;
  color:#9a8da3;
  cursor:pointer;
  font-weight:900;
}
.auth-tab::after {
  content:'';
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:3px;
  border-radius:3px 3px 0 0;
  background:transparent;
}
.auth-tab.active { color:var(--ink); }
.auth-tab.active::after { background:var(--teal-dark); }

.auth-form { display:none; }
.auth-form.active { display:grid; gap:8px; }
.auth-form label:not(.consent-row) { margin-top:8px; color:#584761; font-size:12px; font-weight:900; }
.auth-form input:not([type="checkbox"]) {
  width:100%;
  height:46px;
  padding:0 13px;
  border:1.5px solid rgba(45,27,51,0.14);
  border-radius:8px;
  background:#fff;
  color:var(--ink);
  font-weight:800;
}
.auth-form input:not([type="checkbox"]):focus { border-color:var(--teal-dark); outline:3px solid rgba(78,205,196,0.16); }
.forgot-password-link,
.auth-text-back {
  width:max-content;
  padding:3px 0;
  border:0;
  background:transparent;
  color:#7250c3;
  cursor:pointer;
  font:900 11px/1.3 Nunito,sans-serif;
}
.forgot-password-link { justify-self:end; margin-top:2px; }
.auth-text-back { margin-bottom:10px; color:#766b7d; }
.forgot-password-link:hover,
.auth-text-back:hover { color:var(--ink); }
.recovery-heading h2 { margin:5px 0 8px; font-size:28px; line-height:1.08; }
.recovery-heading > p:last-child { margin:0 0 10px; color:var(--muted); font-size:13px; line-height:1.5; }
.recovery-success-mark { width:52px; height:52px; display:grid; place-items:center; margin-bottom:10px; border-radius:50%; background:#dff6ef; color:#167865; font-size:25px; font-weight:900; }
.auth-gate.recovery-mode .auth-tabs { display:none; }
.field-pair { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.field-pair > div { display:grid; gap:8px; }
.auth-submit { width:100%; margin-top:16px; display:flex; align-items:center; justify-content:space-between; }
.button-arrow { font-size:20px; }
.consent-row { display:flex; align-items:flex-start; gap:9px; margin-top:12px; color:#75677d; font-size:10px; line-height:1.45; }
.consent-row input { width:16px; height:16px; margin:0; flex:0 0 auto; accent-color:var(--teal-dark); }
.consent-row a { color:#7250c3; }
.form-status { min-height:22px; margin:13px 0 0; color:var(--danger); font-size:11px; font-weight:900; }
.form-status.success { color:#1d7a68; }
.auth-security-note { display:flex; align-items:center; gap:8px; margin-top:12px; color:#92849a; font-size:10px; font-weight:800; }
.security-dot { width:8px; height:8px; border-radius:50%; background:var(--teal-dark); box-shadow:0 0 0 4px rgba(78,205,196,0.13); }
.auth-footer { display:flex; align-items:center; justify-content:space-between; margin-top:auto; padding-top:30px; color:#a295aa; font-size:10px; font-weight:900; }
.auth-footer img { width:58px; opacity:0.55; }

/* Main application */
.community-app { min-height:100vh; display:grid; grid-template-columns:var(--sidebar-width) minmax(0,1fr); }
.app-sidebar {
  position:fixed;
  inset:0 auto 0 0;
  z-index:30;
  width:var(--sidebar-width);
  display:flex;
  flex-direction:column;
  padding:20px 15px 14px;
  border-right:1px solid var(--line);
  background:rgba(255,250,242,0.96);
  backdrop-filter:blur(18px);
}
.sidebar-brand { display:block; padding:3px 10px 21px; text-decoration:none; }
.sidebar-brand img { width:154px; }
.sidebar-brand span { display:block; margin:3px 0 0 3px; color:#887a91; font-size:8px; font-weight:900; letter-spacing:2px; }
.sidebar-nav { display:grid; gap:4px; }
.nav-button {
  width:100%;
  min-height:44px;
  display:flex;
  align-items:center;
  gap:11px;
  padding:0 12px;
  border:0;
  border-radius:8px;
  background:transparent;
  color:#75667e;
  cursor:pointer;
  font-size:13px;
  font-weight:900;
  text-align:left;
}
.nav-button:hover { background:rgba(45,27,51,0.05); color:var(--ink); }
.nav-button.active { background:#fff; color:var(--ink); box-shadow:inset 3px 0 0 var(--teal-dark), 0 4px 14px rgba(45,27,51,0.07); }
.nav-icon { width:21px; color:#7661af; font-size:21px; line-height:1; text-align:center; }
.create-level-button {
  min-height:45px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin:20px 2px 0;
  border:0;
  border-radius:8px;
  background:#2d1b33;
  color:#fff;
  cursor:pointer;
  font-weight:900;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,0.22), 0 8px 18px rgba(45,27,51,0.15);
}
.create-level-button span { color:var(--gold); font-size:21px; }
.sidebar-account { display:grid; grid-template-columns:minmax(0,1fr) 38px; gap:6px; margin-top:auto; padding-top:14px; border-top:1px solid var(--line); }
.account-summary { min-width:0; display:flex; align-items:center; gap:8px; padding:4px; border:0; background:transparent; cursor:pointer; text-align:left; }
.account-avatar { width:36px; height:36px; flex:0 0 auto; overflow:hidden; border-radius:8px; background:#e8f6f4; }
.account-avatar img { width:100%; height:100%; object-fit:contain; transform:scale(1.18); }
.account-copy { min-width:0; }
.account-copy strong, .account-copy small { display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.account-copy strong { font-size:11px; }
.account-copy small { color:#988ba1; font-size:9px; }

.app-body { min-width:0; grid-column:2; }
.app-header {
  position:sticky;
  top:0;
  z-index:20;
  min-height:var(--header-height);
  display:flex;
  align-items:center;
  gap:20px;
  padding:12px clamp(20px,4vw,50px);
  border-bottom:1px solid var(--line);
  background:rgba(249,246,243,0.9);
  backdrop-filter:blur(16px);
}
.mobile-menu-button { display:none; }
.search-wrap {
  width:min(520px,55vw);
  height:42px;
  display:grid;
  grid-template-columns:24px minmax(0,1fr) auto;
  align-items:center;
  gap:5px;
  padding:0 11px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 4px 14px rgba(45,27,51,0.05);
  color:#9b8ea4;
}
.search-wrap input { width:100%; border:0; outline:0; background:transparent; color:var(--ink); font-size:12px; font-weight:800; }
.search-wrap kbd { padding:2px 6px; border:1px solid var(--line); border-radius:5px; background:#f7f3f8; color:#9d91a5; font-size:9px; }
.header-actions { display:flex; align-items:center; gap:6px; margin-left:auto; }
.header-create-button { min-height:40px; padding:0 14px; background:#2d1b33; color:#fff; }

.app-main { width:min(1420px,100%); margin:0 auto; padding:36px clamp(20px,4vw,54px) 80px; }
.view { display:none; }
.view.active { display:block; animation:viewIn 230ms ease; }
@keyframes viewIn { from { opacity:0; transform:translateY(5px); } to { opacity:1; transform:none; } }
.view-heading {
  min-height:184px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:28px;
  margin:-36px calc(clamp(20px,4vw,54px) * -1) 26px;
  padding:40px clamp(20px,4vw,54px) 26px;
  border-bottom:1px solid var(--line);
  background:#fffaf2;
}
.view-heading h1 { max-width:720px; margin:0; font-size:clamp(28px,3.3vw,48px); line-height:1.05; }
.view-heading > div > p:last-child { max-width:650px; margin:10px 0 0; color:var(--muted); line-height:1.5; }
.view-heading-art { height:128px; display:flex; align-items:flex-end; }
.view-heading-art img { width:88px; height:88px; object-fit:contain; margin-left:-17px; filter:drop-shadow(0 9px 8px rgba(45,27,51,0.11)); }
.view-heading-art img:nth-child(2) { width:96px; height:96px; }
.view-heading-art img:nth-child(3) { width:104px; height:104px; }
.view-heading-art img:nth-child(4) { width:112px; height:112px; }
.compact-heading { min-height:138px; }

.filter-bar {
  min-height:56px;
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:22px;
  padding:8px;
  border:1px solid var(--line);
  border-radius:8px;
  background:rgba(255,255,255,0.72);
}
.segmented-control { display:flex; align-items:center; gap:3px; padding:3px; border-radius:7px; background:#eee9ef; }
.segmented-control button {
  min-height:34px;
  padding:0 13px;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#8b7e94;
  cursor:pointer;
  font-size:11px;
  font-weight:900;
}
.segmented-control button.active { background:#fff; color:var(--ink); box-shadow:0 3px 9px rgba(45,27,51,0.08); }
.compact-select { margin-left:auto; display:flex; align-items:center; gap:7px; color:#8b7e94; font-size:10px; font-weight:900; }
.compact-select select { height:34px; padding:0 28px 0 10px; border:1px solid var(--line); border-radius:6px; background:#fff; color:#584762; font-size:10px; font-weight:900; }
.toggle-control { display:flex; align-items:center; gap:7px; padding:0 8px; color:#74647d; font-size:10px; font-weight:900; }
.toggle-control input { accent-color:var(--teal-dark); }

.level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.level-card {
  min-width:0;
  overflow:hidden;
  display:grid;
  grid-template-columns:116px minmax(0,1fr);
  min-height:176px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:0 7px 20px rgba(45,27,51,0.07);
  cursor:pointer;
  transition:transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
}
.level-card:hover { transform:translateY(-3px); border-color:rgba(78,205,196,0.55); box-shadow:0 13px 28px rgba(45,27,51,0.11); }
.level-card-canvas-wrap { position:relative; overflow:hidden; min-height:176px; border-right:1px solid var(--line); background:#faf7f6; }
.level-card-canvas { width:100%; height:100%; object-fit:cover; }
.level-status-chip { position:absolute; left:6px; bottom:6px; padding:3px 6px; border-radius:5px; background:rgba(45,27,51,0.82); color:#fff; font-size:8px; font-weight:900; text-transform:uppercase; }
.level-card-body { min-width:0; display:flex; flex-direction:column; padding:13px 12px 11px; }
.level-card-top { display:flex; align-items:flex-start; justify-content:space-between; gap:8px; }
.level-card h3 { margin:0; overflow:hidden; color:var(--ink); font-size:15px; line-height:1.18; text-overflow:ellipsis; }
.heart-button {
  min-width:34px;
  height:30px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:0 7px;
  border:1px solid var(--line);
  border-radius:7px;
  background:#fff;
  color:#9c8ba3;
  cursor:pointer;
  font-size:10px;
  font-weight:900;
}
.heart-button.hearted { border-color:rgba(244,123,143,0.34); background:#fff3f5; color:#d94767; }
.level-author { display:block; max-width:100%; margin:5px 0 0; padding:0; overflow:hidden; border:0; background:transparent; color:#7251c5; cursor:pointer; font-size:10px; font-weight:900; text-align:left; text-overflow:ellipsis; white-space:nowrap; }
.level-card-description { margin:8px 0; overflow:hidden; color:#8b7d93; font-size:10px; line-height:1.35; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.level-card-meta { display:flex; flex-wrap:wrap; gap:8px; margin-top:auto; color:#8c7e95; font-size:9px; font-weight:900; }
.level-card-meta span { display:inline-flex; align-items:center; gap:3px; }
.level-card-footer { display:flex; align-items:center; justify-content:space-between; gap:7px; margin-top:9px; padding-top:8px; border-top:1px solid rgba(45,27,51,0.07); }
.level-card-footer small { overflow:hidden; color:#aa9faf; font-size:8px; font-weight:900; white-space:nowrap; text-overflow:ellipsis; }
.play-mini-button { min-height:30px; padding:0 11px; border:0; border-radius:6px; background:#e97812; color:#fff; cursor:pointer; font-size:10px; font-weight:900; box-shadow:inset 0 -2px 0 rgba(129,62,4,0.25); }
.load-more-button { display:block; min-height:42px; margin:24px auto 0; padding:0 24px; border:1px solid var(--line); background:#fff; }

.empty-state, .loading-state, .error-state {
  grid-column:1/-1;
  min-height:220px;
  display:grid;
  place-items:center;
  align-content:center;
  gap:8px;
  padding:32px;
  border:1px dashed rgba(45,27,51,0.18);
  border-radius:8px;
  background:rgba(255,255,255,0.55);
  color:#8f8297;
  text-align:center;
}
.empty-state img { width:90px; }
.empty-state strong { color:var(--ink); }
.empty-state p, .loading-state p, .error-state p { max-width:430px; margin:0; font-size:11px; line-height:1.45; }
.loading-dots { display:flex; gap:6px; }
.loading-dots span { width:9px; height:9px; border-radius:50%; background:var(--teal); animation:dotPulse 1.2s ease-in-out infinite; }
.loading-dots span:nth-child(2) { animation-delay:0.15s; background:var(--violet); }
.loading-dots span:nth-child(3) { animation-delay:0.3s; background:var(--gold); }
@keyframes dotPulse { 0%,100% { transform:translateY(0); opacity:0.45; } 50% { transform:translateY(-6px); opacity:1; } }

.creator-strip { display:flex; gap:9px; margin-bottom:22px; overflow-x:auto; padding-bottom:4px; }
.creator-chip { min-width:178px; display:flex; align-items:center; gap:9px; padding:8px; border:1px solid var(--line); border-radius:8px; background:#fff; cursor:pointer; }
.creator-chip img { width:40px; height:40px; object-fit:contain; border-radius:7px; background:#eef8f6; }
.creator-chip strong, .creator-chip small { display:block; }
.creator-chip strong { font-size:11px; }
.creator-chip small { color:#9a8ca1; font-size:8px; }

.content-tabs { width:max-content; margin-bottom:20px; }
.metric-row { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin-bottom:18px; }
.metric {
  min-height:76px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:12px 14px;
  border-left:3px solid var(--teal);
  background:#fff;
  box-shadow:var(--soft-shadow);
}
.creator-metrics {
  display:flex; align-items:stretch; gap:0; margin:0 0 21px;
  border-top:1px solid var(--line); border-bottom:1px solid var(--line);
}
.creator-metrics .metric {
  position:relative; min-height:auto; flex:1; padding:13px 18px; border:0;
  border-radius:0; background:transparent; box-shadow:none; text-align:left;
}
.creator-metrics .metric + .metric::before { content:''; position:absolute; left:0; top:11px; bottom:11px; width:1px; background:var(--line-strong); }
.creator-metrics .metric strong { font-size:21px; }
.creator-metrics .metric span { margin-top:1px; color:#8b7c92; font-size:8px; letter-spacing:1px; text-transform:uppercase; }
.metric:nth-child(2) { border-color:var(--pink); }
.metric:nth-child(3) { border-color:var(--gold); }
.metric:nth-child(4) { border-color:var(--violet); }
.metric strong { font-size:23px; }
.metric span { color:#96899e; font-size:9px; font-weight:900; text-transform:uppercase; }

.competition-list { display:grid; gap:16px; }
.competition-admin-button { align-self:center; color:#887b90; font-size:10px; }
.competition-admin-panel { margin:-12px 0 20px; padding:18px; border:1px solid var(--line); border-left:4px solid var(--teal-dark); border-radius:8px; background:#fff; }
.competition-admin-unlock label,
.competition-admin-form label { display:block; margin-bottom:5px; color:#74667d; font-size:9px; font-weight:900; letter-spacing:1px; text-transform:uppercase; }
.competition-admin-unlock > div { display:flex; gap:8px; }
.competition-admin-unlock input,
.competition-admin-form input,
.competition-admin-form textarea { width:100%; min-height:42px; padding:9px 11px; border:1px solid var(--line-strong); border-radius:7px; background:#fffdf9; color:var(--ink); font-weight:800; }
.competition-admin-unlock p { min-height:16px; margin:7px 0 0; color:var(--danger); font-size:9px; font-weight:900; }
.competition-admin-form { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.competition-admin-wide { grid-column:1/-1; }
.competition-card {
  display:grid;
  grid-template-columns:minmax(0,1fr) 280px;
  gap:26px;
  padding:24px;
  border:1px solid var(--line);
  border-radius:8px;
  background:#fff;
  box-shadow:var(--soft-shadow);
}
.competition-card h2 { margin:0; font-size:25px; }
.competition-card p { max-width:700px; margin:9px 0 0; color:var(--muted); line-height:1.45; }
.competition-meta { display:flex; gap:12px; margin-top:15px; color:#796b81; font-size:10px; font-weight:900; }
.competition-actions { display:flex; align-items:center; justify-content:flex-end; gap:8px; }
.competition-entry-list { grid-column:1/-1; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; padding-top:17px; border-top:1px solid var(--line); }
.competition-entry { display:flex; align-items:center; gap:10px; padding:8px; border:1px solid var(--line); border-radius:7px; }
.competition-entry canvas { width:54px; height:72px; border-radius:5px; }
.competition-entry strong, .competition-entry small { display:block; }
.competition-entry strong { font-size:10px; }
.competition-entry small { color:#9b8fa3; font-size:8px; }

.profile-header-band {
  min-height:190px;
  display:grid;
  grid-template-columns:126px minmax(0,1fr) auto;
  align-items:center;
  gap:22px;
  margin:-36px calc(clamp(20px,4vw,54px) * -1) 26px;
  padding:36px clamp(20px,4vw,54px) 28px;
  border-bottom:1px solid var(--line);
  background:#fffaf2;
}
.profile-avatar-large { width:116px; height:116px; overflow:hidden; border-radius:8px; background:#dff4f1; box-shadow:0 12px 24px rgba(45,27,51,0.11); }
.profile-avatar-large img { width:100%; height:100%; object-fit:contain; transform:scale(1.13); }
.profile-identity h1 { margin:0; font-size:34px; }
.profile-identity > p:not(.eyebrow) { margin:2px 0 7px; color:#897b91; }
.profile-title { display:inline-block; padding:4px 8px; border-radius:5px; background:#efe8f8; color:#6849a5; font-size:9px; font-weight:900; }
.profile-social { display:flex; gap:22px; }
.profile-social button { min-width:78px; padding:6px 0; border:0; background:transparent; cursor:pointer; }
.profile-social strong, .profile-social span { display:block; text-align:center; }
.profile-social strong { font-size:22px; }
.profile-social span { color:#93869a; font-size:9px; font-weight:900; }
.profile-content-grid { display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:28px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.section-heading h2, .profile-activity h2 { margin:0; font-size:17px; }
.section-heading span { min-width:27px; height:27px; display:grid; place-items:center; border-radius:6px; background:#eee8f1; font-size:10px; font-weight:900; }
.profile-level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
.profile-activity { align-self:start; padding:18px; border-left:1px solid var(--line); }
.profile-activity .metric { min-height:62px; margin-top:9px; box-shadow:none; border:1px solid var(--line); border-left:3px solid var(--teal); }
.profile-activity > p { margin:17px 0 0; color:#978a9e; font-size:10px; line-height:1.5; }

/* Level details */
.detail-overlay, .people-overlay { position:fixed; inset:0; z-index:80; display:grid; place-items:center; padding:22px; }
.detail-backdrop { position:absolute; inset:0; background:rgba(45,27,51,0.48); backdrop-filter:blur(8px); }
.level-detail {
  position:relative;
  z-index:1;
  width:min(920px,100%);
  max-height:min(760px,calc(100vh - 44px));
  overflow:auto;
  border:1px solid rgba(255,255,255,0.5);
  border-radius:8px;
  background:#fffdf9;
  box-shadow:0 30px 80px rgba(45,27,51,0.28);
}
.detail-close { position:absolute; top:12px; right:12px; z-index:2; }
.detail-layout { display:grid; grid-template-columns:340px minmax(0,1fr); min-height:560px; }
.detail-board-wrap { display:grid; place-items:center; padding:28px; border-right:1px solid var(--line); background:#f2eef0; }
.detail-board-wrap canvas { width:min(280px,100%); aspect-ratio:3/4; border-radius:8px; box-shadow:0 16px 34px rgba(45,27,51,0.15); }
.detail-copy { display:flex; flex-direction:column; padding:44px 38px 28px; }
.status-line { display:flex; gap:8px; color:#96889e; font-size:9px; font-weight:900; text-transform:uppercase; }
.status-line span:first-child { color:#7355bd; }
.detail-copy h2 { margin:11px 0 0; font-size:31px; line-height:1.08; }
.creator-link { width:max-content; margin-top:5px; padding:0; border:0; background:transparent; color:#7251c5; cursor:pointer; font-size:11px; font-weight:900; }
.detail-copy > p { min-height:44px; margin:16px 0; color:#817287; font-size:12px; line-height:1.5; }
.detail-stat-row { display:grid; grid-template-columns:repeat(4,1fr); gap:7px; }
.detail-stat { padding:9px 7px; border:1px solid var(--line); border-radius:7px; background:#fff; text-align:center; }
.detail-stat strong, .detail-stat span { display:block; }
.detail-stat strong { font-size:16px; }
.detail-stat span { color:#a194a9; font-size:7px; font-weight:900; text-transform:uppercase; }
.detail-remix-credit { margin:11px 0 0; padding:9px 10px; border-left:3px solid var(--gold); background:#fff9e9; color:#725f35; font-size:9px; font-weight:900; }
.detail-actions { display:grid; grid-template-columns:minmax(140px,1fr) auto auto; gap:8px; margin-top:18px; }
.detail-actions #detailRemixButton { grid-column:1/-1; }
.labeled-icon-button { width:auto; padding:0 13px; font-size:10px; }
.creator-mini-profile { margin-top:auto; padding-top:22px; }
.creator-profile-row { display:grid; grid-template-columns:46px minmax(0,1fr) auto; align-items:center; gap:10px; padding-top:15px; border-top:1px solid var(--line); }
.creator-profile-row img { width:46px; height:46px; object-fit:contain; border-radius:7px; background:#e9f6f4; }
.creator-profile-row strong, .creator-profile-row small { display:block; }
.creator-profile-row strong { font-size:11px; }
.creator-profile-row small { color:#9a8ca1; font-size:8px; }

/* Game workspace */
.workspace-overlay { position:fixed; inset:0; z-index:100; display:grid; grid-template-rows:58px minmax(0,1fr); background:#f0ecef; }
.workspace-header { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px; padding:8px 16px; border-bottom:1px solid var(--line); background:#fffaf2; }
.workspace-back { justify-self:start; min-height:38px; padding:0 12px; border:0; border-radius:7px; background:#fff; color:#665571; cursor:pointer; font-size:10px; font-weight:900; box-shadow:0 3px 10px rgba(45,27,51,0.07); }
.workspace-title { display:flex; align-items:center; gap:9px; }
.workspace-title img { width:92px; }
.workspace-title span { padding-left:9px; border-left:1px solid var(--line); color:#817388; font-size:9px; font-weight:900; text-transform:uppercase; }
.workspace-header > .text-button { justify-self:end; }
.workspace-frame-wrap { position:relative; min-height:0; overflow:hidden; }
.workspace-frame-wrap iframe { width:100%; height:100%; display:block; border:0; background:#fffaf2; opacity:0; transition:opacity 260ms ease; }
.workspace-frame-wrap iframe.ready { opacity:1; }
.workspace-loader { position:absolute; inset:0; z-index:1; display:grid; place-items:center; align-content:center; gap:11px; background:#f4eff4; text-align:center; }
.workspace-loader strong { font-size:17px; }
.workspace-loader span { color:#91839a; font-size:10px; }
.loader-droplees { height:72px; display:flex; align-items:flex-end; }
.loader-droplees img { width:64px; height:64px; object-fit:contain; margin-left:-8px; animation:loaderBounce 1.35s ease-in-out infinite; }
.loader-droplees img:nth-child(2) { animation-delay:0.15s; }
.loader-droplees img:nth-child(3) { animation-delay:0.3s; }
@keyframes loaderBounce { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-8px); } }

.people-panel { position:relative; z-index:1; width:min(470px,100%); max-height:min(650px,calc(100vh - 40px)); overflow:auto; border-radius:8px; background:#fffdf9; box-shadow:var(--shadow); }
.people-panel-header { position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line); background:#fffdf9; }
.people-panel-header h2 { margin:0; font-size:18px; }
.people-list { display:grid; gap:1px; padding:8px; }
.people-row { display:grid; grid-template-columns:44px minmax(0,1fr) auto; align-items:center; gap:10px; min-height:60px; padding:8px; border-radius:7px; }
.people-row:hover { background:#f6f1f6; }
.people-row img { width:44px; height:44px; object-fit:contain; border-radius:7px; background:#e7f5f3; }
.people-row strong, .people-row small { display:block; }
.people-row strong { font-size:11px; }
.people-row small { color:#998ca0; font-size:8px; }

.toast { position:fixed; left:50%; bottom:24px; z-index:200; max-width:min(420px,calc(100vw - 28px)); padding:11px 16px; border-radius:8px; background:#2d1b33; color:#fff; box-shadow:0 14px 34px rgba(45,27,51,0.23); font-size:11px; font-weight:900; opacity:0; pointer-events:none; transform:translate(-50%,12px); transition:opacity 180ms ease, transform 180ms ease; }
.toast.visible { opacity:1; transform:translate(-50%,0); }

@media (max-width:1180px) {
  :root { --sidebar-width:208px; }
  .level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .view-heading-art img { width:78px; height:78px; }
  .competition-entry-list { grid-template-columns:repeat(2,minmax(0,1fr)); }
}

@media (max-width:920px) {
  .auth-gate { grid-template-columns:1fr; }
  .auth-art { display:none; }
  .auth-panel { min-height:100vh; width:min(560px,100%); margin:0 auto; padding:34px 28px 26px; }
  .auth-mobile-brand { display:block; margin-bottom:36px; }
  .auth-mobile-brand img { width:190px; }
  .auth-mobile-brand span { display:block; margin:3px 0 0 2px; color:#93869b; font-size:8px; font-weight:900; letter-spacing:1.2px; }
  .community-app { display:block; }
  .app-sidebar { transform:translateX(-102%); box-shadow:14px 0 34px rgba(45,27,51,0.2); transition:transform 220ms ease; }
  .app-sidebar.open { transform:none; }
  .app-body { width:100%; }
  .mobile-menu-button { width:40px; height:40px; display:grid; place-items:center; border:1px solid var(--line); border-radius:7px; background:#fff; cursor:pointer; }
  .search-wrap { width:min(100%,520px); }
  .profile-content-grid { grid-template-columns:1fr; }
  .profile-activity { border-left:0; border-top:1px solid var(--line); }
}

@media (max-width:700px) {
  .app-header { gap:8px; padding:9px 12px; }
  .header-actions .text-button, .header-create-button { display:none; }
  .search-wrap { width:auto; flex:1; }
  .search-wrap kbd { display:none; }
  .app-main { padding:26px 12px 60px; }
  .view-heading, .profile-header-band { margin:-26px -12px 18px; padding:29px 16px 22px; }
  .view-heading { min-height:140px; grid-template-columns:1fr; }
  .view-heading h1 { font-size:30px; }
  .view-heading-art { display:none; }
  .compact-heading .primary-button { width:100%; }
  .filter-bar { align-items:stretch; flex-wrap:wrap; }
  .segmented-control { flex:1; }
  .segmented-control button { flex:1; }
  .compact-select { margin-left:0; }
  .level-grid, .profile-level-grid { grid-template-columns:1fr; }
  .level-card { grid-template-columns:104px minmax(0,1fr); min-height:164px; }
  .level-card-canvas-wrap { min-height:164px; }
  .metric-row { grid-template-columns:1fr 1fr; }
  .competition-card { grid-template-columns:1fr; padding:17px; }
  .competition-actions { justify-content:flex-start; }
  .competition-entry-list { grid-template-columns:1fr; }
  .profile-header-band { grid-template-columns:82px minmax(0,1fr); gap:14px; }
  .profile-avatar-large { width:80px; height:80px; }
  .profile-identity h1 { font-size:25px; }
  .profile-social { grid-column:1/-1; justify-content:flex-start; border-top:1px solid var(--line); padding-top:12px; }
  .detail-overlay { padding:10px; }
  .level-detail { max-height:calc(100vh - 20px); }
  .detail-layout { grid-template-columns:1fr; }
  .detail-board-wrap { padding:18px; border-right:0; border-bottom:1px solid var(--line); }
  .detail-board-wrap canvas { width:min(220px,70vw); }
  .detail-copy { padding:26px 17px 18px; }
  .detail-stat-row { grid-template-columns:1fr 1fr; }
  .detail-actions { grid-template-columns:1fr 1fr; }
  .detail-actions .primary-button { grid-column:1/-1; }
  .workspace-header { grid-template-columns:1fr auto; }
  .workspace-title { display:none; }
  .workspace-header > .text-button { display:none; }
  .field-pair { grid-template-columns:1fr; gap:0; }
}

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation-duration:0.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:0.01ms !important; }
}