:root{--navy:#1d2b53;--yellow:#ffd23f;--pink:#ff5d8f;--blue:#3a86ff;--card:#fffaf0}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none}
html,body{margin:0;height:100%;overflow:hidden;background:#3a8fd0;color:var(--navy);font-family:ui-rounded,"Nunito","Trebuchet MS",system-ui,sans-serif;font-weight:800;touch-action:none;overscroll-behavior:none}
#app,.screen{position:fixed;inset:0}
.screen{display:none}.screen.active{display:block}
canvas{display:block}
#gl{width:100%;height:100%;touch-action:none}

.sticker{background:var(--card);border:3px solid var(--navy);border-radius:16px;box-shadow:0 4px 0 var(--navy);padding:8px 14px;font:inherit;color:var(--navy)}
.btn{cursor:pointer}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
select.sticker{padding:8px 10px;cursor:pointer}
.logo{font-size:clamp(16px,3.4vw,24px)}.logo b{color:var(--pink)}
.coins{background:var(--yellow)}
.hud{position:absolute;left:0;right:0;display:flex;gap:8px;align-items:center;padding:calc(10px + env(safe-area-inset-top)) 10px 10px;pointer-events:none;z-index:5}
.hud>*{pointer-events:auto}
.hud.top{top:0}.hud.bottom{bottom:0;top:auto;justify-content:center;padding:10px 10px calc(14px + env(safe-area-inset-bottom))}
.hud.bottom .sticker{pointer-events:none;text-align:center}
.grow{flex:1;pointer-events:none!important}

/* kaart */
#map-wrap{position:absolute;inset:0;overflow:auto;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch;background:#3a8fd0}
#map-wrap{padding-top:0}
#map,#pins{position:absolute;left:0;top:0}
#pins{pointer-events:none}
.pin{position:absolute;transform:translate(-50%,-100%);background:none;border:0;padding:4px;font:inherit;color:var(--navy);cursor:pointer;pointer-events:auto;animation:bob 1.1s ease-in-out infinite}
.pin .dot{display:block;width:26px;height:26px;margin:0 auto;background:var(--pink);border:4px solid var(--navy);border-radius:50% 50% 50% 0;transform:rotate(-45deg);box-shadow:0 3px 0 rgba(0,0,0,.25)}
.pin .lbl{display:block;margin-top:6px;background:var(--card);border:3px solid var(--navy);border-radius:12px;padding:3px 10px;white-space:nowrap;font-size:15px;box-shadow:0 3px 0 var(--navy)}
.pin .lbl small{display:block;font-size:11px;opacity:.7}
.pin.locked{animation:none;filter:grayscale(.85);opacity:.85}
.pin.locked .dot{background:#9aa3b8}
@keyframes bob{50%{transform:translate(-50%,-112%)}}

/* joystick */
#stick{position:absolute;left:calc(22px + env(safe-area-inset-left));bottom:calc(28px + env(safe-area-inset-bottom));width:130px;height:130px;border-radius:50%;background:#ffffff66;border:4px solid #ffffffcc;touch-action:none;z-index:4}
#knob{position:absolute;left:50%;top:50%;width:54px;height:54px;margin:-27px;border-radius:50%;background:var(--card);border:4px solid var(--navy);box-shadow:0 3px 0 var(--navy)}
@media(hover:hover) and (pointer:fine){#stick{opacity:.6}}
#hintbar{position:absolute;bottom:calc(14px + env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);font-size:14px;pointer-events:none;text-align:center;width:max-content;max-width:calc(100vw - 20px);z-index:3;transition:opacity .3s}
#hintbar.off{opacity:0}
@media(max-width:700px){#hintbar{bottom:calc(172px + env(safe-area-inset-bottom));font-size:13px}}
#chip{position:absolute;left:10px;top:calc(66px + env(safe-area-inset-top));z-index:5;padding:4px 12px;font-size:15px;pointer-events:none}

/* diervenster */
#panel{position:absolute;z-index:6;width:330px;max-width:calc(100vw - 20px);right:10px;bottom:calc(14px + env(safe-area-inset-bottom));padding:12px 14px}
@media(max-width:700px){#panel{left:10px;right:10px;width:auto;max-width:none}}
#panel h2{margin:0 36px 2px 0;font-size:20px}
.fact{margin:0 0 8px;font-size:12px;font-weight:700;opacity:.75}
.x{position:absolute;right:8px;top:8px;width:48px;height:48px;border-radius:50%;border:3px solid var(--navy);background:var(--pink);color:#fff;font:inherit;cursor:pointer}
.meter{display:flex;align-items:center;gap:8px;margin:5px 0}
.meter .ic{width:24px;text-align:center}
.mbg{flex:1;height:16px;border:3px solid var(--navy);border-radius:10px;background:#e6dcc8;overflow:hidden}
.mfill{height:100%;transition:width .3s}
#actions{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:8px}
.act{background:var(--blue);color:#fff;border:3px solid var(--navy);border-radius:12px;box-shadow:0 3px 0 var(--navy);padding:6px 2px;font:inherit;font-size:11px;cursor:pointer;min-height:54px;display:flex;flex-direction:column;align-items:center;gap:2px}
.act span{font-size:20px}
.act:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.sub{margin:10px 0 4px;font-size:12px;opacity:.8}
#accs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.chip{border:3px solid var(--navy);background:#fff;border-radius:12px;padding:5px 8px;font:inherit;font-size:12px;cursor:pointer}
.chip.on{background:var(--yellow)}
.sw{width:28px;height:28px;border-radius:50%;border:3px solid var(--navy);cursor:pointer;padding:0}
.sw.on{outline:3px solid var(--yellow);outline-offset:1px}

/* dialoog */
#modal{position:fixed;inset:0;background:#0b1233aa;display:flex;align-items:center;justify-content:center;padding:16px;z-index:20}
#modal-box{max-width:460px;width:100%;max-height:88vh;overflow:auto;text-align:center;padding:18px}
#modal-body h3{margin:0 0 8px}
#modal-body p{margin:6px 0;line-height:1.45;font-weight:700}
#modal-btns{display:flex;gap:8px;justify-content:center;margin-top:12px;flex-wrap:wrap}
.big{background:var(--yellow);border:3px solid var(--navy);border-radius:14px;box-shadow:0 4px 0 var(--navy);padding:10px 22px;font:inherit;font-size:16px;color:var(--navy);cursor:pointer}
.big.alt{background:#fff}
.big:disabled{opacity:.4}
.row{display:flex;align-items:center;gap:8px;margin:8px 0;flex-wrap:wrap;justify-content:center}
.row b{min-width:62px;text-align:left}
.task{display:flex;align-items:center;gap:10px;text-align:left;margin:8px 0}.task .t{flex:1}
.task small{display:block;opacity:.7}
.prev{display:inline-block;width:150px;height:170px;margin-bottom:6px}
.hidden{display:none!important}
#toast{position:fixed;left:50%;bottom:calc(150px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:30;max-width:90vw;text-align:center}
#floaters{position:fixed;inset:0;pointer-events:none;z-index:8;overflow:hidden}
.fl{position:absolute;font-size:28px;animation:up 1.1s ease-out forwards;transform:translate(-50%,-50%)}
@keyframes up{to{transform:translate(-50%,-190%);opacity:0}}


/* springknop (Roblox-achtig, rechtsonder) */
#jump{position:absolute;right:calc(22px + env(safe-area-inset-right));bottom:calc(34px + env(safe-area-inset-bottom));width:76px;height:76px;border-radius:50%;font-size:34px;padding:0;z-index:4;background:var(--yellow);touch-action:none}
#jump.hidden{display:none}

/* geluid */
.sndbar{position:absolute;right:10px;top:calc(66px + env(safe-area-inset-top));z-index:5;display:flex;gap:8px}
.snd-btn,.snd-cfg{min-width:48px;height:48px;padding:0 10px;font-size:22px;line-height:1}
.vol-row{display:flex;align-items:center;gap:10px;margin:10px 0;text-align:left}
.vol-row .vi{font-size:26px;width:34px;text-align:center}
.vol-row label{width:92px;font-size:15px}
.vol-row input[type=range]{flex:1;min-width:0;height:44px;margin:0;accent-color:var(--pink);touch-action:pan-x;cursor:pointer}
.vol-row input[type=range]::-webkit-slider-thumb{width:30px;height:30px}
.vol-row input[type=range]::-moz-range-thumb{width:30px;height:30px}

/* missies */
#quest{position:absolute;left:10px;top:calc(100px + env(safe-area-inset-top));z-index:5;display:flex;align-items:center;gap:8px;padding:5px 8px 5px 8px;max-width:min(300px,calc(100vw - 134px));min-width:0}
.q-ic{font-size:24px;flex:none}
.q-txt{min-width:0;flex:1;line-height:1.15}
.q-txt small{display:block;font-size:10px;opacity:.65;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.q-txt b{display:block;font-size:13px;font-weight:800}
#q-bar{display:block;height:8px;border:2px solid var(--navy);border-radius:6px;background:#e6dcc8;overflow:hidden;margin-top:3px}
#q-bar u{display:block;height:100%;background:var(--pink);transition:width .3s}
.q-d{flex:none;font-size:12px;color:var(--blue);white-space:nowrap}
.q-eye{flex:none;width:48px;height:48px;border-radius:50%;border:3px solid var(--navy);background:#fff;font-size:14px;padding:0;cursor:pointer}
#quest.pop{animation:qpop .5s ease-out}
@keyframes qpop{0%{transform:scale(1)}35%{transform:scale(1.08)}100%{transform:scale(1)}}
@media(max-width:700px){.q-txt b{font-size:12px}}
#pchips{position:absolute;left:170px;top:calc(66px + env(safe-area-inset-top));z-index:5;display:flex;gap:6px;pointer-events:none}
.pchip{width:40px;height:34px;border:3px solid var(--navy);border-radius:12px;background:var(--card);box-shadow:0 3px 0 var(--navy);text-align:center;font-size:16px;line-height:20px;overflow:hidden;position:relative}
.pchip i{position:absolute;left:3px;right:3px;bottom:2px;height:6px;border:2px solid var(--navy);border-radius:4px;background:#e6dcc8;overflow:hidden}
.pchip b{display:block;height:100%;width:100%;background:var(--pc,#ffd23f)}
.pchip.low{animation:blink .5s infinite alternate}
@keyframes blink{to{opacity:.45}}
#qarrow{position:absolute;left:0;top:0;z-index:5;pointer-events:none;width:0;height:0}
#qarrow i{position:absolute;left:-18px;top:-18px;width:36px;height:36px;font-style:normal;font-size:30px;line-height:36px;text-align:center;color:var(--yellow);-webkit-text-stroke:2px var(--navy);filter:drop-shadow(0 2px 0 var(--navy));animation:arrpulse 1s ease-in-out infinite alternate}
#qarrow b{position:absolute;left:-26px;top:14px;width:52px;text-align:center;font-size:12px;background:var(--card);border:2px solid var(--navy);border-radius:10px;padding:0 2px}
@keyframes arrpulse{to{opacity:.65}}
#qbanner{position:absolute;left:50%;top:calc(150px + env(safe-area-inset-top));transform:translate(-50%,-30px) scale(.8);opacity:0;z-index:9;display:flex;align-items:center;gap:10px;pointer-events:none;max-width:calc(100vw - 24px);background:var(--yellow);transition:transform .35s cubic-bezier(.3,1.6,.5,1),opacity .25s}
#qbanner.show{transform:translate(-50%,0) scale(1);opacity:1}
#qbanner.ok{background:#b7f0a6}
#qbanner .qi{font-size:30px}#qbanner b{display:block;font-size:16px}#qbanner small{display:block;font-size:12px;opacity:.8;font-weight:700}
.bigemoji{font-size:54px;line-height:1.1;animation:bob2 1.2s ease-in-out infinite}
@keyframes bob2{50%{transform:translateY(-6px)}}
.rw{background:#fff3c4;border:3px solid var(--navy);border-radius:12px;padding:6px 10px}
.npc-h{display:flex;align-items:center;gap:10px;justify-content:center;font-size:18px}.npc-i{font-size:34px}
.npc-t{font-size:17px}
.qsec{text-align:left;margin:8px 0}.qsec h4{margin:0 0 4px;font-size:14px}
.qs{font-size:13px;margin:3px 0}.qs.done{opacity:.55}.qs.cur{background:#fff3c4;border-radius:8px;padding:2px 4px}
.qs span{display:inline-block;width:22px;text-align:center}
.badges span{font-size:30px;margin:0 4px}
.lvl{font-size:12px;background:var(--yellow);border:2px solid var(--navy);border-radius:10px;padding:1px 8px;margin-left:6px}

/* grote zorgknop + vinger */
#carebtn{position:absolute;left:50%;bottom:calc(70px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:6;width:112px;height:112px;border-radius:50%;border:5px solid var(--navy);background:var(--yellow);box-shadow:0 6px 0 var(--navy);font:inherit;color:var(--navy);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;animation:cbpulse 1.1s ease-in-out infinite;touch-action:none}
#carebtn span{font-size:46px;line-height:1}#carebtn b{font-size:15px}
#carebtn:active{box-shadow:0 2px 0 var(--navy);margin-bottom:-4px}
@keyframes cbpulse{50%{transform:translateX(-50%) scale(1.09)}}
@media(max-width:700px){#carebtn{bottom:calc(46px + env(safe-area-inset-bottom));width:100px;height:100px}}
#finger{position:absolute;z-index:7;pointer-events:none;width:0;height:0}
#finger .hand{position:absolute;left:-22px;top:18px;font-size:44px;line-height:1;animation:tapf .9s ease-in-out infinite;transform-origin:50% 0}
@keyframes tapf{0%,100%{transform:translateY(14px) scale(1)}45%{transform:translateY(-4px) scale(1.08)}}
#finger .say{position:absolute;left:0;bottom:78px;transform:translateX(-50%);width:max-content;max-width:210px;background:var(--card);border:3px solid var(--navy);border-radius:14px;box-shadow:0 3px 0 var(--navy);padding:6px 10px;font-size:14px;text-align:center}

/* plek voor knoppen van features (bouwen, vrienden, ...) */
#hud-feat{position:absolute;right:calc(10px + env(safe-area-inset-right));top:calc(112px + env(safe-area-inset-top));display:flex;flex-direction:column;align-items:flex-end;gap:8px;z-index:5;pointer-events:none}
#hud-feat>*{pointer-events:auto}

/* lange talen (de/fr/...): geen tekst buiten het scherm, nette afbreking */
select#lang{max-width:9.5em;text-overflow:ellipsis}
.tab,.opt,.big,.chip,#modal-box,#hintbar,.task .t,.npc-t,#carebtn b,.q-txt b{overflow-wrap:anywhere;hyphens:auto}
.tab,.opt{text-align:center;max-width:110px;line-height:1.15}
#carebtn b{max-width:92px;text-align:center;line-height:1.05;font-size:14px}
@media(max-height:480px){#modal-box{max-height:92vh}#hintbar{max-width:calc(100vw - 260px)}}

/* multiplayer (js/net): knoppen, spelerspaneel, emote-balk */
.net-hud{min-width:48px;font-size:22px;line-height:1;padding:8px 10px;position:relative}
.net-hud.dim{opacity:.7}
.net-dot{position:absolute;right:4px;top:4px;width:11px;height:11px;border-radius:50%;border:2px solid var(--navy);background:#b9b9c4}
.net-hud[data-state=online] .net-dot,.net-status[data-state=online] .net-dot{background:#3ddc84}
.net-hud[data-state=connecting] .net-dot,.net-status[data-state=connecting] .net-dot{background:var(--yellow)}
.net-hud[data-state=offline] .net-ic{filter:grayscale(1);opacity:.6}
.net-n{font-size:12px;margin-left:3px;vertical-align:middle}
.net-sheet{position:absolute;z-index:9;left:50%;transform:translateX(-50%);width:min(420px,94vw);max-height:76vh;overflow:auto;touch-action:pan-y;padding:12px 14px 14px;text-align:center;-webkit-user-select:none}
#net-panel{top:calc(64px + env(safe-area-inset-top))}
.net-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:18px}
.net-head .x,.net-x{position:static;flex:none}
.net-status{display:flex;align-items:center;justify-content:center;gap:8px;margin-bottom:6px}
.net-status .net-dot{position:static}
.net-sec{margin-top:10px}.net-sec h4{margin:0 0 6px;font-size:14px}
.net-dim{font-size:13px;opacity:.75;margin:4px 0}
.net-code{display:flex;gap:5px;justify-content:center;margin-bottom:8px}
.net-key{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:#fff;border:3px solid var(--navy);border-radius:10px;box-shadow:0 3px 0 var(--navy);font-size:24px}
.net-join{display:flex;gap:8px;justify-content:center}
.net-input{width:9.5ch;font:inherit;font-size:24px;letter-spacing:.12em;text-align:center;text-transform:uppercase;border:3px solid var(--navy);border-radius:12px;padding:6px 8px;background:#fff;color:var(--navy);-webkit-user-select:text;user-select:text;touch-action:auto}
.net-small{padding:8px 14px;font-size:15px}
.net-row{display:flex;width:100%;align-items:center;gap:8px;margin:5px 0;font-size:16px;min-height:48px;text-align:left}
.net-em{font-size:24px}.net-nm{flex:1}
.net-col{display:flex;flex-direction:column;gap:8px}
.net-tabs{display:flex;gap:6px;align-items:center;margin-bottom:8px}.net-tabs .chip{flex:1;font-size:14px;padding:8px 6px}
.net-emotes{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.net-emo{font-size:30px;line-height:1;padding:8px 0;border:3px solid var(--navy);border-radius:14px;background:#fff;box-shadow:0 3px 0 var(--navy);cursor:pointer}
.net-emo:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.net-phrases{display:flex;flex-direction:column;gap:6px}.net-phrase{font-size:15px;padding:9px 10px;text-align:left}
@media(max-width:700px){.net-emotes{grid-template-columns:repeat(4,1fr)}}

/* ===== pretpark en arcade (js/fun) ===== */
.fun-ov{position:absolute;inset:0;z-index:12;background:#0b1233d9;display:flex;align-items:center;justify-content:center;padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));touch-action:none}
.fun-box{position:relative;width:min(560px,100%);height:min(760px,100%);display:flex;flex-direction:column;gap:8px;padding:10px}
.fun-head{display:flex;align-items:center;gap:8px;flex:none}
.fun-head .ic{font-size:28px}.fun-head .nm{flex:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fun-score{background:var(--yellow);border:3px solid var(--navy);border-radius:12px;padding:2px 10px;font-size:22px;min-width:64px;text-align:center}
.fun-x{width:48px;height:48px;border-radius:50%;border:3px solid var(--navy);background:var(--pink);color:#fff;font:inherit;font-size:18px;cursor:pointer;padding:0;flex:none}
.fun-bar{height:14px;border:3px solid var(--navy);border-radius:9px;background:#e6dcc8;overflow:hidden;flex:none}
.fun-bar u{display:block;height:100%;width:100%;background:var(--blue);transform-origin:left}
.fun-area{position:relative;flex:1;min-height:0;border:3px solid var(--navy);border-radius:14px;background:#cdeeff;overflow:hidden;touch-action:none}
.fun-hint{font-size:13px;text-align:center;opacity:.8;flex:none;min-height:16px}
.fun-card{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:16px;text-align:center;background:#fffaf0f2;border-radius:12px}
.fun-card h3{margin:0;font-size:24px}.fun-card p{margin:0;font-size:15px;line-height:1.4}
.fun-card .big{min-width:150px;min-height:48px}
.fun-stars{font-size:46px;letter-spacing:4px;filter:drop-shadow(0 3px 0 rgba(29,43,83,.35))}
.fun-stars i{font-style:normal;display:inline-block;opacity:.25;filter:grayscale(1)}
.fun-stars i.on{opacity:1;filter:none;animation:funstar .5s ease-out both}
@keyframes funstar{0%{transform:scale(.2) rotate(-40deg)}70%{transform:scale(1.35) rotate(8deg)}100%{transform:scale(1)}}
.fun-big{font-size:72px;animation:bob2 .6s ease-in-out infinite}
.fun-fl{position:absolute;z-index:2;pointer-events:none;font-size:22px;color:var(--navy);text-shadow:0 0 4px #fff,0 0 4px #fff;animation:funfl .7s ease-out forwards;transform:translate(-50%,-50%)}
@keyframes funfl{to{transform:translate(-50%,-150%);opacity:0}}
.fun-menu{display:grid;gap:8px;margin:10px 0}
.fun-row{display:flex;align-items:center;gap:10px;text-align:left;background:#fff;border:3px solid var(--navy);border-radius:14px;padding:8px 12px;cursor:pointer;font:inherit;color:var(--navy);width:100%}
.fun-row:active{transform:translateY(2px)}
.fun-row .ic{font-size:34px}.fun-row .tx{flex:1;min-width:0}.fun-row small{display:block;opacity:.7;font-weight:700}
.fun-row .st{white-space:nowrap}
.fun-hudbtn{padding:6px 12px;font-size:18px}
/* whack */
.wk-grid{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);gap:2%;padding:3%;background:linear-gradient(#a8e68a,#7bcf62)}
.wk-hole{position:relative;overflow:hidden;border-radius:50%/30%;cursor:pointer;touch-action:none;background:radial-gradient(ellipse at 50% 78%,#4a2c17 0 38%,#6b4426 39% 52%,transparent 53%)}
.wk-m{position:absolute;left:0;right:0;bottom:20%;text-align:center;font-size:min(13vw,72px);line-height:1;transform:translateY(120%);transition:transform .1s ease-out;pointer-events:none}
.wk-hole.up .wk-m{transform:translateY(0)}
.wk-hole.hit .wk-m{transform:translateY(40%) scale(.8);filter:grayscale(.4)}
.wk-hole.gold{background-color:#ffe99a}
.wk-bonk{position:absolute;left:0;right:0;top:8%;text-align:center;font-size:min(10vw,48px);pointer-events:none;display:none}
.wk-hole.hit .wk-bonk{display:block;animation:funfl .5s ease-out forwards}
/* memory */
.mm-grid{position:absolute;inset:0;display:grid;gap:2.5%;padding:3%;background:linear-gradient(#ffe6f1,#ffd0e4);grid-template-columns:repeat(var(--c),1fr);grid-template-rows:repeat(var(--r),1fr)}
.mm-card{position:relative;border:3px solid var(--navy);border-radius:14px;background:var(--blue);box-shadow:0 4px 0 var(--navy);font:inherit;font-size:min(11vw,60px);padding:0;cursor:pointer;touch-action:none;color:var(--navy)}
.mm-card::before{content:'❓';position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.6em;color:#fff}
.mm-card span{position:absolute;inset:0;display:none;align-items:center;justify-content:center;background:#fff;border-radius:11px}
.mm-card.open span,.mm-card.done span{display:flex;animation:mmflip .25s ease-out}
.mm-card.done{background:#b7f0a6}.mm-card.done span{background:#e7ffd9}
@keyframes mmflip{0%{transform:scaleX(.1)}100%{transform:scaleX(1)}}
/* ballonnen */
.pp-area{position:absolute;inset:0;background:linear-gradient(#8fd3ff,#e6f7ff);overflow:hidden;touch-action:none}
.pp-b{position:absolute;left:0;top:0;border-radius:50% 50% 48% 48%;border:3px solid var(--navy);touch-action:none;cursor:pointer;will-change:transform}
.pp-b::before{content:'';position:absolute;left:18%;top:14%;width:22%;height:26%;border-radius:50%;background:#ffffffaa}
.pp-b::after{content:'';position:absolute;left:-30%;right:-30%;top:-20%;bottom:-40%}
.pp-b span{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:55%}
.pp-b.pop{animation:pppop .18s ease-out forwards;pointer-events:none}
@keyframes pppop{to{opacity:0;filter:brightness(1.6)}}
/* ritme */
.rh-area{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);gap:2%;padding:2% 2% 2%;background:#1d2b53}
.rh-lane{position:relative;overflow:hidden;border-radius:12px;background:#ffffff14;touch-action:none;cursor:pointer;border:3px solid #ffffff30}
.rh-line{position:absolute;left:0;right:0;height:6px;background:#fff;opacity:.85}
.rh-n{position:absolute;left:10%;width:80%;border-radius:50%;border:3px solid var(--navy);will-change:transform;top:0}
.rh-lane.flash{filter:brightness(1.7)}
.rh-btn{position:absolute;left:6%;right:6%;bottom:2%;height:19%;border-radius:16px;border:4px solid var(--navy);box-shadow:0 4px 0 var(--navy)}
.rh-lane.flash .rh-btn{transform:translateY(4px);box-shadow:none}
.rh-combo{position:absolute;left:0;right:0;top:3%;text-align:center;font-size:20px;color:#fff;pointer-events:none;z-index:2}
/* ritten */
.fun-exit{position:absolute;left:50%;bottom:calc(30px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:7;padding:12px 22px;font-size:18px;display:flex;align-items:center;gap:10px;min-height:56px}
.fun-exit i{display:block;width:70px;height:12px;border:2px solid var(--navy);border-radius:8px;background:#e6dcc8;overflow:hidden}
.fun-exit i u{display:block;height:100%;background:var(--pink);transform-origin:left;width:100%}
@media(max-width:700px){.fun-exit{bottom:calc(150px + env(safe-area-inset-bottom))}}
.fun-prize{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:8px}
.fun-pz{background:#fff;border:3px solid var(--navy);border-radius:14px;padding:8px 6px;display:flex;flex-direction:column;align-items:center;gap:2px;font-size:13px}
.fun-pz .ic{font-size:38px;line-height:1.1}.fun-pz small{opacity:.7;font-weight:700;font-size:11px}
.fun-pz .big{padding:6px 10px;font-size:14px;margin-top:4px;min-height:48px}
.fun-pz.own{background:#e7ffd9}

/* boerderij-feature: zaadkeuze, verkoopdialoog, tractor-knoppen */
.farm-btn{font-size:22px;padding:8px 12px;line-height:1.1;min-width:52px;touch-action:manipulation}
.farm-panel{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.farm-stats{font-size:16px;font-weight:800;white-space:pre;background:var(--yellow)}
.farm-seeds{display:grid;grid-template-columns:repeat(auto-fit,minmax(96px,1fr));gap:8px}
.farm-seeds h3{grid-column:1/-1}
.farm-seed{display:flex;flex-direction:column;align-items:center;gap:2px;background:#fff;border:3px solid var(--navy);border-radius:14px;box-shadow:0 4px 0 var(--navy);padding:8px 4px;font:inherit;color:var(--navy);cursor:pointer;touch-action:manipulation}
.farm-seed .fi{font-size:38px;line-height:1}.farm-seed small{opacity:.7}
.farm-seed:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}
.farm-row{display:flex;align-items:center;gap:10px;text-align:left;margin:8px 0;padding:4px 8px;border-radius:12px}.farm-row.hot{background:#fff3c4}
.farm-row .fi{font-size:34px}.farm-row .ft{flex:1}.farm-row small{display:block;opacity:.7}
.farm-demand{background:#fff3c4;border-radius:10px;padding:4px 8px}
.farm-board{margin-top:8px;font-size:14px;text-align:left}.farm-board small{opacity:.6}
@media(max-width:700px){.farm-btn{font-size:20px;padding:6px 10px}.farm-stats{font-size:14px}}

/* avatar-editor op telefoon: tracker/tellers weg (ze bedekten het hoofd), tabrij met schaduw-hint als er meer tabs zijn dan passen */
#screen-world.editing #hud-feat,#screen-world.editing .sndbar,#screen-world.editing #quest,#screen-world.editing #chip,#screen-world.editing #pchips,#screen-world.editing #qarrow,#screen-world.editing #qbanner,#screen-world.editing #carebtn,#screen-world.editing #finger{display:none!important}

/* telefoon liggend (lage schermen): de feature-knoppen rechtsboven lopen anders door tot onder de springknop; laat ze in rijen naar links doorlopen */
@media(max-height:480px) and (orientation:landscape){
  #hud-feat{flex-direction:row-reverse;flex-wrap:wrap;justify-content:flex-start;align-items:flex-start;max-width:min(360px,calc(100vw - 340px));left:auto}
  .farm-panel{flex-direction:row-reverse;flex-wrap:wrap}
}

/* account-knop op het kaartscherm (rest van de account-stijl: js/account/account.css) */
#btn-account .acc-nick{font-size:13px;max-width:110px;overflow:hidden;text-overflow:ellipsis;display:inline-block;vertical-align:bottom;margin-left:4px}

/* emotes: snelbalk, wiel, zwaai-knop (js/emotes) */
#emote-hotbar{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(10px + env(safe-area-inset-bottom));z-index:5;display:flex;gap:5px;padding:5px 7px;border-radius:18px}
.eh-slot{position:relative;width:42px;height:42px;padding:0;font-size:23px;line-height:1;border:3px solid var(--navy);border-radius:13px;background:#fff;box-shadow:0 3px 0 var(--navy);cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.eh-slot i{position:absolute;right:2px;bottom:0;font:700 10px/1 system-ui,sans-serif;font-style:normal;opacity:.55;display:none}
@media(hover:hover) and (pointer:fine){.eh-slot i{display:block}}
.eh-slot.empty{opacity:.55;font-size:18px}
.eh-slot.on{background:var(--yellow)}
.eh-slot:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
#emote-hotbar.cd .eh-slot{filter:grayscale(.7);opacity:.6;pointer-events:none;transition:filter .2s}
#screen-world.editing #emote-hotbar,#screen-world.editing #emote-greet,#screen-world.editing #emote-wheel{display:none}
@media(max-width:700px){#emote-hotbar{left:calc(10px + env(safe-area-inset-left));transform:none;bottom:calc(168px + env(safe-area-inset-bottom));gap:3px;padding:4px 5px}.eh-slot{width:38px;height:38px;font-size:21px;border-radius:11px}}
#emote-greet{position:absolute;z-index:5;left:calc(50% + 176px);bottom:calc(14px + env(safe-area-inset-bottom));padding:8px 12px;font-size:16px;white-space:nowrap;animation:egpop .35s ease-out}
#emote-greet.back{background:var(--yellow);animation:egpop .35s ease-out,egpulse 1.2s ease-in-out infinite .4s}
@keyframes egpop{from{transform:scale(.6);opacity:0}}
@keyframes egpulse{50%{transform:scale(1.07)}}
@media(max-width:700px){#emote-greet{left:calc(10px + 6*41px + 18px + env(safe-area-inset-left));bottom:calc(168px + env(safe-area-inset-bottom));padding:6px 9px;font-size:14px}}
#emote-wheel{position:absolute;z-index:9;left:50%;top:50%;transform:translate(-50%,-50%);width:min(430px,96vw);max-height:98vh;overflow:auto;padding:8px 10px 10px;text-align:center;-webkit-user-select:none;user-select:none;touch-action:manipulation}
.ew-tabs{display:flex;gap:4px;justify-content:center;align-items:center;margin-bottom:6px}
.ew-tabs .chip{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:3px 5px;min-width:48px;line-height:1.05;font-size:18px}
.ew-tabs .chip small{font-size:10px;font-weight:700}
.ew-tabs .x{position:static;flex:none;width:48px;height:48px}
.ew-ring{position:relative;margin:0 auto}
.ew-sec{position:absolute;width:var(--bs);height:var(--bs);padding:0;border:3px solid var(--navy);border-radius:50%;background:#fff;box-shadow:0 3px 0 var(--navy);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;line-height:1;touch-action:manipulation;overflow:hidden;font:inherit}
.ew-sec .e{font-size:calc(var(--bs)*.42)}
.ew-sec small{font-size:calc(var(--bs)*.15);max-width:92%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:700;margin-top:2px}
.ew-sec i{position:absolute;right:4px;top:3px;font-size:calc(var(--bs)*.22);font-style:normal}
.ew-sec.locked{background:#e4e7f0}.ew-sec.locked .e{opacity:.45;filter:grayscale(1)}
.ew-sec.sel{outline:4px solid var(--pink)}.ew-sec.on{background:var(--yellow)}
.ew-sec:active{transform:translateY(2px);box-shadow:0 1px 0 var(--navy)}
.ew-mid{position:absolute;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:6px;font-size:13px;line-height:1.15;overflow:hidden}
.ew-mid .big{font-size:34px;line-height:1}.ew-mid small{font-size:11px;opacity:.85}
.ew-buy{border:3px solid var(--navy);border-radius:12px;background:var(--pink);color:#fff;font:inherit;font-weight:800;padding:3px 12px;cursor:pointer}
.ew-pager{display:flex;gap:6px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:6px;font-size:13px;font-weight:700}
.ew-pager .chip{padding:4px 12px;font-size:14px}.ew-pager .chip:disabled{opacity:.35}
.ew-say{display:flex;flex-direction:column;gap:6px;max-height:50vh;overflow:auto;padding:2px}
.ew-note{display:block;margin-top:6px;opacity:.7}
.ew-recent,.ew-hb{display:flex;gap:5px;justify-content:center;align-items:center;margin-top:6px;flex-wrap:wrap}
.ew-recent small,.ew-hb small{font-size:11px;font-weight:700;opacity:.7;margin-right:2px}
.ew-mini{position:relative;width:48px;height:48px;padding:0;font-size:20px;border:3px solid var(--navy);border-radius:11px;background:#fff;cursor:pointer;line-height:1;touch-action:manipulation}
.ew-mini i{position:absolute;right:2px;bottom:0;font:700 9px/1 system-ui,sans-serif;font-style:normal;opacity:.55}
.ew-mini.sel{outline:3px solid var(--pink);background:var(--yellow)}
@media(max-height:420px){#emote-wheel{padding:5px 8px 6px}.ew-tabs{margin-bottom:3px}.ew-tabs .chip small{display:none}.ew-recent{display:none}}

/* ---------- publiek (js/crowd): kaart bij een bot en Drukte-knop ---------- */
.cr-hud.off{opacity:.55}
.cr-chips{display:flex;gap:8px;justify-content:center;margin:8px 0}.cr-chips .big{min-width:84px;min-height:48px;padding:8px 12px}
#modal-body .big.alt{background:#fff}
.cr-card{position:absolute;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);z-index:9;width:min(420px,calc(100vw - 24px));display:flex;flex-direction:column;gap:6px;padding:10px 14px;animation:crIn .2s ease-out}
.cr-h{display:flex;align-items:center;gap:10px}.cr-h .cr-i{font-size:34px}.cr-h div{flex:1;min-width:0}.cr-h b{display:block;font-size:19px}.cr-h small{opacity:.7;font-size:12px}
.cr-x{width:48px;height:48px;border-radius:50%;border:3px solid var(--navy);background:var(--pink);color:#fff;font:inherit;font-size:16px;cursor:pointer;padding:0;flex:none}
.cr-t{margin:0;font-size:16px;line-height:1.35;min-height:22px}
.cr-b{display:flex;flex-wrap:wrap;gap:8px}.cr-b .big{flex:1;min-width:104px;min-height:48px;padding:8px 10px;font-size:15px}
@keyframes crIn{from{opacity:0;transform:translate(-50%,12px)}to{opacity:1;transform:translate(-50%,0)}}
@media (orientation:landscape) and (max-height:520px){.cr-card{left:auto;right:calc(8px + env(safe-area-inset-right));bottom:8px;transform:none;width:min(340px,50vw);animation:none}}

/* ---------- werken in de winkel (js/work) ---------- */
.wk-ov{position:absolute;inset:0;z-index:12;background:#0b1233d9;display:flex;align-items:center;justify-content:center;padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom));touch-action:none}
.wk-box{position:relative;width:min(560px,100%);height:min(780px,100%);display:flex;flex-direction:column;gap:8px;padding:10px}
.wk-head{display:flex;align-items:center;gap:8px;flex:none}.wk-head .wk-ic{font-size:28px}.wk-head .wk-nm{flex:1;min-width:0;font-size:16px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-sc,.wk-co{background:var(--yellow);border:3px solid var(--navy);border-radius:12px;padding:2px 8px;font-size:17px;white-space:nowrap}.wk-co{background:#fff}
.wk-x{width:48px;height:48px;border-radius:50%;border:3px solid var(--navy);background:var(--pink);color:#fff;font:inherit;font-size:18px;cursor:pointer;padding:0;flex:none}
.wk-bar{height:14px;border:3px solid var(--navy);border-radius:9px;background:#e6dcc8;overflow:hidden;flex:none}.wk-bar u{display:block;height:100%;width:100%;background:var(--blue);transform-origin:left;transition:transform .2s linear}
.wk-area{position:relative;flex:1;min-height:0;border:3px solid var(--navy);border-radius:14px;background:#cdeeff;overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:8px}
.wk-left{display:flex;flex-direction:column;gap:6px;flex:none}
.wk-cust{display:flex;align-items:center;gap:10px;min-height:92px}.wk-face{font-size:58px;line-height:1;width:72px;text-align:center;flex:none}
.wk-face.in{animation:wkIn .35s ease-out}.wk-face.shake{animation:wkShake .3s}.wk-face.happy{animation:wkHop .5s}
.wk-bub{flex:1;min-height:76px;background:var(--card);border:3px solid var(--navy);border-radius:18px;padding:6px 8px;display:flex;flex-wrap:wrap;gap:6px;align-items:center;align-content:center;position:relative}
.wk-bub.last{outline:3px dashed var(--pink)}
.wk-c{position:relative;display:inline-flex;align-items:center;justify-content:center;min-width:52px;height:52px;padding:0 6px;border:3px solid var(--navy);border-radius:14px;background:#fff;font-size:30px;font-style:normal}
.wk-c i{font-style:normal}.wk-c b{font-size:15px;margin-left:2px}.wk-c.chip{background:var(--bg)}.wk-c.ok{opacity:.35;filter:grayscale(.6)}.wk-c.next{box-shadow:0 0 0 4px var(--yellow)}
.wk-tray{display:flex;flex-wrap:wrap;gap:4px;min-height:44px;padding:4px 6px;border:3px dashed #1d2b5380;border-radius:12px;background:#ffffff80}.wk-tray .wk-c{min-width:38px;height:38px;font-size:22px;border-width:2px;opacity:1;filter:none}
.wk-pay{font-size:28px}
.wk-shelf{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--cols,3),1fr);grid-auto-rows:minmax(64px,1fr);gap:8px;align-content:stretch}
.wk-p{border:3px solid var(--navy);border-radius:16px;background:#fff;box-shadow:0 4px 0 var(--navy);font:inherit;font-size:clamp(34px,12vmin,64px);cursor:pointer;padding:0;min-height:64px;display:flex;align-items:center;justify-content:center}
.wk-p.chip{background:var(--bg)}.wk-p:active{transform:translateY(3px);box-shadow:0 1px 0 var(--navy)}.wk-p.bad{animation:wkShake .3s;background:#ffd6dc}.wk-p.pop{animation:wkHop .3s}
.wk-card{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px;text-align:center;background:#fffaf0f2;border-radius:12px;overflow:auto}
.wk-card h3{margin:0;font-size:24px}.wk-card p{margin:0;font-size:15px;line-height:1.4}.wk-card .big{min-width:170px;min-height:50px}.wk-note{color:#b3365a}
.wk-big{font-size:68px;animation:bob2 .6s ease-in-out infinite}.wk-big2{font-size:20px}.wk-up{font-size:22px;color:#b3365a}
.wk-stars{font-size:46px;letter-spacing:4px}.wk-stars i{font-style:normal;display:inline-block;opacity:.25;filter:grayscale(1)}.wk-stars i.on{opacity:1;filter:none;animation:funstar .5s ease-out both}
@keyframes wkIn{from{transform:scale(.3) translateY(14px);opacity:0}to{transform:none;opacity:1}}
@keyframes wkShake{20%{transform:translateX(-7px)}40%{transform:translateX(7px)}60%{transform:translateX(-5px)}80%{transform:translateX(4px)}}
@keyframes wkHop{40%{transform:translateY(-10px) scale(1.08)}}
@media (orientation:landscape) and (max-height:540px){
  .wk-box{width:min(900px,100%);padding:6px;gap:5px}.wk-area{flex-direction:row;gap:8px;padding:6px}.wk-left{flex:1;min-width:0}.wk-shelf{flex:1;--cols:3;grid-auto-rows:minmax(54px,1fr)}.wk-cust{min-height:70px}.wk-face{font-size:44px;width:56px}.wk-bub{min-height:62px}.wk-c{min-width:44px;height:44px;font-size:24px}
  .wk-p{font-size:30px;min-height:50px}.wk-card h3{font-size:19px}.wk-big{font-size:42px}.wk-stars{font-size:34px}.wk-card{gap:6px;padding:8px}.wk-card .big{min-height:44px}
}