/* ---------- Shardbound input: touch, safe areas, gamepad focus, accessibility (with js/invoer.js) ----------
   Loaded after each page's own <style>, on wereld.html and arena.html. */

/* no pull-to-refresh, no scroll chaining out of a list, no double-tap zoom, no grey tap flash, no iOS callout */
html,body{overscroll-behavior:none}
body *{overscroll-behavior:contain}
*{touch-action:manipulation}
#scene,#stick{touch-action:none}
body{-webkit-tap-highlight-color:transparent}
#scene,.kaart,.a-slot,.chip3d{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

/* ---------- safe areas (notch, rounded corners, home bar): viewport-fit=cover in both pages ---------- */
:root{--sa-t:env(safe-area-inset-top,0px);--sa-r:env(safe-area-inset-right,0px);--sa-b:env(safe-area-inset-bottom,0px);--sa-l:env(safe-area-inset-left,0px)}
#plaat{top:calc(12px + var(--sa-t));left:calc(12px + var(--sa-l))}
#minikaart{top:calc(12px + var(--sa-t));right:calc(12px + var(--sa-r))}
#rechts{right:calc(12px + var(--sa-r))}
#micro{right:calc(12px + var(--sa-r));bottom:calc(12px + var(--sa-b))}
#chat{left:calc(12px + var(--sa-l));bottom:calc(12px + var(--sa-b))}
#actiebalk{bottom:calc(12px + var(--sa-b))}
.groot-overlay{padding-top:calc(16px + var(--sa-t));padding-left:calc(16px + var(--sa-l));padding-right:calc(16px + var(--sa-r))}
@media(max-width:759px){.groot-overlay{padding-top:calc(10px + var(--sa-t));padding-left:calc(10px + var(--sa-l));padding-right:calc(10px + var(--sa-r))}}
.arena-ui .hudknoppen{top:calc(10px + var(--sa-t));right:calc(12px + var(--sa-r))}
.arena-ui .hud-onder{padding-bottom:var(--sa-b)}
@media(min-aspect-ratio:5/4){.arena-ui .hud-onder{padding-bottom:calc(8px + var(--sa-b));padding-left:calc(12px + var(--sa-l));padding-right:calc(12px + var(--sa-r))}}
.arena-ui .hud-top{padding-top:calc(8px + var(--sa-t))}
@media(max-width:780px){.arena-ui .hud-top{padding-top:calc(var(--knoph,34px) + 16px + var(--sa-t))}}
.arena-ui.knop-boven .hud-top{padding-top:calc(var(--knoph,34px) + 16px + var(--sa-t))}
.overlay{padding:calc(16px + var(--sa-t)) calc(16px + var(--sa-r)) calc(16px + var(--sa-b)) calc(16px + var(--sa-l))}

