/* Fates & Furies — Stardust theme
   Pink-shifted, toned-down Slime Nebula direction applied to
   the FATES & FURIES frontend variant. Overrides base.css. */

/* ── Self-hosted fonts ──────────────────────────────────────────
   Baloo 2 (500/700/800) and Comfortaa (400/700), latin + latin-ext.
   Downloaded from Google Fonts and bundled locally so the theme
   works without any external request (faster + privacy-friendly).
   Reference fonts/fonts/<name>.woff2 from the frontend root. */
@font-face{font-family:'Ring of Kerry';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/ring-of-kerry.otf) format('opentype');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/baloo-2-500-latin.woff2) format('woff2'),url(fonts/baloo-2-500-latin-ext.woff2) format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/baloo-2-700-latin.woff2) format('woff2'),url(fonts/baloo-2-700-latin-ext.woff2) format('woff2');}
@font-face{font-family:'Baloo 2';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/baloo-2-800-latin.woff2) format('woff2'),url(fonts/baloo-2-800-latin-ext.woff2) format('woff2');}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/comfortaa-400-latin.woff2) format('woff2'),url(fonts/comfortaa-400-latin-ext.woff2) format('woff2');}
@font-face{font-family:'Comfortaa';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/comfortaa-700-latin.woff2) format('woff2'),url(fonts/comfortaa-700-latin-ext.woff2) format('woff2');}

:root {
  --bg:#0d0518;
  --pink:#ff69b4;
  --pink-light:#ffbae0;
  --pink-rgb:255,105,180;
  --pink-light-rgb:255,186,224;
  --bg-rgb:13,5,24;
  --accent:var(--pink-light);
  --black:#1a0f24;
  --white:#fff5ff;
  --side:#a08098;
  --hover-blue:#00c8ff;
  --track:rgba(255,255,255,.05);
  --max:520px;
  --max-wide:1040px;
  --font-size:20px;

  /* Dark-mode button palette */
  --btn-bg:rgba(35,20,55,.92);
  --btn-text:#ffbae0;
  --btn-shadow:rgba(0,0,0,.35);
  --btn-shadow-3d:rgba(15,8,28,.55);
  --btn-hover-brightness:1.12;
}

/* Google Fonts — loaded in fates_index.html */
*{
  border-color:transparent !important;
}

/* Global cute scrollbar */
::-webkit-scrollbar{width:14px;height:14px;}
::-webkit-scrollbar-track{
  background:rgba(13,5,24,.7);
  border-radius:12px;
  box-shadow:inset 0 0 6px rgba(0,0,0,.3);
}
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg,#ff69b4,#a020f0);
  border-radius:12px;
  border:3px solid rgba(13,5,24,.7);
  box-shadow:0 0 8px rgba(255,105,180,.4);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#ffbae0,#c040ff);
}
::-webkit-scrollbar-corner{background:transparent;}
html,body{
  width:100%;
  height:100%;
  height:100svh;
  overflow:hidden;
  position:fixed;
  top:0;left:0;right:0;bottom:0;
  background:#0d0518;
  overscroll-behavior:none;
  touch-action:none;
}
body{
  font-family:'Comfortaa','Baloo 2',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  background:
    radial-gradient(ellipse 160% 120% at 20% 0%, rgba(160,32,240,.20), transparent 55%),
    radial-gradient(ellipse 140% 110% at 80% 100%, rgba(255,105,180,.18), transparent 55%),
    radial-gradient(ellipse 130% 100% at 50% 50%, rgba(0,200,255,.12), transparent 50%),
    linear-gradient(180deg, #0d0518 0%, #1a0d2e 50%, #0d0518 100%);
  background-attachment:fixed;
  background-size:cover;
  color:var(--white);
  -webkit-overflow-scrolling:auto;
}
html,body,#app,#app-inner{overscroll-behavior:none;}
#app,#app-inner{
  height:100vh;
  height:100dvh;
  height:100svh;
  background:#0d0518;
}
.screen{
  height:100%;
  overflow:hidden;
}

#app{
  border:none;
  background:#0d0518;
  max-width:var(--max);
  margin:0 auto;
  position:relative;
  overflow:hidden;
}
#app.wide{max-width:var(--max-wide);}
#app-inner{
  background:transparent;
  border:none;
  box-shadow:none;
  backdrop-filter:none;
  overflow:hidden;
}

