/* =====================================================================
   Packs & Pinten — layouts
   Actieve layout = <html data-theme="...">, voor iedereen tegelijk.
   ===================================================================== */

/* ---------------------------------------------------------------- algemeen: XP-drops & klikkruisjes */
.xp-drop { position: fixed; z-index: 400; font-weight: 900; pointer-events: none; color: var(--gold); text-shadow: 1px 1px 0 #000, 0 0 8px rgba(0,0,0,.6); animation: xpUp 1.8s ease-out forwards; font-size: 1.1em; white-space: nowrap; }
.xp-drop.neg { color: #ff6b5b; }
@keyframes xpUp { 0% { transform: translateY(6px); opacity: 0; } 12% { opacity: 1; transform: translateY(0); } 100% { transform: translateY(-80px); opacity: 0; } }
.rs-click { position: fixed; width: 18px; height: 18px; margin: -9px 0 0 -9px; pointer-events: none; z-index: 999; animation: rsclick .5s steps(4) forwards; }
.rs-click::before, .rs-click::after { content: ''; position: absolute; left: 7px; top: 0; width: 4px; height: 18px; background: var(--c, #ff0); box-shadow: 0 0 0 1px #000; transform: rotate(45deg); }
.rs-click::after { transform: rotate(-45deg); }
@keyframes rsclick { to { transform: scale(.25); } }
.tagline { text-align: center; color: var(--muted); font-size: .9em; margin-top: 6px; }
.skills { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.skill { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 8px; background: var(--input-bg); border: 1px solid var(--line); font-size: .85em; }
.skill b { margin-left: auto; color: var(--gold); }
.layout-opt { display: flex; gap: 12px; align-items: center; padding: 10px; border-radius: var(--radius); border: 2px solid var(--line); cursor: pointer; background: var(--input-bg); }
.layout-opt.on { border-color: var(--gold); }
.layout-opt .em { font-size: 2em; }
.layout-swatch { display: flex; gap: 3px; margin-top: 4px; }
.layout-swatch i { width: 16px; height: 16px; border-radius: 4px; border: 1px solid rgba(0,0,0,.3); }
.rs-chat .line { font-family: Verdana, Tahoma, sans-serif; font-size: 18px; padding: 2px 0; color: #ffff00; text-shadow: 1px 1px 0 #000; }
.rs-chat .line b { color: #fff; }
.rs-chat .line.real { color: #00ffff; }
.rs-dead { display: block; color: #ff1e1e; font-family: Verdana, sans-serif; font-weight: 900; font-size: .55em; text-shadow: 2px 2px 0 #000; margin-bottom: 6px; letter-spacing: .02em; }

/* =====================================================================
   ⛏️ PINTENRIJK (oldschool MMO-stijl) — standaard
   ===================================================================== */
html[data-theme="runescape"] {
  --bg: #1b1712; --bg2: #2b241b; --panel: #3e3529; --panel2: #4b4133; --line: #120f0b;
  --text: #ff981f; --muted: #c8b48a; --gold: #ffff00; --gold2: #b38f00;
  --head: Verdana, Tahoma, 'Trebuchet MS', sans-serif; --body: Verdana, Tahoma, 'Trebuchet MS', sans-serif;
  --head-color: #ffff00;
  --radius: 4px; --btn-radius: 3px;
  --body-bg:
    linear-gradient(rgba(0,0,0,.35), rgba(0,0,0,.35)),
    repeating-linear-gradient(0deg, transparent 0 38px, rgba(0,0,0,.35) 38px 40px),
    repeating-linear-gradient(90deg, transparent 0 78px, rgba(0,0,0,.3) 78px 80px),
    linear-gradient(180deg, #4a4135, #2c261e);
  --panel-bg: linear-gradient(180deg, #4b4133, #3a3126);
  --panel-border: 3px solid #120f0b;
  --panel-shadow: inset 0 0 0 2px #6b5f4c, inset 0 0 0 4px #2a241b, 0 4px 10px rgba(0,0,0,.5);
  --input-bg: #2a241b;
  --bar-bg: linear-gradient(180deg, #3e3529, #2a241b);
  --btn-bg: linear-gradient(180deg, #6b5f4c, #463c2e);
  --btn-text: #ff981f;
  --btn-shadow: 0 0 0 2px #000, inset 1px 1px 0 #8a7c64, inset -1px -1px 0 #2a241b;
}
html[data-theme="runescape"] h1, html[data-theme="runescape"] h2, html[data-theme="runescape"] h3,
html[data-theme="runescape"] .section-title, html[data-theme="runescape"] .bm-logo, html[data-theme="runescape"] .logo-big { text-shadow: 2px 2px 0 #000; letter-spacing: 0; }
html[data-theme="runescape"] .pts { color: #ffff00; text-shadow: 1px 1px 0 #000; }
html[data-theme="runescape"] button { text-shadow: 1px 1px 0 #000; }
html[data-theme="runescape"] button.ghost { background: var(--input-bg); border: 2px solid #000; }
html[data-theme="runescape"] .list-item, html[data-theme="runescape"] .store-item, html[data-theme="runescape"] .lb-row, html[data-theme="runescape"] .store-pack, html[data-theme="runescape"] .avatar-opt {
  background: linear-gradient(180deg, #4b4133, #3a3126); border: 2px solid #000; box-shadow: inset 0 0 0 1px #6b5f4c;
}
html[data-theme="runescape"] .list-item .t, html[data-theme="runescape"] .lb-row b { color: #fff; text-shadow: 1px 1px 0 #000; }
html[data-theme="runescape"] .tabs { border-top: 3px solid #000; }
html[data-theme="runescape"] .tabs button { color: #c8b48a; }
html[data-theme="runescape"] .tabs button.on { background: linear-gradient(180deg, #7a2e1d, #4d1c12); color: #ffff00; }
html[data-theme="runescape"] .tabs button.on::before { display: none; }
/* toasts als dialoogvenster op perkament */
html[data-theme="runescape"] .toast { background: linear-gradient(180deg, #d9c9a0, #c2ae80); color: #000; border: 3px solid #000; box-shadow: inset 0 0 0 2px #8a7650, 0 6px 16px rgba(0,0,0,.6); border-radius: 2px; }
html[data-theme="runescape"] .toast .t { color: #800000; }
html[data-theme="runescape"] .toast .s { color: #000; }
html[data-theme="runescape"] .xp-drop { color: #fff; font-family: Verdana, sans-serif; font-size: 1em; }
html[data-theme="runescape"] .bm-ticker { background: #000; border-top: 3px solid #5c5141; }
html[data-theme="runescape"] .bm-ticker .track { color: #ffff00; font-family: Verdana, sans-serif; text-shadow: 1px 1px 0 #000; }
html[data-theme="runescape"] .bw-pipe { border-color: #000; box-shadow: inset 0 0 0 2px #6b5f4c, inset 0 4px 10px rgba(0,0,0,.8); }
html[data-theme="runescape"] .bm-big-toast .box { background: linear-gradient(180deg, #d9c9a0, #c2ae80); color: #000; border: 4px solid #000; box-shadow: inset 0 0 0 3px #8a7650, 0 0 60px rgba(0,0,0,.8); border-radius: 4px; }
html[data-theme="runescape"] .bm-big-toast .t { color: #800000; text-shadow: none; }
html[data-theme="runescape"] .bm-big-toast .s { color: #000; }
html[data-theme="runescape"] .banner.live { background: linear-gradient(90deg, #7a1d12, #b3271b); border: 2px solid #000; }
html[data-theme="runescape"] .modal { border: 4px solid #000; }

/* =====================================================================
   🍺 DE TAVERNE — het origineel, gebruikt de standaardstijl
   ===================================================================== */

/* =====================================================================
   🚧 HOMEPAGE 1999
   ===================================================================== */
html[data-theme="geocities"] {
  --bg: #000080; --bg2: #c0c0c0; --panel: #c0c0c0; --panel2: #d4d0c8; --line: #808080;
  --text: #000; --muted: #333; --gold: #ff00ff; --gold2: #800080;
  --head: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive; --body: 'Comic Sans MS', 'Comic Neue', 'Chalkboard SE', cursive;
  --head-color: #ffff00;
  --radius: 0; --btn-radius: 0;
  --body-bg:
    radial-gradient(circle, #fff 0 1.2px, transparent 1.6px) 0 0 / 46px 46px,
    radial-gradient(circle, #ff0 0 1.2px, transparent 1.6px) 23px 23px / 46px 46px,
    radial-gradient(circle, #0ff 0 1px, transparent 1.4px) 11px 31px / 46px 46px,
    #000080;
  --panel-bg: #c0c0c0; --panel-border: 3px outset #fff; --panel-shadow: 4px 4px 0 #000;
  --input-bg: #fff; --bar-bg: #c0c0c0;
  --btn-bg: #c0c0c0; --btn-text: #0000ee; --btn-shadow: none;
}
html[data-theme="geocities"] body { padding-top: 28px; }
html[data-theme="geocities"] body::before {
  content: '🚧 WELKOM OP MIJN HOMEPAGE!!! 🚧 Deze site werkt best in Netscape Navigator 4.0 op 800x600 🚧 Teken zeker mijn gastenboek!!! 🚧 Laatst bijgewerkt: 14/02/1999 🚧 ';
  position: fixed; top: 0; left: 0; height: 28px; line-height: 28px; white-space: nowrap; z-index: 60;
  background: #ffff00; color: #ff0000; font-weight: 900; font-family: 'Comic Sans MS', cursive; padding-left: 100vw;
  animation: marquee 22s linear infinite; border-bottom: 2px solid #000;
}
@keyframes marquee { to { transform: translateX(-100%); } }
html[data-theme="geocities"] .topbar { top: 28px; }
html[data-theme="geocities"] .bm-top { top: 28px; }
html[data-theme="geocities"] button { border: 3px outset #fff; text-decoration: underline; }
html[data-theme="geocities"] button:active { border-style: inset; }
html[data-theme="geocities"] .section-title, html[data-theme="geocities"] h1, html[data-theme="geocities"] h2 { color: #ffff00; text-shadow: 2px 2px 0 #ff00ff; }
html[data-theme="geocities"] .panel h2, html[data-theme="geocities"] .panel h3, html[data-theme="geocities"] .modal h3 { color: #ff00ff; text-shadow: 1px 1px 0 #ffff00; }
html[data-theme="geocities"] .section-title::after { content: 'NIEUW!'; color: #fff; background: #ff0000; font-size: .55em; padding: 1px 5px; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { visibility: hidden; } }
html[data-theme="geocities"] .list-item, html[data-theme="geocities"] .store-item, html[data-theme="geocities"] .lb-row, html[data-theme="geocities"] .store-pack, html[data-theme="geocities"] .avatar-opt { background: #fff; border: 2px inset #c0c0c0; border-radius: 0; }
html[data-theme="geocities"] .pts { color: #ff00ff; }
html[data-theme="geocities"] .tabs button { color: #0000ee; }
html[data-theme="geocities"] .tabs button.on { color: #ff0000; background: #fff; }
html[data-theme="geocities"] .bm-ticker .track { color: #0f0; }
html[data-theme="geocities"] .bm-ticker { background: #000; }
html[data-theme="geocities"] body.beamer::after { content: 'Je bent bezoeker nr. 000.042.069 👁️ 🚧 Under construction 🚧'; position: fixed; right: 20px; bottom: 66px; background: #000; color: #0f0; font-family: monospace; padding: 4px 10px; border: 2px inset #808080; font-size: 18px; z-index: 50; }
html[data-theme="geocities"] .bm-logo { color: #ffff00; text-shadow: 3px 3px 0 #ff00ff, 6px 6px 0 #00ffff; }
/* tekst die rechtstreeks op de blauwe sterrenhemel staat: wit met zwarte schaduw */
html[data-theme="geocities"] .section-title small,
html[data-theme="geocities"] #main > .muted, html[data-theme="geocities"] #main > p { color: #fff; text-shadow: 1px 1px 0 #000; }
html[data-theme="geocities"] button.ghost { background: #c0c0c0; color: #0000ee; }
html[data-theme="geocities"] .cat-chips button.on { background: #fff; color: #ff0000; border-style: inset; }
html[data-theme="geocities"] #gname span { color: #fff !important; text-shadow: 1px 1px 0 #000 !important; }
html[data-theme="geocities"] body.beamer .bm-idle { top: 108px; }
html[data-theme="geocities"] .banner { color: #000; }

/* =====================================================================
   💻 MAINFRAME
   ===================================================================== */
html[data-theme="hacker"] {
  --bg: #000; --bg2: #000; --panel: #001a07; --panel2: #002b0c; --line: #00ff41;
  --text: #00ff41; --muted: #00a82b; --gold: #b6ffc6; --gold2: #00ff41;
  --head: Consolas, 'Courier New', monospace; --body: Consolas, 'Courier New', monospace;
  --head-color: #00ff41; --radius: 0; --btn-radius: 0;
  --body-bg: radial-gradient(ellipse at center, #002a0b 0%, #000 75%);
  --panel-bg: rgba(0, 18, 5, .88); --panel-border: 1px solid #00ff41; --panel-shadow: 0 0 14px rgba(0,255,65,.25), inset 0 0 20px rgba(0,255,65,.08);
  --input-bg: #000; --bar-bg: #000;
  --btn-bg: #000; --btn-text: #00ff41; --btn-shadow: inset 0 0 0 1px #00ff41, 0 0 8px rgba(0,255,65,.4);
}
html[data-theme="hacker"] body { text-shadow: 0 0 4px rgba(0,255,65,.55); }
html[data-theme="hacker"] body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 500; background: repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px); }
html[data-theme="hacker"] h1::before, html[data-theme="hacker"] h2::before, html[data-theme="hacker"] .section-title::before { content: '> '; }
html[data-theme="hacker"] h1::after, html[data-theme="hacker"] .bm-logo::after { content: '_'; animation: blink 1s steps(2) infinite; }
html[data-theme="hacker"] button { text-transform: uppercase; letter-spacing: .05em; }
html[data-theme="hacker"] button:hover { background: #00ff41; color: #000; }
html[data-theme="hacker"] .list-item, html[data-theme="hacker"] .store-item, html[data-theme="hacker"] .lb-row, html[data-theme="hacker"] .store-pack, html[data-theme="hacker"] .avatar-opt { background: rgba(0,20,5,.9); border: 1px solid #00ff41; border-radius: 0; }
html[data-theme="hacker"] .tabs button { color: #00a82b; }
html[data-theme="hacker"] .tabs button.on { color: #00ff41; }
html[data-theme="hacker"] .hs-card, html[data-theme="hacker"] .pack, html[data-theme="hacker"] .hs-back { text-shadow: none; }
html[data-theme="hacker"] .avatar { filter: hue-rotate(0deg) drop-shadow(0 0 4px #00ff41); }

/* =====================================================================
   💖 ROZE PALEIS
   ===================================================================== */
html[data-theme="prinses"] {
  --bg: #ffe4f1; --bg2: #ffd1e8; --panel: #fff0f7; --panel2: #ffe0ef; --line: #ffb3d9;
  --text: #7a1f52; --muted: #c45a92; --gold: #ff2d95; --gold2: #ff69b4;
  --head: 'Brush Script MT', 'Segoe Script', 'Snell Roundhand', cursive;
  --head-color: #ff2d95; --radius: 24px; --btn-radius: 999px;
  --body-bg:
    radial-gradient(circle, #fff 0 1.5px, transparent 2px) 0 0 / 34px 34px,
    radial-gradient(circle, rgba(255,255,255,.8) 0 1px, transparent 1.5px) 17px 17px / 34px 34px,
    linear-gradient(160deg, #ffd6eb, #f3c6ff 60%, #ffd6eb);
  --panel-bg: rgba(255,255,255,.78); --panel-border: 2px solid #ffb3d9; --panel-shadow: 0 6px 22px rgba(255,105,180,.25);
  --input-bg: #fff; --bar-bg: rgba(255,228,241,.95);
  --btn-bg: linear-gradient(180deg, #ff9ad5, #ff3fa4); --btn-text: #fff; --btn-shadow: 0 3px 0 #c2186f, 0 0 12px rgba(255,63,164,.4);
}
html[data-theme="prinses"] h1, html[data-theme="prinses"] h2, html[data-theme="prinses"] .section-title, html[data-theme="prinses"] .bm-logo, html[data-theme="prinses"] .logo-big { font-size: 1.35em; text-shadow: 0 0 10px #fff, 0 0 18px #ff9ad5; }
html[data-theme="prinses"] .section-title::after { content: ' ✨'; }
html[data-theme="prinses"] h1::before { content: '👑 '; }
html[data-theme="prinses"] .list-item, html[data-theme="prinses"] .store-item, html[data-theme="prinses"] .lb-row, html[data-theme="prinses"] .store-pack, html[data-theme="prinses"] .avatar-opt { background: rgba(255,255,255,.85); border: 2px solid #ffc4e2; border-radius: 20px; }
html[data-theme="prinses"] .pts { color: #ff2d95; }
html[data-theme="prinses"] .tabs button { color: #c45a92; }
html[data-theme="prinses"] .tabs button.on { color: #ff2d95; }
html[data-theme="prinses"] .bm-ticker .track { color: #ff2d95; }
html[data-theme="prinses"] .bm-stage::before { background: radial-gradient(circle at 50% 55%, rgba(255,182,220,.25), rgba(90,10,60,.75) 75%); }
html[data-theme="prinses"] body::after { content: '✨ 🦄 💖 ✨ 💅 ✨ 🌸 ✨'; position: fixed; left: 0; right: 0; bottom: 64px; text-align: center; font-size: 22px; opacity: .55; pointer-events: none; animation: sparkle 3s ease-in-out infinite; z-index: 1; }
@keyframes sparkle { 50% { opacity: .15; transform: translateY(-6px); } }

/* =====================================================================
   🍟 FRITUUR DE PINTE
   ===================================================================== */
html[data-theme="frituur"] {
  --bg: #fff6d6; --bg2: #ffe9a8; --panel: #fffdf5; --panel2: #fff3c4; --line: #e3342f;
  --text: #3b1d0a; --muted: #8a5a2b; --gold: #e3342f; --gold2: #b8860b;
  --head: Impact, 'Arial Narrow Bold', 'Haettenschweiler', sans-serif;
  --head-color: #e3342f; --radius: 10px; --btn-radius: 6px;
  --body-bg: repeating-linear-gradient(45deg, #fff6d6 0 22px, #fff0c2 22px 44px);
  --panel-bg: #fffdf5; --panel-border: 3px solid #e3342f; --panel-shadow: 6px 6px 0 #f4c430;
  --input-bg: #fff; --bar-bg: #e3342f;
  --btn-bg: #f4c430; --btn-text: #3b1d0a; --btn-shadow: 0 3px 0 #b8860b;
}
html[data-theme="frituur"] body { padding-top: 16px; }
html[data-theme="frituur"] body::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 16px; z-index: 60; background: repeating-linear-gradient(90deg, #e3342f 0 30px, #fff 30px 60px); box-shadow: 0 3px 0 rgba(0,0,0,.15); }
html[data-theme="frituur"] .topbar { top: 16px; color: #fff; }
html[data-theme="frituur"] .topbar .pill { color: #3b1d0a; }
html[data-theme="frituur"] .tabs button { color: #ffe9a8; }
html[data-theme="frituur"] .tabs button.on { color: #fff; }
html[data-theme="frituur"] .tabs button.on::before { background: #f4c430; }
html[data-theme="frituur"] h1, html[data-theme="frituur"] h2, html[data-theme="frituur"] .section-title, html[data-theme="frituur"] .bm-logo, html[data-theme="frituur"] .logo-big { text-transform: uppercase; letter-spacing: .03em; text-shadow: 2px 2px 0 #f4c430; }
html[data-theme="frituur"] .list-item, html[data-theme="frituur"] .store-item, html[data-theme="frituur"] .lb-row, html[data-theme="frituur"] .store-pack, html[data-theme="frituur"] .avatar-opt { background: #fff; border: 2px dashed #e3342f; }
html[data-theme="frituur"] .bm-top { top: 16px; }
html[data-theme="frituur"] .bm-ticker .track { color: #fff; }
html[data-theme="frituur"] .bm-player { color: #3b1d0a; }
html[data-theme="frituur"] .section-title::before { content: '🍟'; }

/* =====================================================================
   🎮 GAMEBOY
   ===================================================================== */
html[data-theme="gameboy"] {
  --bg: #9bbc0f; --bg2: #8bac0f; --panel: #8bac0f; --panel2: #9bbc0f; --line: #0f380f;
  --text: #0f380f; --muted: #306230; --gold: #0f380f; --gold2: #306230;
  --head: 'Courier New', monospace; --body: 'Courier New', monospace;
  --head-color: #0f380f; --radius: 0; --btn-radius: 0;
  --body-bg: repeating-linear-gradient(0deg, #9bbc0f 0 3px, #94b40f 3px 4px);
  --panel-bg: #8bac0f; --panel-border: 4px solid #0f380f; --panel-shadow: 4px 4px 0 #306230;
  --input-bg: #9bbc0f; --bar-bg: #306230;
  --btn-bg: #306230; --btn-text: #9bbc0f; --btn-shadow: 3px 3px 0 #0f380f;
}
html[data-theme="gameboy"] body { font-weight: 700; }
html[data-theme="gameboy"] h1, html[data-theme="gameboy"] h2, html[data-theme="gameboy"] .section-title, html[data-theme="gameboy"] .bm-logo { text-transform: uppercase; text-shadow: none; }
html[data-theme="gameboy"] .hs-card, html[data-theme="gameboy"] .hs-back, html[data-theme="gameboy"] .pack, html[data-theme="gameboy"] .avatar, html[data-theme="gameboy"] .swatch, html[data-theme="gameboy"] .em, html[data-theme="gameboy"] .bw-stream {
  filter: grayscale(1) contrast(1.3) sepia(1) hue-rotate(40deg) saturate(2.6) brightness(.8);
}
html[data-theme="gameboy"] .list-item, html[data-theme="gameboy"] .store-item, html[data-theme="gameboy"] .lb-row, html[data-theme="gameboy"] .store-pack, html[data-theme="gameboy"] .avatar-opt { background: #9bbc0f; border: 3px solid #0f380f; border-radius: 0; }
html[data-theme="gameboy"] .tabs button { color: #8bac0f; }
html[data-theme="gameboy"] .tabs button.on { color: #9bbc0f; background: #0f380f; }
html[data-theme="gameboy"] .tabs button.on::before { display: none; }
html[data-theme="gameboy"] .bm-ticker .track { color: #9bbc0f; }
html[data-theme="gameboy"] .toast { border: 4px solid #0f380f; border-radius: 0; }
html[data-theme="gameboy"] .bm-stage::before { background: radial-gradient(circle at 50% 55%, rgba(15,56,15,.2), rgba(15,56,15,.85) 75%); }
html[data-theme="gameboy"] body.beamer::after { content: '🔋 LOW BATTERY'; position: fixed; left: 0; bottom: 0; height: 56px; line-height: 56px; padding: 0 22px; background: #0f380f; color: #9bbc0f; font-family: 'Courier New', monospace; font-weight: 900; font-size: 20px; animation: blink 1.2s steps(2) infinite; z-index: 50; border-top: 2px solid #9bbc0f; }