/* PetWorld UI-systeem (js/ui). Geladen NA style.css. Bron van waarheid: UI-GUIDE.md.
   Principe: de knoppen van features blijven bestaan (hun eigen click-code werkt), maar worden hier verplaatst:
   menu-knoppen zijn verborgen (.ui-legacy) en leven als tegel in het menu; context-knoppen staan in #ui-ctx. */

/* ---------- ontwerp-tokens ---------- */
:root{
  --ui-s:1; --ui-big:1;                       /* schaal: automatisch (klein scherm) en instelling 'grote knoppen' */
  --c-navy:var(--navy,#1d2b53); --c-yellow:var(--yellow,#ffd23f); --c-pink:var(--pink,#ff5d8f); --c-blue:var(--blue,#3a86ff); --c-card:var(--card,#fffaf0);
  --c-red:#ff3b57; --c-green:#8be39a;
  --r-lg:22px; --r-md:16px; --r-sm:12px; --shadow:0 4px 0 var(--c-navy);
  --gap:10px; --edge:14px;                      /* tussenruimte >= 8-12 px; rand van het scherm */
  --u-stick:calc(130px*var(--ui-s)*var(--ui-big)); --u-jump:calc(78px*var(--ui-s)*var(--ui-big)); --u-ctx:calc(96px*var(--ui-s)*var(--ui-big));
  --u-emote:calc(60px*var(--ui-s)*var(--ui-big)); --u-top:calc(52px*var(--ui-s));
  --sa-t:env(safe-area-inset-top); --sa-b:env(safe-area-inset-bottom); --sa-l:env(safe-area-inset-left); --sa-r:env(safe-area-inset-right);
  --z-hud:5; --z-ctx:6; --z-pop:8; --z-sheet:14; --z-menu:16; --z-modal:20; --z-toast:30;
}
html.ui-calm *,html.ui-calm *::before,html.ui-calm *::after{animation-duration:.001s!important;animation-iteration-count:1!important;transition-duration:.001s!important}
button:focus-visible,select:focus-visible,[role=button]:focus-visible{outline:4px solid var(--c-blue);outline-offset:2px}
@media(hover:hover){.btn:hover,.big:hover{filter:brightness(1.05)}}

/* ---------- verborgen legacy-knoppen (leven nu als tegel in het menu) ---------- */
.ui-legacy{display:none!important}
#hud-feat,.sndbar{display:none!important}
#screen-world .hud.top .ui-legacy{display:none!important}

/* ---------- bovenbalk (kaart en wereld): terug/logo - munten - menu ---------- */
.hud.top{padding:calc(10px + var(--sa-t)) calc(var(--edge) + var(--sa-r)) 6px calc(var(--edge) + var(--sa-l));gap:var(--gap)}
.hud.top .sticker{font-size:17px;min-height:calc(48px*var(--ui-s));display:flex;align-items:center;gap:6px;white-space:nowrap}
.hud.top .logo{font-size:clamp(16px,4.6vw,22px);padding:6px 12px}
.hud.top .coins{padding:6px 14px;font-size:20px}
.ui-menubtn{position:relative;width:calc(56px*var(--ui-s));min-height:calc(48px*var(--ui-s));padding:0!important;justify-content:center;font-size:28px;line-height:1;background:var(--c-yellow)}
.ui-dot{display:none;position:absolute;right:-6px;top:-8px;min-width:22px;height:22px;border-radius:11px;background:var(--c-red);border:3px solid var(--c-navy);font:800 12px/16px inherit;color:#fff;font-style:normal;text-align:center;padding:0 3px}
.ui-dot.on{display:block}
#btn-back{padding:6px 14px}

/* ---------- joystick, springknop, emote (duim-zones onderaan) ---------- */
#stick{left:calc(var(--edge) + var(--sa-l) + 6px);bottom:calc(var(--edge) + 10px + var(--sa-b));width:var(--u-stick);height:var(--u-stick);z-index:var(--z-hud)}
#jump{right:calc(var(--edge) + var(--sa-r));bottom:calc(var(--edge) + 10px + var(--sa-b));width:var(--u-jump);height:var(--u-jump);font-size:calc(34px*var(--ui-s));z-index:var(--z-hud)}
#screen-world .ui-emote{position:absolute;z-index:var(--z-hud);right:calc(var(--edge) + var(--sa-r) + var(--u-jump) + var(--gap));bottom:calc(var(--edge) + 14px + var(--sa-b));width:var(--u-emote);height:var(--u-emote);min-width:0;padding:0;border-radius:50%;font-size:calc(30px*var(--ui-s));display:flex;align-items:center;justify-content:center;background:#fff}
#screen-world .ui-emote .net-dot{display:none}

/* ---------- contextknop(pen): altijd rechts boven de springknop ---------- */
#ui-ctx{position:absolute;z-index:var(--z-ctx);right:calc(var(--edge) + var(--sa-r));bottom:calc(var(--edge) + 10px + var(--u-jump) + var(--gap) + var(--sa-b));display:flex;flex-direction:column-reverse;align-items:flex-end;gap:var(--gap);pointer-events:none}
#ui-ctx>*{pointer-events:auto}
#ui-ctx .ui-ctx-over,#ui-ctx .ui-conditional:not(.ui-show){display:none!important}
#ui-ctx .hidden{display:none!important}
#ui-ctx #carebtn,#ui-ctx #ride-ctx,#ui-ctx .ui-big-ctx{position:static;transform:none;left:auto;bottom:auto;width:var(--u-ctx);height:var(--u-ctx);min-width:0;border-radius:50%;border:5px solid var(--c-navy);background:var(--c-yellow);box-shadow:0 6px 0 var(--c-navy);font:inherit;color:var(--c-navy);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:0;margin:0;order:1;cursor:pointer;animation:ui-pulse 1.4s ease-in-out infinite}
#ui-ctx #carebtn span,#ui-ctx #ride-ctx span{font-size:calc(42px*var(--ui-s));line-height:1}
#ui-ctx #carebtn b,#ui-ctx #ride-ctx b{font-size:14px;line-height:1.05;max-width:calc(var(--u-ctx) - 14px);text-align:center;overflow-wrap:anywhere}
#ui-ctx #carebtn:active,#ui-ctx #ride-ctx:active{box-shadow:0 2px 0 var(--c-navy);margin-bottom:-4px}
#ui-ctx #ride-ctx.off{background:#e4e7f0;animation:none}
@keyframes ui-pulse{50%{transform:scale(1.07)}}
/* een tweede grote knop wordt een kleinere ronde knop (nooit twee even grote) */
#ui-ctx .ui-big-ctx:not(.hidden)~.ui-big-ctx:not(.hidden),#ui-ctx #carebtn:not(.hidden)~#ride-ctx:not(.hidden){width:calc(var(--u-ctx)*.72);height:calc(var(--u-ctx)*.72);order:2}
/* uitstapknoppen (Afstappen / Stop / Opstaan): altijd rood, minstens 64 px hoog, onderaan de kolom (naast de duim), voor elke modus waarin je zit of rijdt */
#ui-ctx #ride-ctx.dismount,#ui-ctx #it-act.up,#ui-ctx .ui-ctx-item.fun-exit,#ui-ctx .farm-panel .farm-btn:first-child{position:static;transform:none;left:auto;bottom:auto;order:0;width:auto;height:auto;min-width:calc(150px*var(--ui-s));min-height:64px;border-radius:var(--r-md);border:5px solid var(--c-navy);background:var(--c-red);color:#fff;box-shadow:0 6px 0 var(--c-navy);flex-direction:row;gap:8px;padding:8px 18px;margin:0;animation:none;font:800 20px/1.1 inherit;white-space:nowrap;display:flex;align-items:center;justify-content:center}
#ui-ctx #ride-ctx.dismount span,#ui-ctx #it-act.up span{font-size:28px;line-height:1}
#ui-ctx .ui-ctx-item.fun-exit span{font-size:20px}
#ui-ctx #ride-ctx.dismount b,#ui-ctx #it-act.up b{font-size:20px;line-height:1.1;max-width:none;white-space:nowrap}
#ui-ctx .ui-ctx-item.fun-exit i{width:56px}
#ui-ctx .ui-pill{order:3;min-height:56px;min-width:56px;font-size:20px;padding:8px 16px;background:var(--c-yellow);display:flex;align-items:center;justify-content:center;gap:6px;border-radius:var(--r-md);white-space:nowrap;position:static;transform:none}
#ui-ctx .ui-mini{order:4;width:56px;height:56px;min-width:0;padding:0;border-radius:50%;font-size:26px;position:static;transform:none;display:flex;align-items:center;justify-content:center}
#ui-ctx .bd-hudbtn.go{background:#bfe8ff}#ui-ctx .bd-hudbtn.here{background:var(--c-green)}
#ui-ctx .bd-sos{background:#ffd6dd;font-size:16px}
#ui-ctx .farm-panel{order:0;display:flex;flex-direction:column-reverse;align-items:flex-end;gap:8px}
#ui-ctx .farm-btn{min-height:52px;min-width:52px;font-size:20px}
.farm-stats{max-width:60vw}

/* ---------- emote: knopje + snelbalk die opent na een tik ---------- */
#emote-hotbar{z-index:var(--z-pop)}
.eh-slot{width:48px;height:48px;font-size:26px}
@media(max-width:699px){
  #emote-hotbar{display:none;left:auto;transform:none;flex-direction:column-reverse;right:calc(var(--edge) + var(--sa-r) + var(--u-jump) + var(--gap) + (var(--u-emote) - 62px)/2);bottom:calc(var(--edge) + 14px + var(--u-emote) + 8px + var(--sa-b));padding:6px;gap:6px}
  #screen-world.ui-hb #emote-hotbar{display:flex}
  .eh-slot{width:50px;height:50px;font-size:27px}
  #emote-greet{left:auto;right:calc(var(--edge) + var(--sa-r));bottom:calc(var(--u-ctx) + var(--u-jump) + 40px)}
}
@media(max-width:699px) and (max-height:480px){
  #emote-hotbar{flex-direction:row-reverse;right:calc(var(--edge) + var(--sa-r) + var(--u-jump) + var(--u-emote) + var(--gap)*2);bottom:calc(var(--edge) + 14px + var(--sa-b))}
}
@media(min-width:700px){#emote-hotbar{left:50%;transform:translateX(-50%);bottom:calc(var(--edge) + var(--sa-b))}#emote-greet{left:calc(50% + 190px)}}

/* ---------- missie-regel (tracker): dun, klapt in ---------- */
#quest{left:calc(var(--edge) + var(--sa-l));top:calc(var(--u-top) + 18px + var(--sa-t));max-width:calc(100vw - 130px - var(--sa-l) - var(--sa-r));min-height:44px;padding:3px 8px;border-radius:var(--r-md);gap:6px;z-index:var(--z-hud)}
#quest .q-ic{font-size:22px}
#quest .q-txt small,#quest #q-bar{display:none}
#quest .q-txt b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#quest .q-eye{width:48px;height:48px}
#quest.ui-min .q-txt,#quest.ui-min .q-d,#quest.ui-min .q-eye{display:none}
#quest.ui-min{padding:3px 8px}

/* ---------- status-chipje: tellers + power-ups in één ---------- */
#ui-status{position:absolute;z-index:var(--z-hud);right:calc(var(--edge) + var(--sa-r));top:calc(var(--u-top) + 18px + var(--sa-t));display:flex;align-items:center;gap:6px;padding:3px 8px;min-height:44px;font-size:16px;cursor:pointer}
#ui-status:not(.ui-show){display:none}
#ui-status #pchips{position:static;display:flex;gap:4px;pointer-events:none}
#ui-status .pchip{width:36px;height:32px}
#ui-status #chip{position:absolute;right:0;top:calc(100% + 8px);left:auto;display:none;padding:6px 12px;white-space:nowrap;pointer-events:none}
#ui-status.open #chip{display:block}

/* ---------- hint: klein en tijdelijk, bovenaan in het midden ---------- */
#hintbar{top:calc(var(--u-top) + 70px + var(--sa-t));bottom:auto;font-size:14px;padding:6px 12px;max-width:calc(100vw - 28px);z-index:var(--z-hud)}
@media(max-width:700px){#hintbar{bottom:auto;font-size:14px}}
#qbanner,#quest:not(.hidden)~#qbanner{top:calc(var(--u-top) + 120px + var(--sa-t));left:calc(var(--edge) + var(--sa-l));right:auto}
#qdone{top:calc(var(--u-top) + 120px + var(--sa-t));left:calc(var(--edge) + var(--sa-l))}
.bd-x,.qd-x{width:48px;height:48px;font-size:18px}.qd-x{width:48px;height:48px}
#board{z-index:var(--z-sheet)}
.board-btn{min-width:0}

/* ---------- menu (bottom sheet met tegels) ---------- */
#ui-menu{position:fixed;inset:0;z-index:var(--z-menu);display:none;align-items:flex-end;justify-content:center;background:#0b123380}
#ui-menu.open{display:flex}
.ui-sheetbox{position:relative;width:min(560px,100%);max-height:78vh;overflow:auto;background:var(--c-card);border:3px solid var(--c-navy);border-bottom:0;border-radius:var(--r-lg) var(--r-lg) 0 0;padding:14px 14px calc(18px + var(--sa-b));-webkit-overflow-scrolling:touch;touch-action:pan-y}
#ui-menu .ui-title{font-size:22px;margin:0 56px 6px 4px}
.ui-x{position:absolute;right:10px;top:10px;width:48px;height:48px;border-radius:50%;border:3px solid var(--c-navy);background:var(--c-pink);color:#fff;font:inherit;font-size:22px;line-height:1;cursor:pointer;padding:0;z-index:2}
.ui-grp{margin:12px 4px 6px;font-size:13px;opacity:.75;letter-spacing:.02em}
.ui-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:var(--gap)}
.ui-tile{position:relative;min-height:88px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:8px 4px;background:#fff;border:3px solid var(--c-navy);border-radius:var(--r-md);box-shadow:var(--shadow);font:inherit;color:var(--c-navy);cursor:pointer;touch-action:manipulation}
.ui-tile:active{transform:translateY(3px);box-shadow:0 1px 0 var(--c-navy)}
.ui-tile .ic{font-size:36px;line-height:1.1}
.ui-tile .lb{font-size:14px;line-height:1.1;text-align:center;max-width:100%;overflow-wrap:anywhere;hyphens:auto}
.ui-tile.hot{background:#fff3c4}
@media(max-height:480px) and (orientation:landscape){#ui-menu .ui-sheetbox{max-height:94vh;width:min(720px,100%)}.ui-grid{grid-template-columns:repeat(auto-fill,minmax(104px,1fr))}.ui-tile{min-height:76px}.ui-tile .ic{font-size:30px}}
.ui-rows{display:flex;flex-direction:column;gap:var(--gap);margin-top:8px}
.ui-rows .big{width:100%;min-height:56px;text-align:left;display:flex;align-items:center;gap:10px}
.ui-bag{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap);margin-top:8px}
.ui-bag div{background:#fff;border:3px solid var(--c-navy);border-radius:var(--r-md);padding:8px 4px;font-size:20px}
.ui-bag small{display:block;font-size:12px;opacity:.7}
.ui-petrow{display:flex;gap:var(--gap);flex-wrap:wrap;justify-content:center}
.ui-petrow button{min-width:96px;min-height:96px;font-size:44px;background:#fff;border:3px solid var(--c-navy);border-radius:var(--r-md);box-shadow:var(--shadow);font-family:inherit;color:var(--c-navy);cursor:pointer}
.ui-petrow small{display:block;font-size:13px}

/* ---------- sheets en dialogen: op telefoon onderaan, nooit tegelijk ---------- */
#modal-box{position:relative}
#modal-box>.ui-x{display:block}
@media(max-width:699px),(max-height:480px) and (orientation:landscape){
  #modal{align-items:flex-end;padding:0;background:#0b123377}
  #modal-box{width:min(620px,100%);max-width:620px;max-height:62vh;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;padding:22px 16px calc(18px + var(--sa-b));box-shadow:none}
  #modal-body{padding-right:0}
  #modal-body h2,#modal-body h3,#modal-body .ui-title{padding-right:46px} /* alleen de kop wijkt voor de sluitknop; knoppen en tegels krijgen de volle breedte */
  #modal-body .ui-rows .big,#modal-body .ui-grid>*{width:100%;box-sizing:border-box}
  #modal-btns .big{min-height:52px;flex:1 1 auto}
  #panel,.net-sheet,#net-panel{position:absolute!important;left:0!important;right:0!important;top:auto!important;bottom:0!important;transform:none!important;width:auto!important;max-width:none!important;margin:0 auto;max-height:62vh;overflow:auto;border-radius:var(--r-lg) var(--r-lg) 0 0;border-bottom:0;box-shadow:none;z-index:var(--z-sheet);padding-bottom:calc(16px + var(--sa-b))}
  #panel h2{margin-right:58px}
  .net-sheet{max-width:620px!important}
  #panel{max-width:620px!important}
}
@media(max-height:480px) and (orientation:landscape){#modal-box,#panel,.net-sheet{max-height:92vh}}
.x{width:48px;height:48px;font-size:20px;top:6px;right:6px;z-index:2}
.net-head .x,.net-x{width:48px;height:48px}
.ew-tabs .x{width:44px;height:44px}
.chip{min-height:44px}.sw{width:40px;height:40px}
.ew-tabs .chip small{font-size:12px}
/* volledige sheets: stuur-knoppen weg (nooit overlap met een sheet) */
#app.ui-sheet #stick,#app.ui-sheet #jump,#app.ui-sheet #ui-ctx,#app.ui-sheet .ui-emote,#app.ui-sheet #ui-status,#app.ui-sheet #emote-hotbar,#app.ui-sheet #hintbar{visibility:hidden}

/* ---------- toast en z-lagen ---------- */
#toast{z-index:var(--z-toast);bottom:calc(var(--u-stick) + var(--edge) + 24px + var(--sa-b));font-size:16px}
#modal{z-index:var(--z-modal)}

/* ---------- volledig-scherm-modi: bediening verbergen ---------- */
#screen-world.editing #ui-ctx,#screen-world.editing .ui-emote,#screen-world.editing #ui-status,#screen-world.editing .ui-menubtn,#screen-world.editing #hintbar,
#screen-world.building #ui-ctx>*:not(.bd-keep),#screen-world.building .ui-emote,#screen-world.building #ui-status,#screen-world.building #emote-hotbar{display:none!important}
#screen-world.fullmode #stick,#screen-world.fullmode #jump,#screen-world.fullmode #ui-ctx,#screen-world.fullmode .ui-emote,#screen-world.fullmode #ui-status,#screen-world.fullmode #hintbar,#screen-world.fullmode #quest{display:none!important}

/* ---------- kleine schermen ---------- */
@media(max-width:380px){.hud.top .logo{font-size:15px;padding:6px 10px}.hud.top .coins{padding:6px 10px}}
@media(max-height:480px) and (orientation:landscape){
  :root{--u-top:40px}
  .hud.top{padding-top:calc(4px + var(--sa-t));padding-bottom:2px}
  .hud.top .sticker{min-height:40px;padding:3px 12px;font-size:16px}
  .ui-menubtn{width:48px;min-height:44px}
  #stick{bottom:calc(8px + var(--sa-b))}#jump{bottom:calc(10px + var(--sa-b))}
  #ui-ctx{bottom:calc(var(--u-jump) + 20px + var(--sa-b))}
  #quest{top:calc(52px + var(--sa-t))}#ui-status{top:calc(52px + var(--sa-t))}
  #hintbar{top:calc(52px + var(--sa-t));left:50%}
  #quest{max-width:calc(50vw - 40px)}
  .ui-emote{bottom:calc(14px + var(--sa-b))!important}
}

/* ---------- scrollen (vangnet, zie js/ui/scroll.js) ---------- */
.scroll,[data-scroll]{overflow:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-x pan-y;scrollbar-width:thin}
#modal-box{max-height:88vh;max-height:88dvh;overflow:hidden;display:flex;flex-direction:column}
#modal-body{flex:1 1 auto;min-height:0;overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
#modal-btns{flex:none}
#panel{overflow-y:auto;touch-action:pan-y;overscroll-behavior:contain;max-height:88dvh}
.net-sheet{max-height:80dvh}
#emote-wheel{max-height:96dvh;touch-action:pan-y manipulation}
@media(max-width:699px),(max-height:480px) and (orientation:landscape){
  #modal-box{max-height:62vh;max-height:62dvh}
  #panel,.net-sheet,#net-panel{max-height:62vh;max-height:62dvh}
}
/* liggend op een telefoon: sheets worden een zijpaneel rechts (45-55% breed, volle hoogte, eigen scroll) */
@media(max-height:480px) and (orientation:landscape){
  #modal{align-items:stretch;justify-content:flex-end;padding:0}
  #modal-box{width:min(52vw,540px);max-width:none;max-height:none;height:100%;border-radius:var(--r-lg) 0 0 var(--r-lg);border-bottom:3px solid var(--c-navy);border-right:0;padding-top:20px;padding-right:calc(14px + var(--sa-r))}
  #panel,.net-sheet,#net-panel{left:auto!important;right:0!important;top:0!important;bottom:0!important;width:min(52vw,540px)!important;max-width:none!important;max-height:none!important;height:100%;border-radius:var(--r-lg) 0 0 var(--r-lg);border-bottom:3px solid var(--c-navy);border-right:0}
  #ui-menu{justify-content:flex-end;align-items:stretch}
  #ui-menu .ui-sheetbox{width:min(56vw,560px);max-height:none;height:100%;border-radius:var(--r-lg) 0 0 var(--r-lg);border-bottom:3px solid var(--c-navy)}
  .ui-sheetbox{padding-right:calc(14px + var(--sa-r))}
}
.net-head{position:sticky;top:-12px;z-index:3;background:var(--c-card);padding-top:4px}

/* ---------- aanraakdoelen: nooit kleiner dan 48 px (controle: __ui.audit() in de console) ---------- */
.big,.chip,.tab,.opt{min-height:48px;min-width:48px}
.fr-mini{min-height:48px;min-width:48px}
.fr-tabs .chip{min-height:48px}
.ew-tabs .x{width:48px;height:48px}
.sw{width:48px;height:48px}
#btn-back,.ui-menubtn{min-height:48px!important}
.ui-menubtn{min-width:48px}
@media(max-height:480px) and (orientation:landscape){
  .hud.top .sticker{min-height:48px}
  .ui-menubtn{width:52px;min-height:48px}
  :root{--u-top:48px}
  #quest,#ui-status{top:calc(58px + var(--sa-t))}#hintbar{top:calc(58px + var(--sa-t))}
}
/* pets-venster (js/pets/pets.css is niet van dit werk): knoppen minimaal 48 px */
.pb-tabs button,.pb-btn{min-height:48px!important}

#hintbar.dim{opacity:.1!important}