/* Muted user icon in member list */
.user-muted-icon {
  margin-left: 0.4em;
  color: #b00;
  font-size: 1.1em;
  vertical-align: middle;
}
/* ===================== INBOX / NOTIFICATIONS ===================== */
#inbox-modal.modal-overlay {
  position: fixed;
  z-index: 10000;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.32);
  display: flex; align-items: center; justify-content: center;
}
#inbox-modal .modal-card {
  background: var(--warm-white);
  color: var(--text-dark);
  border-radius: 14px;
  padding: 1.5rem 2.2rem 1.2rem 2.2rem;
  box-shadow: 0 4px 32px rgba(0,0,0,0.18);
  min-width: 320px;
  max-width: 90vw;
  min-height: 180px;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
}
#inbox-list {
  margin-top: 1rem;
}
.inbox-item {
  padding: 0.7em 0.5em;
  border-bottom: 1px solid var(--tan);
  cursor: pointer;
  font-size: 1.04em;
  transition: background 0.13s;
}
.inbox-item:hover {
  background: var(--tan);
}
.inbox-empty {
  color: var(--brown-light);
  text-align: center;
  padding: 1.5em 0 1em 0;
  font-size: 1.1em;
}
.inbox-time {
  float: right;
  color: var(--brown-light);
  font-size: 0.93em;
  margin-left: 1.2em;
}
#inbox-btn .unread-badge,
#friends-dms-btn .unread-badge {
  position: absolute;
  top: 2px;
  right: 2px;
  background: var(--red-soft);
  color: #fff;
  border-radius: 10px;
  font-size: 0.7em;
  padding: 0 5px;
  min-width: 18px;
  min-height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.13);
  pointer-events: none;
}
/* Forgot Password Modal - use modal-overlay styling */
#forgot-password-modal .modal-card {
  min-width: 350px;
}
/* Context menu for server/room actions */
.context-menu {
  position: fixed;
  z-index: 10000;
  background: var(--warm-white);
  border: 1.5px solid var(--tan-dark);
  border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(61,43,31,0.18), 0 2px 8px rgba(61,43,31,0.1);
  min-width: 160px;
  padding: 0.4rem 0;
  display: none;
  animation: fadeUp .13s cubic-bezier(.34,1.4,.64,1);
  overflow: hidden;
}
.context-menu-item {
  width: 100%;
  background: none;
  border: none;
  color: var(--brown-dark);
  font-size: .92rem;
  font-weight: 600;
  font-family: 'Nunito', sans-serif;
  padding: 0.55rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: background .12s, color .12s;
  border-radius: 0;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.context-menu-item:hover {
  background: var(--tan);
  color: var(--brown-dark);
}
.context-menu-item.delete {
  color: var(--red-soft);
}
.context-menu-item.delete:hover {
  background: #ffeaea;
  color: #c0392b;
}
.context-menu-divider {
  height: 1px;
  background: var(--tan-dark);
  margin: 0.3rem 0.6rem;
  opacity: 0.6;
}
/* ---- Context submenu (roles flyout) ---- */
.context-submenu {
  position: fixed;
  z-index: 10001;
  background: var(--warm-white);
  border: 1.5px solid var(--tan-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  max-width: 240px;
  padding: 0.4rem 0;
  animation: fadeUp .13s cubic-bezier(.34,1.4,.64,1);
  overflow: hidden;
}
.ctx-has-submenu {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.ctx-submenu-arrow { font-size: .7rem; opacity: .55; flex-shrink: 0; }
.ctx-role-check { font-size: .85rem; color: var(--green-dark); font-weight: 900; flex-shrink: 0; }
.ctx-submenu-empty {
  font-size: .82rem;
  color: var(--brown-light);
  padding: .5rem 1rem;
  margin: 0;
}

/* ============================================================
   Acorn — Animal Crossing inspired styles
   ============================================================ */

:root {
  --green-dark:   #6B9E70;
  --green-mid:    #84B488;
  --green-light:  #AECEB0;
  --green-pale:   #E2F0E4;
  --cream:        #FEFAF3;
  --warm-white:   #FFFEF8;
  --tan:          #F2E8D0;
  --tan-dark:     #E4D4B4;
  --brown-dark:   #5A3820;
  --brown-mid:    #8C6040;
  --brown-light:  #BC9070;
  --yellow:       #F8D868;
  --blue-soft:    #C0DCEC;
  --pink-soft:    #F8CCDA;
  --red-soft:     #F0847A;
  --text-dark:    #3A2414;
  --text-mid:     #6A4028;
  --text-light:   #FFFEF8;
  --shadow-sm:    0 1px 4px rgba(58,36,20,.07), 0 2px 8px rgba(58,36,20,.05);
  --shadow-md:    0 3px 14px rgba(58,36,20,.10), 0 6px 24px rgba(58,36,20,.07);
  --shadow-lg:    0 8px 30px rgba(58,36,20,.14), 0 16px 48px rgba(58,36,20,.09);
  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-lg:    20px;
}

/* ---- Night Owl (forest dark) ---- */
body.dark {
  --green-dark:   #78B884;
  --green-mid:    #5EA070;
  --green-light:  #9ACBA4;
  --green-pale:   rgba(120,184,132,.11);
  --cream:        #1C1914;
  --warm-white:   #252018;
  --tan:          #302820;
  --tan-dark:     #3C3028;
  --brown-dark:   #EDE0CE;
  --brown-mid:    #B89C80;
  --brown-light:  #7A6454;
  --yellow:       #D8A840;
  --blue-soft:    #94BCCC;
  --pink-soft:    #C89898;
  --red-soft:     #CC7878;
  --text-dark:    #EDE0CE;
  --text-mid:     #B89C80;
  --text-light:   #F5EAD8;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.38), 0 2px 8px rgba(0,0,0,.22);
  --shadow-md:    0 4px 16px rgba(0,0,0,.48), 0 8px 28px rgba(0,0,0,.32);
  --shadow-lg:    0 8px 30px rgba(0,0,0,.60), 0 16px 48px rgba(0,0,0,.42);
}

/* ---- Cherry Blossom (light pink) ---- */
body.theme-blossom {
  --green-dark:   #C06080;
  --green-mid:    #D07A94;
  --green-light:  #EAAEBC;
  --green-pale:   #FCEDF4;
  --cream:        #FFF6F9;
  --warm-white:   #FFFBFD;
  --tan:          #F8E0EA;
  --tan-dark:     #F0C4D6;
  --brown-dark:   #6A1E38;
  --brown-mid:    #A04868;
  --brown-light:  #C88CA8;
  --yellow:       #F8B84C;
  --blue-soft:    #E8C8E0;
  --pink-soft:    #FFC8D8;
  --red-soft:     #EC7888;
  --text-dark:    #4A1428;
  --text-mid:     #7A3050;
  --text-light:   #FFF6F9;
  --shadow-sm:    0 1px 4px rgba(100,30,60,.07), 0 2px 8px rgba(100,30,60,.05);
  --shadow-md:    0 3px 14px rgba(100,30,60,.10), 0 6px 24px rgba(100,30,60,.07);
  --shadow-lg:    0 8px 30px rgba(100,30,60,.13), 0 16px 48px rgba(100,30,60,.09);
}

/* ---- Ocean Breeze (teal/blue) ---- */
body.theme-ocean {
  --green-dark:   #5AB4C8;
  --green-mid:    #72C4D4;
  --green-light:  #98D4E4;
  --green-pale:   #DDF6FC;
  --cream:        #F4FCFE;
  --warm-white:   #FAFEFF;
  --tan:          #CCF0F8;
  --tan-dark:     #AADDED;
  --brown-dark:   #184858;
  --brown-mid:    #2C6C80;
  --brown-light:  #5698B0;
  --yellow:       #FFD47C;
  --blue-soft:    #A4DCEE;
  --pink-soft:    #D8C4E8;
  --red-soft:     #EC8080;
  --text-dark:    #0C2C3C;
  --text-mid:     #1C4C60;
  --text-light:   #F0FAFF;
  --shadow-sm:    0 1px 4px rgba(20,60,80,.07), 0 2px 8px rgba(20,60,80,.05);
  --shadow-md:    0 3px 14px rgba(20,60,80,.10), 0 6px 24px rgba(20,60,80,.07);
  --shadow-lg:    0 8px 30px rgba(20,60,80,.14), 0 16px 48px rgba(20,60,80,.09);
}

/* ---- Autumn Harvest (warm amber) ---- */
body.theme-autumn {
  --green-dark:   #C87848;
  --green-mid:    #D99060;
  --green-light:  #E8AE80;
  --green-pale:   #FDEEE0;
  --cream:        #FFF8F2;
  --warm-white:   #FFFCF7;
  --tan:          #F7E4D0;
  --tan-dark:     #EDD0B0;
  --brown-dark:   #4C2008;
  --brown-mid:    #884020;
  --brown-light:  #B87048;
  --yellow:       #F7C44A;
  --blue-soft:    #D0D8E8;
  --pink-soft:    #F0C8C0;
  --red-soft:     #E07858;
  --text-dark:    #321508;
  --text-mid:     #5C2C10;
  --text-light:   #FFF8F2;
  --shadow-sm:    0 1px 4px rgba(76,32,8,.07), 0 2px 8px rgba(76,32,8,.05);
  --shadow-md:    0 3px 14px rgba(76,32,8,.10), 0 6px 24px rgba(76,32,8,.07);
  --shadow-lg:    0 8px 30px rgba(76,32,8,.14), 0 16px 48px rgba(76,32,8,.09);
}

/* ---- Dark Blossom (dark pink) ---- */
body.dark.theme-blossom {
  --green-dark:   #D4909C;
  --green-mid:    #B87090;
  --green-light:  #E0A8B8;
  --green-pale:   rgba(212,144,156,.10);
  --cream:        #1A1018;
  --warm-white:   #241620;
  --tan:          #32202C;
  --tan-dark:     #40303A;
  --brown-dark:   #F0D4E8;
  --brown-mid:    #C490B8;
  --brown-light:  #8C6080;
  --yellow:       #F0B840;
  --blue-soft:    #D8B8D0;
  --pink-soft:    #F0A8C0;
  --red-soft:     #D07890;
  --text-dark:    #F0D0E8;
  --text-mid:     #C898B8;
  --text-light:   #FFF5FC;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.28);
  --shadow-md:    0 4px 16px rgba(0,0,0,.52), 0 8px 28px rgba(0,0,0,.38);
  --shadow-lg:    0 8px 30px rgba(0,0,0,.65), 0 16px 48px rgba(0,0,0,.45);
}

/* ---- Dark Ocean (dark teal/blue) ---- */
body.dark.theme-ocean {
  --green-dark:   #5AB0C8;
  --green-mid:    #3E8CA8;
  --green-light:  #7ABDD0;
  --green-pale:   rgba(90,176,200,.10);
  --cream:        #0C1820;
  --warm-white:   #121E28;
  --tan:          #1C2C3C;
  --tan-dark:     #263850;
  --brown-dark:   #C8E0EE;
  --brown-mid:    #90B8D0;
  --brown-light:  #608898;
  --yellow:       #F0C84C;
  --blue-soft:    #5CA0C0;
  --pink-soft:    #B8A8C8;
  --red-soft:     #CC7878;
  --text-dark:    #CCE4F4;
  --text-mid:     #90C0DC;
  --text-light:   #F0FAFF;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.40), 0 2px 8px rgba(0,0,0,.25);
  --shadow-md:    0 4px 16px rgba(0,0,0,.52), 0 8px 28px rgba(0,0,0,.35);
  --shadow-lg:    0 8px 30px rgba(0,0,0,.65), 0 16px 48px rgba(0,0,0,.45);
}

/* ---- Dark Autumn (dark warm amber) ---- */
body.dark.theme-autumn {
  --green-dark:   #D4924E;
  --green-mid:    #B87030;
  --green-light:  #E0A868;
  --green-pale:   rgba(212,146,78,.10);
  --cream:        #180E06;
  --warm-white:   #221408;
  --tan:          #341E0E;
  --tan-dark:     #4A2C14;
  --brown-dark:   #F0D8A8;
  --brown-mid:    #C0A060;
  --brown-light:  #90703C;
  --yellow:       #F0B820;
  --blue-soft:    #B0A890;
  --pink-soft:    #D0A890;
  --red-soft:     #CC7050;
  --text-dark:    #F0D8A8;
  --text-mid:     #C8A060;
  --text-light:   #FFF8F0;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.28);
  --shadow-md:    0 4px 16px rgba(0,0,0,.52), 0 8px 28px rgba(0,0,0,.38);
  --shadow-lg:    0 8px 30px rgba(0,0,0,.65), 0 16px 48px rgba(0,0,0,.48);
}

/* ---- Teddy Bear (warm caramel & cream) ---- */
body.theme-teddy {
  --green-dark:   #B07A3C;
  --green-mid:    #C88E50;
  --green-light:  #DCAA70;
  --green-pale:   #FEF4E4;
  --cream:        #FFF9F2;
  --warm-white:   #FFFDF7;
  --tan:          #F5E8D5;
  --tan-dark:     #EAD8B8;
  --brown-dark:   #5A2C0A;
  --brown-mid:    #8A481A;
  --brown-light:  #B07840;
  --yellow:       #EAB030;
  --blue-soft:    #CCDDE8;
  --pink-soft:    #F0CAAC;
  --red-soft:     #CC6048;
  --text-dark:    #3A1804;
  --text-mid:     #682E0E;
  --text-light:   #FFF9F2;
  --shadow-sm:    0 1px 4px rgba(80,40,10,.07), 0 2px 8px rgba(80,40,10,.05);
  --shadow-md:    0 3px 14px rgba(80,40,10,.10), 0 6px 24px rgba(80,40,10,.07);
  --shadow-lg:    0 8px 30px rgba(80,40,10,.14), 0 16px 48px rgba(80,40,10,.09);
}

/* ---- Dark Teddy (warm chocolate night) ---- */
body.dark.theme-teddy {
  --green-dark:   #D4904E;
  --green-mid:    #B87030;
  --green-light:  #E8B070;
  --green-pale:   rgba(212,144,78,.10);
  --cream:        #180E06;
  --warm-white:   #221408;
  --tan:          #301C10;
  --tan-dark:     #402818;
  --brown-dark:   #F0DEC8;
  --brown-mid:    #B09070;
  --brown-light:  #706050;
  --yellow:       #EAA828;
  --blue-soft:    #90A8C0;
  --pink-soft:    #D09888;
  --red-soft:     #CC6848;
  --text-dark:    #F0DEC8;
  --text-mid:     #B09070;
  --text-light:   #FFF4E8;
  --shadow-sm:    0 1px 4px rgba(0,0,0,.42), 0 2px 8px rgba(0,0,0,.28);
  --shadow-md:    0 4px 16px rgba(0,0,0,.55), 0 8px 28px rgba(0,0,0,.38);
  --shadow-lg:    0 8px 30px rgba(0,0,0,.72), 0 16px 48px rgba(0,0,0,.50);
}


/* ---- Dark variants for non-dark themes (keep login blobs matching) ---- */
body.theme-blossom #login-screen { background: linear-gradient(135deg, #F5C0D0 0%, #FADADF 40%, #FFF5F8 100%); }
body.theme-ocean   #login-screen { background: linear-gradient(135deg, #8DCCE0 0%, #C0E8F5 40%, #F0FAFC 100%); }
body.theme-autumn  #login-screen { background: linear-gradient(135deg, #E8B070 0%, #F5D0A8 40%, #FFF8F0 100%); }
body.theme-teddy   #login-screen { background: linear-gradient(135deg, #E8C090 0%, #F5E0C0 40%, #FFF9F2 100%); }

/* Dark theme login screens */
body.dark.theme-blossom #login-screen { background: linear-gradient(135deg, #2E1428 0%, #241020 40%, #1A1018 100%); }
body.dark.theme-ocean   #login-screen { background: linear-gradient(135deg, #0C2840 0%, #0A1C30 40%, #0C1820 100%); }
body.dark.theme-autumn  #login-screen { background: linear-gradient(135deg, #301808 0%, #281208 40%, #180E06 100%); }
body.dark.theme-teddy   #login-screen { background: linear-gradient(135deg, #321A06 0%, #281408 40%, #180E06 100%); }

/* Light theme login blob colors */
body.theme-blossom .login-bg-1 { background: radial-gradient(circle, #F0BED0 0%, transparent 70%); }
body.theme-blossom .login-bg-2 { background: radial-gradient(circle, #FAD4E6 0%, transparent 70%); }
body.theme-blossom .login-bg-3 { background: radial-gradient(circle, #FDDDED 0%, transparent 70%); }

body.theme-ocean   .login-bg-1 { background: radial-gradient(circle, #90D4E8 0%, transparent 70%); }
body.theme-ocean   .login-bg-2 { background: radial-gradient(circle, #AADFF0 0%, transparent 70%); }
body.theme-ocean   .login-bg-3 { background: radial-gradient(circle, #C0EEF8 0%, transparent 70%); }

body.theme-autumn  .login-bg-1 { background: radial-gradient(circle, #E8A878 0%, transparent 70%); }
body.theme-autumn  .login-bg-2 { background: radial-gradient(circle, #F0C090 0%, transparent 70%); }
body.theme-autumn  .login-bg-3 { background: radial-gradient(circle, #FAD8A8 0%, transparent 70%); }

/* Dark theme login blob colors */
body.dark.theme-blossom .login-bg-1 { background: radial-gradient(circle, #5A2848 0%, transparent 70%); }
body.dark.theme-blossom .login-bg-2 { background: radial-gradient(circle, #703860 0%, transparent 70%); }
body.dark.theme-blossom .login-bg-3 { background: radial-gradient(circle, #8A4C78 0%, transparent 70%); }

body.dark.theme-ocean .login-bg-1 { background: radial-gradient(circle, #1C4C64 0%, transparent 70%); }
body.dark.theme-ocean .login-bg-2 { background: radial-gradient(circle, #285E78 0%, transparent 70%); }
body.dark.theme-ocean .login-bg-3 { background: radial-gradient(circle, #387090 0%, transparent 70%); }

body.dark.theme-autumn .login-bg-1 { background: radial-gradient(circle, #603010 0%, transparent 70%); }
body.dark.theme-autumn .login-bg-2 { background: radial-gradient(circle, #784018 0%, transparent 70%); }
body.dark.theme-autumn .login-bg-3 { background: radial-gradient(circle, #905828 0%, transparent 70%); }

body.theme-teddy .login-bg-1 { background: radial-gradient(circle, #E8B868 0%, transparent 70%); }
body.theme-teddy .login-bg-2 { background: radial-gradient(circle, #F0CC88 0%, transparent 70%); }
body.theme-teddy .login-bg-3 { background: radial-gradient(circle, #F8DAAA 0%, transparent 70%); }
body.dark.theme-teddy .login-bg-1 { background: radial-gradient(circle, #6A3010 0%, transparent 70%); }
body.dark.theme-teddy .login-bg-2 { background: radial-gradient(circle, #7E4018 0%, transparent 70%); }
body.dark.theme-teddy .login-bg-3 { background: radial-gradient(circle, #985028 0%, transparent 70%); }

body.sweet-dock-popout-mode {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  padding: 18px;
  background:
    radial-gradient(circle at top left, color-mix(in srgb, var(--accent-alt, #d8ecd8) 24%, transparent 76%), transparent 38%),
    radial-gradient(circle at bottom right, color-mix(in srgb, var(--accent, #7dbf7d) 14%, transparent 86%), transparent 44%),
    linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar, var(--warm-white)) 90%, white 10%) 0%, color-mix(in srgb, var(--accent-alt, #d8ecd8) 9%, var(--bg-sidebar, var(--warm-white)) 91%) 100%);
  min-height: 100vh;
  overflow: auto;
}
body.sweet-dock-popout-mode #sweet-dock {
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 auto !important;
  width: min(300px, calc(100vw - 36px)) !important;
  max-width: min(300px, calc(100vw - 36px)) !important;
}
body.sweet-dock-popout-mode #sweet-dock .sweet-dock-body {
  max-height: calc(100vh - 64px);
}
body.sweet-dock-popout-mode #sweet-dock .dock-content-area {
  max-height: min(620px, calc(100vh - 215px));
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
}

body {
  width: 100%;
  height: 100%;
  height: 100dvh;
  overflow: hidden;
  /* iPhone safe area support */
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  box-sizing: border-box;
}

/* ── Electron custom title bar ─────────────────────────────── */
#electron-titlebar {
  display: none; /* hidden in browser; shown via body.is-electron */
  height: 32px;
  min-height: 32px;
  background: var(--green-dark);
  filter: brightness(.82);
  color: #fff;
  align-items: center;
  user-select: none;
  position: relative;
  z-index: 10000;
  flex-shrink: 0;
}
body.is-electron #electron-titlebar { display: flex; }
body.is-electron {
  display: flex;
  flex-direction: column;
}
body.is-electron #login-screen,
body.is-electron #app {
  flex: 1;
  min-height: 0;
  height: auto;
}

.titlebar-drag {
  -webkit-app-region: drag;
  flex: 0 0 12px;
  height: 100%;
}
.titlebar-drag-mid {
  flex: 1;
}

.titlebar-title {
  position: absolute;
.titlebar-update-btn {
  -webkit-app-region: no-drag;
  border: 1px solid rgba(255,255,255,.16);
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  color: #fff;
  border-radius: 999px;
  padding: .28rem .75rem;
  margin-right: .45rem;
  align-self: center;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0,0,0,.22);
}
.titlebar-update-btn:hover {
  background: linear-gradient(135deg, var(--green-mid), var(--green-glow));
}
.titlebar-update-btn.loading {
  background: linear-gradient(135deg, var(--yellow), #d6aa2a);
  color: #2b2110;
}
.titlebar-update-btn.ready {
  background: linear-gradient(135deg, #2f6f87, #5ab0cc);
}
.titlebar-update-btn:disabled {
  opacity: .92;
  cursor: wait;
}
  left: 50%;
  transform: translateX(-50%);
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: .04em;
  -webkit-app-region: drag;
  white-space: nowrap;
  pointer-events: none;
}
.titlebar-controls {
  display: flex;
  -webkit-app-region: no-drag;
}
.titlebar-ctrl-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.75);
  font-size: .85rem;
  width: 46px; height: 32px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.titlebar-ctrl-btn:hover { background: rgba(255,255,255,.15); color: #fff; }
.titlebar-close-btn:hover { background: #e81123 !important; color: #fff !important; }

body {
  font-family: 'Nunito', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  width: 100%;
  height: 100%;
  overflow: hidden;
  transition: background .3s, color .3s;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============================================================
   LOGIN
   ============================================================ */

#login-screen {
  min-height: 100%;
  background: linear-gradient(135deg, #9ED4A0 0%, #C8E6C9 40%, #FEF9F0 100%);
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
  animation: loginScreenFadeIn .9s ease both;
}
body.dark #login-screen {
  background: linear-gradient(135deg, #1C3020 0%, #1A2820 40%, #1A1510 100%);
}
@keyframes loginScreenFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ---- Animated blurred background blobs ---- */
.login-bg-layer {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  border-radius: 50%;
  filter: blur(70px);
  opacity: .55;
}
.login-bg-1 {
  width: 60vw; height: 60vw;
  background: radial-gradient(circle, #B8E6BC 0%, transparent 70%);
  top: -15%; left: -10%;
  animation: blobDrift1 12s ease-in-out infinite alternate;
}
.login-bg-2 {
  width: 50vw; height: 50vw;
  background: radial-gradient(circle, #FFD6E8 0%, transparent 70%);
  bottom: -10%; right: -8%;
  animation: blobDrift2 15s ease-in-out infinite alternate;
}
.login-bg-3 {
  width: 40vw; height: 40vw;
  background: radial-gradient(circle, #FFFACD 0%, transparent 70%);
  top: 30%; left: 35%;
  animation: blobDrift3 10s ease-in-out infinite alternate;
}
body.dark .login-bg-1 { background: radial-gradient(circle, #1E4028 0%, transparent 70%); }
body.dark .login-bg-2 { background: radial-gradient(circle, #2D1828 0%, transparent 70%); }
body.dark .login-bg-3 { background: radial-gradient(circle, #1E1E10 0%, transparent 70%); }

@keyframes blobDrift1 {
  from { transform: translate(0, 0)   scale(1); }
  to   { transform: translate(6%, 8%) scale(1.1); }
}
@keyframes blobDrift2 {
  from { transform: translate(0, 0)    scale(1); }
  to   { transform: translate(-5%, -7%) scale(1.08); }
}
@keyframes blobDrift3 {
  from { transform: translate(0, 0)  scale(1); }
  to   { transform: translate(4%, -5%) scale(1.15); }
}

/* ---- Floating background emojis ---- */
.login-float-emojis {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
  overflow: hidden;
}
.lf-emoji {
  position: absolute;
  bottom: -3rem;
  left: var(--x);
  font-size: var(--size);
  opacity: 0;
  animation: floatUp var(--dur) ease-in var(--delay) infinite;
  user-select: none;
  filter: blur(.5px);
}
@keyframes floatUp {
  0%   { transform: translateY(0)    rotate(0deg);   opacity: 0; }
  8%   { opacity: .55; }
  90%  { opacity: .3; }
  100% { transform: translateY(-105vh) rotate(25deg); opacity: 0; }
}


.login-card {
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 2.5rem 2.8rem;
  width: 100%; max-width: 380px;
  text-align: center;
  border: 3px solid var(--tan-dark);
  position: relative; z-index: 1;
}
.login-logo    { font-size: 3.5rem; margin-bottom: .4rem; }
.login-title   { font-size: 2rem; font-weight: 800; color: var(--brown-dark); letter-spacing: 1px; }
.login-subtitle { color: var(--brown-mid); font-size: .95rem; margin-bottom: 1.6rem; }

.tab-row { display: flex; gap: .5rem; margin-bottom: 1.4rem; }
.tab-btn {
  flex: 1; padding: .55rem;
  border: 2px solid var(--tan-dark); border-radius: var(--radius-sm);
  background: transparent; color: var(--brown-mid);
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: all .2s;
}
.tab-btn.active          { background: var(--green-mid); border-color: var(--green-mid); color: var(--text-light); }
.tab-btn:not(.active):hover { background: var(--tan); }

.input-field {
  width: 100%; padding: .75rem 1rem;
  border: 1.5px solid var(--tan-dark); border-radius: 10px;
  background: var(--cream); color: var(--text-dark);
  font-family: 'Nunito', sans-serif; font-size: .95rem;
  margin-bottom: .8rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}
.input-field:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(107,171,110,.2), 0 1px 4px rgba(0,0,0,.05);
}
body.dark .input-field {
  background: var(--tan);
  border-color: var(--tan-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
body.dark .input-field:focus {
  border-color: var(--green-dark);
  box-shadow: 0 0 0 3px rgba(74,222,128,.15);
}

.btn-primary {
  width: 100%; padding: .78rem;
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  color: white;
  border: none; border-radius: 10px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: 1rem;
  cursor: pointer;
  transition: filter .15s, transform .12s, box-shadow .15s;
  margin-top: .3rem;
  box-shadow: 0 2px 12px rgba(90,154,94,.35);
}
.btn-primary:hover  { filter: brightness(1.1); box-shadow: 0 4px 20px rgba(90,154,94,.5); transform: translateY(-1px); }
.btn-primary:active { transform: scale(.98) translateY(0); box-shadow: none; filter: none; }
body.dark .btn-primary {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  box-shadow: 0 2px 16px rgba(34,197,94,.3);
}
body.dark .btn-primary:hover { box-shadow: 0 4px 24px rgba(74,222,128,.4); }

.error-msg { color: #c0392b; font-size: .88rem; margin-top: .8rem; min-height: 1.2em; }

.avatar-label { font-weight: 700; color: var(--brown-mid); font-size: .9rem; margin-bottom: .5rem; text-align: left; }
.avatar-grid  { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.avatar-opt {
  font-size: 1.5rem; width: 2.4rem; height: 2.4rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.avatar-opt:hover  { background: var(--tan); }
.avatar-opt.chosen { border-color: var(--green-dark); background: var(--green-pale); }

.deco { position: absolute; font-size: 2.5rem; opacity: .55; user-select: none; pointer-events: none; }
.deco-tl { top: 2rem;    left: 2.5rem;  }
.deco-tr { top: 2rem;    right: 2.5rem; }
.deco-bl { bottom: 2rem; left: 2.5rem;  }
.deco-br { bottom: 2rem; right: 2.5rem; }

/* ============================================================
   APP LAYOUT
   ============================================================ */

#app { display: flex; width: 100%; height: 100%; }

/* ---- Server Rail ---- */
#server-rail {
  width: 68px; flex-shrink: 0;
  background: var(--green-dark);
  filter: brightness(.7);
  display: flex; flex-direction: column; align-items: center;
  padding: .5rem 0;
  gap: .3rem;
  overflow-y: auto; overflow-x: hidden;
  box-shadow: 2px 0 12px rgba(0,0,0,.2);
  position: relative; z-index: 5;
}
/* Rail notification stack — DMs + friend requests above the 👥 button */
#rail-notif-stack {
  display: flex; flex-direction: column; align-items: center; gap: .25rem;
  width: 100%; padding-top: .3rem;
}
.rail-notif-btn {
  position: relative;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--tan);
  border: none; cursor: pointer;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-radius .2s, background .15s;
  flex-shrink: 0;
  overflow: hidden;
  color: var(--brown-dark);
}
.rail-notif-btn:hover { border-radius: var(--radius-sm); background: var(--yellow); }
.rail-notif-btn .unread-badge {
  position: absolute; bottom: 0; right: 0;
  font-size: .6rem; min-width: 16px; height: 16px;
  padding: 0 3px;
}
.rail-notif-btn img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }

#server-list-rail { display: flex; flex-direction: column; align-items: center; gap: .3rem; flex: 1; width: 100%; }
.server-rail-actions { display: flex; flex-direction: column; align-items: center; gap: .3rem; padding-bottom: .3rem; }

.server-icon-btn {
  position: relative;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: rgba(255,255,255,.12);
  border: none; cursor: pointer;
  font-size: 1.4rem; line-height: 1; text-align: center;
  display: flex; align-items: center; justify-content: center;
  transition: border-radius .22s cubic-bezier(.34,1.4,.64,1), background .15s, box-shadow .15s;
  flex-shrink: 0;
  color: rgba(255,255,255,.85);
  box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.server-icon-btn:hover    { border-radius: 14px; background: var(--yellow); color: var(--brown-dark); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.server-icon-btn.active   { border-radius: 14px; background: var(--yellow); color: var(--brown-dark); box-shadow: 0 4px 16px rgba(0,0,0,.3); }
.server-icon-img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; display: block; }
.app-logo .server-icon-img { width: 1.8rem; height: 1.8rem; border-radius: 50%; vertical-align: middle; }
/* Active indicator pill on left edge */
.server-icon-btn.active::before {
  content: '';
  position: absolute; left: -10px;
  width: 4px; height: 60%; border-radius: 2px;
  background: white;
}
.server-icon-btn:hover::before {
  content: '';
  position: absolute; left: -10px;
  width: 4px; height: 40%; border-radius: 2px;
  background: rgba(255,255,255,.7);
}

.server-rail-btn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none; cursor: pointer;
  font-size: 1.2rem;
  display: flex; align-items: center; justify-content: center;
  transition: border-radius .2s, background .15s;
  color: var(--text-light);
}
.server-rail-btn:hover { border-radius: var(--radius-sm); background: var(--green-mid); }

.btn-secondary {
  width: 100%; padding: .65rem;
  background: var(--tan); color: var(--brown-dark);
  border: 2px solid var(--tan-dark); border-radius: var(--radius-md);
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: background .2s; margin-top: .3rem;
}
.btn-secondary:hover { background: var(--tan-dark); }

/* ---- Custom emoji (inline in messages) ---- */
.custom-emoji {
  height: 1.4em; width: auto; vertical-align: middle;
  display: inline-block; margin: 0 1px; object-fit: contain;
}

/* ---- Server settings modal ---- */
.server-settings-card { max-height: 82vh; overflow-y: auto; }
.settings-label { font-size: .82rem; font-weight: 700; color: var(--brown-mid); margin-bottom: .35rem; margin-top: .1rem; }
.settings-row   { display: flex; gap: .5rem; align-items: center; margin-bottom: .5rem; }
.settings-mono  { flex: 1; display: flex; align-items: center; font-family: monospace; font-size: .9rem; cursor: text; user-select: all; }
.settings-divider { border: none; border-top: 1px solid var(--tan-dark); margin: .9rem 0; }
/* Discord import steps */
.discord-import-step {
  display: flex;
  gap: .75rem;
  align-items: flex-start;
  padding: .6rem .7rem;
  margin-bottom: .5rem;
  background: var(--warm-white);
  border: 1px solid var(--tan-dark);
  border-radius: 8px;
}
.dark .discord-import-step {
  background: var(--bg-dark);
  border-color: var(--border-dark);
}
.discord-import-step-num {
  flex-shrink: 0;
  width: 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--green-mid, #5a7a4a);
  color: #fff;
  font-size: .75rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: .1rem;
}
.settings-select {
  background: var(--warm-white); border: 2px solid var(--tan-dark);
  border-radius: var(--radius-sm); padding: .3rem .5rem;
  font-family: 'Nunito', sans-serif; font-size: .85rem;
  color: var(--brown-dark); cursor: pointer;
  max-width: 160px;
  transition: border-color .15s;
}
.settings-select:focus { outline: none; border-color: var(--green-mid); }
.settings-banner-color-row {
  margin-top: .6rem;
}
.settings-banner-color-actions {
  display: flex;
  align-items: center;
  gap: .6rem;
}
.settings-banner-color-actions input[type="color"] {
  width: 52px;
  height: 38px;
  border: 2px solid var(--tan-dark);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.settings-banner-color-actions .btn-secondary {
  width: auto;
  margin-top: 0;
  padding-inline: .9rem;
}

.account-alias-list {
  display: flex;
  flex-direction: column;
  gap: .55rem;
}

.account-alias-card {
  display: flex;
  align-items: center;
  gap: .7rem;
  padding: .7rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--bg-2);
}

.account-alias-avatar {
  width: 2.2rem;
  height: 2.2rem;
  border-radius: 999px;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: rgba(0,0,0,.06);
  flex-shrink: 0;
}

.account-alias-meta {
  min-width: 0;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .1rem;
}

.account-alias-name {
  font-weight: 800;
  color: var(--brown-dark);
}

.account-alias-sub {
  font-size: .76rem;
  color: var(--brown-mid);
}

.account-alias-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.account-alias-pill {
  display: inline-flex;
  align-items: center;
  gap: .25rem;
  padding: .12rem .5rem;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 800;
  background: rgba(90,154,94,.14);
  color: var(--green-dark);
}

.dark .account-alias-card {
  background: rgba(255,255,255,.04);
}

.automod-textarea {
  min-height: 120px;
  resize: vertical;
  font-family: monospace;
}

.emoji-upload-row {
  display: flex; gap: .4rem; align-items: center; margin-bottom: .4rem;
}
.custom-emoji-preview-list {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-bottom: .45rem;
}
.custom-emoji-preview-chip {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .25rem .45rem;
  border-radius: 999px;
  background: rgba(255,255,255,.75);
  border: 1px solid var(--tan-dark);
  color: var(--brown-mid);
  font-family: monospace;
  font-size: .72rem;
}
.custom-emoji-preview-chip img {
  width: 1.2rem;
  height: 1.2rem;
  object-fit: contain;
  border-radius: 4px;
}

.custom-emoji-list {
  display: flex; flex-wrap: wrap; gap: .4rem;
  max-height: 150px; overflow-y: auto;
  margin-bottom: .3rem;
}
.custom-emoji-item {
  display: flex; align-items: center; gap: .35rem;
  padding: .3rem .5rem; border-radius: var(--radius-sm);
  background: var(--tan); border: 1px solid var(--tan-dark);
}
.custom-emoji-item img { height: 1.5rem; width: 1.5rem; object-fit: contain; }
.custom-emoji-item .emoji-item-name {
  font-family: monospace; font-size: .78rem; color: var(--brown-mid);
}
.custom-emoji-item .emoji-item-del {
  background: none; border: none; cursor: pointer;
  color: var(--red-soft); font-size: .85rem; padding: 0 .1rem; line-height: 1;
}
.custom-emoji-item .emoji-item-del:hover { color: #c0392b; }

/* ---- Custom emoji in picker ---- */
.ep-btn-custom { padding: .15rem; }
.ep-btn-custom img { width: 1.5rem; height: 1.5rem; object-fit: contain; border-radius: 3px; }

/* ---- Sidebar ---- */
#sidebar {
  width: 236px; flex-shrink: 0;
  background: var(--green-dark);
  filter: brightness(.88);
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 2px 0 16px rgba(0,0,0,.15);
}
body.dark #sidebar { filter: brightness(1.05); }
.sidebar-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem .9rem;
  min-height: 54px; box-sizing: border-box;
  background: rgba(0,0,0,.18);
  border-bottom: 1px solid rgba(255,255,255,.1);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.app-logo { font-size: 1.5rem; }
.app-name  { font-size: 1.15rem; font-weight: 800; color: rgba(255,255,255,.95); letter-spacing: .5px; flex: 1; }
.dark-toggle { font-size: 1rem; }

#server-mode-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

#friends-mode-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.sidebar-section { padding: .8rem 0; flex: 1; overflow-y: auto; min-height: 0; }
.sidebar-section::-webkit-scrollbar       { width: 4px; }
.sidebar-section::-webkit-scrollbar-thumb { background: rgba(255,255,255,.25); border-radius: 2px; }

.section-label {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem 1rem .35rem;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .1em;
  color: rgba(255,255,255,.55);
}
.icon-btn {
  background: none; border: none;
  color: rgba(255,255,255,.7);
  cursor: pointer; font-size: 1.1rem; line-height: 1; padding: 0 2px;
  transition: color .15s;
}
.icon-btn:hover { color: white; }

#room-list, #dm-list { list-style: none; }

.room-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .44rem .9rem .44rem 1rem;
  cursor: pointer;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-right: .5rem;
  color: rgba(255,255,255,.6);
  font-weight: 600; font-size: .9rem;
  transition: background .15s, color .15s, transform .12s;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.room-item:hover  { background: rgba(255,255,255,.12); color: rgba(255,255,255,.9); transform: translateX(2px); }
.room-item.active { background: rgba(255,255,255,.18); color: white; transform: none; font-weight: 700; box-shadow: inset 3px 0 0 rgba(255,255,255,.6); }
.room-item[draggable="true"] { cursor: grab; }
.room-item[draggable="true"]:active { cursor: grabbing; }
.room-emoji       { font-size: 1rem; flex-shrink: 0; }
.room-dm-avatar   { font-size: 1rem; flex-shrink: 0; display: flex; align-items: center; }
.room-dm-avatar .avatar-img { width: 1.3rem; height: 1.3rem; }

.unread-badge {
  margin-left: auto; flex-shrink: 0;
  background: var(--yellow); color: var(--brown-dark);
  font-size: .7rem; font-weight: 800;
  border-radius: 999px; padding: 1px 7px;
}
.unread-badge.mention-badge {
  background: #e03c3c;
  color: #fff;
}

.sidebar-footer {
  display: flex; align-items: center; gap: .5rem;
  padding: .8rem .9rem;
  background: rgba(0,0,0,.22);
  border-top: 1px solid rgba(255,255,255,.08);
  position: relative;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
/* Clickable avatar wrap with status pip */
.self-avatar-wrap {
  position: relative; flex-shrink: 0;
  cursor: pointer; border-radius: 50%;
  transition: transform .15s;
}
.self-avatar-wrap:hover { transform: scale(1.12); }
.self-avatar { font-size: 1.4rem; display: block; }
.self-status-pip {
  position: absolute; bottom: -1px; right: -1px;
  width: 10px; height: 10px;
  border: 2px solid var(--green-dark);
}
/* Info column */
.self-info {
  flex: 1; display: flex; flex-direction: column;
  min-width: 0; cursor: pointer;
}
.self-name { color: white; font-weight: 700; font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.self-custom-status { color: rgba(255,255,255,.5); font-size: .72rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Status picker popup */
.status-picker {
  position: fixed;
  background: var(--green-dark);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .5rem;
  min-width: 200px;
  z-index: 100;
  animation: slideUpFade .18s ease both;
}
.status-picker-title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.5);
  padding: .2rem .5rem .4rem;
}
.status-opt {
  display: flex; align-items: center; gap: .6rem;
  width: 100%; padding: .45rem .6rem;
  background: none; border: none; border-radius: var(--radius-sm);
  color: rgba(255,255,255,.85); font-family: 'Nunito', sans-serif;
  font-weight: 700; font-size: .9rem; cursor: pointer;
  transition: background .15s;
  text-align: left;
}
.status-opt:hover { background: rgba(255,255,255,.15); color: white; }
.sp-dot {
  width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0;
  border: 2px solid rgba(0,0,0,.25);
}
.sp-dot.online  { background: #5de05d; }
.sp-dot.away    { background: #FFD166; }
.sp-dot.dnd     { background: #FF6B6B; }
.sp-dot.offline { background: #aaa; }

.status-custom-row {
  display: flex; gap: .3rem; padding: .2rem .3rem .1rem;
}
.status-custom-input {
  flex: 1; padding: .35rem .6rem;
  border: 1.5px solid rgba(255,255,255,.25); border-radius: var(--radius-sm);
  background: rgba(0,0,0,.25); color: white;
  font-family: 'Nunito', sans-serif; font-size: .85rem; outline: none;
}
.status-custom-input::placeholder { color: rgba(255,255,255,.35); }
.status-custom-input:focus { border-color: rgba(255,255,255,.5); }
.sp-save-btn {
  background: var(--green-mid); border: none; border-radius: var(--radius-sm);
  color: white; font-size: 1rem; cursor: pointer; padding: 0 .6rem;
  transition: background .15s;
}
.sp-save-btn:hover { background: var(--green-light); }
.online-dot         { width: 10px; height: 10px; border-radius: 50%; background: #5de05d; border: 2px solid rgba(0,0,0,.3); flex-shrink: 0; }
.online-dot.away    { background: #FFD166; }
.online-dot.dnd     { background: #FF6B6B; }
.online-dot.offline { background: #aaa; }
.logout-btn { background: none; border: none; cursor: pointer; font-size: 1.15rem; opacity: .7; transition: opacity .15s; }
.logout-btn:hover { opacity: 1; }
.footer-icon-btn { background: none; border: none; cursor: pointer; font-size: 1.1rem; opacity: .7; transition: opacity .15s; padding: 0; line-height: 1; }
.footer-icon-btn:hover { opacity: 1; }

/* Avatar image rendering (replaces emoji where an uploaded photo is used) */
.avatar-img {
  width: 1em; height: 1em;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
}
.msg-avatar .avatar-img        { width: 1.6rem; height: 1.6rem; }
.self-avatar .avatar-img       { width: 2rem;   height: 2rem;   }
.profile-avatar .avatar-img    { width: 3.5rem; height: 3.5rem; }
.member-item-avatar .avatar-img { width: 1.6rem; height: 1.6rem; }
.settings-avatar-preview .avatar-img { width: 3rem; height: 3rem; }

/* ---- Settings avatar upload row ---- */
.settings-avatar-row {
  display: flex; align-items: center; gap: 1rem; padding: .6rem 0;
}
.settings-avatar-preview {
  font-size: 2.8rem; line-height: 1;
  width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden; background: var(--tan);
  flex-shrink: 0;
}
.settings-avatar-actions { display: flex; flex-direction: column; gap: .4rem; }

/* ---- Settings banner row ---- */
.settings-banner-row {
  display: flex; flex-direction: column; gap: .5rem;
  padding: .8rem 0 .2rem;
  border-top: 1px solid var(--border-dark);
  margin-top: .6rem;
}
.settings-label {
  font-size: .75rem; font-weight: 700; color: var(--brown-mid);
  text-transform: uppercase; letter-spacing: .05em;
}
.settings-banner-preview {
  width: 100%; height: 80px;
  border-radius: 10px;
  background: var(--green-pale);
  background-size: cover; background-position: center;
  border: 1.5px solid var(--border-dark);
  position: relative; overflow: hidden;
}
.settings-banner-preview.has-banner {
  border-color: var(--tan-dark);
}
.settings-banner-actions {
  display: flex; gap: .5rem; flex-wrap: wrap;
}
.settings-banner-remove-btn {
  color: var(--error, #c0392b) !important;
  border-color: var(--error, #c0392b) !important;
  opacity: .8;
}
.settings-banner-remove-btn:hover { opacity: 1; }

/* ---- User Settings — Discord-style two-panel layout ---- */
.settings-shell {
  display: flex; flex-direction: row;
  width: min(860px, 96vw); height: min(600px, 92vh);
  background: var(--warm-white); border-radius: var(--radius-lg);
  border: 3px solid var(--tan-dark); box-shadow: var(--shadow-md);
  overflow: hidden;
}

/* Left nav */
.settings-nav {
  width: 200px; flex-shrink: 0;
  background: var(--tan);
  border-right: 2px solid var(--tan-dark);
  display: flex; flex-direction: column;
  padding: 1rem .6rem;
  gap: .15rem;
  overflow-y: auto;
}
.settings-nav-group-label {
  font-size: .68rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .09em; color: var(--brown-mid);
  padding: .5rem .6rem .2rem;
}
.settings-nav-btn {
  background: none; border: none; cursor: pointer;
  font-family: 'Nunito', sans-serif; font-size: .88rem; font-weight: 700;
  color: var(--brown-dark); text-align: left;
  padding: .48rem .7rem; border-radius: var(--radius-sm);
  transition: background .13s, color .13s, transform .12s;
  width: 100%;
}
.settings-nav-btn:hover  { background: var(--tan); transform: translateX(2px); }
.settings-nav-btn.active { background: var(--green-pale); color: var(--green-dark); }
.settings-nav-danger     { color: var(--red-soft) !important; margin-top: auto; }
.settings-nav-danger:hover { background: #fdecea; }
.settings-nav-divider { border-top: 1px solid var(--tan-dark); margin: .4rem 0; }

/* Right content */
.settings-content {
  flex: 1; display: flex; flex-direction: column;
  position: relative; overflow: hidden;
}
.settings-panel {
  display: none; flex: 1;
  overflow-y: auto; overflow-x: hidden; padding: 1.6rem 1.8rem;
  animation: slideRight .18s ease both;
}
.settings-panel.active { display: flex; flex-direction: column; }
.settings-panel-title {
  font-size: 1.15rem; font-weight: 800; color: var(--brown-dark);
  margin: 0 0 1.2rem; padding-bottom: .6rem;
  border-bottom: 2px solid var(--tan-dark);
}

/* Account section styles */
.account-field {
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--tan-dark);
}
.account-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--brown-mid);
  margin-bottom: 0.5rem;
}
.account-value-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.account-value {
  font-size: 1rem;
  color: var(--brown-dark);
}
.dark .account-value {
  color: var(--brown-light);
}
.account-edit-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.account-edit-btn {
  padding: 0.3rem 0.7rem;
  font-size: 0.8rem;
}
.account-edit-form {
  background: rgba(0,0,0,0.03);
  padding: 0.8rem;
  border-radius: 8px;
}
.dark .account-edit-form {
  background: rgba(255,255,255,0.03);
}
.danger-zone {
  border: 1px solid #e74c3c;
  border-radius: 8px;
  padding: 1rem;
  margin-top: 2rem;
  background: rgba(231, 76, 60, 0.05);
}
.danger-desc {
  font-size: 0.85rem;
  color: var(--brown-mid);
  margin: 0.5rem 0;
}
.btn-danger {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s;
}
.btn-danger:hover {
  background: #c0392b;
}

.settings-close-btn {
  position: absolute; top: .8rem; right: .9rem;
  background: none; border: none; cursor: pointer;
  font-size: 1rem; color: var(--brown-light);
  transition: color .15s, transform .12s;
  line-height: 1; padding: .2rem .4rem; border-radius: 4px;
  z-index: 10;
}
.settings-close-btn:hover { color: var(--brown-dark); transform: scale(1.2) rotate(10deg); }

/* Row styles (reused across panels) */
.user-setting-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 1px solid rgba(0,0,0,.07); }
.user-setting-row:last-child { border-bottom: none; }
.user-setting-info { display: flex; flex-direction: column; gap: .15rem; }
.user-setting-name { font-weight: 700; font-size: .92rem; color: var(--brown-dark); }
.user-setting-desc { font-size: .78rem; color: var(--brown-mid); }

/* Toggle switch */
.toggle-switch { position: relative; display: inline-block; width: 42px; height: 24px; flex-shrink: 0; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-track { position: absolute; inset: 0; border-radius: 24px; background: #ccc; cursor: pointer; transition: background .2s; }
.toggle-track::after { content: ''; position: absolute; left: 3px; top: 3px; width: 18px; height: 18px; border-radius: 50%; background: white; transition: transform .2s; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.toggle-switch input:checked + .toggle-track { background: var(--green-mid); }
.toggle-switch input:checked + .toggle-track::after { transform: translateX(18px); }

/* ---- Chat area ---- */
#chat-area { flex: 1; min-width: 0; display: flex; flex-direction: column; background: var(--cream); overflow: hidden; }

#no-room { flex: 1; display: flex; align-items: center; justify-content: center; }
.no-room-inner { text-align: center; color: var(--brown-light); font-weight: 700; font-size: 1.1rem; }

#chat-view { display: flex; flex-direction: column; height: 100%; overflow: hidden; }

/* Header */
.chat-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .8rem 1.4rem;
  min-height: 54px; box-sizing: border-box;
  background: var(--warm-white);
  border-bottom: 1px solid var(--tan-dark);
  box-shadow: 0 2px 16px rgba(0,0,0,.08);
  flex-shrink: 0; gap: .5rem;
  position: relative; z-index: 4;
}
body.dark .chat-header {
  background: rgba(19,21,29,.92);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  border-bottom-color: rgba(255,255,255,.07);
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 24px rgba(0,0,0,.4);
}
.chat-header-left  { display: flex; align-items: center; gap: .6rem; min-width: 0; flex: 1; }
.chat-header-actions { display: flex; gap: .3rem; flex-shrink: 0; }

#chat-room-emoji { font-size: 1.3rem; display: flex; align-items: center; }
#chat-room-emoji .avatar-img { width: 1.6rem; height: 1.6rem; }

.chat-header-title { display: flex; flex-direction: column; min-width: 0; }
.chat-header-title > span:first-child { font-size: 1.05rem; font-weight: 800; color: var(--brown-dark); }

.chat-topic {
  font-size: .78rem; color: var(--brown-light);
  font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer; max-width: 300px;
}
.chat-topic:empty::before { content: 'Click to set topic…'; opacity: .5; }
.chat-topic:hover { color: var(--brown-mid); text-decoration: underline; }

.hdr-btn {
  background: none; border: 2px solid var(--tan-dark);
  border-radius: 10px;
  padding: .3rem .6rem; font-size: .85rem;
  cursor: pointer; color: var(--brown-mid);
  font-family: 'Nunito', sans-serif; font-weight: 700;
  transition: background .15s, border-color .15s;
  white-space: nowrap;
}
.hdr-btn:hover  { background: var(--tan); border-color: var(--brown-light); }
.hdr-btn.active { background: var(--green-pale); border-color: var(--green-mid); color: var(--green-dark); }
.hdr-call-btn   { color: var(--green-dark); border-color: var(--green-mid); background: var(--green-pale); }
.hdr-call-btn:hover { background: var(--green-mid); color: white; border-color: var(--green-mid); }
.hdr-hangup-btn { color: #c0392b; border-color: #e57373; background: #fdecea; }
.hdr-hangup-btn:hover { background: #e57373; color: white; border-color: #e57373; }
.hdr-update-btn {
  display: none;
}

/* Search bar */
.search-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .5rem 1.2rem;
  background: var(--warm-white);
  border-bottom: 2px solid var(--tan-dark);
  flex-shrink: 0;
}
.search-input {
  flex: 1; padding: .45rem .9rem;
  border: 2px solid var(--tan-dark); border-radius: var(--radius-sm);
  background: var(--cream); color: var(--text-dark);
  font-family: 'Nunito', sans-serif; font-size: .9rem; outline: none;
  transition: border-color .2s;
}
.search-input:focus { border-color: var(--green-mid); }

/* Search results */
.search-results {
  background: var(--warm-white);
  border-bottom: 2px solid var(--tan-dark);
  max-height: 220px; overflow-y: auto;
  flex-shrink: 0;
}
.search-result-item {
  padding: .6rem 1.2rem;
  border-bottom: 1px solid var(--tan);
  cursor: default;
}
.search-result-item:last-child { border-bottom: none; }
.search-result-meta { font-size: .75rem; color: var(--brown-light); font-weight: 700; margin-bottom: .15rem; }
.search-result-content { font-size: .9rem; color: var(--text-dark); }
.search-result-content mark { background: var(--yellow); border-radius: 3px; padding: 0 2px; }
.search-no-results { padding: 1rem 1.2rem; color: var(--brown-light); font-size: .9rem; }

/* Pins panel */
.pins-panel {
  background: var(--warm-white);
  border-bottom: 2px solid var(--tan-dark);
  max-height: 200px; overflow-y: auto;
  flex-shrink: 0;
}
.pins-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1.2rem;
  font-weight: 800; font-size: .9rem; color: var(--brown-dark);
  border-bottom: 1px solid var(--tan-dark);
  position: sticky; top: 0; background: var(--warm-white);
}
.pins-panel-header button { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--brown-light); }
.pin-item {
  display: flex; align-items: flex-start; gap: .6rem;
  padding: .6rem 1.2rem;
  border-bottom: 1px solid var(--tan);
}
.pin-item:last-child { border-bottom: none; }
.pin-item-avatar { font-size: 1.3rem; flex-shrink: 0; }
.pin-item-body { flex: 1; min-width: 0; }
.pin-item-meta { font-size: .72rem; color: var(--brown-light); font-weight: 700; margin-bottom: .1rem; }
.pin-item-content { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.saved-item {
  width: 100%;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: .7rem 1.2rem;
  border: none;
  border-bottom: 1px solid var(--tan);
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.saved-item:hover { background: rgba(0,0,0,.04); }
.saved-item:last-child { border-bottom: none; }
.saved-item-avatar { font-size: 1.3rem; flex-shrink: 0; }
.saved-item-body { flex: 1; min-width: 0; }
.saved-item-meta { font-size: .72rem; color: var(--brown-light); font-weight: 700; margin-bottom: .18rem; }
.saved-item-content { font-size: .88rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--brown-dark); }

.group-dm-avatar-row {
  display: flex;
  align-items: center;
  gap: .8rem;
  margin-bottom: .8rem;
}
.group-dm-avatar-preview {
  width: 3.2rem;
  height: 3.2rem;
  border-radius: 18px;
  border: 1.5px solid var(--tan-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: rgba(255,255,255,.8);
  font-size: 1.6rem;
}
.group-dm-avatar-preview .avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.group-dm-avatar-actions {
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Chat body */
.chat-body { flex: 1; display: flex; overflow: hidden; position: relative; }
.chat-main { flex: 1; display: flex; flex-direction: column; overflow: hidden; position: relative; }

/* Messages */
.messages-area { flex: 1; overflow-y: auto; padding: 1.2rem 1.4rem; display: flex; flex-direction: column; gap: .6rem; }
.messages-area::-webkit-scrollbar       { width: 5px; }
.messages-area::-webkit-scrollbar-thumb { background: var(--tan-dark); border-radius: 3px; opacity: .6; }
.messages-area::-webkit-scrollbar-track { background: transparent; }

.message { display: flex; align-items: flex-start; gap: .7rem; position: relative; }
.message.self { flex-direction: row-reverse; }
.message.pinned-msg .msg-bubble { border-left: 3px solid var(--yellow); }
.message.self.pinned-msg .msg-bubble { border-left: none; border-right: 3px solid var(--yellow); }

@keyframes fadeUp { from { opacity:0; transform: translateY(6px); } to { opacity:1; transform: translateY(0); } }

.msg-avatar { font-size: 1.6rem; flex-shrink: 0; margin-top: 2px; cursor: pointer; transition: transform .15s; }
.msg-avatar:hover { transform: scale(1.2); }

/* Voice chat avatar with speaking indicator */
.voice-avatar { font-size: 1.5rem; }
.voice-ch-participant.speaking {
  animation: portrait-glow .7s ease-in-out infinite;
  border-radius: var(--radius-sm);
  position: relative; z-index: 1;
}

.msg-body { max-width: min(68%, 680px); min-width: 0; }
.msg-meta { font-size: .75rem; color: var(--brown-light); font-weight: 700; margin-bottom: .25rem; }
.msg-author { cursor: pointer; transition: color .15s; }
.msg-author:hover { color: var(--brown-mid); text-decoration: underline; }
.message.self .msg-meta { text-align: right; }
.edited-label { font-size: .68rem; color: var(--brown-light); font-style: italic; margin-left: .4rem; }
.pin-badge    { font-size: .68rem; color: var(--brown-light); margin-left: .4rem; }
.saved-badge  { font-size: .68rem; color: var(--green-dark); margin-left: .4rem; }

.msg-bubble {
  padding: .6rem 1rem;
  border-radius: 12px;
  font-size: .95rem; line-height: 1.55; word-break: break-word;
  background: var(--warm-white);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 1px 4px rgba(0,0,0,.06), 0 2px 8px rgba(0,0,0,.04);
  color: var(--text-dark);
  position: relative;
}
body.dark .msg-bubble {
  background: var(--tan);
  border-color: rgba(255,255,255,.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
.msg-bubble.emoji-only {
  font-size: 3.5rem;
  line-height: 1.2;
  background: transparent;
  border-color: transparent;
  padding: .1rem .2rem;
  box-shadow: none;
}
.msg-bubble.emoji-only img {
  width: 3.5rem;
  height: 3.5rem;
  vertical-align: middle;
}
.msg-bubble.custom-emoji-only {
  background: transparent;
  border-color: transparent;
  padding: .2rem .25rem;
  box-shadow: none;
}
.msg-bubble.custom-emoji-only img {
  width: 2.2rem;
  height: 2.2rem;
  vertical-align: middle;
}
.message.message-grouped {
  margin-top: .18rem;
}
.message.message-grouped .msg-avatar,
.message.message-grouped .msg-meta {
  display: none;
}
.message.message-grouped .msg-body {
  margin-left: 3.05rem;
}
.message.self.message-grouped .msg-body {
  margin-left: 0;
}
.message.self .msg-bubble {
  background: var(--green-pale);
  border-color: color-mix(in srgb, var(--green-mid) 30%, transparent);
  box-shadow: 0 1px 4px color-mix(in srgb, var(--green-mid) 12%, transparent), 0 2px 8px color-mix(in srgb, var(--green-mid) 8%, transparent);
  color: var(--text-dark);
}
body.dark .message.self .msg-bubble {
  background: var(--green-pale);
  border-color: color-mix(in srgb, var(--green-mid) 30%, transparent);
  box-shadow: 0 2px 12px color-mix(in srgb, var(--green-mid) 12%, transparent);
}

/* Message formatting */
.msg-bubble strong { font-weight: 800; }
.msg-bubble em     { font-style: italic; }
.msg-bubble code   { background: var(--tan); padding: 1px 5px; border-radius: 4px; font-size: .88em; font-family: monospace; }
body.dark .msg-bubble code { background: var(--tan-dark); }
.msg-code-block    { background: var(--tan); border-radius: 6px; padding: .6em .8em; margin: .3em 0; overflow-x: auto; font-size: .85em; font-family: monospace; white-space: pre; }
body.dark .msg-code-block  { background: var(--tan-dark); }
.msg-code-block code { background: none; padding: 0; font-size: inherit; }
.msg-blockquote    { border-left: 3px solid var(--brown-light); margin: .2em 0 .2em .2em; padding: .1em .1em .1em .7em; opacity: .85; white-space: pre-wrap; }
body.dark .msg-blockquote  { border-left-color: var(--brown-light); }

/* Mentions */
.mention { background: rgba(91,173,111,.25); color: var(--green-dark); border-radius: 4px; padding: 0 3px; font-weight: 700; cursor: pointer; }
.mention:hover { background: rgba(91,173,111,.4); }
.mention.mention-self { background: rgba(255,209,102,.35); color: var(--brown-mid); }
.message.mentioned .msg-bubble { border-left: 3px solid var(--yellow); background: rgba(255,209,102,.08); }

/* ═══════════════════════════════════════════════════════
   DEVELOPER — prismatic name + badge + message effects
   ═══════════════════════════════════════════════════════ */

/* Developer badge — only Aeth */
.dev-badge {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: linear-gradient(135deg, #1a1a2e 0%, #0f3460 60%, #1a1a2e 100%);
  background-size: 200% 100%;
  color: #e8c840;
  font-size: .58rem;
  font-weight: 800;
  padding: 1px 5px 2px;
  border-radius: 4px;
  letter-spacing: .05em;
  vertical-align: middle;
  margin-left: 4px;
  text-transform: uppercase;
  border: 1px solid transparent;
  background-clip: padding-box;
  box-shadow:
    0 0 0 1px rgba(165,94,234,.5),
    0 1px 6px rgba(15,52,96,.4),
    0 0 10px rgba(165,94,234,.2);
  white-space: nowrap;
  position: relative;
  top: -1px;
  overflow: hidden;
  animation: dev-badge-glow 3s ease-in-out infinite;
}
.dev-badge::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
  animation: fx-shimmer 2.5s linear infinite;
}
@keyframes dev-badge-glow {
  0%,100% { box-shadow: 0 0 0 1px rgba(165,94,234,.5), 0 1px 6px rgba(15,52,96,.4), 0 0 10px rgba(165,94,234,.2); }
  33%      { box-shadow: 0 0 0 1px rgba(69,170,242,.6),  0 1px 6px rgba(15,52,96,.4), 0 0 12px rgba(69,170,242,.3); }
  66%      { box-shadow: 0 0 0 1px rgba(253,121,168,.6), 0 1px 6px rgba(15,52,96,.4), 0 0 12px rgba(253,121,168,.3); }
}
.dev-badge-lg {
  font-size: .72rem;
  padding: 2px 8px 3px;
  border-radius: 6px;
  top: -2px;
}

/* Reply quote inside message */
.reply-quote {
  display: flex; align-items: center; gap: .35rem;
  background: var(--tan); border-left: 3px solid var(--green-mid);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .25rem .55rem; margin-bottom: .3rem;
  cursor: pointer; max-width: 100%;
  font-size: .8rem; color: var(--brown-mid);
  transition: background .15s;
}
.reply-quote:hover { background: var(--tan-dark); }
.reply-quote-avatar { flex-shrink: 0; font-size: .85rem; line-height: 1; }
.reply-quote-author { font-weight: 700; color: var(--brown-dark); white-space: nowrap; flex-shrink: 0; }
.reply-quote-text   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }

/* Forwarded message block */
.forwarded-block {
  background: var(--tan); border-left: 3px solid var(--brown-light);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: .3rem .6rem; margin-bottom: .3rem; max-width: 100%;
  font-size: .8rem;
}
.forwarded-label { color: var(--brown-mid); margin-bottom: .15rem; }
.forwarded-label strong { color: var(--brown-dark); }
.forwarded-content { color: var(--brown-dark); white-space: pre-wrap; word-break: break-word; }

/* Forward modal */
.forward-card {
  width: min(400px, calc(100vw - 2rem));
  max-height: min(70vh, 540px);
  display: flex; flex-direction: column;
}
.forward-preview {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--tan); border-radius: var(--radius-sm);
  padding: .45rem .65rem; font-size: .82rem;
  margin-bottom: .1rem;
}
.forward-preview-author { font-weight: 700; color: var(--brown-dark); }
.forward-preview-body   { color: var(--brown-mid); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.forward-list {
  list-style: none; padding: 0; margin: 0;
  overflow-y: auto; flex: 1;
}
.forward-list-header {
  font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em;
  color: var(--brown-mid); padding: .5rem .4rem .2rem; pointer-events: none;
}
.forward-list-item {
  padding: .5rem .7rem; border-radius: 8px; cursor: pointer;
  font-size: .9rem; color: var(--brown-dark);
  transition: background .12s;
}
.forward-list-item:hover { background: var(--tan); }

/* Reply bar above input */
.slow-mode-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem .9rem;
  background: rgba(255,209,102,.15); border-top: 1px solid rgba(255,209,102,.3);
  font-size: .8rem; color: var(--brown-mid);
}
body.dark .slow-mode-bar { background: rgba(255,209,102,.08); }
#reply-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem .25rem;
  background: var(--tan); border-top: 1px solid var(--tan-dark);
  font-size: .82rem; color: var(--brown-mid);
}
.reply-bar-icon { font-size: 1rem; flex-shrink: 0; color: var(--green-mid); }
.reply-bar-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reply-bar-cancel {
  background: none; border: none; cursor: pointer;
  color: var(--brown-light); font-size: .9rem; padding: .1rem .3rem;
  border-radius: 4px; transition: color .15s;
}
.reply-bar-cancel:hover { color: var(--brown-dark); }

.thread-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .35rem .9rem .25rem;
  background: rgba(107,171,110,.1);
  border-top: 1px solid rgba(107,171,110,.25);
  font-size: .82rem; color: var(--green-dark); font-weight: 700;
}
.thread-back-btn {
  border: none;
  background: var(--green-dark);
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  cursor: pointer;
  flex-shrink: 0;
}
.thread-bar-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thread-archive-btn {
  border: 1px solid rgba(107,171,110,.35);
  background: rgba(255,255,255,.85);
  color: var(--green-dark);
  border-radius: 999px;
  padding: .28rem .7rem;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
}
.thread-archive-btn:hover { background: var(--tan); }

.thread-row {
  display: flex;
  margin-top: .38rem;
}
.thread-pill {
  border: 1px solid var(--tan-dark);
  background: rgba(255,255,255,.8);
  color: var(--brown-mid);
  border-radius: 999px;
  padding: .22rem .65rem;
  font-size: .76rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .12s, border-color .15s;
}
.thread-pill:hover {
  background: var(--tan);
  border-color: var(--green-mid);
  transform: translateY(-1px);
}

/* DM read receipts */
.dm-read-receipts {
  display: flex; gap: .2rem; justify-content: flex-end;
  padding: .1rem .9rem .4rem; align-items: center;
}
.dm-read-avatar {
  font-size: .85rem; line-height: 1; opacity: .7;
  transition: opacity .15s, transform .15s;
}
.dm-read-avatar:hover { opacity: 1; transform: scale(1.15); }

/* Message jump-highlight */
@keyframes msgHighlight { 0%,100%{background:transparent} 30%{background:rgba(138,213,109,.18)} }
.msg-highlight { animation: msgHighlight 1.5s ease; }

/* Toast notification */
/* ── In-app message notification cards ─────────────────────── */
#msg-notif-stack {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  flex-direction: column-reverse;
  gap: .5rem;
  z-index: 9000;
  pointer-events: none;
}
.msg-notif-card {
  pointer-events: all;
  width: 300px;
  background: var(--tan);
  border: 1.5px solid var(--tan-dark);
  border-radius: var(--radius-md);
  box-shadow: 0 4px 18px rgba(0,0,0,.22);
  overflow: hidden;
  cursor: pointer;
  animation: notifSlideIn .28s cubic-bezier(.22,1,.36,1) both;
  transition: transform .15s, box-shadow .15s;
}
.msg-notif-card:hover { transform: translateX(-4px); box-shadow: 0 6px 24px rgba(0,0,0,.3); }
.msg-notif-card.removing {
  animation: notifSlideOut .22s ease-in both;
}
@keyframes notifSlideIn {
  from { opacity: 0; transform: translateX(60px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes notifSlideOut {
  from { opacity: 1; transform: translateX(0);   max-height: 120px; margin-bottom: 0; }
  to   { opacity: 0; transform: translateX(40px); max-height: 0;    margin-bottom: -.5rem; }
}
.msg-notif-body {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  padding: .65rem .7rem .55rem;
}
.msg-notif-avatar {
  width: 38px; height: 38px;
  border-radius: 50%;
  flex-shrink: 0;
  overflow: hidden;
  background: var(--tan-dark);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
}
.msg-notif-avatar img { width: 100%; height: 100%; object-fit: cover; }
.msg-notif-text { flex: 1; min-width: 0; }
.msg-notif-name {
  font-weight: 700;
  font-size: .85rem;
  color: var(--brown-dark);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-notif-where {
  font-size: .72rem;
  color: var(--brown-light);
  margin-bottom: .15rem;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.msg-notif-preview {
  font-size: .8rem;
  color: var(--brown-mid);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.msg-notif-close {
  background: none; border: none; cursor: pointer;
  color: var(--brown-light); font-size: 1rem; line-height: 1;
  padding: 0 0 0 .25rem; flex-shrink: 0; align-self: flex-start;
  transition: color .15s;
}
.msg-notif-close:hover { color: var(--brown-dark); }
.msg-notif-actions {
  display: flex;
  gap: .45rem;
  padding: 0 .7rem .6rem;
}
.msg-notif-action-btn {
  flex: 1;
  min-height: 32px;
  border-radius: 999px;
  border: 1.5px solid var(--tan-dark);
  background: rgba(255,255,255,.55);
  color: var(--brown-dark);
  font: inherit;
  font-size: .74rem;
  font-weight: 800;
  cursor: pointer;
}
.msg-notif-action-btn.primary {
  background: var(--green-mid);
  border-color: var(--green-dark);
  color: white;
}
.msg-notif-bar {
  height: 3px;
  background: var(--green-mid);
  transform-origin: left;
  animation: notifBar linear both;
}
@keyframes notifBar {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

.acorn-toast {
  position: fixed; bottom: 2rem; left: 50%; transform: translateX(-50%) translateY(1rem);
  background: var(--green-dark); color: white;
  padding: .55rem 1.2rem; border-radius: var(--radius-md);
  font-size: .88rem; font-weight: 700;
  box-shadow: var(--shadow-md); pointer-events: none;
  opacity: 0; transition: opacity .2s, transform .2s;
  z-index: 9999;
}
.acorn-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); }
.egg-found-toast {
  background: linear-gradient(135deg, #2d5a3d 0%, #1a7a3a 100%);
  border: 1.5px solid rgba(80,200,120,.5);
  box-shadow: 0 4px 20px rgba(40,160,80,.35), 0 2px 8px rgba(0,0,0,.2);
  bottom: 5rem;
  font-size: .82rem;
  letter-spacing: .01em;
}
.egg-found-toast strong { color: #90f0b0; }

/* Inline links */
.msg-link {
  color: var(--green-dark); text-decoration: underline;
  word-break: break-all;
}
.msg-link:hover { color: var(--green-mid); }

/* YouTube embed */
.yt-embed {
  margin-top: .5rem;
  width: min(480px, 100%);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 2px solid var(--tan-dark);
}
.yt-frame {
  width: 100%; aspect-ratio: 16/9;
  display: block; border: none;
}

/* ── Link preview cards ── */
.link-preview-card {
  display: flex; gap: .6rem; align-items: flex-start;
  margin-top: .5rem; max-width: 420px;
  background: var(--tan); border: 1.5px solid var(--tan-dark);
  border-left: 3px solid var(--green); border-radius: var(--radius-md);
  padding: .55rem .65rem; text-decoration: none; color: inherit;
  transition: background .15s;
}
.link-preview-card:hover { background: var(--tan-dark); }
body.dark .link-preview-card { background: var(--tan-dark); border-color: var(--brown-light); }
body.dark .link-preview-card:hover { background: #3a3028; }
.link-preview-img { width: 72px; height: 72px; object-fit: cover; border-radius: 6px; flex-shrink: 0; }
.link-preview-text { min-width: 0; display: flex; flex-direction: column; gap: .18rem; }
.link-preview-site { font-size: .72rem; opacity: .55; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.link-preview-title { font-weight: 700; font-size: .88rem; line-height: 1.3; }
.link-preview-desc { font-size: .8rem; opacity: .7; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* ── Attachments ── */

/* Media bubble — images/videos sit inside the same styled bubble as text */
.msg-media-bubble {
  padding: .35rem;
  overflow: hidden;
}

/* Images inside a media bubble — centered within the bubble */
.msg-media-bubble .msg-image {
  display: block;
  max-width: 100%;
  max-height: 40vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  object-fit: contain;
  cursor: pointer;
  border-radius: 8px;
}

/* Videos inside a media bubble — centered within the bubble */
.msg-media-bubble .msg-video {
  display: block;
  max-width: 100%;
  max-height: 44vh;
  width: auto;
  height: auto;
  margin: 0 auto;
  border-radius: 8px;
  background: #000;
}

/* Caption strip below media when text is also sent */
.msg-media-caption {
  padding: .3rem .5rem .35rem;
  font-size: .83rem;
  color: var(--brown-mid);
  border-top: 1px solid rgba(0,0,0,.07);
  line-height: 1.4;
  margin-top: .25rem;
}
body.dark .msg-media-caption { border-color: rgba(255,255,255,.07); color: var(--text-muted); }

/* Multi-image/video grid */
.msg-media-grid {
  display: flex; flex-direction: column; gap: .3rem;
}

/* Bare img/video fallback (referenced from older paths) */
.msg-image {
  display: block;
  max-width: 100%; height: auto;
  max-height: 40vh;
  object-fit: contain;
  cursor: pointer;
  border-radius: 8px;
}
.msg-video {
  display: block;
  max-width: 100%; height: auto;
  max-height: 44vh;
  border-radius: 8px;
  background: #000;
}

/* File link pill */
.msg-file-link {
  display: inline-flex; align-items: center; gap: .4rem;
  margin-top: .4rem; padding: .4rem .7rem;
  background: var(--tan); border: 2px solid var(--tan-dark); border-radius: var(--radius-sm);
  color: var(--brown-dark); font-weight: 700; font-size: .88rem;
  text-decoration: none;
}
.msg-file-link:hover { background: var(--tan-dark); }
.msg-files { display: flex; flex-direction: column; gap: .4rem; margin-top: .4rem; }
.msg-files .msg-file-link { margin-top: 0; }

/* Reactions */
.reactions-row { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; }
.reaction-chip {
  display: flex; align-items: center; gap: .2rem;
  padding: .2rem .55rem;
  background: var(--tan); border: 2px solid var(--tan-dark);
  border-radius: 999px; font-size: .85rem; cursor: pointer;
  transition: background .15s, border-color .15s; user-select: none;
}
.reaction-chip:hover { background: var(--yellow); border-color: var(--brown-light); }
.reaction-chip.mine  { background: var(--green-pale); border-color: var(--green-light); }
.react-count { font-size: .75rem; font-weight: 700; color: var(--brown-mid); }
.add-reaction-btn {
  opacity: 0; background: none; border: 2px dashed var(--tan-dark);
  border-radius: 999px; padding: .2rem .5rem;
  font-size: .85rem; cursor: pointer; color: var(--brown-light);
  transition: opacity .15s, background .15s;
}
.message:hover .add-reaction-btn { opacity: 1; }
.add-reaction-btn:hover { background: var(--tan); color: var(--brown-mid); }

/* Inline edit */
.inline-edit-row { display: flex; gap: .4rem; margin-top: .4rem; }
.inline-edit-input {
  flex: 1; padding: .4rem .7rem;
  border: 2px solid var(--green-mid); border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif; font-size: .92rem;
  background: var(--cream); color: var(--text-dark); outline: none;
}
.inline-edit-save, .inline-edit-cancel {
  padding: .4rem .7rem; border: none; border-radius: var(--radius-sm);
  font-family: 'Nunito', sans-serif; font-weight: 700; cursor: pointer; font-size: .85rem;
}
.inline-edit-save   { background: var(--green-dark); color: white; }
.inline-edit-cancel { background: var(--tan-dark); color: var(--brown-dark); }

/* Typing + scroll */
.typing-indicator { padding: .3rem 1.4rem .2rem; font-size: .82rem; color: var(--brown-light); font-style: italic; font-weight: 600; min-height: 1.4rem; }

.scroll-btn {
  position: absolute; bottom: 72px; left: 50%; transform: translateX(-50%);
  background: var(--green-dark); color: white;
  border: none; border-radius: 999px; padding: .4rem 1.1rem;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .85rem;
  cursor: pointer; box-shadow: 0 4px 16px rgba(61,43,31,0.22); z-index: 10;
  transition: background .2s, transform .15s, box-shadow .15s;
}
.scroll-btn:hover { background: var(--green-mid); transform: translateX(-50%) translateY(-2px); box-shadow: 0 6px 20px rgba(61,43,31,0.28); }

/* Message input */
.message-input-row {
  display: flex; gap: .5rem; align-items: flex-end;
  padding: .65rem 1rem .75rem;
  background: var(--warm-white);
  border-top: 1px solid var(--tan-dark);
  box-shadow: 0 -4px 20px rgba(0,0,0,.06);
  flex-shrink: 0; position: relative;
}
body.dark .message-input-row {
  background: rgba(13,15,20,.96);
  border-top-color: rgba(255,255,255,.06);
  box-shadow: 0 -4px 24px rgba(0,0,0,.4);
}
.attach-btn {
  font-size: 1.3rem; cursor: pointer;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  transition: background .15s; flex-shrink: 0;
}
.attach-btn:hover { background: var(--tan); }

.msg-input {
  flex: 1; padding: .7rem 1.1rem;
  border: 1.5px solid var(--tan-dark); border-radius: 12px;
  background: var(--cream); color: var(--text-dark);
  font-family: 'Nunito', sans-serif; font-size: .95rem; outline: none;
  transition: border-color .2s, box-shadow .2s;
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
  /* textarea-specific */
  resize: none; overflow-y: hidden;
  line-height: 1.45; min-height: 2.3em; max-height: 9em;
  vertical-align: middle; display: block;
}
.msg-input:focus {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(107,171,110,.18), 0 1px 4px rgba(0,0,0,.06);
}
body.dark .msg-input {
  background: var(--tan);
  border-color: var(--tan-dark);
  box-shadow: 0 2px 8px rgba(0,0,0,.3);
}
body.dark .msg-input:focus {
  border-color: var(--green-dark);
  box-shadow: 0 0 0 3px rgba(74,222,128,.15), 0 2px 8px rgba(0,0,0,.3);
}

.send-btn {
  padding: .68rem 1.2rem;
  background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
  color: white;
  border: none; border-radius: 12px;
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .95rem;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, filter .15s;
  white-space: nowrap;
  box-shadow: 0 2px 12px rgba(90,154,94,.35);
}
.send-btn:hover  { filter: brightness(1.1); box-shadow: 0 4px 20px rgba(90,154,94,.5); transform: translateY(-1px); }
.send-btn:active { transform: scale(.97) translateY(0); box-shadow: none; }
body.dark .send-btn {
  background: linear-gradient(135deg, var(--green-mid), var(--green-dark));
  box-shadow: 0 2px 16px rgba(34,197,94,.3);
}
body.dark .send-btn:hover { box-shadow: 0 4px 24px rgba(74,222,128,.4); }

/* File preview bar */
.file-preview-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .35rem 1rem .5rem;
  background: var(--warm-white);
  font-size: .85rem; font-weight: 700; color: var(--brown-mid);
  flex-shrink: 0;
  flex-wrap: wrap; gap: .5rem;
}
.file-preview-list {
  display: flex; flex-wrap: wrap; gap: .3rem; flex: 1;
}
.file-preview-item {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .2rem .5rem; background: var(--tan);
  border-radius: var(--radius-sm); font-size: .8rem;
}
.file-preview-item button {
  background: none; border: none; cursor: pointer;
  padding: 0; color: var(--brown-dark); font-size: .75rem;
}
.file-preview-bar button { background: none; border: none; cursor: pointer; font-size: 1rem; color: var(--brown-light); }

/* Drag-drop overlay */
.drop-overlay {
  position: absolute; inset: 0; z-index: 50;
  background: rgba(107,171,110,.15);
  border: 4px dashed var(--green-mid);
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-md); pointer-events: none;
}
.drop-inner { font-size: 1.5rem; font-weight: 800; color: var(--green-dark); }

/* Member panel */
.member-panel {
  width: 240px; flex-shrink: 0;
  background: var(--warm-white);
  border-left: 1px solid var(--tan-dark);
  overflow-y: auto;
  box-shadow: -2px 0 12px rgba(0,0,0,.05);
}
body.dark .member-panel {
  background: rgba(13,15,20,.8);
  border-left-color: rgba(255,255,255,.06);
  box-shadow: -4px 0 20px rgba(0,0,0,.4);
}
.member-panel::-webkit-scrollbar       { width: 3px; }
.member-panel::-webkit-scrollbar-thumb { background: var(--tan-dark); border-radius: 2px; opacity: .5; }
.member-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .9rem 1rem .6rem;
  font-size: .68rem; font-weight: 800;
  text-transform: uppercase; letter-spacing: .12em;
  color: var(--brown-light);
  border-bottom: 1px solid var(--tan-dark);
  position: sticky; top: 0;
  background: var(--warm-white);
}
body.dark .member-panel-header {
  background: rgba(13,15,20,.95);
  border-bottom-color: rgba(255,255,255,.06);
  backdrop-filter: blur(8px);
}
.member-panel-actions {
  display: flex;
  gap: .35rem;
}
.member-panel-action-btn {
  border: 1px solid var(--tan-dark);
  background: rgba(255,255,255,.85);
  color: var(--brown-dark);
  border-radius: 999px;
  padding: .25rem .6rem;
  cursor: pointer;
  font-size: .72rem;
  font-weight: 700;
}
.member-panel-action-btn:hover { background: var(--tan); }
.member-panel-action-btn.danger {
  border-color: rgba(255,107,107,.35);
  color: #a73d34;
}
.member-panel-action-btn.danger:hover { background: rgba(255,107,107,.14); }
#member-list { list-style: none; padding: .4rem 0; }
.thread-list-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .7rem;
  margin-bottom: .25rem;
  border: 1px solid var(--tan-dark);
  border-radius: 10px;
  background: rgba(255,255,255,.7);
  cursor: pointer;
}
.thread-list-item.active {
  border-color: var(--green-dark);
  box-shadow: inset 0 0 0 1px rgba(42,110,76,.16);
}
.thread-list-item:hover { background: var(--tan); }
.thread-list-item.archived {
  opacity: .7;
  background: rgba(214,200,184,.28);
}
.thread-list-group-title {
  list-style: none;
  margin: .85rem 0 .45rem;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--brown-light);
}
.thread-list-group-title:first-child {
  margin-top: 0;
}
.thread-list-meta {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.thread-list-name {
  font-weight: 700;
  color: var(--brown-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.thread-list-sub {
  font-size: .72rem;
  color: var(--brown-light);
}
.thread-list-badge {
  min-width: 1.3rem;
  height: 1.3rem;
  border-radius: 999px;
  background: var(--green-dark);
  color: #fff;
  font-size: .72rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 .28rem;
}
.thread-list-badge.mention-badge {
  background: #e03c3c;
}
.member-item {
  display: flex; align-items: center; gap: .6rem;
  padding: .48rem 1rem;
  cursor: pointer; border-radius: 8px;
  margin: 1px .4rem;
  transition: background .15s, transform .1s;
}
.member-item:hover { background: var(--tan); transform: translateX(2px); }
body.dark .member-item:hover { background: rgba(255,255,255,.06); }
.member-item-avatar { font-size: 1.3rem; flex-shrink: 0; }
.member-name-col { display: flex; flex-direction: column; flex: 1; min-width: 0; gap: .1rem; }
.member-item-name { font-size: .88rem; font-weight: 700; color: var(--text-dark); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.member-role-tag {
  font-size: .62rem; font-weight: 700;
  border: 1.5px solid currentColor;
  border-radius: 4px;
  padding: 0 .35em;
  line-height: 1.4;
  align-self: flex-start;
  max-width: 100%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  opacity: .9;
}
.member-dot { width: 8px; height: 8px; border-radius: 50%; background: #aaa; flex-shrink: 0; }
.member-dot.online { background: #5de05d; }
.member-role-badge { font-size: .85rem; flex-shrink: 0; }
.member-status-dot { font-size: .8rem; flex-shrink: 0; }
.member-action-btn {
  background: none; border: none; cursor: pointer; padding: .1rem .2rem;
  font-size: .85rem; border-radius: 4px; opacity: 0; transition: opacity .15s, background .15s;
  flex-shrink: 0;
}
.member-item:hover .member-action-btn { opacity: 1; }
.member-action-btn:hover { background: var(--tan-dark); }
.kick-btn:hover { background: var(--red-soft); }
.room-private-lock { font-size: .75rem; opacity: .7; flex-shrink: 0; margin-right: .1rem; }
.room-override-badge { font-size: .7rem; opacity: .55; flex-shrink: 0; margin-right: .1rem; }

/* ============================================================
   MODALS
   ============================================================ */

.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center; z-index: 10001;
}
.modal-card {
  background: var(--warm-white); border-radius: 18px;
  border: 1px solid var(--tan-dark);
  box-shadow: 0 24px 80px rgba(0,0,0,.3), 0 8px 32px rgba(0,0,0,.2);
  padding: 2rem; min-width: 300px; max-width: 400px; width: 90%;
}
body.dark .modal-card {
  background: var(--warm-white);
  border-color: rgba(255,255,255,.1);
  box-shadow: 0 24px 80px rgba(0,0,0,.8), 0 8px 40px rgba(0,0,0,.6);
}
.modal-card h2 { font-size: 1.2rem; font-weight: 800; color: var(--brown-dark); margin-bottom: 1rem; }

.group-dm-user-list {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  max-height: 260px;
  overflow-y: auto;
  margin: .9rem 0 1rem;
}
.group-dm-user-item {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .55rem .7rem;
  border: 1px solid var(--tan-dark);
  border-radius: 12px;
  background: rgba(255,255,255,.7);
  cursor: pointer;
}
.group-dm-user-item input { margin: 0; }
.group-dm-user-avatar { font-size: 1.15rem; }
.group-dm-user-name { font-weight: 700; color: var(--brown-dark); }

/* ---- Role Members Modal ---- */
.role-members-card {
  min-width: 340px;
  max-width: 440px;
  padding: 1.4rem 1.6rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .8rem;
  max-height: 80vh;
}
.role-members-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.role-members-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brown-dark);
}
.modal-close-btn {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--brown-light);
  cursor: pointer;
  padding: .2rem .4rem;
  border-radius: 6px;
  transition: background .12s, color .12s;
}
.modal-close-btn:hover { background: var(--tan); color: var(--brown-dark); }
.role-members-add { position: relative; }
.role-member-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--warm-white);
  border: 1.5px solid var(--tan-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 100;
  max-height: 180px;
  overflow-y: auto;
}
.role-member-suggestion-item {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .45rem .8rem;
  cursor: pointer;
  font-size: .88rem;
  font-weight: 600;
  transition: background .12s;
}
.role-member-suggestion-item:hover { background: var(--tan); }
.role-member-suggestion-empty {
  padding: .5rem .8rem;
  font-size: .82rem;
  color: var(--brown-light);
}
.role-members-list {
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: .3rem;
  max-height: 340px;
}
.role-members-empty {
  font-size: .83rem;
  color: var(--brown-light);
  text-align: center;
  padding: 1rem 0;
  margin: 0;
}
.role-member-row {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .4rem .6rem;
  border-radius: 8px;
  transition: background .12s;
}
.role-member-row:hover { background: var(--tan); }
.role-member-avatar { font-size: 1.3rem; flex-shrink: 0; }
.role-member-name { font-size: .9rem; font-weight: 700; color: var(--text-dark); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.role-member-sys-role { font-size: .85rem; flex-shrink: 0; }
.role-member-remove {
  background: none;
  border: none;
  color: var(--brown-light);
  font-size: .85rem;
  cursor: pointer;
  padding: .15rem .35rem;
  border-radius: 5px;
  opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
  flex-shrink: 0;
}
.role-member-row:hover .role-member-remove { opacity: 1; }
.role-member-remove:hover { background: var(--red-soft); color: #fff; }

/* ============================================================
   LEVELING SYSTEM — XP bars, level pills, pixel badges
   ============================================================ */

/* Level pill */
.profile-username-row {
  display: flex;
  align-items: center;
  gap: .5rem;
  flex-wrap: wrap;
}
.profile-level-pill {
  display: inline-flex;
  align-items: center;
  background: var(--green-dark);
  color: var(--text-light);
  font-size: .62rem;
  font-weight: 800;
  padding: .14em .55em;
  border-radius: 999px;
  letter-spacing: .02em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* XP bar */
.profile-xp-section {
  padding: 0 1.2rem .5rem;
}
.xp-bar-track {
  height: 6px;
  background: var(--tan);
  border-radius: 999px;
  overflow: hidden;
}
.xp-bar-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, var(--green-dark), var(--green-mid));
  border-radius: 999px;
  transition: width .7s cubic-bezier(.34,1.4,.64,1);
}
.xp-bar-label {
  font-size: .65rem;
  color: var(--brown-light);
  margin-top: .25rem;
  font-weight: 600;
}

/* Stats row */
.profile-stats-row {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: .4rem 1.2rem .6rem;
  gap: .3rem;
}
.profile-stat { display: flex; flex-direction: column; align-items: center; gap: .1rem; }
.profile-stat-val { font-size: .95rem; font-weight: 800; color: var(--brown-dark); }
.profile-stat-lbl { font-size: .63rem; font-weight: 700; color: var(--brown-light); text-transform: uppercase; letter-spacing: .04em; }
.profile-stat-sep { width: 1px; height: 28px; background: var(--tan-dark); opacity: .7; }

/* Badges section */
.profile-badges-section {
  padding: .4rem 1.2rem .8rem;
  border-top: 1px solid var(--tan);
}
.profile-badges-label {
  font-size: .68rem;
  font-weight: 800;
  color: var(--brown-light);
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: .5rem;
}
.profile-badges-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
}

/* Dynamic badge sizing — applied as a class on the grid */
.badges-sm  .badge-pixel { width: 34px; height: 34px; }
.badges-sm  .badge-icon  { font-size: 15px; }
.badges-sm  .badge-pixel::before { clip-path: polygon(6px 0%,calc(100% - 6px) 0%,100% 6px,100% calc(100% - 6px),calc(100% - 6px) 100%,6px 100%,0% calc(100% - 6px),0% 6px); }
.badges-sm  .badge-pixel::after  { inset: 4px; clip-path: polygon(4px 0%,calc(100% - 4px) 0%,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0% calc(100% - 4px),0% 4px); }

.badges-xs  .badge-pixel { width: 26px; height: 26px; }
.badges-xs  .badge-icon  { font-size: 12px; }
.badges-xs  .badge-pixel::before { clip-path: polygon(4px 0%,calc(100% - 4px) 0%,100% 4px,100% calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,0% calc(100% - 4px),0% 4px); }
.badges-xs  .badge-pixel::after  { inset: 3px; clip-path: polygon(3px 0%,calc(100% - 3px) 0%,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0% calc(100% - 3px),0% 3px); }

.badges-xxs .badge-pixel { width: 20px; height: 20px; }
.badges-xxs .badge-icon  { font-size: 10px; }
.badges-xxs .badge-pixel::before { clip-path: polygon(3px 0%,calc(100% - 3px) 0%,100% 3px,100% calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,0% calc(100% - 3px),0% 3px); }
.badges-xxs .badge-pixel::after  { inset: 2px; clip-path: polygon(2px 0%,calc(100% - 2px) 0%,100% 2px,100% calc(100% - 2px),calc(100% - 2px) 100%,2px 100%,0% calc(100% - 2px),0% 2px); }

/* Keep hover pop working at all sizes */
.badges-sm  .badge-pixel:hover { transform: scale(1.22) translateY(-2px) !important; }
.badges-xs  .badge-pixel:hover { transform: scale(1.28) translateY(-2px) !important; }
.badges-xxs .badge-pixel:hover { transform: scale(1.35) translateY(-1px) !important; }

/* ---- Pixel Art Badge Frames ---- */
.badge-pixel {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: help;
  transition: transform .15s;
}
.badge-pixel:hover { transform: scale(1.18) translateY(-3px) !important; }

.badge-icon { font-size: 20px; line-height: 1; position: relative; z-index: 1; }

/* Octagonal pixel-art corners via clip-path on the ::before background */
.badge-pixel::before {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: polygon(8px 0%,calc(100% - 8px) 0%,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0% calc(100% - 8px),0% 8px);
}
/* Inner highlight (top-left bevel) */
.badge-pixel::after {
  content: '';
  position: absolute;
  inset: 5px;
  clip-path: polygon(5px 0%,calc(100% - 5px) 0%,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0% calc(100% - 5px),0% 5px);
  background: rgba(255,255,255,.15);
  pointer-events: none;
  z-index: 0;
}

/* Common — silver */
.badge-common::before {
  background: linear-gradient(145deg, #d0ccc4 0%, #a8a49c 55%, #8c8880 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.35), inset -2px -2px 0 rgba(0,0,0,.25);
}
.badge-common { animation: badge-bob 3.2s ease-in-out infinite; }

/* Uncommon — emerald green */
.badge-uncommon::before {
  background: linear-gradient(145deg, #80e0a0 0%, #38b868 55%, #1a8848 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.38), inset -2px -2px 0 rgba(0,0,0,.28);
}
.badge-uncommon { animation: badge-glow-green 2.8s ease-in-out infinite; }

/* Rare — sapphire blue */
.badge-rare::before {
  background: linear-gradient(145deg, #90b8f0 0%, #4878d0 55%, #2858b8 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.3);
}
.badge-rare { animation: badge-glow-blue 2.4s ease-in-out infinite; }

/* Epic — amethyst purple */
.badge-epic::before {
  background: linear-gradient(145deg, #c898f8 0%, #8848e0 55%, #6028b8 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.4), inset -2px -2px 0 rgba(0,0,0,.3);
}
.badge-epic { animation: badge-glow-purple 2s ease-in-out infinite; }

/* Legendary — radiant gold */
.badge-legendary::before {
  background: linear-gradient(145deg, #ffe878 0%, #f0a820 50%, #d07800 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.5), inset -2px -2px 0 rgba(0,0,0,.25);
  animation: badge-gold-shimmer 3s linear infinite;
}
.badge-legendary { animation: badge-glow-gold 2s ease-in-out infinite; }

/* -- Badge keyframe animations -- */
@keyframes badge-bob {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-4px); }
}
@keyframes badge-glow-green {
  0%,100% { filter: drop-shadow(0 0 3px rgba(40,180,90,.55)); }
  50%      { filter: drop-shadow(0 0 10px rgba(40,200,90,.92)); }
}
@keyframes badge-glow-blue {
  0%,100% { filter: drop-shadow(0 0 3px rgba(60,120,255,.55)); }
  50%      { filter: drop-shadow(0 0 10px rgba(60,120,255,.95)); }
}
@keyframes badge-glow-purple {
  0%,100% { filter: drop-shadow(0 0 3px rgba(140,60,255,.55)); }
  50%      { filter: drop-shadow(0 0 12px rgba(140,60,255,.98)); }
}
@keyframes badge-glow-gold {
  0%,100% { filter: drop-shadow(0 0 4px rgba(240,160,20,.7)); }
  50%      { filter: drop-shadow(0 0 14px rgba(255,210,0,1)); }
}
@keyframes badge-gold-shimmer {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ---- Profile card ---- */
/* ============================================================
   Profile Card — redesigned
   ============================================================ */
.modal-card.profile-card {
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
  min-width: 520px;
  max-width: 560px;
  max-height: 90vh;
  text-align: left;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  position: relative;
}

/* ── Banner ── */
.profile-banner {
  height: 90px;
  background: var(--green-pale);
  flex-shrink: 0;
  position: relative;
  cursor: default;
}
.profile-banner img.profile-banner-img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.profile-banner-edit-btn {
  position: absolute; top: .5rem; right: .6rem;
  background: rgba(30,20,10,.6); color: white;
  font-size: .72rem; font-weight: 700;
  padding: .25rem .55rem; border-radius: 20px;
  cursor: pointer; opacity: 1;
  pointer-events: auto;
  z-index: 10;
  user-select: none;
  transition: background .12s;
}
.profile-banner-edit-btn:hover { background: rgba(30,20,10,.82); }

/* ── Identity row: avatar (overlapping banner) + name side by side ── */
.profile-identity-row {
  display: flex;
  align-items: flex-end;
  gap: .8rem;
  padding: 0 1.1rem .45rem;
  margin-top: -2rem;
  position: relative;
  z-index: 2;
}
.profile-avatar {
  font-size: 3rem;
  width: 4.2rem; height: 4.2rem;
  position: relative;
  display: flex; align-items: center; justify-content: center;
  background: var(--warm-white);
  border: 3px solid var(--warm-white);
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(0,0,0,.14);
}
/* Inner clip keeps the avatar art circular */
#profile-avatar-img {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; overflow: hidden;
}
.profile-avatar .avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.profile-avatar-edit {
  position: absolute; inset: 0;
  background: rgba(0,0,0,.45);
  color: white; font-size: 1.3rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  cursor: pointer; opacity: 0;
  transition: opacity .18s;
  z-index: 3;
}
.profile-avatar:hover .profile-avatar-edit { opacity: 1; }

.profile-name-block {
  display: flex; flex-direction: column; gap: .18rem;
  padding-bottom: .25rem;
  min-width: 0; flex: 1;
}
.profile-username { font-size: 1.22rem; font-weight: 800; color: var(--brown-dark); line-height: 1.1; }

/* ── Body row: bio/meta left, actions right ── */
.profile-body-row {
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  padding: 0 1.1rem .5rem;
}
#profile-actions {
  flex-shrink: 0;
}

/* ── Info section ── */
.profile-info {
  flex: 1;
  min-width: 0;
}
.profile-status-row { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin-top: .1rem; }
.profile-status   { font-size: .82rem; font-weight: 700; }
.profile-status.online  { color: #3a9e3a; }
.profile-status.away    { color: #b8860b; }
.profile-status.dnd     { color: #c0392b; }
.profile-status.offline { color: #aaa; }
.profile-custom-status { font-size: .8rem; color: var(--brown-mid); font-style: italic; }
.profile-bio {
  font-size: .88rem; color: var(--brown-dark);
  margin-top: .45rem; padding: .5rem .75rem;
  background: var(--tan); border-radius: var(--radius-sm);
  border-left: 3px solid var(--green-light);
  line-height: 1.55; white-space: pre-wrap;
}
.profile-meta { font-size: .73rem; color: var(--brown-light); margin-top: .4rem; }

/* ── Actions ── */
.profile-action-row {
  display: flex; gap: .4rem; justify-content: flex-end; flex-wrap: wrap;
}
.profile-action-btn {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: .2rem; min-width: 62px;
  padding: .6rem .7rem;
  background: var(--tan);
  border: 1.5px solid var(--tan-dark);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: 'Nunito', sans-serif;
  transition: background .15s, transform .12s, box-shadow .15s;
  flex: 1; max-width: 85px;
}
.profile-action-btn:hover {
  background: var(--green-dark); border-color: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px color-mix(in srgb, var(--green-dark) 35%, transparent);
}
.profile-action-btn:hover .profile-action-label { color: white; }
.profile-action-btn:active { transform: scale(.96) translateY(0); }
.profile-action-btn:disabled { opacity: .5; cursor: default; transform: none; box-shadow: none; }
.profile-action-btn:disabled:hover { background: var(--tan); border-color: var(--tan-dark); }
.profile-action-icon { font-size: 1.35rem; line-height: 1; }
.profile-action-label { font-size: .69rem; font-weight: 700; color: var(--brown-mid); white-space: nowrap; }
.profile-action-btn.danger-btn { border-color: rgba(255,107,107,.3); }
.profile-action-btn.danger-btn:hover { background: var(--red-soft); border-color: var(--red-soft); box-shadow: 0 4px 12px rgba(255,107,107,.3); }

/* ── Self-edit section ── */
#profile-self-edit {
  padding: .6rem 1.2rem 1.3rem;
  border-top: 1.5px solid var(--tan-dark);
  margin-top: .4rem;
}
.profile-edit-label {
  display: block; font-size: .8rem; font-weight: 700;
  color: var(--brown-mid); margin-bottom: .3rem;
}

/* ── Banner color swatches ── */
.profile-banner-picker { display: flex; flex-wrap: wrap; gap: .35rem; }
.banner-swatch {
  width: 22px; height: 22px; border-radius: 50%;
  border: 2px solid transparent; cursor: pointer;
  transition: transform .12s, border-color .12s; flex-shrink: 0;
}
.banner-swatch:hover { transform: scale(1.2); }
.banner-swatch.selected { border-color: var(--brown-dark); transform: scale(1.15); }
.banner-swatch-none {
  background: var(--warm-white); color: var(--brown-mid);
  font-size: .75rem; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--tan-dark);
}

/* ── Profile Decorations ── */
/* Frame decoration — rendered around the avatar (outside the circle) */
.profile-decoration-frame {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
  image-rendering: pixelated;
}
/* Full-card decoration overlay — sits on top of the whole profile card */
.profile-decoration-banner {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  image-rendering: pixelated;
}

/* ════════════════════════════════════════════════════════
   Shared premium effect keyframes
   ════════════════════════════════════════════════════════ */
@keyframes fx-aurora {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}
@keyframes fx-orb-drift {
  0%,100% { transform: translate(0, 0) scale(1); opacity: .25; }
  33%      { transform: translate(22px, -10px) scale(1.12); opacity: .35; }
  66%      { transform: translate(-12px, 6px) scale(.92); opacity: .18; }
}
@keyframes fx-shimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(220%); }
}

/* Shared pseudo-element base for banner effects */
[class*="decoration-"] .profile-decoration-banner::before,
[class*="decoration-"] .profile-decoration-banner::after {
  content: '';
  position: absolute;
  pointer-events: none;
}

/* ── Decoration: acorn — warm amber aurora ── */
.decoration-acorn .profile-decoration-frame {
  box-shadow:
    0 0 0 3px #C48030,
    0 0 0 5px #8B5E3C,
    0 0 0 9px rgba(196,128,48,.25);
  animation: fx-ring-acorn 3s ease-in-out infinite;
}
@keyframes fx-ring-acorn {
  0%,100% { box-shadow: 0 0 0 3px #C48030, 0 0 0 5px #8B5E3C, 0 0 0 9px rgba(196,128,48,.25); }
  50%      { box-shadow: 0 0 0 3px #E8A040, 0 0 0 6px #C48030, 0 0 0 12px rgba(232,160,64,.4); }
}
.decoration-acorn .profile-decoration-banner {
  background: linear-gradient(120deg,
    #3D200A 0%, #8B5E3C 20%, #C48030 40%, #E8A040 55%, #C48030 70%, #8B5E3C 85%, #3D200A 100%);
  background-size: 200% 100%;
  opacity: .07;
  animation: fx-aurora 5s linear infinite;
}
.decoration-acorn .profile-decoration-banner::before {
  top: -30px; left: 20%;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(232,160,64,.10) 0%, transparent 70%);
  filter: blur(22px);
  animation: fx-orb-drift 6s ease-in-out infinite;
}
.decoration-acorn .profile-decoration-banner::after {
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,220,160,.04) 50%, transparent 100%);
  animation: fx-shimmer 3s linear infinite;
}

/* ── Decoration: flowers — rose petal aurora ── */
.decoration-flowers .profile-decoration-frame {
  box-shadow:
    0 0 0 3px #F4A7C0,
    0 0 0 6px rgba(244,167,192,.5);
  animation: fx-ring-flowers 3s ease-in-out infinite;
}
@keyframes fx-ring-flowers {
  0%,100% { box-shadow: 0 0 0 3px #F4A7C0, 0 0 0 6px rgba(244,167,192,.45); }
  50%      { box-shadow: 0 0 0 4px #E87DAA, 0 0 0 9px rgba(232,125,170,.6), 0 0 18px rgba(244,167,192,.3); }
}
.decoration-flowers .profile-decoration-banner {
  background: linear-gradient(120deg,
    #6B1A3A 0%, #C0527A 20%, #F4A7C0 40%, #FDE8F0 55%, #F4A7C0 70%, #C0527A 85%, #6B1A3A 100%);
  background-size: 200% 100%;
  opacity: .07;
  animation: fx-aurora 4.5s linear infinite;
}
.decoration-flowers .profile-decoration-banner::before {
  top: -25px; right: 25%;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(244,167,192,.10) 0%, transparent 70%);
  filter: blur(20px);
  animation: fx-orb-drift 5.5s ease-in-out infinite reverse;
}
.decoration-flowers .profile-decoration-banner::after {
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,220,235,.04) 50%, transparent 100%);
  animation: fx-shimmer 2.8s linear infinite;
}

/* ── Decoration: stars — gold galaxy aurora ── */
.decoration-stars .profile-decoration-frame {
  box-shadow:
    0 0 0 3px #FFD700,
    0 0 0 7px rgba(255,215,0,.4),
    0 0 16px rgba(255,215,0,.25);
  animation: fx-ring-stars 2s ease-in-out infinite;
}
@keyframes fx-ring-stars {
  0%,100% { box-shadow: 0 0 0 3px #FFD700, 0 0 0 7px rgba(255,215,0,.4), 0 0 16px rgba(255,215,0,.25); }
  50%      { box-shadow: 0 0 0 3px #FFF0A0, 0 0 0 9px rgba(255,220,80,.6), 0 0 28px rgba(255,220,80,.45); }
}
.decoration-stars .profile-decoration-banner {
  background: linear-gradient(120deg,
    #0A0A2E 0%, #1A1A5E 18%, #FFD700 38%, #FFF8C0 52%, #FFD700 66%, #1A1A5E 82%, #0A0A2E 100%);
  background-size: 200% 100%;
  opacity: .07;
  animation: fx-aurora 4s linear infinite;
}
.decoration-stars .profile-decoration-banner::before {
  top: -20px; left: 45%;
  width: 180px; height: 180px;
  background: radial-gradient(circle, rgba(255,230,80,.09) 0%, rgba(255,160,0,.04) 40%, transparent 70%);
  filter: blur(24px);
  animation: fx-orb-drift 5s ease-in-out infinite;
}
.decoration-stars .profile-decoration-banner::after {
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,255,200,.05) 50%, transparent 100%);
  animation: fx-shimmer 2s linear infinite;
}

/* ── Decoration: mushroom — crimson enchanted aurora ── */
.decoration-mushroom .profile-decoration-frame {
  box-shadow:
    0 0 0 3px #E84040,
    0 0 0 5px #FFF0F0,
    0 0 0 9px rgba(232,64,64,.3);
  animation: fx-ring-mushroom 2.5s ease-in-out infinite;
}
@keyframes fx-ring-mushroom {
  0%,100% { box-shadow: 0 0 0 3px #E84040, 0 0 0 5px #FFF0F0, 0 0 0 9px rgba(232,64,64,.3); }
  50%      { box-shadow: 0 0 0 4px #FF6060, 0 0 0 7px #FFE0E0, 0 0 0 13px rgba(255,96,96,.45); }
}
.decoration-mushroom .profile-decoration-banner {
  background: linear-gradient(120deg,
    #2A0010 0%, #8B1A1A 18%, #E84040 35%, #FF8080 50%, #E84040 65%, #8B1A1A 82%, #2A0010 100%);
  background-size: 200% 100%;
  opacity: .07;
  animation: fx-aurora 4.2s linear infinite;
}
.decoration-mushroom .profile-decoration-banner::before {
  top: -25px; left: 30%;
  width: 150px; height: 150px;
  background: radial-gradient(circle, rgba(255,80,80,.09) 0%, rgba(180,20,20,.05) 45%, transparent 70%);
  filter: blur(20px);
  animation: fx-orb-drift 5.8s ease-in-out infinite;
}
.decoration-mushroom .profile-decoration-banner::after {
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(255,200,200,.04) 50%, transparent 100%);
  animation: fx-shimmer 3.2s linear infinite;
}

/* ── Decoration: clouds — arctic sky aurora ── */
.decoration-clouds .profile-decoration-frame {
  box-shadow:
    0 0 0 3px #A8D8F0,
    0 0 0 6px rgba(168,216,240,.5),
    0 0 14px rgba(168,216,240,.2);
  animation: fx-ring-clouds 4s ease-in-out infinite;
}
@keyframes fx-ring-clouds {
  0%,100% { box-shadow: 0 0 0 3px #A8D8F0, 0 0 0 6px rgba(168,216,240,.5); }
  50%      { box-shadow: 0 0 0 4px #C8ECFF, 0 0 0 9px rgba(200,236,255,.65), 0 0 20px rgba(168,216,240,.3); }
}
.decoration-clouds .profile-decoration-banner {
  background: linear-gradient(120deg,
    #0A1A3E 0%, #1A4A8A 18%, #A8D8F0 38%, #E8F8FF 52%, #A8D8F0 66%, #1A4A8A 82%, #0A1A3E 100%);
  background-size: 200% 100%;
  opacity: .07;
  animation: fx-aurora 6s linear infinite;
}
.decoration-clouds .profile-decoration-banner::before {
  top: -20px; left: 55%;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(200,240,255,.10) 0%, rgba(100,180,255,.04) 45%, transparent 70%);
  filter: blur(22px);
  animation: fx-orb-drift 7s ease-in-out infinite reverse;
}
.decoration-clouds .profile-decoration-banner::after {
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(220,245,255,.05) 50%, transparent 100%);
  animation: fx-shimmer 4s linear infinite;
}

/* ── Decoration: leaves — emerald forest aurora ── */
.decoration-leaves .profile-decoration-frame {
  box-shadow:
    0 0 0 3px #5AA05A,
    0 0 0 6px rgba(90,160,90,.4);
  animation: fx-ring-leaves 3s ease-in-out infinite;
}
@keyframes fx-ring-leaves {
  0%,100% { box-shadow: 0 0 0 3px #5AA05A, 0 0 0 6px rgba(90,160,90,.4); }
  33%      { box-shadow: 0 0 0 3px #70C070, 0 0 0 8px rgba(112,192,112,.55); }
  66%      { box-shadow: 0 0 0 3px #4A8A4A, 0 0 0 5px rgba(74,138,74,.35), 0 0 16px rgba(90,160,90,.2); }
}
.decoration-leaves .profile-decoration-banner {
  background: linear-gradient(120deg,
    #0A2010 0%, #1E5E1E 18%, #5AA05A 35%, #A0D8A0 50%, #5AA05A 65%, #1E5E1E 82%, #0A2010 100%);
  background-size: 200% 100%;
  opacity: .07;
  animation: fx-aurora 5.5s linear infinite;
}
.decoration-leaves .profile-decoration-banner::before {
  top: -25px; left: 35%;
  width: 155px; height: 155px;
  background: radial-gradient(circle, rgba(100,200,100,.09) 0%, rgba(30,100,30,.05) 45%, transparent 70%);
  filter: blur(20px);
  animation: fx-orb-drift 6.5s ease-in-out infinite;
}
.decoration-leaves .profile-decoration-banner::after {
  inset: 0;
  background: linear-gradient(90deg,
    transparent 0%, rgba(180,240,180,.04) 50%, transparent 100%);
  animation: fx-shimmer 3.5s linear infinite;
}

/* ── Decoration picker ── */
.profile-decoration-picker {
  display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .2rem;
}
.decoration-pick-btn {
  display: flex; flex-direction: column; align-items: center; gap: .2rem;
  padding: .4rem .5rem; border-radius: var(--radius-sm);
  border: 2px solid var(--tan-dark); background: var(--tan);
  cursor: pointer; font-family: 'Nunito', sans-serif;
  transition: border-color .12s, background .12s, transform .1s;
  font-size: .68rem; font-weight: 700; color: var(--brown-mid);
  min-width: 52px; text-align: center;
}
.decoration-pick-btn:hover { background: var(--green-pale); border-color: var(--green-mid); transform: translateY(-1px); }
.decoration-pick-btn.selected { border-color: var(--green-dark); background: var(--green-pale); color: var(--green-dark); }
.decoration-pick-icon { font-size: 1.4rem; line-height: 1; }

.emoji-picker-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .9rem; }
.emoji-opt {
  font-size: 1.4rem; width: 2.2rem; height: 2.2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 2px solid transparent;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.emoji-opt:hover  { background: var(--tan); }
.emoji-opt.chosen { border-color: var(--green-dark); background: var(--green-pale); }

.user-select-list { list-style: none; display: flex; flex-direction: column; gap: .4rem; max-height: 260px; overflow-y: auto; }
.user-select-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .55rem .8rem; border-radius: var(--radius-sm);
  cursor: pointer; font-weight: 600; transition: background .15s;
}
.user-select-item:hover { background: var(--tan); }
.user-av { font-size: 1.4rem; }
.user-status-dot { width: 9px; height: 9px; border-radius: 50%; background: #aaa; margin-left: auto; flex-shrink: 0; }
.user-status-dot.online { background: #5de05d; }

/* ============================================================
   CONTEXT MENU
   ============================================================ */

.ctx-menu {
  position: fixed; background: var(--warm-white);
  border: 1.5px solid var(--tan-dark); border-radius: var(--radius-md);
  box-shadow: 0 8px 32px rgba(61,43,31,0.18), 0 2px 8px rgba(61,43,31,0.1);
  z-index: 300; min-width: 160px; overflow: hidden;
  animation: swingDrop .18s cubic-bezier(.34,1.45,.64,1) both;
}
.ctx-menu button {
  display: flex; align-items: center; gap: .4rem;
  width: 100%; padding: .55rem 1rem;
  background: none; border: none; text-align: left;
  font-family: 'Nunito', sans-serif; font-size: .92rem; font-weight: 600;
  color: var(--brown-dark); cursor: pointer;
  transition: background .12s, color .12s, transform .12s, padding-left .12s;
}
.ctx-menu button:hover { background: var(--tan); transform: translateX(4px); padding-left: 1.2rem; }
#ctx-delete { color: var(--red-soft); }
#ctx-delete:hover { background: #ffeaea; color: #c0392b; transform: translateX(4px); }

/* ============================================================
   REACTION PICKER
   ============================================================ */

.reaction-picker {
  position: fixed; background: var(--warm-white);
  border: 2px solid var(--tan-dark); border-radius: var(--radius-md);
  box-shadow: var(--shadow-md); z-index: 300;
  display: flex; flex-wrap: wrap; gap: .3rem; padding: .6rem; max-width: 220px;
}
.react-pick-btn {
  font-size: 1.3rem; width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm); cursor: pointer;
  border: 2px solid transparent; transition: background .15s;
}
.react-pick-btn:hover { background: var(--tan); }

/* ============================================================
   EMOJI PICKER
   ============================================================ */

.emoji-open-btn {
  font-size: 1.3rem; cursor: pointer; background: none; border: none;
  width: 36px; height: 36px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  transition: background .15s; flex-shrink: 0; line-height: 1;
}
.emoji-open-btn:hover { background: var(--tan); }

.emoji-picker-panel {
  position: fixed;
  background: var(--warm-white);
  border: 2px solid var(--tan-dark);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  z-index: 400;
  width: 288px;
  flex-direction: column;
  overflow: hidden;
}

.ep-tabs {
  display: flex;
  gap: .15rem;
  padding: .45rem .5rem;
  border-bottom: 2px solid var(--tan-dark);
  background: var(--tan);
  overflow-x: auto;
}
.ep-tab {
  font-size: 1.15rem;
  padding: .25rem .35rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  background: none;
  transition: background .15s;
  flex-shrink: 0;
  line-height: 1;
}
.ep-tab:hover  { background: var(--tan-dark); }
.ep-tab.active { background: var(--green-pale); border-color: var(--green-mid); }

.ep-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .1rem;
  padding: .5rem;
  overflow-y: auto;
  max-height: 210px;
}
.ep-btn {
  font-size: 1.25rem;
  width: 2rem; height: 2rem;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  cursor: pointer;
  border: 2px solid transparent;
  background: none;
  transition: background .15s;
}
.ep-btn:hover { background: var(--tan); }

/* ============================================================
   @ MENTION DROPDOWN
   ============================================================ */

.mention-dropdown {
  position: absolute; bottom: 100%; left: 2.5rem;
  background: var(--warm-white); border: 2px solid var(--tan-dark);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md);
  z-index: 50; min-width: 160px; max-height: 180px; overflow-y: auto;
}
.mention-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .45rem .8rem; cursor: pointer;
  transition: background .15s; font-weight: 700; font-size: .9rem;
}
.mention-item:hover, .mention-item.selected { background: var(--tan); }
.mention-item .m-av { font-size: 1.2rem; }

/* ============================================================
   LIGHTBOX
   ============================================================ */

.lightbox {
  position: fixed; inset: 0; z-index: 400;
  background: rgba(0,0,0,.88);
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: zoom-out;
}
.lightbox-img {
  max-width: 90vw; max-height: 82vh;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  cursor: default;
}
.lightbox-video {
  max-width: 90vw; max-height: 82vh;
  border-radius: var(--radius-sm);
  box-shadow: 0 8px 40px rgba(0,0,0,.6);
  cursor: default;
  background: black;
}
.lightbox-close {
  position: absolute; top: 50%; left: 1rem; transform: translateY(-50%);
  background: rgba(0,0,0,.5); border: none;
  color: white; font-size: 1.5rem; cursor: pointer;
  border-radius: 50%; width: 3rem; height: 3rem;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,.3); }
.lightbox-caption {
  color: rgba(255,255,255,.6);
  font-size: .88rem; font-weight: 600;
  margin-top: .8rem; max-width: 80vw;
  text-align: center; text-overflow: ellipsis;
  overflow: hidden; white-space: nowrap;
}

/* (msg-video defined in Attachments section above) */

/* ============================================================
   FRIENDS
   ============================================================ */

.friend-req-badge {
  background: #e74c3c; color: white;
  font-size: .68rem; font-weight: 800;
  border-radius: 999px; padding: 1px 6px;
  line-height: 1.4;
}

/* Friend list items reuse .room-item styles but add action buttons on hover */
.friend-item {
  display: flex; align-items: center; gap: .5rem;
  padding: .42rem .8rem .42rem 1rem;
  cursor: pointer;
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  margin-right: .5rem;
  color: rgba(255,255,255,.72);
  font-weight: 600; font-size: .9rem;
  transition: background .15s, color .15s, transform .1s;
  white-space: nowrap; overflow: hidden;
  position: relative;
}
.friend-item:hover { background: rgba(255,255,255,.14); color: white; transform: translateX(2px); }
.friend-item-av   { font-size: 1rem; flex-shrink: 0; display: flex; align-items: center; }
.friend-item-av .avatar-img { width: 1.5rem; height: 1.5rem; }
.friend-item-name { flex: 1; overflow: hidden; text-overflow: ellipsis; }
.friend-status-dot { font-size: .82rem; flex-shrink: 0; margin-left: auto; }
.friend-item-dm   {
  display: none; font-size: .78rem;
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.25); border-radius: 999px;
  color: white; cursor: pointer; padding: 2px 8px;
  font-family: 'Nunito', sans-serif; font-weight: 700;
  flex-shrink: 0; transition: background .12s;
}
.friend-item:hover .friend-item-dm { display: block; }
.friend-item-dm:hover { background: rgba(255,255,255,.3); }

/* Friend requests list in modal */
.friend-requests-list { list-style: none; display: flex; flex-direction: column; gap: .6rem; max-height: 320px; overflow-y: auto; }
.user-search-result {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .55rem .7rem;
  border-bottom: 1px solid rgba(120,80,40,.12);
}
.user-search-result:last-child { border-bottom: none; }
.user-search-result-main {
  display: flex;
  align-items: center;
  gap: .55rem;
  width: 100%;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: var(--text-dark);
  text-align: left;
}
.user-search-result-main:hover .user-search-result-name { color: var(--green-dark); }
.user-search-result-avatar { font-size: 1.1rem; display: inline-flex; align-items: center; }
.user-search-result-name { flex: 1; min-width: 0; font-weight: 700; }
.user-search-result-status { flex-shrink: 0; }
.user-search-result-actions {
  display: flex;
  gap: .4rem;
  flex-wrap: wrap;
}
.user-search-action-btn {
  font-size: .76rem;
  padding: .28rem .55rem;
}
.user-search-action-btn.danger {
  background: #f6ddd9;
  color: #8a2e23;
  border-color: #e7b0a8;
}
body.dark .user-search-result { border-bottom-color: rgba(255,255,255,.08); }
body.dark .user-search-result-main { color: var(--text-light); }
body.dark .user-search-action-btn.danger {
  background: rgba(163,67,52,.25);
  color: #ffd7d2;
  border-color: rgba(208,101,84,.4);
}
.friend-req-item {
  display: flex; align-items: center; gap: .7rem;
  padding: .5rem .3rem;
  border-bottom: 1px solid var(--tan-dark);
}
.friend-req-item:last-child { border-bottom: none; }
.freq-av   { font-size: 1.6rem; flex-shrink: 0; display: flex; align-items: center; }
.freq-av .avatar-img { width: 1.8rem; height: 1.8rem; }
.freq-name { flex: 1; font-weight: 700; color: var(--text-dark); }
.freq-btns { display: flex; gap: .4rem; flex-shrink: 0; }
.btn-accept  { padding: .3rem .7rem; background: var(--green-dark); color: white; border: none; border-radius: var(--radius-sm); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .85rem; cursor: pointer; }
.btn-decline { padding: .3rem .7rem; background: var(--tan-dark); color: var(--brown-dark); border: none; border-radius: var(--radius-sm); font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .85rem; cursor: pointer; }
.btn-accept:hover  { background: var(--green-mid); }
.btn-decline:hover { background: #ffd0d0; color: #c00; }

.modal-sub { font-size: .88rem; color: var(--brown-light); margin-bottom: .8rem; }

/* ============================================================
   CUTE ANIMATIONS & EFFECTS
   ============================================================ */

/* ---- Keyframes ---- */
/* ============================================================
   EXTRA CUTESY ANIMATIONS 🌿
   ============================================================ */

@keyframes jiggle {
  0%,100% { transform: rotate(0deg) scale(1); }
  20%     { transform: rotate(-9deg) scale(1.15); }
  45%     { transform: rotate(8deg)  scale(1.12); }
  65%     { transform: rotate(-5deg) scale(1.06); }
  82%     { transform: rotate(4deg)  scale(1.03); }
}
@keyframes floatGently {
  0%,100% { transform: translateY(0); }
  50%     { transform: translateY(-4px); }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideFromRight {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes mentionRing {
  0%,100% { box-shadow: 0 0 0 0 rgba(224,60,60,.5); }
  50%     { box-shadow: 0 0 0 5px rgba(224,60,60,0); }
}
@keyframes waveDot {
  0%,80%,100% { transform: translateY(0);    opacity: .45; }
  40%         { transform: translateY(-5px); opacity: 1; }
}
@keyframes swingDrop {
  0%   { transform: scale(.85) translateY(-6px) rotate(-3deg); opacity: 0; }
  60%  { transform: scale(1.04) translateY(2px) rotate(1deg);  opacity: 1; }
  100% { transform: scale(1)   translateY(0)   rotate(0deg);   opacity: 1; }
}
@keyframes gentleSpin {
  0%,100% { transform: rotate(-4deg); }
  50%     { transform: rotate(4deg); }
}

/* ---- Server icons jiggle on hover (way more fun than a plain scale) ---- */
.server-icon-btn:hover  { transform: none; animation: jiggle .5s ease; }
.server-icon-btn:active { transform: scale(.88); animation: none; }

/* ---- Rail notif buttons spring in when they appear ---- */
.rail-notif-btn { animation: bounceIn .38s cubic-bezier(.34,1.56,.64,1) both; }
.rail-notif-btn:hover { animation: jiggle .45s ease; }

/* ---- Self avatar footer gently floats ---- */
.self-avatar-wrap { animation: floatGently 3.4s ease-in-out infinite; }
.self-avatar-wrap.speaking { animation: portrait-glow .7s ease-in-out infinite; }

/* ---- Context menus have a spring drop-in ---- */
.context-menu { animation: swingDrop .22s cubic-bezier(.34,1.45,.64,1) both; }
.context-menu-item { transition: background .12s, transform .12s, padding-left .12s; }
.context-menu-item:hover { transform: translateX(4px); padding-left: 1rem; }
.context-menu-item.delete:hover { transform: translateX(4px); }

/* ---- Room / DM items slide in from left; nudge on hover ---- */
.room-item  { transition: background .15s, transform .12s, color .15s; }

/* ---- Friend items nudge on hover ---- */
.friend-item { transition: background .15s, transform .12s, color .15s; }

/* ---- Member items nudge on hover ---- */

/* ---- Voice channel participants pop in ---- */
.voice-ch-participant { animation: popIn .25s cubic-bezier(.34,1.45,.64,1) both; transition: background .12s; }

/* ---- Emoji picker buttons bounce on hover ---- */
.ep-btn { transition: background .12s, transform .12s; }
.ep-btn:hover { background: var(--tan); transform: scale(1.4) rotate(-5deg); }
.ep-tab { transition: background .15s, transform .12s; }
.ep-tab:hover { transform: scale(1.15); }
.ep-tab.active { animation: heartPop .25s ease; }

/* ---- Reaction chips bounce on hover ---- */
.reaction-chip { transition: transform .12s, background .12s; }
.reaction-chip:hover { transform: scale(1.2) rotate(-4deg); }

/* ---- Mention badge keeps pulsing to stay visible ---- */
.unread-badge.mention-badge { animation: popIn .2s cubic-bezier(.34,1.56,.64,1) both, mentionRing 2s ease-in-out infinite; }

/* ---- Sent messages slide in from the right ---- */

/* ---- App logo in sidebar header gently sways ---- */
.app-logo { animation: gentleSpin 5s ease-in-out infinite; }

/* ---- Sidebar header icon buttons have a springy click ---- */
.icon-btn:active { transform: scale(.8) rotate(15deg); }

/* ---- Send button has a satisfying squish ---- */
.send-btn:active { transform: scale(.88) rotate(-6deg); box-shadow: none; }

/* ---- Typing indicator dots wave ---- */
.typing-dot {
  display: inline-block;
  animation: waveDot 1.2s ease-in-out infinite;
  margin: 0 1px;
}
.typing-dot:nth-child(2) { animation-delay: .2s; }
.typing-dot:nth-child(3) { animation-delay: .4s; }

/* ---- Settings rows have a hover slide ---- */
.user-setting-row { transition: background .15s, transform .12s; border-radius: var(--radius-sm); padding-left: .3rem; }
.user-setting-row:hover { background: rgba(0,0,0,.04); transform: translateX(3px); }

@keyframes floatBob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes floatBobSlow {
  0%, 100% { transform: translateY(0) rotate(-2deg); }
  50%       { transform: translateY(-10px) rotate(2deg); }
}
@keyframes bounceIn {
  0%   { opacity: 0; transform: scale(.78) translateY(16px); }
  55%  { transform: scale(1.05) translateY(-3px); }
  80%  { transform: scale(.98) translateY(1px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes slideUpFade {
  from { opacity: 0; transform: translateY(12px) scale(.97); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
@keyframes popIn {
  0%   { transform: scale(0.5); opacity: 0; }
  65%  { transform: scale(1.18); }
  100% { transform: scale(1);   opacity: 1; }
}
@keyframes wiggle {
  0%,100% { transform: rotate(0deg); }
  20%     { transform: rotate(-9deg); }
  50%     { transform: rotate(8deg); }
  80%     { transform: rotate(-5deg); }
}
@keyframes roomSlideIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes pulseDot {
  0%,100% { box-shadow: 0 0 0 0   rgba(93,224,93,.6); }
  60%     { box-shadow: 0 0 0 5px rgba(93,224,93,0); }
}
@keyframes kittyBounce {
  0%,100% { transform: translateY(0)  rotate(0deg); }
  30%     { transform: translateY(-8px) rotate(-6deg); }
  70%     { transform: translateY(-4px) rotate(5deg); }
}
@keyframes fadePulse {
  0%,100% { opacity: .4; }
  50%     { opacity: 1; }
}
@keyframes spinLeaf {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes backdropFade {
  from { background: rgba(61,43,31,0); }
  to   { background: rgba(61,43,31,.4); }
}
@keyframes shimmerSlide {
  0%   { background-position: -200% center; }
  100% { background-position:  200% center; }
}
@keyframes heartPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.35); }
  100% { transform: scale(1); }
}

/* ---- Login ---- */
.login-card { animation: bounceIn .55s cubic-bezier(.34,1.56,.64,1) both; }
.login-logo  { display: block; animation: floatBob 3.2s ease-in-out infinite; }

.deco-tl { animation: floatBobSlow 4.1s ease-in-out infinite; }
.deco-tr { animation: floatBobSlow 3.8s ease-in-out infinite .8s; }
.deco-bl { animation: floatBobSlow 4.4s ease-in-out infinite 1.3s; }
.deco-br { animation: floatBobSlow 3.6s ease-in-out infinite .4s; }

/* ---- Modals ---- */
.modal-overlay { animation: backdropFade .2s ease both; }
.modal-card    { animation: slideUpFade .28s cubic-bezier(.34,1.45,.64,1) both; }

/* ---- Messages ---- */
@keyframes fadeUp { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: translateY(0); } }
.message:hover .msg-bubble { transform: none; }

/* Slight lift on bubble hover */
.msg-bubble { transition: box-shadow .2s, border-color .2s; }
.message:hover .msg-bubble { box-shadow: 0 3px 12px rgba(61,43,31,.12); }

/* ---- Room list items ---- */

/* ---- Friend list items ---- */

/* ---- Server rail buttons ---- */
.server-icon-btn { transition: border-radius .2s, background .15s, transform .15s; }
.server-icon-btn:hover  { transform: scale(1.08); }
.server-icon-btn:active { transform: scale(.9); }
.server-rail-btn:active { transform: scale(.88); transition: transform .1s; }

/* ---- Emoji picker slides up ---- */
.emoji-picker-panel { animation: slideUpFade .18s cubic-bezier(.34,1.4,.64,1) both; }

/* ---- Reaction chips pop in ---- */
.reaction-chip { animation: popIn .22s cubic-bezier(.34,1.56,.64,1) both; }

/* ---- Buttons ---- */
.btn-secondary:hover { transform: translateY(-1px); }
.btn-secondary:active { transform: scale(.97); }

.btn-danger {
  width: 100%; padding: .65rem;
  background: transparent; color: #c0392b;
  border: 2px solid #c0392b; border-radius: var(--radius-md);
  font-family: 'Nunito', sans-serif; font-weight: 700; font-size: .95rem;
  cursor: pointer; transition: background .2s, color .2s; margin-top: .3rem;
}
.btn-danger:hover { background: #c0392b; color: #fff; }


/* ---- Online dot ---- */
.online-dot:not(.away):not(.dnd):not(.offline) {
  animation: pulseDot 2.8s ease-in-out infinite;
}

/* ---- Tab buttons ---- */
.tab-btn { transition: all .2s; }
.tab-btn:not(.active):hover { transform: translateY(-1px); }
.tab-btn:active { transform: scale(.96); }

/* ---- Avatar options in picker ---- */
.avatar-opt { transition: border-color .15s, background .15s, transform .15s; }
.avatar-opt:hover  { transform: scale(1.15); }
.avatar-opt.chosen { animation: heartPop .25s ease; }

/* ---- Emoji opts (server picker) ---- */
.emoji-opt { transition: border-color .15s, background .15s, transform .15s; }
.emoji-opt:hover  { transform: scale(1.2); }
.emoji-opt.chosen { animation: heartPop .25s ease; }

/* ---- Hdr buttons ---- */
.hdr-btn { transition: background .15s, border-color .15s, transform .12s; }
.hdr-btn:hover  { transform: translateY(-1px); }
.hdr-btn:active { transform: scale(.94); }

/* ---- Icon buttons ---- */
.icon-btn { transition: color .15s, transform .12s; }
.icon-btn:hover { transform: scale(1.2); }
.icon-btn:active { transform: scale(.9); }

/* ---- Footer icon buttons ---- */
.footer-icon-btn { transition: opacity .15s, transform .15s; }
.footer-icon-btn:hover { transform: scale(1.2) rotate(-10deg); opacity: 1; }

/* ---- Logout button ---- */
.logout-btn { transition: opacity .15s, transform .15s; }
.logout-btn:hover { transform: scale(1.15) rotate(5deg); }

/* ---- No-room tree ---- */
.no-room-inner > div:first-child {
  display: inline-block;
  animation: floatBob 3s ease-in-out infinite;
}

/* ---- Unread badge pop ---- */
.unread-badge { animation: popIn .2s cubic-bezier(.34,1.56,.64,1) both; }


/* ---- Kitty Loader ---- */
.kitty-loader {
  display: none;
  position: absolute;
  inset: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: .55rem;
  background: var(--cream);
  z-index: 15;
  pointer-events: none;
}
.kitty-loader.active { display: flex; }
.kitty-cat {
  font-size: 2.8rem;
  animation: kittyBounce .7s ease-in-out infinite;
  user-select: none;
}
.kitty-dots {
  display: flex; gap: .35rem; align-items: center;
}
.kitty-dots span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--brown-light);
  animation: fadePulse .8s ease-in-out infinite;
}
.kitty-dots span:nth-child(2) { animation-delay: .22s; }
.kitty-dots span:nth-child(3) { animation-delay: .44s; }
.kitty-label {
  font-size: .85rem; font-weight: 700;
  color: var(--brown-light); font-style: italic;
  animation: fadePulse 1.4s ease-in-out infinite;
}

/* ---- Leaf spinner for sidebar room loading ---- */
.room-loading {
  display: flex; align-items: center; gap: .45rem;
  padding: .55rem 1rem;
  color: rgba(255,255,255,.45);
  font-size: .82rem; font-style: italic;
}
.leaf-spin { display: inline-block; animation: spinLeaf .9s linear infinite; }

/* ============================================================
   THEME PICKER
   ============================================================ */

/* First-launch overlay */
#theme-picker-overlay {
  position: fixed; inset: 0; z-index: 9999;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  animation: backdropFade .4s ease both;
}
.theme-picker-card {
  background: var(--warm-white);
  border-radius: var(--radius-lg);
  border: 3px solid var(--tan-dark);
  box-shadow: 0 8px 40px rgba(0,0,0,.3);
  padding: 2rem 2.2rem;
  max-width: 480px; width: 92%;
  text-align: center;
  animation: bounceIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
.theme-picker-card h2 { font-size: 1.4rem; font-weight: 800; color: var(--brown-dark); margin-bottom: .3rem; }
.theme-picker-card p  { font-size: .9rem; color: var(--brown-mid); margin-bottom: 1.4rem; }

/* Theme swatches grid */
.theme-swatches {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .7rem;
  margin-bottom: 1.6rem;
}
.theme-swatch {
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
  cursor: pointer;
  padding: .5rem .3rem .6rem;
  border-radius: var(--radius-md);
  border: 2.5px solid transparent;
  transition: border-color .15s, transform .15s, box-shadow .15s;
}
.theme-swatch:hover  { transform: translateY(-3px); box-shadow: 0 6px 18px rgba(0,0,0,.15); }
.theme-swatch.active { border-color: var(--green-dark); box-shadow: 0 0 0 3px rgba(90,154,94,.25); }
.theme-swatch-preview {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.08);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.room-permissions-card {
  width: min(640px, calc(100vw - 2rem));
  max-height: min(78vh, 680px);
  overflow-y: auto;
  overflow-x: hidden;
}

.room-permissions-legend {
  display: flex;
  gap: .6rem;
  flex-wrap: wrap;
  margin: .35rem 0 .75rem;
  font-size: .77rem;
  color: var(--brown-mid);
}

.room-permissions-list {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}

.room-permission-row {
  display: grid;
  grid-template-columns: minmax(120px, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: .4rem;
  align-items: center;
  padding: .45rem .6rem;
  border-radius: 8px;
  background: rgba(0, 0, 0, .035);
}

.room-permission-row.header {
  background: transparent;
  padding: 0 .15rem;
  font-size: .75rem;
  font-weight: 700;
  color: var(--brown-mid);
}

.room-permission-role {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  font-size: .88rem;
  font-weight: 700;
  color: var(--brown-dark);
}

.room-permission-role-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.room-permission-select {
  width: 100%;
  border: 1.5px solid var(--tan-dark);
  border-radius: 7px;
  padding: .3rem .4rem;
  background: var(--warm-white);
  color: var(--brown-dark);
  font-family: 'Nunito', sans-serif;
  font-size: .82rem;
  cursor: pointer;
  transition: border-color .15s;
}
.room-permission-select:focus { outline: none; border-color: var(--green-mid); }
body.dark .room-permission-select {
  background: var(--tan);
  border-color: var(--tan-dark);
  color: var(--brown-dark);
}

.room-permissions-actions {
  display: flex;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: .85rem;
  flex-wrap: wrap;
}

@media (max-width: 700px) {
  .room-permission-row {
    grid-template-columns: 1fr;
  }

  .room-permission-row.header {
    display: none;
  }
}
.theme-swatch-label {
  font-size: .72rem; font-weight: 800;
  color: var(--brown-mid);
  white-space: nowrap;
}

/* Inline swatch previews (hardcoded colours so they look right in any theme) */
/* Theme swatches with light/dark variants */
.swatch-forest-light   { background: linear-gradient(135deg, #6B9E70 50%, #FEFAF3 50%); }
.swatch-forest-dark    { background: linear-gradient(135deg, #78B884 50%, #1C1914 50%); }
.swatch-blossom-light  { background: linear-gradient(135deg, #C06080 50%, #FFF6F9 50%); }
.swatch-blossom-dark   { background: linear-gradient(135deg, #D4909C 50%, #1A1018 50%); }
.swatch-ocean-light    { background: linear-gradient(135deg, #5AB4C8 50%, #F4FCFE 50%); }
.swatch-ocean-dark     { background: linear-gradient(135deg, #5AB0C8 50%, #0C1820 50%); }
.swatch-autumn-light   { background: linear-gradient(135deg, #C87848 50%, #FFF8F2 50%); }
.swatch-autumn-dark    { background: linear-gradient(135deg, #D4924E 50%, #180E06 50%); }
.swatch-teddy-light    { background: linear-gradient(135deg, #B07A3C 50%, #FFF9F2 50%); }
.swatch-teddy-dark     { background: linear-gradient(135deg, #D4904E 50%, #180E06 50%); }

/* Theme swatches inside settings (smaller) */
.settings-theme-swatches {
  display: flex; flex-wrap: wrap; gap: .55rem;
  padding: .6rem 0 .3rem;
}
.settings-theme-swatches .theme-swatch { padding: .4rem .25rem .5rem; flex: 1; min-width: 60px; }
.settings-theme-swatches .theme-swatch-preview { width: 36px; height: 36px; }
.settings-theme-swatches .theme-swatch-label   { font-size: .68rem; }

/* ---- Patch Notes ---- */
.patch-notes {
  padding: .2rem 0 .2rem .2rem;
}
.patch-entry {
  margin-bottom: 1.4rem;
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: .8rem 1rem;
}
.patch-version {
  font-size: .82rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--accent, #a8d8a8);
  margin-bottom: .55rem;
}
.patch-list {
  margin: 0;
  padding-left: 1.3rem;
  list-style: disc;
}
.patch-list li {
  font-size: .84rem;
  color: rgba(255,255,255,.78);
  line-height: 1.75;
  margin-bottom: .1rem;
}

/* ============================================================
   MOBILE RESPONSIVE  (≤ 768 px)
   ============================================================ */

/* Elements only shown on mobile */
.mobile-only { display: none !important; }

/* Dark backdrop shared by nav + member panel overlays */
#mobile-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0,0,0,.48);
  z-index: 190;
  touch-action: none;
}
#app.mobile-nav-open   #mobile-overlay,
#app.mobile-panel-open #mobile-overlay { display: block; }

@media (max-width: 768px) {

  /* Show mobile-only elements */
  .mobile-only { display: flex !important; }

  /* ---- Root layout: stack everything ---- */
  #app { flex-direction: row; position: relative; height: 100%; min-height: 100dvh; }
  body { overscroll-behavior-y: none; }

  /* ---- Voice status bar: wrap on narrow screens ---- */
  #voice-status-bar { flex-wrap: wrap; gap: .2rem; padding: .4rem .6rem; }
  .vsb-left { min-width: 0; }

  /* ---- Server rail: fixed overlay, slides with sidebar ---- */
  #server-rail {
    position: fixed;
    left: 0; top: 0; bottom: 0;
    width: 64px;
    z-index: 210;
    transform: translateX(calc(-100% - 4px));
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    overflow-y: auto; overflow-x: hidden;
    /* keep vertical scroll hidden from eye */
    -webkit-overflow-scrolling: touch;
  }
  #app.mobile-nav-open #server-rail {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.35);
  }

  /* ---- Sidebar: fixed overlay, slides in beside server-rail ---- */
  #sidebar {
    position: fixed;
    left: 64px; top: 0; bottom: 0;
    width: min(260px, calc(100vw - 64px));
    z-index: 210;
    transform: translateX(calc(-100% - 64px - 4px));
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    -webkit-overflow-scrolling: touch;
  }
  #app.mobile-nav-open #sidebar {
    transform: translateX(0);
    box-shadow: 4px 0 24px rgba(0,0,0,.25);
  }

  /* ---- Chat area: full width, no left offset ---- */
  #chat-area { width: 100%; min-width: 0; }
  .chat-body { min-height: 0; }
  .chat-main { min-width: 0; min-height: 0; }

  /* ---- Member panel: slides in from the right ---- */
  .member-panel {
    position: fixed;
    right: 0; top: 0; bottom: 0;
    width: 100vw;
    max-width: 100vw;
    z-index: 210;
    transform: translateX(105%);
    transition: transform .26s cubic-bezier(.4,0,.2,1);
    -webkit-overflow-scrolling: touch;
    /* already has background & border-left from base styles */
  }
  #app.mobile-panel-open .member-panel {
    transform: translateX(0);
    box-shadow: -4px 0 24px rgba(0,0,0,.25);
  }

  /* ---- Chat header: tighter on mobile ---- */
  .chat-header { padding: .55rem .8rem; gap: .3rem; }
  .chat-topic { max-width: 160px; }

  /* ---- Message input row ---- */
  .message-input-row {
    padding: .5rem .55rem calc(.55rem + env(safe-area-inset-bottom));
    gap: .35rem;
    align-items: flex-end;
    position: sticky;
    bottom: 0;
    z-index: 3;
    backdrop-filter: blur(10px);
  }
  .send-btn { padding: .45rem .65rem; font-size: .85rem; }
  .msg-input { font-size: .95rem; max-height: 28dvh; }

  /* ---- Messages area: smaller padding ---- */
  .messages-area { padding: .8rem .8rem 1rem; }

  /* ---- Modals: near full-screen on mobile ---- */
  .modal-card,
  .user-settings-card {
    width: 94vw !important;
    max-width: 94vw !important;
    max-height: 88vh;
    overflow-y: auto;
    padding: 1.2rem 1rem !important;
  }

  /* ---- Server settings card ---- */
  .server-settings-card { width: 94vw !important; max-width: 94vw !important; }

  /* ---- Emoji picker: fits small screens ---- */
  .emoji-picker { width: min(340px, 96vw) !important; }

  /* ---- Reaction picker ---- */
  .reaction-picker { max-width: 96vw; }

  /* ---- Login card ---- */
  .login-card { padding: 1.8rem 1.2rem 1.4rem; width: 92vw; max-width: 380px; }
  .deco { display: none; } /* hide corner decorations on mobile — they clip into the login card */

  /* ---- No-room screen ---- */
  #no-room .no-room-inner { padding: 1rem; }
  #no-room .btn-primary { font-size: .9rem; }

  /* ---- Sidebar footer status picker: keep it in bounds ---- */
  .status-picker { min-width: 0; width: calc(100vw - 64px - 1.6rem); max-width: 240px; }

  /* ---- Settings: full-screen, column layout ---- */
  .settings-shell {
    width: 100vw !important;
    height: 100dvh !important;
    max-width: 100vw;
    border-radius: 0;
    border: none;
    flex-direction: column;
  }
  .settings-nav {
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    padding: .45rem .5rem;
    gap: .2rem;
    border-right: none;
    border-bottom: 2px solid var(--tan-dark);
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
  }
  .settings-nav::-webkit-scrollbar { display: none; }
  .settings-nav-group-label { display: none; }
  .settings-nav-divider { border-top: none; border-left: 1.5px solid var(--tan-dark); margin: .1rem .25rem; width: 1px; height: auto; align-self: stretch; }
  .settings-nav-btn { white-space: nowrap; flex-shrink: 0; padding: .4rem .6rem; font-size: .82rem; }
  .settings-nav-btn:hover { transform: none; }
  .settings-nav-danger { margin-top: 0; margin-left: auto; }
  .settings-panel { padding: 1rem .9rem; }

  /* ---- GIF picker: centered at bottom of screen ---- */
  .gif-picker {
    left: 4vw !important;
    right: 4vw !important;
    width: 92vw !important;
    max-width: 92vw !important;
    bottom: 68px;
  }

  /* ---- Soundboard: full-width sheet from bottom ---- */
  .soundboard-panel {
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    min-width: 0;
    max-width: 100%;
    width: 100% !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    box-sizing: border-box;
  }

  /* ---- Voice channel grid: max 2 columns on mobile ---- */
  .vc-participant-grid[data-count="3"],
  .vc-participant-grid[data-count="5"],
  .vc-participant-grid[data-count="6"],
  .vc-participant-grid[data-count="7"],
  .vc-participant-grid[data-count="8"],
  .vc-participant-grid[data-count="9"] { grid-template-columns: 1fr 1fr; }

  /* ---- Voice channel controls: wrap if needed, hide screenshare on mobile ---- */
  .vc-view-controls { flex-wrap: wrap; gap: .45rem; padding: .65rem .8rem; }
  .vc-view-controls .ss-quality-wrap { display: none; }

  /* ---- DM call view: auto height, controls can wrap ---- */
  #dm-call-view { height: auto; min-height: 110px; max-height: 48vh; }
  .dmc-controls { flex-wrap: wrap; gap: .35rem; padding-top: .35rem; }
  .dmc-controls .ss-quality-wrap { display: none; }

  /* ---- Profile card: scrollable on mobile ---- */
  .profile-card { max-height: 90dvh; overflow-y: auto; min-width: unset !important; max-width: 96vw !important; }
  .profile-identity-row { flex-wrap: nowrap; }
  .profile-body-row { flex-wrap: wrap; }
  .profile-body-row #profile-actions { width: 100%; }

  /* ---- Touch-friendly hit targets ---- */
  .hdr-btn, .icon-btn, .vsb-btn, .footer-icon-btn,
  .vc-ctrl-btn, .dmc-ctrl, .server-rail-btn, .server-icon-btn { min-height: 44px; min-width: 44px; }

  /* ---- Toast stack: center and keep clear of browser chrome ---- */
  #msg-notif-stack {
    right: .5rem;
    left: .5rem;
    bottom: calc(.5rem + env(safe-area-inset-bottom));
  }
  .msg-notif-card {
    width: min(100%, 420px);
    margin-left: auto;
  }

  /* ---- Voice view: behave like a mobile sheet ---- */
  #voice-channel-view {
    height: calc(100dvh - 56px);
    min-height: 0;
  }
  .vc-view-body {
    min-height: 0;
    padding: .7rem;
  }
  .vc-view-controls {
    position: sticky;
    bottom: 0;
    padding-bottom: calc(.8rem + env(safe-area-inset-bottom));
    background: linear-gradient(180deg, rgba(255,248,238,.9), rgba(245,229,206,.98));
  }
  body.dark .vc-view-controls {
    background: linear-gradient(180deg, rgba(22,27,24,.9), rgba(16,20,17,.98));
  }

  /* ---- Sweet Dock: phone-friendly bottom sheet ---- */
  .sweet-dock {
    left: .45rem;
    right: .45rem;
    bottom: calc(.45rem + env(safe-area-inset-bottom));
    width: auto;
    max-width: none;
    max-height: min(82dvh, 720px);
    border-radius: 20px;
  }
  .sweet-dock-header { cursor: default; }
  .dock-top-row {
    flex-direction: column;
    gap: .5rem;
  }
  .dock-top-pet-col,
  .dock-top-fishing-col {
    width: 100%;
    min-width: 0;
  }
  .dock-top-pet-col .pet-canvas,
  .dock-top-pet-col .dock-pet-welcome {
    width: 100%;
  }
  .dock-top-pet-col .pet-canvas {
    height: auto !important;
    aspect-ratio: 196 / 104;
  }
  .dock-top-pet-col .dock-pet-welcome-name {
    font-size: .58rem;
  }
  .dock-top-fishing-col .fishing-hud { flex-wrap: wrap; }
  .sweet-dock-tabs {
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .sweet-dock-tabs::-webkit-scrollbar { display: none; }
  .dock-content-area {
    max-height: min(46dvh, 430px);
    padding-bottom: calc(.65rem + env(safe-area-inset-bottom));
  }
  #fishing-content-wrapper { min-height: 0; }
  #fishing-canvas {
    width: min(100%, 248px);
    height: auto;
  }
  .fishing-tab-content {
    padding: .25rem 0 0;
  }
  .fishing-panel-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .4rem;
  }
  .fishing-action-btn {
    width: 100%;
    justify-content: center;
  }
  .fishing-active-boosts-row { gap: .25rem; }
  .fishing-active-boost-chip { max-width: 100%; }
  .fishing-active-boost-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* ---- Mobile polish for nav, panels, and chat overlays ---- */
  #server-rail {
    padding-top: calc(.5rem + env(safe-area-inset-top));
    padding-bottom: calc(.65rem + env(safe-area-inset-bottom));
  }
  #sidebar {
    padding-bottom: env(safe-area-inset-bottom);
  }
  .sidebar-header,
  .member-panel-header,
  .vc-view-header {
    padding-top: calc(.75rem + env(safe-area-inset-top));
  }
  .chat-header {
    flex-wrap: wrap;
    align-items: flex-start;
  }
  .chat-header-left,
  .chat-header-title {
    min-width: 0;
  }
  #chat-room-name {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .chat-topic {
    max-width: none;
  }
  .chat-header-actions {
    width: 100%;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: .35rem;
  }
  .search-bar {
    padding: .55rem .75rem;
    gap: .45rem;
  }
  .search-input {
    min-width: 0;
    font-size: 16px;
  }
  .search-results,
  .pins-panel {
    position: fixed;
    left: .55rem;
    right: .55rem;
    top: calc(3.9rem + env(safe-area-inset-top));
    bottom: calc(5.2rem + env(safe-area-inset-bottom));
    max-height: none;
    border: 2px solid var(--tan-dark);
    border-radius: 18px;
    box-shadow: 0 18px 40px rgba(61,43,31,.18);
    z-index: 205;
    overflow: hidden;
  }
  body.dark .search-results,
  body.dark .pins-panel {
    box-shadow: 0 18px 40px rgba(0,0,0,.42);
  }
  .search-results {
    border-bottom-width: 2px;
  }
  #search-results-list,
  #pins-list,
  #saved-messages-list {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: calc(.5rem + env(safe-area-inset-bottom));
  }
  #search-results-list {
    max-height: 100%;
  }
  #pins-list,
  #saved-messages-list {
    max-height: calc(100% - 46px);
  }
  .search-result-item,
  .pin-item,
  .saved-item {
    padding-left: .9rem;
    padding-right: .9rem;
  }
  .search-result-content,
  .pin-item-content,
  .saved-item-content {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
    word-break: break-word;
  }
  #reply-bar,
  .thread-bar,
  .slow-mode-bar {
    flex-wrap: wrap;
    align-items: flex-start;
    padding-left: .7rem;
    padding-right: .7rem;
    gap: .4rem;
  }
  .reply-bar-text,
  .thread-bar-text {
    flex-basis: calc(100% - 2.8rem);
    min-width: 0;
    white-space: normal;
    line-height: 1.35;
  }
  .thread-archive-btn,
  .reply-bar-cancel {
    margin-left: auto;
  }
  .file-preview-bar {
    align-items: stretch;
    padding: .45rem .7rem .55rem;
  }
  .file-preview-list,
  #file-preview-list {
    width: 100%;
  }
  .file-preview-bar > button {
    align-self: flex-end;
  }
  .emoji-picker-panel {
    left: .5rem !important;
    right: .5rem !important;
    bottom: calc(4.85rem + env(safe-area-inset-bottom)) !important;
    width: auto !important;
    max-width: none !important;
    max-height: min(48dvh, 420px);
    border-radius: 18px;
  }
  .ep-grid {
    max-height: min(36dvh, 300px);
    -webkit-overflow-scrolling: touch;
  }
  .modal-card,
  .user-settings-card,
  .server-settings-card,
  .profile-card {
    max-height: 92dvh;
  }
}

/* Extra-small (≤ 420 px) */
@media (max-width: 420px) {
  #chat-room-name { font-size: .92rem; }
.messages-area { padding: .6rem .5rem; }

  /* ---- Voice grid: single column on small phones ---- */
  .vc-participant-grid[data-count="2"],
  .vc-participant-grid[data-count="3"] { grid-template-columns: 1fr; }

  /* ---- DM call controls: tighter ---- */
  .dmc-ctrl { padding: .35rem .6rem; font-size: .78rem; }

  /* ---- Settings nav buttons: even more compact ---- */
  .settings-nav-btn { font-size: .78rem; padding: .35rem .5rem; }

  .sweet-dock {
    left: .3rem;
    right: .3rem;
    bottom: calc(.3rem + env(safe-area-inset-bottom));
    max-height: 84dvh;
  }
  .fishing-panel-actions { grid-template-columns: 1fr; }
  .dock-top-pet-col .dock-pet-welcome-opts { grid-template-columns: repeat(2, 1fr); }
  .dock-top-pet-col .dock-pet-welcome-btn:last-child { grid-column: span 2; }
}

/* ============================================================
   CATEGORIES & CHANNEL TYPES
   ============================================================ */

/* Category header row */
.category-header {
  list-style: none;
  display: flex; align-items: center; gap: .3rem;
  padding: .55rem .8rem .2rem;
  margin-top: .4rem;
  cursor: pointer; user-select: none;
  border-radius: var(--radius-sm);
  transition: background .15s;
}
.category-header:hover { background: rgba(255,255,255,.07); }
.category-arrow {
  font-size: .55rem;
  color: rgba(255,255,255,.4);
  transition: transform .18s;
  flex-shrink: 0;
}
.category-name {
  font-size: .68rem; font-weight: 800;
  letter-spacing: .08em;
  color: rgba(255,255,255,.45);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Voice channel item in sidebar */
.voice-channel-item { flex-direction: column; align-items: stretch; cursor: default; padding: 0; }
.voice-channel-item:hover { background: transparent; }
.voice-ch-header {
  display: flex; align-items: center; gap: .5rem;
  padding: .28rem .8rem .28rem 1rem;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}
.voice-ch-header:hover { background: rgba(255,255,255,.1); }
.voice-channel-item.active .voice-ch-header { background: rgba(255,255,255,.15); }
.voice-ch-name { flex: 1; font-size: .88rem; font-weight: 600; color: rgba(255,255,255,.7); overflow: hidden; text-overflow: ellipsis; }

/* Participants listed under a voice channel */
.voice-ch-participants {
  list-style: none; padding: 0 .5rem 6px 2.4rem; margin: 0;
  overflow: visible;
}
.voice-ch-participant {
  display: flex; align-items: center; gap: .4rem;
  padding: .25rem .3rem;
  margin-bottom: 2px;
  border-radius: var(--radius-sm);
}
.voice-ch-participant-name {
  font-size: .8rem; color: rgba(255,255,255,.6);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}
.vc-status-icon { font-size: .75rem; opacity: .7; flex-shrink: 0; }

/* ============================================================
   SOUNDBOARD PANEL
   ============================================================ */
.soundboard-panel {
  position: fixed;
  background: var(--green-dark);
  border: 2px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .7rem;
  z-index: 200;
  animation: slideUpFade .18s ease both;
  min-width: 260px; max-width: 320px;
}
.soundboard-header-row {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .5rem; gap: .5rem;
}
.soundboard-title {
  font-size: .7rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.5);
  white-space: nowrap;
}
.sb-volume-row {
  display: flex; align-items: center; gap: .35rem; flex: 1; justify-content: flex-end;
}
.sb-vol-icon { font-size: .85rem; }
.sb-volume-slider {
  -webkit-appearance: none; appearance: none;
  width: 80px; height: 4px; border-radius: 2px; outline: none;
  background: linear-gradient(to right, var(--green-mid) 40%, rgba(255,255,255,.2) 40%);
  cursor: pointer;
}
.sb-volume-slider::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 12px;
  border-radius: 50%; background: white; cursor: pointer;
}
.sb-vol-label { font-size: .7rem; color: rgba(255,255,255,.45); min-width: 2.2rem; text-align: right; }
.soundboard-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: .35rem;
}
.sb-btn {
  background: rgba(255,255,255,.1); border: none;
  border-radius: var(--radius-sm); color: rgba(255,255,255,.9);
  font-family: 'Nunito', sans-serif; font-size: .82rem; font-weight: 700;
  padding: .45rem .5rem; cursor: pointer; text-align: left;
  transition: background .15s, transform .1s;
  display: flex; align-items: center; gap: .3rem;
}
.sb-btn:hover  { background: rgba(255,255,255,.2); }
.sb-btn:active { transform: scale(.95); }
.sb-btn-delete {
  margin-left: auto; background: none; border: none;
  color: rgba(255,255,255,.3); font-size: .75rem; cursor: pointer;
  padding: 0 0 0 .25rem; line-height: 1; flex-shrink: 0;
  transition: color .15s;
}
.sb-btn-delete:hover { color: #ed4245; }
.sb-custom-section { margin-top: .6rem; border-top: 1px solid rgba(255,255,255,.12); padding-top: .5rem; }
.sb-custom-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: .4rem;
}
.sb-custom-label {
  font-size: .65rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: rgba(255,255,255,.35);
}
.sb-upload-btn {
  font-size: .72rem; font-weight: 700; color: rgba(255,255,255,.6);
  background: rgba(255,255,255,.1); border-radius: var(--radius-sm);
  padding: .2rem .5rem; cursor: pointer; transition: background .15s;
}
.sb-upload-btn:hover { background: rgba(255,255,255,.2); color: white; }

/* ============================================================
   VOICE STATUS BAR  (Discord-style bottom-of-sidebar bar)
   ============================================================ */

#voice-status-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem .8rem;
  background: rgba(0,0,0,.25);
  border-top: 1px solid rgba(255,255,255,.1);
  flex-shrink: 0;
}
.vsb-left { display: flex; flex-direction: column; gap: .05rem; min-width: 0; }
.vsb-signal {
  font-size: .7rem; font-weight: 800;
  color: #57f287; letter-spacing: .04em;
}
.vsb-channel {
  font-size: .75rem; color: rgba(255,255,255,.6);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 130px;
}
.vsb-actions { display: flex; gap: .3rem; flex-shrink: 0; }
.vsb-btn {
  background: transparent; border: none;
  font-size: 1rem; cursor: pointer;
  padding: .25rem .35rem; border-radius: var(--radius-sm);
  transition: background .12s;
  color: rgba(255,255,255,.8);
}
.vsb-btn:hover { background: rgba(255,255,255,.15); }
.vsb-btn.muted { color: #ed4245; }
.vsb-leave { color: #ed4245 !important; }
.vsb-leave:hover { background: rgba(237,66,69,.2) !important; }

/* ============================================================
   PORTRAIT SPEAKING GLOW
   ============================================================ */

@keyframes portrait-glow {
  0%, 100% { box-shadow: 0 0 0 2px #57f287, 0 0 6px rgba(87,242,135,.35); }
  50%       { box-shadow: 0 0 0 2px #57f287, 0 0 14px rgba(87,242,135,.7); }
}
.self-avatar-wrap.speaking {
  animation: portrait-glow .7s ease-in-out infinite;
  border-radius: 50%;
}

/* ============================================================
   CHANNEL TYPE PICKER  (in create-room modal)
   ============================================================ */

.channel-type-row {
  display: flex; gap: .6rem; margin-bottom: .8rem;
}
.channel-type-btn {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start;
  gap: .15rem; padding: .65rem .75rem;
  background: var(--tan); border: 2px solid transparent;
  border-radius: var(--radius-md); cursor: pointer;
  text-align: left; transition: border-color .15s, background .15s;
}
.channel-type-btn:hover { background: var(--tan); }
.channel-type-btn.active { border-color: var(--green-mid); background: var(--green-pale); }
.ch-type-icon { font-size: 1.3rem; }
.ch-type-label { font-size: .88rem; font-weight: 800; color: var(--brown-dark); }
.ch-type-desc  { font-size: .73rem; color: var(--brown-light); }

/* ============================================================
   VOICE CHANNEL VIEW  (lobby + in-channel participant grid)
   ============================================================ */

#voice-channel-view {
  display: none;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
  background: var(--tan);
}

.vc-view-header {
  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .85rem 1.2rem;
  background: var(--tan);
  border-bottom: 1.5px solid var(--tan-dark);
  flex-shrink: 0;
}
.vc-view-header-name  { font-size: 1.05rem; font-weight: 800; color: var(--brown-dark); }
.vc-view-header-count { font-size: .8rem; color: var(--brown-light); margin-left: auto; }

.vc-view-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: auto;
  padding: 1.5rem;
  gap: 1.5rem;
}

/* Participant grid — responsive CSS grid */
.vc-participant-grid {
  display: grid;
  gap: 12px;
  width: 100%;
  max-width: 1200px;
  flex: 1;
  align-content: center;
  justify-content: center;
  padding: 4px;  /* room for box-shadow glow to not get clipped */
  box-sizing: border-box;
  /* fallback for unknown counts */
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
}
.vc-participant-grid[data-count="1"]  { grid-template-columns: 1fr; max-width: 700px; }
.vc-participant-grid[data-count="2"]  { grid-template-columns: 1fr 1fr; }
.vc-participant-grid[data-count="3"]  { grid-template-columns: 1fr 1fr 1fr; }
.vc-participant-grid[data-count="4"]  { grid-template-columns: 1fr 1fr; }
.vc-participant-grid[data-count="5"],
.vc-participant-grid[data-count="6"]  { grid-template-columns: 1fr 1fr 1fr; }
.vc-participant-grid[data-count="7"],
.vc-participant-grid[data-count="8"],
.vc-participant-grid[data-count="9"]  { grid-template-columns: 1fr 1fr 1fr; }

/* Screen share / video active: fill available height, object-fit:contain keeps resolution */
.vc-view-body.screen-sharing-active {
  align-items: stretch;
}
.vc-view-body.screen-sharing-active .vc-participant-grid {
  max-width: none;
  align-content: stretch;
  align-items: stretch;
}
.vc-view-body.screen-sharing-active .vc-tile {
  aspect-ratio: unset;
}

/* Spotlight / focus mode */
.vc-participant-grid.focused {
  display: flex;
  flex-direction: column;
  max-width: 1200px;
  align-items: stretch;
}
.vc-tile.vc-tile-focused {
  flex: 1;
  min-height: 0;
  aspect-ratio: unset !important;
  cursor: default;
}
.vc-thumbs-strip {
  display: flex;
  flex-direction: row;
  gap: 8px;
  height: 130px;
  flex-shrink: 0;
  overflow-x: auto;
  overflow-y: hidden;
}
.vc-thumbs-strip::-webkit-scrollbar { height: 4px; }
.vc-thumbs-strip::-webkit-scrollbar-thumb { background: var(--tan-dark); border-radius: 2px; }
.vc-thumbs-strip .vc-tile {
  aspect-ratio: unset !important;
  width: 200px;
  height: 100%;
  flex-shrink: 0;
  min-width: 0;
}

/* Individual tile */
.vc-tile {
  position: relative;
  border-radius: var(--radius-lg);
  background: #2e2720;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  aspect-ratio: 16/9;
  min-height: 0;
  min-width: 0;
  cursor: pointer;
  transition: box-shadow .18s, outline .12s;
}
.vc-tile:hover { outline: 2px solid rgba(255,255,255,.15); outline-offset: -2px; }
.vc-tile.vc-tile-focused:hover { outline: none; }
.vc-tile.speaking {
  box-shadow: 0 0 0 3px var(--green-mid), 0 0 20px 4px rgba(106,153,85,.35);
}
.vc-tile video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  position: absolute; inset: 0;
  border-radius: var(--radius-lg);
}
.vc-tile-avatar {
  width: 80px; height: 80px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  font-size: 2.2rem;
  font-weight: 800;
  background: var(--tan-dark);
  color: var(--brown-dark);
}
.vc-tile-avatar img, .vc-tile-avatar .avatar-img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.vc-tile-name {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: .3rem .5rem .4rem;
  background: linear-gradient(transparent, rgba(0,0,0,.7));
  font-size: .78rem;
  font-weight: 700;
  color: #fff;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
}
.vc-tile-status { font-size: .8rem; opacity: .85; }


/* Lobby join buttons */
.vc-lobby-actions {
  display: flex;
  gap: .75rem;
  flex-shrink: 0;
}
.vc-join-btn {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: .65rem 1.4rem;
  border-radius: var(--radius-md);
  font-size: .95rem;
  font-weight: 800;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.vc-join-btn:hover  { opacity: .86; transform: translateY(-1px); }
.vc-join-btn:active { transform: translateY(0); }
.vc-join-btn.primary   { background: var(--green-mid); color: #fff; }
.vc-join-btn.secondary { background: var(--tan-dark);  color: var(--brown-dark); }

/* In-voice controls bar */
.vc-view-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .65rem;
  padding: .8rem 1rem;
  background: var(--tan);
  border-top: 1.5px solid var(--tan-dark);
  flex-shrink: 0;
}
.vc-ctrl-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 46px; height: 46px;
  padding: 0;
  box-sizing: border-box;
  line-height: 1;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  background: var(--tan-dark);
  color: var(--brown-dark);
  transition: background .15s, transform .1s;
}
.vc-ctrl-btn:hover  { filter: brightness(.93); }
.vc-ctrl-btn.active { background: var(--green-mid); color: #fff; }
.vc-ctrl-btn.muted  { background: #f5e0e0; color: #c0392b; }
.vc-ctrl-btn.danger { background: #c0392b; color: #fff; }

/* ============================================================
   Screen Share Quality Drop-up
   ============================================================ */
.ss-quality-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.ss-chevron-btn {
  font-size: .7rem !important;
  padding: 0 .35rem !important;
  min-width: unset !important;
  opacity: .7;
}
.ss-chevron-btn:hover { opacity: 1; }

.ss-quality-menu {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--tan);
  border: 1.5px solid var(--brown-dark);
  border-radius: 12px;
  padding: .6rem .7rem;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  min-width: 130px;
  box-shadow: 0 6px 24px rgba(0,0,0,.35);
  z-index: 200;
  white-space: nowrap;
}

.ss-quality-section {
  font-size: .7rem;
  font-weight: 800;
  color: var(--brown-mid);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-top: .2rem;
}
.ss-quality-section:first-child { margin-top: 0; }

.ss-quality-opts {
  display: flex;
  gap: .35rem;
}

.ss-opt {
  flex: 1;
  padding: .3rem .5rem;
  border-radius: 8px;
  border: 1.5px solid var(--brown-dark);
  background: transparent;
  color: var(--brown-dark);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.ss-opt:hover { background: var(--tan-dark); }
.ss-opt.active {
  background: var(--green-mid);
  border-color: var(--green-mid);
  color: #fff;
}

/* ============================================================
   Screen Picker Modal (Electron)
   ============================================================ */
#screen-picker-modal {
  position: fixed;
  inset: 0;
  z-index: 9998;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(4px);
}

.screen-picker-card {
  background: var(--tan);
  border: 1.5px solid var(--brown-dark);
  border-radius: 20px;
  padding: 1.4rem 1.6rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
  max-width: 680px;
  width: 90vw;
  max-height: 80vh;
  overflow: hidden;
}

.screen-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.screen-picker-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--brown-dark);
}

.screen-picker-close {
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--text-mid, var(--brown-mid));
  padding: .2rem .4rem;
  border-radius: 6px;
  transition: background .15s;
}
.screen-picker-close:hover { background: var(--brown-dark); color: var(--tan); }

.screen-picker-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: .8rem;
  overflow-y: auto;
  max-height: 55vh;
  padding-right: .2rem;
}

.screen-picker-item {
  background: var(--cream, var(--surface));
  border: 2px solid var(--border, var(--brown-dark));
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color .15s, transform .12s;
  display: flex;
  flex-direction: column;
}
.screen-picker-item:hover {
  border-color: var(--green-mid);
  transform: translateY(-2px);
}
.screen-picker-item img {
  width: 100%;
  aspect-ratio: 16/9;
  object-fit: cover;
  display: block;
  background: #000;
}
.screen-picker-label {
  padding: .35rem .5rem;
  font-size: .78rem;
  font-weight: 700;
  color: var(--brown-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================================
   Per-user Volume Popup
   ============================================================ */
#volume-ctx-popup {
  position: fixed;
  z-index: 10001;
  background: var(--warm-white);
  border: 1.5px solid var(--tan-dark);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
  padding: .65rem .9rem;
  min-width: 190px;
  display: none;
}
.vcpop-label {
  font-size: .78rem; font-weight: 800;
  color: var(--brown-mid); text-transform: uppercase;
  letter-spacing: .05em; margin-bottom: .45rem;
}
.vcpop-row {
  display: flex; align-items: center; gap: .5rem;
}
.vcpop-row input[type=range] {
  flex: 1; accent-color: var(--green-mid);
}
.vcpop-value {
  font-size: .8rem; font-weight: 700; color: var(--brown-dark);
  text-align: center; margin-top: .3rem;
}

/* ============================================================
   Incoming Call Modal
   ============================================================ */
#call-incoming-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(4px);
}

.call-incoming-card {
  background: var(--tan);
  border: 1.5px solid var(--brown-dark);
  border-radius: 20px;
  padding: 2rem 2.4rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .7rem;
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
  min-width: 260px;
  text-align: center;
  animation: call-pop .25s cubic-bezier(.34,1.56,.64,1) both;
}

@keyframes call-pop {
  from { transform: scale(.8); opacity: 0; }
  to   { transform: scale(1);  opacity: 1; }
}

.call-incoming-avatar {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--brown-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--tan);
  overflow: hidden;
  border: 2.5px solid var(--green-mid);
  box-shadow: 0 0 0 4px rgba(74,125,80,.2);
  animation: ring-pulse 1.2s ease-in-out infinite;
}

@keyframes ring-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(74,125,80,.2); }
  50%      { box-shadow: 0 0 0 10px rgba(74,125,80,.08); }
}

.call-incoming-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--text, var(--brown-dark));
}

.call-incoming-label {
  font-size: .85rem;
  color: var(--text-mid, var(--brown-mid));
}

.call-incoming-btns {
  display: flex;
  gap: .75rem;
  margin-top: .4rem;
}

.call-accept-btn,
.call-decline-btn {
  padding: .55rem 1.3rem;
  border-radius: 12px;
  border: none;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s, opacity .12s;
}
.call-accept-btn:hover,
.call-decline-btn:hover { opacity: .85; transform: translateY(-1px); }

.call-accept-btn  { background: var(--green-mid); color: #fff; }
.call-decline-btn { background: var(--brown-dark); color: var(--tan); }

/* ============================================================
   GIF Picker
   ============================================================ */
.gif-open-btn {
  flex-shrink: 0;
  padding: 0 .45rem;
  height: 36px;
  border-radius: var(--radius-sm);
  border: none;
  background: none;
  color: var(--green-mid);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 800;
  cursor: pointer;
  letter-spacing: .04em;
  transition: background .15s;
}
.gif-open-btn:hover { background: var(--tan); }

.gif-picker {
  position: fixed;
  z-index: 3000;
  bottom: 60px;
  left: 60px;
  width: 340px;
  max-height: 420px;
  background: var(--tan);
  border-radius: 14px;
  border: 1.5px solid var(--tan-dark);
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.gif-picker-header {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .55rem .6rem;
  border-bottom: 1px solid var(--tan-dark);
  flex-shrink: 0;
}

.gif-search-input {
  flex: 1;
  border: 1.5px solid var(--tan-dark);
  border-radius: 8px;
  padding: .35rem .6rem;
  font-family: inherit;
  font-size: .88rem;
  background: var(--cream);
  color: var(--brown-dark);
  outline: none;
}
.gif-search-input:focus { border-color: var(--green-mid); }

.gif-close-btn {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1rem;
  color: var(--brown-mid);
  padding: .2rem .4rem;
}
.gif-close-btn:hover { color: var(--brown-dark); }

.gif-grid {
  flex: 1;
  overflow-y: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3px;
  padding: 4px;
}

.gif-item {
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  cursor: pointer;
  background: var(--tan-dark);
  transition: transform .12s, filter .12s;
}
.gif-item:hover { transform: scale(1.04); filter: brightness(.92); }
.gif-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.gif-loading {
  grid-column: 1/-1;
  padding: 2rem;
  text-align: center;
  color: var(--brown-mid);
  font-size: .9rem;
}

.gif-attribution {
  flex-shrink: 0;
  text-align: center;
  font-size: .68rem;
  color: var(--brown-mid);
  padding: .3rem;
  border-top: 1px solid var(--tan-dark);
}

/* ============================================================
   (offline overlay removed)
   ============================================================ */
/* #offline-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(18, 14, 10, .92);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeInOverlay .3s ease;
}
@keyframes fadeInOverlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.offline-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  padding: 2.8rem 2.4rem 2.2rem;
  background: var(--surface, #1c1813);
  border-radius: 20px;
  border: 1.5px solid var(--tan-dark, #2e2820);
  box-shadow: 0 12px 48px rgba(0,0,0,.5);
  text-align: center;
  max-width: 320px;
  width: 90%;
}

.offline-kitty {
  font-size: 4rem;
  line-height: 1;
  animation: offlineKittyBob 2s ease-in-out infinite;
}
@keyframes offlineKittyBob {
  0%,100% { transform: translateY(0) rotate(0deg); }
  30%     { transform: translateY(-8px) rotate(-4deg); }
  60%     { transform: translateY(-4px) rotate(3deg); }
}

.offline-dots {
  display: flex;
  gap: 6px;
  height: 10px;
  align-items: center;
}
.offline-dots span {
  display: block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--green-mid, #4A7D50);
  animation: offlineDotPulse 1.2s ease-in-out infinite;
}
.offline-dots span:nth-child(2) { animation-delay: .2s; background: var(--yellow, #CC9900); }
.offline-dots span:nth-child(3) { animation-delay: .4s; background: var(--pink-soft, #9c4460); }
@keyframes offlineDotPulse {
  0%,80%,100% { transform: scale(.6); opacity: .5; }
  40%         { transform: scale(1);   opacity: 1; }
}

.offline-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--text, #E8D4B8);
  margin-top: .4rem;
}

.offline-sub {
  font-size: .88rem;
  color: var(--text-mid, #A08060);
  line-height: 1.5;
}

.offline-retry-btn {
  margin-top: .6rem;
  padding: .5rem 1.5rem;
  background: var(--green-mid, #4A7D50);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, transform .1s;
}
.offline-retry-btn:hover  { background: var(--green-dark, #3A6B3E); }
.offline-retry-btn:active { transform: scale(.97); } */

/* ============================================================
   DM Call View (Discord-style call panel above messages)
   ============================================================ */
#dm-call-view {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: .6rem 1rem .5rem;
  background: var(--tan);
  border-bottom: 2px solid var(--tan-dark);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  height: auto;
  min-height: 120px;
  max-height: 60vh;
}


.dmc-header {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--brown-mid);
  flex-shrink: 0;
  padding-bottom: .5rem;
}

.dmc-label { color: var(--green-mid); }

.dmc-timer {
  font-variant-numeric: tabular-nums;
  color: var(--brown-mid);
  font-size: .82rem;
  font-weight: 600;
}

/* Participant grid */
.dmc-participants {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-wrap: nowrap;
  gap: .8rem;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  padding: .2rem 0;
}
/* Video layout: column with video section on top, avatar strip below */
.dmc-participants.has-video {
  flex-direction: column;
  align-items: stretch;
  gap: .4rem;
}

/* Video section fills remaining height */
.dmc-video-section {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: row;
  gap: .5rem;
  align-items: stretch;
}

/* Avatar strip at the bottom when video is active */
.dmc-avatar-strip {
  display: flex;
  flex-direction: row;
  gap: .5rem;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
}

.dmc-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .35rem;
  width: 90px;
  padding: .5rem .4rem .4rem;
  border-radius: 14px;
  background: var(--tan-dark);
  border: 2px solid transparent;
  transition: border-color .15s;
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}

.dmc-tile.speaking {
  border-color: var(--green-mid);
  box-shadow: 0 0 0 3px rgba(74,125,80,.25);
}

.dmc-tile-media {
  width: 56px; height: 56px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  background: var(--tan);
}

.dmc-tile-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
/* Video in DM tile */
.dmc-tile-media video {
  width: 100%; height: 100%;
  object-fit: contain;
  background: #000;
  border-radius: 8px;
}

/* Video tiles inside the video section fill available space */
.dmc-video-section .dmc-tile {
  flex: 1;
  min-width: 0;
  min-height: 0;
  width: auto;
  align-items: stretch;
  overflow: hidden;
  padding: .4rem .4rem .3rem;
}
.dmc-video-section .dmc-tile-media {
  flex: 1;
  min-height: 0;
  width: 100%;
  height: auto;
  border-radius: 10px;
  position: relative;
}
/* Avatar tiles in the bottom strip stay small */
.dmc-avatar-strip .dmc-tile {
  width: 80px;
  flex-shrink: 0;
}

/* Fullscreen button — shown on hover over any video tile */
.fullscreen-btn {
  position: absolute;
  top: 6px; right: 6px;
  width: 26px; height: 26px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  color: #fff;
  border: none;
  cursor: pointer;
  font-size: .85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity .15s;
  z-index: 5;
  flex-shrink: 0;
}
.vc-tile:hover .fullscreen-btn,
.dmc-tile-media:hover .fullscreen-btn { opacity: 1; }

/* Custom fullscreen overlay — works in Electron where requestFullscreen is blocked */
#video-fullscreen-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #000;
  z-index: 99999;
  align-items: center;
  justify-content: center;
}
#video-fullscreen-overlay.active { display: flex; }
#video-fullscreen-overlay video {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
#video-fullscreen-close {
  position: absolute;
  top: 14px; right: 18px;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 1.4rem;
  width: 38px; height: 38px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  z-index: 1;
  transition: background .15s;
}
#video-fullscreen-close:hover { background: rgba(255,255,255,.3); }

.dmc-tile-name {
  font-size: .75rem;
  font-weight: 700;
  color: var(--brown-dark);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 84px;
}

/* Controls */
.dmc-controls {
  display: flex;
  gap: .55rem;
  align-items: center;
  flex-shrink: 0;
  padding-top: .4rem;
  justify-content: center;
}

.dmc-ctrl {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .3rem;
  padding: .4rem .9rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 700;
  background: var(--tan-dark);
  color: var(--brown-dark);
  transition: background .15s, transform .1s;
}
.dmc-ctrl:hover  { filter: brightness(.93); }
.dmc-ctrl:active { transform: scale(.96); }
.dmc-ctrl.active { background: var(--green-mid); color: #fff; }

.dmc-leave {
  background: #c0392b;
  color: #fff;
}
.dmc-leave:hover { background: #a93226; }

/* ============================================================
   Server Roles Management
   ============================================================ */

.server-roles-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.3rem;
}

.role-list-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.6rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  transition: background 0.15s;
}
.dark .role-list-item {
  background: rgba(255, 255, 255, 0.04);
}
.role-list-item:hover {
  background: rgba(0, 0, 0, 0.08);
}
.dark .role-list-item:hover {
  background: rgba(255, 255, 255, 0.08);
}

.role-color-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(0, 0, 0, 0.1);
}

.role-list-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.role-list-actions {
  display: flex;
  gap: 0.3rem;
  flex-shrink: 0;
}

.role-action-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
  transition: background 0.15s;
}
.role-action-btn:hover {
  background: rgba(0, 0, 0, 0.1);
}
.role-action-btn.danger:hover {
  background: rgba(220, 53, 69, 0.15);
}

.role-color-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.role-color-presets {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .45rem;
}
.role-color-preset {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid rgba(0,0,0,.14);
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
  transition: transform .12s ease, box-shadow .12s ease;
}
.role-color-preset:hover {
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

#role-color-picker {
  width: 40px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  background: none;
  padding: 0;
}
#role-color-picker::-webkit-color-swatch-wrapper {
  padding: 2px;
}
#role-color-picker::-webkit-color-swatch {
  border: 2px solid rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

.role-perms-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.role-perm-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--brown-dark);
  cursor: pointer;
}
.dark .role-perm-toggle {
  color: var(--brown-light);
}
.role-perm-toggle input[type="checkbox"] {
  accent-color: var(--green-mid);
  width: 16px;
  height: 16px;
  cursor: pointer;
}

/* ══════════════════════════════════════════════════════════════
   📜  TERMS OF SERVICE MODAL
   ══════════════════════════════════════════════════════════════ */

.tos-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30,18,8,.72);
  z-index: 99000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  backdrop-filter: blur(3px);
}
.tos-card {
  background: var(--warm-white);
  border-radius: 18px;
  box-shadow: 0 16px 60px rgba(30,18,8,.28);
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.dark .tos-card { background: var(--bg-dark); }

.tos-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.4rem 1.8rem 1.1rem;
  border-bottom: 1.5px solid var(--tan-dark);
  flex-shrink: 0;
}
.dark .tos-header { border-bottom-color: var(--border-dark); }
.tos-logo { font-size: 2.4rem; line-height: 1; }
.tos-title {
  margin: 0 0 .2rem;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--brown-dark);
}
.dark .tos-title { color: var(--text-light); }
.tos-subtitle {
  margin: 0;
  font-size: .84rem;
  color: var(--brown-light);
}

.tos-body {
  padding: 1.2rem 1.8rem;
  overflow-y: auto;
  flex: 1;
  line-height: 1.65;
  color: var(--brown-dark);
  font-size: .88rem;
}
.dark .tos-body { color: var(--text-light); }

.tos-intro {
  background: color-mix(in srgb, var(--green-mid) 10%, var(--tan));
  border-left: 3px solid var(--green-mid);
  border-radius: 0 8px 8px 0;
  padding: .7rem 1rem;
  margin: 0 0 1.1rem;
  font-size: .87rem;
}
.dark .tos-intro { background: color-mix(in srgb, var(--green-mid) 12%, var(--bg-darker)); }

.tos-section-title {
  font-size: .92rem;
  font-weight: 700;
  color: var(--brown-dark);
  margin: 1.2rem 0 .35rem;
  padding-bottom: .2rem;
  border-bottom: 1px solid var(--tan-dark);
}
.dark .tos-section-title { color: var(--text-light); border-bottom-color: var(--border-dark); }
.tos-body p { margin: 0 0 .6rem; }
.tos-list {
  margin: .3rem 0 .6rem 1.1rem;
  padding: 0;
}
.tos-list li { margin-bottom: .3rem; }

.tos-footer-note {
  margin-top: 1.2rem;
  padding: .7rem 1rem;
  background: var(--tan);
  border-radius: 8px;
  font-size: .83rem;
  color: var(--brown-mid);
  text-align: center;
}
.dark .tos-footer-note { background: var(--bg-darker); color: var(--text-muted); }

.tos-actions {
  padding: 1rem 1.8rem 1.3rem;
  border-top: 1.5px solid var(--tan-dark);
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.dark .tos-actions { border-top-color: var(--border-dark); }
.tos-agree-btn {
  background: var(--green-mid);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: .75rem 2.4rem;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  font-family: inherit;
  transition: background .15s, transform .1s;
  box-shadow: 0 3px 12px rgba(74,168,111,.35);
}
.tos-agree-btn:hover { background: var(--green-dark); transform: translateY(-1px); }
.tos-agree-btn:active { transform: translateY(0); }

.tos-close-btn {
  background: var(--tan);
  color: var(--brown-mid);
  border: 1.5px solid var(--tan-dark);
  border-radius: 10px;
  padding: .65rem 2rem;
  font-size: .95rem; font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  transition: background .15s;
}
.tos-close-btn:hover { background: var(--tan-dark); }

/* TOS link on login screen */
.login-tos-link {
  text-align: center;
  font-size: .78rem;
  color: var(--brown-light);
  margin-top: .6rem;
}
.tos-inline-link {
  background: none; border: none; padding: 0;
  color: var(--green-dark);
  font-size: inherit; font-family: inherit;
  font-weight: 700; cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.tos-inline-link:hover { color: var(--green-mid); }

/* ══════════════════════════════════════════════════════════════
   🌿  SWEET DOCK
   ══════════════════════════════════════════════════════════════ */

.sweet-dock {
  --dock-panel-bg: linear-gradient(180deg, rgba(255,252,244,.98) 0%, rgba(244,233,214,.98) 100%);
  --dock-panel-border: rgba(120, 80, 40, .22);
  --dock-panel-ink: var(--brown-dark);
  --dock-panel-muted: #7d6044;
  --dock-input-bg: #f5e7cf;
  --dock-input-border: #b58755;
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 300px;
  background: linear-gradient(180deg, #fffef9 0%, #f5e5ce 100%);
  border: 2px solid #c8965a;
  border-radius: 18px;
  box-shadow: 0 8px 32px rgba(58,36,20,.18), 0 2px 10px rgba(58,36,20,.10), 0 0 0 1px rgba(200,150,80,.15);
  z-index: 8800;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  user-select: none;
  font-family: inherit;
  transition: box-shadow .2s;
}
.dark .sweet-dock {
  --dock-panel-bg: linear-gradient(180deg, rgba(30,37,31,.98) 0%, rgba(23,27,24,.98) 100%);
  --dock-panel-border: rgba(124, 163, 132, .18);
  --dock-panel-ink: var(--text-light);
  --dock-panel-muted: rgba(255,255,255,.72);
  --dock-input-bg: #1c241f;
  --dock-input-border: #5f7767;
  background: var(--bg-dark);
  border-color: var(--border-dark);
}
.sweet-dock:hover {
  box-shadow: 0 12px 40px rgba(58,36,20,.22), 0 4px 14px rgba(58,36,20,.12);
}

/* ── Header ── */
.sweet-dock-header {
  display: flex;
  flex-direction: column;
  background: var(--tan);
  border-bottom: 1.5px solid var(--tan-dark);
  cursor: grab;
}
.sweet-dock-header:active { cursor: grabbing; }
.dark .sweet-dock-header {
  background: var(--bg-darker);
  border-bottom-color: var(--border-dark);
}
.sweet-dock-title-row {
  display: flex;
  align-items: center;
  padding: .3rem .5rem .28rem .7rem;
}
.sweet-dock-title {
  font-size: .76rem;
  font-weight: 700;
  color: var(--brown-dark);
  flex: 1;
  white-space: nowrap;
}
.dark .sweet-dock-title { color: var(--text-light); }

/* ── Bento top row: pet (left) + fishing stats (right) ── */
.dock-top-row {
  display: flex;
  gap: .4rem;
  padding: .4rem .45rem .3rem;
  background: linear-gradient(180deg, rgba(255,255,255,.28) 0%, rgba(239,224,201,.18) 100%);
  border-bottom: 1px solid var(--tan-dark);
}
.dark .dock-top-row { border-bottom-color: var(--border-dark); }

/* Pet column */
.dock-top-pet-col {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  width: 128px;
  flex-shrink: 0;
}
.dock-top-pet-col .pet-canvas {
  width: 128px !important;
  height: 68px !important;
  border-radius: 8px;
}
.dock-top-pet-col .dock-pet-welcome {
  width: 128px;
  padding: .3rem .2rem;
}
.dock-top-pet-col .dock-pet-welcome-opts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
}
.dock-top-pet-col .dock-pet-welcome-btn {
  padding: .18rem .1rem .14rem;
}
.dock-top-pet-col .dock-pet-welcome-name {
  font-size: .48rem;
}

/* Fishing stats column */
.dock-top-fishing-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .28rem;
  min-width: 0;
}
.dock-top-fishing-col .fishing-hud {
  gap: .22rem;
  margin-bottom: 0;
}
.dock-top-fishing-col .fishing-hud span {
  padding: .1rem .32rem;
  font-size: .68rem;
}
.dock-top-fishing-col .fishing-xp-card {
  padding: .28rem .35rem;
}
.dock-top-fishing-col .fishing-xp-label-row {
  font-size: .64rem;
  margin-bottom: .2rem;
  gap: .2rem;
}
/* ── Unified tab bar (in body, not header) ── */
.sweet-dock-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: .14rem .4rem .16rem;
  border-bottom: 1.5px solid var(--tan-dark);
  background: var(--tan);
  flex-shrink: 0;
}
.dark .sweet-dock-tabs { border-bottom-color: var(--border-dark); }

/* Thin vertical separator between fishing and dock tabs */
.dock-tab-sep {
  width: 1.5px;
  height: 16px;
  background: var(--tan-dark);
  opacity: .6;
  margin: 0 1px;
  flex-shrink: 0;
  border-radius: 2px;
}
.dark .dock-tab-sep { background: var(--border-dark); }

/* Unified tab bar: both fishing-tab-btn and dock-tab-btn are compact, non-growing */
.sweet-dock-tabs .fishing-tab-btn,
.sweet-dock-tabs .dock-tab-btn {
  flex: none;
  font-size: .82rem;
  padding: 3px 5px;
  min-width: 0;
}
.dock-tab-btn {
  background: rgba(255,255,255,.42);
  border: none;
  border-radius: 9px;
  padding: 4px 6px;
  font-size: .95rem;
  cursor: pointer;
  opacity: .68;
  transition: opacity .15s, background .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.dock-tab-btn:hover { opacity: 1; background: rgba(255,255,255,.72); transform: translateY(-2px); box-shadow: 0 3px 8px rgba(58,36,20,.12); }
.dock-tab-btn.active {
  opacity: 1;
  background: rgba(107,171,110,.22);
  box-shadow: 0 0 0 1.5px var(--green-mid);
  transform: none;
}
.dock-launch-btn.dock-launch-minimized {
  opacity: .95;
  background: rgba(248, 216, 104, .18);
}

.sweet-dock-minimize {
  background: none;
  border: none;
  font-size: 1rem;
  line-height: 1;
  color: var(--brown-light);
  cursor: pointer;
  padding: 0 3px;
  border-radius: 4px;
  transition: color .15s;
}
.sweet-dock-minimize:hover { color: var(--brown-dark); }
.dark .sweet-dock-minimize:hover { color: var(--text-light); }

/* ── Body ── */
.sweet-dock-body {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  flex: 1;
}
.sweet-dock.minimized .sweet-dock-body { display: none; }

/* ── Content area: fishing canvas/tab-content OR dock panels ── */
.dock-content-area {
  max-height: 172px;
  overflow-y: auto;
  padding: .4rem .45rem .42rem;
  background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(239,224,201,.22) 100%);
  display: flex;
  flex-direction: column;
}
.dock-content-area .dock-panel {
  gap: .35rem;
  padding: 0;
  border: none;
  box-shadow: none;
  background: none;
}
.dock-content-area .dock-todo-list {
  max-height: none; /* parent already constrains height */
}
.dock-content-area .fishing-stage-card {
  margin-bottom: .2rem;
  border-radius: 8px;
}
#fishing-content-wrapper {
  display: flex;
  flex-direction: column;
}
/* fishing canvas stays at 200×140 logical size inside the content area */
#fishing-canvas {
  width: 272px;
  height: 184px;
  margin: 0 auto;
  display: block;
}

/* Legacy divider selectors kept for any rendered HTML references */
.dock-section-divider { display: none; }

/* ── Panels ── */
.dock-panel {
  display: flex;
  flex-direction: column;
  gap: .45rem;
  padding: .55rem;
  border-radius: 14px;
  background: var(--dock-panel-bg);
  border: 1px solid var(--dock-panel-border);
  color: var(--dock-panel-ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22);
}
.dock-panel.hidden { display: none; }

/* ── First-time pet welcome overlay ── */
.dock-pet-welcome {
  background: var(--warm-white);
  border: 1.5px solid var(--tan-dark);
  border-radius: 10px;
  padding: .55rem .4rem .5rem;
  text-align: center;
  display: flex; flex-direction: column; gap: .45rem;
}
.dark .dock-pet-welcome { background: var(--bg-dark); border-color: var(--border-dark); }
.dock-pet-welcome-title {
  font-size: .73rem; font-weight: 800;
  color: var(--brown-dark);
}
.dark .dock-pet-welcome-title { color: var(--text-light); }
.dock-pet-welcome-opts {
  display: flex; justify-content: space-between; gap: 2px;
}
.dock-pet-welcome-btn {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--tan); border: 1.5px solid var(--tan-dark);
  border-radius: 8px; padding: .3rem .2rem .25rem;
  cursor: pointer; font-family: inherit;
  transition: border-color .12s, background .12s, transform .1s;
  flex: 1;
}
.dock-pet-welcome-btn:hover { border-color: var(--green-mid); background: var(--green-pale); transform: translateY(-2px); }
.dark .dock-pet-welcome-btn { background: var(--bg-darker); border-color: var(--border-dark); }
.dock-pet-welcome-emoji { font-size: 1.3rem; line-height: 1; }
.dock-pet-welcome-name  { font-size: .55rem; font-weight: 700; color: var(--brown-mid); white-space: nowrap; }

/* ── Pet Panel ── */
.pet-canvas {
  display: block;
  width: 196px;
  height: 104px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 10px;
  background: var(--tan);
  border: 1.5px solid var(--tan-dark);
}
.dark .pet-canvas {
  background: var(--bg-darker);
  border-color: var(--border-dark);
}
.pet-info-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  padding: 0 .05rem;
}
.pet-name-label {
  font-size: .74rem;
  font-weight: 600;
  color: var(--brown-dark);
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  border-radius: 4px;
  padding: 1px 3px;
  transition: background .12s;
}
.pet-name-label:hover { background: rgba(0,0,0,.06); }
.dark .pet-name-label { color: var(--text-light); }
.dark .pet-name-label:hover { background: rgba(255,255,255,.08); }
.pet-name-input {
  font-family: 'Nunito', sans-serif;
  font-size: .74rem;
  font-weight: 600;
  color: var(--brown-dark);
  background: var(--warm-white);
  border: 1.5px solid var(--green-mid);
  border-radius: 4px;
  padding: 1px 4px;
  width: 100%;
  outline: none;
}
.dark .pet-name-input { background: var(--bg-darker); color: var(--text-light); border-color: var(--border-dark); }
.pet-mood-bar-wrap {
  flex: 1;
  height: 6px;
  background: var(--tan-dark);
  border-radius: 3px;
  overflow: hidden;
}
.pet-mood-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #f5a220, #52a868);
  border-radius: 3px;
  transition: width .9s ease;
}
.pet-feed-btn {
  background: rgba(248,196,60,.12);
  border: 1.5px solid rgba(200,150,30,.4);
  border-radius: 8px;
  padding: 2px 7px;
  font-size: .85rem;
  cursor: pointer;
  transition: transform .12s, background .15s;
}
.pet-feed-btn:hover { background: rgba(248,196,60,.24); transform: scale(1.18) rotate(-6deg); box-shadow: 0 2px 8px rgba(200,150,30,.22); }
.pet-feed-btn:active { transform: scale(.92) rotate(0deg); }
.pet-status {
  font-size: .69rem;
  color: var(--brown-light);
  text-align: center;
  min-height: 13px;
}
.friend-pet-row {
  display: flex;
  align-items: center;
  gap: .3rem;
  font-size: .68rem;
  color: var(--brown-light);
  background: rgba(120,80,40,.07);
  border-radius: 7px;
  padding: .18rem .5rem;
  margin: .2rem .3rem 0;
  border: 1px dashed rgba(120,80,40,.18);
}

/* ── Shared input / icon-btn ── */
.dock-input {
  background: var(--dock-input-bg);
  border: 1.5px solid var(--dock-input-border);
  border-radius: 8px;
  padding: .28rem .45rem;
  font-size: .74rem;
  color: var(--dock-panel-ink);
  font-family: inherit;
  outline: none;
  min-width: 0;
  color-scheme: light;
}
.dock-input::placeholder { color: var(--dock-panel-muted); opacity: 1; }
.dock-input:focus { border-color: var(--green-mid); box-shadow: 0 0 0 3px rgba(107,171,110,.12); }
.dark .dock-input {
  background: var(--dock-input-bg);
  border-color: var(--dock-input-border);
  color: var(--dock-panel-ink);
  color-scheme: dark;
}
.dock-time-input::-webkit-calendar-picker-indicator,
.dock-select::-webkit-calendar-picker-indicator {
  opacity: .8;
  cursor: pointer;
}
.dock-icon-btn {
  background: var(--green-mid);
  color: #fff;
  border: none;
  border-radius: 8px;
  width: 26px;
  height: 26px;
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .15s;
}
.dock-icon-btn:hover { background: var(--green-dark); }

/* ── Todo Panel ── */
.dock-todo-add { display: flex; gap: .3rem; }
.dock-todo-list {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  max-height: 130px;
  overflow-y: auto;
}
.dock-todo-item {
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .22rem .3rem;
  border-radius: 7px;
  background: rgba(255,255,255,.5);
  font-size: .74rem;
  color: var(--dock-panel-ink);
  transition: background .12s;
}
.dock-todo-item.done .dock-todo-text {
  text-decoration: line-through;
  opacity: .45;
}
.dark .dock-todo-item { background: var(--bg-darker); color: var(--text-light); }
.dock-todo-check {
  width: 14px;
  height: 14px;
  accent-color: var(--green-mid);
  flex-shrink: 0;
  cursor: pointer;
}
.dock-todo-text { flex: 1; word-break: break-word; }
.dock-todo-del {
  background: none;
  border: none;
  color: var(--brown-light);
  cursor: pointer;
  font-size: .78rem;
  padding: 0 2px;
  border-radius: 3px;
  line-height: 1;
}
.dock-todo-del:hover { color: var(--red-soft); }
.dock-empty-hint {
  font-size: .71rem;
  color: var(--brown-light);
  text-align: center;
  padding: .5rem 0;
}

/* ── Water Panel ── */
.dock-water-label {
  font-size: .77rem;
  color: var(--dock-panel-ink);
  font-weight: 600;
  text-align: center;
}
.dark .dock-water-label { color: var(--text-light); }
.dock-water-glasses {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: .28rem;
}
.dock-glass {
  aspect-ratio: 1;
  background: linear-gradient(180deg, #f7fbff 0%, #d9eefb 100%);
  border: 2px solid #7fb8d8;
  border-radius: 9px;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .1s, background .15s, border-color .15s;
}
.dock-glass:hover { transform: scale(1.1); }
.dock-glass.filled {
  background: linear-gradient(180deg, #d9f2ff 0%, #8fd1f4 100%);
  border-color: #4aa6d9;
}
.dark .dock-glass { background: var(--bg-darker); border-color: var(--border-dark); }
.dark .dock-glass.filled { background: #1a3a5a; border-color: #4480b8; }
.dock-water-remind-row {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .71rem;
  color: var(--dock-panel-muted);
  padding-top: .1rem;
}
.dock-panel-label { font-size: .71rem; color: var(--dock-panel-muted); }
.dock-select {
  background: var(--dock-input-bg);
  border: 1.5px solid var(--dock-input-border);
  border-radius: 6px;
  padding: .14rem .3rem;
  font-size: .71rem;
  color: var(--dock-panel-ink);
  cursor: pointer;
  font-family: inherit;
  color-scheme: light;
}
.dock-select option {
  background: #f5e7cf;
  color: #3d2008;
}
.dark .dock-select {
  background: var(--dock-input-bg);
  border-color: var(--dock-input-border);
  color: var(--dock-panel-ink);
  color-scheme: dark;
}
.dark .dock-select option {
  background: #1c241f;
  color: #f0ede8;
}

/* ── Reminders Panel ── */
.dock-remind-add {
  display: grid;
  gap: .38rem;
  grid-template-columns: minmax(0, 1fr) 86px 28px;
  align-items: center;
}
.dock-time-input { width: 76px; flex: 0 0 76px; }
.dock-remind-list {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  max-height: 120px;
  overflow-y: auto;
}
.dock-remind-item {
  display: flex;
  align-items: center;
  gap: .38rem;
  padding: .32rem .38rem;
  border-radius: 10px;
  background: linear-gradient(180deg, #f7fbff 0%, #dbeef7 100%);
  border: 1px solid rgba(91, 151, 184, .28);
  font-size: .73rem;
  color: #284d5c;
}
.dark .dock-remind-item { background: rgba(43, 63, 74, .92); color: var(--text-light); }
.dock-remind-time-badge {
  background: #4e9bc3;
  color: #fff;
  border-radius: 4px;
  padding: 1px 5px;
  font-size: .67rem;
  font-weight: 700;
  flex-shrink: 0;
}
.dock-remind-text { flex: 1; }
.dock-remind-del {
  background: none;
  border: none;
  color: var(--brown-light);
  cursor: pointer;
  font-size: .78rem;
  padding: 0 2px;
  line-height: 1;
}
.dock-remind-del:hover { color: var(--red-soft); }

/* ── Pet Shop panel ── */
.petshop-gold-row {
  font-size: .82rem; padding: .35rem .5rem .5rem;
  color: var(--brown-dark); border-bottom: 1px solid rgba(0,0,0,.06); margin-bottom: .3rem;
}
.dark .petshop-gold-row { color: var(--tan); }
.petshop-item {
  display: flex; align-items: center; gap: .45rem;
  padding: .3rem .45rem; border-radius: 8px;
  font-size: .78rem;
}
.petshop-item:hover { background: rgba(0,0,0,.04); }
.dark .petshop-item:hover { background: rgba(255,255,255,.05); }
.petshop-item-emoji { font-size: 1.1rem; flex-shrink: 0; }
.petshop-item-name { flex: 1; font-weight: 600; color: var(--brown-dark); }
.dark .petshop-item-name { color: var(--tan); }
.petshop-btn {
  flex-shrink: 0; font-size: .72rem; font-weight: 700; padding: .2rem .55rem;
  border-radius: 20px; border: none; cursor: pointer; transition: filter .12s;
}
.petshop-btn:hover { filter: brightness(1.1); }
.petshop-btn-buy { background: var(--green-dark); color: white; }
.petshop-btn-own { background: rgba(90,154,94,.18); color: var(--green-dark); border: 1.5px solid rgba(90,154,94,.4); }
.petshop-btn-equipped { background: var(--green-dark); color: white; }
.dark .petshop-btn-own { color: #7de898; border-color: rgba(74,222,128,.3); }

/* ── Extras: pet chooser in settings ── */
.sweet-dock-settings {
  margin-top: .9rem;
  padding: .8rem;
  background: var(--tan);
  border-radius: 11px;
  border: 1.5px solid var(--tan-dark);
}
.dark .sweet-dock-settings {
  background: var(--bg-darker);
  border-color: var(--border-dark);
}
.dock-pet-options {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  margin-bottom: .2rem;
}
.dock-pet-opt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .18rem;
  padding: .42rem .5rem;
  background: var(--warm-white);
  border: 2px solid var(--tan-dark);
  border-radius: 11px;
  cursor: pointer;
  font-size: .69rem;
  color: var(--brown-dark);
  transition: border-color .15s, background .15s, transform .1s;
  min-width: 54px;
}
.dark .dock-pet-opt {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  color: var(--text-light);
}
.dock-pet-opt:hover { border-color: var(--green-mid); transform: translateY(-1px); }
.dock-pet-opt.selected {
  border-color: var(--green-mid);
  background: color-mix(in srgb, var(--green-mid) 12%, var(--warm-white));
}
.dark .dock-pet-opt.selected {
  background: color-mix(in srgb, var(--green-mid) 14%, var(--bg-dark));
}
.dock-pet-opt-emoji { font-size: 1.45rem; }
.dock-pet-opt-locked {
  opacity: .6;
  filter: grayscale(.4);
}
.dock-pet-lock {
  font-size: .6rem;
  display: block;
  color: #c08000;
  font-weight: 700;
}

/* Pet shop section in fishing dock */
.fishing-pet-shop-card {
  margin-top: .7rem;
  padding: .6rem .7rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--tan) 35%, transparent);
  border: 1.5px solid var(--tan-dark);
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.dark .fishing-pet-shop-card {
  background: rgba(255,255,255,.04);
  border-color: var(--border-dark);
}
.fishing-pet-shop-item {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .45rem .5rem;
  border-radius: 8px;
  background: var(--warm-white);
  border: 1px solid var(--tan-dark);
}
.dark .fishing-pet-shop-item {
  background: var(--bg-dark);
  border-color: var(--border-dark);
}
.fishing-pet-shop-item.owned {
  border-color: var(--green-mid);
  background: color-mix(in srgb, var(--green-mid) 8%, var(--warm-white));
}
.dark .fishing-pet-shop-item.owned {
  background: color-mix(in srgb, var(--green-mid) 10%, var(--bg-dark));
  border-color: var(--green-mid);
}
.fishing-pet-shop-emoji { font-size: 1.35rem; flex-shrink: 0; }
.fishing-pet-shop-copy { flex: 1; min-width: 0; }
.fishing-pet-shop-copy strong { display: block; font-size: .74rem; }
.fishing-pet-shop-copy span   { font-size: .67rem; opacity: .7; }
.fishing-pet-shop-owned { font-size: .67rem; color: var(--green-mid); font-weight: 700; flex-shrink: 0; }
button.disabled { opacity: .45; pointer-events: none; }

.server-leaderboard-btn {
  margin-right: .1rem;
}

.fishing-char-settings {
  margin-top: .9rem;
  padding: .8rem;
  background: var(--tan);
  border-radius: 11px;
  border: 1.5px solid var(--tan-dark);
}
.dark .fishing-char-settings {
  background: var(--bg-darker);
  border-color: var(--border-dark);
}
.fishing-char-settings-header,
.fishing-char-settings-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}
.fishing-char-preview-row {
  display: flex;
  gap: .9rem;
  align-items: flex-start;
  margin-top: .8rem;
}
#char-preview-canvas {
  width: 96px;
  height: 96px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: linear-gradient(180deg, #c8e6f5 0%, #c8e6f5 62%, #7bbcd8 62%, #7bbcd8 78%, #a8d4a4 78%, #a8d4a4 100%);
  border-radius: 10px;
  border: 1.5px solid var(--tan-dark);
  flex: 0 0 auto;
}
.dark #char-preview-canvas {
  border-color: var(--border-dark);
}
.fishing-char-grid {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .55rem;
}
.fishing-char-grid label {
  display: flex;
  flex-direction: column;
  gap: .25rem;
  font-size: .78rem;
  color: var(--brown-dark);
}
.dark .fishing-char-grid label {
  color: var(--text-light);
}
.fishing-char-grid select {
  background: var(--warm-white);
  border: 1.5px solid var(--tan-dark);
  border-radius: 8px;
  padding: .35rem .45rem;
  font-family: inherit;
  font-size: .78rem;
  color: var(--brown-dark);
  color-scheme: light;
}
.fishing-char-grid select option {
  background: #fffaf2;
  color: #3d2008;
}
.dark .fishing-char-grid select {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  color: var(--text-light);
  color-scheme: dark;
}
.dark .fishing-char-grid select option {
  background: #1a2020;
  color: #f0ede8;
}

.fishing-dock {
  position: fixed;
  bottom: 20px;
  left: 20px;
  width: 304px;
  background: linear-gradient(180deg, var(--warm-white) 0%, var(--tan) 100%);
  color: var(--brown-dark);
  border: 2px solid var(--tan-dark);
  border-radius: 20px;
  box-shadow: 0 14px 38px rgba(58,36,20,.24);
  z-index: 8795;
  user-select: none;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.dark .fishing-dock {
  background: linear-gradient(180deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
  color: var(--text-light);
  border-color: var(--border-dark);
  box-shadow: 0 14px 38px rgba(0,0,0,.5);
}
.fishing-dock.minimized .fishing-dock-body { display: none; }
.fishing-dock.minimized .fishing-dock-header { border-bottom: none; }
.fishing-dock-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .45rem .6rem;
  background: var(--tan);
  border-bottom: 1.5px solid var(--tan-dark);
  cursor: grab;
}
.dark .fishing-dock-header {
  background: var(--bg-darker);
  border-bottom-color: var(--border-dark);
}
.fishing-dock-title {
  font-size: .8rem;
  font-weight: 800;
  color: var(--brown-dark);
}
.dark .fishing-dock-title {
  color: var(--text-light);
}
.fishing-dock-controls {
  display: flex;
  gap: .2rem;
}
.fishing-dock-controls button {
  background: rgba(255,255,255,.34);
  border: none;
  color: var(--brown-dark);
  cursor: pointer;
  font-size: .9rem;
  border-radius: 6px;
  min-width: 22px;
  min-height: 22px;
}
.fishing-dock-controls button:hover {
  background: rgba(0,0,0,.06);
  color: var(--brown-dark);
}
.dark .fishing-dock-controls button:hover {
  background: rgba(255,255,255,.08);
  color: var(--text-light);
}
.fishing-dock-body {
  padding: .5rem;
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fishing-stage-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  overflow: hidden;
  border: 2px solid #c8965a;
  box-shadow: inset 0 2px 8px rgba(58,36,20,.08);
  min-height: 196px;
  padding: .3rem;
  background: linear-gradient(180deg, rgba(255,255,255,.35) 0%, rgba(225,196,156,.18) 100%);
}
.fishing-hud {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  font-size: .72rem;
  color: var(--brown-dark);
  margin-bottom: 0;
}
.fishing-hud span {
  display: inline-flex;
  align-items: center;
  gap: .2rem;
  padding: .32rem .5rem;
  border-radius: 999px;
  background: var(--warm-white);
  border: 1px solid var(--tan-dark);
  font-weight: 700;
  transition: transform .12s;
}
.fishing-hud span:hover { transform: scale(1.06); }
/* Gold badge — warm yellow tint */
#fishing-gold {
  background: rgba(248,196,60,.18);
  border-color: rgba(200,150,30,.35);
  color: #7a5200;
}
.dark #fishing-gold {
  background: rgba(248,196,60,.14);
  border-color: rgba(248,196,60,.28);
  color: #f5d080;
}
/* Bait badge — green tint */
#fishing-bait {
  background: rgba(82,160,100,.14);
  border-color: rgba(82,160,100,.32);
  color: var(--green-dark);
}
.dark #fishing-bait {
  background: rgba(82,160,100,.18);
  border-color: rgba(82,160,100,.35);
  color: #7dcf95;
}
/* Level badge — cool blue tint */
#fishing-level {
  background: rgba(80,120,200,.12);
  border-color: rgba(80,120,200,.28);
  color: #2a4a8a;
}
.dark .fishing-hud {
  color: var(--text-light);
}
.dark .fishing-hud span {
  background: rgba(255,255,255,.08);
  border-color: var(--border-dark);
}
.dark #fishing-level {
  background: rgba(100,150,240,.14);
  border-color: rgba(100,150,240,.3);
  color: #a0c0ff;
}
/* ── Catch Streak badge ─────────────────────────────────────────────────── */
.fishing-streak-badge {
  background: rgba(255,140,0,.18);
  border-color: rgba(220,100,0,.4);
  color: #a04000;
  font-weight: 800;
  animation: streak-pulse 1.8s ease-in-out infinite;
}
.dark .fishing-streak-badge {
  background: rgba(255,160,30,.16);
  border-color: rgba(255,160,30,.4);
  color: #ffb84d;
}
/* Intensity tiers — color shifts as streak grows */
.streak-lvl-3, .fishing-streak-row.streak-lvl-3 { color: #b05000; }
.streak-lvl-5, .fishing-streak-row.streak-lvl-5 { color: #c03000; }
.streak-lvl-7, .fishing-streak-row.streak-lvl-7 {
  color: #d00000;
  background: rgba(255,60,0,.18);
  border-color: rgba(200,40,0,.4);
}
.dark .streak-lvl-7 { color: #ff6060; background: rgba(220,40,0,.2); }
@keyframes streak-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,120,0,.25); }
  50%       { box-shadow: 0 0 0 5px rgba(255,120,0,0); }
}
/* Rod tab inline streak row */
.fishing-streak-row {
  display: flex;
  align-items: center;
  gap: .35rem;
  padding: .4rem .65rem;
  border-radius: 10px;
  background: rgba(255,140,0,.12);
  border: 1px solid rgba(220,100,0,.3);
  font-size: .75rem;
  color: #8a3a00;
  margin-bottom: .25rem;
}
.dark .fishing-streak-row {
  background: rgba(255,140,0,.12);
  border-color: rgba(255,160,30,.28);
  color: #ffb060;
}
.fishing-xp-card {
  padding: .55rem .6rem;
  border-radius: 10px;
  background: var(--warm-white);
  border: 1px solid var(--tan-dark);
}
.dark .fishing-xp-card {
  background: var(--bg-darker);
  border-color: var(--border-dark);
}
.fishing-xp-label-row {
  display: flex;
  justify-content: space-between;
  gap: .75rem;
  font-size: .72rem;
  color: var(--brown-dark);
  margin-bottom: .35rem;
}
.fishing-xp-bar {
  height: 7px;
  background: var(--tan-dark);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 0;
}
#fishing-xp-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green-mid), #6dc9dc, #a8e6b0, #6dc9dc);
  background-size: 200% 100%;
  animation: xp-shine 2.4s linear infinite;
  border-radius: 999px;
  transition: width .25s ease;
}
#fishing-canvas {
  display: block;
  width: 272px;
  height: 184px;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  border-radius: 0;
  margin: 0 auto;
}
@keyframes xp-shine {
  0%   { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}
@keyframes boost-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82,160,100,.0); }
  50%       { box-shadow: 0 0 0 3px rgba(82,160,100,.32); }
}
@keyframes rainbow-border {
  0%   { box-shadow: 0 0 0 3px #ff6b6b; }
  16%  { box-shadow: 0 0 0 3px #ffa94d; }
  33%  { box-shadow: 0 0 0 3px #ffe066; }
  50%  { box-shadow: 0 0 0 3px #69db7c; }
  66%  { box-shadow: 0 0 0 3px #4dabf7; }
  83%  { box-shadow: 0 0 0 3px #cc5de8; }
  100% { box-shadow: 0 0 0 3px #ff6b6b; }
}
#fishing-canvas.rainbow-catch {
  animation: rainbow-border .6s linear infinite;
  border-radius: 4px;
}
.fishing-tabs {
  display: flex;
  gap: .3rem;
  margin-top: 0;
}
.fishing-tab-btn {
  flex: 1;
  border: 1.5px solid var(--tan-dark);
  background: var(--tan);
  color: var(--brown-dark);
  font-weight: 700;
  border-radius: 8px;
  padding: .35rem;
  cursor: pointer;
  font-size: .9rem;
  transition: background .13s, border-color .13s, transform .1s, box-shadow .13s;
}
.fishing-tab-btn:hover {
  background: rgba(255,255,255,.75);
  transform: translateY(-2px);
  box-shadow: 0 3px 8px rgba(58,36,20,.13);
}
.fishing-tab-btn:active { transform: scale(.93); }
.dark .fishing-tab-btn {
  background: var(--bg-darker);
  border-color: var(--border-dark);
  color: var(--text-light);
}
.fishing-tab-btn.active {
  background: var(--green-mid);
  color: white;
  border-color: var(--green-dark);
  box-shadow: 0 2px 8px rgba(82,160,100,.35);
  transform: none;
}
.fishing-tab-content {
  margin-top: 0;
  font-size: .76rem;
  color: var(--brown-dark);
  padding: .2rem .15rem .45rem;
  min-height: 0;
  max-height: none;
  height: auto;
  overflow: visible;
}
.dark .fishing-tab-content {
  color: var(--text-light);
}
.fishing-forage-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .6rem;
  border-radius: 8px;
  background: var(--warm-white);
  border: 2px solid var(--green-mid, #5a7a4a);
}
.fishing-forage-banner strong {
  display: block;
  font-size: .8rem;
  color: var(--brown-dark);
}
.fishing-forage-banner span {
  font-size: .74rem;
  color: var(--brown-mid);
  line-height: 1.35;
}
.dark .fishing-forage-banner {
  background: var(--bg-dark);
  border-color: var(--green-mid, #5a7a4a);
}
.fishing-no-bait-warning {
  font-size: .76rem;
  font-weight: 700;
  padding: .4rem .55rem;
  border-radius: 6px;
  background: #fff3cd;
  border: 1px solid #f0a500;
  color: #7a4f00;
  line-height: 1.4;
}
.dark .fishing-no-bait-warning {
  background: #3d2e00;
  border-color: #a06800;
  color: #ffd97a;
}
@keyframes vc-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(82,160,240,.55); }
  50%       { box-shadow: 0 0 0 5px rgba(82,160,240,.0); }
}
@keyframes vc-glow-drift {
  0%   { opacity: .55; transform: scale(1); }
  50%  { opacity: .85; transform: scale(1.08); }
  100% { opacity: .55; transform: scale(1); }
}
.fishing-vc-bonus-badge {
  position: relative;
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 7px 10px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ddf0ff 0%, #c8e8ff 100%);
  border: 1.5px solid #6aafe6;
  color: #1a5fa0;
  animation: vc-pulse 2s ease-in-out infinite;
  overflow: hidden;
}
.fishing-vc-badge-glow {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 50%, rgba(100,180,255,.35) 0%, transparent 70%);
  animation: vc-glow-drift 3s ease-in-out infinite;
  pointer-events: none;
}
.fishing-vc-badge-icon {
  font-size: 1.15rem;
  flex-shrink: 0;
  z-index: 1;
}
.fishing-vc-badge-copy {
  display: flex;
  flex-direction: column;
  gap: 1px;
  z-index: 1;
}
.fishing-vc-badge-copy strong {
  font-size: .76rem;
  font-weight: 800;
  color: #1244a0;
}
.fishing-vc-badge-copy span {
  font-size: .70rem;
  color: #2a6bc0;
  opacity: .9;
}
.dark .fishing-vc-bonus-badge {
  background: linear-gradient(135deg, #0d2a40 0%, #112a42 100%);
  border-color: #3b7ec8;
  color: #8ec8f8;
}
.dark .fishing-vc-badge-copy strong { color: #a8d8ff; }
.dark .fishing-vc-badge-copy span   { color: #6eb8f0; }
.fishing-mult-hint {
  opacity: .8;
  font-style: italic;
}
.fishing-rod-panel,
.fishing-afk-card {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  padding: .6rem .7rem;
  background: var(--tan, #f5f0e8);
  border: 1px solid var(--tan-dark, #d4c9b0);
  border-radius: 8px;
  margin-bottom: .4rem;
}
.dark .fishing-afk-card {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.fishing-progress-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}
.fishing-progress-card,
.fishing-afk-summary-card {
  display: flex;
  flex-direction: column;
  gap: .28rem;
  padding: .6rem;
  border-radius: 10px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar, var(--warm-white)) 88%, white 12%) 0%, color-mix(in srgb, var(--accent-alt, var(--green-light)) 8%, var(--bg-sidebar, var(--warm-white)) 92%) 100%);
  border: 1px solid color-mix(in srgb, var(--accent, var(--green-mid)) 28%, var(--tan-dark) 72%);
}
.dark .fishing-progress-card,
.dark .fishing-afk-summary-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar, var(--bg-dark)) 90%, rgba(255,255,255,.05) 10%) 0%, color-mix(in srgb, var(--accent, var(--green-mid)) 10%, var(--bg-sidebar, var(--bg-dark)) 90%) 100%);
  border-color: color-mix(in srgb, var(--accent-alt, var(--green-light)) 22%, var(--border-dark) 78%);
}
.fishing-progress-card-label {
  font-size: .7rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brown-mid);
  font-weight: 800;
}
.dark .fishing-progress-card-label {
  color: rgba(255,255,255,.7);
}
.fishing-progress-card strong,
.fishing-afk-summary-pill strong,
.fishing-inbox-row strong,
.fishing-journal-row strong,
.fishing-history-card strong,
.fishing-quest-row strong,
.fishing-party-mission-top strong {
  color: var(--brown-dark);
}
.dark .fishing-progress-card strong,
.dark .fishing-afk-summary-pill strong,
.dark .fishing-inbox-row strong,
.dark .fishing-journal-row strong,
.dark .fishing-history-card strong,
.dark .fishing-quest-row strong,
.dark .fishing-party-mission-top strong {
  color: var(--text-light);
}
.fishing-afk-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .4rem;
}
.fishing-afk-summary-pill {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  padding: .5rem .55rem;
  border-radius: 10px;
  background: rgba(255,255,255,.55);
  border: 1px solid rgba(120,80,40,.12);
}
.dark .fishing-afk-summary-pill {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.fishing-afk-summary-pill span {
  color: var(--brown-mid);
  font-size: .68rem;
}
.dark .fishing-afk-summary-pill span {
  color: rgba(255,255,255,.72);
}
.fishing-afk-toggles {
  display: flex;
  flex-direction: column;
  gap: .25rem;
}
.fishing-afk-toggle {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .78rem;
  cursor: pointer;
  color: var(--brown-dark);
}
.dark .fishing-afk-toggle {
  color: rgba(255,255,255,.85);
}
.fishing-afk-toggle input[type="checkbox"] {
  accent-color: var(--green-dark, #3a7d44);
  width: 14px;
  height: 14px;
  cursor: pointer;
  flex-shrink: 0;
}
.fishing-shop-card {
  display: flex;
  flex-direction: column;
  gap: .45rem;
}
.fishing-status-pill {
  display: inline-flex;
  align-self: flex-start;
  padding: .22rem .45rem;
  border-radius: 999px;
  background: rgba(91,173,111,.16);
  color: var(--green-dark);
  font-weight: 700;
}
.fishing-mini-copy,
.fishing-recent-catch,
.fishing-empty-state {
  color: var(--brown-mid);
  line-height: 1.45;
}
.dark .fishing-mini-copy,
.dark .fishing-recent-catch,
.dark .fishing-empty-state {
  color: rgba(255,255,255,.72);
}
.fishing-panel-actions,
.fishing-shop-actions {
  display: grid;
  gap: .35rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: stretch;
}
.fishing-panel-actions .fishing-action-btn,
.fishing-shop-actions .fishing-action-btn {
  min-height: 36px;
}
.fishing-quick-help {
  padding: .45rem .55rem;
  border-radius: 10px;
  background: linear-gradient(180deg, rgba(255,255,255,.85) 0%, rgba(233,245,255,.72) 100%);
  color: var(--brown-mid);
  line-height: 1.4;
}
.dark .fishing-quick-help {
  background: rgba(255,255,255,.06);
  color: rgba(255,255,255,.82);
}
.fishing-action-btn,
.fishing-mini-btn {
  font-size: .72rem;
  padding: .35rem .55rem;
}
.fishing-mini-btn {
  border: 1px solid var(--tan-dark);
  background: var(--warm-white);
  color: var(--brown-dark);
  border-radius: 8px;
  cursor: pointer;
}
.dark .fishing-mini-btn {
  background: var(--bg-dark);
  border-color: var(--border-dark);
  color: var(--text-light);
}
.fish-inv-row {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem 0;
  border-bottom: 1px solid rgba(120,80,40,.12);
}
.fish-preview-canvas { image-rendering: pixelated; }
.fish-rarity-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--rarity-color);
  flex: 0 0 auto;
}
.fish-row-copy {
  display: flex;
  flex-direction: column;
  gap: .12rem;
  min-width: 0;
  flex: 1;
}
.fish-row-copy strong {
  font-size: .74rem;
  color: var(--brown-dark);
}
.dark .fish-row-copy strong {
  color: var(--text-light);
}
.fish-row-copy span {
  font-size: .68rem;
  color: var(--brown-mid);
}
.perk-tree { display: flex; flex-direction: column; gap: .2rem; margin-top: .45rem; }
.perk-row-label {
  font-size: .62rem;
  font-weight: 700;
  color: var(--brown-mid);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: .3rem;
}
.dark .perk-row-label { color: rgba(255,255,255,.5); }
.perk-row { display: flex; gap: .3rem; justify-content: space-between; }
.perk-node {
  flex: 1;
  min-height: 36px;
  border-radius: 999px;
  border: 1.5px solid var(--tan-dark);
  background: var(--tan);
  color: var(--brown-dark);
  font-weight: 700;
  font-size: .6rem;
  line-height: 1.1;
  padding: .2rem;
  cursor: pointer;
}
.dark .perk-node {
  background: var(--bg-darker);
  border-color: var(--border-dark);
  color: var(--text-light);
}
.perk-node.unlocked {
  background: var(--green-mid);
  border-color: var(--green-dark);
  color: white;
}
.perk-node.available {
  border-color: #f0a830;
}
.perk-node.locked {
  opacity: .72;
  color: var(--brown-mid);
}
/* Prestige perk — gold shimmer when available */
.perk-row:last-child .perk-node.available {
  background: linear-gradient(135deg, #fff8e1, #ffe082);
  border-color: #f0a830;
  font-weight: 700;
}
.perk-row:last-child .perk-node.unlocked {
  background: linear-gradient(135deg, #ffd700, #ff8c00);
  border-color: #cc6600;
}
.rarity-common { --rarity-color: #9d9d9d; }
.rarity-uncommon { --rarity-color: #2dc50e; }
.rarity-rare { --rarity-color: #0070dd; }
.rarity-epic { --rarity-color: #a335ee; }
.rarity-legendary { --rarity-color: #ff8000; }

.fishing-leaderboard-card {
  width: min(520px, calc(100vw - 2rem));
}
.fishing-leaderboard-tabs {
  display: flex;
  gap: .45rem;
  margin-bottom: .75rem;
}
.fishing-leaderboard-content {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.fishing-leaderboard-tabs .fishing-action-btn.active {
  background: var(--green-mid);
  color: white;
  border-color: var(--green-dark);
}
.fishing-leaderboard-event {
  display: flex;
  flex-direction: column;
  gap: .18rem;
  padding: .6rem .75rem;
  border-radius: 12px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar, var(--warm-white)) 82%, white 18%) 0%, color-mix(in srgb, var(--accent-alt, var(--green-light)) 14%, var(--bg-sidebar, var(--warm-white)) 86%) 100%);
  border: 1px solid color-mix(in srgb, var(--accent, var(--green-mid)) 34%, var(--tan-dark) 66%);
  color: var(--brown-dark);
  margin-bottom: .25rem;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.3);
}
.dark .fishing-leaderboard-event {
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg-sidebar, var(--bg-dark)) 86%, rgba(255,255,255,.05) 14%) 0%, color-mix(in srgb, var(--accent, var(--green-mid)) 18%, var(--bg-sidebar, var(--bg-dark)) 82%) 100%);
  border-color: color-mix(in srgb, var(--accent-alt, var(--green-light)) 26%, var(--border-dark) 74%);
  color: var(--text-light);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.fishing-leaderboard-row {
  display: grid;
  grid-template-columns: 48px 1fr auto;
  gap: .75rem;
  align-items: center;
  padding: .5rem .65rem;
  border-radius: 10px;
  background: rgba(120,80,40,.08);
}
.fishing-leaderboard-user {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
}
.fishing-leaderboard-user .avatar-img {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  object-fit: cover;
  flex: 0 0 auto;
}
.dark .fishing-leaderboard-row {
  background: rgba(255,255,255,.06);
}
.fishing-tournament-podium {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: .4rem;
  margin-bottom: .25rem;
}
.fishing-tournament-podium-slot {
  display: flex;
  flex-direction: column;
  gap: .16rem;
  padding: .55rem .45rem;
  border-radius: 10px;
  background: rgba(120,80,40,.08);
  border: 1px solid rgba(120,80,40,.14);
  text-align: center;
}
.dark .fishing-tournament-podium-slot {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
}
.fishing-tournament-podium-place {
  font-size: .66rem;
  font-weight: 800;
  color: var(--brown-mid);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.fishing-tournament-podium-slot strong {
  color: var(--brown-dark);
}
.dark .fishing-tournament-podium-slot strong {
  color: var(--text-light);
}
.fishing-tutorial-card {
  width: min(344px, calc(100vw - 1.5rem));
  max-height: min(72vh, 460px);
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  scrollbar-gutter: stable;
}
.fishing-tutorial-intro {
  color: var(--brown-mid);
  line-height: 1.55;
  margin-bottom: .9rem;
}
.dark .fishing-tutorial-intro {
  color: rgba(255,255,255,.76);
}
.fishing-tutorial-grid {
  display: grid;
  gap: .6rem;
}
.fishing-tutorial-step {
  padding: .7rem .8rem;
  border-radius: 12px;
  background: rgba(120,80,40,.08);
}
.dark .fishing-tutorial-step {
  background: rgba(255,255,255,.06);
}
.fishing-tutorial-step strong {
  display: block;
  margin-bottom: .2rem;
  color: var(--brown-dark);
}
.dark .fishing-tutorial-step strong {
  color: var(--text-light);
}
.fishing-tutorial-footer {
  display: flex;
  justify-content: flex-end;
  gap: .45rem;
  margin-top: 1rem;
}

.fishing-boost-strip {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.fishing-boost-pill {
  display: flex;
  justify-content: space-between;
  gap: .45rem;
  padding: .42rem .5rem;
  border-radius: 10px;
  background: rgba(248,196,60,.14);
  border: 1px solid rgba(200,150,30,.35);
  color: var(--brown-dark);
  font-size: .72rem;
  font-weight: 700;
  cursor: help;
  animation: boost-pulse 2.4s ease-in-out infinite;
}
.dark .fishing-boost-pill {
  background: rgba(248,196,60,.12);
  border-color: rgba(248,196,60,.28);
  color: var(--text-light);
}
.fishing-boost-empty {
  padding: .52rem .6rem;
  border-radius: 10px;
  background: var(--tan);
  border: 1px solid var(--tan-dark);
  color: var(--brown-mid);
  font-size: .72rem;
  line-height: 1.45;
}
.dark .fishing-boost-empty {
  background: rgba(255,255,255,.06);
  border-color: var(--border-dark);
}
.fishing-active-boosts {
  display: flex;
  flex-direction: column;
  gap: .35rem;
}
.fishing-boost-inline {
  display: flex;
  justify-content: space-between;
  gap: .45rem;
  padding: .38rem .48rem;
  border-radius: 10px;
  background: var(--tan);
  border: 1px solid var(--tan-dark);
  color: var(--brown-dark);
  font-weight: 700;
}
.dark .fishing-boost-inline {
  background: rgba(255,255,255,.06);
  border-color: var(--border-dark);
  color: var(--text-light);
}
.fishing-boost-inline-time {
  font-variant-numeric: tabular-nums;
}
.fishing-boost-overflow,
.fishing-active-boost-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 30px;
  padding: .25rem .55rem;
  border-radius: 999px;
  background: rgba(120,80,40,.08);
  border: 1px dashed rgba(120,80,40,.3);
  color: var(--brown-mid);
  font-size: .7rem;
  font-weight: 800;
  cursor: help;
}
.dark .fishing-boost-overflow,
.dark .fishing-active-boost-overflow {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.18);
  color: rgba(255,255,255,.72);
}
.fishing-shop-grid {
  display: grid;
  gap: .45rem;
}
.fishing-shop-grid-2col {
  grid-template-columns: 1fr 1fr;
}
.fishing-shop-section-label {
  font-size: .72rem;
  font-weight: 800;
  color: var(--brown-mid);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.dark .fishing-shop-section-label { color: var(--text-muted); }
.fishing-shop-item-compact {
  padding: .4rem .5rem;
  gap: .25rem;
}
.fishing-shop-item-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: .3rem;
}
.fishing-shop-item-top strong { font-size: .78rem; margin: 0; }
.fishing-shop-item-compact .fishing-action-btn {
  width: 100%;
  font-size: .72rem;
  padding: .22rem .3rem;
}
/* Active boosts strip */
.fishing-active-boosts-strip {
  background: var(--tan);
  border: 1px solid var(--tan-dark);
  border-radius: 8px;
  padding: .4rem .5rem;
  margin-bottom: .6rem;
}
.dark .fishing-active-boosts-strip {
  background: rgba(255,255,255,.07);
  border-color: var(--border-dark);
}
.fishing-active-boosts-label {
  font-size: .68rem;
  font-weight: 800;
  color: var(--brown-mid);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: .3rem;
}
.dark .fishing-active-boosts-label { color: var(--text-muted); }
.fishing-active-boosts-row {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
}
.fishing-active-boosts-compact {
  gap: .28rem;
}
.fishing-active-boost-chip {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: var(--green-pale);
  border: 1px solid var(--green-mid);
  border-radius: 20px;
  padding: .18rem .5rem;
  font-size: .7rem;
  cursor: help;
  animation: boost-pulse 2s ease-in-out infinite;
}
.dark .fishing-active-boost-chip {
  background: rgba(82,160,100,.18);
  border-color: rgba(82,160,100,.4);
}
.fishing-active-boost-chip-speed {
  background: rgba(79,195,247,.12);
  border-color: rgba(79,195,247,.42);
}
.fishing-active-boost-chip-rarity {
  background: rgba(255,213,79,.15);
  border-color: rgba(255,193,7,.45);
}
.fishing-active-boost-chip-xp {
  background: rgba(165,214,167,.18);
  border-color: rgba(102,187,106,.42);
}
.fishing-active-boost-chip-sell {
  background: rgba(255,204,128,.2);
  border-color: rgba(255,167,38,.42);
}
.fishing-active-boost-chip-overflow {
  background: rgba(255,255,255,.82);
  border-style: dashed;
  color: var(--brown-mid);
  font-weight: 800;
}
.dark .fishing-active-boost-chip-speed {
  background: rgba(79,195,247,.16);
  border-color: rgba(79,195,247,.42);
}
.dark .fishing-active-boost-chip-rarity {
  background: rgba(255,213,79,.14);
  border-color: rgba(255,193,7,.34);
}
.dark .fishing-active-boost-chip-xp {
  background: rgba(134,197,138,.16);
  border-color: rgba(112,190,122,.34);
}
.dark .fishing-active-boost-chip-sell {
  background: rgba(255,183,77,.16);
  border-color: rgba(255,183,77,.34);
}
.dark .fishing-active-boost-chip-overflow {
  background: rgba(255,255,255,.08);
  color: var(--text-muted);
}
.fishing-active-boost-name { font-weight: 700; color: var(--brown-dark); }
.dark .fishing-active-boost-name { color: var(--text-light); }
.fishing-active-boost-time {
  color: var(--green-dark);
  font-variant-numeric: tabular-nums;
  font-weight: 600;
}
.dark .fishing-active-boost-time { color: #7dcf95; }
.fishing-tournament-banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .55rem;
  padding: .6rem .7rem;
  border-radius: 12px;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-sidebar, var(--warm-white)) 80%, white 20%) 0%, color-mix(in srgb, var(--accent-alt, var(--green-light)) 20%, var(--bg-sidebar, var(--warm-white)) 80%) 100%);
  border: 1px solid color-mix(in srgb, var(--accent, var(--green-mid)) 38%, var(--tan-dark) 62%);
}
.fishing-tournament-banner-compact {
  gap: .45rem;
  align-items: center;
}
.fishing-tournament-banner.active {
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent, var(--green-mid)) 18%, transparent 82%), 0 10px 24px color-mix(in srgb, var(--accent-alt, var(--green-light)) 18%, transparent 82%);
}
.dark .fishing-tournament-banner {
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg-sidebar, var(--bg-dark)) 84%, rgba(255,255,255,.05) 16%) 0%, color-mix(in srgb, var(--accent, var(--green-mid)) 18%, var(--bg-sidebar, var(--bg-dark)) 82%) 100%);
  border-color: color-mix(in srgb, var(--accent-alt, var(--green-light)) 28%, var(--border-dark) 72%);
}
.fishing-tournament-badge {
  align-self: flex-start;
  flex: 0 0 auto;
  padding: .22rem .48rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent, var(--green-mid)) 16%, transparent);
  border: 1px solid color-mix(in srgb, var(--accent, var(--green-mid)) 30%, transparent);
  color: var(--brown-dark);
  font-size: .64rem;
  font-weight: 900;
  letter-spacing: .05em;
  text-transform: uppercase;
  white-space: nowrap;
}
.fishing-tournament-copy {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  min-width: 0;
  flex: 1 1 auto;
}
.fishing-tournament-copy strong {
  font-size: .78rem;
  color: var(--brown-dark);
}
.fishing-tournament-copy span {
  font-size: .69rem;
  line-height: 1.35;
  color: var(--brown-mid);
}
.dark .fishing-tournament-copy strong {
  color: var(--text-light);
}
.dark .fishing-tournament-copy span {
  color: color-mix(in srgb, var(--text-light) 74%, var(--accent-alt, var(--green-light)) 26%);
}
.fishing-tournament-rewards {
  font-weight: 700;
}
@media (max-width: 560px) {
  .fishing-tournament-banner {
    align-items: flex-start;
    flex-wrap: wrap;
  }
  .fishing-tournament-banner .fishing-action-btn {
    width: 100%;
  }
}
.fishing-social-card,
.fishing-party-card,
.fishing-social-section {
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fishing-party-card,
.fishing-social-section,
.fishing-trade-card {
  padding: .6rem;
  border-radius: 10px;
  background: var(--warm-white);
  border: 1px solid var(--tan-dark);
}
.dark .fishing-party-card,
.dark .fishing-social-section,
.dark .fishing-trade-card {
  background: var(--bg-darker);
  border-color: var(--border-dark);
}
.fishing-social-copy,
.fishing-social-row span,
.fishing-party-header-row span,
.fishing-party-member span,
.fishing-trade-card span,
.fishing-trade-card em,
.fishing-party-feed-item {
  color: var(--brown-mid);
  line-height: 1.4;
}
.dark .fishing-social-copy,
.dark .fishing-social-row span,
.dark .fishing-party-header-row span,
.dark .fishing-party-member span,
.dark .fishing-trade-card span,
.dark .fishing-trade-card em,
.dark .fishing-party-feed-item {
  color: rgba(255,255,255,.76);
}
.fishing-social-label {
  font-size: .72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brown-dark);
}
.dark .fishing-social-label {
  color: var(--text-light);
}
.fishing-party-header-row,
.fishing-social-row,
.fishing-inline-actions,
.fishing-party-actions,
.fishing-trade-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  flex-wrap: wrap;
}
.fishing-social-row > div,
.fishing-party-header-row > div,
.fishing-trade-card > div {
  display: flex;
  flex-direction: column;
  gap: .15rem;
}
.fishing-party-members,
.fishing-party-feed,
.fishing-party-mission-list {
  display: flex;
  flex-direction: column;
  gap: .4rem;
}
.fishing-party-member-user {
  display: flex;
  align-items: center;
  gap: .45rem;
}
.fishing-party-feed {
  max-height: 132px;
  overflow-y: auto;
}
.fishing-party-feed-item {
  padding: .42rem .5rem;
  border-radius: 10px;
  background: rgba(120,80,40,.08);
}
.dark .fishing-party-feed-item {
  background: rgba(255,255,255,.06);
}
.fishing-party-mission-card,
.fishing-inbox-row,
.fishing-journal-row,
.fishing-history-card,
.fishing-quest-row {
  display: flex;
  flex-direction: column;
  gap: .22rem;
  padding: .5rem .55rem;
  border-radius: 10px;
  background: rgba(120,80,40,.06);
  border: 1px solid rgba(120,80,40,.12);
}
.dark .fishing-party-mission-card,
.dark .fishing-inbox-row,
.dark .fishing-journal-row,
.dark .fishing-history-card,
.dark .fishing-quest-row {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.08);
}
.fishing-party-mission-card.complete,
.fishing-quest-row.complete {
  border-color: color-mix(in srgb, var(--accent, var(--green-mid)) 34%, var(--tan-dark) 66%);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent-alt, var(--green-light)) 30%, transparent 70%);
}
.fishing-party-mission-top,
.fishing-quest-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}
.fishing-party-mission-bar {
  height: 7px;
  border-radius: 999px;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent-alt, var(--green-light)) 18%, var(--tan-dark) 82%);
}
.fishing-party-mission-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--accent, var(--green-mid)), var(--accent-alt, var(--green-light)));
}
.fishing-progress-modal-card {
  width: min(600px, calc(100vw - 2rem));
  max-width: 600px;
  max-height: min(76vh, 700px);
  padding: 1rem 1.1rem .95rem;
  display: flex;
  flex-direction: column;
  gap: .5rem;
}
.fishing-progress-modal-card h2 {
  font-size: 1.08rem;
  margin-right: 1.4rem;
}
.fishing-progress-tabs {
  margin-bottom: .2rem;
}
.fishing-progress-header-copy {
  color: var(--brown-mid);
  margin-bottom: .35rem;
  line-height: 1.35;
  font-size: .82rem;
}
.dark .fishing-progress-header-copy {
  color: rgba(255,255,255,.76);
}
.fishing-progress-modal-card #fishing-progress-content {
  overflow-y: auto;
  padding-right: .12rem;
}
.fishing-journal-list,
.fishing-inbox-list,
.fishing-history-list,
.fishing-progress-group {
  display: flex;
  flex-direction: column;
  gap: .32rem;
}
.fishing-journal-row,
.fishing-inbox-row {
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  padding: .5rem .65rem;
}
.fishing-journal-row > div,
.fishing-inbox-row > div,
.fishing-history-card > div,
.fishing-quest-row > div {
  display: flex;
  flex-direction: column;
  gap: .08rem;
}
.fishing-journal-row span,
.fishing-inbox-row span,
.fishing-inbox-row em,
.fishing-history-card span,
.fishing-quest-row span,
.fishing-quest-row em {
  color: var(--brown-mid);
  font-size: .77rem;
}
.dark .fishing-journal-row span,
.dark .fishing-inbox-row span,
.dark .fishing-inbox-row em,
.dark .fishing-history-card span,
.dark .fishing-quest-row span,
.dark .fishing-quest-row em {
  color: rgba(255,255,255,.72);
}
.fishing-journal-row.discovered {
  border-color: color-mix(in srgb, var(--accent, var(--green-mid)) 26%, rgba(120,80,40,.16) 74%);
}
.fishing-trade-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .45rem;
}
.fishing-trade-grid .dock-select,
.fishing-trade-grid .dock-input,
.fishing-trade-grid button {
  width: 100%;
}
.fishing-trade-card.incoming {
  border-color: rgba(91,173,111,.35);
  background: rgba(91,173,111,.06);
}
.fishing-trade-card.outgoing {
  border-color: rgba(113,173,200,.35);
  background: rgba(113,173,200,.06);
}
.fishing-trade-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .3rem;
}
.fishing-trade-dir-label {
  font-size: .68rem;
  color: var(--brown-mid);
}
.fishing-trade-summary {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  flex-wrap: wrap;
  margin-bottom: .2rem;
}
.fishing-trade-arrow { color: var(--brown-mid); }
.fishing-trade-offer-summary { color: var(--brown-dark); font-weight: 600; }
.fishing-trade-request-summary { color: var(--brown-dark); }
.fishing-trade-note-text {
  font-size: .75rem;
  color: var(--brown-mid);
  font-style: italic;
  margin-bottom: .2rem;
}
.fishing-trade-actions { margin-top: .35rem; }
/* Trade form two-column layout */
.fishing-trade-target-select {
  width: 100%;
  margin-bottom: .45rem;
}
.fishing-trade-columns {
  display: flex;
  gap: .5rem;
  align-items: flex-start;
  margin-bottom: .4rem;
}
.fishing-trade-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: .35rem;
  min-width: 0;
}
.fishing-trade-col-header {
  font-size: .7rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brown-dark);
  margin-bottom: .1rem;
}
.dark .fishing-trade-col-header { color: var(--text-light); }
.fishing-trade-col-divider {
  padding-top: 1.6rem;
  font-size: 1rem;
  color: var(--brown-mid);
  flex-shrink: 0;
  align-self: flex-start;
}
.fishing-trade-note-input { width: 100%; margin-bottom: .35rem; }
.fishing-trade-send-btn { width: 100%; }
/* Reaction buttons row */
.fishing-party-reactions {
  display: flex;
  gap: .3rem;
  flex-wrap: wrap;
  margin-bottom: .3rem;
}
.fishing-reaction-btn {
  flex: 1;
  min-width: 0;
  font-size: .78rem;
  padding: .3rem .4rem;
  border-radius: 8px;
}
/* Party feed */
.fishing-party-feed-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--brown-mid);
  margin-bottom: .2rem;
  margin-top: .3rem;
}
.fishing-party-feed-item .fishing-feed-user {
  font-weight: 700;
  color: var(--brown-dark);
  margin-right: .2rem;
}
/* Catch event highlights in the party feed */
.fishing-party-feed-item.catch-event { font-weight: 600; }
.fishing-party-feed-item.rarity-rare    { background: rgba(0,112,221,.1);  border-left: 2px solid rgba(0,112,221,.5); }
.fishing-party-feed-item.rarity-epic    { background: rgba(163,53,238,.1); border-left: 2px solid rgba(163,53,238,.5); }
.fishing-party-feed-item.rarity-legendary { background: rgba(255,128,0,.12); border-left: 2px solid rgba(255,128,0,.6); }
.dark .fishing-party-feed-item.rarity-rare    { background: rgba(0,112,221,.15); }
.dark .fishing-party-feed-item.rarity-epic    { background: rgba(163,53,238,.15); }
.dark .fishing-party-feed-item.rarity-legendary { background: rgba(255,128,0,.18); }
/* Online status dot */
.fishing-status-dot.online { color: #3ba55d; }
.fishing-status-dot.away   { color: #faa61a; }
.fishing-shop-item {
  display: grid;
  gap: .35rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  background: var(--warm-white);
  border: 1px solid var(--tan-dark);
}
.dark .fishing-shop-item {
  background: var(--bg-darker);
  border-color: var(--border-dark);
}
.fishing-shop-item.active {
  background: var(--tan);
  border-color: var(--green-dark);
}
.dark .fishing-shop-item.active {
  background: rgba(255,255,255,.1);
  border-color: var(--green-mid);
}
.fishing-shop-item strong {
  display: block;
  color: var(--brown-dark);
  margin-bottom: .16rem;
}
.fishing-shop-item span {
  color: var(--brown-mid);
  line-height: 1.4;
}
.fishing-shop-meta {
  font-size: .68rem;
  font-weight: 700;
  color: var(--green-dark);
}
.fishing-shop-row {
  display: flex;
  justify-content: space-between;
  gap: .45rem;
  align-items: center;
}
.fishing-shop-timer {
  font-size: .68rem;
  font-weight: 700;
  color: #8a6818;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 700px) {
  .fishing-char-preview-row {
    flex-direction: column;
  }
  .fishing-char-grid {
    grid-template-columns: 1fr;
  }
  .fishing-dock {
    left: 10px;
    right: 10px;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    resize: none;
  }
  .fishing-main-layout {
    grid-template-columns: 1fr;
  }
  .fishing-trade-grid {
    grid-template-columns: 1fr;
  }
  #fishing-canvas {
    width: 100%;
    max-width: 320px;
    height: auto;
  }
  .dock-remind-add {
    grid-template-columns: minmax(0, 1fr) 86px 28px;
  }
}

/* ===================== NICKNAME MODAL ===================== */
#nickname-modal.modal-overlay {
  position: fixed;
  z-index: 10000;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.38);
  display: flex; align-items: center; justify-content: center;
}
.nickname-modal-card {
  background: var(--warm-white);
  color: var(--text-dark);
  border-radius: 16px;
  padding: 1.6rem 2rem 1.3rem 2rem;
  box-shadow: 0 6px 40px rgba(0,0,0,0.22);
  min-width: 300px;
  max-width: 92vw;
  display: flex;
  flex-direction: column;
  gap: .9rem;
}
.dark .nickname-modal-card {
  background: var(--bg-dark);
  color: var(--text-light);
}
.nickname-modal-header {
  display: flex;
  align-items: center;
  gap: .85rem;
}
.nickname-modal-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.8rem;
  flex-shrink: 0;
  background: var(--tan);
}
.nickname-modal-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.nickname-modal-title {
  font-weight: 700;
  font-size: 1.05rem;
}
.nickname-modal-sub {
  font-size: .85rem;
  color: var(--brown-light);
  margin-top: .1rem;
}
.dark .nickname-modal-sub { color: rgba(255,255,255,.45); }
.nickname-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: .55rem;
  flex-wrap: wrap;
}
.settings-banner-remove-btn {
  color: #c0392b !important;
  border-color: #c0392b !important;
}
.settings-banner-remove-btn:hover {
  background: rgba(192,57,43,.08) !important;
}

/* ===================== AVATAR CROP MODAL ===================== */
#avatar-crop-modal.modal-overlay {
  position: fixed;
  z-index: 10001;
  left: 0; top: 0; width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.58);
  display: flex; align-items: center; justify-content: center;
}
.avatar-crop-card {
  background: var(--warm-white);
  border-radius: 18px;
  padding: 1.6rem 2rem 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  width: 310px;
  box-shadow: 0 8px 48px rgba(0,0,0,0.28);
}
.dark .avatar-crop-card {
  background: var(--bg-dark);
}
.avatar-crop-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--brown-dark);
  align-self: flex-start;
}
.dark .avatar-crop-title { color: var(--text-light); }
.avatar-crop-subtitle {
  font-size: .76rem;
  color: var(--brown-light);
  margin-top: -.65rem;
  align-self: flex-start;
}
.avatar-crop-stage {
  width: 240px;
  height: 240px;
  border-radius: 50%;
  overflow: hidden;
  cursor: grab;
  border: 3px solid var(--tan-dark);
  box-shadow: 0 2px 18px rgba(0,0,0,0.18);
  user-select: none;
  touch-action: none;
}
.avatar-crop-stage:active { cursor: grabbing; }
#crop-canvas {
  display: block;
  width: 240px;
  height: 240px;
}
.avatar-crop-zoom-row {
  display: flex;
  align-items: center;
  gap: .75rem;
  width: 100%;
}
.crop-zoom-slider {
  flex: 1;
  accent-color: var(--green-mid);
  cursor: pointer;
}
.avatar-crop-actions {
  display: flex;
  gap: .6rem;
  justify-content: flex-end;
  width: 100%;
}

/* Banner-mode overrides: wider card, taller stage with overlay crop indicator */
.avatar-crop-card.banner-mode { width: 564px; }
.avatar-crop-stage.banner-mode {
  width: 520px;
  height: 300px;
  border-radius: 8px;
}
#crop-canvas.banner-mode {
  width: 520px;
  height: 300px;
}
.avatar-crop-zoom-row,
.avatar-crop-actions { max-width: 100%; }

/* ── Golden Acorn Avatar Border ────────────────────────────── */
@keyframes golden-ring {
  0%   { box-shadow: 0 0 0 2.5px #f5c842, 0 0 10px rgba(245,200,66,.5); }
  50%  { box-shadow: 0 0 0 2.5px #e8a020, 0 0 18px rgba(232,160,32,.75); }
  100% { box-shadow: 0 0 0 2.5px #f5c842, 0 0 10px rgba(245,200,66,.5); }
}
.golden-acorn-border {
  animation: golden-ring 2.2s ease-in-out infinite;
  border-radius: 50%;
}

/* ── Golden Acorn Settings ─────────────────────────────────── */
.settings-nav-golden {
  background: linear-gradient(135deg, #f5c842 0%, #e8a020 60%, #c87820 100%) !important;
  color: #3d2008 !important;
  font-weight: 800 !important;
  border-radius: 8px !important;
  margin-top: .4rem;
  box-shadow: 0 2px 8px rgba(200,120,32,.35);
  transition: box-shadow .2s, transform .15s;
}
.settings-nav-golden:hover,
.settings-nav-golden.active {
  box-shadow: 0 4px 16px rgba(200,120,32,.6) !important;
  transform: translateY(-1px);
  background: linear-gradient(135deg, #f7d050 0%, #eda828 60%, #d08828 100%) !important;
  color: #3d2008 !important;
}

.golden-acorn-title {
  background: linear-gradient(120deg, #c87820, #f5c842, #e8a020);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.golden-acorn-loading {
  color: var(--text-muted);
  padding: 1.5rem 0;
  font-size: .95rem;
}

/* Status badge */
.ga-status-row { margin-bottom: .9rem; }
.ga-status-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .9rem;
  border-radius: 20px;
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .01em;
}
.ga-status-active   { background: rgba(200,120,32,.18); color: #e8a020; border: 1.5px solid #e8a02060; }
.ga-status-founding { background: linear-gradient(135deg,rgba(245,200,66,.18),rgba(232,160,32,.18)); color: #f5c842; border: 1.5px solid #f5c84260; }
.ga-status-inactive { background: var(--bg-3); color: var(--text-muted); border: 1.5px solid var(--border); }
.ga-status-since    { font-size: .78rem; color: var(--text-muted); margin: .25rem 0 0 0; }

/* Sections */
.ga-section-block {
  background: var(--bg-2);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: .85rem 1rem;
  margin-bottom: .85rem;
}
.ga-section-title {
  font-size: .95rem;
  font-weight: 800;
  margin: 0 0 .25rem 0;
  color: var(--text-main);
}
.ga-section-desc {
  font-size: .82rem;
  color: var(--text-muted);
  margin: 0 0 .7rem 0;
}

/* Features grid */
.ga-features-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: .35rem .7rem;
  margin-bottom: .7rem;
}
.ga-feature-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .83rem;
  color: var(--text-main);
}
.ga-feat-icon { font-size: .9rem; flex-shrink: 0; }

.ga-manage-hint { font-size: .82rem; color: var(--text-muted); margin: .6rem 0 0 0; }
.ga-manage-hint a { color: #5299f8; }
.ga-unavailable { font-size: .85rem; color: var(--text-muted); font-style: italic; margin: .6rem 0 0 0; }

/* Active subscription extra info */
.ga-cancel-hint { font-size: .78rem; color: var(--text-muted); margin: .2rem 0 0 0; }
.ga-cancel-hint a { color: #f87171; }
.ga-status-plan-pill {
  display: inline-block;
  background: rgba(255,255,255,.15);
  border-radius: 20px;
  padding: .05rem .45rem;
  font-size: .75rem;
  font-weight: 700;
  margin-left: .35rem;
}
.ga-switch-hint { font-size: .75rem; color: var(--text-muted); margin: .4rem 0 0 0; }
.ga-switch-hint a { color: #5299f8; }

/* Gift section form */
.ga-gift-form { display: flex; flex-direction: column; gap: .45rem; }
.ga-gift-input {
  padding: .4rem .8rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--bg-3);
  color: var(--text-main);
  font-family: 'Nunito', sans-serif;
  font-size: .88rem;
  outline: none;
  transition: border-color .15s;
}
.ga-gift-input:focus { border-color: #e8a020; }
.ga-gift-durations { display: flex; gap: .55rem; flex-wrap: wrap; }
.ga-gift-dur-label { font-size: .82rem; color: var(--text-main); cursor: pointer; display: flex; align-items: center; gap: .25rem; }
.ga-gift-preview-btn {
  align-self: flex-start;
  padding: .4rem .9rem;
  background: linear-gradient(135deg, #e8a020, #c87820);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.ga-gift-preview-btn:hover { opacity: .9; transform: translateY(-1px); }
.ga-gift-status { font-size: .8rem; min-height: 1.1em; }
.ga-gift-error  { color: #f87171; }
.ga-gift-ok     { color: #4ade80; }

/* Gold packages */
.ga-gold-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .6rem;
}
.ga-gold-card {
  background: var(--bg-3);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: .7rem .6rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .2rem;
  transition: border-color .15s, transform .15s;
}
.ga-gold-card:hover { border-color: #e8a020; transform: translateY(-2px); }
.ga-gold-emoji  { font-size: 1.5rem; }
.ga-gold-label  { font-size: .78rem; font-weight: 700; color: var(--text-main); }
.ga-gold-amount { font-size: 1rem; font-weight: 800; color: #e8a020; }
.ga-gold-price  { font-size: .78rem; color: var(--text-muted); margin-bottom: .2rem; }

/* PayPal button wrapper sizing */
.ga-paypal-btn-wrap { width: 100%; min-height: 40px; }
.ga-paypal-sub-wrap { margin-top: .2rem; max-width: 280px; }

/* ── Subscription tier cards ─────────────────────────────────────────────── */
.ga-sub-tiers {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .6rem;
  margin-top: .4rem;
}
.ga-sub-tier-card {
  background: var(--bg-3);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: .7rem .75rem .65rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .15rem;
  text-align: center;
  transition: border-color .15s, transform .15s, box-shadow .15s;
  position: relative;
}
.ga-sub-tier-card:hover {
  border-color: #e8a020;
  transform: translateY(-3px);
  box-shadow: 0 6px 20px rgba(232,160,32,.15);
}
/* "Best Value" annual tier highlighted */
.ga-sub-featured {
  border-color: #e8a020;
  background: linear-gradient(160deg, rgba(232,160,32,.07) 0%, var(--bg-3) 60%);
  box-shadow: 0 0 0 1px rgba(232,160,32,.25), 0 4px 18px rgba(232,160,32,.1);
}
.ga-sub-featured:hover {
  box-shadow: 0 0 0 1px rgba(232,160,32,.5), 0 8px 24px rgba(232,160,32,.22);
}
.ga-sub-tier-badge {
  font-size: .65rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  background: linear-gradient(135deg, #f0a820, #e07800);
  color: #fff;
  padding: .15rem .45rem;
  border-radius: 20px;
  margin-bottom: .05rem;
  min-height: 1.2rem;
  display: flex;
  align-items: center;
}
.ga-sub-tier-badge-placeholder { min-height: 1.2rem; }
.ga-sub-tier-emoji    { font-size: 1.4rem; line-height: 1; }
.ga-sub-tier-label    { font-size: .8rem; font-weight: 800; color: var(--text-main); margin-top: .05rem; }
.ga-sub-tier-price    { font-size: 1.1rem; font-weight: 900; color: #e8a020; line-height: 1.1; }
.ga-sub-tier-permonth { font-size: .7rem; color: var(--text-muted); }
.ga-sub-tier-permonth--spacer { visibility: hidden; }
.ga-sub-tier-billdesc { font-size: .68rem; color: var(--text-muted); margin-bottom: .1rem; }
.ga-sub-tier-active-spacer { min-height: 32px; }
.ga-sub-current {
  border-color: #4ade80 !important;
  background: linear-gradient(160deg, rgba(74,222,128,.06) 0%, var(--bg-3) 60%) !important;
}
.ga-sub-tier-badge--current {
  background: linear-gradient(135deg, #4ade80, #22c55e) !important;
  color: #fff !important;
}

@media (max-width: 400px) {
  .ga-sub-tiers { grid-template-columns: 1fr; }
}

/* Founding Acorn badge — gold */
.badge-legendary.badge-founding_acorn {
  background: linear-gradient(135deg, #f5c842, #e8a020, #c87820);
  box-shadow: 0 0 12px rgba(245,200,66,.45);
}

/* Early Investor badge — diamond cyan */
.badge-legendary.badge-early_investor::before {
  background: linear-gradient(145deg, #a8f0ff 0%, #30c8f0 40%, #0090c8 100%);
  box-shadow: inset 2px 2px 0 rgba(255,255,255,.6), inset -2px -2px 0 rgba(0,0,40,.3);
  animation: badge-diamond-shimmer 3s linear infinite;
}
.badge-legendary.badge-early_investor {
  animation: badge-glow-diamond 2s ease-in-out infinite;
}
@keyframes badge-diamond-shimmer {
  0%,100% { filter: brightness(1);   }
  50%      { filter: brightness(1.2) saturate(1.3); }
}
@keyframes badge-glow-diamond {
  0%,100% { filter: drop-shadow(0 0 4px rgba(0,190,240,.7)); }
  50%      { filter: drop-shadow(0 0 16px rgba(80,230,255,1)); }
}

@media (max-width: 520px) {
  .ga-features-grid { grid-template-columns: 1fr; }
  .ga-gold-grid     { grid-template-columns: repeat(2, 1fr); }
  .ga-sub-tiers     { grid-template-columns: 1fr; }
}

/* ── Deploy Update Banner ───────────────────────────────────── */
#deploy-update-banner {
  position: fixed;
  bottom: 18px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--brown-dark, #3b2510);
  color: #f5e6c8;
  border: 1.5px solid #f5c842;
  border-radius: 10px;
  padding: 10px 16px;
  font-size: .9rem;
  font-weight: 600;
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
  z-index: 9999;
  animation: fadeInUp .25s ease;
}
#deploy-update-banner button {
  background: #f5c842;
  color: #3b2510;
  border: none;
  border-radius: 6px;
  padding: 5px 12px;
  font-size: .85rem;
  font-weight: 700;
  cursor: pointer;
}
#deploy-update-banner button:hover { background: #e8a020; }
#deploy-update-banner .deploy-banner-dismiss {
  background: transparent;
  color: #c8a87a;
  padding: 4px 6px;
  font-size: 1rem;
}
#deploy-update-banner .deploy-banner-dismiss:hover { color: #f5e6c8; }
@keyframes fadeInUp {
  from { opacity: 0; transform: translateX(-50%) translateY(12px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Fishing background-mode indicator ── */
#fishing-bg-indicator {
  display: none;
  align-items: center;
  gap: .3rem;
  padding: .18rem .42rem;
  border-radius: 20px;
  background: rgba(79,195,247,.14);
  border: 1px solid rgba(79,195,247,.35);
  color: #4fc3f7;
  font-size: .68rem;
  font-weight: 700;
  animation: bg-fish-pulse 2s ease-in-out infinite;
  cursor: default;
}
#fishing-bg-indicator.active { display: flex; }
.dark #fishing-bg-indicator { background: rgba(79,195,247,.12); border-color: rgba(79,195,247,.3); }
@keyframes bg-fish-pulse {
  0%,100% { opacity: .85; }
  50%      { opacity: 1; box-shadow: 0 0 6px rgba(79,195,247,.45); }
}

/* ── FishTip rich tooltip ── */
#fish-tooltip {
  position: fixed;
  z-index: 99999;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
  min-width: 140px;
  max-width: 220px;
  padding: .55rem .65rem;
  border-radius: 10px;
  background: var(--card-bg, #fff8ee);
  border: 1px solid var(--border, #d4b483);
  box-shadow: 0 4px 18px rgba(0,0,0,.18);
  font-size: .74rem;
  line-height: 1.45;
  color: var(--brown-dark, #3b2510);
}
#fish-tooltip.visible { opacity: 1; visibility: visible; }
.dark #fish-tooltip {
  background: #2a1f14;
  border-color: #4a3520;
  color: var(--text-light, #e8d5b0);
  box-shadow: 0 4px 18px rgba(0,0,0,.45);
}
.ftip-name {
  font-weight: 800;
  font-size: .8rem;
  margin-bottom: .22rem;
}
.ftip-effect {
  font-weight: 700;
  font-size: .72rem;
  margin-bottom: .18rem;
}
.ftip-desc {
  color: var(--brown-mid, #7a5c3a);
  font-size: .71rem;
  margin-bottom: .22rem;
  line-height: 1.4;
}
.dark .ftip-desc { color: #b8956a; }
.ftip-status {
  font-size: .69rem;
  font-weight: 700;
  opacity: .8;
  padding-top: .18rem;
  border-top: 1px solid var(--border, #d4b483);
}
.dark .ftip-status { border-color: #4a3520; }
.ftip-status.active { color: #4fc3f7; opacity: 1; }
.ftip-row { display: flex; justify-content: space-between; gap: .5rem; }
.ftip-hud { font-size: .72rem; }

/* ── Acorn Town ─────────────────────────────────────────────────────────── */
#acorntown-panel { flex:1; flex-direction:column; overflow:hidden; background:var(--bg); }

.at-browser { display:flex; flex-direction:column; height:100%; overflow-y:auto; padding:1.4rem 1.6rem; gap:1rem; }
.at-browser-title { font-size:1.5rem; font-weight:800; color:var(--brown-dark); line-height:1.2; }
.dark .at-browser-title { color:#f0e6d0; }
.at-browser-sub { color:var(--brown-mid); font-size:.88rem; margin-top:.2rem; }
.dark .at-browser-sub { color:rgba(255,255,255,.6); }
.at-browser-actions { display:flex; gap:.6rem; align-items:center; }
.at-room-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:.9rem; }
.at-loading, .at-empty { color:var(--brown-mid); font-size:.88rem; padding:2rem 0; grid-column:1/-1; }
.dark .at-loading, .dark .at-empty { color:rgba(255,255,255,.55); }

.at-room-card { background:var(--card-bg,#fffcf5); border:1.5px solid var(--border); border-radius:12px; overflow:hidden; cursor:pointer; transition:transform .12s, box-shadow .12s; }
.dark .at-room-card { background:#2a2010; }
.at-room-card:hover { transform:translateY(-2px); box-shadow:0 6px 20px rgba(0,0,0,.14); }
.at-room-card-banner { height:90px; position:relative; background:#8fc89b; }
.at-room-theme-badge { position:absolute; bottom:.4rem; left:.5rem; background:rgba(0,0,0,.45); color:#fff; font-size:.7rem; font-weight:700; padding:.15rem .45rem; border-radius:999px; backdrop-filter:blur(4px); }
.at-room-card-body { padding:.65rem .7rem; }
.at-room-card-name { font-weight:700; font-size:.95rem; color:var(--brown-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.dark .at-room-card-name { color:#f0e6d0; }
.at-room-card-meta { display:flex; justify-content:space-between; font-size:.75rem; color:var(--brown-mid); margin-top:.2rem; }
.dark .at-room-card-meta { color:rgba(255,255,255,.55); }
.at-room-online { font-weight:600; }
.at-room-card-desc { font-size:.75rem; color:var(--brown-mid); margin-top:.3rem; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; }
.dark .at-room-card-desc { color:rgba(255,255,255,.5); }

.at-room-view { display:flex; flex-direction:column; height:100%; overflow:hidden; }
.at-room-topbar { display:flex; align-items:center; gap:.6rem; padding:.5rem .9rem; border-bottom:1px solid var(--border); background:var(--bg); flex-shrink:0; flex-wrap:wrap; }
.at-back-btn { background:none; border:1.5px solid var(--border); border-radius:8px; padding:.2rem .6rem; font-size:.82rem; cursor:pointer; color:var(--brown-dark); font-weight:600; transition:background .12s; }
.at-back-btn:hover { background:var(--hover-bg,rgba(0,0,0,.06)); }
.dark .at-back-btn { color:#f0e6d0; }
.at-room-topbar-name { font-weight:800; font-size:1rem; color:var(--brown-dark); }
.dark .at-room-topbar-name { color:#f0e6d0; }
.at-room-topbar-theme { font-size:.78rem; color:var(--brown-mid); }
.dark .at-room-topbar-theme { color:rgba(255,255,255,.55); }
.at-host-tag { font-size:.75rem; font-weight:700; color:#b07800; background:#fff0b0; padding:.15rem .5rem; border-radius:999px; }
.dark .at-host-tag { background:#3a2a00; color:#ffd54f; }
.at-upload-btn { font-size:.78rem; padding:.2rem .55rem; }
.at-close-room-btn { margin-left:auto; background:none; border:1.5px solid var(--red,#e05050); color:var(--red,#e05050); border-radius:8px; padding:.2rem .6rem; font-size:.78rem; font-weight:700; cursor:pointer; transition:background .12s; }
.at-close-room-btn:hover { background:rgba(224,80,80,.1); }

.at-room-main { display:flex; flex:1; overflow:hidden; }
.at-canvas-wrap { flex:1; position:relative; overflow:hidden; background:#1a2a1a; display:flex; flex-direction:column; }
.at-canvas { width:100%; display:block; cursor:crosshair; image-rendering:pixelated; }
.at-canvas-hint { text-align:center; font-size:.7rem; color:rgba(255,255,255,.45); padding:.25rem 0; background:rgba(0,0,0,.35); flex-shrink:0; }

.at-sidebar { width:200px; min-width:160px; max-width:220px; border-left:1px solid var(--border); display:flex; flex-direction:column; overflow:hidden; background:var(--bg); }
.at-members-label { font-size:.72rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--brown-mid); padding:.6rem .7rem .3rem; }
.dark .at-members-label { color:rgba(255,255,255,.45); }
.at-member-list { padding:0 .4rem; overflow-y:auto; max-height:180px; flex-shrink:0; }
.at-member { display:flex; align-items:center; gap:.45rem; padding:.3rem .35rem; border-radius:7px; }
.at-member:hover { background:var(--hover-bg,rgba(0,0,0,.05)); }
.at-member-avatar { display:flex; align-items:center; }
.at-member-name { font-size:.8rem; color:var(--brown-dark); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.at-member-name em { font-style:normal; color:var(--brown-mid); font-size:.75rem; }
.dark .at-member-name { color:#e8dcc8; }

.at-chat-area { flex:1; display:flex; flex-direction:column; overflow:hidden; border-top:1px solid var(--border); }
.at-chat-list { flex:1; overflow-y:auto; padding:.5rem .6rem; display:flex; flex-direction:column; gap:.25rem; }
.at-chat-msg { font-size:.8rem; line-height:1.4; display:flex; flex-direction:column; gap:.05rem; }
.at-chat-name { font-weight:700; color:var(--green-dark,#3a7d44); font-size:.75rem; }
.dark .at-chat-name { color:#7ec88a; }
.at-chat-ts { font-size:.68rem; color:var(--brown-mid); margin-left:.3rem; }
.at-chat-content { color:var(--brown-dark); }
.dark .at-chat-content { color:#e8dcc8; }
.at-chat-sys { font-size:.73rem; color:var(--brown-mid); text-align:center; font-style:italic; padding:.1rem 0; }
.dark .at-chat-sys { color:rgba(255,255,255,.4); }
.at-chat-input-row { display:flex; gap:.35rem; padding:.45rem .5rem; border-top:1px solid var(--border); flex-shrink:0; }
.at-chat-input { flex:1; font-size:.82rem; padding:.3rem .55rem; border:1.5px solid var(--border); border-radius:8px; background:var(--input-bg,#fff); color:var(--brown-dark); outline:none; }
.dark .at-chat-input { background:#1e1810; color:#e8dcc8; border-color:#3a2e20; }
.at-chat-input:focus { border-color:var(--green-dark,#3a7d44); }
.at-chat-send { background:var(--green-dark,#3a7d44); color:#fff; border:none; border-radius:8px; width:30px; font-size:1rem; cursor:pointer; transition:background .12s; }
.at-chat-send:hover { background:#2d6035; }

.at-create-modal-overlay { z-index:1200; }
.at-create-modal-card { min-width:340px; max-width:420px; }
.at-theme-picker { display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; }
.at-theme-opt { border:2px solid var(--border); border-radius:10px; padding:.5rem .3rem; text-align:center; cursor:pointer; transition:border-color .12s, background .12s; background:var(--card-bg,#fffcf5); }
.dark .at-theme-opt { background:#2a2010; }
.at-theme-opt:hover { border-color:var(--green-dark,#3a7d44); }
.at-theme-opt.selected { border-color:var(--green-dark,#3a7d44); background:rgba(58,125,68,.1); }
.at-theme-opt-icon { font-size:1.5rem; }
.at-theme-opt-name { font-size:.68rem; font-weight:600; color:var(--brown-dark); margin-top:.2rem; }
.dark .at-theme-opt-name { color:#e8dcc8; }

/* ── Heart (Rod Enhancement) System ─────────────────────────────────────────── */

/* Panel wrapper — tinted border by tier */
.heart-panel {
  border: 1.5px solid rgba(180,60,80,.30);
  border-radius: 10px;
  padding: .55rem .65rem .6rem;
  margin-bottom: .5rem;
  background: rgba(200,50,70,.05);
  position: relative;
  overflow: hidden;
}
.dark .heart-panel { background: rgba(180,40,60,.10); border-color: rgba(220,80,100,.28); }

/* Tier-based panel accent */
.heart-tier-panel-0 { border-color: rgba(150,100,120,.25); }
.heart-tier-panel-1 { border-color: rgba(220,120,140,.40); background: rgba(220,100,120,.06); }
.heart-tier-panel-2 { border-color: rgba(220,60,80,.45);  background: rgba(200,50,70,.08); }
.heart-tier-panel-3 { border-color: rgba(180,20,50,.55);  background: rgba(180,20,50,.11); }
.heart-tier-panel-4 { border-color: rgba(140,0,180,.55);  background: rgba(130,0,160,.10); }
.heart-tier-panel-5 {
  border-color: rgba(255,180,0,.7);
  background: rgba(255,160,0,.08);
  box-shadow: 0 0 12px rgba(255,180,0,.25);
}

.heart-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .38rem;
}
.heart-panel-title { font-weight: 700; font-size: .82rem; color: var(--brown-dark, #5a3010); }
.dark .heart-panel-title { color: #e8c8a0; }
.heart-panel-bonus { font-size: .72rem; color: #888; }
.heart-panel-bonus.heart-bonus-active { color: #c04060; font-weight: 700; }
.dark .heart-panel-bonus.heart-bonus-active { color: #ff8090; }

/* Heart grid: 5 rows × 5 cells */
.heart-grid { display: flex; flex-direction: column; gap: 3px; margin-bottom: .45rem; }
.heart-row  { display: flex; gap: 3px; align-items: center; }
.heart-row-milestone { padding-bottom: 2px; border-bottom: 1px solid rgba(180,60,80,.20); margin-bottom: 1px; }

.heart-cell {
  width: 22px;
  height: 22px;
  border-radius: 4px;
  display: inline-block;
  position: relative;
  flex-shrink: 0;
}
/* Filled hearts — show ♥ via ::before */
.heart-cell.heart-filled::before { content: "♥"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .9rem; }

/* Empty */
.heart-cell.heart-empty { background: rgba(0,0,0,.08); border: 1.5px solid rgba(0,0,0,.12); }
.dark .heart-cell.heart-empty { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.12); }
.heart-cell.heart-empty::before { content: "♡"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: rgba(0,0,0,.22); }
.dark .heart-cell.heart-empty::before { color: rgba(255,255,255,.22); }

/* Tier color palette */
.heart-tier-1 { background: rgba(255,182,193,.55); border: 1.5px solid rgba(220,100,120,.5); color: #c0304a; }
.heart-tier-2 { background: rgba(220, 80, 90,.60); border: 1.5px solid rgba(200,40,60,.6);  color: #fff; }
.heart-tier-3 { background: rgba(160, 10, 40,.70); border: 1.5px solid rgba(140,0,30,.7);   color: #fff; }
.heart-tier-4 { background: rgba(120,  0,170,.65); border: 1.5px solid rgba(100,0,150,.7);  color: #fff; }
.heart-tier-5 {
  background: linear-gradient(135deg,#c09000,#e0a000,#ffd700);
  border: 1.5px solid #c09000;
  color: #3a2000;
  box-shadow: 0 0 5px rgba(255,200,0,.5);
  animation: heart-gold-pulse 1.6s ease-in-out infinite;
}

@keyframes heart-gold-pulse {
  0%,100% { box-shadow: 0 0 4px rgba(255,200,0,.4); }
  50%      { box-shadow: 0 0 10px rgba(255,200,0,.8); }
}

/* Dark mode tier overrides */
.dark .heart-tier-1 { background: rgba(200,100,120,.50); }
.dark .heart-tier-2 { background: rgba(200,50,70,.70); }
.dark .heart-tier-3 { background: rgba(150,10,40,.80); }
.dark .heart-tier-4 { background: rgba(110,0,160,.75); }

/* Enhance chance strip */
.heart-enhance-meta {
  display: flex;
  gap: .5rem;
  font-size: .7rem;
  font-weight: 700;
  margin-bottom: .3rem;
  flex-wrap: wrap;
}
.heart-chance-success { color: #2a8a40; }
.dark .heart-chance-success { color: #60d070; }
.heart-chance-fail    { color: #a05030; }
.dark .heart-chance-fail    { color: #e08050; }
.heart-chance-reset   { color: #c02040; }
.dark .heart-chance-reset   { color: #ff4060; }

/* Enhance button */
.heart-enhance-btn {
  width: 100%;
  font-weight: 700;
  font-size: .78rem;
  padding: .38rem .5rem;
  border-radius: 7px;
  background: linear-gradient(135deg, #c03050, #a01030);
  color: #fff;
  border: none;
  cursor: pointer;
  transition: opacity .15s, transform .08s;
}
.heart-enhance-btn:hover:not(:disabled) { opacity: .88; transform: translateY(-1px); }
.heart-enhance-btn:active { transform: translateY(0); }
.heart-enhance-btn:disabled { opacity: .45; cursor: not-allowed; }
.heart-btn-broke { opacity: .45 !important; cursor: not-allowed !important; }

/* Restore row */
.heart-restore-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: .35rem;
  padding: .3rem .4rem;
  background: rgba(180,20,50,.07);
  border: 1px solid rgba(180,20,50,.25);
  border-radius: 7px;
  gap: .4rem;
}
.heart-restore-copy { font-size: .72rem; font-weight: 600; color: #a02040; }
.dark .heart-restore-copy { color: #ff6070; }
.heart-restore-btn {
  font-size: .7rem;
  padding: .22rem .5rem;
  border-radius: 5px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* MAX badge */
.heart-maxed-badge {
  text-align: center;
  font-weight: 800;
  font-size: .82rem;
  color: #b08000;
  background: rgba(255,200,0,.12);
  border: 1px solid rgba(255,200,0,.35);
  border-radius: 7px;
  padding: .35rem;
  animation: heart-gold-pulse 1.6s ease-in-out infinite;
}
.dark .heart-maxed-badge { color: #ffd700; }

/* ── Flash overlays on enhance outcome ────────────────────────────────────── */
@keyframes heart-flash-success-anim {
  0%   { box-shadow: inset 0 0 0 0 rgba(40,180,80,0); }
  30%  { box-shadow: inset 0 0 30px 6px rgba(40,200,80,.45); }
  100% { box-shadow: inset 0 0 0 0 rgba(40,180,80,0); }
}
@keyframes heart-flash-fail-anim {
  0%   { box-shadow: inset 0 0 0 0 rgba(160,80,0,0); }
  30%  { box-shadow: inset 0 0 24px 4px rgba(180,90,0,.40); }
  100% { box-shadow: inset 0 0 0 0 rgba(160,80,0,0); }
}
@keyframes heart-flash-reset-anim {
  0%   { box-shadow: inset 0 0 0   0   rgba(200,0,40,0); }
  12%  { box-shadow: inset 0 0 70px 22px rgba(230,0,40,.90); }
  28%  { box-shadow: inset 0 0 20px 5px  rgba(220,0,40,.30); }
  45%  { box-shadow: inset 0 0 55px 16px rgba(230,0,40,.75); }
  62%  { box-shadow: inset 0 0 15px 3px  rgba(220,0,40,.20); }
  78%  { box-shadow: inset 0 0 30px 8px  rgba(220,0,40,.45); }
  100% { box-shadow: inset 0 0 0   0   rgba(200,0,40,0); }
}
@keyframes heart-reset-shake-anim {
  0%,100% { transform: translateX(0) rotate(0); }
  8%  { transform: translateX(-8px) rotate(-1.5deg); }
  18% { transform: translateX( 9px) rotate( 1.8deg); }
  28% { transform: translateX(-10px) rotate(-2deg); }
  38% { transform: translateX( 9px) rotate( 1.5deg); }
  48% { transform: translateX(-6px) rotate(-1deg); }
  58% { transform: translateX( 5px) rotate( 0.8deg); }
  68% { transform: translateX(-3px) rotate(-0.4deg); }
  80% { transform: translateX( 2px); }
  90% { transform: translateX(-1px); }
}

#sweet-dock.heart-flash-success { animation: heart-flash-success-anim .7s ease-out forwards; }
#sweet-dock.heart-flash-fail    { animation: heart-flash-fail-anim    .7s ease-out forwards; }
#sweet-dock.heart-flash-reset   {
  animation:
    heart-flash-reset-anim 1.3s ease-out forwards,
    heart-reset-shake-anim  .65s cubic-bezier(.36,.07,.19,.97) forwards;
}

/* ── Milestone celebration ─────────────────────────────────────────────────── */
@keyframes heart-milestone-anim {
  0%   { box-shadow: 0 0  0 0 rgba(255,180,0,.0); }
  15%  { box-shadow: 0 0 30px 8px rgba(255,180,0,.8); }
  60%  { box-shadow: 0 0 16px 4px rgba(255,180,0,.4); }
  100% { box-shadow: 0 0  0 0 rgba(255,180,0,.0); }
}
#sweet-dock.heart-milestone {
  animation: heart-milestone-anim 2.2s ease-out forwards;
  border-color: rgba(255,200,0,.6) !important;
}

/* ── Gacha (Lucky Crate) ───────────────────────────────────────────────────── */
.fishing-gacha-card {
  margin-top: .8rem;
  background: linear-gradient(135deg, rgba(248,216,104,.08) 0%, rgba(212,184,232,.08) 100%);
  border: 1.5px solid rgba(248,216,104,.25) !important;
}
.dark .fishing-gacha-card {
  background: linear-gradient(135deg, rgba(248,216,104,.06) 0%, rgba(212,184,232,.06) 100%);
  border-color: rgba(248,216,104,.2) !important;
}
.fishing-gacha-pulls-badge {
  background: rgba(248,216,104,.2);
  color: var(--brown-dark);
  border-radius: 20px;
  padding: .1rem .5rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .5px;
}
.dark .fishing-gacha-pulls-badge { color: #f8d868; }
.fishing-gacha-reroll-info {
  font-size: .72rem;
  font-weight: 700;
  color: #c05050;
  background: rgba(240,100,100,.08);
  border: 1px solid rgba(240,100,100,.2);
  border-radius: 8px;
  padding: .3rem .6rem;
  margin-bottom: .5rem;
}
.fishing-gacha-crate {
  font-size: 3rem;
  text-align: center;
  padding: .6rem 0 .4rem;
  transition: font-size .15s;
}
@keyframes gacha-shake {
  0%,100%{ transform: rotate(0deg) scale(1); }
  15%    { transform: rotate(-12deg) scale(1.25); }
  30%    { transform: rotate(14deg) scale(1.3); }
  45%    { transform: rotate(-10deg) scale(1.25); }
  60%    { transform: rotate(8deg) scale(1.2); }
  75%    { transform: rotate(-5deg) scale(1.1); }
}
.fishing-gacha-result {
  display: flex;
  justify-content: center;
  margin: .5rem 0;
}
@keyframes gacha-reveal {
  from { opacity: 0; transform: scale(0.6) translateY(10px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.fishing-gacha-prize {
  display: flex;
  align-items: center;
  gap: .6rem;
  background: rgba(255,255,255,.08);
  border: 2px solid currentColor;
  border-radius: 12px;
  padding: .5rem .9rem;
  min-width: 0;
}
.fishing-gacha-prize-icon { font-size: 1.6rem; }
.fishing-gacha-prize-name { font-size: .82rem; font-weight: 800; }
.fishing-gacha-prize-rarity { font-size: .65rem; font-weight: 800; letter-spacing: 1px; opacity: .8; }
.fishing-gacha-btn {
  width: 100%;
  margin-top: .4rem;
  background: linear-gradient(90deg, var(--green-dark), var(--green-mid, #6B9E70)) !important;
}
.fishing-gacha-btn:disabled {
  background: var(--tan-dark) !important;
  opacity: .6;
  cursor: not-allowed;
}
.fishing-gacha-odds-card {
  margin-top: .65rem;
  padding: .55rem .6rem;
  border-radius: 10px;
  background: color-mix(in srgb, var(--accent-alt, var(--green-light)) 12%, rgba(255,255,255,.72));
  border: 1px solid color-mix(in srgb, var(--accent, var(--green-mid)) 22%, rgba(120,80,40,.12));
}
.dark .fishing-gacha-odds-card {
  background: color-mix(in srgb, var(--accent-alt, var(--green-light)) 10%, rgba(20,24,22,.85));
  border-color: color-mix(in srgb, var(--accent, var(--green-mid)) 24%, rgba(255,255,255,.08));
}
.fishing-gacha-odds-title {
  font-size: .72rem;
  font-weight: 800;
  color: var(--brown-dark);
  margin-bottom: .35rem;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.dark .fishing-gacha-odds-title {
  color: var(--text-light);
}
.fishing-gacha-odds-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .28rem .45rem;
}
.fishing-gacha-odds-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .45rem;
  padding: .24rem .38rem;
  border-radius: 8px;
  background: rgba(255,255,255,.38);
}
.dark .fishing-gacha-odds-row {
  background: rgba(255,255,255,.05);
}
.fishing-gacha-odds-name,
.fishing-gacha-odds-pct {
  font-size: .68rem;
  font-weight: 700;
}
.fishing-gacha-odds-name {
  color: var(--brown-dark);
}
.dark .fishing-gacha-odds-name {
  color: var(--text-light);
}
.fishing-gacha-odds-pct {
  color: var(--brown-mid);
  flex-shrink: 0;
}
.dark .fishing-gacha-odds-pct {
  color: rgba(255,255,255,.72);
}
.fishing-gacha-odds-legendary .fishing-gacha-odds-pct { color: #c48a00; }
.fishing-gacha-odds-epic .fishing-gacha-odds-pct { color: #8f5cc5; }
.fishing-gacha-odds-rare .fishing-gacha-odds-pct { color: #3f87c7; }
.fishing-gacha-odds-uncommon .fishing-gacha-odds-pct { color: #4d8d55; }
@media (max-width: 520px) {
  .fishing-gacha-odds-list {
    grid-template-columns: 1fr;
  }
}

/* ── Acorn Hype Modal ──────────────────────────────────────────────────────── */
.hype-modal-card {
  max-width: 400px;
  text-align: center;
}
.hype-modal-header { margin-bottom: 1.2rem; }
.hype-modal-icon { font-size: 3rem; line-height: 1; margin-bottom: .4rem; }
.hype-modal-header h2 { font-size: 1.5rem; font-weight: 900; margin: 0; color: var(--brown-dark); }
.dark .hype-modal-header h2 { color: var(--tan); }
.hype-modal-sub { font-size: .85rem; color: var(--brown-mid); margin: .3rem 0 0; font-weight: 600; }
.hype-level-display {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  font-size: .9rem; font-weight: 700; color: var(--brown-dark); margin-bottom: .6rem;
}
.dark .hype-level-display { color: var(--tan); }
.hype-tier-badge {
  font-size: .85rem; font-weight: 800; letter-spacing: .5px;
  background: rgba(248,216,104,.15); border-radius: 20px; padding: .15rem .5rem;
  border: 1.5px solid currentColor;
}
.hype-flame-row {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 2px;
  margin: .5rem 0; min-height: 2rem;
}
.hype-flame-dot { font-size: 1.3rem; opacity: .15; transition: opacity .3s; }
.hype-flame-dot.filled { opacity: 1; animation: hype-pop .3s cubic-bezier(0.34,1.56,0.64,1) both; }
@keyframes hype-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}
.hype-how-it-works {
  font-size: .78rem; color: var(--brown-mid); margin: .5rem 0 1rem; line-height: 1.5;
}
.hype-token-info { margin-bottom: .8rem; }
.hype-token-count {
  display: inline-flex; align-items: center; gap: .4rem;
  background: rgba(107,158,112,.12); border: 1.5px solid rgba(107,158,112,.3);
  border-radius: 20px; padding: .3rem .8rem;
  font-size: .88rem; font-weight: 800; color: var(--green-dark);
}
.dark .hype-token-count { color: var(--green-light); }
.hype-actions { display: flex; flex-direction: column; gap: .5rem; margin-bottom: .8rem; }
.hype-do-btn { font-size: .95rem; padding: .7rem 1rem; }
.hype-buy-btn { font-size: .85rem; }
.hype-mini-note { font-size: .72rem; color: var(--brown-mid); opacity: .8; }
.server-hype-btn { font-size: 1rem; }

/* ═══════════════════════════════════════════════════════════════════════════
   COSMETIC THEMES — applied via body.cosmetic-{id}
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Rarity colors ───────────────────────────────────────────────────────── */
.rarity-common    { color: #aaaaaa; }
.rarity-uncommon  { color: #57d864; }
.rarity-rare      { color: #4fa4ff; }
.rarity-epic      { color: #c06aff; }
.rarity-legendary { color: #ffb830; }

/* ── Common: Wildflower ───────────────────────────────────────────────────── */
body.cosmetic-wildflower { --accent: #d07aaa; --accent-alt: #e8a8cc; }
body:not(.dark).cosmetic-wildflower { --bg-sidebar: #fff0f6; --bg-main: #fff8fb; }
body.dark.cosmetic-wildflower { --bg-sidebar: #1e0f16; --bg-main: #160b12; }

/* ── Common: Deep Cave ────────────────────────────────────────────────────── */
body.cosmetic-deep_cave { --accent: #7070c8; --accent-alt: #9090d8; }
body:not(.dark).cosmetic-deep_cave { --bg-sidebar: #f0f0fa; --bg-main: #f8f8ff; }
body.dark.cosmetic-deep_cave { --bg-sidebar: #12121e; --bg-main: #0c0c18; }

/* ── Common: Citrus Grove ────────────────────────────────────────────────── */
body.cosmetic-citrus_grove { --accent: #d4962a; --accent-alt: #e8b444; }
body:not(.dark).cosmetic-citrus_grove { --bg-sidebar: #fffbf0; --bg-main: #fffdf5; }
body.dark.cosmetic-citrus_grove { --bg-sidebar: #1a1400; --bg-main: #110e00; }

/* ── Uncommon: Firefly Glade ──────────────────────────────────────────────── */
body.cosmetic-firefly_glade { --accent: #7bcf5a; --accent-alt: #aaed88; }
body:not(.dark).cosmetic-firefly_glade { --bg-main: #f4fff2; --bg-sidebar: #eafde7; }
body.dark.cosmetic-firefly_glade { --bg-main: #091409; --bg-sidebar: #07100a; }
.ct-firefly-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ct-firefly {
  position: absolute; width: 6px; height: 6px; border-radius: 50%;
  background: radial-gradient(circle, #e8ff88 30%, transparent 70%);
  box-shadow: 0 0 8px 4px rgba(220,255,120,.8);
  animation: ct-fly-drift linear infinite;
}
.ct-firefly:nth-child(odd)  { --fx: 40px; --fy: -60px; --fx2: -30px; --fy2: -140px; }
.ct-firefly:nth-child(even) { --fx: -50px; --fy: -90px; --fx2: 30px; --fy2: -120px; }
.ct-firefly:nth-child(3n)   { --fx: 20px; --fy: -70px; --fx2: 60px; --fy2: -180px; }
@keyframes ct-fly-drift {
  0%   { opacity: 0; transform: translate(0,0) scale(1); }
  10%  { opacity: 1; }
  50%  { opacity: .7; transform: translate(var(--fx,60px),var(--fy,-80px)) scale(.7); }
  90%  { opacity: .8; }
  100% { opacity: 0; transform: translate(var(--fx2,-40px),var(--fy2,-160px)) scale(1.2); }
}

/* ── Uncommon: Petal Drift ───────────────────────────────────────────────── */
body.cosmetic-petal_drift { --accent: #d45890; --accent-alt: #e880b4; }
.ct-petal-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ct-petal {
  position: absolute; top: -30px;
  animation: ct-petal-fall linear forwards;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.1));
}
@keyframes ct-petal-fall {
  0%   { transform: translateY(0) rotate(0deg) translateX(0); opacity: 0; }
  5%   { opacity: 1; }
  50%  { transform: translateY(50vh) rotate(180deg) translateX(20px); }
  90%  { opacity: .8; }
  100% { transform: translateY(108vh) rotate(360deg) translateX(-10px); opacity: 0; }
}

/* ── Uncommon: Deep Rain ─────────────────────────────────────────────────── */
body.cosmetic-deep_rain { --accent: #6aa4d4; --accent-alt: #88c0e8; }
body:not(.dark).cosmetic-deep_rain { --bg-main: #f4f8fc; --bg-sidebar: #edf4f9; }
body.dark.cosmetic-deep_rain { --bg-main: #090f16; --bg-sidebar: #060c12; }
.ct-rain-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ct-raindrop {
  position: absolute; top: -30px; width: 1.5px;
  background: linear-gradient(to bottom, transparent, rgba(140,200,255,.5));
  border-radius: 2px;
  animation: ct-rain-fall linear infinite;
}
@keyframes ct-rain-fall {
  from { transform: translateY(-30px) skewX(-10deg); }
  to   { transform: translateY(105vh) skewX(-10deg); }
}

/* ── Rare: Cozy Nook ─────────────────────────────────────────────────────── */
body.cosmetic-cozy_nook { --accent: #c08044; --accent-alt: #d8a060; }
body:not(.dark).cosmetic-cozy_nook { --bg-sidebar: #fdf6ec; --bg-main: #fffaf4; }
body.dark.cosmetic-cozy_nook { --bg-sidebar: #1a1008; --bg-main: #110a04; }
.ct-candle {
  position: fixed; bottom: 80px; right: 18px; z-index: 100;
  cursor: pointer; display: flex; flex-direction: column; align-items: center;
  user-select: none;
}
.ct-candle-flame {
  font-size: 2.4rem; filter: drop-shadow(0 0 8px rgba(255,200,80,.8));
  animation: ct-candle-sway 3s ease-in-out infinite;
}
@keyframes ct-candle-sway {
  0%,100% { transform: rotate(-3deg) scale(1); }
  50%     { transform: rotate(3deg) scale(1.05); }
}
.ct-candle-flame.ct-candle-flicker { animation: ct-candle-flicker-anim .7s ease-out; }
@keyframes ct-candle-flicker-anim {
  0%  { transform: scale(1)    rotate(0);    filter: drop-shadow(0 0 8px rgba(255,200,80,.8)); }
  20% { transform: scale(1.4)  rotate(-8deg); filter: drop-shadow(0 0 20px rgba(255,160,40,1)); }
  50% { transform: scale(.85)  rotate(5deg);  filter: drop-shadow(0 0 4px rgba(255,200,80,.4)); }
  80% { transform: scale(1.1)  rotate(-3deg); }
  100%{ transform: scale(1)    rotate(0); }
}

/* ── Rare: Tide Pool ─────────────────────────────────────────────────────── */
body.cosmetic-tide_pool { --accent: #38a8c8; --accent-alt: #60c8e0; }
body:not(.dark).cosmetic-tide_pool { --bg-main: #f4fdff; --bg-sidebar: #eaf9ff; }
body.dark.cosmetic-tide_pool { --bg-main: #050f18; --bg-sidebar: #04090f; }
.ct-bubble-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ct-bubble {
  position: absolute; pointer-events: all; border-radius: 50%;
  border: 1.5px solid rgba(100,210,240,.5);
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.5) 20%, rgba(100,210,240,.15) 80%);
  animation: ct-bubble-rise linear forwards; cursor: pointer; transition: transform .1s;
}
.ct-bubble:hover { transform: scale(1.15); }
@keyframes ct-bubble-rise {
  from { opacity: 0; transform: translateY(0) scale(.8); }
  5%   { opacity: .9; }
  90%  { opacity: .7; }
  to   { opacity: 0; transform: translateY(-110vh) scale(1.1); }
}
.ct-bubble-pop { animation: ct-bubble-pop-anim .3s ease-out forwards !important; }
@keyframes ct-bubble-pop-anim {
  0%  { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.6); opacity: .6; }
  100%{ transform: scale(2); opacity: 0; }
}

/* ── Rare: Autumn Hoard ──────────────────────────────────────────────────── */
body.cosmetic-autumn_hoard { --accent: #c06028; --accent-alt: #d8804a; }
body:not(.dark).cosmetic-autumn_hoard { --bg-sidebar: #fff8f0; --bg-main: #fffcf7; }
body.dark.cosmetic-autumn_hoard { --bg-sidebar: #180a00; --bg-main: #100600; }
.ct-leaf-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ct-leaf {
  position: absolute; top: -2rem; pointer-events: all; cursor: pointer;
  animation: ct-leaf-fall linear forwards;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.2));
}
@keyframes ct-leaf-fall {
  0%  { transform: translateY(0) rotate(0deg); opacity: 1; }
  30% { transform: translateY(30vh) rotate(120deg) translateX(20px); }
  60% { transform: translateY(60vh) rotate(240deg) translateX(-10px); }
  100%{ transform: translateY(108vh) rotate(360deg) translateX(15px); opacity: .3; }
}
.ct-leaf-caught { animation: ct-leaf-collect .4s ease-out forwards !important; }
@keyframes ct-leaf-collect { to { transform: scale(2) translateY(-20px); opacity: 0; } }
.ct-leaf-counter {
  position: fixed; bottom: 80px; right: 20px;
  background: var(--bg-sidebar, rgba(255,248,240,.95));
  border: 2px solid var(--accent, #c06028); border-radius: 20px;
  padding: .3rem .8rem; font-size: .85rem; font-weight: 800;
  z-index: 101; pointer-events: none; box-shadow: 0 2px 8px rgba(0,0,0,.1);
  transition: opacity .3s;
}
.ct-leaf-counter-pop { animation: ct-counter-pop .4s cubic-bezier(.34,1.56,.64,1) both; }
@keyframes ct-counter-pop { from { transform: scale(.8); } to { transform: scale(1); } }

/* ── Epic: Storm Watch ────────────────────────────────────────────────────── */
body.cosmetic-storm_watch { --accent: #5870c8; --accent-alt: #7890e0; }
body:not(.dark).cosmetic-storm_watch { --bg-sidebar: #f0f2fc; --bg-main: #f6f8ff; }
body.dark.cosmetic-storm_watch { --bg-sidebar: #080c20; --bg-main: #050818; }
.ct-storm-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; transition: background .12s; }
.ct-storm-layer.ct-storm-flash { background: rgba(180,210,255,.18); }
.ct-lightning {
  position: absolute; pointer-events: none;
  animation: ct-lightning-flash .5s ease-out forwards; z-index: 3;
}
@keyframes ct-lightning-flash {
  0%  { opacity: 1; }
  40% { opacity: .8; }
  100%{ opacity: 0; transform: scaleY(1.3); }
}

/* ── Epic: Blossom Keeper ─────────────────────────────────────────────────── */
body.cosmetic-blossom_keeper { --accent: #d060a0; --accent-alt: #e880c0; }
body:not(.dark).cosmetic-blossom_keeper { --bg-sidebar: #fff0f8; --bg-main: #fff8fc; }
body.dark.cosmetic-blossom_keeper { --bg-sidebar: #1a0012; --bg-main: #12000c; }
.ct-plant-container { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ct-plant-sprout {
  position: absolute; font-size: 1.3rem; pointer-events: none;
  animation: ct-sprout-grow .5s cubic-bezier(.34,1.56,.64,1) both;
  transition: opacity .8s;
}
@keyframes ct-sprout-grow {
  from { transform: scale(0) rotate(-20deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ── Legendary: Hammock Afternoon ─────────────────────────────────────────── */
body.cosmetic-hammock_afternoon { --accent: #6aaa5a; --accent-alt: #88cc78; }
body:not(.dark).cosmetic-hammock_afternoon { --bg-sidebar: #f4fbf0; --bg-main: #fafff7; }
body.dark.cosmetic-hammock_afternoon { --bg-sidebar: #081408; --bg-main: #050e05; }
.ct-hammock-scene {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  z-index: 100; cursor: pointer; user-select: none;
  display: flex; flex-direction: column; align-items: center;
}
.ct-hammock-wrap {
  display: flex; align-items: flex-end; gap: 4px; transform-origin: center top;
}
.ct-hammock-wrap.ct-hammock-swing { animation: ct-hammock-sway 1.6s cubic-bezier(.36,.07,.19,.97); }
@keyframes ct-hammock-sway {
  0%  { transform: rotate(0deg); }
  15% { transform: rotate(-22deg); }
  35% { transform: rotate(18deg); }
  55% { transform: rotate(-12deg); }
  72% { transform: rotate(8deg); }
  86% { transform: rotate(-4deg); }
  100%{ transform: rotate(0deg); }
}
.ct-hammock-tree { font-size: 2.8rem; line-height: 1; }
.ct-hammock-body { display: flex; flex-direction: column; align-items: center; margin: 0 4px; }
.ct-hammock-net {
  background: rgba(160,110,60,.25); border-radius: 4px 4px 12px 12px;
  padding: 2px 10px; font-size: .75rem; letter-spacing: 2px;
  border: 1.5px solid rgba(160,110,60,.4);
}
.ct-hammock-char { font-size: 1.6rem; margin-bottom: -4px; }
.ct-hammock-rope-left, .ct-hammock-rope-right {
  width: 1.5px; height: 22px; background: rgba(160,110,60,.5);
  align-self: flex-end; margin-bottom: 8px;
}
.ct-hammock-hint { font-size: .72rem; color: var(--brown-mid, #aaa); margin-top: 2px; transition: opacity .6s; }

/* ── Legendary: Stargazer Peak ────────────────────────────────────────────── */
body.cosmetic-stargazer_peak { --accent: #6080e0; --accent-alt: #8090ff; }
body:not(.dark).cosmetic-stargazer_peak { --bg-sidebar: #f0f2ff; --bg-main: #f6f8ff; }
body.dark.cosmetic-stargazer_peak { --bg-sidebar: #060820; --bg-main: #040618; }
.ct-star-canvas { position: fixed; inset: 0; pointer-events: all; z-index: 2; }
.ct-star-hint {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(10,14,40,.75); color: #c8d8ff;
  border-radius: 20px; padding: .35rem 1rem;
  font-size: .8rem; font-weight: 700; z-index: 200;
  pointer-events: none; transition: opacity 1.2s;
}

/* ── Legendary: Campfire Hollow ───────────────────────────────────────────── */
body.cosmetic-campfire_hollow { --accent: #c05020; --accent-alt: #e07040; }
body:not(.dark).cosmetic-campfire_hollow { --bg-sidebar: #fff8f2; --bg-main: #fffaf6; }
body.dark.cosmetic-campfire_hollow { --bg-sidebar: #180800; --bg-main: #0f0500; }
.ct-campfire-scene {
  position: fixed; bottom: 10px; right: 24px; z-index: 100;
  cursor: pointer; user-select: none;
  display: flex; flex-direction: column; align-items: center;
}
.ct-fire-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.ct-fire-log { font-size: 1.6rem; margin-top: 2px; }
.ct-fire-emoji {
  font-size: 1.8rem; line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255,140,40,.7));
  animation: ct-fire-flicker 1.1s ease-in-out infinite alternate;
  transition: font-size .3s;
}
@keyframes ct-fire-flicker {
  from { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 8px rgba(255,140,40,.6)); }
  to   { transform: scale(1.08) rotate(2deg); filter: drop-shadow(0 0 18px rgba(255,100,20,.9)); }
}
.ct-spark-layer { position: absolute; top: 0; left: 0; width: 50px; height: 60px; overflow: visible; }
.ct-spark {
  position: absolute; bottom: 100%; pointer-events: none;
  animation: ct-spark-fly linear forwards;
}
@keyframes ct-spark-fly {
  from { transform: translateY(0) rotate(0); opacity: 1; }
  to   { transform: translateY(-60px) rotate(180deg) translateX(20px); opacity: 0; }
}
.ct-campfire-hint { font-size: .72rem; color: var(--brown-mid, #aaa); margin-top: 2px; transition: opacity .6s; }

/* ── Legendary: Lantern Festival ──────────────────────────────────────────── */
body.cosmetic-lantern_festival { --accent: #c85020; --accent-alt: #e07040; }
body:not(.dark).cosmetic-lantern_festival { --bg-sidebar: #fff8f0; --bg-main: #fffcf5; }
body.dark.cosmetic-lantern_festival { --bg-sidebar: #160800; --bg-main: #0f0500; }
.ct-lantern-layer { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.ct-lantern {
  position: absolute; pointer-events: none;
  animation: ct-lantern-float linear forwards;
  filter: drop-shadow(0 0 6px rgba(255,160,60,.6));
}
@keyframes ct-lantern-float {
  0%  { opacity: 0; transform: translateY(0) translateX(0); }
  5%  { opacity: 1; }
  90% { opacity: .8; }
  100%{ opacity: 0; transform: translateY(-115vh) translateX(var(--drift-x,0px)); }
}
.ct-lantern-hint {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%);
  background: rgba(30,10,0,.75); color: #ffd0a0;
  border-radius: 20px; padding: .35rem 1rem;
  font-size: .8rem; font-weight: 700; z-index: 200;
  pointer-events: none; transition: opacity 1.2s;
}

/* ── Cosmetic overlay base ────────────────────────────────────────────────── */
.cosmetic-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }

/* ── Theme Store Modal ────────────────────────────────────────────────────── */
.theme-store-modal-card { max-width: 420px; width: 100%; }
.theme-store-header { margin-bottom: .7rem; text-align: center; }
.theme-store-header h2 { font-size: 1.15rem; font-weight: 900; margin: 0 0 .15rem; }
.theme-store-header p  { font-size: .78rem; color: var(--brown-mid); margin: 0; }
.theme-store-grid { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .7rem; }
.theme-store-item {
  display: flex; align-items: center; gap: .65rem;
  background: var(--bg-sidebar); border: 1.5px solid var(--border, rgba(0,0,0,.08));
  border-radius: 10px; padding: .45rem .7rem;
}
.theme-store-item-icon { font-size: 1.4rem; flex-shrink: 0; line-height: 1; }
.theme-store-item-info { flex: 1; min-width: 0; }
.theme-store-item-name { font-weight: 800; font-size: .88rem; display: flex; align-items: center; gap: .35rem; }
.theme-store-item-desc { font-size: .74rem; color: var(--brown-mid); margin-top: .05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.theme-store-item-rarity { font-size: .62rem; font-weight: 800; letter-spacing: .7px; text-transform: uppercase; opacity: .85; }
.theme-store-buy-btn { flex-shrink: 0; white-space: nowrap; font-size: .78rem; padding: .3rem .75rem; width: auto; margin-top: 0; }
.theme-store-owned-badge {
  flex-shrink: 0; font-size: .74rem; font-weight: 800;
  color: var(--green-dark); padding: .25rem .6rem;
  background: rgba(107,158,112,.12); border-radius: 20px; border: 1.5px solid rgba(107,158,112,.3);
}
.theme-store-refreshes { font-size: .72rem; color: var(--brown-mid); text-align: center; }

/* ── Settings: Cosmetic Themes section ───────────────────────────────────── */
.cosmetic-themes-section { margin-top: 1.6rem; }
.cosmetic-themes-section h3 { font-size: 1rem; font-weight: 800; margin: 0 0 .3rem; color: var(--brown-dark); }
.dark .cosmetic-themes-section h3 { color: var(--tan); }
.cosmetic-themes-section p { font-size: .78rem; color: var(--brown-mid); margin: 0 0 .9rem; }
.cosmetic-themes-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: .6rem; }
.cosmetic-theme-card {
  border: 2px solid var(--border, rgba(0,0,0,.1)); border-radius: 10px;
  padding: .5rem .6rem; cursor: pointer; user-select: none;
  transition: border-color .2s, background .2s;
  display: flex; flex-direction: column; gap: .25rem;
  background: var(--bg-sidebar);
}
.cosmetic-theme-card:hover { border-color: var(--accent); }
.cosmetic-theme-card.active { border-color: var(--accent); background: rgba(107,158,112,.12); }
.cosmetic-theme-card-icon { font-size: 1.6rem; }
.cosmetic-theme-card-name { font-size: .8rem; font-weight: 800; }
.cosmetic-theme-card-rarity { font-size: .64rem; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.cosmetic-theme-card-equip { font-size: .7rem; margin-top: .2rem; padding: .2rem .5rem; width: 100%; text-align: center; }
.cosmetic-themes-store-link { margin-top: .8rem; font-size: .8rem; font-weight: 700; cursor: pointer; color: var(--accent); text-decoration: underline; display: inline-block; }
.cosmetic-themes-empty { font-size: .82rem; color: var(--brown-mid); font-style: italic; }
.fishing-social-row-muted {
  opacity: .86;
}
.fishing-social-pending-pill {
  align-self: center;
  padding: .18rem .48rem;
  border-radius: 999px;
  background: rgba(120,80,40,.08);
  border: 1px dashed rgba(120,80,40,.25);
  color: var(--brown-mid);
  font-size: .68rem;
  font-weight: 800;
}
.dark .fishing-social-pending-pill {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.16);
  color: rgba(255,255,255,.76);
}