/* Themes for the Social Club (social.html), picked under Themes in the menu and kept on this device.
   Each look is switched on by data-theme on <html> (inventory, marquee, top8, deck); the default look has no rules here.
   Colours go through the same variables the page already uses, so a profile or community that sets its own colours still wins inside its own box (.mpage). */

/* ---------- every theme: a solid background instead of the gold video (a community's own video still plays), and the dark boxes the page hard-codes */
html[data-theme] body:not(.hubvideo) #video-background, html[data-theme] body:not(.hubvideo) .dim { display: none; }
html[data-theme] body:not(.hubvideo) .card, html[data-theme] .top { backdrop-filter: none; -webkit-backdrop-filter: none; }
html[data-theme] .top { background: var(--topbar); }
html[data-theme] .drawer, html[data-theme] #modal .box, html[data-theme] .npanel, html[data-theme] .nh, html[data-theme] #cropper .box, html[data-theme] .gifpick,
html[data-theme] .picker, html[data-theme] #msgMenu, html[data-theme] #emojiPop, html[data-theme] #mentionPop { background: var(--pop); }
html[data-theme] #toast div, html[data-theme] #askBar, html[data-theme] #hintBar, html[data-theme] #installBar, html[data-theme] #pushBanner { background: var(--pop); color: var(--text); }
html[data-theme] #coinToggle, html[data-theme] #fxToggle { background: var(--pop); }
html[data-theme] .btn.primary, html[data-theme] .nbadge, html[data-theme] .ub, html[data-theme] .bbadge, html[data-theme] .t8r, html[data-theme] .cycat.on, html[data-theme] .newpill, html[data-theme] .songbtn .pl { color: var(--on-gold); }
html[data-theme] .nav a.explore, html[data-theme] .nav a.explore:hover { color: var(--on-gold); background: var(--gold); }
html[data-theme] .gav { background: var(--gold); color: var(--on-gold); }
html[data-theme] .av.fallback, html[data-theme] .cyic.fb { background: var(--av-bg); color: var(--gold); border-color: var(--gold-dim); }
html[data-theme] .composer textarea::placeholder { color: var(--muted); }
html[data-theme] .ci, html[data-theme] .ni, html[data-theme] .frow, html[data-theme] .pk { border-bottom-color: var(--line); }
html[data-theme] .nav a.on, html[data-theme] .ci.on, html[data-theme] .ni.new, html[data-theme] .mchip.on, html[data-theme] .chip, html[data-theme] .bell.open, html[data-theme] .sw:checked,
html[data-theme] .fxgrid button.on, html[data-theme] .stkgrid button.on, html[data-theme] .ed-tabs button.on, html[data-theme] #emojiPop button.on, html[data-theme] #mentionPop button.on,
html[data-theme] #mentionPop button:hover, html[data-theme] #msgMenu .mm-rx button.on { background: color-mix(in srgb, var(--gold) 15%, transparent); }
html[data-theme] .mrow.mine .bub2 { background: color-mix(in srgb, var(--gold) 15%, transparent); border-color: var(--gold-dim); }
html[data-theme] .po i { background: color-mix(in srgb, var(--gold) 22%, transparent); }
html[data-theme] .skeleton { background: linear-gradient(90deg, var(--panel-2), color-mix(in srgb, var(--text) 10%, transparent), var(--panel-2)); background-size: 200% 100%; }
html[data-theme] .mp-custom { border: 0; box-shadow: none; }

