/* ---------- Shardbound UI design system: one look for every window (spec: LEESMIJ.md "Vensters en UI") ----------
   Loaded last on wereld.html and arena.html, after css/invoer.css. The primitives (.a-paneel, .a-knop, .a-titel, ...) stay
   in css/anime.css; this file holds the tokens, the window shell, header bar, close button, tabs, lists, empty and loading
   states, focus rings, scroll areas and the phone rules, and maps each module's own window onto them.
   Module CSS is injected at runtime (after this file), so overrides here start with "html body" to win on specificity. */

:root{
  --ui-1:4px;--ui-2:8px;--ui-3:12px;--ui-4:16px;--ui-5:24px;--ui-6:32px;
  --ui-cut-s:6px;--ui-cut:10px;--ui-cut-l:14px;
  --ui-tekst:#eef2ff;--ui-zacht:#c7d2fe;--ui-dim:#a5b4fc;--ui-neon:#7df9ff;--ui-goud:#fde68a;--ui-rood:#fb7185;--ui-groen:#86efac;
  --ui-focus:#fde047;--ui-lijn:#7df9ff33;
  --ui-paneel:linear-gradient(160deg,rgba(10,14,34,.97),rgba(22,14,48,.97));
  --ui-kopbg:linear-gradient(180deg,rgba(12,14,36,.99),rgba(18,14,44,.97));
  --ui-rand:linear-gradient(135deg,#7df9ff,#5b6cff 45%,#ff4fd8);
  --ui-sluit-w:36px;--ui-sluit-h:32px;
}
@media(pointer:coarse){:root{--ui-sluit-w:46px;--ui-sluit-h:44px}}

/* ---------- scroll areas: thin cyan bars, never chaining out to the page ---------- */
html body :is(.groot-overlay,.kos-kast>.a-in,.hd-venster>.a-in,.vl-venster>.a-in,.mk-venster>.a-in,#svenster>.a-in,#sinspect>.a-in,#mod-venster,.mod-doos,#fb-doos,
  #mlVenster .ml-in,#uxCodex .ux-lijst,#uxCodex .ux-inhoud,.decklijst,#vl-handel){scrollbar-width:thin;scrollbar-color:#7df9ff55 transparent;overscroll-behavior:contain}
html body :is(.groot-overlay,.a-in,#mod-venster,.mod-doos,#fb-doos,.ml-in,.ux-lijst,.ux-inhoud,.decklijst)::-webkit-scrollbar{width:8px;height:8px}
html body :is(.groot-overlay,.a-in,#mod-venster,.mod-doos,#fb-doos,.ml-in,.ux-lijst,.ux-inhoud,.decklijst)::-webkit-scrollbar-thumb{background:#7df9ff44;border-radius:4px}
html body :is(.groot-overlay,.a-in,#mod-venster,.mod-doos,#fb-doos,.ml-in,.ux-lijst,.ux-inhoud,.decklijst)::-webkit-scrollbar-track{background:transparent}

/* ---------- header bar: [title] [meta] [space] [actions] [tabs] ....... [X] ----------
   The close button sits in the top-right corner of the bar, out of the flow, so tabs or actions that wrap never push it to a
   second line. The bar reserves its room with padding-right. */
html body :is(.koprij,.skop){--kop-mid:15px;padding-right:calc(var(--ui-sluit-w) + 12px)}
html body .koprij:not(.groot-overlay>.binnen>.koprij){position:relative}
html body .groot-overlay>.binnen>.koprij{--kop-mid:27px;padding-right:calc(var(--ui-sluit-w) + 28px);min-height:56px}
html body .koprij h2,html body .skop h3{min-width:0;overflow-wrap:anywhere}
/* side panels: the bar sticks to the top of the scrolling panel, like a window's */
html body :is(.kos-kast,.hd-venster,.vl-venster,.mk-venster)>.a-in>.koprij{position:sticky;top:0;z-index:4;margin:-10px -14px 12px;padding:10px calc(var(--ui-sluit-w) + 24px) 10px 14px;
  --kop-mid:25px;background:var(--ui-kopbg);border-bottom:1px solid var(--ui-lijn)}
html body #svenster .skop{position:sticky;top:0;z-index:4;background:var(--ui-kopbg);--kop-mid:27px;padding-right:calc(var(--ui-sluit-w) + 28px)}
html body #sinspect .skop{position:relative}

/* the close button: one red square with an X, top right, for every window */
html body :is(.koprij,.skop) :is([data-act=wSluit],[data-act=pSluit],[data-act=bSluit],[data-act=sSluit],[data-act=sInspectSluit],[data-act=feestSluit],[data-act=vlHStop]),
html body #uxCodex .ux-sluit,html body #mlVenster [data-ml-sluit],html body #mod-venster .mk [data-mod=venster],html body .ui-sluit{
  position:absolute;right:12px;top:calc(var(--kop-mid,15px) - var(--ui-sluit-h) / 2);margin:0;order:99;
  width:var(--ui-sluit-w);height:var(--ui-sluit-h);min-height:0;padding:0!important;font-size:0!important;flex:none;border:0;border-radius:0;cursor:pointer;
  color:#fff;background:linear-gradient(180deg,#be123c,#4c0519);box-shadow:inset 0 1px 0 #ffffff44,inset 0 0 0 1px #fb718566;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transform:none;transition:filter .12s}
html body :is(.koprij,.skop) :is([data-act=wSluit],[data-act=pSluit],[data-act=bSluit],[data-act=sSluit],[data-act=sInspectSluit],[data-act=feestSluit],[data-act=vlHStop])::before,
html body #uxCodex .ux-sluit::before,html body #mlVenster [data-ml-sluit]::before,html body #mod-venster .mk [data-mod=venster]::before,html body .ui-sluit::before{
  content:"\2715";font:400 16px/1 "Segoe UI Symbol","Segoe UI",system-ui,sans-serif;font-style:normal;color:#fff}
html body :is(.koprij,.skop) :is([data-act=wSluit],[data-act=pSluit],[data-act=bSluit],[data-act=sSluit],[data-act=sInspectSluit],[data-act=feestSluit],[data-act=vlHStop]):hover,
html body #uxCodex .ux-sluit:hover,html body #mlVenster [data-ml-sluit]:hover,html body #mod-venster .mk [data-mod=venster]:hover,html body .ui-sluit:hover{filter:brightness(1.3);transform:none}
html body :is(.koprij,.skop) :is([data-act=wSluit],[data-act=pSluit],[data-act=bSluit],[data-act=sSluit],[data-act=sInspectSluit],[data-act=feestSluit],[data-act=vlHStop]):focus-visible,
html body #uxCodex .ux-sluit:focus-visible,html body #mlVenster [data-ml-sluit]:focus-visible,html body #mod-venster .mk [data-mod=venster]:focus-visible,html body .ui-sluit:focus-visible{
  outline:none;box-shadow:inset 0 0 0 2px var(--ui-focus),0 0 0 0 transparent}

/* ---------- tabs: one segmented style. Active = violet with a gold underline (the underline is the non-colour cue) ----------
   Modules keep their markup: active is .aan, or an .a-knop without .donker. */
html body :is(.tabs,.prg-nav,.kos-tabs:not(.kos-uit-tabs),.vl-tabs,.eind-tabs,.koprij>.filters)>.a-knop,
html body :is(.wev-tabs:not(.hv-cats),.stabs)>button,html body #uxCodex .ux-tabs>button{
  font:italic 400 12.5px/1.25 "Russo One","Trebuchet MS",sans-serif;letter-spacing:.6px;text-transform:uppercase;white-space:nowrap;
  padding:8px 14px;min-height:34px;color:var(--ui-zacht);border:0;border-radius:0;text-shadow:none;transform:none;filter:none;
  background:linear-gradient(180deg,#ffffff14,#ffffff07);box-shadow:inset 0 -2px 0 #ffffff1a;
  clip-path:polygon(var(--ui-cut-s) 0,100% 0,calc(100% - var(--ui-cut-s)) 100%,0 100%);transition:background .12s,color .12s}
html body :is(.tabs,.prg-nav,.kos-tabs:not(.kos-uit-tabs),.vl-tabs,.eind-tabs,.koprij>.filters)>.a-knop:hover,
html body :is(.wev-tabs:not(.hv-cats),.stabs)>button:hover,html body #uxCodex .ux-tabs>button:hover{background:linear-gradient(180deg,#ffffff24,#ffffff10);color:#fff;transform:none}
html body :is(.tabs,.prg-nav,.kos-tabs:not(.kos-uit-tabs),.vl-tabs,.eind-tabs,.koprij>.filters)>.a-knop:not(.donker),
html body :is(.wev-tabs:not(.hv-cats),.stabs)>button.aan,html body #uxCodex .ux-tabs>button.aan{
  color:#fff;background:linear-gradient(180deg,#7c3aed,#4338ca);box-shadow:inset 0 -3px 0 var(--ui-goud),inset 0 1px 0 #ffffff40}
html body :is(.tabs,.prg-nav,.kos-tabs:not(.kos-uit-tabs),.vl-tabs,.eind-tabs,.koprij>.filters)>.a-knop:focus-visible,
html body :is(.wev-tabs:not(.hv-cats),.stabs)>button:focus-visible,html body #uxCodex .ux-tabs>button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ui-focus)}
html body :is(.tabs,.prg-nav,.kos-tabs:not(.kos-uit-tabs),.vl-tabs,.eind-tabs,.wev-tabs:not(.hv-cats),.stabs,.koprij>.filters){display:flex;gap:4px;align-items:stretch}
html body .stabs>button{flex:1 1 auto}

/* chips: second-level filters inside a window (store categories, furniture categories) */
html body :is(.pr-cats,.wev-tabs.hv-cats,.he-tabs)>button{font:700 13px/1.2 Rajdhani,sans-serif;padding:6px 12px;color:var(--ui-zacht);background:#ffffff0b;border:1px solid #7df9ff33;border-radius:0;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
html body :is(.pr-cats,.wev-tabs.hv-cats,.he-tabs)>button:hover{background:#ffffff18;color:#fff}
html body :is(.pr-cats,.wev-tabs.hv-cats,.he-tabs)>button.aan{background:linear-gradient(180deg,#4338ca,#1e1b4b);color:#fff;border-color:var(--ui-neon)}

/* ---------- buttons: focus ring drawn inside (clip-path hides outlines) ---------- */
html body .a-knop:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ui-focus),inset 0 1px 0 #ffffff55;filter:brightness(1.15)}
html body .a-knop.klein{font-size:12px;padding:6px 11px}
html body .a-slot:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ui-focus),0 0 10px #fde04788}
/* every other control: a 2 px yellow ring with a small gap */
html body :is(button,a[href],input,select,textarea,summary,[tabindex]:not([tabindex="-1"])):focus-visible{outline:2px solid var(--ui-focus);outline-offset:2px}
html body [tabindex="-1"]:focus{outline:none}

/* ---------- lists: rows with a hover tint; the selected row gets a cyan bar on the left (shape, not only colour) ---------- */
html body .qlog .lijst button{min-height:40px;display:flex;align-items:center;gap:6px}
html body .qlog .lijst button .st{margin-left:auto}
html body :is(.qlog .lijst button.aan,.vl-mail.aan,#uxCodex .ux-lijst button.aan){box-shadow:inset 3px 0 0 var(--ui-neon)}
html body .menukop{font-size:12px;letter-spacing:2px}
html body .groot-overlay p.notitie{color:var(--ui-zacht)}

/* ---------- empty and loading states ----------
   js/vensters.js adds .ui-leeg / .ui-laden / .ui-offline to a module's own "No … yet." / "Loading…" line inside a window;
   new code can write them directly: <p class="ui-leeg" data-ic="post">No mail yet.</p> */
html body .ui-leeg{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center!important;
  padding:var(--ui-5) var(--ui-4)!important;margin:var(--ui-2) auto!important;color:var(--ui-zacht)!important;font:600 15px/1.4 Rajdhani,sans-serif!important;font-style:normal!important;
  max-width:440px;grid-column:1/-1}
html body .ui-leeg::before{content:"";flex:none;width:44px;height:44px;border-radius:50%;
  background:#7df9ff12 center/24px 24px no-repeat var(--ui-ic,url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237df9ff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M12 2l5 7-5 13-5-13z'/%3E%3Cpath d='M7 9h10M12 2v20' opacity='.5'/%3E%3C/svg%3E"));
  box-shadow:inset 0 0 0 2px #7df9ff55,0 0 18px #7df9ff22}
html body .ui-leeg[data-ic=post]{--ui-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237df9ff' stroke-width='1.6' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='1'/%3E%3Cpath d='M3 6l9 7 9-7'/%3E%3C/svg%3E")}
html body .ui-leeg[data-ic=quest]{--ui-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237df9ff' stroke-width='1.6' stroke-linejoin='round'%3E%3Cpath d='M6 3h11a2 2 0 0 1 2 2v13a3 3 0 0 1-3 3H7'/%3E%3Cpath d='M6 3a2 2 0 0 0-2 2v2h4V5a2 2 0 0 0-2-2zM7 21a3 3 0 0 0 3-3v-1H4v1a3 3 0 0 0 3 3zM10 8h6M10 12h6'/%3E%3C/svg%3E")}
html body .ui-leeg[data-ic=sociaal]{--ui-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237df9ff' stroke-width='1.6' stroke-linecap='round'%3E%3Ccircle cx='9' cy='8' r='3.5'/%3E%3Cpath d='M2.5 20c.6-3.6 3.3-6 6.5-6s5.9 2.4 6.5 6'/%3E%3Ccircle cx='17' cy='9' r='2.6'/%3E%3Cpath d='M16 14c3 0 5 2 5.5 5'/%3E%3C/svg%3E")}
html body .ui-leeg[data-ic=zoek]{--ui-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237df9ff' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6'/%3E%3Cpath d='M15 15l5.5 5.5'/%3E%3C/svg%3E")}
html body .ui-leeg[data-ic=lijst]{--ui-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237df9ff' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M9 6h11M9 12h11M9 18h11'/%3E%3Ccircle cx='4.5' cy='6' r='1.2'/%3E%3Ccircle cx='4.5' cy='12' r='1.2'/%3E%3Ccircle cx='4.5' cy='18' r='1.2'/%3E%3C/svg%3E")}
html body .ui-leeg.ui-offline{--ui-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fb7185' stroke-width='1.7' stroke-linecap='round'%3E%3Cpath d='M9 7l1.5-1.5a4 4 0 0 1 5.7 5.7L14.5 13M15 17l-1.5 1.5a4 4 0 0 1-5.7-5.7L9.5 11M4 4l16 16'/%3E%3C/svg%3E")}
html body .ui-leeg.ui-offline::before{background-color:#fb718514;box-shadow:inset 0 0 0 2px #fb718566}
html body .ui-leeg.klein{padding:var(--ui-3)!important;font-size:14px!important}
html body .ui-leeg.klein::before{width:34px;height:34px;background-size:18px 18px}
html body .ui-laden{display:flex!important;align-items:center;justify-content:center;gap:10px;color:var(--ui-zacht)!important;font-style:normal!important;padding:var(--ui-4)!important;text-align:center}
html body .ui-laden::before{content:"";flex:none;width:18px;height:18px;border-radius:50%;border:2px solid #7df9ff33;border-top-color:var(--ui-neon);animation:ui-draai .8s linear infinite}
@keyframes ui-draai{to{transform:rotate(360deg)}}
html.minder-beweging .ui-laden::before{animation:none;border-color:var(--ui-neon) #7df9ff33}

/* ---------- dialogs and panels that grew their own look: back onto the shared frame ---------- */
/* the Codex (also in the arena): neon edge, cut corners, Russo title, shared tabs */
html body #uxCodex .ux-paneel{border:2px solid transparent;border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  background:var(--ui-paneel) padding-box,var(--ui-rand) border-box}
html body #uxCodex .ux-kop{position:relative;--kop-mid:27px;padding:12px calc(var(--ui-sluit-w) + 28px) 10px 18px;background:var(--ui-kopbg);border-bottom:1px solid var(--ui-lijn);min-height:56px}
html body #uxCodex .ux-kop h2{font:italic 400 24px "Russo One",sans-serif;letter-spacing:1px;text-transform:uppercase;
  background:linear-gradient(180deg,#fff,#c7d2fe 60%,#a78bfa);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #1e1b4b) drop-shadow(0 0 8px #7c3aed88)}
html body #uxCodex input{border-radius:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);background:#0b1020;padding:8px 14px}
html body #uxCodex .ux-voet button{border-radius:0;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);border:0;padding:8px 16px;
  font:italic 400 13px "Russo One",sans-serif;text-transform:uppercase;letter-spacing:.5px;background:linear-gradient(180deg,#334155,#0f172a);color:#fff}
html body #uxCodex .ux-voet button.goud{background:linear-gradient(180deg,#fbbf24,#b45309);color:#1c1003}
html body #uxCodex .ux-voet span{color:var(--ui-dim)!important}
html body #uxCodex .ux-lijst button{border-radius:0}
html body #uxCodex .ux-lijst small{color:var(--ui-dim)}
/* Feedback (both pages) */
html body #fb-doos{border:2px solid transparent;border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  background:var(--ui-paneel) padding-box,var(--ui-rand) border-box;padding:0 18px 16px}
html body #fb-doos .ui-kop{position:sticky;top:0;z-index:3;display:flex;align-items:center;--kop-mid:26px;margin:0 -18px 12px;padding:12px calc(var(--ui-sluit-w) + 28px) 10px 18px;
  min-height:52px;background:var(--ui-kopbg);border-bottom:1px solid var(--ui-lijn)}
html body #fb-doos .ui-kop h3{margin:0;font:italic 400 22px "Russo One",sans-serif;text-transform:uppercase;letter-spacing:1px}
html body #fb-doos .fb-soorten button,html body #fb-doos .fb-knop,html body #fb-doos textarea{border-radius:0}
html body #fb-doos .fb-soorten button{clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);font:italic 400 12.5px "Russo One",sans-serif;border:0;background:linear-gradient(180deg,#ffffff14,#ffffff07);box-shadow:inset 0 -2px 0 #ffffff1a}
html body #fb-doos .fb-soorten button.aan{background:linear-gradient(180deg,#7c3aed,#4338ca);box-shadow:inset 0 -3px 0 var(--ui-goud)}
html body #fb-doos .fb-knop{clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);font:italic 400 14px "Russo One",sans-serif;padding:9px 18px}
html body #fb-doos :is(.fb-sub,.fb-tel,.fb-voet,details){color:var(--ui-dim)}
html body #fb-doos .fb-shot small{color:var(--ui-dim)!important}
/* the moderator dialogs and the Mod window */
html body .mod-doos,html body #mod-venster{border:2px solid transparent;border-radius:0;background:var(--ui-paneel) padding-box,var(--ui-rand) border-box;
  clip-path:polygon(0 0,calc(100% - 12px) 0,100% 12px,100% 100%,12px 100%,0 calc(100% - 12px))}
html body #mod-venster .mk{position:sticky;top:0;--kop-mid:22px;min-height:44px;padding:8px calc(var(--ui-sluit-w) + 24px) 8px 12px;background:var(--ui-kopbg);border-bottom:1px solid var(--ui-lijn)}
html body #mod-venster .mk b{font-size:16px;text-transform:uppercase}
html body #mod-venster .tabs a{font:italic 400 12px "Russo One",sans-serif;text-transform:uppercase;padding:6px 8px}
html body :is(#mod-venster,.mod-doos) :is(.zw,label){color:var(--ui-dim)}
html body .mod-doos :is(select,textarea,input),html body #mod-venster textarea{border-radius:0}
/* the match log (both pages) */
html body #mlVenster .ml-doos{border:2px solid transparent;border-radius:0;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  background:var(--ui-paneel) padding-box,var(--ui-rand) border-box;font:500 15px/1.45 Rajdhani,system-ui,sans-serif}
html body #mlVenster .ml-kop{position:relative;--kop-mid:26px;min-height:52px;padding:12px calc(var(--ui-sluit-w) + 28px) 10px 18px;background:var(--ui-kopbg);border-bottom:1px solid var(--ui-lijn)}
html body #mlVenster .ml-kop h2{font:italic 400 20px "Russo One",sans-serif;letter-spacing:1px}
html body #mlVenster .ml-k,html body .ml-eind button,html body .ml-k{border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);font:700 13px Rajdhani,sans-serif;padding:6px 12px}
html body #mlVenster :is(.ml-meta span,.ml-sub){color:var(--ui-dim)}
html body .mod-doos{position:relative;--kop-mid:28px}
html body .mod-doos>h3{padding-right:calc(var(--ui-sluit-w) + 8px);min-height:24px}
/* toasts: below the header bar of an open window (desktop), above the MENU row under a phone sheet.
   No :not() inside these :has(): with one, Blink re-checks body:has() on every element added or removed anywhere in the page.
   #app holds one window at a time, so "a .groot-overlay and no .setup-ov" is the same test as ".groot-overlay:not(.setup-ov)". */
@media(min-width:760px){html body:has(#app>.groot-overlay):not(:has(#app>.setup-ov)) #meldingen{top:78px}}
@media(max-width:759px){html body:has(#app>.groot-overlay):not(:has(#app>.setup-ov)) #meldingen,html body:has(#app>.vl-venster,#svenster) #meldingen{top:auto;bottom:calc(var(--micro-ruimte,74px) + 8px);left:12px;right:12px;max-height:30vh}}
/* trade window */
html body #vl-handel{clip-path:var(--schuin)}

/* ---------- the arena's own windows (arena.html, js/ui.js): duel modal, trap prompt, Dust/Fusion lists, end screen ----------
   Presentation only. The end screen's fade-in (js/arena-fx.js: .afx-in with an inline animation-delay of ~1.9 s) is left alone:
   nothing here sets animation, opacity or transform on #einde .overlay. */
html body.a-ui :is(#modal,#einde) .overlay{background:radial-gradient(ellipse at center,#05060daa,#03040ee6)}
html body.a-ui :is(#modal,#einde) .venster{position:relative;border:2px solid transparent;border-radius:0;box-shadow:0 18px 50px #000c;
  background:var(--ui-paneel) padding-box,var(--ui-rand) border-box;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  padding:14px 18px 16px;gap:12px;color:var(--ui-tekst);font-family:Rajdhani,"Segoe UI",sans-serif;--kop-mid:26px}
/* the header bar: a title row with the divider, the close button top right */
html body.a-ui #modal .venster>h2{align-self:stretch;margin:-14px -18px 0;padding:12px calc(var(--ui-sluit-w) + 28px) 10px 18px;min-height:52px;box-sizing:border-box;
  display:flex;align-items:center;background:var(--ui-kopbg);border-bottom:1px solid var(--ui-lijn);text-align:left;
  font:italic 400 20px/1.2 "Russo One",sans-serif;letter-spacing:1px;text-transform:uppercase}
html body.a-ui #modal .venster:not(:has(>h2)){padding-top:56px}
html body.a-ui #modal .venster .acts .knop[data-act=sluitknop]{position:absolute;right:12px;top:calc(var(--kop-mid) - var(--ui-sluit-h) / 2);width:var(--ui-sluit-w);height:var(--ui-sluit-h);
  min-height:0;padding:0;font-size:0;border:0;border-radius:0;color:#fff;background:linear-gradient(180deg,#be123c,#4c0519);box-shadow:inset 0 1px 0 #ffffff44,inset 0 0 0 1px #fb718566;
  clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px)}
html body.a-ui #modal .venster .acts .knop[data-act=sluitknop]::before{content:"\2715";font:400 16px/1 "Segoe UI Symbol","Segoe UI",system-ui,sans-serif;color:#fff}
html body.a-ui #modal .venster .acts .knop[data-act=sluitknop]:hover{filter:brightness(1.3)}
html body.a-ui #modal .venster .acts .knop[data-act=sluitknop]:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ui-focus)}
html body.a-ui #modal .venster .acts:not(:has(>:not([data-act=sluitknop]))){display:contents}
/* the result: a big title, gold for the way on */
html body.a-ui #einde .venster{max-width:480px;padding:22px 22px 18px}
html body.a-ui #einde .venster>h2{font:italic 400 clamp(34px,6vw,46px)/1.05 "Russo One",sans-serif;letter-spacing:2px;text-transform:uppercase;
  background:linear-gradient(180deg,#fff,#fde68a 55%,#f59e0b);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 0 #1e1b4b) drop-shadow(0 0 14px #f59e0b66)}
html body.a-ui #einde .venster .acts>.knop:not(.tweede):first-child,html body.a-ui #einde .venster .acts>a.knop:not(.tweede):first-child{background:linear-gradient(180deg,#fbbf24,#b45309);color:#1c1003;text-shadow:none}
html body.a-ui :is(#modal,#einde) .venster .notitie{color:var(--ui-zacht);font-size:14px;line-height:1.45}
html body.a-ui :is(#modal,#einde) .venster .notitie:empty{display:none}
/* buttons: the shared .a-knop kinds (default indigo, .tweede = secondary, .rood = danger) */
html body.a-ui :is(#modal,#einde) .venster .acts .knop{font:italic 400 14px/1.2 "Russo One",sans-serif;letter-spacing:.5px;text-transform:uppercase;min-height:42px;padding:10px 18px;border:0;
  color:#fff;background:linear-gradient(180deg,#4f46e5,#312e81);box-shadow:inset 0 1px 0 #ffffff55;text-shadow:0 1px 0 #0008}
html body.a-ui :is(#modal,#einde) .venster .acts .knop.tweede{background:linear-gradient(180deg,#334155,#0f172a)}
html body.a-ui :is(#modal,#einde) .venster .acts .knop.rood{background:linear-gradient(180deg,#f43f5e,#9f1239)}
html body.a-ui :is(#modal,#einde) .venster .acts .knop:hover:not(:disabled){filter:brightness(1.2)}
html body.a-ui :is(#modal,#einde) .venster .acts .knop:disabled{filter:grayscale(1) brightness(.6)}
html body.a-ui :is(#modal,#einde) .venster .knop:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--ui-focus)}
html body.a-ui :is(#modal,#einde) .venster .ml-eind button{min-height:32px}
/* the duel log panel: the neon frame and the shared close button */
html body.arena-ui #logla{border:2px solid transparent;border-radius:0;background:var(--ui-paneel) padding-box,var(--ui-rand) border-box;clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,10px 100%,0 calc(100% - 10px))}
html body.arena-ui #logla .logdicht{width:32px;height:30px;border:0;border-radius:0;font-size:0;background:linear-gradient(180deg,#be123c,#4c0519);clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px)}
html body.arena-ui #logla .logdicht::before{content:"\2715";font:400 14px/1 "Segoe UI Symbol","Segoe UI",system-ui,sans-serif;color:#fff}
/* notices (js/net.js melding): the world's toast look */
html body .melding{border:0;border-radius:0;padding:9px 18px;font:700 15px/1.35 Rajdhani,sans-serif;color:var(--ui-tekst);
  background:linear-gradient(160deg,rgba(10,14,34,.95),rgba(22,14,48,.95));box-shadow:inset 0 0 0 1px #7df9ff66,0 8px 24px #000a;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
/* the battleground turn timer (js/slagveld.js): never wider than the screen */
html body #slagDuel{max-width:calc(100vw - 16px);white-space:normal;line-height:1.3}
@media(max-width:759px){html body #slagDuel{width:max-content;bottom:calc(6px + var(--sa-b,0px))}
  html body.a-ui #modal .overlay,html body.a-ui #einde .overlay{padding:8px}}

/* ---------- the raid frame on a phone: under the quest strip and the Den bar, never over them (like the party frames) ---------- */
@media(max-width:759px){html body #raid-frame,html body.doelstrip-aan #raid-frame{top:calc(184px + var(--sa-t,0px))}
  /* the 44 px minimap buttons (js/kaart.js) take x from 100vw - 228 px down to y 176: the quest strip and party frames stop
     3 px short of them, the notifications start under them */
  html body #doelstrip,html body #groepframes{width:min(140px,calc(100vw - 243px))}
  html body:not(.in-den) #meldingen{top:calc(182px + var(--sa-t,0px))}
  html body.in-den #raid-frame{top:calc(var(--den-onder,220px) + 6px)}
  html body #raid-frame{width:min(206px,calc(100vw - 168px))}
  html body #raid-frame .rf-rollen .a-knop{font-size:10px;letter-spacing:-.4px;padding:4px 0;min-height:36px}
  html body.in-den #doelstrip{display:none}}
@media(pointer:coarse){html body #raid-frame .rf-rollen .a-knop,html body #raid-frame .rf-knoppen .a-knop{min-height:44px}}

/* ---------- contrast: the lowest text colour is #a5b4fc on the panels; three texts were #64748b (3.9:1) ---------- */
html body #eventlog .ev-t{color:#8b93c9}
html body [style*="color:#64748b"]{color:#8b93c9!important}

/* ---------- large text (Settings > Accessibility): panels and dialogs that css/invoer.css did not list ---------- */
html.groot-tekst :is(.kos-kast,.hd-venster,.vl-venster)>.a-in>*,html.groot-tekst #uxCodex :is(.ux-kop,.ux-lijst,.ux-inhoud,.ux-voet),
html.groot-tekst :is(#fb-doos,.mod-doos,#mod-venster,#mlVenster .ml-doos){zoom:1.15}

/* ---------- phone (< 760 px, and a phone held sideways): every window is a full-screen sheet ---------- */
@media(max-width:759px),(max-height:499px) and (orientation:landscape){
  html body .groot-overlay:not(.setup-ov){padding:0!important;background:#05060d;overflow:hidden auto}
  html body .groot-overlay:not(.setup-ov)>.binnen{max-width:none!important;width:100%;min-height:100%;margin:0;clip-path:none;
    border-width:0;border-top:2px solid #7df9ff;padding:0 calc(12px + var(--sa-r,0px)) calc(16px + var(--sa-b,0px)) calc(12px + var(--sa-l,0px));background:var(--ui-paneel)}
  html body .groot-overlay:not(.setup-ov)>.binnen>.koprij{--kop-mid:calc(25px + var(--sa-t,0px));margin:0 calc(-12px - var(--sa-r,0px)) 12px calc(-12px - var(--sa-l,0px));
    padding:calc(10px + var(--sa-t,0px)) calc(var(--ui-sluit-w) + 22px + var(--sa-r,0px)) 10px calc(12px + var(--sa-l,0px));row-gap:8px;min-height:52px}
  html body .groot-overlay>.binnen>.koprij [data-act=wSluit],html body .groot-overlay>.binnen>.koprij [data-act=pSluit],html body .groot-overlay>.binnen>.koprij [data-act=bSluit]{right:calc(10px + var(--sa-r,0px))}
  /* tabs get their own row and scroll sideways instead of wrapping */
  html body .koprij>:is(.tabs,.prg-nav,.kos-tabs,.vl-tabs,.wev-tabs,.filters,.wk-tabs),html body #uxCodex .ux-tabs,html body #svenster .stabs{
    order:50;flex:1 1 100%;flex-wrap:nowrap!important;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-right:calc(-1 * var(--ui-sluit-w) - 10px);padding-bottom:2px}
  html body .koprij>:is(.tabs,.prg-nav,.kos-tabs,.vl-tabs,.wev-tabs,.filters,.wk-tabs)::-webkit-scrollbar,html body #uxCodex .ux-tabs::-webkit-scrollbar,html body #svenster .stabs::-webkit-scrollbar{display:none}
  html body .koprij>:is(.tabs,.prg-nav,.kos-tabs,.vl-tabs,.wev-tabs,.filters)>*{flex:none}
  html body #svenster .stabs>button{flex:1 0 auto}
  html body #svenster .stabs{margin-right:0}
  html body .koprij>.ruimte{flex:1 1 0}
  /* side panels: Wardrobe, Mounts and Pets stay bottom sheets (your Binder shows above them); Exchange, Mailbox, Social full sheets */
  html body :is(.kos-kast,.hd-venster){left:0!important;right:0!important;width:auto!important;padding:2px 0 0;clip-path:none}
  html body :is(.kos-kast,.hd-venster)>.a-in{clip-path:none;padding-left:calc(12px + var(--sa-l,0px));padding-right:calc(12px + var(--sa-r,0px))}
  html body :is(.kos-kast,.hd-venster)>.a-in>.koprij{margin-left:calc(-12px - var(--sa-l,0px));margin-right:calc(-12px - var(--sa-r,0px))}
  html body .vl-venster{top:0!important;left:0!important;right:0!important;width:auto!important;transform:none!important;padding:2px 0 0;clip-path:none}
  html body .vl-venster>.a-in{clip-path:none;padding-top:calc(10px + var(--sa-t,0px))}
  html body .vl-venster>.a-in>.koprij{margin-top:calc(-10px - var(--sa-t,0px));padding-top:calc(10px + var(--sa-t,0px));--kop-mid:calc(25px + var(--sa-t,0px))}
  html body #svenster,html body #sinspect{top:0!important;left:0!important;right:0!important;bottom:var(--micro-ruimte,74px);width:auto!important;transform:none!important;padding:2px 0 0;clip-path:none}
  html body #svenster>.a-in,html body #sinspect>.a-in{clip-path:none;height:100%;max-height:none!important;box-sizing:border-box;padding-top:calc(12px + var(--sa-t,0px))}
  html body #svenster .skop{margin-top:calc(-12px - var(--sa-t,0px));padding-top:calc(12px + var(--sa-t,0px));--kop-mid:calc(27px + var(--sa-t,0px))}
  /* dialogs: the width of the screen, scrolling inside */
  html body #uxCodex{align-items:stretch}
  html body #uxCodex .ux-paneel{width:100%;height:100%;clip-path:none;border-width:2px 0 0;padding-top:var(--sa-t,0px)}
  html body #uxCodex .ux-kop input{order:60;flex:1 1 100%}
  html body #mlVenster{padding:0}html body #mlVenster .ml-doos{width:100%;height:100%;clip-path:none;border-width:2px 0 0}
  /* the Weekly Bazaar, the Binding Table and Foils & Borders (js/markt.js, js/kaartsier.js): a full sheet above the Menu button */
  html body .mk-venster{top:0!important;left:0!important;right:0!important;bottom:var(--micro-ruimte,74px)!important;width:auto!important;max-height:none!important;padding:2px 0 0;clip-path:none}
  html body .mk-venster>.a-in{clip-path:none;height:100%;max-height:none!important;box-sizing:border-box;padding-top:calc(10px + var(--sa-t,0px))}
  html body .mk-venster>.a-in>.koprij{margin-top:calc(-10px - var(--sa-t,0px));padding-top:calc(10px + var(--sa-t,0px));--kop-mid:calc(25px + var(--sa-t,0px))}
  html body #fb-ov,html body .mod-overlay{padding:8px}
  html body #mod-venster{top:0;left:0;right:0;width:auto;max-height:calc(100dvh - var(--micro-ruimte,74px));clip-path:none}
  html body .koprij h2{font-size:20px}
}
/* touch: every control at least 44 px */
@media(pointer:coarse){
  html body :is(.tabs,.prg-nav,.kos-tabs:not(.kos-uit-tabs),.vl-tabs,.eind-tabs,.koprij>.filters)>.a-knop,
  html body :is(.wev-tabs:not(.hv-cats),.wev-tabs,.stabs,.pr-cats)>button,html body #uxCodex .ux-tabs>button{min-height:44px}
  html body .qlog .lijst button,html body #uxCodex .ux-lijst button,html body .vl-mail{min-height:44px}
  html body.a-ui :is(#modal,#einde) .venster .acts .knop,html body.a-ui :is(#modal,#einde) .venster .ml-eind button{min-height:44px}
  html body label.sz-sub{min-height:44px}
  html body .pr-held2 a{display:inline-block;padding:14px 0;margin:-14px 0}     /* a text link keeps its line, the tap area is 44 px tall */
  html body #mlVenster summary{padding:12px 0}html body #mlVenster .co-voet label{min-height:44px}
  html body #mlVenster .co-tips a{display:inline-block;padding:13px 0;margin:-13px 0;justify-self:start}
}