/* TypeQuest — vier game-stijlen. Elke stijl is een blok CSS-variabelen op , plus een handjevol accenten. Alle componenten in app.css lezen alleen de variabelen. */ /* =============================== NEON ARCADE =============================== */ .theme-neon{ --font-display:'Bungee',Impact,sans-serif; --font-body:'Segoe UI',system-ui,sans-serif; --font-mono:'Consolas','Menlo',monospace; --display-tracking:.02em; --bg:#0d0e2b; --card:#151740; --well:#0f1033; --hud:rgba(13,14,43,.85); --ink:#eef2ff; --muted:#9aa0d8; --line:#2c2f6b; --accent:#3ef2e4; --on-accent:#05051a; --accent2:#ff4dd8; --gold:#ffe24d; --ok:#35d07f; --danger:#ff4d6d; --warn:#ffb347; --key:#1e2159; --kb-bg:#0b0c26; --hand:#1e2159; --grad:linear-gradient(90deg,#3ef2e4,#ff4dd8); --r:18px; --r-sm:10px; --border-w:2px; --btn-depth:4px; --shadow:0 0 0 1px rgba(62,242,228,.08),0 10px 30px -18px rgba(0,0,0,.8); --shadow-lg:0 0 40px rgba(62,242,228,.25),0 20px 60px -20px #000; --logo-shadow:0 0 12px #3ef2e4,0 0 30px rgba(62,242,228,.6); --map-bg:radial-gradient(60% 40% at 15% 0%,rgba(62,242,228,.18),transparent 70%),radial-gradient(50% 45% at 90% 100%,rgba(255,77,216,.18),transparent 70%); --map-bg-opacity:1; background-image:radial-gradient(60% 40% at 15% 0%,rgba(62,242,228,.10),transparent 70%),radial-gradient(50% 45% at 90% 100%,rgba(255,77,216,.12),transparent 70%); } .theme-neon .btn--primary{box-shadow:0 var(--btn-depth) 0 #18a89c,0 0 18px rgba(62,242,228,.5)} .theme-neon .node.is-next{box-shadow:0 5px 0 var(--line),0 0 24px var(--accent)} .theme-neon h1,.theme-neon .logo{text-shadow:0 0 14px rgba(62,242,228,.55)} .theme-neon .stat b{text-shadow:0 0 10px var(--accent)} .theme-neon .world--w1{--accent:#3ef2e4}.theme-neon .world--w2{--accent:#7c9bff}.theme-neon .world--w3{--accent:#4de1ff}.theme-neon .world--w4{--accent:#ff4dd8}.theme-neon .world--w5{--accent:#ffe24d}.theme-neon .world--w6{--accent:#ff7a4d} /* =============================== GALAXY =============================== */ .theme-galaxy{ --font-display:'Rajdhani','Segoe UI',sans-serif; --font-body:'Segoe UI',system-ui,sans-serif; --font-mono:'Consolas','Menlo',monospace; --display-tracking:.04em; --bg:linear-gradient(180deg,#0b0620 0%,#1d1046 50%,#0a1a3d 100%); --card:#1f1650; --well:#120b36; --hud:rgba(14,8,40,.9); --ink:#f3efff; --muted:#a79ccf; --line:#4a3a8a; --accent:#b388ff; --on-accent:#1a0a3a; --accent2:#23d2e2; --gold:#ffd166; --ok:#3ddc97; --danger:#ff6b8b; --warn:#ffb86b; --key:#2a1d5c; --kb-bg:#150c38; --hand:#2a1d5c; --grad:linear-gradient(90deg,#b388ff,#23d2e2); --r:20px; --r-sm:12px; --border-w:1.5px; --btn-depth:3px; --shadow:0 12px 30px -16px rgba(0,0,0,.9); --shadow-lg:0 0 50px rgba(179,136,255,.3),0 20px 60px -20px #000; --logo-shadow:0 0 20px rgba(179,136,255,.7); --map-bg:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(1.5px 1.5px at 70% 20%,#fff,transparent),radial-gradient(1.5px 1.5px at 40% 80%,#fff,transparent),radial-gradient(2px 2px at 85% 65%,#fff,transparent),radial-gradient(1px 1px at 55% 50%,#fff,transparent),radial-gradient(1.5px 1.5px at 10% 70%,#fff,transparent),radial-gradient(1px 1px at 90% 10%,#fff,transparent); --map-bg-opacity:.7; } .theme-galaxy h1,.theme-galaxy h2,.theme-galaxy .btn,.theme-galaxy .hud__nav button{text-transform:uppercase} .theme-galaxy body,.theme-galaxy{background-image:radial-gradient(1.5px 1.5px at 15% 25%,#fff,transparent),radial-gradient(1px 1px at 65% 15%,#fff,transparent),radial-gradient(1.5px 1.5px at 35% 75%,#fff,transparent),radial-gradient(2px 2px at 80% 60%,#fff,transparent),radial-gradient(1px 1px at 50% 45%,#fff,transparent),radial-gradient(1px 1px at 92% 85%,#fff,transparent),linear-gradient(180deg,#0b0620 0%,#1d1046 50%,#0a1a3d 100%)} .theme-galaxy .node--boss{background:linear-gradient(135deg,#ff6b8b,#b388ff)} .theme-galaxy .btn--primary{background:linear-gradient(135deg,#b388ff,#23d2e2)} .theme-galaxy .world--w1{--accent:#b388ff}.theme-galaxy .world--w2{--accent:#8ab4ff}.theme-galaxy .world--w3{--accent:#23d2e2}.theme-galaxy .world--w4{--accent:#ff8bd1}.theme-galaxy .world--w5{--accent:#ffd166}.theme-galaxy .world--w6{--accent:#ff6b8b} /* =============================== RETRO PIXEL =============================== */ .theme-retro{ --font-display:'Bungee',monospace; --font-body:'Consolas','Lucida Console',monospace; --font-mono:'Consolas','Lucida Console',monospace; --display-tracking:0; --bg:#1c1c24; --card:#2b2b36; --well:#1f1f28; --hud:#15151c; --ink:#f4f4e8; --muted:#9a9ab0; --line:#0a0a0f; --accent:#7cff5a; --on-accent:#0a1a05; --accent2:#ff8c00; --gold:#ffd23f; --ok:#4cc366; --danger:#ff4040; --warn:#ffb703; --key:#3a3a48; --kb-bg:#22222c; --hand:#3a3a48; --grad:repeating-linear-gradient(90deg,#7cff5a 0 10px,#4cc366 10px 20px); --r:0; --r-sm:0; --border-w:3px; --btn-depth:5px; --shadow:6px 6px 0 #0a0a0f; --shadow-lg:10px 10px 0 #0a0a0f; --logo-shadow:5px 5px 0 #ff8c00,10px 10px 0 #0a0a0f; --map-bg:repeating-linear-gradient(0deg,transparent 0 30px,rgba(255,255,255,.03) 30px 31px),repeating-linear-gradient(90deg,transparent 0 30px,rgba(255,255,255,.03) 30px 31px); --map-bg-opacity:1; background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.18) 3px 4px); } .theme-retro h1,.theme-retro h2,.theme-retro h3{font-size:1.4rem} .theme-retro h1{font-size:1.7rem} .theme-retro .logo{font-size:clamp(2.2rem,7vw,4rem);color:#7cff5a} .theme-retro .logo span{color:#ff8c00} .theme-retro .btn{box-shadow:var(--btn-depth) var(--btn-depth) 0 var(--line)} .theme-retro .btn:active{transform:translate(var(--btn-depth),var(--btn-depth));box-shadow:none} .theme-retro .btn--primary{background:#7cff5a} .theme-retro .node{border-radius:0;box-shadow:5px 5px 0 var(--line)} .theme-retro .node.is-next{animation:none;outline:3px dashed var(--accent);outline-offset:4px} .theme-retro .kb__key{border-radius:0;box-shadow:3px 3px 0 var(--line)} .theme-retro .kb__key.is-next{animation:none} .theme-retro .xpbar,.theme-retro .xpbar i,.theme-retro .bar,.theme-retro .bar i,.theme-retro .progress,.theme-retro .progress i,.theme-retro .pill,.theme-retro .race__track{border-radius:0} .theme-retro .exsteps span,.theme-retro .daily__dots span,.theme-retro .avatar{border-radius:0} .theme-retro .hand__palm,.theme-retro .hand__finger{rx:0} .theme-retro .typebox span.is-cur{animation:none;outline:2px solid #fff} .theme-retro .world--w1{--accent:#7cff5a}.theme-retro .world--w2{--accent:#5ad7ff}.theme-retro .world--w3{--accent:#4c8cff}.theme-retro .world--w4{--accent:#ff5ad7}.theme-retro .world--w5{--accent:#ffd23f}.theme-retro .world--w6{--accent:#ff8c00} /* =============================== JUNGLE =============================== */ .theme-jungle{ --font-display:'Baloo 2','Segoe UI',sans-serif; --font-body:'Segoe UI',system-ui,sans-serif; --font-mono:'Consolas','Menlo',monospace; --display-tracking:0; --bg:linear-gradient(180deg,#dff5e3 0%,#eef9e6 55%,#fdf3d6 100%); --card:#ffffff; --well:#eef7ea; --hud:rgba(255,255,255,.85); --ink:#1f3a2a; --muted:#5d7a68; --line:#1f3a2a; --accent:#2fb457; --on-accent:#ffffff; --accent2:#ff8c42; --gold:#ffb703; --ok:#2fb457; --danger:#ff5d5d; --warn:#ffb703; --key:#fff; --kb-bg:#c9ecd0; --hand:#ffe1c2; --grad:linear-gradient(90deg,#2fb457,#ffb703); --r:24px; --r-sm:14px; --border-w:3px; --btn-depth:5px; --shadow:0 6px 0 rgba(31,58,42,.15); --shadow-lg:0 12px 0 rgba(31,58,42,.15),0 20px 40px -20px rgba(0,0,0,.4); --logo-shadow:0 5px 0 #1f3a2a; --map-bg:radial-gradient(circle at 10% 90%,rgba(47,180,87,.25),transparent 40%),radial-gradient(circle at 90% 10%,rgba(255,183,3,.25),transparent 40%); --map-bg-opacity:1; } .theme-jungle{background-image:linear-gradient(180deg,#dff5e3 0%,#eef9e6 55%,#fdf3d6 100%)} .theme-jungle .logo{color:#1f3a2a;-webkit-text-stroke:2px #1f3a2a;paint-order:stroke fill} .theme-jungle .logo span{color:#2fb457} .theme-jungle .btn--primary{box-shadow:0 var(--btn-depth) 0 #1d7a3b} .theme-jungle .node{box-shadow:0 6px 0 var(--line)} .theme-jungle .node--boss{background:#ff8c42} .theme-jungle .hud__nav button.is-on{background:#2fb457;color:#fff} .theme-jungle .stat b{color:#2fb457} .theme-jungle .toast{background:#1f3a2a;color:#fff} .theme-jungle .world--w1{--accent:#2fb457}.theme-jungle .world--w2{--accent:#3ea6ff}.theme-jungle .world--w3{--accent:#1e88a8}.theme-jungle .world--w4{--accent:#b06cff}.theme-jungle .world--w5{--accent:#ffb703}.theme-jungle .world--w6{--accent:#ff8c42} .theme-jungle .themecard.is-on{box-shadow:0 0 0 4px #ffb703} /* =============================== TOYBOX (zoals in FamilyPlanner) =============================== */ .theme-toybox{ --font-display:'Baloo 2','Segoe UI',sans-serif; --font-body:'Segoe UI',system-ui,sans-serif; --font-mono:'Consolas','Menlo',monospace; --display-tracking:0; --bg:linear-gradient(180deg,#dff1ff 0%,#eaf6ff 55%,#fdf3e0 100%); --card:#ffffff; --well:#f1f6ff; --hud:rgba(255,255,255,.88); --ink:#2e2440; --muted:#6e6486; --line:#2e2440; --accent:#7c5cff; --on-accent:#ffffff; --accent2:#ff5d5d; --gold:#ffb703; --ok:#4cc366; --danger:#ff5d5d; --warn:#ffb703; --key:#ffffff; --kb-bg:#ffe9a8; --hand:#ffd9b8; --grad:repeating-linear-gradient(45deg,#ffb703 0 12px,#ffd23f 12px 24px); --r:26px; --r-sm:14px; --border-w:3px; --btn-depth:6px; --shadow:0 6px 0 #2e2440; --shadow-lg:0 10px 0 #2e2440,0 24px 40px -20px rgba(46,36,64,.5); --logo-shadow:0 6px 0 #2e2440; --map-bg:radial-gradient(circle at 15% 85%,rgba(124,92,255,.18),transparent 40%),radial-gradient(circle at 85% 15%,rgba(255,183,3,.28),transparent 40%); --map-bg-opacity:1; } .theme-toybox{background-image:linear-gradient(180deg,#dff1ff 0%,#eaf6ff 55%,#fdf3e0 100%)} .theme-toybox .logo{color:#2e2440} .theme-toybox .logo span{color:#7c5cff} .theme-toybox .btn{box-shadow:0 var(--btn-depth) 0 #2e2440} .theme-toybox .btn--primary{background:#ffb703;color:#2e2440} .theme-toybox .btn--gold{background:#4cc366;color:#fff} .theme-toybox .hud__nav button.is-on{background:#ffb703;color:#2e2440} .theme-toybox .node{box-shadow:0 6px 0 #2e2440} .theme-toybox .node.is-done{background:#4cc366} .theme-toybox .node.is-next{background:#ffb703;color:#2e2440} .theme-toybox .node--boss{background:#ff5d5d;transform:rotate(-4deg)} .theme-toybox .node--boss.is-done{background:#ffb703} .theme-toybox .lesson__card h1{transform:rotate(-1.5deg);display:inline-block} .theme-toybox .pill--boss,.theme-toybox .pill--speed{transform:rotate(6deg);display:inline-block} .theme-toybox .xpbar i,.theme-toybox .progress i{background-size:34px 34px;animation:tb-stripes 1s linear infinite} @keyframes tb-stripes{to{background-position:34px 0}} .theme-toybox .stat b{color:#7c5cff} .theme-toybox .toast{background:#2e2440;color:#fff} .theme-toybox .result h2{transform:rotate(-3deg)} .theme-toybox .world--w1{--accent:#4cc366}.theme-toybox .world--w2{--accent:#3ea6ff}.theme-toybox .world--w3{--accent:#1e88a8}.theme-toybox .world--w4{--accent:#7c5cff}.theme-toybox .world--w5{--accent:#ffb703}.theme-toybox .world--w6{--accent:#ff5d5d} .theme-toybox .themecard.is-on{box-shadow:0 0 0 4px #ffb703} .themecard--toybox{background:linear-gradient(180deg,#dff1ff,#fdf3e0);color:#2e2440;font-family:'Baloo 2',sans-serif;font-size:1rem;border:3px solid #2e2440;box-shadow:0 6px 0 #2e2440} .themecard--toybox small{color:#6e6486} /* =============================== MIDNIGHT =============================== */ .theme-midnight{ --font-display:'Rajdhani','Segoe UI',sans-serif; --font-body:'Segoe UI',system-ui,sans-serif; --font-mono:'Consolas','Menlo',monospace; --display-tracking:.05em; --bg:linear-gradient(180deg,#0b1220 0%,#101a2e 100%); --card:#141f35; --well:#0d1628; --hud:rgba(11,18,32,.9); --ink:#e6edf7; --muted:#8b9bb8; --line:#26375a; --accent:#4f8cff; --on-accent:#ffffff; --accent2:#22d3ee; --gold:#f5c542; --ok:#22c55e; --danger:#ef4444; --warn:#f59e0b; --key:#1b2942; --kb-bg:#0b1220; --hand:#1b2942; --grad:linear-gradient(90deg,#4f8cff,#22d3ee); --r:14px; --r-sm:8px; --border-w:1.5px; --btn-depth:3px; --shadow:0 10px 30px -18px rgba(0,0,0,.9); --shadow-lg:0 0 0 1px #26375a,0 24px 60px -20px #000; --logo-shadow:0 0 24px rgba(79,140,255,.6); --map-bg:linear-gradient(135deg,rgba(79,140,255,.12),transparent 50%),repeating-linear-gradient(0deg,transparent 0 40px,rgba(255,255,255,.025) 40px 41px); --map-bg-opacity:1; } .theme-midnight{background-image:linear-gradient(180deg,#0b1220 0%,#101a2e 100%)} .theme-midnight h1,.theme-midnight h2,.theme-midnight .btn,.theme-midnight .hud__nav button{text-transform:uppercase} .theme-midnight .btn--primary{background:linear-gradient(135deg,#4f8cff,#22d3ee)} .theme-midnight .node--boss{background:linear-gradient(135deg,#ef4444,#f59e0b)} .theme-midnight .world--w1{--accent:#4f8cff}.theme-midnight .world--w2{--accent:#22d3ee}.theme-midnight .world--w3{--accent:#818cf8}.theme-midnight .world--w4{--accent:#f472b6}.theme-midnight .world--w5{--accent:#f5c542}.theme-midnight .world--w6{--accent:#ef4444} /* =============================== LAVA =============================== */ .theme-lava{ --font-display:'Bungee',Impact,sans-serif; --font-body:'Segoe UI',system-ui,sans-serif; --font-mono:'Consolas','Menlo',monospace; --display-tracking:.02em; --bg:#150804; --card:#2b130c; --well:#1c0b07; --hud:rgba(21,8,4,.9); --ink:#ffe9d6; --muted:#c08a70; --line:#5a2414; --accent:#ff6a00; --on-accent:#1a0a06; --accent2:#ffd23f; --gold:#ffd23f; --ok:#7ddc4a; --danger:#ff3b3b; --warn:#ffb347; --key:#3a1a10; --kb-bg:#0f0503; --hand:#3a1a10; --grad:linear-gradient(90deg,#ff3d00,#ff8c00,#ffd23f); --r:16px; --r-sm:10px; --border-w:2px; --btn-depth:4px; --shadow:0 0 0 1px rgba(255,106,0,.1),0 12px 30px -18px #000; --shadow-lg:0 0 40px rgba(255,106,0,.3),0 20px 60px -20px #000; --logo-shadow:0 0 14px #ff6a00,0 0 34px rgba(255,61,0,.7); --map-bg:radial-gradient(60% 50% at 20% 100%,rgba(255,106,0,.35),transparent 70%),radial-gradient(40% 40% at 90% 0%,rgba(255,61,0,.25),transparent 70%); --map-bg-opacity:1; background-image:radial-gradient(60% 40% at 50% 100%,rgba(255,61,0,.25),transparent 70%); } .theme-lava h1,.theme-lava .logo{text-shadow:0 0 14px rgba(255,106,0,.6)} .theme-lava .btn--primary{box-shadow:0 var(--btn-depth) 0 #a33d00,0 0 18px rgba(255,106,0,.5)} .theme-lava .node.is-next{box-shadow:0 5px 0 var(--line),0 0 24px var(--accent)} .theme-lava .world--w1{--accent:#ff6a00}.theme-lava .world--w2{--accent:#ff8c00}.theme-lava .world--w3{--accent:#ffd23f}.theme-lava .world--w4{--accent:#ff3b3b}.theme-lava .world--w5{--accent:#ff4dd8}.theme-lava .world--w6{--accent:#ffffff} /* =============================== HACKER =============================== */ .theme-hacker{ --font-display:'Consolas','Lucida Console',monospace; --font-body:'Consolas','Lucida Console',monospace; --font-mono:'Consolas','Lucida Console',monospace; --display-tracking:0; --bg:#050a05; --card:#0a140a; --well:#061006; --hud:rgba(5,10,5,.92); --ink:#b6ffb6; --muted:#5fa85f; --line:#1f5a1f; --accent:#39ff14; --on-accent:#041004; --accent2:#00e5ff; --gold:#ffe600; --ok:#39ff14; --danger:#ff3860; --warn:#ffb000; --key:#0f200f; --kb-bg:#030803; --hand:#0f200f; --grad:linear-gradient(90deg,#39ff14,#00e5ff); --r:4px; --r-sm:3px; --border-w:1px; --btn-depth:2px; --shadow:0 0 0 1px rgba(57,255,20,.08); --shadow-lg:0 0 30px rgba(57,255,20,.25); --logo-shadow:0 0 10px #39ff14,0 0 30px rgba(57,255,20,.6); --map-bg:repeating-linear-gradient(0deg,transparent 0 2px,rgba(57,255,20,.04) 2px 3px); --map-bg-opacity:1; background-image:repeating-linear-gradient(0deg,transparent 0 3px,rgba(0,0,0,.25) 3px 4px); } .theme-hacker h1,.theme-hacker h2,.theme-hacker h3{font-weight:700;text-shadow:0 0 8px rgba(57,255,20,.6)} .theme-hacker h1::before{content:'> '} .theme-hacker .logo{font-size:clamp(2.4rem,7vw,4.5rem);color:#39ff14} .theme-hacker .logo span{color:#00e5ff} .theme-hacker .typebox span.is-cur{animation:none;background:#39ff14;color:#041004} .theme-hacker .kb__key.is-next{animation:none;box-shadow:0 0 14px #39ff14} .theme-hacker .world--w1{--accent:#39ff14}.theme-hacker .world--w2{--accent:#00e5ff}.theme-hacker .world--w3{--accent:#7cff7c}.theme-hacker .world--w4{--accent:#ff3860}.theme-hacker .world--w5{--accent:#ffe600}.theme-hacker .world--w6{--accent:#ffffff} /* =============================== SUNSET (synthwave) =============================== */ .theme-sunset{ --font-display:'Bungee',Impact,sans-serif; --font-body:'Segoe UI',system-ui,sans-serif; --font-mono:'Consolas','Menlo',monospace; --display-tracking:.02em; --bg:linear-gradient(180deg,#1a0b2e 0%,#4a1a5c 55%,#ff6f61 100%); --card:#2a1245; --well:#1c0c30; --hud:rgba(26,11,46,.9); --ink:#fff3f0; --muted:#c9a8c8; --line:#5a2d6e; --accent:#ff2d95; --on-accent:#ffffff; --accent2:#ffb347; --gold:#ffd166; --ok:#2ee6a6; --danger:#ff4d6d; --warn:#ffb347; --key:#3a1a55; --kb-bg:#1a0b2e; --hand:#3a1a55; --grad:linear-gradient(90deg,#ff2d95,#ffb347); --r:18px; --r-sm:10px; --border-w:2px; --btn-depth:4px; --shadow:0 0 0 1px rgba(255,45,149,.12),0 12px 30px -18px #000; --shadow-lg:0 0 40px rgba(255,45,149,.35),0 20px 60px -20px #000; --logo-shadow:0 0 14px #ff2d95,0 0 34px rgba(255,45,149,.6); --map-bg:radial-gradient(circle at 50% 110%,#ffb347 0,#ff2d95 18%,transparent 45%),repeating-linear-gradient(0deg,transparent 0 28px,rgba(255,45,149,.18) 28px 29px),repeating-linear-gradient(90deg,transparent 0 28px,rgba(255,45,149,.12) 28px 29px); --map-bg-opacity:.55; } .theme-sunset{background-image:linear-gradient(180deg,#1a0b2e 0%,#4a1a5c 55%,#ff6f61 100%)} .theme-sunset h1,.theme-sunset .logo{text-shadow:0 0 14px rgba(255,45,149,.6)} .theme-sunset .btn--primary{background:linear-gradient(135deg,#ff2d95,#ffb347)} .theme-sunset .node.is-next{box-shadow:0 5px 0 var(--line),0 0 24px var(--accent)} .theme-sunset .world--w1{--accent:#ff2d95}.theme-sunset .world--w2{--accent:#b06cff}.theme-sunset .world--w3{--accent:#2ee6a6}.theme-sunset .world--w4{--accent:#ffb347}.theme-sunset .world--w5{--accent:#ffd166}.theme-sunset .world--w6{--accent:#ff4d6d} /* =============================== GLITTER (roze glam) =============================== */ .theme-glam{ --font-display:'Baloo 2','Segoe UI',sans-serif; --font-body:'Segoe UI',system-ui,sans-serif; --font-mono:'Consolas','Menlo',monospace; --display-tracking:0; --bg:linear-gradient(180deg,#ffd0e8 0%,#ffe6f2 50%,#fff5fa 100%); --card:#ffffff; --well:#fff0f7; --hud:rgba(255,240,247,.92); --ink:#5a1a45; --muted:#b06a95; --line:#ff4fa3; --accent:#ff2d95; --on-accent:#ffffff; --accent2:#b388ff; --gold:#ffcf4d; --ok:#4cc366; --danger:#ff5d5d; --warn:#ffb703; --key:#ffffff; --kb-bg:#ffd0e8; --hand:#ffd9c9; --grad:linear-gradient(90deg,#ff2d95,#ffb3d9,#ff2d95); --r:26px; --r-sm:14px; --border-w:3px; --btn-depth:5px; --shadow:0 6px 0 rgba(255,79,163,.35); --shadow-lg:0 10px 0 rgba(255,79,163,.35),0 24px 40px -20px rgba(90,26,69,.4); --logo-shadow:0 4px 0 #ff2d95,0 0 24px #ffb3d9; --map-bg:radial-gradient(2px 2px at 12% 20%,#fff,transparent),radial-gradient(2px 2px at 30% 70%,#fff,transparent),radial-gradient(3px 3px at 55% 30%,#fff,transparent),radial-gradient(2px 2px at 75% 80%,#fff,transparent),radial-gradient(3px 3px at 88% 25%,#fff,transparent),radial-gradient(2px 2px at 45% 90%,#fff,transparent),radial-gradient(circle at 80% 100%,rgba(179,136,255,.35),transparent 40%),radial-gradient(circle at 10% 0%,rgba(255,45,149,.25),transparent 40%); --map-bg-opacity:1; } .theme-glam{background-image:radial-gradient(2px 2px at 20% 30%,#fff,transparent),radial-gradient(2px 2px at 70% 15%,#fff,transparent),radial-gradient(3px 3px at 40% 80%,#fff,transparent),radial-gradient(2px 2px at 90% 60%,#fff,transparent),linear-gradient(180deg,#ffd0e8 0%,#ffe6f2 50%,#fff5fa 100%)} .theme-glam .logo{color:#ff2d95;-webkit-text-stroke:2px #fff;paint-order:stroke fill} .theme-glam .logo span{color:#b388ff} .theme-glam .btn{box-shadow:0 var(--btn-depth) 0 #d61c78} .theme-glam .btn--primary{background:linear-gradient(135deg,#ff2d95,#ff7ac3);color:#fff} .theme-glam .btn--gold{background:#ffcf4d;color:#5a1a45;box-shadow:0 var(--btn-depth) 0 #d6a520} .theme-glam .node{box-shadow:0 6px 0 #d61c78} .theme-glam .node.is-next{background:linear-gradient(135deg,#ff2d95,#b388ff);color:#fff} .theme-glam .node--boss{background:#b388ff;border-radius:50%} .theme-glam .node--boss.is-done{background:#ffcf4d} .theme-glam .map__head h2::after,.theme-glam .lesson__card h1::after{content:' ✨'} .theme-glam .daily::before{content:'💖';font-size:1.5rem} .theme-glam .xpbar i,.theme-glam .progress i{background-size:200% 100%;animation:glam-shine 2s linear infinite} @keyframes glam-shine{to{background-position:200% 0}} .theme-glam .stat b{color:#ff2d95} .theme-glam .hud__nav button.is-on{background:#ff2d95;color:#fff} .theme-glam .toast{background:#5a1a45;color:#fff} .theme-glam .typebox span.is-ok{color:#5a1a45} .theme-glam .result__stars .bigstar.is-on{color:#ff2d95;text-shadow:0 0 18px #ffb3d9} .theme-glam .world--w1{--accent:#ff2d95}.theme-glam .world--w2{--accent:#ff7ac3}.theme-glam .world--w3{--accent:#b388ff}.theme-glam .world--w4{--accent:#7c5cff}.theme-glam .world--w5{--accent:#ffcf4d}.theme-glam .world--w6{--accent:#ff5d5d} .theme-glam .themecard.is-on{box-shadow:0 0 0 4px #ffcf4d} /* =============================== BLOKJES (grove pixels) =============================== */ .theme-blocky{ --font-display:'Bungee',monospace; --font-body:'Consolas','Lucida Console',monospace; --font-mono:'Consolas','Lucida Console',monospace; --display-tracking:0; --bg:linear-gradient(180deg,#78c0ff 0%,#a8dcff 58%,#5da130 58%,#5da130 62%,#7a5230 62%,#6b4423 100%); --card:#c6c6c6; --well:#a8a8a8; --hud:rgba(198,198,198,.96); --ink:#1f1f1f; --muted:#4a4a4a; --line:#373737; --accent:#5da130; --on-accent:#ffffff; --accent2:#3f76d6; --gold:#ffd700; --ok:#5da130; --danger:#b02e26; --warn:#f9a825; --key:#dcdcdc; --kb-bg:#6b4423; --hand:#c68642; --grad:repeating-linear-gradient(90deg,#5da130 0 12px,#4a8a25 12px 24px); --r:0; --r-sm:0; --border-w:4px; --btn-depth:0px; --shadow:6px 6px 0 #373737; --shadow-lg:10px 10px 0 #373737; --logo-shadow:4px 4px 0 #373737,8px 8px 0 #5da130; --map-bg:repeating-conic-gradient(#5da130 0 25%,#559a2c 0 50%) 0 0/48px 48px; --map-bg-opacity:.35; } .theme-blocky{background-image:linear-gradient(180deg,#78c0ff 0%,#a8dcff 58%,#5da130 58%,#5da130 62%,#7a5230 62%,#6b4423 100%);image-rendering:pixelated} .theme-blocky h1,.theme-blocky h2,.theme-blocky h3{text-shadow:3px 3px 0 #ffffffaa} .theme-blocky h1{font-size:1.7rem} .theme-blocky .logo{font-size:clamp(2.2rem,7vw,4rem);color:#fff} .theme-blocky .logo span{color:#ffd700} .theme-blocky .btn,.theme-blocky .node,.theme-blocky .kb__key,.theme-blocky .world,.theme-blocky .hud__stat,.theme-blocky .exchip,.theme-blocky .item,.theme-blocky .stat,.theme-blocky .tabs button{border-radius:0;border:4px solid;border-color:#ffffff #373737 #373737 #ffffff;box-shadow:none} .theme-blocky .btn{padding:10px 20px;background:#8b8b8b;color:#fff;text-shadow:2px 2px 0 #373737} .theme-blocky .btn:active{transform:none;border-color:#373737 #ffffff #ffffff #373737} .theme-blocky .btn--primary{background:#5da130} .theme-blocky .btn--gold{background:#c9a227;color:#fff} .theme-blocky .btn--danger{background:#b02e26} .theme-blocky .card,.theme-blocky .map,.theme-blocky .typebox,.theme-blocky .modal__box,.theme-blocky .daily,.theme-blocky .lesson__card,.theme-blocky .gamecard,.theme-blocky .auth__form,.theme-blocky .kb{border-radius:0;border:4px solid;border-color:#ffffff #373737 #373737 #ffffff;box-shadow:6px 6px 0 rgba(0,0,0,.35)} .theme-blocky .kb{background:repeating-conic-gradient(#7a5230 0 25%,#6b4423 0 50%) 0 0/24px 24px} .theme-blocky .kb__key{background:#dcdcdc;box-shadow:none} .theme-blocky .kb__key.is-next{animation:none;background:#5da130;color:#fff;border-color:#8ee05a #2f5e14 #2f5e14 #8ee05a} .theme-blocky .kb__key::before{height:6px} .theme-blocky .node{border-radius:0;background:#8b8b8b;color:#fff;text-shadow:2px 2px 0 #373737;box-shadow:none} .theme-blocky .node.is-done{background:#5da130} .theme-blocky .node.is-next{background:#ffd700;color:#1f1f1f;text-shadow:none;animation:none;outline:4px dashed #fff;outline-offset:3px} .theme-blocky .node--boss{background:#b02e26;border-radius:0} .theme-blocky .node--boss.is-done{background:#c9a227} .theme-blocky .path::before{border-left:6px dotted #373737} .theme-blocky .xpbar,.theme-blocky .xpbar i,.theme-blocky .bar,.theme-blocky .bar i,.theme-blocky .progress,.theme-blocky .progress i,.theme-blocky .pill,.theme-blocky .race__track,.theme-blocky .exsteps span,.theme-blocky .daily__dots span,.theme-blocky .avatar,.theme-blocky .themecard,.theme-blocky .badge,.theme-blocky kbd,.theme-blocky .field input,.theme-blocky .code{border-radius:0} .theme-blocky .xpbar i{box-shadow:none} .theme-blocky .hand__palm,.theme-blocky .hand__finger{rx:0} .theme-blocky .hud{border-bottom:4px solid #373737} .theme-blocky .hud__nav button.is-on{background:#5da130;color:#fff;border-radius:0} .theme-blocky .typebox span.is-cur{animation:none;background:#5da130;color:#fff} .theme-blocky .typebox span.is-err{background:#b02e26} .theme-blocky .stat b{color:#2f5e14} .theme-blocky .toast{background:#373737;color:#fff;border-radius:0;border:3px solid #fff} .theme-blocky .world--w1{--accent:#5da130}.theme-blocky .world--w2{--accent:#3f76d6}.theme-blocky .world--w3{--accent:#1e88a8}.theme-blocky .world--w4{--accent:#9b59b6}.theme-blocky .world--w5{--accent:#ffd700}.theme-blocky .world--w6{--accent:#b02e26} .theme-blocky .themecard.is-on{box-shadow:0 0 0 4px #ffd700}