/* Top bars + auth/modal headers */
.top-bar,
.auth-header,
.users-header,
.modal-header,
.settings-header{
  background:linear-gradient(90deg, #ff69b4, #ff1493, #a020f0, #00c8ff, #ffd700, #ff69b4);
  background-size:300% auto;
  color:#fff;
  font-family:'Baloo 2',cursive;
  font-weight:800;
  letter-spacing:1px;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
  animation:bar-flow 10s linear infinite;
  border:none;
}
@keyframes bar-flow{to{background-position:300% center;}}

/* Auth box */
.auth-box{
  background:linear-gradient(145deg, rgba(255,105,180,.10), rgba(160,32,240,.10));
  border:none;
  border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.22);
  backdrop-filter:blur(14px);
  overflow:hidden;
}
.rebelleon-title{
  font-family:'Ring of Kerry','Uncial Antiqua',cursive;
  font-size:2.4em;
  letter-spacing:2px;
  text-transform:none;
  margin:0;
  padding:8px 0;
}

/* Buttons — darkmode, consistent sizing */
.btn-primary,
.btn-small,
.btn-secondary,
.btn-icon,
.tab,
.toggle-btn,
.dm-icon{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:14px;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  letter-spacing:1px;
  box-shadow:0 3px 0 var(--btn-shadow-3d), 0 5px 14px var(--btn-shadow);
  transform:translateY(0);
  transition:.15s;
  padding:7px 13px;
  font-size:0.78em;
}
.btn-primary:hover,.btn-small:hover,.btn-secondary:hover,.btn-icon:hover,.tab:hover,.toggle-btn:hover,.dm-icon:hover{
  transform:translateY(-1px);
  filter:brightness(var(--btn-hover-brightness));
}
.btn-primary:active,.btn-small:active,.btn-secondary:active,.btn-icon:active,.tab:active,.toggle-btn:active,.dm-icon:active{
  transform:translateY(2px) scale(.98);
}

