/*! ArxDa SDK v1 · © 2026 ArxDa. All rights reserved. */
/* The shared ArxDa account dialog (.ax-root) and header chip (.ax-chip).
   Tint it per game by overriding the --ax-* variables on :root in the game's own CSS (they win over the
   zero-specificity defaults below), or start from the light preset with <html data-ax-theme="light">. */

:where(:root){
  --ax-font:'Nunito','Segoe UI',system-ui,-apple-system,Roboto,sans-serif;
  --ax-bg:#17133f;            /* dialog card */
  --ax-bg-2:#241c5c;          /* top of the card's gradient */
  --ax-text:#f5f3ff;
  --ax-muted:#bfbbe6;
  --ax-line:rgba(255,255,255,.14);
  --ax-field:rgba(255,255,255,.07);
  --ax-field-line:rgba(255,255,255,.24);
  --ax-accent:#7454f5;        /* selected tab, avatar ring, XP bar start */
  --ax-on-accent:#fff;
  --ax-accent-2:#29d3ff;      /* XP bar end */
  --ax-focus:#29d3ff;         /* keyboard focus ring */
  --ax-btn:#ffc83d;           /* main button */
  --ax-btn-text:#2a1a00;
  --ax-gold:#ffd54a;          /* level badge */
  --ax-gold-text:#2a1a00;
  --ax-ok:#5ee6a0;
  --ax-bad:#ffc2cd;
  --ax-bad-bg:rgba(255,77,109,.16);
  --ax-bad-line:rgba(255,120,145,.45);
  --ax-backdrop:rgba(6,5,22,.68);
  --ax-radius:24px;
  --ax-shadow:0 30px 80px rgba(0,0,0,.55);
  --ax-chip-bg:rgba(255,255,255,.1);
  --ax-chip-line:rgba(255,255,255,.26);
  --ax-chip-text:#fff;
}
:where(:root[data-ax-theme="light"]){
  --ax-bg:#fff;
  --ax-bg-2:#f1edff;
  --ax-text:#2b2350;
  --ax-muted:#5f5987;
  --ax-line:#e4def8;
  --ax-field:#f7f5ff;
  --ax-field-line:#cfc6f1;
  --ax-accent:#6c4cf5;
  --ax-accent-2:#2f8cff;
  --ax-focus:#6c4cf5;
  --ax-btn:#6c4cf5;
  --ax-btn-text:#fff;
  --ax-gold:#ffc23d;
  --ax-ok:#13834a;
  --ax-bad:#b42334;
  --ax-bad-bg:#ffeaec;
  --ax-bad-line:#ffc2c8;
  --ax-backdrop:rgba(36,28,80,.45);
  --ax-shadow:0 30px 70px rgba(43,35,80,.3);
  --ax-chip-bg:#fff;
  --ax-chip-line:#e4def8;
  --ax-chip-text:#2b2350;
}

/* ---------- overlay + reset (games' own button/input/heading rules must not leak in) ---------- */
html.ax-lock{overflow:hidden}
.ax-root{position:fixed;top:0;right:0;bottom:0;left:0;z-index:2147483000;display:flex;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:max(16px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));
  background:var(--ax-backdrop);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:var(--ax-text);font:400 16px/1.45 var(--ax-font);text-align:left;letter-spacing:normal;-webkit-text-size-adjust:100%;text-size-adjust:100%;-webkit-tap-highlight-color:transparent;animation:ax-fade .18s ease}
.ax-root,.ax-root *,.ax-root *::before,.ax-root *::after,.ax-chip,.ax-chip *{box-sizing:border-box}
.ax-root div,.ax-root p,.ax-root h2,.ax-root h3,.ax-root ul,.ax-root li,.ax-root form,.ax-root label,.ax-root span,.ax-root b,.ax-root a,.ax-root button,.ax-root input{
  margin:0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;text-shadow:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:none;text-decoration:none;
  text-align:inherit;width:auto;height:auto;min-width:0;max-width:none;min-height:0;max-height:none;float:none;position:static;transform:none;filter:none;opacity:1;outline:0}
.ax-root ul{list-style:none}
.ax-root svg{display:block;max-width:none}
.ax-root :focus{outline:3px solid var(--ax-focus);outline-offset:2px}
.ax-root :focus:not(:focus-visible){outline:0}
.ax-root .ax-card:focus{outline:0}
.ax-root .ax-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ---------- card ---------- */
.ax-root .ax-card{position:relative;width:100%;max-width:412px;margin:auto;padding:18px 22px 22px;border:1px solid var(--ax-line);border-radius:var(--ax-radius);
  background:var(--ax-bg) linear-gradient(180deg,var(--ax-bg-2),var(--ax-bg) 150px) no-repeat;box-shadow:var(--ax-shadow);animation:ax-in .24s cubic-bezier(.2,.8,.2,1)}
