/* ---------- Shardbound anime UI: slanted panels, neon edges, bold italic titles ---------- */
:root{--neon:#7df9ff;--neon2:#ff4fd8;--goudneon:#ffd34d;--paneelA:rgba(10,14,34,.86);--paneelB:rgba(22,14,48,.86);
  --schuin:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,14px 100%,0 calc(100% - 14px));
  --kop:"Russo One","Trebuchet MS",sans-serif;--tekstfont:"Rajdhani","Segoe UI",system-ui,sans-serif}
.a-ui,.a-ui *{font-family:var(--tekstfont)}
/* panel with a neon edge: the outer element is the edge, ::before the inside */
.a-paneel{position:relative;clip-path:var(--schuin);background:linear-gradient(135deg,var(--neon),#5b6cff 45%,var(--neon2));padding:2px;color:#eef2ff}
.a-paneel>.a-in{clip-path:var(--schuin);background:linear-gradient(160deg,var(--paneelA),var(--paneelB));padding:10px 14px;height:100%;
  background-image:linear-gradient(160deg,var(--paneelA),var(--paneelB)),repeating-linear-gradient(115deg,rgba(255,255,255,.035) 0 2px,transparent 2px 9px);background-blend-mode:normal}
.a-titel{font-family:var(--kop);font-style:italic;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)}
.a-knop{position:relative;border:0;cursor:pointer;font-family:var(--kop);font-style:italic;font-size:14px;letter-spacing:.5px;text-transform:uppercase;color:#fff;
  padding:9px 18px;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);background:linear-gradient(180deg,#4f46e5,#312e81);
  box-shadow:inset 0 1px 0 #ffffff55;transition:filter .15s,transform .15s;text-shadow:0 1px 0 #0008}
.a-knop:hover{filter:brightness(1.25);transform:translateY(-1px)}
.a-knop:active{transform:translateY(1px)}
.a-knop:disabled{filter:grayscale(1) brightness(.6);cursor:not-allowed}
.a-knop.goud{background:linear-gradient(180deg,#fbbf24,#b45309);color:#1c1003;text-shadow:none}
.a-knop.rood{background:linear-gradient(180deg,#f43f5e,#9f1239)}
.a-knop.groen{background:linear-gradient(180deg,#22c55e,#166534)}
.a-knop.donker{background:linear-gradient(180deg,#334155,#0f172a)}
.a-knop.groot{font-size:18px;padding:13px 28px}
.a-knop kbd{font-family:var(--tekstfont);background:#0006;border-radius:4px;padding:0 6px;margin-right:6px;font-style:normal}
/* bars */
.a-balk{height:8px;background:#0008;clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%);overflow:hidden}
.a-balk i{display:block;height:100%;background:linear-gradient(90deg,#22d3ee,#a78bfa,#f472b6);box-shadow:0 0 10px #a78bfa}
/* big splash: zone names, quest complete, level up */
.a-splash{position:fixed;left:0;right:0;top:22%;text-align:center;pointer-events:none;z-index:60;animation:a-splash 3.2s ease-out forwards}
.a-splash .groot{font-family:var(--kop);font-style:italic;font-size:clamp(34px,7vw,72px);letter-spacing:3px;text-transform:uppercase;color:#fff;
  -webkit-text-stroke:2px #1e1b4b;text-shadow:0 0 18px var(--kleur,#a78bfa),0 0 40px var(--kleur,#a78bfa),4px 4px 0 #1e1b4b}
.a-splash .klein{font-family:var(--tekstfont);font-weight:700;font-size:clamp(14px,2.4vw,20px);letter-spacing:4px;text-transform:uppercase;color:#e0e7ff;margin-top:4px;text-shadow:0 2px 6px #000}
.a-splash .streep{height:3px;width:min(520px,80vw);margin:10px auto;background:linear-gradient(90deg,transparent,var(--kleur,#a78bfa),transparent);box-shadow:0 0 12px var(--kleur,#a78bfa)}
.a-splash::before{content:"";position:absolute;left:0;right:0;top:-40px;bottom:-40px;z-index:-1;
  background:repeating-linear-gradient(100deg,transparent 0 22px,rgba(255,255,255,.05) 22px 24px);mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent);-webkit-mask:linear-gradient(90deg,transparent,#000 20%,#000 80%,transparent)}
@keyframes a-splash{0%{opacity:0;transform:scale(1.25) skewX(-8deg)}10%{opacity:1;transform:scale(1) skewX(-8deg)}80%{opacity:1}100%{opacity:0;transform:translateY(-14px) skewX(-8deg)}}
/* visual-novel dialogue box */
.a-dialoog{position:fixed;left:50%;bottom:18px;transform:translateX(-50%);width:min(760px,calc(100vw - 24px));z-index:45}
.a-dialoog .naamtag{display:inline-block;margin-left:22px;margin-bottom:-2px;padding:5px 18px;font-family:var(--kop);font-style:italic;font-size:16px;color:#fff;
  background:linear-gradient(90deg,#7c3aed,#db2777);clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);text-shadow:0 1px 0 #0008}
.a-dialoog .naamtag small{font-family:var(--tekstfont);font-style:normal;font-size:12px;opacity:.85;margin-left:8px}
.a-dialoog .a-in{padding:16px 20px 14px;font-size:17px;line-height:1.45;min-height:110px}
.a-dialoog .boog{font-family:var(--kop);font-size:12px;letter-spacing:2px;color:var(--neon);text-transform:uppercase}
.a-dialoog h3{margin:2px 0 6px;font-family:var(--kop);font-style:italic;font-size:20px}
.a-dialoog .doelen{margin:8px 0 0;padding:0;list-style:none;font-size:15px;color:#c7d2fe}
.a-dialoog .doelen li::before{content:"◆ ";color:var(--goudneon)}
.a-dialoog .beloning{margin-top:8px;font-size:14px;color:var(--goudneon)}
.a-dialoog .rij{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;margin-top:12px}
.a-dialoog .questkeuze{display:block;width:100%;text-align:left;margin:6px 0;background:#ffffff0d;border:1px solid #ffffff22;color:#fff;padding:9px 12px;font-size:16px;cursor:pointer;clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%)}
.a-dialoog .questkeuze:hover{background:#ffffff1f}
.a-dialoog .questkeuze b{color:var(--goudneon);margin-right:6px}
@media(max-width:600px){.a-dialoog .a-in{font-size:15px}}

/* ---------- world HUD: square icon slots (micro menu, action bar) and a WoW-style tooltip ---------- */
.a-slot{position:relative;flex:none;width:32px;height:32px;padding:5px;border:0;cursor:pointer;color:#a5f3fc;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#1e1b4b,#0b1020);box-shadow:inset 0 0 0 1px #7df9ff66,inset 0 0 10px #000;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);transition:filter .12s,transform .12s}
.a-slot svg{width:100%;height:100%;display:block;pointer-events:none}
.a-slot:hover{filter:brightness(1.35);color:#fff}
.a-slot:active{transform:translateY(1px)}
.a-slot.aan{color:#fde68a;background:linear-gradient(160deg,#5b21b6,#1e1b4b);box-shadow:inset 0 0 0 2px var(--goudneon),0 0 10px #fbbf2488}
.a-slot.uit{filter:grayscale(.8) brightness(.55)}
.a-slot .toets{position:absolute;right:2px;bottom:0;font:700 9px var(--tekstfont);color:#e0e7ff;text-shadow:0 0 2px #000,0 0 2px #000;pointer-events:none}
.a-slot.groot{width:46px;height:46px;padding:9px}
.a-slot.groot .toets{font-size:11px;right:5px;bottom:1px}
.a-slot.nieuw::after{content:"";position:absolute;top:3px;right:3px;width:7px;height:7px;border-radius:50%;background:#fde047;box-shadow:0 0 6px #fde047}
.a-tip{position:fixed;z-index:90;pointer-events:none;max-width:260px;padding:6px 10px;background:rgba(8,10,28,.96);border:1px solid #7df9ff88;box-shadow:0 4px 16px #000a;color:#fff;font:700 14px var(--tekstfont);display:none}
.a-tip small{display:block;font-weight:600;font-size:12px;color:#a5b4fc}
.a-tip .k{color:#fde68a;margin-left:6px}

/* ---------- the arena HUD in the same anime style ---------- */
.arena-ui #hud .info,.arena-ui #hud .fasebalk{border:0;border-radius:0;clip-path:var(--schuin);
  background:linear-gradient(160deg,rgba(10,14,34,.9),rgba(30,16,60,.9));box-shadow:inset 0 0 0 2px #7df9ff55}
.arena-ui #hud .info .naam{font-family:var(--kop);font-style:italic}
.arena-ui #hud .kern b{font-family:var(--kop)}
.arena-ui #hud .fase{border-radius:0;clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);font-weight:700}
.arena-ui #hud .fase.aan{background:linear-gradient(90deg,#7df9ff,#a78bfa)}
.arena-ui .knop{border-radius:0;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);font-family:var(--kop);font-style:italic;text-transform:uppercase;letter-spacing:.5px}
.arena-ui .venster{border-radius:0;clip-path:var(--schuin);background:linear-gradient(160deg,#0b1024f2,#1d1240f2);box-shadow:inset 0 0 0 2px #7df9ff66}
.arena-ui .venster h2{font-family:var(--kop);font-style:italic;text-transform:uppercase}
.arena-ui #roep .naam{font-family:var(--kop);font-style:italic;text-transform:uppercase;-webkit-text-stroke:1.5px #1e1b4b}
.arena-ui .chip3d{font-family:var(--kop);font-style:italic;text-transform:uppercase;border-radius:0;clip-path:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%)}
/* big windows stop above the micro menu (wereld.html measures it into --micro-ruimte) */
html body .groot-overlay{bottom:var(--micro-ruimte,0px)}