/* Front-door layout — dark room, swinging pendant lamp, warming wordmark. */
@keyframes tn-swing { 0% { transform: rotate(-28deg); } 100% { transform: rotate(28deg); } }
@keyframes tn-room  { 0% { transform: translateX(-11%); } 100% { transform: translateX(11%); } }
@keyframes tn-breathe { 0%, 100% { opacity: .82; } 50% { opacity: 1; } }
@keyframes tn-blink { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes tn-pop { 0% { opacity: 0; transform: translateY(10px) scale(.985); } 100% { opacity: 1; transform: none; } }
@keyframes tn-fade { to { opacity: 1; } }

.scene-door { position: relative; overflow: hidden; background: #05070c; }
.fd-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: repeating-linear-gradient(to right, rgba(90,140,215,.07) 0 1px, transparent 1px 48px),
                    repeating-linear-gradient(to bottom, rgba(90,140,215,.07) 0 1px, transparent 1px 48px);
  -webkit-mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 72%);
  mask-image: radial-gradient(120% 70% at 50% 0%, #000 0%, transparent 72%);
}
.fd-room {
  position: absolute; left: 0; right: 0; top: 0; height: 62vh; pointer-events: none;
  animation: tn-room 5.2s cubic-bezier(.45,0,.55,1) infinite alternate;
  background: radial-gradient(60% 100% at 50% -10%, rgba(58,104,190,.5) 0%, rgba(30,58,116,.28) 34%, rgba(10,20,42,0) 72%);
}
.fd-scan { position: absolute; inset: 0; pointer-events: none; opacity: .55; background-image: repeating-linear-gradient(to bottom, rgba(4,8,16,.4) 0 1px, transparent 1px 3px); }
.fd-baseline { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3; background: linear-gradient(to right, transparent, rgba(87,150,232,.35), transparent); }

/* Swinging pendant lamp (wire + halo + beam + bulb) */
.fd-lamp { position: absolute; left: 50%; top: 0; width: 0; height: 0; z-index: 2; transform-origin: 50% 0; opacity: 0; animation: tn-swing 5.2s cubic-bezier(.45,0,.55,1) infinite alternate, tn-fade 1100ms 2400ms ease-out forwards; }
.fd-wire { position: absolute; left: -1px; top: 0; width: 2px; height: 150px; background: linear-gradient(to bottom, #2b3646, #4a5769); }
.fd-halo { position: absolute; left: -280px; top: 70px; width: 560px; height: 560px; border-radius: 50%; pointer-events: none; animation: tn-breathe 3.1s ease-in-out infinite; background: radial-gradient(circle, rgba(150,196,255,.22) 0%, rgba(90,140,215,.1) 34%, rgba(40,70,130,0) 68%); }
.fd-beam { position: absolute; left: -210px; top: 176px; width: 420px; height: 520px; pointer-events: none; clip-path: polygon(44% 0, 56% 0, 100% 100%, 0 100%); background: linear-gradient(to bottom, rgba(160,205,255,.2), rgba(120,170,240,.06) 42%, transparent 80%); }
.fd-bulb { position: absolute; left: -42px; top: 142px; width: 84px; height: 96px; }
.fd-bulb svg { width: 100%; height: 100%; overflow: visible; }

.door {
  position: relative; z-index: 3;
  min-height: 100vh; width: 100vw; box-sizing: border-box;
  display: flex; flex-direction: column;
  align-items: center; justify-content: flex-start;
  padding: clamp(230px, 40vh, 340px) 24px 40px;   /* content sits below the hanging lamp */
}

@keyframes tn-sweep { 0% { -webkit-mask-position: 81% 50%; mask-position: 81% 50%; } 100% { -webkit-mask-position: 19% 50%; mask-position: 19% 50%; } }

/* Three stacked copies: dim BASE (warms up letter-by-letter), a broad soft LIT layer,
   and a bright HOT layer whose highlight sweeps across in time with the lamp swing. */
.wordmark-wrap { position: relative; }
.wordmark, .wm-lit, .wm-hot {
  font-family: var(--font-display); font-weight: 400;
  font-size: clamp(32px, 5.6vw, 70px); letter-spacing: .05em; line-height: 1; white-space: nowrap;
}
.wordmark { color: #1d2735; }                 /* dim base */
.wordmark b { color: #22375e; }
.wm-letter { display: inline-block; }         /* JS animates each letter's warm-up */
.wm-accent { color: #22375e; }

.wm-lit, .wm-hot { position: absolute; inset: 0; pointer-events: none; opacity: 0; animation: tn-fade 600ms 2400ms ease-out forwards; }
.wm-lit {
  color: #8fa2b8; text-shadow: 0 0 22px rgba(150,200,255,.55), 0 0 60px rgba(90,150,235,.35);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.95) 0%, rgba(0,0,0,.35) 45%, transparent 72%);
          mask-image: radial-gradient(closest-side, rgba(0,0,0,.95) 0%, rgba(0,0,0,.35) 45%, transparent 72%);
  -webkit-mask-size: 66% 260%; mask-size: 66% 260%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%; mask-position: 50% 50%;
}
.wm-lit b { color: var(--accent); }
.wm-hot {
  color: #ffffff; text-shadow: 0 0 26px rgba(190,225,255,.7), 0 0 70px rgba(110,170,245,.4);
  -webkit-mask-image: radial-gradient(closest-side, rgba(0,0,0,.95) 0%, rgba(0,0,0,.3) 48%, transparent 74%);
          mask-image: radial-gradient(closest-side, rgba(0,0,0,.95) 0%, rgba(0,0,0,.3) 48%, transparent 74%);
  -webkit-mask-size: 52% 260%; mask-size: 52% 260%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: 4% 50%; mask-position: 4% 50%;
  animation: tn-fade 600ms 2400ms ease-out forwards, tn-sweep 5.2s cubic-bezier(.45,0,.55,1) infinite alternate;
}
.wm-hot b { color: #a8c8ff; }

/* Neon power-up: random stutter, blue glow flashes, then settles matte */
@keyframes neon-ignite {
  0%   { opacity: 0; text-shadow: none; }
  4%   { opacity: 1;   text-shadow: 0 0 12px rgba(43,107,255,.75); }
  6%   { opacity: .12; text-shadow: none; }
  11%  { opacity: 1;   text-shadow: 0 0 16px rgba(43,107,255,.8); }
  13%  { opacity: .2;  text-shadow: none; }
  16%  { opacity: 1;   text-shadow: 0 0 10px rgba(43,107,255,.6); }
  19%  { opacity: .35; text-shadow: none; }
  24%  { opacity: 1;   text-shadow: 0 0 18px rgba(43,107,255,.85); }
  27%  { opacity: .15; text-shadow: none; }
  32%  { opacity: 1;   text-shadow: 0 0 12px rgba(43,107,255,.6); }
  37%  { opacity: .6;  text-shadow: none; }
  42%  { opacity: 1;   text-shadow: 0 0 9px rgba(43,107,255,.45); }
  48%  { opacity: .85; }
  55%  { opacity: 1;   text-shadow: 0 0 6px rgba(43,107,255,.3); }
  70%  { opacity: 1;   text-shadow: 0 0 4px rgba(43,107,255,.2); }
  100% { opacity: 1;   text-shadow: none; }
}

/* Longer variant — a couple of letters keep stuttering later before settling */
@keyframes neon-ignite-long {
  0%   { opacity: 0; text-shadow: none; }
  5%   { opacity: 1;   text-shadow: 0 0 14px rgba(43,107,255,.8); }
  8%   { opacity: .1;  text-shadow: none; }
  16%  { opacity: 1;   text-shadow: 0 0 12px rgba(43,107,255,.7); }
  20%  { opacity: .2;  text-shadow: none; }
  30%  { opacity: 1;   text-shadow: 0 0 16px rgba(43,107,255,.8); }
  35%  { opacity: .15; text-shadow: none; }
  48%  { opacity: 1;   text-shadow: 0 0 10px rgba(43,107,255,.6); }
  54%  { opacity: .3;  text-shadow: none; }
  64%  { opacity: 1;   text-shadow: 0 0 14px rgba(43,107,255,.7); }
  70%  { opacity: .25; text-shadow: none; }
  80%  { opacity: 1;   text-shadow: 0 0 8px rgba(43,107,255,.5); }
  86%  { opacity: .55; text-shadow: none; }
  93%  { opacity: 1;   text-shadow: 0 0 5px rgba(43,107,255,.3); }
  100% { opacity: 1;   text-shadow: none; }
}

/* Idle flicker: a single letter blips on/off like a faulty tube (triggered from JS) */
@keyframes neon-blip {
  0%   { opacity: 1;   text-shadow: none; }
  12%  { opacity: .12; text-shadow: none; }
  22%  { opacity: 1;   text-shadow: 0 0 10px rgba(43,107,255,.6); }
  32%  { opacity: .3;  text-shadow: none; }
  44%  { opacity: 1;   text-shadow: none; }
  60%  { opacity: .5;  text-shadow: none; }
  72%  { opacity: 1;   text-shadow: 0 0 6px rgba(43,107,255,.4); }
  100% { opacity: 1;   text-shadow: none; }
}

/* --- Intro reveal (Flash-style; sequenced from frontdoor.js). Content below the
       wordmark starts hidden and is revealed after the neon finishes flickering. --- */
.tagline { opacity: 0; transform: translateY(-10px); transition: opacity .6s ease, transform .6s ease; }
.tagline.show { opacity: 1; transform: translateY(0); }   .tagline .tag-sub { color: #5c6b7d; }   /* fade in; 2nd line onward (after <BR>) muted grey */

.entry { opacity: 0; clip-path: inset(0 100% 0 0); transition: opacity .45s ease, clip-path .8s ease; }
.entry.show { opacity: 1; clip-path: inset(0 0 0 0); }            /* reveal left -> right */

.souls { opacity: 0; transform: translateY(-10px); transition: opacity .6s ease, transform .6s ease; }
.souls.show { opacity: 1; transform: translateY(0); }   /* fade in + slide down */

/* Respect users who prefer reduced motion — no flicker, no sequenced reveal */
@media (prefers-reduced-motion: reduce) {
  .wm-letter { animation: none !important; opacity: 1 !important; }
  .wm-lit, .wm-hot { animation: none; opacity: 1; }
  .fd-lamp, .fd-room, .fd-halo { animation: none; opacity: 1; }
  .tagline, .entry, .souls { transition: none; opacity: 1; transform: none; clip-path: none; }
}

.tagline {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: clamp(10px, 1.15vw, 13px);
  letter-spacing: normal; text-align: center;
  color: var(--accent);
}

/* Divider row: faint line ─ [ m3mber login | r0dent access ] ─ line */
.entry {
  margin-top: 44px;
  width: min(760px, 90vw);
  display: flex; align-items: center;
  color: var(--ink-dim);
}
.entry .rule { flex: 1; height: 1px; }
.entry .rule:first-child { background: linear-gradient(to right, transparent, rgba(90,140,215,.35)); }
.entry .rule:last-child  { background: linear-gradient(to left, transparent, rgba(90,140,215,.35)); }
.entry-btns { display: flex; align-items: center; gap: 10px; padding: 0 14px; }
.door-btn {
  padding: 10px 20px; cursor: pointer; border-radius: 2px;
  border: 1px solid var(--accent); background: rgba(35,68,130,.32);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #dceaf8;
  box-shadow: 0 0 22px -6px rgba(87,150,232,.55), inset 0 0 18px -8px rgba(140,190,255,.5);
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.door-btn:hover { background: rgba(48,90,168,.45); color: #fff; }
.door-btn b { color: inherit; }
/* r0dent access — plain, no border until hover */
.door-btn.ghost {
  padding: 10px 18px; border-color: transparent; background: none; color: var(--ink-dim); box-shadow: none; font-weight: 500;
}
.door-btn.ghost:hover { color: #bfd4e6; border-color: #243447; background: none; }

/* Souls line — green blinking dot + count */
.souls {
  margin-top: 34px; display: flex; align-items: center; gap: 8px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .2em; color: #5c6b7d;
}
.souls::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4bbf7a; animation: tn-blink 2.4s ease-in-out infinite; } .souls:not(.has-souls)::before { display: none; }   /* hide the dot when no count is shown */

/* Login modal (redesigned — dark navy card, blue accent) */
.modal-scrim {
  position: fixed; inset: 0; z-index: 40;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,7,13,.62); padding: 24px;
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
}
.modal-scrim.show { opacity: 1; visibility: visible; }
.modal {
  width: min(378px, 100%); box-sizing: border-box; border-radius: 6px;
  background: #0d1421; border: 1px solid #2b4f6b;
  box-shadow: 0 0 44px -10px rgba(70,130,215,.45), 0 40px 90px -40px #000;
  padding: 20px 22px 24px; display: flex; flex-direction: column; gap: 14px;
  animation: tn-pop 220ms cubic-bezier(.2,.7,.3,1) both;
}
/* The class sets display:flex, which would otherwise beat the [hidden] attribute — force it off
   so the signup modal shows only ONE step at a time (form, then the PIN verify step). */
.modal[hidden] { display: none; }
.modal-head { display: flex; align-items: center; gap: 12px; }
.modal-title { flex: 1; font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .2em; color: var(--accent); }
.modal-x { background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 15px; color: #7e93a8; transition: color .15s ease; }
.modal-x:hover { color: #e0653c; }
.modal input:not([type=checkbox]) {
  box-sizing: border-box; width: 100%; padding: 11px 12px; border-radius: 4px;
  background: #0a1017; border: 1px solid #22303f; outline: none;
  font-size: 14px; color: #dbe6f2; font-family: var(--font-ui);
}
.modal input:not([type=checkbox]):focus { border-color: #3b6fa8; box-shadow: 0 0 0 3px rgba(59,111,168,.16); }
.modal input::placeholder { color: #4d6076; }
.modal input:-webkit-autofill, .modal input:-webkit-autofill:hover, .modal input:-webkit-autofill:focus {
  -webkit-text-fill-color: #dbe6f2; caret-color: #dbe6f2;
  -webkit-box-shadow: 0 0 0 1000px #0a1017 inset; box-shadow: 0 0 0 1000px #0a1017 inset;
  border: 1px solid #22303f; transition: background-color 100000s ease-out 0s;
}

.remember { display: flex; align-items: center; gap: 9px; cursor: pointer; font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: #8fa3b8; }
.remember input[type=checkbox] {
  appearance: none; -webkit-appearance: none; width: 16px; height: 16px; margin: 0; flex: none; cursor: pointer;
  border-radius: 3px; border: 1px solid #2b3d52; background: transparent; display: grid; place-content: center;
}
.remember input[type=checkbox]::before { content: "✓"; font-family: var(--font-mono); font-size: 10px; color: #08111a; transform: scale(0); transition: transform .12s ease; }
.remember input[type=checkbox]:checked { background: var(--accent); border-color: var(--accent); }
.remember input[type=checkbox]:checked::before { transform: scale(1); }

.login-error { min-height: 14px; font-family: var(--font-mono); font-size: 12px; color: #ff6b6b; }

.modal .submit {
  margin-top: 6px; padding: 12px 0; text-align: center; border-radius: 4px; cursor: pointer;
  border: 1px solid var(--accent); background: rgba(35,68,130,.3);
  font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .2em; color: #dceaf8;
  box-shadow: inset 0 0 20px -8px rgba(140,190,255,.5); transition: background .15s ease, color .15s ease;
}
.modal .submit:hover { background: rgba(48,90,168,.45); color: #fff; }
.modal-links { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em; color: #5c6b7d; }
.modal-links span { cursor: pointer; transition: color .15s ease; }
.modal-links span:hover { color: #9ad4f2; }

/* Signup: field + live username hint + PIN entry (reuses .modal theme) */
.modal .field { display: flex; flex-direction: column; gap: 4px; }
.field-msg { min-height: 12px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .04em; color: #5c6b7d; padding-left: 2px; }
.field-msg.good { color: #4bbf7a; }
.field-msg.bad { color: #ff6b6b; }
.field-msg.muted { color: #5c6b7d; }
.verify-sub { font-size: 13px; color: #8fa3b8; line-height: 1.5; }
.verify-sub b { color: #dbe6f2; font-weight: 600; }
.modal .pin-input {
  text-align: center; font-family: var(--font-mono); font-size: 24px; font-weight: 700;
  letter-spacing: .5em; text-indent: .5em; padding: 12px;
}
/* Busy state on a modal submit button — spinner + "Sending email…" while we wait on the server. */
.submit.is-busy { cursor: default; opacity: .85; }
.btn-spin {
  display: inline-block; width: 12px; height: 12px; margin-right: 9px; vertical-align: -1px;
  border: 2px solid rgba(220,234,248,.3); border-top-color: #dceaf8; border-radius: 50%;
  animation: tn-spin .6s linear infinite;
}
@keyframes tn-spin { to { transform: rotate(360deg); } }

/* ---- Login sequence: CONFIRMING ACCESS → WELCOME (platform loads underneath) ---- */
@keyframes tn-shelve { 0%, 100% { transform: scaleY(.22); opacity: .3; } 45% { transform: scaleY(1); opacity: 1; } }
@keyframes tn-scanline { 0% { transform: translateY(-6px); opacity: 0; } 12% { opacity: .85; } 100% { transform: translateY(46px); opacity: 0; } }
@keyframes tn-out { 0% { opacity: 1; } 100% { opacity: 0; visibility: hidden; } }
@keyframes tn-welcome { 0% { opacity: 0; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }
.modal-scrim.lg-out { opacity: 0; transition: opacity .8s ease; }

.lg-confirm {
  width: min(378px, 100%); box-sizing: border-box; border-radius: 6px;
  background: #0d1421; border: 1px solid #2b4f6b;
  box-shadow: 0 0 44px -10px rgba(70,130,215,.45), 0 40px 90px -40px #000;
  padding: 26px 24px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px;
  animation: tn-pop 220ms cubic-bezier(.2,.7,.3,1) both;
}
.lg-confirm-t { font-family: var(--font-mono); font-size: 13px; font-weight: 700; letter-spacing: .22em; color: var(--accent); }
.lg-spines { position: relative; height: 46px; display: flex; align-items: flex-end; gap: 5px; overflow: hidden; padding: 0 2px; }
.lg-spine { width: 9px; height: 44px; border-radius: 2px; transform-origin: 50% 100%; box-shadow: inset 1px 0 0 rgba(255,255,255,.07); animation: tn-shelve 1500ms ease-in-out infinite; }
.lg-scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; pointer-events: none; background: linear-gradient(to right, transparent, rgba(150,205,255,.85), transparent); animation: tn-scanline 1500ms linear infinite; }
.lg-status-wrap { display: flex; flex-direction: column; align-items: center; gap: 5px; }
.lg-status { font-family: var(--font-mono); font-size: 11px; letter-spacing: .16em; color: #8fa3b8; }
.lg-prog { width: 190px; height: 2px; border-radius: 1px; background: #16202e; overflow: hidden; }
.lg-prog-bar { height: 100%; width: 0; background: var(--accent); transition: width 380ms linear; }

.lg-confirm.is-welcome { padding: 40px 24px; }
.lg-welcome { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; animation: tn-welcome 460ms cubic-bezier(.2,.7,.3,1) both; }
.lg-welcome-h { font-family: var(--font-mono); font-size: 12px; letter-spacing: .44em; color: var(--accent); }
.lg-welcome-n { font-family: var(--font-display); font-size: clamp(30px, 4.4vw, 54px); line-height: 1; color: #fff; text-shadow: 0 0 30px rgba(150,200,255,.55), 0 0 80px rgba(90,150,235,.35); }
.lg-welcome-s { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
.lg-welcome-s::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #4bbf7a; }
.lg-welcome-s span { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: #5c6b7d; }

/* ---- Profile settings modal ---- */
.modal-overlay {
  position: fixed; inset: 0; z-index: 26000;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at center, rgba(6,11,30,.6), rgba(2,3,10,.85));
  opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
}
.modal-overlay.show { opacity: 1; visibility: visible; }
/* Profile modal — same theme as the member-login popup. */
.profile-card {
  width: min(740px, 94vw); max-height: 88vh; overflow-y: auto; box-sizing: border-box;
  background: #0d1421; border: 1px solid #2b4f6b; border-radius: 6px;
  box-shadow: 0 0 44px -10px rgba(70,130,215,.45), 0 40px 90px -40px #000;
  padding: 20px 22px 22px; position: relative; color: #dbe6f2; font-family: var(--font-ui);
  display: flex; flex-direction: column; gap: 14px;
  animation: tn-pop 220ms cubic-bezier(.2,.7,.3,1) both;
  scrollbar-width: thin; scrollbar-color: #24374d transparent;   /* Firefox */
}
.profile-card::-webkit-scrollbar { width: 10px; }
.profile-card::-webkit-scrollbar-track { background: transparent; }
.profile-card::-webkit-scrollbar-thumb { background: #1c2a3b; border: 2px solid #0d1421; border-radius: 6px; }
.profile-card::-webkit-scrollbar-thumb:hover { background: #2b4f6b; }
/* Upload progress bar */
.profile-prog { display: flex; flex-direction: column; gap: 6px; opacity: 1; transition: opacity .5s ease; }
.profile-prog.fading { opacity: 0; }
.profile-prog-head { display: flex; justify-content: space-between; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #8fa3b8; }
.profile-prog-track { height: 4px; border-radius: 2px; background: #16202e; overflow: hidden; }
.profile-prog-bar { height: 100%; width: 0; background: var(--accent); border-radius: 2px; box-shadow: 0 0 8px -1px rgba(87,182,232,.6); transition: width .18s linear; }
.profile-card .modal-head { display: flex; align-items: center; gap: 12px; }
.profile-cols { display: flex; gap: 44px; align-items: stretch; position: relative; } .profile-cols::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: linear-gradient(to bottom, transparent, #3a5f80 50%, transparent); pointer-events: none; }
.profile-col { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 14px; } .profile-col-l .profile-foot { margin-top: auto; } .profile-remember-row { margin-top: -4px; } @media (max-width: 640px) { .profile-cols { flex-direction: column; } .profile-cols::before { display: none; } }
.profile-rows { display: flex; flex-direction: column; }
.profile-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid #17202e; font-size: 13px; }
.profile-row:last-child { border-bottom: none; }
.profile-label { color: #6d8099; font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.profile-value { color: #dbe6f2; font-weight: 600; overflow: hidden; text-overflow: ellipsis; }
.profile-section-label { margin: 2px 0 0; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: #8fa3b8; }
.profile-hint { font-weight: 400; text-transform: none; letter-spacing: 0; color: #5c6b7d; font-size: 11px; }
.avatar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.avatar-cell {
  position: relative; aspect-ratio: 1; border-radius: 6px; overflow: hidden; cursor: pointer;
  border: 2px solid transparent; background: #0a1017; transition: border-color .15s ease;
}
.avatar-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.avatar-cell:hover { border-color: #22303f; }
.avatar-cell.active { border-color: var(--accent); box-shadow: 0 0 10px rgba(87,182,232,.45); }
.avatar-del {
  position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.65); color: #ff6b6b; font-size: 9px; cursor: pointer; display: none;
}
.avatar-cell:hover .avatar-del { display: block; }
/* Name-colour swatches (tone-locked palette) */
.color-full-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.color-preview { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 20px; font-weight: 700; letter-spacing: .02em; text-shadow: 0 0 12px currentColor; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.color-full-head .swatch-auto { flex: none; width: 26px; height: 26px; }
.swatch-grid { display: grid; grid-template-columns: repeat(16, 1fr); gap: 4px; }
.swatch {
  aspect-ratio: 1; border-radius: 5px; cursor: pointer; padding: 0;
  border: 2px solid transparent; transition: border-color .12s ease, transform .1s ease;
}
.swatch:hover { transform: scale(1.12); }
.swatch.active { border-color: #fff; box-shadow: 0 0 0 1px #000, 0 0 8px rgba(255,255,255,.35); }
.swatch.swatch-auto { background: #10161f; color: #7f93a8; font-family: var(--font-mono); font-size: 10px; font-weight: 700; }
.swatch.swatch-auto.active { border-color: var(--accent); color: #cfe6f5; }

/* Full vs Per-letter mode toggle (Per-letter is a Wicked/Admin perk — the toggle is hidden otherwise). */
.color-mode { display: flex; gap: 6px; }
.cmode-btn {
  flex: 1; padding: 6px 8px; border-radius: 5px; cursor: pointer;
  border: 1px solid #22303f; background: #10161f; color: #8fa3b8;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.cmode-btn:hover { color: #cfe6f5; }
.cmode-btn .fa-crown { color: #d9a441; margin-left: 3px; font-size: 9px; }
.cmode-btn.active { border-color: var(--accent); color: #cfe6f5; background: #14202c; }

/* Per-letter editor: a wrapping row of letter cells, each a big glyph with a colour chip beneath it. */
.letter-colors { display: flex; flex-wrap: wrap; gap: 6px; }
.lc-cell {
  display: flex; flex-direction: column; align-items: center; gap: 4px; cursor: pointer; padding: 4px 5px;
  border: 1px solid transparent; border-radius: 5px; background: #0e141d; transition: border-color .12s ease, background .12s ease;
}
.lc-cell:hover { background: #131c27; }
.lc-cell.sel { border-color: var(--accent); background: #14202c; }
.lc-glyph { font-family: var(--font-mono); font-size: 17px; font-weight: 700; line-height: 1; }
.lc-swatch { width: 16px; height: 6px; border-radius: 3px; }

/* ---- BBS telnet terminal (Extras → BBS's). Kept in frontdoor.css for budget room. ---- */
.site-body.bbs-term { display: flex; flex-direction: column; background: #000; }
.bbs-screen { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; overflow: hidden; }
.bbs-canvas { display: block; background: #000; outline: none !important; cursor: text; image-rendering: auto; margin: auto; }
.bbs-canvas:focus, .bbs-canvas:focus-visible { outline: none !important; box-shadow: none !important; }
/* BBS terminal floating window (same behaviour as the image popup) — header on top, aspect-locked
   body, bottom-right resize grip, NO dim backdrop. */
.bbs-pop { position: fixed; z-index: 40000; display: flex; flex-direction: column; overflow: hidden;
  border: 1px solid #2b2440; border-radius: 9px; box-shadow: 0 0 18px 3px rgba(0,0,0,.8); background: #000; }
.bbs-pop-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 5px 8px; cursor: move; user-select: none;
  background: #0b0e17; border-bottom: 1px solid #241f36; font-family: var(--font-mono); font-size: 11px; color: #8a7a90; }
.bbs-pop-ico { color: #d98fb8; font-size: 12px; }
.bbs-name-lead { color: #dbe6f2; font-weight: 700; letter-spacing: .02em; }
.bbs-controls { margin-left: auto; display: flex; align-items: center; gap: 8px; }   /* terminal's dot/status/reconnect, pushed right */
.bbs-pop .ip-close { flex: none; }   /* close ✕ + resize grip reuse the image-popup styles (.ip-close / .ip-grip) */
.bbs-pop-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; background: #000; }
.bbs-status { flex: none; display: flex; align-items: center; gap: 8px; padding: 4px 10px; background: #0b0e17; border-top: 1px solid #241f36;
  font-family: var(--font-mono); font-size: 11px; color: #8a7a90; letter-spacing: .03em; }
.bbs-dot { width: 8px; height: 8px; border-radius: 50%; background: #4a5a70; flex: none; box-shadow: 0 0 6px currentColor; color: #4a5a70; }
.bbs-dot.on { background: #4bbf7a; color: #4bbf7a; }
.bbs-dot.off { background: #e0653c; color: #e0653c; }
.bbs-dot.wait { background: #d9a441; color: #d9a441; animation: gi-pulse 1.1s ease-in-out infinite; }
.bbs-stat { color: #b8c8dc; }
.bbs-name { margin-left: auto; color: #4d5d75; text-transform: uppercase; letter-spacing: .1em; font-size: 10px; }
.bbs-reconnect { cursor: pointer; border: 1px solid #2a3a52; background: #12202f; color: #cfe6f5; border-radius: 4px; padding: 3px 9px;
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.bbs-reconnect:hover { border-color: var(--accent); }
/* BBS directory list */
/* BBS panel — rides the Extras MAGENTA identity (not the chat blue), matching the game-chat purple
   convention. Scoped magenta tokens keep every child on-palette; radii stay tight like the rest of the
   site (3–4px). The extras panel body itself is dark magenta rather than near-black. */
/* Muted magenta tokens (dusty, not neon) shared by the panel viewport + each card. */
.site-body.bbs-panel, .site-body.bbs-list, .site-body.bbs-view {
  --xtra: #d98fb8; --xtra-br: #e8b0d0;             /* cool rose accent on a NAVY body (matches chat/games) */
  --xtra-bg: #0b0e17; --xtra-card: #14121e; --xtra-card-hi: #1b1826;
  --xtra-line: #2b2440; --xtra-line-hi: #40365a;
  --xtra-name: #e2cdda; --xtra-body: #bfa8bd; --xtra-dim: #8a7a90;
}
.chat-panel.panel-magenta .site-body { background: var(--xtra-bg); }
/* The panel body is a clipping viewport; each view is an absolutely-positioned CARD that slides. Two
   cards coexist during a transition (one sliding out as the next slides in), so there's no gap/flash. */
.site-body.bbs-panel { position: relative; overflow: hidden; background: var(--xtra-bg); }
.site-body.bbs-panel > * { position: absolute; inset: 0; will-change: transform; }
.bbs-sliding { transition: transform .34s cubic-bezier(.4, 0, .2, 1); pointer-events: none; }
.site-body.bbs-list, .site-body.bbs-view { display: flex; flex-direction: column; overflow: hidden auto; background: var(--xtra-bg); }
.site-body.bbs-list { gap: 8px; padding: 16px; }
/* Magenta scrollbars (not the default blue) inside the Extras cards. */
.site-body.bbs-list, .site-body.bbs-view { scrollbar-width: thin; scrollbar-color: var(--xtra-line-hi) transparent; }
.site-body.bbs-list::-webkit-scrollbar, .site-body.bbs-view::-webkit-scrollbar { width: 8px; }
.site-body.bbs-list::-webkit-scrollbar-thumb, .site-body.bbs-view::-webkit-scrollbar-thumb { background: var(--xtra-line-hi); border-radius: 4px; }
.site-body.bbs-list::-webkit-scrollbar-track, .site-body.bbs-view::-webkit-scrollbar-track { background: transparent; }
/* Dashed, inline "add" affordance (screenshots) — doesn't span the panel. */
.bbs-dash { align-self: flex-start; cursor: pointer; display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px dashed var(--xtra-line-hi); border-radius: 4px; padding: 8px 14px;
  color: var(--xtra-dim); font-family: var(--font-mono); font-size: 11px; letter-spacing: .05em; transition: border-color .12s, color .12s; }
.bbs-dash:hover { border-color: var(--xtra); color: var(--xtra-br); }
.bbs-list-head { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: var(--xtra-dim); text-transform: uppercase; }
.bbs-entry { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  background: var(--xtra-card); border: 1px solid var(--xtra-line); border-radius: 4px; padding: 1px 14px 1px 1px; color: var(--xtra-body); transition: border-color .12s ease, background .12s ease; }
.bbs-entry:hover { border-color: var(--xtra-line-hi); background: var(--xtra-card-hi); }
/* Fixed square icon, larger than before, sitting ~1px from the row's top / bottom / left edges. */
.bbs-entry-ico { flex: none; width: 48px; height: 48px; border-radius: 4px; overflow: hidden; display: grid; place-items: center;
  background: #0c0a14; border: none; color: #6f4d61; font-size: 18px; }
.bbs-entry-ico img { width: 100%; height: 100%; object-fit: cover; }
.bbs-entry-main { display: flex; flex-direction: column; min-width: 0; }
.bbs-entry-name { font-family: 'Barlow Condensed', var(--font-ui); font-weight: 700; font-size: 18px; letter-spacing: .02em; color: var(--xtra-name); }
.bbs-entry-note { font-family: var(--font-mono); font-size: 11px; color: var(--xtra-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bbs-entry-arw { margin-left: auto; align-self: center; color: #6f4d61; font-size: 12px; }
.bbs-add { margin-top: 4px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  background: transparent; border: 1px dashed var(--xtra-line-hi); border-radius: 4px; padding: 11px; color: var(--xtra-dim);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; transition: border-color .12s, color .12s; }
.bbs-add:hover { border-color: var(--xtra); color: var(--xtra-br); }
.bbs-list-foot { margin-top: 4px; color: #6f4d61; font-family: var(--font-mono); font-size: 11px; }
.bbs-list-loading, .bbs-list-empty { color: var(--xtra-dim); font-family: var(--font-mono); font-size: 12px; padding: 8px 2px; }

/* detail + editor views */
.bbs-view-bar { flex: none; display: flex; align-items: center; gap: 8px; padding: 12px 14px; }
.bbs-back { flex: none; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: none; padding: 0; color: var(--xtra-dim); font-size: 17px; line-height: 1; transition: color .12s ease; }
.bbs-back i { display: block; line-height: 1; }
.bbs-back:hover { color: var(--xtra-br); }
.bbs-view-title { display: inline-flex; align-items: center; line-height: 1; font-family: var(--font-mono); font-size: 12px; font-weight: 700; letter-spacing: .16em; color: var(--xtra-dim); }
.bbs-detail-body, .bbs-editor-body { padding: 4px 16px 18px; display: flex; flex-direction: column; gap: 14px; }
.bbs-detail-head { display: flex; align-items: center; gap: 14px; }
.bbs-detail-icon { flex: none; width: 60px; height: 60px; border-radius: 6px; overflow: hidden; display: grid; place-items: center;
  background: #0c0a14; border: 1px solid var(--xtra-line); color: #6f4d61; font-size: 24px; }
.bbs-detail-icon img { width: 100%; height: 100%; object-fit: cover; }
.bbs-detail-name { font-family: 'Barlow Condensed', var(--font-ui); font-weight: 700; font-size: 26px; color: var(--xtra-name); line-height: 1.05; }
.bbs-detail-addr { font-family: var(--font-mono); font-size: 12px; color: var(--xtra-dim); margin-top: 3px; }
.bbs-detail-desc { margin: 0; color: var(--xtra-body); font-size: 13.5px; line-height: 1.55; }
.bbs-detail-sec { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .16em; color: var(--xtra-dim); }
.bbs-shots-strip { display: flex; gap: 8px; flex-wrap: wrap; }
.bbs-shot-thumb { width: 90px; height: 62px; padding: 0; cursor: pointer; border-radius: 4px; overflow: hidden; background: #0c0a14; border: 1px solid var(--xtra-line); }
.bbs-shot-thumb:hover { border-color: var(--xtra); }
.bbs-shot-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbs-info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 18px; padding: 14px; border: 1px solid var(--xtra-line); border-radius: 4px; background: #12111e; }
.bbs-info-cell { display: flex; flex-direction: column; gap: 3px; }
.bbs-info-k { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--xtra-dim); }
.bbs-info-v { font-size: 14px; color: var(--xtra-name); }
.bbs-detail-foot, .bbs-editor-foot { display: flex; gap: 10px; align-items: center; margin-top: 2px; }
.bbs-btn { cursor: pointer; padding: 8px 14px; border-radius: 4px; background: #000; border: 1px solid var(--xtra-line-hi); color: var(--xtra-body);
  font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 7px; transition: border-color .12s, background .12s, color .12s; }
.bbs-btn:hover { border-color: var(--xtra); color: var(--xtra-br); }
.bbs-primary { margin-left: auto; background: var(--xtra); border-color: var(--xtra); color: #1a0f16; font-weight: 700; }
.bbs-primary:hover { background: var(--xtra-br); border-color: var(--xtra-br); color: #1a0f16; }
.bbs-editor-foot .bbs-primary, .bbs-detail-foot .bbs-primary { margin-left: auto; }
/* editor form */
.bbs-fld { display: flex; flex-direction: column; gap: 5px; }
.bbs-fld > span, .bbs-fld-head { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .1em; color: var(--xtra-dim); }
.bbs-fld-row { display: flex; gap: 12px; }
.bbs-fld-row .bbs-fld { flex: 1; }
.bbs-in { background: #0c0a14; border: 1px solid var(--xtra-line); border-radius: 4px; padding: 9px 11px; color: var(--xtra-name); font-family: var(--font-ui); font-size: 14px; width: 100%; }
.bbs-in:focus { outline: none; border-color: var(--xtra); }
.bbs-ta { resize: vertical; min-height: 68px; line-height: 1.5; }
.bbs-icon-row { display: flex; align-items: center; gap: 14px; }
.bbs-icon-prev { flex: none; width: 60px; height: 60px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: #0c0a14; border: 1px solid var(--xtra-line); color: #6f4d61; font-size: 22px; }
.bbs-icon-prev img { width: 100%; height: 100%; object-fit: cover; }
.bbs-icon-actions { display: flex; gap: 8px; }
.bbs-shots-edit { display: flex; flex-direction: column; gap: 8px; }
.bbs-shots-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.bbs-shot-cell { position: relative; width: 84px; height: 58px; border-radius: 4px; overflow: hidden; border: 1px solid var(--xtra-line); }
.bbs-shot-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bbs-shot-del { position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; display: grid; place-items: center; cursor: pointer;
  border: none; border-radius: 3px; background: rgba(8,8,16,.85); color: #ff8a8a; font-size: 10px; }
.bbs-shot-del:hover { background: #3a1620; color: #fff; }
.bbs-hint { font-family: var(--font-mono); font-size: 11px; color: var(--xtra-dim); }
.bbs-editor-msg { min-height: 14px; font-family: var(--font-mono); font-size: 11px; color: var(--xtra-dim); }
.bbs-editor-msg.err { color: #ff8a8a; }
.bbs-editor-msg.ok { color: #6fd08c; }
/* Pending-approval markers (amber = needs attention). */
.bbs-pend-star, .adm-pend-star { color: #ffcf4d; font-size: .8em; }
.bbs-entry.bbs-pending { opacity: .82; }
.bbs-entry.bbs-pending .bbs-entry-note { color: #c9a558; }
.bbs-pend-tag { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 999px;
  background: rgba(255,190,60,.12); border: 1px solid rgba(255,190,60,.4); color: #ffcf4d;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .12em; }
.bbs-pend-note { padding: 9px 12px; border-radius: 4px; background: rgba(255,190,60,.08); border: 1px solid rgba(255,190,60,.28);
  color: #e6c98a; font-family: var(--font-mono); font-size: 11px; line-height: 1.5; }
.adm-bbs-row.adm-bbs-pending { border-left: 2px solid #ffcf4d; }
/* Star badge on the shield rail button + the admin BBS nav item when boards await approval. */
.rail-btn.has-pending, .adm-nav-i.has-pending { position: relative; }
.rail-btn.has-pending::after, .adm-nav-i.has-pending::after {
  content: "\2605"; position: absolute; top: -1px; right: 1px; font-size: 10px; line-height: 1;
  color: #ffcf4d; text-shadow: 0 0 6px rgba(255,190,60,.75); pointer-events: none;
}

/* Admin → Users: grant/revoke the Wicked tier by handle. (Kept here as frontdoor.css has budget room.) */
.adm-users-card { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px; border: 1px solid #1e2b42; padding: 16px; border-radius: 6px; }
.adm-fld { display: flex; flex-direction: column; gap: 5px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #8fa3b8; }
.adm-fld input, .adm-fld select, .adm-fld textarea { background: #0e141d; border: 1px solid #22303f; border-radius: 4px; color: #dfe9f4; padding: 8px 10px; font-size: 13px; font-family: var(--font-ui); min-width: 150px; }
.adm-fld input:focus, .adm-fld select:focus, .adm-fld textarea:focus { outline: none; border-color: var(--accent); } .adm-set-card { flex-direction: column; align-items: stretch; } .adm-set-card .adm-fld { width: 100%; } .adm-set-card textarea { width: 100%; box-sizing: border-box; resize: vertical; font-family: var(--font-mono); } .adm-set-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 12px; } .adm-set-actions .adm-role-msg { flex: 1 1 auto; margin: 0; }
.adm-role-go { cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: none; border-radius: 4px; background: var(--accent); color: #06121c; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; }
.adm-role-go:hover { filter: brightness(1.08); }
.adm-role-msg { flex-basis: 100%; font-size: 12px; min-height: 15px; }
.adm-users-note { margin: 12px 2px 0; color: #63748c; font-size: 12px; line-height: 1.5; }
/* Admin → BBS directory */
.adm-bbs-form { margin-bottom: 14px; }
.adm-bbs-list { display: flex; flex-direction: column; border: 1px solid #1e2b42; border-radius: 6px; overflow: hidden; }
.adm-bbs-row { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-top: 1px solid #17233a; }
.adm-bbs-row:first-child { border-top: none; }
.adm-bbs-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.adm-bbs-info b { color: #eaf4ff; font-family: 'Barlow Condensed', var(--font-ui); font-weight: 700; font-size: 17px; letter-spacing: .02em; }
.adm-bbs-info span { color: #5f7189; font-family: var(--font-mono); font-size: 11px; }
.adm-bbs-btn { cursor: pointer; border: 1px solid #22303f; background: #10161f; color: #8fa3b8; border-radius: 4px; width: 30px; height: 30px; flex: none; }
.adm-bbs-btn:hover { color: #dbe6f2; border-color: var(--accent); }
.adm-bbs-btn.bbs-del:hover { color: #ff6b6b; border-color: #ff6b6b; }
/* Approve / Unapprove toggle: green call-to-action while pending, muted once approved. */
.adm-appr-btn { flex: none; cursor: pointer; padding: 7px 12px; border-radius: 4px; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .04em;
  border: 1px solid #3f7a52; background: rgba(80,180,110,.14); color: #7fd39a; transition: background .12s, border-color .12s, color .12s; }
.adm-appr-btn:hover { background: rgba(80,180,110,.24); }
.adm-appr-btn.on { border-color: #2a3444; background: #10161f; color: #9aa4b4; }   /* already approved → muted "Unapprove" */
.adm-appr-btn.on:hover { border-color: #ffcf4d; color: #ffcf4d; background: rgba(255,190,60,.08); }
.adm-bbs-toolbar { display: flex; margin-bottom: 12px; }
.adm-bbs .bbs-view-bar { padding-left: 0; padding-right: 0; }   /* editor's back bar aligns with the admin section */
.avatar-upload {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 9px 14px; border: 1px dashed #22303f; border-radius: 4px;
  color: #9aa4b4; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; cursor: pointer; transition: color .15s ease, border-color .15s ease;
}
.avatar-upload:hover { color: #dbe6f2; border-color: var(--accent); }
.profile-msg { font-size: 12px; min-height: 0; color: #ff6b6b; font-family: var(--font-mono); }
.profile-tagline { width: 100%; box-sizing: border-box; padding: 9px 11px; background: #0d1626; border: 1px solid #26344d;
  color: #dce8f4; font-family: var(--font-ui); font-size: 14px; }
.profile-tagline:focus { outline: none; border-color: #57b6e8; }
.profile-msg:empty { display: none; }
.profile-charsheet { width: 100%; box-sizing: border-box; padding: 7px 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border-radius: 4px; cursor: pointer; border: 1px solid #7a4a68; background: rgba(160,70,130,.14); font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; color: #e6b8d4; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.profile-charsheet:hover { background: rgba(190,80,150,.26); border-color: #b06aa0; color: #fff; } .profile-crew { display: flex; flex-direction: column; gap: 7px; } .profile-crew-hint { margin: -3px 0 1px; }
.profile-foot { margin-top: 2px; padding-top: 14px; border-top: 1px solid #17202e; display: flex; gap: 12px; } .profile-foot > .profile-charsheet, .profile-foot > .profile-logout { flex: 1 1 0; margin: 0; }   /* Character Sheet + Log Out side by side */
.profile-logout {
  padding: 7px 0; text-align: center; border-radius: 4px; cursor: pointer;
  border: 1px solid #6b3a33; background: rgba(120,45,40,.18);
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .16em; color: #e7a99a;
  transition: background .15s ease, color .15s ease;
}
.profile-logout:hover { background: rgba(150,55,48,.3); color: #fff; }

/* ---- Game lobby (big-tile grid, per PSD/game_lobby_pong.jpg) ---- */
/* Gray theme: neutral dark chrome + real drop shadow, so the game thumbnails are what pops.
   Blue + green stay as the only accents. Scoped to the lobby so the profile modal is unchanged. */
/* The lobby overlays ONLY the panel strip (it lives inside .shelf-wrap). */
#game-lobby {
  position: absolute; inset: 0; z-index: 15;
  align-items: stretch; padding: 14px;
  background: rgba(4, 7, 13, .76); backdrop-filter: blur(3px);
}
.game-lobby-card {
  --neon-blue: #a678f0;                               /* lobby accent → purple (game theme) */
  width: 100%; max-width: none; height: 100%; max-height: 100%; overflow: hidden; text-align: left;
  background: #0c111c;                                 /* navy card */
  border: 1px solid #33285e;                           /* purple outline */
  border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(166,120,240,.2), 0 40px 90px -30px #000;   /* purple ring + deep shadow */
}
#game-lobby-tables { height: 100%; }

/* ---- Lobby reveal transition (spec: PSD/lobby-reveal-transition.html) ----
   open: purple accent bar at vertical centre → unfolds up + down · switch: collapse back to the
   bar, swap content, unfold again · close: straight fade. clip-path (not scaleY) so type never
   distorts. Driven entirely by [data-state] on #game-lobby: closed / bar / open / closing. */
:root { --lobby-accent: #a678f0; --lobby-unfold: 680ms; --lobby-fade: 300ms; }
#game-lobby.modal-overlay { transition: opacity var(--lobby-fade) ease, visibility var(--lobby-fade) ease; }
#game-lobby[data-state="bar"], #game-lobby[data-state="open"] { opacity: 1; visibility: visible; pointer-events: auto; }
#game-lobby[data-state="closing"] { opacity: 0; visibility: visible; pointer-events: none; }
#game-lobby[data-state="closed"] { display: none; }

#game-lobby .lobby-bar {
  position: absolute; left: 14px; right: 14px; top: 50%; height: 3px; margin-top: -1.5px; z-index: 2;
  border-radius: 2px; background: var(--lobby-accent); box-shadow: 0 0 18px var(--lobby-accent);
  opacity: 0; pointer-events: none; transition: opacity 200ms ease;
}
#game-lobby[data-state="bar"] .lobby-bar { opacity: 1; }

/* panel: a 4px slice at the vertical centre, unfolding to full on "open" */
.game-lobby-card { clip-path: inset(calc(50% - 2px) 0 calc(50% - 2px) 0); transition: clip-path var(--lobby-unfold) cubic-bezier(.16, 1, .3, 1); }
#game-lobby[data-state="open"] .game-lobby-card { clip-path: inset(0 0 0 0); }

/* contents fade in on "open" so they don't smear through the clip edge during the unfold */
#game-lobby-tables { opacity: 0; transition: opacity 300ms ease; }
#game-lobby[data-state="open"] #game-lobby-tables { opacity: 1; }

/* Guest sign-up CTAs in the lobby (gold, locked). */
.lb-cta-btn.guest-cta { border: 1px solid #6b5520; background: linear-gradient(#241d0c, #1a1509); color: #e8c98a; }
.lb-cta-btn.guest-cta:hover { border-color: #a3822f; background: #3a2f16; color: #f0d9a4; }
.lb-cta-btn.guest-cta .lb-cta-l { display: inline-flex; align-items: center; gap: 7px; }
.gt-new.gt-guest { border-color: #4a3c18; cursor: pointer; }
.gt-new.gt-guest:hover { border-color: #a3822f; }
.gt-new.gt-guest .gt-new-plus, .gt-new.gt-guest .gt-new-t { color: #e8c98a; }
.gt-guest-sub { margin-top: 6px; padding: 0 12px; text-align: center; font-family: var(--font-mono); font-size: 10px; line-height: 1.5; color: #6d7f92; }

.game-lobby-card { padding: 0; }                              /* columns fill edge-to-edge */
.game-lobby-card > .profile-close { display: none; }          /* close lives in the header bar */
#game-lobby-tables { height: 100%; }

/* Two columns: LEFT = header + hero + table sections; RIGHT = now playing + lobby chat. */
.lobby-body { display: flex; height: 100%; min-height: 0; font-family: var(--font-ui); }
.lobby-left { flex: 1 1 340px; min-width: 340px; display: flex; flex-direction: column; min-height: 0; }
.lobby-right { flex: 0 1 340px; min-width: 240px; display: flex; flex-direction: column; min-height: 0; background: #0a0f18; border-left: 1px solid #1b2434; }

/* left header bar */
.lb-head { flex: none; display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 16px; background: #171426; border-bottom: 1px solid #2e2450; }
.lb-cap { width: 3px; height: 17px; border-radius: 2px; background: #a678f0; flex: none; }
.lb-title { flex: none; font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; color: #e8e2f8; }
.lb-sub { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 10px; color: #8878ab; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-x { flex: none; background: none; border: none; cursor: pointer; font-family: var(--font-mono); font-size: 13px; color: #9a8bbd; transition: color .15s ease; }
.lb-x:hover { color: #e0653c; }

.lobby-scroll { flex: 1; min-height: 0; overflow-y: auto; }

/* hero */
.lb-hero { display: flex; flex-wrap: wrap; align-items: stretch; gap: 14px; padding: 16px; border-bottom: 1px solid #1b2434; }
.lb-hero-main { flex: 1 1 270px; min-width: 260px; display: flex; flex-direction: column; gap: 12px; }
.lb-name-row { display: flex; align-items: baseline; gap: 10px; }
.lb-name { font-family: var(--font-display); font-size: 34px; line-height: 1; letter-spacing: .02em; color: #cdb8f5; text-transform: uppercase; }
.lb-players { font-family: var(--font-mono); font-size: 10px; letter-spacing: .16em; color: #6d6188; }
.lb-cta { display: flex; gap: 8px; }
.lb-cta-btn { display: flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 4px; cursor: pointer; border: none; }
.lb-cta-l { font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.lb-cta-t { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.lb-cta-btn.primary { background: #6c3fd1; box-shadow: inset 0 -2px 0 rgba(0,0,0,.25); }
.lb-cta-btn.primary .lb-cta-l { color: #fff; } .lb-cta-btn.primary .lb-cta-t { background: rgba(255,255,255,.16); color: #fff; }
.lb-cta-btn.primary:hover { filter: brightness(1.1); }
.lb-cta-btn.ghost { background: #1a2233; border: 1px solid #2b3d52; }
.lb-cta-btn.ghost .lb-cta-l { color: #c2d3e4; } .lb-cta-btn.ghost .lb-cta-t { background: #243247; color: #9db0c4; }
.lb-cta-btn.ghost:hover { background: #212c40; }
.lb-cta-btn.disabled { opacity: .4; pointer-events: none; }

/* leaderboard + your best */
.lb-stats { flex: 1 1 252px; min-width: 230px; display: flex; gap: 10px; }
.ll-board { flex: 1; min-width: 0; padding: 10px 11px; border-radius: 4px; background: #101825; display: flex; flex-direction: column; gap: 7px; }
.ll-h { font-family: var(--font-mono); font-size: 9px; letter-spacing: .18em; color: #5c6b7d; }
.ll-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.ll-list li { display: flex; align-items: center; gap: 7px; font-family: var(--font-mono); font-size: 11px; }
.ll-rank { width: 9px; flex: none; color: #6d6188; }
.ll-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #c2d3e4; }
.ll-score { font-weight: 700; color: #dbe6f2; font-variant-numeric: tabular-nums; }
.ll-empty { color: #5c6b7d; font-style: italic; }
.ll-you { flex: none; width: auto; min-width: 96px; padding: 10px 13px; border-radius: 4px; background: #141026; border: 1px solid #2b2450; display: flex; flex-direction: column; gap: 3px; justify-content: center; }
.ll-you .ll-h { color: #7b6da3; }
.ll-you-b { font-family: var(--font-mono); font-size: 22px; font-weight: 700; line-height: 1; color: #cdb8f5; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ll-you-s { font-family: var(--font-mono); font-size: 9px; color: #5c5478; }

/* sections + table cards */
.lb-secs { padding: 14px 16px 20px; display: flex; flex-direction: column; gap: 16px; }
.lb-sec { display: flex; flex-direction: column; gap: 10px; }
.lb-sec-head { display: flex; align-items: center; gap: 9px; }
.lb-sec-l { font-family: var(--font-mono); font-size: 10px; letter-spacing: .2em; color: #8878ab; }
.lb-sec-line { flex: 1; height: 1px; background: #1b2434; }
.lb-sec-c { font-family: var(--font-mono); font-size: 10px; color: #4d5f73; }
.lb-cards { display: flex; gap: 10px; flex-wrap: wrap; }

.gt { width: 184px; display: flex; flex-direction: column; border-radius: 4px; overflow: hidden; background: #101825; border: 1px solid #1b2434; transition: border-color .15s ease; }
.gt:hover { border-color: #6c3fd1; }
.gt-head { display: flex; align-items: center; gap: 7px; padding: 7px 9px; background: #131c2b; border-bottom: 1px solid #1b2434; }
.gt-num { font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: #8878ab; flex: none; }
.gt-title { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; color: #c2d3e4; }
.gt-badge { flex: none; font-family: var(--font-mono); font-size: 9px; padding: 1px 5px; border-radius: 8px; }
.gt-badge.waiting { background: #3a2f13; color: #e0a33a; }
.gt-badge.live    { background: #2b2140; color: #c3a6f0; }
.gt-badge.run     { background: #1c3f2b; color: #7fe0a8; }
.gt-img { position: relative; height: 130px; background: #0a1220 center / cover no-repeat; }
.gt-img.noimg { display: grid; place-content: center; }
.gt-ini { font-family: var(--font-display); font-size: 40px; font-weight: 800; }
.gt-img::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 38px; background: linear-gradient(to top, rgba(8,12,20,.9), transparent); pointer-events: none; }
.gt-meta { position: absolute; left: 9px; bottom: 7px; z-index: 1; display: flex; align-items: baseline; gap: 6px; }
.gt-meta-l { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: #8ea3b8; }
.gt-meta-v { font-family: var(--font-mono); font-size: 14px; font-weight: 700; color: #fff; }
.gt-actions { display: flex; align-items: center; gap: 7px; padding: 8px 9px; }

.lt-btn { border-radius: 3px; font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; padding: 7px 11px; cursor: pointer; background: #1a2233; border: 1px solid #2b3d52; color: #9db0c4; transition: filter .15s ease, background .15s ease; }
.lt-btn:hover { background: #212c40; filter: brightness(1.1); }
.gt-actions .lt-join, .gt-actions .lt-open, .gt-actions .lt-full { flex: 1; text-align: center; }
.lt-join { background: #6c3fd1; border-color: transparent; color: #fff; }   /* primary = purple */
.lt-btn.disabled { opacity: .5; pointer-events: none; }

/* dashed "start my own" card */
.gt-new { width: 184px; min-height: 210px; border-radius: 4px; border: 1px dashed #35406b; background: #0e1320; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.gt-new:hover { border-color: #6c3fd1; background: #12142a; }
.gt-new.disabled { opacity: .4; pointer-events: none; }
.gt-new-plus { width: 26px; height: 26px; border-radius: 50%; border: 1px solid #4b3d80; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 14px; color: #a678f0; }
.gt-new-t { font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: #8878ab; }
.gt-new-n { font-family: var(--font-display); font-size: 26px; font-weight: 700; line-height: 1; color: #6c5a9c; }

/* RIGHT column: SAMPLE (game demo) + LOBBY CHAT — split 50/50 */
.lp-now { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-bottom: 1px solid #1b2434; }
.lp-head { flex: none; display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px; background: #0f1520; border-bottom: 1px solid #1b2434; }
.lp-cap { width: 3px; height: 14px; border-radius: 2px; flex: none; }
.lp-cap.purple { background: #a678f0; } .lp-cap.blue { background: #57b6e8; }
.lp-h-t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em; color: #b9a9e0; }
.lp-chat .lp-h-t { color: #9ab6cf; }
.lp-here { flex: none; font-family: var(--font-mono); font-size: 10px; color: #5c6b7d; }
.lp-dock { background: none; border: none; color: #5c6b7d; font-size: 12px; cursor: pointer; padding: 2px; transition: color .15s ease; }
.lp-dock:hover { color: #9fd8f5; }
.lp-now-body { flex: 1; min-height: 0; padding: 10px; display: flex; }
.lp-board { position: relative; flex: 1; min-width: 0; min-height: 0; overflow: hidden; border: 1px solid #1b2c44; background: #0a1220; }
.lp-board-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.lp-ph { position: absolute; inset: 0; display: grid; place-content: center; color: #a678f0; opacity: .8; }
.lp-ph svg { width: 44px; height: 44px; }
.lp-chat { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.lp-chat-body { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; background: var(--panel-bg); }
.dock-sub { color: #b7c2d6; font-family: var(--font-ui); font-size: 13px; line-height: 1.5; margin-bottom: 16px; }

/* "Start my own game" → mode-choice popup (gray card, dark drop shadow, dim fadeout) */
.choice-overlay {
  --neon-blue: #a678f0;                               /* match the lobby purple */
  position: fixed; inset: 0; z-index: 27000;
  display: flex; align-items: center; justify-content: center;
  background: rgba(3, 4, 8, .72);
}
.choice-box {
  width: min(360px, 90vw); padding: 22px 22px 14px; text-align: center;
  background: #0c111c; border: 1px solid #33285e; border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(166,120,240,.2), 0 40px 90px -30px #000;
  font-family: var(--font-ui); color: #cfd6e2;
}
.choice-title { font-family: var(--font-display); font-size: 18px; letter-spacing: .5px; color: var(--neon-blue); margin-bottom: 16px; }
.choice-opts { display: flex; gap: 12px; }
.choice-opt {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer;
  background: #101825; border: 1px solid #1b2434; border-radius: 8px; padding: 18px 10px;
  color: #c9ccd2; font-family: var(--font-ui); transition: border-color .15s ease, background .15s ease;
}
.choice-opt:hover { border-color: var(--neon-blue); background: rgba(166,120,240,.08); }
.choice-opt-n { font-family: var(--font-display); font-size: 30px; font-weight: 800; color: var(--neon-blue); line-height: 1; }
.choice-opt-l { font-size: 13px; font-weight: 700; }
.choice-single:hover { border-color: #22c55e; background: rgba(34,197,94,.06); }
.choice-single .choice-opt-n { color: #22c55e; }   /* 1P green, 2P blue — the two accents */
.choice-cancel {
  margin-top: 14px; background: none; border: none; cursor: pointer;
  color: #7f8794; font-family: var(--font-ui); font-size: 13px; transition: color .15s ease;
}
.choice-cancel:hover { color: #cfd6e2; }
.gt-empty-s { font-family: var(--font-ui); font-size: 11px; color: #56555a; }

/* ---- Pre-game options popup (public/private, dock chat, shareable join link) ---- */
.pregame-box { width: min(420px, 92vw); text-align: left; padding: 22px 22px 16px; }
.pregame-box .choice-title { margin-bottom: 6px; }
.pregame-sub { font-family: var(--font-ui); font-size: 13px; line-height: 1.5; color: #93a3ba; margin-bottom: 16px; }
.pregame-group { display: flex; flex-direction: column; gap: 8px; padding: 12px 0; border-top: 1px solid #1b2434; }
.pregame-radio, .pregame-check { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 13px; color: #cfd6e2; }
.pregame-radio input, .pregame-check input { margin: 2px 0 0; accent-color: #a678f0; flex: none; cursor: pointer; }
.pregame-radio span { display: flex; flex-direction: column; gap: 2px; }
.pregame-radio b { font-weight: 700; color: #e4ecf7; }
.pregame-radio i { font-style: normal; font-size: 11px; color: #7f8da4; line-height: 1.4; }
.pregame-check span { line-height: 1.4; }
.pregame-check i { font-style: normal; font-size: 11px; color: #8a6f3a; margin-left: 4px; }
.pregame-soon { opacity: .5; cursor: default; }
.pregame-soon input { cursor: default; }
.pregame-check[data-done="1"] { opacity: .65; cursor: default; }
.pregame-linkrow { display: flex; gap: 8px; margin: 14px 0 4px; }
.pregame-link {
  flex: 1; min-width: 0; height: 34px; padding: 0 10px; box-sizing: border-box;
  background: #060a12; border: 1px solid #2b3d52; border-radius: 4px;
  font-family: var(--font-mono); font-size: 11px; color: #9fd0f0;
}
.pregame-link:focus { outline: none; border-color: #a678f0; }
.pregame-copy {
  flex: none; width: 40px; height: 34px; cursor: pointer; border-radius: 4px;
  background: #1a2233; border: 1px solid #2b3d52; color: #c2d3e4;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.pregame-copy:hover { background: #212c40; border-color: #3a4d66; }
.pregame-copy.copied { color: #7ddba4; border-color: #2f6b45; }
.pregame-box .choice-opts { margin-top: 14px; justify-content: flex-end; }

/* ================= Start-game dialog (reskin: PSD/Start T3TR1S dialog) ================= */
@keyframes sg-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes sg-sheen { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }
.sg-overlay { position: fixed; inset: 0; z-index: 27000; display: flex; align-items: center; justify-content: center; background: rgba(3,4,8,.72); }
.sg-dialog {
  position: relative; width: min(520px, 94vw); box-sizing: border-box; overflow: hidden;
  background: #0d1220; border: 1px solid #262036; color: #cfd6e2; font-family: var(--font-ui);
  box-shadow: 0 26px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(166,120,240,.07);
  animation: sg-in 320ms cubic-bezier(.2,.7,.3,1) both;
}
.sg-accent { height: 2px; background: linear-gradient(90deg, #57b6e8 0%, #a678f0 52%, #6b4bb0 100%); }
.sg-head { display: flex; align-items: flex-start; gap: 13px; padding: 17px 18px 15px; }
.sg-glyph { width: 38px; height: 38px; flex: none; box-sizing: border-box; padding: 6px; display: flex; align-items: center; justify-content: center;
  background: rgba(166,120,240,.13); border: 1px solid rgba(166,120,240,.34); color: #a678f0; }
.sg-glyph svg { width: 100%; height: 100%; }
.sg-grid { width: 100%; height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); gap: 2px; }
.sg-grid i { background: rgba(166,120,240,.16); }
.sg-grid i.on { background: #a678f0; }
.sg-titles { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sg-title { font-family: "Barlow Condensed", "Barlow Semi Condensed", sans-serif; font-weight: 700; font-size: 27px; line-height: 1; letter-spacing: .035em; text-transform: uppercase; color: #f1ebff; }
.sg-sub { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .15em; color: #8b7fae; }
.sg-sub em { font-style: normal; color: #3d3352; }
.sg-dialog button { appearance: none; -webkit-appearance: none; border-radius: 0; }
.sg-close { flex: none; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; cursor: pointer;
  background: none; border: 1px solid transparent; font-family: var(--font-mono); font-size: 13px; color: #6f6390;
  transition: color .14s ease, border-color .14s ease, background .14s ease; }
.sg-close:hover { color: #ff8a6a; border-color: #43293a; background: rgba(255,138,106,.08); }
.sg-desc { padding: 0 18px 15px; font-size: 14.5px; line-height: 1.45; color: #93a2ba; }
.sg-hr { height: 1px; background: linear-gradient(90deg, #262036, rgba(38,32,54,.25)); }
.sg-sec { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px 4px; }
.sg-sec:last-of-type { padding-bottom: 4px; }
.sg-label { font-family: var(--font-mono); font-size: 9px; letter-spacing: .22em; color: #6b5f8a; } .sg-label-hint { letter-spacing: .1em; color: #5a5273; text-transform: none; }

.sg-choices { display: flex; gap: 9px; }
.sg-choice { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; padding: 12px; cursor: pointer;
  background: transparent; border: 1px solid #262036; transition: background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.sg-choice.selected { background: rgba(166,120,240,.10); border-color: #a678f0; box-shadow: 0 0 0 1px rgba(166,120,240,.25), 0 0 18px rgba(166,120,240,.12); }
.sg-choice-top { display: flex; align-items: center; gap: 8px; }
.sg-ci { flex: none; color: #7d7397; transition: color .15s ease; }
.sg-choice.selected .sg-ci { color: #c3a6f0; }
.sg-choice-t { flex: 1; font-weight: 700; font-size: 15px; letter-spacing: .01em; color: #aeb6c6; transition: color .15s ease; }
.sg-choice.selected .sg-choice-t { color: #f1ebff; }
.sg-radio { width: 13px; height: 13px; flex: none; border-radius: 50%; border: 1px solid #3a3550; background: transparent; position: relative; transition: border-color .15s ease, background .15s ease; }
.sg-radio::after { content: ""; position: absolute; inset: 0; margin: auto; width: 5px; height: 5px; border-radius: 50%; background: transparent; transition: background .15s ease; }
.sg-choice.selected .sg-radio { border-color: #a678f0; background: rgba(166,120,240,.15); }
.sg-choice.selected .sg-radio::after { background: #a678f0; }
.sg-choice-sub { font-size: 13px; line-height: 1.4; color: #6f7890; transition: color .15s ease; }
.sg-choice.selected .sg-choice-sub { color: #b6a8d6; }

.sg-chatrow { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-left: 2px solid #2a3140; cursor: pointer; }
.sg-chatrow.blue { background: rgba(87,182,232,.05); border-left-color: rgba(87,182,232,.5); }
.sg-chatrow.soon { background: rgba(120,132,150,.04); border-left-color: #2a3140; cursor: default; }
.sg-toggle { width: 26px; height: 15px; flex: none; border-radius: 8px; background: #1a212e; border: 1px solid #2a3140; position: relative; transition: background .15s ease, border-color .15s ease; }
.sg-toggle::after { content: ""; position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #46505f; transition: left .15s ease, background .15s ease; }
.sg-chatrow.blue.on .sg-toggle, .sg-chatrow.blue.locked .sg-toggle { background: rgba(87,182,232,.3); border-color: rgba(87,182,232,.55); }
.sg-chatrow.blue.on .sg-toggle::after, .sg-chatrow.blue.locked .sg-toggle::after { left: 13px; background: #7fc8f0; }
.sg-chatrow.purple { background: rgba(166,120,240,.05); border-left-color: rgba(166,120,240,.5); }
.sg-chatrow.purple.on .sg-toggle { background: rgba(166,120,240,.3); border-color: rgba(166,120,240,.55); }
.sg-chatrow.purple.on .sg-toggle::after { left: 13px; background: #a678f0; }
.sg-chat-t { flex: 1; font-weight: 600; font-size: 14.5px; }
.sg-chatrow.blue .sg-chat-t { color: #cbdcec; }
.sg-chatrow.purple .sg-chat-t { color: #cbb8ec; }
.sg-chatrow.soon .sg-chat-t { color: #62707f; }
.sg-badge { font-family: var(--font-mono); font-size: 9px; letter-spacing: .14em; padding: 3px 6px; border: 1px solid; }
.sg-chatrow.blue .sg-badge { color: #7fc8f0; border-color: rgba(87,182,232,.35); }
.sg-chatrow.purple .sg-badge { color: #c3a6f0; border-color: rgba(166,120,240,.35); }
.sg-chatrow.soon .sg-badge { color: #6b7787; border-color: #2a3140; }

.sg-linkrow { display: flex; gap: 7px; }
.sg-link { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; padding: 0 11px; height: 38px; box-sizing: border-box; background: #080b13; border: 1px solid #2b2450; }
.sg-link-caret { font-family: var(--font-mono); font-size: 12px; color: #a678f0; }
.sg-link-url { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--font-mono); font-size: 12px; color: #9fd0f0; }
/* lavender COPY button — matches the game + chat panel invite-link buttons */
.sg-copy { flex: none; display: flex; align-items: center; gap: 7px; padding: 0 13px; height: 38px; box-sizing: border-box; cursor: pointer;
  background: rgba(166,120,240,.14); border: 1px solid rgba(166,120,240,.4); color: #c3a6f0; transition: background .15s ease, border-color .15s ease, color .15s ease; }
.sg-copy span { font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em; }
.sg-copy i { font-size: 12px; }
.sg-copy:hover { background: rgba(166,120,240,.24); border-color: #a678f0; color: #d9c6fb; }
.sg-copy.copied { color: #7ddba4; border-color: #2f6b45; background: rgba(75,191,122,.12); }

.sg-foot { display: flex; align-items: center; gap: 10px; padding: 14px 18px; }
.sg-ready { flex: 1; min-width: 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em; color: #5f5580; }
.sg-btn { flex: none; height: 36px; padding: 0 16px; box-sizing: border-box; cursor: pointer; white-space: nowrap; display: flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: .14em; line-height: 1; }
.sg-cancel { color: #97a6ba; background: transparent; border: 1px solid #2b3444; transition: color .14s ease, border-color .14s ease, background .14s ease; }
.sg-cancel:hover { color: #dbe6f2; border-color: #46536a; background: #131a26; }
.sg-start { position: relative; overflow: hidden; padding: 0 18px; color: #fff; letter-spacing: .16em;
  background: linear-gradient(180deg, #a678f0, #7f4fd6); border: 1px solid #b992f5; box-shadow: 0 0 20px rgba(166,120,240,.34);
  transition: box-shadow .16s ease, filter .16s ease; }
.sg-start:hover { box-shadow: 0 0 30px rgba(166,120,240,.55); filter: brightness(1.08); }
.sg-start > span { position: relative; }
.sg-enter { font-weight: 400; color: rgba(255,255,255,.62); }
.sg-sheen { position: absolute; top: 0; bottom: 0; left: 0; width: 34%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent); animation: sg-sheen 3.4s ease-in-out infinite; }