.ax-root .ax-head{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.ax-root .ax-logo{display:block;flex:none;width:42px;height:42px;border-radius:10px;box-shadow:0 6px 14px rgba(116,84,245,.35);
  background:url(/assets/img/icon.svg) center/100% no-repeat}
.ax-root .ax-ht{flex:1 1 0;min-width:0}
.ax-root .ax-title{font-size:19px;font-weight:900;line-height:1.2}
.ax-root .ax-sub{margin-top:1px;color:var(--ax-muted);font-size:13.5px;font-weight:700;line-height:1.3}
.ax-root .ax-x{flex:none;display:flex;align-items:center;justify-content:center;width:44px;height:44px;margin:-4px -10px 0 0;border-radius:50%;color:var(--ax-muted);cursor:pointer;transition:background-color .15s,color .15s}
.ax-root .ax-x:hover{background:var(--ax-field);color:var(--ax-text)}
.ax-root .ax-ico{width:22px;height:22px;flex:none;fill:none;stroke:currentColor;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round}
.ax-root .ax-ico.ax-solid{fill:currentColor;stroke:none}

/* ---------- sign in / create account ---------- */
.ax-root .ax-seg{display:flex;gap:4px;margin-bottom:16px;padding:4px;border:1px solid var(--ax-line);border-radius:999px;background:var(--ax-field)}
.ax-root .ax-seg button{flex:1 1 0;min-height:42px;padding:6px 10px;border-radius:999px;color:var(--ax-muted);font-size:15px;font-weight:800;line-height:1.15;text-align:center;cursor:pointer;transition:background-color .15s,color .15s}
.ax-root .ax-seg button:hover{color:var(--ax-text)}
.ax-root .ax-seg button[aria-pressed="true"]{background:var(--ax-accent);color:var(--ax-on-accent);box-shadow:0 4px 12px rgba(0,0,0,.18)}
.ax-root .ax-field{margin-bottom:14px}
.ax-root .ax-lab{display:block;margin-bottom:6px;font-size:14.5px;font-weight:800}
.ax-root .ax-in{display:block;width:100%;height:50px;padding:0 14px;border:2px solid var(--ax-field-line);border-radius:14px;background:var(--ax-field);color:var(--ax-text);
  font:700 16px/1.2 var(--ax-font);-webkit-appearance:none;appearance:none;transition:border-color .15s}
.ax-root .ax-in:hover{border-color:var(--ax-muted)}
.ax-root .ax-in:focus{border-color:var(--ax-focus);outline:3px solid var(--ax-focus);outline-offset:1px}
.ax-root .ax-in[aria-invalid="true"]{border-color:var(--ax-bad-line);background:var(--ax-bad-bg)}
.ax-root .ax-in:-webkit-autofill{-webkit-box-shadow:0 0 0 40px var(--ax-bg) inset;-webkit-text-fill-color:var(--ax-text);caret-color:var(--ax-text)}
.ax-root .ax-pw{position:relative}
.ax-root .ax-pw .ax-in{padding-right:52px}
.ax-root .ax-eye{position:absolute;top:3px;right:3px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;border-radius:11px;color:var(--ax-muted);cursor:pointer}
.ax-root .ax-eye:hover,.ax-root .ax-eye[aria-pressed="true"]{color:var(--ax-text)}
.ax-root .ax-hint{margin-top:6px;color:var(--ax-muted);font-size:13.5px;font-weight:700;line-height:1.35}
.ax-root .ax-rules{display:grid;gap:5px;margin:-2px 0 12px;padding:11px 14px;border-radius:14px;background:var(--ax-field)}
.ax-root .ax-rule{display:flex;align-items:center;gap:9px;color:var(--ax-muted);font-size:14px;font-weight:700;line-height:1.3}
.ax-root .ax-rule .ax-ico{width:18px;height:18px}
.ax-root .ax-rule .ax-i-ok,.ax-root .ax-rule.ax-done .ax-i-no{display:none}
.ax-root .ax-rule.ax-done .ax-i-ok{display:block;color:var(--ax-ok);stroke-width:3}
.ax-root .ax-rule.ax-done{color:var(--ax-text)}
.ax-root .ax-tip{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;padding:10px 12px;border:1.5px dashed var(--ax-line);border-radius:14px;color:var(--ax-muted);font-size:13.5px;font-weight:700;line-height:1.35}
.ax-root .ax-tip .ax-ico{width:20px;height:20px;color:var(--ax-gold)}

/* ---------- messages ---------- */
.ax-root .ax-alert p,.ax-root .ax-status p{display:flex;align-items:flex-start;gap:9px;margin-bottom:14px;padding:11px 13px;border-radius:14px;font-size:14.5px;font-weight:800;line-height:1.35}
.ax-root .ax-alert .ax-ico,.ax-root .ax-status .ax-ico{width:20px;height:20px;margin-top:-1px}
.ax-root .ax-bad{border:1.5px solid var(--ax-bad-line);background:var(--ax-bad-bg);color:var(--ax-bad)}
.ax-root .ax-status .ax-ok{padding:0;color:var(--ax-ok)}
.ax-root .ax-status .ax-warn{padding:0;color:var(--ax-muted)}
.ax-root .ax-load{display:flex;flex-direction:column;align-items:center;gap:14px;padding:34px 0 30px;color:var(--ax-muted);font-weight:800}
.ax-root .ax-spin{display:inline-block;flex:none;width:18px;height:18px;border:3px solid currentColor;border-right-color:transparent;border-radius:50%;animation:ax-spin .8s linear infinite}
.ax-root .ax-load .ax-spin{width:30px;height:30px;color:var(--ax-accent-2)}

/* ---------- buttons ---------- */
.ax-root .ax-btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;min-height:52px;padding:10px 20px;border-radius:999px;font-size:16.5px;font-weight:900;line-height:1.15;text-align:center;cursor:pointer;
  transition:transform .15s ease,filter .15s ease,background-color .15s,border-color .15s}