/* ---------- touch screens: every target at least 44 px (exceptions: see LEESMIJ, "Telefoon") ---------- */
@media(pointer:coarse){
  /* :where keeps this at zero specificity: a module's own min-height still wins */
  :where(button:not(.a-slot,.chip3d,.pad-veld,.he-item,.deckkeuze,.kleur,#rechtsKnop),.a-knop,.knop,select,
  input:not([type=checkbox],[type=radio],[type=range],[type=color])){min-height:44px}
  :where(.a-knop,.knop){min-width:44px}
  #chatveld{font-size:16px}     /* iOS zooms into a text field under 16 px */
  .koprij [data-act=wSluit],.koprij [data-act=pSluit],.koprij [data-act=bSluit],.skop [data-act=sSluit],.skop [data-act=sInspectSluit]{width:46px;height:44px}
  .inst-rij{min-height:46px}
  .inst-schakel{width:50px;height:30px;border-radius:15px}.inst-schakel::after{width:24px;height:24px}.inst-schakel:checked::after{left:22px}
  input[type=range]{height:44px}
  .kleur{width:44px;height:44px}
  .decklijst .r{padding:13px 8px}
  .m-item{min-height:44px}
  #snaammenu button,#vl-menu button{min-height:44px;font-size:16px}
  #chat .chatdicht{width:44px;height:44px}
  html body.chat-open #chattabs{padding-right:52px}html body #chattabs button{min-width:44px}     /* the tab row scrolls sideways, clear of the close button */
  #minikaart .mm-knop{width:44px;height:44px;min-height:44px}
  .he-tabs button{padding:8px 11px}
  .stofknop{min-height:44px;padding:3px 10px}
  .arena-ui .hudknoppen .knop{min-height:44px}
  html body.arena-ui #logla .logdicht{width:44px;height:44px}
  .chip3d{min-height:44px}
  .vh-skip{min-height:44px;padding:8px 16px}
  /* phone: Interact is the biggest button under the right thumb */
}
@media(pointer:coarse) and (max-width:759px),(pointer:coarse) and (max-height:499px) and (orientation:landscape){
  #actiebalk .s-e{width:64px!important;height:64px!important;right:62px!important;bottom:-2px!important}
  #actiebalk .s-e svg{transform:scale(1.15)}
}
/* tablets (touch, 760 px and wider): the desktop HUD with fingertip-sized slots; the micro menu may wrap to two rows,
   so the action bar stacks above it on the right instead of beside it */
@media(pointer:coarse) and (min-width:760px) and (min-height:500px){
  #micro{flex-wrap:wrap;justify-content:flex-end;max-width:calc(100vw - var(--chatB) - 48px);row-gap:4px}
  #micro .a-slot,#micro .m-tas{width:44px;height:44px;padding:8px}
  #micro .a-slot .toets{font-size:10px}
  html #actiebalk{left:auto;right:calc(12px + var(--sa-r));transform:none;bottom:var(--micro-ruimte,64px)}
  #actiebalk .a-slot.groot{width:54px;height:54px}
}
/* a piece of furniture in hand (js/huis.js): the whole floor takes taps, the joystick steps aside */
body.huis-plaats #stick,body.huis-plaats #stickring{display:none!important}

/* ---------- the world on a touch screen (js/invoer.js): joystick, auto-run, tap to walk, quick buttons, keyboard ---------- */
/* text fields without a size of their own: 16 px, so iOS never zooms in on focus */
@media(pointer:coarse){:where(input:not([type=checkbox],[type=radio],[type=range],[type=color],[type=button],[type=submit]),textarea,select){font-size:16px}
  html body :is(#mlZoekVeld,#svriend,#sgildenaam,#hd-bron,#huisNodig,.groot-overlay select){font-size:16px}}     /* fields that set a smaller size of their own */
/* the stick: faint at rest where the thumb goes, bright under it; the dashed ring is where running starts, the lock above
   it arms auto-run */
#stickring.rust,#stickring.aan{display:block}
#stickring.rust{left:calc(16px + var(--sa-l));top:auto;bottom:calc(40px + var(--sa-b));opacity:.3}
#stickring::before{content:"";position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;border:1px dashed #7df9ff55;pointer-events:none}
#stickring:not(.aan) #stickknop{transition:transform .15s}
#stickring.ren{border-color:#fde047cc;box-shadow:0 0 18px #fde04744}#stickring.ren #stickknop{background:#fde047aa}
#stickSlot{position:absolute;left:50%;top:-54px;transform:translateX(-50%);display:none;flex-direction:column;align-items:center;gap:1px;opacity:.5;
  color:#c7d2fe;font:700 10px Rajdhani,sans-serif;letter-spacing:.5px;text-transform:uppercase;text-shadow:0 1px 2px #000;white-space:nowrap}
#stickSlot svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#stickring.aan #stickSlot{display:flex}#stickring.slot #stickSlot{opacity:1;color:#fde047;transform:translateX(-50%) scale(1.2)}
#autoRun{position:fixed;left:calc(16px + var(--sa-l));bottom:calc(172px + var(--sa-b));z-index:8;display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;
  border:1px solid #fde047;border-radius:22px;background:#0b1020e6;color:#fde68a;font:700 14px Rajdhani,sans-serif;letter-spacing:.5px;text-transform:uppercase;box-shadow:0 0 14px #fde04755;cursor:pointer}
#autoRun.aan{display:flex}#autoRun span{color:#fff;font-size:13px}
/* tap to walk: a ring on the ground under the target and a chevron over its head; a ripple where you tapped */
#tikDoel{position:fixed;left:0;top:0;z-index:4;pointer-events:none;display:none}
#tikDoel.aan,#tikDoel.klaar{display:block}
#tikDoel i{position:absolute;left:calc(var(--sz,60px) / -2);top:calc(var(--sz,60px) / -4);width:var(--sz,60px);height:calc(var(--sz,60px) / 2);border:3px solid #fde047;border-radius:50%;box-shadow:0 0 12px #fde047,inset 0 0 8px #fde04788;animation:ib-puls 1s ease-in-out infinite}
#tikDoel b{position:absolute;left:0;top:0;font-size:0;transform:translate(-50%,calc(var(--kop,-120px) - 30px))}
#tikDoel b::after{content:"\25BC";font-size:20px;color:#fde047;text-shadow:0 0 8px #000,0 0 10px #fde047;display:block;animation:ib-wip .7s ease-in-out infinite alternate}
#tikDoel.klaar i{animation:ib-klaar .45s ease-out forwards}#tikDoel.klaar b{display:none}
@keyframes ib-puls{50%{opacity:.55;transform:scale(.88)}}
@keyframes ib-wip{to{transform:translateY(-6px)}}
@keyframes ib-klaar{to{opacity:0;transform:scale(1.6)}}
.tik-golf{position:fixed;width:44px;height:44px;margin:-22px 0 0 -22px;border-radius:50%;border:2px solid #ffffffaa;pointer-events:none;z-index:9;animation:ib-golf .5s ease-out forwards}
.tik-golf.raak{border-color:#fde047;box-shadow:0 0 10px #fde047}
@keyframes ib-golf{from{transform:scale(.4);opacity:1}to{transform:scale(1.5);opacity:0}}
html.minder-beweging #tikDoel i,html.minder-beweging #tikDoel b::after{animation:none}
/* while a thumb steers, the toasts and frames next to the stick never catch a stray tap */
body.ib-stuurt #meldingen,body.ib-stuurt #meldingen>*,body.ib-stuurt #doelstrip,body.ib-stuurt #groepframes,body.ib-stuurt #raid-frame{pointer-events:none!important}
/* a story scene: no "What next?" strip over it */
body.vh-aan #doelstrip{display:none}
/* phone quick buttons: Chat (unread count) above Mount, Emotes and sit above Interact; the emote list opens beside them */
#actiebalk .s-chat,#actiebalk .s-emo,#actiebalk .s-z b{display:none}
@media(max-width:759px),(max-height:499px) and (orientation:landscape){
  #actiebalk{right:calc(12px + var(--sa-r))}
  #actiebalk .s-chat{display:flex;flex-direction:column;gap:0;right:0;bottom:120px}
  #actiebalk .s-chat b{font:700 8px "Russo One",sans-serif;letter-spacing:1px;color:#fff;line-height:1}
  #actiebalk .s-emo{display:flex;right:74px;bottom:74px;width:46px;height:46px;padding:9px}
  #actiebalk .s-chat svg{width:20px;height:20px}#actiebalk .s-emo svg{width:24px;height:24px}
  #actiebalk .s-z{flex-direction:column;gap:0}#actiebalk .s-z b{display:block;font:700 8px "Russo One",sans-serif;letter-spacing:1px;color:#fff;line-height:1}
  #actiebalk .s-z svg{width:20px;height:20px}
  body.chat-open #actiebalk .s-chat{display:none}
  html body.chat-open.ib-toetsenbord #chat{top:calc(var(--vv-t,0px) + 6px)}
  html body.chat-open.ib-toetsenbord #chatlog{max-height:min(30vh,max(48px,calc(var(--vv-h,100vh) - 132px)))}
}
@media(max-height:499px) and (orientation:landscape){#actiebalk .s-chat{right:136px;bottom:0}}     /* sideways: above Mount is the minimap's corner */
.ib-tel{position:absolute;top:-5px;right:-5px;display:none;min-width:20px;height:20px;padding:0 5px;border-radius:10px;background:#ef4444;color:#fff;
  font:800 12px/20px Rajdhani,sans-serif;font-style:normal;text-align:center;box-shadow:0 0 0 2px #0b1020}
.ib-tel.aan{display:block}
#ibEmo{position:fixed;z-index:36}
#ibEmo .a-in{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px}
#ibEmo button{display:flex;align-items:center;gap:8px;min-height:44px;min-width:100px;padding:6px 10px;background:#ffffff0d;border:1px solid #7df9ff33;color:#e0e7ff;font:700 15px Rajdhani,sans-serif;cursor:pointer;text-align:left}
#ibEmo button:active{background:#7c3aed66}#ibEmo button span{font-size:20px;line-height:1}

/* ---------- the arena on a phone: the top-right buttons fold behind More (Log stays), one log line, room under the hand ---------- */
.arena-ui .hudknoppen .ib-meer{display:none}
@media(max-width:600px){
  .arena-ui .hudknoppen .ib-meer{display:inline-block;min-width:56px}
  html body.arena-ui.ib-meer-open .hudknoppen .ib-meer{background:#7c3aed88}
  html body.arena-ui:not(.ib-meer-open) .hudknoppen>:not(#logknop):not(.ib-meer){display:none!important}
  .arena-ui #hud .laatste>div:not(:last-child){display:none}
  .arena-ui #hud .hand{padding-bottom:18px}
}
/* the Den editor bar on a phone: one compact strip above the thumb buttons, categories scroll sideways */
@media(max-width:759px){
  html body #huisEdit{bottom:calc(132px + var(--sa-b));width:calc(100vw - 16px)}
  #huisEdit .a-in{padding:6px 8px;gap:4px}
  #huisEdit .he-kop{flex-wrap:wrap;gap:4px 8px}
  #huisEdit .he-kop>.a-knop{margin-left:auto}
  #huisEdit .he-tabs{order:5;flex:1 1 100%;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
  #huisEdit .he-tabs button{flex:none;white-space:nowrap}
  #huisEdit .he-item{width:78px}
  #huisEdit .he-kies{gap:6px}
}

/* ---------- phone in landscape: the phone HUD (wereld.html), squeezed for a short screen ---------- */
@media(max-height:499px) and (orientation:landscape){
  #plaat{width:min(300px,38vw)}
  #minikaart{width:110px}#minicanvas{width:96px;height:96px}#minikaart .mm-knop{top:70px}#minikaart .online{display:none}
  #meldingen{top:12px;left:auto;right:132px;width:min(360px,40vw)}
  #verzoeken{top:12px;left:25vw;right:25vw}
  body.chat-open #chat{left:25vw;right:25vw}
  body.chat-open #chatlog{max-height:34vh}
  html .groot-overlay{padding-bottom:calc(12px + var(--sa-b))}     /* the overlay already ends above the Menu button */
  .a-dialoog .a-in{min-height:0;padding:10px 14px;font-size:14px}
  /* arena: a short screen keeps the hand and the phase bar small */
  .arena-ui{--cw:clamp(40px,5.4vw,64px)}
  .arena-ui #hud .info{padding:3px 8px}
  html body.arena-ui #hud .fasebalk .laatste{display:none}
  /* the phase panel stays narrow enough to leave your leftmost creature column in view */
  html body.arena-ui .links{width:min(250px,30vw)}
  html body.arena-ui #hud .knoppen .knop{padding:8px 12px;font-size:14px;min-height:44px}
}

/* phone: a tip never covers the NPC dialogue or a duel request; the gamepad hints sit under the top bars */
@media(max-width:760px){body:has(#dialoog .a-dialoog) #uxTip,body:has(#huisEdit) #uxTip{bottom:auto;top:calc(150px + var(--sa-t))}
  html #padHints{bottom:auto;top:calc(136px + var(--sa-t))}
  html body.pad-venster:not(.arena-ui) #padHints{top:auto;bottom:calc(6px + var(--sa-b));left:8px;transform:none;max-width:calc(100vw - 150px);justify-content:flex-start;padding:4px 8px;font-size:12px}   /* a window is open: under it, beside Interact and Menu, never over its text */
  body:has(#snaammenu) #uxTip,body:has(#vl-menu) #uxTip,body:has(#modal .overlay) #uxTip,body:has(#vl-handel) #uxTip{display:none}}

/* ---------- the duel coach on a phone: a card menu opens below the coach, never under it ---------- */
@media(max-width:780px){
  html body.les-coach.les-coach #modal .overlay,html body.les-coach.les-coach #einde .overlay{align-items:flex-start;padding-top:calc(var(--coach-onder,0px) + 8px);overflow-y:auto}
  html body.arena-ui #padHints{font-size:11px;opacity:.8;top:calc(var(--knoph,34px) + 86px + var(--sa-t));left:50%;transform:translateX(-50%);flex-direction:row;align-items:center;gap:2px 8px;padding:3px 8px}   /* a thin strip under Kael's bar, off the field and the chips */
  body.les-coach #modal .venster .kaart.groot{width:min(170px,44vw);height:calc(min(170px,44vw)*1.45)}
}

/* ---------- gamepad: the focus ring, the field targets, button hints ---------- */
#padRing{position:fixed;left:0;top:0;z-index:999;pointer-events:none;display:none;border:3px solid #fde047;border-radius:10px;
  box-shadow:0 0 0 3px #1e1b4bcc,0 0 18px #fde047aa;transition:transform .08s,width .08s,height .08s}
body:not(.pad-actief) #padRing{display:none!important}
#padVeld{position:fixed;inset:0;pointer-events:none;z-index:5}
.pad-veld{position:fixed;left:0;top:0;width:60px;height:60px;opacity:0;border:0;padding:0;background:none;pointer-events:none}
#padHints{position:fixed;left:50%;bottom:calc(74px + var(--sa-b));transform:translateX(-50%);z-index:96;pointer-events:none;display:none;gap:4px 10px;flex-wrap:wrap;justify-content:center;align-items:center;
  width:max-content;max-width:calc(100vw - 24px);padding:5px 12px;background:#0b1020d9;border:1px solid #7df9ff55;font:700 13px Rajdhani,sans-serif;color:#e0e7ff;text-shadow:0 1px 2px #000}
body.pad-actief #padHints:not(:empty){display:flex}
body.pad-geen-hints #padHints{display:none!important}
#padHints span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}
#padHints .pk{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 4px;border-radius:10px;font:700 11px "Russo One",sans-serif;font-style:normal;background:#334155;color:#fff}
.pk-a{background:#16a34a!important}.pk-b{background:#dc2626!important}.pk-x{background:#2563eb!important}.pk-y{background:#ca8a04!important;color:#1a1200!important}
.arena-ui #padHints{left:8px;bottom:auto;top:42%;transform:none;flex-direction:column;align-items:flex-start;gap:4px;opacity:.9}
/* the world's key labels become pad buttons */
body.pad-actief #actiebalk .s-e .toets,body.pad-actief #actiebalk .s-z .toets,body.pad-actief #actiebalk .s-x .toets,body.pad-actief #prompt kbd{font-size:0!important}
body.pad-actief #actiebalk .s-e .toets::after{content:"A";font-size:11px;color:#4ade80}
body.pad-actief #actiebalk .s-z .toets::after{content:"X";font-size:11px;color:#60a5fa}
body.pad-actief #actiebalk .s-x .toets::after{content:"⧉";font-size:11px}
body.pad-actief #prompt kbd::after{content:"A";font-size:12px;color:#4ade80}
/* touch (no controller in use): the prompt buttons are tapped, so their key label says Tap instead of E */
@media(pointer:coarse){body:not(.pad-actief) #prompt kbd{font-size:0!important}
  body:not(.pad-actief) #prompt kbd::after{content:"Tap";font-size:11px;letter-spacing:.5px;text-transform:uppercase;color:#fde68a}
  body:not(.pad-actief) #actiebalk .toets{display:none}}

/* ---------- accessibility: larger text ---------- */
html.groot-tekst .groot-overlay>.binnen,html.groot-tekst #modal .venster,html.groot-tekst #einde .venster,html.groot-tekst .a-dialoog .a-in,
html.groot-tekst #chatlog,html.groot-tekst #prompt .a-in,html.groot-tekst .verzoek .a-in,html.groot-tekst .toast .a-in,html.groot-tekst #lesCoach .tekst,
html.groot-tekst #logla ol,html.groot-tekst #snaammenu .a-in,html.groot-tekst #svenster>.a-in,html.groot-tekst #vl-handel>.a-in,html.groot-tekst .fasebalk .laatste{zoom:1.15}
html.groot-tekst .a-tip{font-size:16px}html.groot-tekst .a-tip small{font-size:14px}

/* ---------- accessibility: colorblind-friendly (shapes and patterns next to colour) ---------- */
html.kleurblind .chip3d.aanvalchip::before{content:"⚔ "}
html.kleurblind .chip3d.doelchip::before{content:"◎ "}
html.kleurblind .chip3d.offerchip::before{content:"✝ "}
html.kleurblind .chip3d.fusiechip::before{content:"⬡ "}
html.kleurblind #hud .hand .kaart.kan{outline:2px dashed #fff;outline-offset:2px}
html.kleurblind .sh-team:not(.jij){background-image:repeating-linear-gradient(135deg,#ffffff14 0 4px,transparent 4px 9px)}
html.kleurblind .sh-pip{text-decoration:underline}
html.kleurblind .sh-team b::before{content:"☀ "}html.kleurblind .sh-team+.sh-team b::before{content:"☾ "}

/* ---------- accessibility: reduced motion ---------- */
@keyframes ib-vervaag{0%{opacity:0}10%{opacity:1}80%{opacity:1}100%{opacity:0}}
html.minder-beweging .a-splash{animation-name:ib-vervaag}
html.minder-beweging #roep.aan{animation-name:ib-vervaag}
html.minder-beweging .chip3d,html.minder-beweging #lesRing,html.minder-beweging #lesCoach.duw,html.minder-beweging .a-knop,html.minder-beweging .pakkaart,html.minder-beweging .pakkaart .voor::after,html.minder-beweging .kaart::after{animation:none!important}
html.minder-beweging .pakkaart{transition-duration:.15s}
html.minder-beweging #padRing{transition:none}
html.minder-beweging *{scroll-behavior:auto!important}