/* Primary action accent */
.btn-primary,.tab.active,.toggle-btn.active{
  background:linear-gradient(180deg,#ff69b4,#e83d8e);
  color:#fff;
  box-shadow:0 4px 0 #6e123c, 0 6px 18px rgba(255,105,180,.35);
}
.toggle-btn.active::before{content:'✓ ';}

/* Header buttons in top bar stay visually aligned */
.top-bar .btn-small,
.top-bar .btn-icon,
.top-bar .btn-secondary{
  padding:6px 11px;
  font-size:0.72em;
  border-radius:8px;
  height:30px;
  min-width:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}

/* Tabs keep a uniform pill shape */
.tab.active::after{content:none;}

/* Inputs / textareas */
input,textarea{
  background:rgba(30,18,45,.80);
  color:#fff5ff;
  border:none;
  border-radius:14px;
  font-weight:700;
  font-family:'Comfortaa',cursive;
  box-shadow:inset 0 3px 12px rgba(139,28,94,.10), 0 5px 14px rgba(255,105,180,.08);
}
input:focus,textarea:focus{
  box-shadow:0 0 0 3px rgba(255,105,180,.30), inset 0 3px 12px rgba(0,0,0,.20);
}
input::placeholder,textarea::placeholder{color:#b39db5;}

/* Room list items */
.room-item{
  background:rgba(255,105,180,.10);
  border:none;
  border-radius:14px;
  position:relative;overflow:hidden;
  padding-left:18px;
}
.room-item::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:8px;
  background:linear-gradient(180deg, #ff69b4, #ff1493, #a020f0, #00c8ff, #ffd700, #ff69b4);
  background-size:100% 200%;
  animation:border-flow 10s linear infinite;
}
@keyframes border-flow{to{background-position:0 200%;}}
.room-item:hover{background:rgba(255,105,180,.15);box-shadow:0 0 22px rgba(160,32,240,.15);transform:scale(1.006);}
.room-item.dm-room-item{border-style:dashed;}
.room-name{color:#fff;font-weight:700;}
.dm-icon-prefix{color:#ff69b4;}
.room-topic,.room-meta,.typing-indicator,.system-msg,.msg-time{color:#e4b8d8;}

/* Messages area */
.messages{
  background:rgba(0,0,0,.18);
  padding:10px 14px;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.msg{
  margin:8px 0;
  padding:8px 12px;
  border-radius:14px;
}

/* Lobby scrollable body */
.lobby-body{
  flex:1;
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-y:contain;
  touch-action:pan-y;
}
.msg-user{color:#ff69b4;font-weight:700;}
.msg-user.admin{color:#a020f0;}
.msg-content{color:var(--white);}
.action-msg{color:#ffd700;}

/* Input bar */
.input-bar{
  background:transparent;
  border-radius:0;
  padding:16px 18px;
  gap:14px;
  flex-shrink:0;
  position:relative;
  padding-bottom:calc(28.6px + var(--sab, env(safe-area-inset-bottom)) * 1.95);
}
#message-input{
  padding:12px 16px;
  min-height:50px;
  line-height:1.5;
  background:rgba(30,18,45,.70);
  border:2px solid #ff69b4;
  box-shadow:0 0 0 2px rgba(255,105,180,.25), 0 0 10px rgba(255,105,180,.35);
  scrollbar-width:none;
  -ms-overflow-style:none;
}
#message-input::-webkit-scrollbar{display:none;}
#message-input:focus{
  box-shadow:0 0 0 3px rgba(255,105,180,.40), 0 0 14px rgba(255,105,180,.50);
}
#send-btn{
  align-self:flex-end;
  width:50px;
  height:50px;
  min-width:50px;
  min-height:50px;
  padding:0;
  border-radius:50%;
  margin-bottom:2px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  flex-shrink:0;
  background:linear-gradient(180deg,#ff69b4,#a020f0);
  box-shadow:0 0 0 2px rgba(255,105,180,.30), 0 0 10px rgba(255,105,180,.35);
}
#send-btn::before{
  content:'';
  width:0;
  height:0;
  border-left:10px solid transparent;
  border-right:10px solid transparent;
  border-bottom:16px solid #fff5ff;
  transform:translateY(-2px);
  filter:drop-shadow(0 1px 1px rgba(0,0,0,.25));
}

/* Badges / tags */
.user-badge{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:14px;
  font-weight:700;
  box-shadow:0 2px 0 var(--btn-shadow-3d);
  padding:5px 10px;
  margin:0 4px;
}
.admin-tag,.master-tag{background:var(--btn-bg);color:var(--btn-text);border:none;box-shadow:0 2px 0 var(--btn-shadow-3d);}
.master-tag{background:linear-gradient(180deg,#ffd700,#e6c200);color:#4a3d00;box-shadow:0 2px 0 #7a6800;}
.badge-star{filter:drop-shadow(0 0 4px rgba(255,215,0,.5));}

/* Connection dot */
.conn-dot.connected{background:#00c8ff;box-shadow:0 0 12px #00c8ff;animation:star-pulse 4s ease-in-out infinite;}
@keyframes star-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.15);}}

/* Modals / settings / sidebars */
.modal-box,.settings-box{
  background:rgba(55,12,85,.90);
  border:none;
  border-radius:14px;
  box-shadow:0 26px 75px rgba(0,0,0,.35), 0 0 30px rgba(160,32,240,.10);
}
.users-sidebar{
  background:rgba(55,12,85,.90);
  border-left:none;
}
.backdrop{background:rgba(13,5,24,.50);}

/* Settings overlay body + controls */
.settings-body{
  font-family:'Comfortaa',cursive;
}
.setting-label{
  color:#ffbae0;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  letter-spacing:1px;
  text-transform:none;
}
.setting-row input[type="password"],.setting-row input[type="text"]{
  background:rgba(30,18,45,.80);
  color:#fff5ff;
  border:none;
  border-radius:14px;
  font-family:'Comfortaa',cursive;
  font-weight:700;
  box-shadow:inset 0 3px 12px rgba(139,28,94,.10);
}
.setting-row input[type="password"]:focus,.setting-row input[type="text"]:focus{
  box-shadow:0 0 0 3px rgba(255,105,180,.30), inset 0 3px 12px rgba(0,0,0,.20);
}
.setting-row input[type="password"]::placeholder,.setting-row input[type="text"]::placeholder{color:#b39db5;}
.size-display{color:#fff;font-family:'Baloo 2',cursive;font-weight:700;}
.size-btn{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:8px;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  box-shadow:0 2px 0 var(--btn-shadow-3d);
  width:28px;
  height:28px;
  padding:0;
  font-size:0.9em;
}
.size-btn:hover{transform:translateY(-1px);filter:brightness(var(--btn-hover-brightness));text-shadow:none;}
.font-btn{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:8px;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  box-shadow:0 2px 0 var(--btn-shadow-3d);
  padding:0 12px;
  font-size:0.75em;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  line-height:1;
}
.font-btn:hover{transform:translateY(-1px);filter:brightness(var(--btn-hover-brightness));text-shadow:none;}
.font-btn:disabled{opacity:.4;cursor:not-allowed;transform:none;filter:none;}

/* Settings controls: keep paired buttons same height */
.setting-controls{display:flex;align-items:center;gap:8px;}
.setting-controls .font-btn,.setting-controls .btn-small,.setting-controls .btn-secondary{height:28px;padding:0 12px;}
.font-btn.active{
  background:linear-gradient(180deg,#ff69b4,#e83d8e);
  color:#fff;
  box-shadow:0 2px 0 #6e123c;
}
.toggle-switch .toggle-slider{border-radius:14px;background:rgba(30,18,45,.80);box-shadow:inset 0 3px 12px rgba(139,28,94,.10);}
.toggle-switch input:checked + .toggle-slider{background:linear-gradient(180deg,#ff69b4,#e83d8e);box-shadow:0 2px 0 #6e123c;}
.toggle-switch .toggle-slider:before{border-radius:50%;background:#ffbae0;}
.toggle-switch input:checked + .toggle-slider:before{background:#fff;}
#cp-error,#cu-error{color:#ff69b4;font-family:'Comfortaa',cursive;}

/* DM / unread */
.dm-badge{color:#ffd700;animation:pulse 2.8s infinite;}
.unread-count{background:#ffd700;color:#4a3d00;font-weight:700;}


/* Reconnect banner */
.reconnect-banner{
  background:rgba(255,105,180,.95);
  color:#fff;
}

/* Scroll bottom button */
.scroll-bottom-btn{
  background:rgba(55,18,85,.80);
  border:none;
  color:#ffd700;
  border-radius:14px;
}
.scroll-bottom-btn #scroll-bottom-count{background:#ffd700;color:#4a3d00;}

/* Toasts */
.toast{
  background:rgba(55,12,85,.92);
  border:none;
  color:#fff;
  border-radius:14px;
}
.toast.success{color:#a0ffb4;}
.toast.error{color:#ff69b4;}
.toast.info{color:#00c8ff;}
.toast.error .toast-action{background:linear-gradient(180deg,#ff69b4,#e83d8e);color:#fff;}
.toast.success .toast-action{background:linear-gradient(180deg,#69ff8f,#3db86e);color:#0d2b16;}
.toast.info .toast-action{background:linear-gradient(180deg,#00c8ff,#0077b3);color:#fff;}
.toast-action{background:var(--btn-bg);color:var(--btn-text);border-radius:8px;}
.toast-action:hover{filter:brightness(var(--btn-hover-brightness));}

/* Video / YouTube / inline cards keep border colour consistent */
.video-card,.yt-card,.inline-gif{border:none;}
.video-card-play,.yt-card-play-icon{background:rgba(0,0,0,.6);color:#ff69b4;border:none;}

/* Stream admin buttons mirror primary */
#stream-admin button,
#stream-viewer-controls button,
.stream-admin-row button,
#stream-go-live-btn,
#stream-end-btn,
#stream-mute-btn,
#stream-request-mic-btn,
.stream-request-btn,
.stream-approved-chip,
.stream-approved-revoke,
.stream-listen-prompt,
.stream-toast{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:14px;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  box-shadow:0 2px 0 var(--btn-shadow-3d);
  padding:5px 10px;
  font-size:0.74em;
}
#stream-go-live-btn{background:linear-gradient(180deg,#ff69b4,#e83d8e);color:#fff;box-shadow:0 3px 0 #6e123c;}

.stream-request-btn.approve{color:#a0ffb4;}
.stream-request-btn.deny{color:#b39db5;}

.stream-approved-chip.active{background:#ff69b4;color:#fff;}

.stream-pseudomodal{
  background:rgba(26,15,36,.90);
  border:none;
  border-radius:14px;
  box-shadow:0 16px 48px rgba(0,0,0,.35);
}
#stream-admin{border-top:none;background:rgba(0,0,0,.15);}
#stream-viewer-controls{border-top:none;}
.stream-listen-prompt{
  border-radius:14px;
  background:rgba(55,12,85,.92);
  color:#fff;
  box-shadow:0 0 30px rgba(160,32,240,.25);
}
.stream-toast{
  background:rgba(55,12,85,.92);
  color:#fff;
  box-shadow:0 0 24px rgba(0,0,0,.4);
}
#stream-status-bar{background:transparent;color:#e4b8d8;}
.stream-live-dot{background:#ff69b4;box-shadow:0 0 8px #ff69b4;}

/* ── Global panel / form / button theming ────────────────────────
   Anything not restyled above still uses base.css variables (which
   :root overrides), so colours follow the theme. These rules add the
   rounded "stardust" treatment + Baloo/Comfortaa fonts to the panels,
   dashed buttons, and form containers that base.css leaves angular. */

/* Subroom "+ Create Subroom" button (top of rooms) */
.subroom-create-btn{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:14px;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  box-shadow:0 2px 0 var(--btn-shadow-3d);
  letter-spacing:1px;
  transition:.15s;
  padding:7px 13px;
  font-size:0.78em;
}
.subroom-create-btn:hover{transform:translateY(-1px);filter:brightness(var(--btn-hover-brightness));}

/* Create-room / subroom / invites / bans / content panels */
.create-room{
  background:rgba(55,12,85,.55);
  border:none;
  border-radius:14px;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.invites-list,.users-list{border-radius:14px;}
.invites-list{background:rgba(0,0,0,.15);border:none;}

/* Lobby search box */
.lobby-search{
  background:rgba(30,18,45,.80);
  color:#fff5ff;
  border:none;
  border-radius:14px;
  font-family:'Comfortaa',cursive;
  font-weight:700;
  box-shadow:inset 0 3px 12px rgba(139,28,94,.10), 0 5px 14px rgba(255,105,180,.08);
}
.lobby-search:focus{
  box-shadow:0 0 0 3px rgba(255,105,180,.30), inset 0 3px 12px rgba(0,0,0,.20);
}
.lobby-search::placeholder{color:#b39db5;}

/* Section labels (Admin — Create Room, Direct Messages, etc.) */
.section-label{
  color:#ffbae0;
  font-family:'Baloo 2',cursive;
  font-weight:700;
  letter-spacing:1.5px;
  border-bottom:none;
}

/* Content-edit labels + textareas already inherit global input/textarea
   rules; add the label colour to match. */
.content-edit-row label{color:#ff69b4;}

/* Modal body inputs already covered by the global input/textarea rules.
   Modal buttons (.btn-small) are covered above. Ensure modal-box-wide
   gets the rounded treatment too. */
.modal-box-wide{border-radius:14px;}
.modal-body{font-family:'Comfortaa',cursive;}

/* Passphrase / confirm / announcement modal inputs inherit global rules. */

/* Create-subroom form inputs inherit global input rules. */

/* Room controls (admin ▲▼✎✕) — keep compact but round corners + theme. */
.room-arrow-btn,.room-delete-btn{
  background:var(--btn-bg);
  color:var(--btn-text);
  border:none;
  border-radius:8px;
  font-family:'Baloo 2',cursive;
  box-shadow:0 2px 0 var(--btn-shadow-3d);
  width:28px;
  height:28px;
  padding:0;
  font-size:0.78em;
}
.room-arrow-btn:hover:not(:disabled),.room-delete-btn:hover{
  transform:translateY(-1px);
  filter:brightness(var(--btn-hover-brightness));
  color:var(--btn-text);
  text-shadow:none;
}
.room-arrow-btn:disabled{opacity:.3;}

/* Lobby header breathing room */
.top-bar{
  padding:calc(14px + var(--sat, env(safe-area-inset-top))) 18px 14px 18px;
  gap:14px;
  flex-shrink:0;
  align-items:flex-end;
}
.top-bar .header-right{
  display:flex;
  align-items:center;
  gap:10px;
  padding-bottom:2px;
}
#user-display{
  margin-right:8px;
  padding:6px 12px;
}
#master-badge,#admin-badge,#guest-badge,#dm-badge{
  margin:0 3px;
}

/* Lobby title */
#lobby-title{
  font-family:'Baloo 2',cursive;
  font-weight:800;
  letter-spacing:1px;
  display:flex;
  align-items:center;
  gap:8px;
}
.lobby-logo{
  height:1.4em;
  width:auto;
  vertical-align:middle;
  display:block;
}

/* Auth-screen floating logo + header */
.auth-float-logo{
  position:relative;
  z-index:2;
  display:flex;
  justify-content:center;
  margin-bottom:12px;
  filter:drop-shadow(0 14px 24px rgba(0,0,0,.45));
}
.auth-float-logo .auth-logo{
  display:block;
  width:100%;
  max-width:170px;
  height:auto;
  border-radius:8px;
}
.auth-header{
  border-radius:14px 14px 0 0;
}
.auth-header .rebelleon-title{
  font-family:'Baloo 2','Comfortaa',cursive;
  font-size:2.2em;
  letter-spacing:1px;
  text-shadow:0 2px 4px rgba(0,0,0,.25);
}
.auth-header .auth-line{
  font-size:0.75em;
  opacity:.9;
  margin-top:2px;
}

/* Scratch-off banner for hidden tagline */
/* Scratch-off banner for hidden tagline */
.scratch-banner{
  position:relative;
  display:block;
  width:100%;
  max-width:320px;
  margin:10px auto 4px;
  padding:12px 18px;
  border-radius:12px;
  cursor:pointer;
  user-select:none;
  -webkit-user-select:none;
  overflow:hidden;
  background:#1a0f24;
  box-shadow:inset 0 0 14px rgba(0,0,0,.55), 0 0 0 2px rgba(255,105,180,.4), 0 4px 12px rgba(0,0,0,.35);
  min-height:46px;
}
.scratch-hidden{
  font-family:'Baloo 2',cursive;
  font-size:1em;
  font-weight:700;
  color:#fff5ff;
  letter-spacing:1px;
  text-shadow:0 1px 3px rgba(0,0,0,.35);
  position:relative;
  z-index:1;
  opacity:.35;
  filter:blur(1px);
  transition:opacity .25s, filter .25s;
  text-align:center;
  line-height:1.3;
}
.scratch-overlay{
  position:absolute;
  inset:0;
  z-index:2;
  display:flex;
  align-items:center;
  justify-content:center;
  font-family:'Baloo 2',cursive;
  font-size:1em;
  font-weight:800;
  color:#1a0f24;
  letter-spacing:1px;
  border-radius:12px;
  background:repeating-linear-gradient(
    45deg,
    #ff69b4 0px,
    #ff69b4 10px,
    #ff1493 10px,
    #ff1493 20px
  );
  transition:opacity .25s, transform .25s;
}
.scratch-hint{
  background:rgba(255,255,255,.55);
  padding:4px 12px;
  border-radius:8px;
  box-shadow:0 1px 4px rgba(0,0,0,.25);
}
.scratch-banner.revealed .scratch-overlay{
  opacity:0;
  transform:scale(1.15);
  pointer-events:none;
}
.scratch-banner.revealed .scratch-hidden{
  opacity:1;
  filter:blur(0);
}

/* Topic bar */
.topic-bar{
  color:#e4b8d8;
  font-family:'Comfortaa',cursive;
}

/* DM meta bar + call bar */
.dm-meta-bar{
  background:rgba(55,12,85,.55);
  color:#e4b8d8;
  font-family:'Comfortaa',cursive;
  border-bottom:none;
}
.dm-call-bar{
  background:rgba(55,12,85,.65);
  color:#fff;
  font-family:'Baloo 2',cursive;
  border-bottom:none;
}
.dm-call-start-btn{font-family:'Baloo 2',cursive;}

/* Topic / subroom area dividers */
.topic-bar{border-bottom:none;}
#subroom-area{border-bottom:none;}

/* Invite / ban / user rows inside admin panels */
.invite-row,.ban-row,.user-row{border:none;}

/* Content-edit row separator */
.content-edit-row{border-bottom:none;}



/* Typing indicator */
.typing-indicator{font-family:'Comfortaa',cursive;}

/* Reduced motion: stop keyframe animations but keep layout */
@media (prefers-reduced-motion: reduce){
  .top-bar,.auth-header,.users-header,.modal-header,.settings-header,
  .btn-primary,.conn-dot.connected,.dm-badge,.room-item::before{animation:none !important;}
}

/* Mobile */
@media (max-width:560px){
  .top-bar{
    min-height:calc(56px + var(--sat, env(safe-area-inset-top)));
    padding:calc(10px + var(--sat, env(safe-area-inset-top))) 14px 10px 14px;
    align-items:flex-end;
  }
  .top-bar h1{
    padding-bottom:2px;
  }
  .top-bar .header-right{
    padding-bottom:2px;
  }
  .btn-primary,.btn-small,.btn-secondary,.btn-icon,.tab,.toggle-btn{padding:6px 10px;font-size:0.72em;}
  .top-bar .btn-small,.top-bar .btn-icon,.top-bar .btn-secondary{height:28px;min-width:28px;}
  #app,#app-inner{
    height:100vh;
    height:100dvh;
    height:100svh;
  }
}