.ax-root .ax-btn + .ax-btn{margin-top:10px}
.ax-root .ax-primary{background:var(--ax-btn);color:var(--ax-btn-text);box-shadow:inset 0 -3px 0 rgba(0,0,0,.16),0 8px 20px rgba(0,0,0,.18)}
.ax-root .ax-primary:hover{filter:brightness(1.06)}
.ax-root .ax-primary:active{transform:translateY(1px)}
.ax-root .ax-ghost{border:2px solid var(--ax-line);color:var(--ax-text)}
.ax-root .ax-ghost:hover{border-color:var(--ax-muted);background:var(--ax-field)}
.ax-root .ax-ghost .ax-ico{width:20px;height:20px}
.ax-root .ax-link{display:block;min-height:44px;margin:8px auto 0;padding:10px 16px;border-radius:999px;color:var(--ax-muted);font-size:15px;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.ax-root .ax-link:hover{color:var(--ax-text)}
.ax-root .ax-link.ax-busy{display:flex;align-items:center;gap:8px;text-decoration:none}
.ax-root [aria-disabled="true"]{opacity:.62;cursor:not-allowed}
.ax-root .ax-busy{cursor:progress}

/* ---------- signed in ---------- */
.ax-root .ax-me{display:flex;align-items:center;gap:16px;margin-bottom:16px}
.ax-root .ax-me .ax-av{flex:none;width:84px;height:84px;border-radius:50%;box-shadow:0 0 0 4px var(--ax-bg),0 0 0 7px var(--ax-accent),0 12px 26px rgba(0,0,0,.25)}
.ax-root .ax-me-t{flex:1 1 0;min-width:0}
.ax-root .ax-name{font-size:22px;font-weight:900;line-height:1.15;overflow-wrap:anywhere}
.ax-root .ax-lv{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:4px 12px 4px 8px;border-radius:999px;background:var(--ax-gold);color:var(--ax-gold-text);font-size:14px;font-weight:900;line-height:1.3}
.ax-root .ax-lv .ax-ico{width:17px;height:17px}
.ax-root .ax-xp{margin-bottom:14px}
.ax-root .ax-bar{height:16px;padding:2px;border:1px solid var(--ax-line);border-radius:999px;background:var(--ax-field);overflow:hidden}
.ax-root .ax-fill{display:block;height:100%;min-width:10px;max-width:100%;border-radius:999px;background:linear-gradient(90deg,var(--ax-accent),var(--ax-accent-2));transition:width .5s cubic-bezier(.2,.8,.2,1)}
.ax-root .ax-xp-row{margin-top:7px;color:var(--ax-muted);font-size:14px;font-weight:800}
.ax-root .ax-stats{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.ax-root .ax-stat{padding:10px 13px;border:1px solid var(--ax-line);border-radius:16px;background:var(--ax-field)}
.ax-root .ax-stat span{display:block;color:var(--ax-muted);font-size:12px;font-weight:900;letter-spacing:.07em;text-transform:uppercase}
.ax-root .ax-stat b{display:block;margin-top:2px;font-size:20px;font-weight:900;line-height:1.2}

/* ---------- offline ---------- */
.ax-root .ax-off{padding:6px 4px 18px;text-align:center}
.ax-root .ax-off .ax-big{width:56px;height:56px;margin:0 auto 12px;color:var(--ax-accent-2);stroke-width:1.8}
.ax-root .ax-h{margin-bottom:8px;font-size:21px;font-weight:900;line-height:1.2}
.ax-root .ax-off p{color:var(--ax-muted);font-weight:700}

/* ---------- avatar (anywhere) ---------- */
.ax-av{display:block;flex:none;border-radius:50%}

/* ---------- header chip ---------- */
:root .ax-chip{display:inline-flex;align-items:center;gap:7px;position:relative;float:none;width:auto;min-width:0;height:40px;min-height:0;max-width:100%;max-height:none;margin:0;padding:0 14px 0 5px;border:1.5px solid var(--ax-chip-line);border-radius:999px;background:var(--ax-chip-bg);
  color:var(--ax-chip-text);font:800 14px/1 var(--ax-font);letter-spacing:normal;text-transform:none;text-decoration:none;white-space:nowrap;vertical-align:middle;cursor:pointer;
  text-align:left;text-shadow:none;-webkit-appearance:none;appearance:none;box-shadow:none;-webkit-tap-highlight-color:transparent;transition:transform .15s ease,background-color .15s,border-color .15s}
:root .ax-chip span,:root .ax-chip b{margin:0;padding:0;border:0;background:none;box-shadow:none;text-shadow:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;text-decoration:none;width:auto;height:auto;min-width:0;max-width:none;float:none;position:static}
:root .ax-chip:hover{border-color:var(--ax-accent-2)}
:root .ax-chip:active{transform:scale(.97)}
:root .ax-chip:focus{outline:3px solid var(--ax-focus);outline-offset:2px}
:root .ax-chip:focus:not(:focus-visible){outline:0}
:root .ax-chip .ax-av{width:28px;height:28px}
:root .ax-chip .ax-chip-i{display:flex;flex:none;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--ax-accent);color:var(--ax-on-accent)}
:root .ax-chip .ax-ico{display:block;width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
:root .ax-chip .ax-chip-t{display:inline-flex;align-items:center;min-width:0;font:inherit}
:root .ax-chip .ax-chip-n{max-width:9em;margin-right:7px;overflow:hidden;text-overflow:ellipsis}
:root .ax-chip .ax-chip-t b{font-weight:900}
:root .ax-chip.ax-chip-wait{opacity:.7}
:root .ax-chip.ax-chip-off .ax-av,:root .ax-chip.ax-chip-off .ax-chip-i{opacity:.55;filter:grayscale(.6)}
:root .ax-chip.ax-bump{animation:ax-bump .7s cubic-bezier(.2,.8,.2,1)}

/* ---------- motion, small screens, forced colours ---------- */
@keyframes ax-fade{from{opacity:0}}
@keyframes ax-in{from{opacity:0;transform:translateY(14px) scale(.98)}}
@keyframes ax-spin{to{transform:rotate(360deg)}}
@keyframes ax-bump{35%{transform:scale(1.1)}70%{transform:scale(.98)}}
@media (max-width:380px){
  .ax-root .ax-card{padding:16px 16px 18px;border-radius:20px}
  .ax-root .ax-logo{width:36px;height:36px;border-radius:8.5px}
  .ax-root .ax-title{font-size:17.5px}
  .ax-root .ax-sub{font-size:12.5px}
  .ax-root .ax-seg button{font-size:14px;padding:6px}
  .ax-root .ax-me{gap:13px}
  .ax-root .ax-me .ax-av{width:68px;height:68px}
  .ax-root .ax-name{font-size:19px}
}
@media (max-height:720px){
  .ax-root .ax-head{margin-bottom:14px}
  .ax-root .ax-seg{margin-bottom:12px}
  .ax-root .ax-seg button{min-height:40px}
  .ax-root .ax-field{margin-bottom:11px}
  .ax-root .ax-lab{margin-bottom:5px}
  .ax-root .ax-in{height:48px}
  .ax-root .ax-eye{top:2px}
  .ax-root .ax-hint{margin-top:5px}
  .ax-root .ax-rules{gap:3px;padding:9px 13px;margin-bottom:10px}
  .ax-root .ax-tip{margin-bottom:11px;padding:8px 11px}
}
@media (max-height:520px){
  .ax-root{padding-top:10px;padding-bottom:10px}
  .ax-root .ax-head{margin-bottom:10px}
}
@media (prefers-reduced-motion:reduce){
  .ax-root,.ax-root *,.ax-chip{animation:none!important;transition:none!important}
}
@media (forced-colors:active){
  .ax-root .ax-card,.ax-root .ax-btn,.ax-root .ax-in,.ax-root .ax-seg button[aria-pressed="true"],.ax-chip{border:2px solid ButtonText}
  .ax-root .ax-fill{background:Highlight}
}