/* ============================================================
   ChatBase — ⚡ Turbo perks (turboperks.js)
   ============================================================ */

/* ---------- 🎭 Avatar decorations ---------- */
.tbd { position: relative; overflow: visible !important; }
#general.dc-on .message .message-avatar.tbd { overflow: visible !important; }
.tbd > img, .tbd > .dc-initial, .tbd > .dch-init, .tbd > span:not(.tbd-icon) { border-radius: 50%; }
.tbd-icon {
    position: absolute; z-index: 2; pointer-events: none;
    top: -9px; right: -9px; font-size: 18px; line-height: 1;
    filter: drop-shadow(0 2px 3px rgba(0,0,0,.6));
    animation: tbdBob 2.4s ease-in-out infinite;
}
.dc-mem-av .tbd-icon, .dch-av .tbd-icon { top: -8px; right: -8px; font-size: 14px; }
.tbd-crown .tbd-icon, .tbd-headphones .tbd-icon, .tbd-halo .tbd-icon, .tbd-cat .tbd-icon, .tbd-rainbow .tbd-icon { right: auto; left: 50%; top: -14px; transform: translateX(-50%); animation-name: tbdBobC; }
.dc-mem-av.tbd-crown .tbd-icon, .dc-mem-av.tbd-headphones .tbd-icon, .dc-mem-av.tbd-halo .tbd-icon, .dc-mem-av.tbd-cat .tbd-icon, .dc-mem-av.tbd-rainbow .tbd-icon,
.dch-av.tbd-crown .tbd-icon, .dch-av.tbd-headphones .tbd-icon, .dch-av.tbd-halo .tbd-icon, .dch-av.tbd-cat .tbd-icon, .dch-av.tbd-rainbow .tbd-icon { top: -11px; }
.tbd-flames .tbd-icon { top: auto; bottom: -8px; right: -6px; }
@keyframes tbdBob { 50% { transform: translateY(-2px) rotate(-6deg); } }
@keyframes tbdBobC { 50% { transform: translateX(-50%) translateY(-2px); } }
/* Ring colour per decoration */
.tbd { --tbd-ring: transparent; }
.tbd-crown { --tbd-ring: #ffd166; } .tbd-flames { --tbd-ring: #ff7a2f; } .tbd-frost { --tbd-ring: #7fe3ff; } .tbd-sakura { --tbd-ring: #ff9ccf; }
.tbd-cat { --tbd-ring: #f5b971; } .tbd-halo { --tbd-ring: #fff6c2; } .tbd-devil { --tbd-ring: #ff3b5c; } .tbd-ghost { --tbd-ring: #d6dcff; }
.tbd-rocket { --tbd-ring: #5b8cff; } .tbd-bolt { --tbd-ring: #c14bff; } .tbd-stars { --tbd-ring: #fff; } .tbd-headphones { --tbd-ring: #34e8b0; }
.tbd > img, .tbd > .dc-initial, .tbd > .dch-init { box-shadow: 0 0 0 2px var(--tbd-ring), 0 0 12px var(--tbd-ring); }
.tbd-rainbow > img, .tbd-rainbow > .dc-initial, .tbd-rainbow > .dch-init { animation: tbdHue 3s linear infinite; box-shadow: 0 0 0 2px #ff73fa, 0 0 12px #5b8cff; }
@keyframes tbdHue { to { filter: hue-rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .tbd-icon, .tbd-rainbow > img { animation: none !important; } }

/* ---------- 🌈 Name styles (beat turbo.css's default rainbow) ---------- */
.tbn { -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; background-size: 300% 100% !important; animation: tbRainbow 6s linear infinite !important; }
.tbn .tb-badge, .tbn .dc-crown { -webkit-text-fill-color: #fff !important; color: #fff !important; }
.tbn-ocean { background-image: linear-gradient(90deg, #22d3ee, #3b82f6, #22d3ee) !important; }
.tbn-gold { background-image: linear-gradient(90deg, #b8860b, #ffd166, #fff3b0, #ffd166, #b8860b) !important; }
.tbn-rainbow { background-image: linear-gradient(90deg, #ff73fa, #c14bff, #5b8cff, #34e8b0, #ffd166, #ff73fa) !important; }
.tbn-fire { background-image: linear-gradient(90deg, #ff3b30, #ff9500, #ffd60a, #ff9500, #ff3b30) !important; }
.tbn-galaxy { background-image: linear-gradient(90deg, #7c3aed, #ec4899, #3b82f6, #7c3aed) !important; }
.tbn-neon { background-image: linear-gradient(90deg, #39ff14, #b6ff00, #39ff14) !important; filter: drop-shadow(0 0 6px rgba(57,255,20,.6)); }
.tbn-candy { background-image: linear-gradient(90deg, #ff8fc7, #ffd1e8, #8fd3ff, #ff8fc7) !important; }
.tbn-toxic { background-image: linear-gradient(90deg, #a3e635, #22c55e, #facc15, #a3e635) !important; }
.tbn-custom { background-image: linear-gradient(90deg, var(--tbA), var(--tbB), var(--tbA)) !important; }

/* ---------- 🪪 Profile theme + effects ---------- */
.rw-modal-card.tb-themed { background: linear-gradient(180deg, var(--tbpA), var(--tbpB)) !important; }
.rw-modal-card.tb-themed .rw-prof-banner { background: linear-gradient(120deg, var(--tbpA), var(--tbpB)) !important; filter: brightness(1.3); }
.tb-prof-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; z-index: 0; }
.tb-prof-fx i { position: absolute; top: -30px; font-style: normal; opacity: .85; animation: tbFall linear infinite; }
.rw-modal-card.tb-fxed { position: relative; overflow-x: hidden; overflow-y: auto; }   /* was overflow:hidden — long profiles couldn't scroll */
.rw-modal-card.tb-fxed > *:not(.tb-prof-fx):not(.rw-modal-x) { position: relative; z-index: 1; }
.rw-modal-card.tb-fxed > .rw-modal-x { z-index: 2; }
@keyframes tbFall { to { transform: translateY(680px) rotate(200deg); } }

/* ---------- 🎨 App themes (just recolour the site's accent tokens) ---------- */
:root[data-tbtheme="ocean"]   { --neo-accent: #22d3ee !important; --neo-accent2: #3b82f6 !important; --neo-glow: rgba(34,211,238,.35) !important; --gradient-purple: linear-gradient(135deg, #0ea5e9, #3b82f6) !important; }
:root[data-tbtheme="sunset"]  { --neo-accent: #ff8a5b !important; --neo-accent2: #ff5fa2 !important; --neo-glow: rgba(255,138,91,.35) !important; --gradient-purple: linear-gradient(135deg, #ff7e5f, #ff5fa2) !important; }
:root[data-tbtheme="aurora"]  { --neo-accent: #34e8b0 !important; --neo-accent2: #22d3ee !important; --neo-glow: rgba(52,232,176,.35) !important; --gradient-purple: linear-gradient(135deg, #10b981, #22d3ee, #8b5cf6) !important; }
:root[data-tbtheme="sakura"]  { --neo-accent: #ff8fc7 !important; --neo-accent2: #ffc4e1 !important; --neo-glow: rgba(255,143,199,.35) !important; --gradient-purple: linear-gradient(135deg, #ec4899, #f9a8d4) !important; }
:root[data-tbtheme="matrix"]  { --neo-accent: #39ff6a !important; --neo-accent2: #16a34a !important; --neo-glow: rgba(57,255,106,.3) !important; --gradient-purple: linear-gradient(135deg, #15803d, #22c55e) !important; }
:root[data-tbtheme="royal"]   { --neo-accent: #c14bff !important; --neo-accent2: #ff73fa !important; --neo-glow: rgba(193,75,255,.35) !important; --gradient-purple: linear-gradient(135deg, #7c3aed, #c14bff, #ff73fa) !important; }
:root[data-tbtheme="gold"]    { --neo-accent: #ffd166 !important; --neo-accent2: #f59e0b !important; --neo-glow: rgba(255,209,102,.3) !important; --gradient-purple: linear-gradient(135deg, #b45309, #f59e0b, #fde68a) !important; }
:root[data-tbtheme="crimson"] { --neo-accent: #ff4d6d !important; --neo-accent2: #ff8fa3 !important; --neo-glow: rgba(255,77,109,.35) !important; --gradient-purple: linear-gradient(135deg, #be123c, #ff4d6d) !important; }

/* ---------- 🖼️ Wallpaper (fixed layer above the star canvas, below the app) ---------- */
#tbWall { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
#tbWall .tbw-img { position: absolute; inset: 0; background-size: cover; background-position: center; }
#tbWall .tbw-dim { position: absolute; inset: 0; background: #000; }
.tbw-midnight, #tbWall.tbw-midnight .tbw-img { background: radial-gradient(1px 1px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 60%, #fff, transparent), radial-gradient(1.5px 1.5px at 40% 80%, #cfd8ff, transparent), radial-gradient(1px 1px at 85% 20%, #fff, transparent), radial-gradient(ellipse at 50% 0%, #1e2a5a, #070912 70%); background-size: 300px 300px, 400px 400px, 350px 350px, 250px 250px, cover; }
.tbw-ocean, #tbWall.tbw-ocean .tbw-img { background: radial-gradient(ellipse at 30% 110%, #0ea5e9 0%, transparent 55%), radial-gradient(ellipse at 80% -10%, #1e3a8a, transparent 60%), linear-gradient(180deg, #031525, #062a4a); }
.tbw-aurora, #tbWall.tbw-aurora .tbw-img { background: linear-gradient(120deg, #0b3d2e, #0f766e, #4c1d95, #0b3d2e); background-size: 400% 400%; animation: tbwShift 18s ease-in-out infinite; }
.tbw-sunset, #tbWall.tbw-sunset .tbw-img { background: linear-gradient(180deg, #2b1055 0%, #7b2869 40%, #e2557a 70%, #ffb26b 100%); }
.tbw-nebula, #tbWall.tbw-nebula .tbw-img { background: radial-gradient(circle at 25% 35%, rgba(193,75,255,.55), transparent 40%), radial-gradient(circle at 75% 65%, rgba(255,115,250,.4), transparent 40%), radial-gradient(circle at 60% 20%, rgba(91,140,255,.45), transparent 35%), #07040f; }
.tbw-synthwave, #tbWall.tbw-synthwave .tbw-img { background: linear-gradient(transparent 60%, rgba(255,0,180,.25) 60%), repeating-linear-gradient(90deg, rgba(255,0,200,.35) 0 2px, transparent 2px 80px), repeating-linear-gradient(0deg, rgba(255,0,200,.35) 0 2px, transparent 2px 40px), radial-gradient(circle at 50% 58%, #ffb347 0 12%, transparent 12.5%), linear-gradient(180deg, #12002b, #3a0a5c 58%, #12002b 58%); }
.tbw-lava, #tbWall.tbw-lava .tbw-img { background: radial-gradient(circle at 20% 80%, #ff3b30, transparent 40%), radial-gradient(circle at 80% 30%, #ff9500, transparent 40%), radial-gradient(circle at 50% 50%, #7f1d1d, #1a0505 70%); background-size: 200% 200%; animation: tbwShift 14s ease-in-out infinite; }
.tbw-sakura, #tbWall.tbw-sakura .tbw-img { background: radial-gradient(circle at 70% 20%, rgba(255,182,213,.55), transparent 45%), radial-gradient(circle at 20% 80%, rgba(255,143,199,.4), transparent 45%), linear-gradient(180deg, #2a0f1f, #4a1d35); }
.tbw-forest, #tbWall.tbw-forest .tbw-img { background: radial-gradient(ellipse at 50% 120%, #14532d, transparent 60%), linear-gradient(180deg, #04130b, #0b2a18 60%, #052012); }
.tbw-custom { background: repeating-conic-gradient(#333 0 25%, #222 0 50%) 0 0 / 16px 16px; }
.tbw-none { background: #111; }
@keyframes tbwShift { 50% { background-position: 100% 50%; } }
@media (prefers-reduced-motion: reduce) { #tbWall .tbw-img { animation: none !important; } }

/* ---------- 🔊 Soundboard + 🌟 stickers pop-over (General composer) ---------- */
#general.dc-on .chat-input-container .tb-tool { order: 2; }
.tb-pop {
    position: absolute; bottom: calc(100% + 10px); right: 0; z-index: 60;
    width: min(460px, calc(100vw - 32px)); max-height: 420px; overflow-y: auto;
    padding: 12px; border-radius: 14px;
    background: #17171b; border: 1px solid #2a2a31; box-shadow: 0 18px 50px rgba(0,0,0,.6);
    color: #dbdee1;
}
.tb-pop-h { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 4px 2px 8px; }
.tb-pop-h b { font-size: 14px; }
.tb-pop-h small, .tb-pop-mute { font-size: 12px; color: #949ba4; }
.tb-pop-mute { display: flex; align-items: center; gap: 5px; cursor: pointer; }
.tb-pop-lock { margin-bottom: 10px; padding: 8px 10px; border-radius: 10px; background: rgba(193,75,255,.12); font-size: 13px; }
.tb-pop-lock button { border: 0; background: none; color: #e2b4ff; font: inherit; font-weight: 800; cursor: pointer; }
.tb-pop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 6px; margin-bottom: 10px; }
.tb-pop-grid.stickers { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
.tb-cell-wrap { position: relative; }
.tb-cell {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px; width: 100%;
    padding: 9px 4px; border: 1px solid #2a2a31; border-radius: 10px; background: #1f1f24; color: #dbdee1;
    font: inherit; cursor: pointer; transition: transform .12s, background .12s;
}
.tb-cell:hover { background: #2a2a31; transform: translateY(-1px); }
.tb-cell span { font-size: 22px; }
.tb-cell small { font-size: 11.5px; color: #b5bac1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.tb-cell.locked { opacity: .45; }
.tb-cell em { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 10px; }
.stickers .tb-cell { font-size: 20px; padding: 12px 4px; }
.tb-prev { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.08); color: #b5bac1; font-size: 8px; cursor: pointer; opacity: 0; }
.tb-cell-wrap:hover .tb-prev { opacity: 1; }

/* Feed of who played what */
#tbSbFeed { position: fixed; left: 50%; top: 18px; transform: translateX(-50%); z-index: 99991; display: flex; flex-direction: column; align-items: center; gap: 6px; pointer-events: none; }
.tb-sb-pop { padding: 8px 14px; border-radius: 999px; background: rgba(20,18,30,.94); border: 1px solid rgba(193,75,255,.45); color: #fff; font-size: 13.5px; box-shadow: 0 8px 24px rgba(0,0,0,.45); animation: tbPopIn .3s ease-out; transition: opacity .4s, transform .4s; }
.tb-sb-pop.out { opacity: 0; transform: translateY(-8px); }
@keyframes tbPopIn { from { opacity: 0; transform: translateY(-10px) scale(.95); } }

/* Screen effects */
.tb-rain { position: fixed; inset: 0; z-index: 99990; pointer-events: none; overflow: hidden; }
.tb-rain i { position: absolute; top: -50px; font-style: normal; animation: tbRainFall linear forwards; }
@keyframes tbRainFall { to { transform: translateY(110vh) rotate(360deg); } }
body.tb-shake { animation: tbShake .6s cubic-bezier(.36,.07,.19,.97) both; }
@keyframes tbShake { 10%, 90% { transform: translate(-2px, 1px); } 20%, 80% { transform: translate(4px, -2px); } 30%, 50%, 70% { transform: translate(-8px, 3px); } 40%, 60% { transform: translate(8px, -3px); } }
@media (prefers-reduced-motion: reduce) { body.tb-shake { animation: none; } }

/* Entrance banner */
.tb-entrance {
    position: fixed; left: 50%; top: 70px; z-index: 99992; transform: translateX(-50%);
    display: flex; align-items: center; gap: 10px;
    padding: 12px 22px; border-radius: 999px;
    background: linear-gradient(120deg, #c14bff, #5b8cff); color: #fff; font-size: 16px;
    box-shadow: 0 12px 40px rgba(193,75,255,.5);
    animation: tbEnt 3.8s ease-in-out forwards;
}
.tb-ent-royal { background: linear-gradient(120deg, #b45309, #ffd166); color: #1a1205; }
.tb-ent-lightning { background: linear-gradient(120deg, #1e1b4b, #7c3aed); }
.tb-entrance span { font-size: 22px; }
@keyframes tbEnt { 0% { opacity: 0; transform: translate(-50%, -20px) scale(.8); } 12%, 85% { opacity: 1; transform: translate(-50%, 0) scale(1); } 100% { opacity: 0; transform: translate(-50%, -12px) scale(.95); } }

/* ---------- 🎨 Perks panel in the Turbo pop-up ---------- */
.tb-perks { padding: 14px 20px 20px; }
.tb-perks h4 { margin: 18px 0 8px; font-size: 13px; font-weight: 800; letter-spacing: .02em; color: #fff; }
.tb-perks h4 small { font-weight: 500; color: rgba(235,235,245,.5); margin-left: 6px; }
.tbp-locked { margin-bottom: 12px; padding: 10px 12px; border-radius: 12px; background: rgba(193,75,255,.12); border: 1px solid rgba(193,75,255,.35); font-size: 13.5px; }
.tbp-preview { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 16px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.08); }
.tbp-preview.themed { background: linear-gradient(135deg, var(--tbpA), var(--tbpB)); }
.tbp-preview > div { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tbp-preview small { width: 100%; font-size: 12px; color: rgba(235,235,245,.6); }
.tbp-name { font-size: 20px; font-weight: 800; color: #fff; }
.tbp-av { position: relative; width: 56px; height: 56px; flex: 0 0 auto; }
.tbp-av img, .tbp-av > b { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: flex; align-items: center; justify-content: center; background: #5b8cff; font-size: 24px; }
.tbp-av .tbd-icon { font-size: 24px; top: -12px; right: -12px; }
.tbp-av.tbd-crown .tbd-icon, .tbp-av.tbd-headphones .tbd-icon, .tbp-av.tbd-halo .tbd-icon, .tbp-av.tbd-cat .tbd-icon, .tbp-av.tbd-rainbow .tbd-icon { top: -20px; right: auto; }
.tbp-daily { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255,209,102,.08); border: 1px solid rgba(255,209,102,.3); font-size: 14px; }
.tbp-daily .tb-buy { width: auto; padding: 9px 18px; }
.tbp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.tbp-grid.badges { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); }
.tbp-grid.walls { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
.tbp-opt {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 9px 4px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1); background: rgba(255,255,255,.03);
    color: #fff; font: inherit; cursor: pointer;
}
.tbp-opt:hover { background: rgba(255,255,255,.07); }
.tbp-opt.on { border-color: #c14bff; background: rgba(193,75,255,.16); }
.tbp-opt.locked { opacity: .5; }
.tbp-opt span { font-size: 20px; line-height: 1.2; }
.tbp-opt small { font-size: 11.5px; color: rgba(235,235,245,.75); }
.tb-lock { position: absolute; top: 3px; right: 5px; font-style: normal; font-size: 10px; }
.tbp-swatch { display: block; width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.tbp-wallprev { display: block; width: 100%; height: 46px; border-radius: 8px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.12); background-size: cover; }
.tbp-wall { padding: 5px 5px 7px; }
.tbp-colors, .tbp-wallctl { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: rgba(235,235,245,.8); }
.tbp-colors label, .tbp-wallctl label { display: flex; align-items: center; gap: 6px; }
.tbp-colors input[type="color"] { width: 38px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; cursor: pointer; }
.tbp-upload { width: auto !important; padding: 9px 14px !important; cursor: pointer; font-size: 13.5px !important; }
.tbp-upload.locked { opacity: .5; }

/* With a wallpaper on, the Discord-style panels turn see-through so it shows */
:root[data-tbwall] #general.dc-on .dc, :root[data-tbwall] .dm-layout.dch-on { background: rgba(26,26,30,.72) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); }
:root[data-tbwall] #general.dc-on .dc-side, :root[data-tbwall] #general.dc-on .dc-members, :root[data-tbwall] .dm-layout.dch-on .dm-side { background: rgba(14,14,18,.6) !important; }
:root[data-tbwall] .dm-layout.dch-on .dm-pane { background: transparent !important; }