/* ---------- 2 · Inventory: stone panels, bevelled buttons, pixel lettering and item slots, straight out of the game */
html[data-theme=inventory] {
  --bg: #1f1a13; --panel: #3e3529; --panel-2: #2b241b; --line: #1d1811; --gold: #ffe14f; --gold-dim: #8f7a2e;
  --text: #f2e7cc; --muted: #c2b394; --red: #ff6b57; --green: #7ee37e;
  --font: "Atkinson Hyperlegible", system-ui, sans-serif; --px: "Pixelify Sans", "Atkinson Hyperlegible", monospace;
  --pop: #3e3529; --topbar: #3e3529; --on-gold: #2b1f00; --av-bg: #2b241b;
  --bevel: #6e5f47 #16120c #16120c #6e5f47; --bevel-in: #16120c #8a4a36 #8a4a36 #16120c;
}
html[data-theme=inventory] * { scrollbar-color: #6e5f47 transparent; }
html[data-theme=inventory] ::-webkit-scrollbar-thumb { background: #6e5f47; border-radius: 0; }
html[data-theme=inventory] :is(.brand, h1, h2, h3, .post .name, .tabs button, .btn, .nav a, .nav .menu-link, .act, .cycat, .cpq, .ci .t b, .nh, .phead .counts b, .t8n, .tag, .cysec, .newpill, .person .nm, .wi .n, .cm .bub a.n) { font-family: var(--px); font-weight: 500; letter-spacing: 0; }
html[data-theme=inventory] :is(.post .name, .ci .t b, .person .nm, .wi .n, .cm .bub a.n, .phead h1) { color: #ffe14f; }
html[data-theme=inventory] :is(h1, h2, h3, .nh, .cysec) { color: #ff9b30; }
html[data-theme=inventory] .top { border-bottom: 2px solid #16120c; box-shadow: inset 0 -1px 0 #6e5f47; }
html[data-theme=inventory] .brand { color: #ffe14f; } html[data-theme=inventory] .brand b { color: #ff9b30; font-weight: 500; }
html[data-theme=inventory] :is(.nav a, .nav .menu-link) { color: var(--text); border-radius: 0; }
html[data-theme=inventory] .nav a.on { background: #5c2a1e; color: #ffe14f; box-shadow: inset 1px 1px 0 #16120c, inset -1px -1px 0 #8a4a36; }
html[data-theme=inventory] .card { border: 2px solid; border-color: var(--bevel); border-radius: 0; box-shadow: none; }
html[data-theme=inventory] :is(.drawer, #modal .box, .npanel, .picker, #msgMenu, #emojiPop, #mentionPop, #toast div, #askBar, #hintBar, #pushBanner, .gifpick, #cropper .box) { border: 2px solid; border-color: var(--bevel); border-radius: 0; }
html[data-theme=inventory] :is(input, textarea, select):not([type=checkbox]):not([type=radio]):not([type=range]):not([type=color]) { border-radius: 0 !important; }
html[data-theme=inventory] :is(.search, .cm-form input, .cm-form textarea, .mcomp textarea, .wcomp textarea, .gifhead input, .ep-in, .editarea, #modal input[type=text], #modal textarea) { background: #2b241b; box-shadow: inset 1px 1px 0 #0a0806, inset -1px -1px 0 #4a3f2f; }
html[data-theme=inventory] .btn { border-radius: 0; border: 2px solid; border-color: var(--bevel); background: #4a3f30; color: #ff9b30; }
html[data-theme=inventory] .btn:hover { color: #ffe14f; border-color: var(--bevel); }
html[data-theme=inventory] .btn.primary { background: #5a4a21; border-color: #8a7438 #16120c #16120c #8a7438; color: #ffe14f; }
html[data-theme=inventory] .btn.danger { color: var(--red); }
html[data-theme=inventory] .composer .actions .btn:not(.primary) { border-color: transparent; background: transparent; color: var(--muted); }
html[data-theme=inventory] .tabs { border-bottom: 0; gap: 3px; }
html[data-theme=inventory] .tabs button { background: #4a3f30; border: 2px solid; border-color: var(--bevel); margin: 0; color: var(--text); font-size: 0.95rem; padding: 0.5rem 0.9rem; }
html[data-theme=inventory] .tabs button.on { background: #5c2a1e; border-color: var(--bevel-in); color: #ffe14f; }
html[data-theme=inventory] .tdot { background: #ff4b3a; box-shadow: 0 0 0 1px #000; border-radius: 0; }
html[data-theme=inventory] .act { border-radius: 0; }
html[data-theme=inventory] .av { border-radius: 2px; }
html[data-theme=inventory] .av.fallback { color: #ffe14f; border: 1px solid #120f0a; box-shadow: inset 1px 1px 0 #0a0806, inset -1px -1px 0 #4a3f2f; font-family: var(--px); font-weight: 500; }
html[data-theme=inventory] .cyic, html[data-theme=inventory] .t8 .av.sq { border-radius: 2px; }
/* reactions sit in item slots, the count in yellow at the top left like a stack of coins */
html[data-theme=inventory] .mchip { position: relative; min-width: 40px; height: 36px; justify-content: center; border-radius: 0; background: #2b241b; border: 1px solid #120f0a; box-shadow: inset 1px 1px 0 #0a0806, inset -1px -1px 0 #4a3f2f; }
html[data-theme=inventory] .mchip button { padding: 0.5rem 0.35rem 0; }
html[data-theme=inventory] .mchip b { position: absolute; top: 2px; left: 3px; padding: 0; font: 500 11px/1 var(--px); color: #ffe14f; text-shadow: 1px 1px 0 #000; }
html[data-theme=inventory] .mchip.on { background: #2b241b; box-shadow: inset 0 0 0 2px #ffe14f; }
html[data-theme=inventory] :is(.po, .cpo, .cm .bub, .bub2, .cycat, .track, .pinrow, .ytplay, .media, .media video, .gal img, .mp-banner, .prev .it) { border-radius: 0; }
html[data-theme=inventory] .cpo i { background: #2f6b2a; } html[data-theme=inventory] .cpo.no i { background: #7a2a1f; } html[data-theme=inventory] .po i { background: #2f6b2a; }
html[data-theme=inventory] .cpo.mine, html[data-theme=inventory] .po.mine { box-shadow: inset 0 0 0 2px #ffe14f; }
html[data-theme=inventory] .cm .bub { background: #2b241b; }
html[data-theme=inventory] .mrow.mine .bub2 { background: #4a3f30; border-color: #6e5f47; }
html[data-theme=inventory] .cycat { background: #4a3f30; border: 2px solid; border-color: var(--bevel); color: var(--text); font-size: 0.92rem; }
html[data-theme=inventory] .cycat.on { background: #5c2a1e; border-color: var(--bevel-in); color: #ffe14f; }
html[data-theme=inventory] .t8r { background: none; color: #ffe14f; text-shadow: 1px 1px 0 #000; font-family: var(--px); font-weight: 500; }
html[data-theme=inventory] .newpill { border-radius: 0; background: #5a4a21; color: #ffe14f; border: 2px solid; border-color: #8a7438 #16120c #16120c #8a7438; }
html[data-theme=inventory] :is(.nbadge, .bbadge, .ub) { border-radius: 0; background: #b2271b; color: #ffffff; box-shadow: 1px 1px 0 #000; }
html[data-theme=inventory] .sw, html[data-theme=inventory] .sw::after { border-radius: 2px; }
html[data-theme=inventory] .skeleton { border-radius: 0; }
html[data-theme=inventory] .drawer h3 { color: #ff9b30; font-family: var(--px); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 1rem; }

/* ---------- 3 · Marquee: oxblood and brass, showbill lettering, and the Theater picked out in the menu like a lit sign */
html[data-theme=marquee] {
  --bg: #170a0a; --panel: rgba(34, 16, 16, 0.95); --panel-2: rgba(243, 230, 200, 0.06); --line: #4a2a22; --gold: #e9b95a; --gold-dim: #8a6a35;
  --text: #f3e6c8; --muted: #c4ae8e; --red: #ef5a4a; --green: #8be19a;
  --font: "Karla", system-ui, sans-serif; --deco: "Limelight", Georgia, serif;
  --pop: #1e0d0d; --topbar: rgba(18, 8, 8, 0.97); --on-gold: #2a1408; --av-bg: #3a1e14;
}
html[data-theme=marquee] body { background: radial-gradient(ellipse 120% 55% at 50% -12%, #3a1a12 0%, #170a0a 62%) fixed, #170a0a; }
html[data-theme=marquee] * { scrollbar-color: #6b4a30 transparent; }
html[data-theme=marquee] ::-webkit-scrollbar-thumb { background: #6b4a30; }
html[data-theme=marquee] :is(.brand span, h1, h2, .cpq, .nh, .drawer h2) { font-family: var(--deco); font-weight: 400; letter-spacing: 0.02em; }
html[data-theme=marquee] .brand b { font-weight: 400; }
html[data-theme=marquee] .top { border-bottom-color: #3a1e18; }
html[data-theme=marquee] :is(.nav a, .nav .menu-link) { border-radius: 999px; font-weight: 700; }
html[data-theme=marquee] .nav a.on { background: var(--gold); color: var(--on-gold); }
html[data-theme=marquee] .nav a[href="theater.html"] { color: var(--gold); box-shadow: inset 0 0 0 1px var(--gold-dim); }
html[data-theme=marquee] .nav a[href="theater.html"]:hover { background: var(--gold); color: var(--on-gold); }
html[data-theme=marquee] .tabs { border-bottom-color: #3a1e18; }
html[data-theme=marquee] .tabs button { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.76rem; font-weight: 800; border-bottom: 3px dotted transparent; }
html[data-theme=marquee] .tabs button.on { border-bottom-color: var(--gold); }
html[data-theme=marquee] .tdot { background: #ef5a4a; box-shadow: 0 0 8px #ef5a4a; }
html[data-theme=marquee] .card { border-color: var(--line); }
html[data-theme=marquee] .post .name { font-weight: 800; }
html[data-theme=marquee] .av.fallback { border-width: 1px; }
html[data-theme=marquee] .phead .av.xl { box-shadow: 0 0 0 2px var(--gold), 0 0 28px rgba(233, 185, 90, 0.3); }
html[data-theme=marquee] .cpo i { background: #6b4a1e; } html[data-theme=marquee] .cpo.no i { background: #4a2420; }
html[data-theme=marquee] .mrow.mine .bub2 { background: var(--gold); border-color: var(--gold); color: var(--on-gold); }
html[data-theme=marquee] .mrow.mine .bub2 :is(.mtime, a, a.mention) { color: #5a3410; }
html[data-theme=marquee] :is(.mp-about, .mp-top8, .mp-wall, .mp-cta, .mp-details, .mp-links, .mp-box, .mp-playlist, .mp-gallery) h3, html[data-theme=marquee] .drawer h3 { letter-spacing: 0.16em; font-weight: 800; }
html[data-theme=marquee] #modal .box, html[data-theme=marquee] .npanel, html[data-theme=marquee] .drawer { border-color: #6b4a30; }

/* ---------- 4 · Top 8: light pages, a navy bar, orange box headings and blue links, the 2006 social web done properly */
html[data-theme=top8] {
  --bg: #e9eef5; --panel: #ffffff; --panel-2: #f1f5fa; --line: #c5d3e6; --gold: #1d4f9a; --gold-dim: #9fb4d1;
  --text: #1f2328; --muted: #5a6270; --red: #c0261b; --green: #2e7d32;
  --font: Verdana, Tahoma, "DejaVu Sans", sans-serif; --head: Arial, Helvetica, sans-serif;
  --pop: #ffffff; --topbar: #13325b; --on-gold: #ffffff; --av-bg: #dde6f2;
  color-scheme: light;
}
html[data-theme=top8] body { font-size: 14px; }
html[data-theme=top8] * { scrollbar-color: #9fb4d1 transparent; }
html[data-theme=top8] ::-webkit-scrollbar-thumb { background: #9fb4d1; }
html[data-theme=top8] :is(h1, h2, h3, .cpq, .nh, .post .name) { font-family: var(--head); }
html[data-theme=top8] .top { border-bottom: 0; }
html[data-theme=top8] .brand { color: #ffffff; } html[data-theme=top8] .brand b { color: #fdd21f; }
html[data-theme=top8] :is(.nav a, .nav .menu-link, .bell, .menu-btn) { color: #dce6f3; font-family: var(--head); font-weight: 700; }
html[data-theme=top8] :is(.nav a, .nav .menu-link, .bell):hover { color: #ffffff; background: rgba(255, 255, 255, 0.12); }
html[data-theme=top8] .nav a.on { color: #fdd21f; background: rgba(255, 255, 255, 0.12); }
html[data-theme=top8] .bell.open, html[data-theme=top8] .bell.glow { color: #fdd21f; background: rgba(255, 255, 255, 0.12); }
html[data-theme=top8] .nav a.explore, html[data-theme=top8] .nav a.explore:hover { background: #e8892b; color: #231300; }
html[data-theme=top8] .card { border-radius: 0; border-color: #9fb4d1; box-shadow: none; }
html[data-theme=top8] :is(.drawer, #modal .box, .npanel, .picker, #msgMenu, #emojiPop, #mentionPop, #toast div, #askBar, #hintBar, #pushBanner, .gifpick, #cropper .box) { border-color: #9fb4d1; box-shadow: 0 8px 28px rgba(19, 50, 91, 0.25); }
html[data-theme=top8] :is(#modal .box, .npanel, #cropper .box) { border-radius: 0; }
html[data-theme=top8] .nh { background: #cfddf0; color: #13325b; }
/* every box that starts with a heading gets the orange heading bar */
html[data-theme=top8] .card.pad > h3:first-child { margin: -1rem -1.1rem 0.7rem; padding: 0.4rem 1.1rem; background: #e8892b; color: #231300; font-size: 0.95rem; text-transform: none; letter-spacing: 0; }
html[data-theme=top8] .card.pad > h3:not(:first-child) { color: #13325b; text-transform: none; letter-spacing: 0; }
/* posts read like bulletins: the name and time on a light blue band */
html[data-theme=top8] .post > header { margin: -0.95rem -1.1rem 0; padding: 0.6rem 1.1rem; background: #eef3f9; border-bottom: 1px solid #dde6f2; }
@media (max-width: 520px) { html[data-theme=top8] .post > header { margin: -0.85rem -0.85rem 0; padding: 0.55rem 0.85rem; } }
html[data-theme=top8] .post .name { color: #1d4f9a; }
html[data-theme=top8] .btn { border-radius: 3px; background: #f4f7fb; border-color: #9fb4d1; color: #1f2328; font-family: var(--head); }
html[data-theme=top8] .btn:hover { border-color: #1d4f9a; }
html[data-theme=top8] .btn.primary { background: #1e4a80; border-color: #13325b; color: #ffffff; }
html[data-theme=top8] .btn.danger { color: var(--red); }
html[data-theme=top8] .composer .actions .btn:not(.primary) { border-color: transparent; background: transparent; color: #1d4f9a; }
html[data-theme=top8] .tabs { border-bottom: 1px solid #9fb4d1; gap: 2px; }
html[data-theme=top8] .tabs button { background: #dde6f2; border: 1px solid #9fb4d1; border-bottom: 0; margin: 0 0 0 0; color: #13325b; font-family: var(--head); font-weight: 700; }
html[data-theme=top8] .tabs button.on { background: #ffffff; color: #b3261e; border-bottom-color: transparent; }
html[data-theme=top8] .tdot { background: #d42a1e; box-shadow: none; }
html[data-theme=top8] :is(.nbadge, .bbadge, .ub) { background: #d42a1e; color: #ffffff; border-radius: 2px; }
html[data-theme=top8] .ub.mute { background: #9aa4b2; }
html[data-theme=top8] .av { border-radius: 0; }
html[data-theme=top8] .av.fallback, html[data-theme=top8] .cyic.fb { background: #dde6f2; color: #13325b; border: 1px solid #9fb4d1; }
html[data-theme=top8] .cyic, html[data-theme=top8] .t8 .av.sq { border-radius: 0; }
html[data-theme=top8] .t8r { background: #e8892b; color: #231300; border-radius: 0; }
html[data-theme=top8] .mchip { background: #eef3f9; border-color: #dde6f2; }
html[data-theme=top8] .mchip.on { background: #dde6f2; border-color: #1d4f9a; }
html[data-theme=top8] .cm .bub { background: #f1f5fa; border: 1px solid #dde6f2; border-radius: 4px; }
html[data-theme=top8] .bub2 { background: #fff6ec; border-color: #f0c38f; border-radius: 4px; }
html[data-theme=top8] .mrow.mine .bub2 { background: #dde6f2; border-color: #9fb4d1; }
html[data-theme=top8] .po i { background: #bfd6f2; }
html[data-theme=top8] .cycat { border-radius: 3px; }
html[data-theme=top8] .sw:not(:checked)::after { background: #9aa4b2; }
html[data-theme=top8] .drawer h3 { margin-left: -1rem; margin-right: -1rem; padding: 0.35rem 1rem; background: #cfddf0; color: #13325b; }
html[data-theme=top8] .newpill { background: #1e4a80; color: #ffffff; }
html[data-theme=top8] #coinToggle, html[data-theme=top8] #fxToggle { border-color: #9fb4d1; }

/* ---------- 5 · The Deck: near-black and tight, mono details, segmented tabs and the feed as one flat list */
html[data-theme=deck] {
  --bg: #0e0e0d; --panel: #161614; --panel-2: rgba(237, 234, 226, 0.05); --line: #2a2925; --gold: #fdd21f; --gold-dim: #8a7413;
  --text: #edeae2; --muted: #9e998c; --red: #f2695c; --green: #5fd38d;
  --font: "IBM Plex Sans", system-ui, sans-serif; --mono: "IBM Plex Mono", ui-monospace, monospace;
  --pop: #161614; --topbar: #0e0e0d; --on-gold: #141200; --av-bg: #24231f;
}
html[data-theme=deck] * { scrollbar-color: #3a3934 transparent; }
html[data-theme=deck] ::-webkit-scrollbar-thumb { background: #3a3934; }
html[data-theme=deck] :is(.post .sub, .ci .when, .ni .nt, .mtime, .cm .meta, .pmeta, .day, .sys, .phead .handle, .phead .counts, .cym, .cysec, .drawer h3, .tabs button, .cycat, .tag, .nbadge, .bbadge, .ub, .stats, .count, .cpf, .t8n) { font-family: var(--mono); }
html[data-theme=deck] .top { border-bottom-color: #1e1e1b; }
html[data-theme=deck] .nav a.on { background: #24231f; color: var(--gold); }
html[data-theme=deck] .card { border-radius: 10px; border-color: var(--line); background: var(--panel); }
html[data-theme=deck] .btn { border-radius: 8px; }
html[data-theme=deck] .tabs { border-bottom: 0; background: #171715; border-radius: 8px; padding: 3px; gap: 2px; }
html[data-theme=deck] .tabs button { margin: 0; border-bottom: 0; border-radius: 6px; padding: 0.45rem 0.8rem; font-size: 0.74rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
html[data-theme=deck] .tabs button.on { background: #2a2925; }
html[data-theme=deck] .av { border-radius: 10px; } html[data-theme=deck] .av.sm { border-radius: 8px; } html[data-theme=deck] .av.xl { border-radius: 20px; }
html[data-theme=deck] .cycat { border-radius: 6px; background: none; }
html[data-theme=deck] .cycat.on { background: none; color: var(--gold); border-color: var(--gold); }
html[data-theme=deck] .mchip { border-radius: 6px; }
html[data-theme=deck] .cm .bub, html[data-theme=deck] .bub2 { border-radius: 10px; }
/* the feed is one flat list with lines between posts, instead of a stack of cards */
html[data-theme=deck] #feed:not(:empty) { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--panel); margin-bottom: 0.9rem; }
html[data-theme=deck] #feed > .card { margin: 0; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; background: transparent; }
html[data-theme=deck] #feed > .card:last-child { border-bottom: 0; }
html[data-theme=deck] #feed > .card.post:hover { background: #121211; }
html[data-theme=deck] #feed > .skeleton { margin: 0; border-radius: 0; }
html[data-theme=deck] .post .name { font-weight: 600; }
html[data-theme=deck] .post .text { font-size: 0.97rem; }