/* © 2026 Ruan Fernando Honorato · HONOTEC. Todos os direitos reservados. AURA MAX: proibido copiar, redistribuir ou modificar sem autorização (LICENSE.txt). */
/* AURAMAXX — design system "Ember Noir" (ui18).
   Tudo aqui vive em classes .k-* (ou no escopo .k-scope); nada reestiliza telas antigas.
   Fontes locais OFL (assets/fonts), sem Google Fonts. Spec: .runtime/ui18-spec.md */

/* ---------- Fontes (variáveis: um arquivo cobre todos os pesos) ---------- */
@font-face{font-family:'Teko';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/teko-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Teko';font-style:normal;font-weight:300 700;font-display:swap;src:url(../fonts/teko-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Nunito';font-style:normal;font-weight:200 1000;font-display:swap;src:url(../fonts/nunito-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Marcellus SC';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-sc-latin.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Marcellus SC';font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/marcellus-sc-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- Tokens ---------- */
/* Atenção: o <style> inline antigo redefine --line/--gold/--text/--muted em :root com valores legados.
   Dentro de .k-scope os valores do spec valem sempre (use .k-scope na raiz de cada tela migrada). */
:root,.k-scope{
  --ink-0:#06050a;--ink-1:#0d0b14;--ink-2:#15111f;--ink-3:#1f1830;
  --line:rgba(255,214,150,.16);--line-2:rgba(255,214,150,.32);
  --gold:#ffcf6b;--gold-2:#e8a63a;--ember:#ff6a2b;--crimson:#e3263f;--cyan:#5fe3ff;--steel:#9fb4d8;
  --text:#f4ece0;--muted:#a99f93
}
:root{
  --r-common:#b9c2cf;--r-rare:#4fa3ff;--r-epic:#b06bff;--r-legend:#ffb23f;
  --side-0:#e3263f;--side-1:#5fe3ff;
  --gold-hi:#fff0c4;--gold-lo:#9a5f12;--violet:#9d6bff;--good:#5be38a;--bad:#ff4d5e;
  --text-dim:rgba(244,236,224,.74);--on-gold:#2a1605;
  --grad-gold:linear-gradient(180deg,#ffe7a8 0%,#ffcf6b 38%,#f0aa3c 72%,#d98a26 100%);
  --grad-ink:linear-gradient(180deg,rgba(34,27,51,.94),rgba(12,10,19,.96));
  --f-brand:'Marcellus SC','Palatino Linotype','Book Antiqua',serif;
  --f-display:'Teko','Bahnschrift SemiCondensed','Arial Narrow',sans-serif;
  --f-body:'Nunito','Trebuchet MS',system-ui,sans-serif;
  --cut:10px;--cut-s:6px;--cut-l:18px;
  --ease:cubic-bezier(.2,.8,.2,1);--ease-in:cubic-bezier(.55,0,.75,.2);--ease-snap:cubic-bezier(.3,1.45,.5,1);
  --t-fast:120ms;--t-med:240ms;--t-slow:350ms;
  --safe-t:env(safe-area-inset-top,0px);--safe-r:env(safe-area-inset-right,0px);--safe-b:env(safe-area-inset-bottom,0px);--safe-l:env(safe-area-inset-left,0px);
  /* camadas: tela de carregamento (#loading, loading.css) = 9200; o guia ?uikit=1 fica acima dela, o corte e os avisos acima do guia */
  --z-guide:9300;--z-wipe:9400;--z-toast:9500;
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 .92 0 0 0 0 .8 .16 0 0 0 -.045'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --k-lock:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'%3E%3Crect x='5' y='10.5' width='14' height='10' rx='2'/%3E%3Cpath d='M8 10.5V8a4 4 0 0 1 8 0v2.5M12 14.5v2.5'/%3E%3C/svg%3E");
  --k-chev:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffcf6b' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E")
}
/* Base segura: só ajustes que não mudam o layout das telas antigas */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
.k-scope{color:var(--text);font-family:var(--f-body)}
.k-scope,.k-scope *,.k-scope *::before,.k-scope *::after{box-sizing:border-box}

/* ---------- Ícones (sprite injetado por js/ui-kit.js) ---------- */
.k-ico{display:inline-block;width:1em;height:1em;flex:none;vertical-align:-.14em;overflow:visible;fill:none;stroke:currentColor;stroke-width:var(--k-sw,2);stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
.k-ico--bold{--k-sw:2.5}.k-ico--thin{--k-sw:1.5}

/* ---------- Tipografia ---------- */
.k-brand{font-family:var(--f-brand);font-weight:400;letter-spacing:.04em;line-height:.95}
.k-display,.k-h1,.k-h2,.k-h3{font-family:var(--f-display);text-transform:uppercase;margin:0;padding-top:.08em}
.k-display{font-weight:600;letter-spacing:.02em;line-height:.9}
.k-h1{font-weight:700;font-size:clamp(46px,8.4vw,92px);line-height:.84;letter-spacing:.01em}
.k-h2{font-weight:600;font-size:clamp(32px,4.8vw,50px);line-height:.88;letter-spacing:.02em}
.k-h3{font-weight:600;font-size:26px;line-height:.95;letter-spacing:.03em}
.k-label{font:800 12px/1.2 var(--f-body);letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.k-text{margin:0;font:600 15px/1.45 var(--f-body);color:var(--text-dim)}
.k-small{font:700 13px/1.35 var(--f-body)}
.k-muted{color:var(--muted)}
.k-num{font-family:var(--f-display);font-weight:600;font-variant-numeric:tabular-nums;letter-spacing:.02em;line-height:1}
.k-metal{background:linear-gradient(180deg,#fff8e2 0%,#ffe3a1 30%,#f0b04a 52%,#fff0c4 56%,#d48f2c 78%,#ffe3a1 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.k-steel{background:linear-gradient(180deg,#fff 0%,#dfe7f5 38%,#7f8ea8 54%,#eef3fb 58%,#9fb4d8 100%);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
.k-glow{filter:drop-shadow(0 0 16px rgba(255,170,60,.38))}
.k-gold{color:var(--gold)}.k-crimson{color:var(--crimson)}.k-cyan{color:var(--cyan)}.k-ember{color:var(--ember)}

/* ---------- Forma de lâmina (chanfro sup.-esq. e inf.-dir.) ----------
   Componentes "sólidos" (botões, chips, inputs, moedas, toasts): clip-path no próprio elemento,
   filete via 4 camadas de fundo (cantos diagonais + preenchimento + borda).
   Componentes "contêiner" (painel, cards): forma desenhada em ::before/::after, filhos não são cortados. */
.k-btn,.k-chip,.k-input,.k-cur,.k-badge,.k-level{clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.k-btn,.k-chip,.k-input,.k-cur{
  border:1px solid transparent;
  background:
    linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--edge) calc(50% - 1.2px) calc(50% + 1.2px),transparent calc(50% + 1.2px)) left top/var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--edge) calc(50% - 1.2px) calc(50% + 1.2px),transparent calc(50% + 1.2px)) right bottom/var(--cut) var(--cut) no-repeat border-box,
    var(--fill) padding-box,
    linear-gradient(var(--edge),var(--edge)) border-box
}
.k-panel::before,.k-card::before,.k-mode::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.k-panel::after,.k-card::after,.k-mode::after{content:"";position:absolute;inset:1px;z-index:-1;pointer-events:none;clip-path:polygon(calc(var(--cut) - .41px) 0,100% 0,100% calc(100% - var(--cut) + .41px),calc(100% - var(--cut) + .41px) 100%,0 100%,0 calc(var(--cut) - .41px))}

/* ---------- Botões ---------- */
.k-btn{
  --cut:10px;--edge:var(--line-2);--fill:linear-gradient(180deg,rgba(44,35,66,.95),rgba(16,13,24,.96));--fg:var(--text);
  position:relative;isolation:isolate;overflow:hidden;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:.4em;
  min-height:48px;min-width:48px;margin:0;padding:.14em 22px 0;border-radius:0;
  color:var(--fg);font:600 23px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;white-space:nowrap;vertical-align:middle;
  cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  box-shadow:inset 0 1px 0 rgba(255,240,210,.08);
  transition:transform var(--t-fast) var(--ease),filter var(--t-fast)
}
.k-btn .k-ico{font-size:.92em;margin-top:-.14em}
.k-btn::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(130% 150% at 50% -10%,rgba(255,236,200,.22),transparent 62%);opacity:0;transition:opacity var(--t-fast)}
.k-btn:focus-visible{outline:none}
.k-btn:focus-visible::after{opacity:1;box-shadow:inset 0 0 0 2px var(--gold-hi)}
.k-btn:active{transform:scale(.97)}
.k-btn:disabled,.k-btn[aria-disabled="true"]{opacity:.42;filter:saturate(.25);pointer-events:none}
@media (hover:hover){.k-btn:hover::after{opacity:1}.k-btn:hover{--edge:rgba(255,214,150,.55)}}
.k-btn--secondary{--edge:var(--line-2)}
.k-btn--primary{
  --edge:rgba(255,244,214,.95);--fill:var(--grad-gold);--fg:var(--on-gold);
  text-shadow:0 1px 0 rgba(255,244,214,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 -3px 0 rgba(122,62,0,.34)
}
@media (hover:hover){.k-btn--primary:hover{--edge:#fff;filter:brightness(1.06)}}
.k-btn--ghost{--edge:var(--line);--fill:linear-gradient(180deg,rgba(255,214,150,.06),rgba(255,214,150,.015));--fg:var(--gold);box-shadow:none}
.k-btn--danger{--edge:#ff9aa4;--fill:linear-gradient(180deg,#ff5d70 0%,#d81f38 48%,#8e0f22 100%);--fg:#fff;text-shadow:0 1px 0 rgba(90,0,12,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.4),inset 0 -3px 0 rgba(70,0,10,.35)}
.k-btn--cyan{--edge:rgba(214,250,255,.9);--fill:linear-gradient(180deg,#b8f4ff 0%,#5fe3ff 40%,#2ea2d8 100%);--fg:#04202c;box-shadow:inset 0 1px 0 rgba(255,255,255,.6),inset 0 -3px 0 rgba(0,50,80,.3)}
.k-btn--sm{--cut:8px;min-height:44px;padding:.14em 14px 0;font-size:20px}
.k-btn--lg{--cut:14px;min-height:60px;padding:.14em 30px 0;font-size:31px}
.k-btn--xl{--cut:20px;min-height:84px;padding:.14em 46px 0;font-size:50px;letter-spacing:.08em}
.k-btn--block{display:flex;width:100%}
.k-btn--icon{padding:0;width:48px;font-size:24px}
.k-btn--icon .k-ico{margin-top:0}
.k-btn--icon.k-btn--sm{width:44px}.k-btn--icon.k-btn--lg{width:60px;font-size:30px}
.k-btn__stack{display:flex;flex-direction:column;align-items:flex-start;gap:3px;text-align:left}
.k-btn__sub{display:block;font:800 12px/1.15 var(--f-body);letter-spacing:.14em;text-transform:uppercase;opacity:.78;text-shadow:none}
/* brilho que varre (botão primário e utilitário .k-shine) */
.k-btn--primary::before,.k-shine::before{content:"";position:absolute;top:-12%;bottom:-12%;left:0;width:36%;z-index:-1;pointer-events:none;background:linear-gradient(100deg,transparent 0%,rgba(255,255,255,0) 18%,rgba(255,255,255,.62) 50%,rgba(255,255,255,0) 82%,transparent 100%);transform:translateX(-170%) skewX(-20deg);animation:k-shine 4.2s var(--ease) 1.4s infinite}
.k-shine{position:relative;overflow:hidden;isolation:isolate}
.k-shine::before{z-index:1}
@keyframes k-shine{0%{transform:translateX(-170%) skewX(-20deg)}20%,100%{transform:translateX(330%) skewX(-20deg)}}
/* halo pulsante em CTAs: envolver o botão em .k-halo (o brilho fica fora do recorte) */
.k-halo{position:relative;display:inline-flex;isolation:isolate}
.k-halo--block{display:flex}
.k-halo::before{content:"";position:absolute;inset:-16px -22px;z-index:-1;pointer-events:none;background:radial-gradient(closest-side,rgba(255,176,64,.55),rgba(255,106,43,.16) 58%,transparent);opacity:.5;animation:k-halo 2.6s ease-in-out infinite}
@keyframes k-halo{50%{opacity:1;transform:scale(1.035)}}

/* ---------- Painéis ---------- */
.k-panel{
  --cut:var(--cut-l);--edge:var(--line-2);--fill:linear-gradient(180deg,rgba(30,24,45,.95),rgba(12,10,19,.97));
  position:relative;isolation:isolate;box-sizing:border-box;padding:18px 20px 20px;color:var(--text)
}
.k-panel::before{background:linear-gradient(162deg,var(--edge) 0%,rgba(255,214,150,.07) 32%,rgba(255,214,150,.07) 68%,var(--edge) 100%)}
.k-panel::after{background:var(--noise),radial-gradient(120% 55% at 50% 0%,rgba(255,170,80,.075),transparent 62%),var(--fill)}
.k-panel--glass{--fill:linear-gradient(180deg,rgba(22,18,33,.78),rgba(8,7,12,.86))}
.k-panel--gold{--edge:rgba(255,207,107,.62)}
.k-panel--tight{padding:12px 14px 14px}
.k-panel__head{display:flex;align-items:center;gap:12px;margin:-2px 0 14px;min-height:32px}
.k-panel__head::after{content:"";flex:1 1 24px;order:1;height:1px;background:linear-gradient(90deg,var(--line-2),transparent)}
.k-panel__head>*:not(.k-panel__title){order:2}
.k-panel__title{position:relative;margin:0;padding:.12em 0 0 16px;font:600 28px/1 var(--f-display);letter-spacing:.04em;text-transform:uppercase;color:var(--text);white-space:nowrap}
.k-panel__title::before{content:"";position:absolute;left:0;top:.1em;bottom:.24em;width:5px;background:linear-gradient(180deg,var(--gold),var(--ember));transform:skewX(-18deg)}
.k-panel__body{overflow:auto;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}

/* ---------- Cards de item (raridade) ---------- */
.k-card,[data-rarity]{--rar:var(--r-common);--rar-a:rgba(185,194,207,.42);--rar-g:rgba(185,194,207,.14)}
.k-r-rare,[data-rarity="rare"],[data-rarity="raro"]{--rar:var(--r-rare);--rar-a:rgba(79,163,255,.55);--rar-g:rgba(79,163,255,.2)}
.k-r-epic,[data-rarity="epic"],[data-rarity="epico"]{--rar:var(--r-epic);--rar-a:rgba(176,107,255,.58);--rar-g:rgba(176,107,255,.22)}
.k-r-legend,[data-rarity="legend"],[data-rarity="lendario"]{--rar:var(--r-legend);--rar-a:rgba(255,178,63,.66);--rar-g:rgba(255,178,63,.24)}
.k-card{
  --cut:12px;--edge:var(--rar-a);
  appearance:none;-webkit-appearance:none;position:relative;isolation:isolate;box-sizing:border-box;display:flex;flex-direction:column;gap:8px;min-width:0;margin:0;padding:10px 10px 12px;
  border:0;background:none;color:var(--text);font:inherit;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;
  transition:transform var(--t-fast) var(--ease)
}
.k-card::before{background:linear-gradient(180deg,var(--edge) 0%,rgba(255,214,150,.06) 42%,var(--edge) 100%)}
.k-card::after{background:radial-gradient(110% 55% at 50% 100%,var(--rar-g),transparent 72%),var(--noise),linear-gradient(180deg,#1a1526,#0d0b13)}
.k-card:active{transform:scale(.98)}
.k-card:focus-visible{outline:2px solid var(--gold-hi);outline-offset:2px}
@media (hover:hover){.k-card:hover{transform:translateY(-2px)}.k-card:hover:active{transform:scale(.98)}}
.k-card__art{position:relative;display:grid;place-items:center;height:84px;margin:-4px -4px 0;overflow:hidden;background:radial-gradient(closest-side,var(--rar-g),transparent),repeating-linear-gradient(-62deg,rgba(255,255,255,.03) 0 2px,transparent 2px 12px),linear-gradient(180deg,rgba(255,255,255,.03),transparent);box-shadow:inset 0 -1px 0 var(--rar-a)}
.k-card__art .k-ico{font-size:42px;color:var(--rar);--k-sw:1.8}
.k-card__title{font:600 22px/1 var(--f-display);letter-spacing:.03em;text-transform:uppercase;padding-top:.1em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.k-card__meta{font:700 12px/1.3 var(--f-body);color:var(--muted)}
.k-card__foot{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:auto;min-height:26px}
.k-card__badge{position:absolute;top:8px;right:8px;z-index:1}
.k-card__flag{position:absolute;left:8px;top:68px;z-index:1}
.k-card.is-active,.k-card[aria-pressed="true"],.k-card.is-equipped{--edge:var(--gold)}
.k-card.is-equipped::after{background:radial-gradient(110% 60% at 50% 100%,rgba(255,207,107,.22),transparent 72%),var(--noise),linear-gradient(180deg,#1f1828,#0d0b13)}
.k-card.is-locked .k-card__art>*{opacity:.3;filter:grayscale(1)}
.k-card.is-locked .k-card__art::after{content:"";position:absolute;inset:0;margin:auto;width:28px;height:28px;background:var(--text);-webkit-mask:var(--k-lock) center/contain no-repeat;mask:var(--k-lock) center/contain no-repeat;opacity:.85}
.k-card.is-locked .k-card__title{color:var(--muted)}
.k-price{display:inline-flex;align-items:center;gap:5px;font:600 22px/1 var(--f-display);letter-spacing:.03em;color:var(--gold);padding-top:.1em;white-space:nowrap}
.k-price .k-ico{font-size:19px;margin-top:-.16em}

/* ---------- Cards de modo ---------- */
.k-mode{
  --cut:14px;--accent:var(--gold);--accent-2:var(--ember);--accent-a:rgba(255,207,107,.4);--edge:rgba(255,214,150,.22);
  appearance:none;-webkit-appearance:none;position:relative;isolation:isolate;box-sizing:border-box;display:flex;flex-direction:column;
  width:var(--w,224px);min-height:232px;margin:0;padding:0;border:0;background:none;color:var(--text);font:inherit;text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--t-fast) var(--ease)
}
.k-mode[data-theme="crimson"]{--accent:#ff4057;--accent-2:#ff8a4a;--accent-a:rgba(227,38,63,.48)}
.k-mode[data-theme="cyan"]{--accent:#5fe3ff;--accent-2:#4f7dff;--accent-a:rgba(95,227,255,.38)}
.k-mode[data-theme="violet"]{--accent:#bf85ff;--accent-2:#ff5fd2;--accent-a:rgba(176,107,255,.45)}
.k-mode[data-theme="ember"]{--accent:#ff7a3a;--accent-2:#ffcf6b;--accent-a:rgba(255,106,43,.48)}
.k-mode[data-theme="steel"]{--accent:#b8c9e8;--accent-2:#eef3fb;--accent-a:rgba(159,180,216,.34)}
.k-mode[data-theme="gold"]{--accent:#ffcf6b;--accent-2:#ff9f1f;--accent-a:rgba(255,207,107,.42)}
.k-mode::before{background:linear-gradient(168deg,var(--edge) 0%,rgba(255,214,150,.06) 45%,var(--edge) 100%)}
.k-mode::after{background:var(--noise),linear-gradient(180deg,#1a1527,#0c0a12 72%)}
.k-mode__art{
  position:relative;display:grid;place-items:center;height:118px;margin:1px 1px 0;overflow:hidden;
  clip-path:polygon(calc(var(--cut) - .41px) 0,100% 0,100% 100%,0 100%,0 calc(var(--cut) - .41px));
  background:radial-gradient(95% 125% at 72% 0%,var(--accent-a),transparent 66%),repeating-linear-gradient(-62deg,rgba(255,255,255,.035) 0 2px,transparent 2px 13px),linear-gradient(180deg,#241b36,#100d18);
  box-shadow:inset 0 -2px 0 var(--accent)
}
.k-mode__art::before{content:"";position:absolute;left:-25%;right:-25%;top:50%;height:2px;background:linear-gradient(90deg,transparent,var(--accent) 30%,#fff 50%,var(--accent) 70%,transparent);transform:rotate(-24deg);opacity:.5}
.k-mode__art::after{content:"";position:absolute;width:74px;height:74px;border:1px solid var(--accent-a);background:radial-gradient(closest-side,var(--accent-a),transparent);transform:rotate(45deg)}
.k-mode__art .k-ico{position:relative;z-index:1;font-size:48px;color:var(--accent);--k-sw:1.7;filter:drop-shadow(0 0 10px var(--accent-a))}
.k-mode__body{display:flex;flex-direction:column;gap:5px;padding:12px 14px 16px}
.k-mode__title{font:600 31px/.9 var(--f-display);letter-spacing:.03em;text-transform:uppercase;padding-top:.1em}
.k-mode__sub{font:700 13px/1.3 var(--f-body);color:var(--muted)}
.k-mode__seal{position:absolute;top:10px;right:10px;z-index:2}
.k-mode.is-selected,.k-mode[aria-pressed="true"],.k-mode[aria-checked="true"]{--edge:var(--accent);transform:translateY(-4px)}
.k-mode.is-selected::before,.k-mode[aria-pressed="true"]::before,.k-mode[aria-checked="true"]::before{background:linear-gradient(168deg,var(--accent-2) 0%,var(--accent) 40%,rgba(255,214,150,.18) 60%,var(--accent) 100%)}
.k-mode.is-selected .k-mode__title,.k-mode[aria-pressed="true"] .k-mode__title{color:var(--accent)}
.k-mode:active{transform:scale(.98)}
.k-mode:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
@media (hover:hover){.k-mode:hover{transform:translateY(-3px)}.k-mode:hover:active{transform:scale(.98)}}
.k-mode.is-soon,.k-mode.is-locked{cursor:default}
.k-mode.is-soon .k-mode__art,.k-mode.is-locked .k-mode__art{filter:grayscale(.85) brightness(.62)}
.k-mode.is-soon .k-mode__title,.k-mode.is-locked .k-mode__title{color:var(--muted)}
.k-mode--wide{flex-direction:row;width:auto;min-height:112px}
.k-mode--wide .k-mode__art{width:112px;height:auto;margin:1px 0 1px 1px;box-shadow:inset -2px 0 0 var(--accent)}
.k-mode--wide .k-mode__body{justify-content:center}

/* ---------- Abas ---------- */
.k-tabs{display:flex;gap:2px;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch;box-shadow:inset 0 -1px 0 var(--line)}
.k-tabs::-webkit-scrollbar{display:none}
.k-tab{
  appearance:none;-webkit-appearance:none;position:relative;flex:none;display:inline-flex;align-items:center;gap:8px;min-height:46px;margin:0;padding:.16em 14px 0;
  border:0;background:none;color:var(--muted);font:600 21px/1 var(--f-display);letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:color var(--t-fast)
}
.k-tab .k-ico{font-size:19px;margin-top:-.16em}
.k-tab::after{content:"";position:absolute;left:10px;right:10px;bottom:0;height:3px;background:linear-gradient(90deg,var(--ember),var(--gold));transform:scaleX(0) skewX(-30deg);transition:transform var(--t-med) var(--ease)}
.k-tab.is-active,.k-tab[aria-selected="true"]{color:var(--gold)}
.k-tab.is-active::after,.k-tab[aria-selected="true"]::after{transform:scaleX(1) skewX(-30deg)}
.k-tab:focus-visible{outline:none;color:var(--text);background:rgba(255,214,150,.07)}
@media (hover:hover){.k-tab:hover{color:var(--text)}}
.k-tabs--seg{gap:4px;padding:4px;box-shadow:inset 0 0 0 1px var(--line);background:rgba(6,5,10,.5);clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.k-tabs--seg .k-tab{min-height:44px;clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.k-tabs--seg .k-tab::after{display:none}
.k-tabs--seg .k-tab.is-active,.k-tabs--seg .k-tab[aria-selected="true"]{background:var(--grad-gold);color:var(--on-gold)}

/* ---------- Chips ---------- */
.k-chips{display:flex;flex-wrap:wrap;gap:8px}
.k-chip{
  --cut:7px;--edge:var(--line-2);--fill:linear-gradient(180deg,rgba(38,30,57,.92),rgba(15,12,22,.94));--fg:var(--text);
  appearance:none;-webkit-appearance:none;position:relative;box-sizing:border-box;display:inline-flex;align-items:center;justify-content:center;gap:6px;
  min-height:40px;margin:0;padding:1px 14px 0;color:var(--fg);font:800 13px/1 var(--f-body);letter-spacing:.08em;text-transform:uppercase;white-space:nowrap;
  cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation;transition:transform var(--t-fast) var(--ease)
}
.k-chip .k-ico{font-size:16px}
.k-chip:active{transform:scale(.96)}
.k-chip:focus-visible{outline:none;--edge:var(--gold-hi)}
.k-chip.is-active,.k-chip[aria-pressed="true"],.k-chip[aria-checked="true"],.k-chip[aria-selected="true"]{--edge:rgba(255,244,214,.95);--fill:var(--grad-gold);--fg:var(--on-gold)}
.k-chip:disabled,.k-chip[aria-disabled="true"]{opacity:.42;pointer-events:none}
@media (hover:hover){.k-chip:not(.is-active):not([aria-pressed="true"]):not([aria-checked="true"]):hover{--edge:rgba(255,214,150,.6)}}
@media (pointer:coarse){.k-chip{min-height:44px}}

/* ---------- Campos: toggle, select, input, slider ---------- */
.k-field{display:flex;align-items:center;justify-content:space-between;gap:16px;min-height:54px;padding:6px 0;box-shadow:inset 0 -1px 0 var(--line);cursor:pointer}
.k-field__label{flex:1 1 auto;min-width:0;font:800 15px/1.25 var(--f-body);color:var(--text)}
.k-field__hint{display:block;margin-top:2px;font:600 12px/1.3 var(--f-body);color:var(--muted)}
.k-field>.k-range{flex:0 0 46%;max-width:240px}
.k-field>.k-select{flex:0 1 auto}
/* .k-switch tem 30px de altura: no toque, use-o dentro de um <label class="k-field"> (a linha inteira, ≥54px, é o alvo) */
.k-switch{
  appearance:none;-webkit-appearance:none;position:relative;flex:none;box-sizing:border-box;width:58px;height:30px;margin:0;border:0;cursor:pointer;
  background:linear-gradient(180deg,#09070e,#1b1528);box-shadow:inset 0 0 0 1px var(--line-2),inset 0 2px 6px rgba(0,0,0,.6);
  clip-path:polygon(8px 0,100% 0,100% calc(100% - 8px),calc(100% - 8px) 100%,0 100%,0 8px);-webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.k-switch::before{content:"";position:absolute;inset:0;background:var(--grad-gold);opacity:0;transition:opacity var(--t-med)}
.k-switch::after{content:"";position:absolute;top:4px;left:5px;width:22px;height:22px;background:linear-gradient(180deg,#e9e0d2,#8f8577);clip-path:polygon(28% 0,100% 0,72% 100%,0 100%);transition:transform var(--t-med) var(--ease-snap),background var(--t-med)}
.k-switch:checked::before{opacity:1}
.k-switch:checked::after{transform:translateX(26px);background:linear-gradient(180deg,#3a2408,#1c1004)}
.k-switch:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--gold-hi),inset 0 2px 6px rgba(0,0,0,.6)}
.k-switch:disabled{opacity:.4;cursor:default}
.k-select{
  --cut:8px;--edge:var(--line-2);--fill:linear-gradient(180deg,rgba(38,30,57,.95),rgba(14,11,21,.97));
  appearance:none;-webkit-appearance:none;box-sizing:border-box;min-height:44px;min-width:120px;max-width:100%;margin:0;padding:0 40px 0 14px;border:1px solid transparent;border-radius:0;
  color:var(--text);font:800 14px/1.2 var(--f-body);cursor:pointer;-webkit-tap-highlight-color:transparent;
  background:
    var(--k-chev) right 13px center/15px 15px no-repeat border-box,
    linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--edge) calc(50% - 1.2px) calc(50% + 1.2px),transparent calc(50% + 1.2px)) left top/var(--cut) var(--cut) no-repeat border-box,
    linear-gradient(to bottom right,transparent calc(50% - 1.2px),var(--edge) calc(50% - 1.2px) calc(50% + 1.2px),transparent calc(50% + 1.2px)) right bottom/var(--cut) var(--cut) no-repeat border-box,
    var(--fill) padding-box,
    linear-gradient(var(--edge),var(--edge)) border-box;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))
}
.k-select:focus-visible{outline:none;--edge:var(--gold-hi)}
.k-select option{background:#15111f;color:#f4ece0}
.k-input{
  --cut:8px;--edge:var(--line-2);--fill:linear-gradient(180deg,rgba(6,5,10,.85),rgba(21,17,31,.9));
  appearance:none;-webkit-appearance:none;box-sizing:border-box;min-height:46px;min-width:0;margin:0;padding:0 14px;border-radius:0;
  color:var(--text);font:800 16px/1.2 var(--f-body);-webkit-user-select:text;user-select:text;touch-action:manipulation
}
.k-input::placeholder{color:rgba(169,159,147,.7)}
.k-input:focus{outline:none;--edge:var(--gold)}
.k-input--code{min-height:60px;padding:.14em 18px 0;font:600 40px/1 var(--f-display);letter-spacing:.32em;text-align:center}
.k-range{
  --val:50%;-webkit-appearance:none;appearance:none;box-sizing:border-box;width:100%;min-width:120px;height:44px;margin:0;padding:0;background:transparent;
  cursor:pointer;touch-action:pan-y;-webkit-tap-highlight-color:transparent;animation:k-bind 1ms
}
.k-range:focus{outline:none}
.k-range::-webkit-slider-runnable-track{height:6px;border-radius:1px;background:linear-gradient(90deg,var(--ember),var(--gold) var(--val),rgba(255,255,255,.12) var(--val));box-shadow:inset 0 0 0 1px rgba(255,214,150,.14)}
.k-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:24px;height:24px;margin-top:-9px;border:0;background:radial-gradient(circle at 42% 34%,#fff8e2,#ffcf6b 46%,#c07d22);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%);transition:transform var(--t-fast) var(--ease)}
.k-range:active::-webkit-slider-thumb{transform:scale(1.18)}
.k-range:focus-visible::-webkit-slider-runnable-track{box-shadow:inset 0 0 0 1px var(--gold-hi),0 0 0 3px rgba(255,207,107,.25)}
.k-range::-moz-range-track{height:6px;border:0;border-radius:1px;background:rgba(255,255,255,.12)}
.k-range::-moz-range-progress{height:6px;background:linear-gradient(90deg,var(--ember),var(--gold))}
.k-range::-moz-range-thumb{width:24px;height:24px;border:0;border-radius:0;background:radial-gradient(circle at 42% 34%,#fff8e2,#ffcf6b 46%,#c07d22);clip-path:polygon(50% 0,100% 50%,50% 100%,0 50%)}
@keyframes k-bind{from{opacity:1}to{opacity:1}}

/* ---------- Barras de progresso (--p de 0 a 1) ---------- */
.k-progress{
  --p:0;--h:10px;--fill:linear-gradient(90deg,var(--gold-2),var(--gold) 70%,#fff0c4);
  position:relative;display:block;box-sizing:border-box;height:var(--h);overflow:hidden;
  background:linear-gradient(180deg,rgba(0,0,0,.6),rgba(255,255,255,.07));box-shadow:inset 0 0 0 1px rgba(255,214,150,.16);
  clip-path:polygon(4px 0,100% 0,calc(100% - 4px) 100%,0 100%)
}
.k-progress>i{position:absolute;inset:0;display:block;background:var(--fill);transform:translateX(calc((min(1,max(0,var(--p))) - 1) * 100%));transition:transform .4s var(--ease)}
.k-progress>i::after{content:"";position:absolute;top:-60%;bottom:-60%;right:-7px;width:16px;background:radial-gradient(closest-side,#fff,rgba(255,240,196,.75) 38%,transparent)}
.k-progress--xp{--fill:linear-gradient(90deg,#4f5dff,#4f9dff 40%,var(--cyan) 85%,#e8fbff)}
.k-progress--hp{--fill:linear-gradient(90deg,#7a0c1d,var(--crimson) 55%,#ff8a6b)}
.k-progress--ember{--fill:linear-gradient(90deg,var(--crimson),var(--ember) 55%,var(--gold))}
.k-progress--thin{--h:6px}
.k-progress--blade{--h:14px;clip-path:polygon(0 32%,7px 0,calc(100% - 24px) 0,100% 50%,calc(100% - 24px) 100%,7px 100%,0 68%)}
.k-progress--seg{-webkit-mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%);mask:repeating-linear-gradient(90deg,#000 0 calc(10% - 3px),transparent calc(10% - 3px) 10%)}
.k-progress--seg>i::after{display:none}

/* ---------- Anel de nível / selo de nível ---------- */
.k-ring{--p:0;--size:56px;--th:4px;--c:var(--gold);position:relative;display:inline-grid;place-items:center;flex:none;width:var(--size);height:var(--size);border-radius:50%}
.k-ring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--c) calc(min(1,max(0,var(--p))) * 1turn),rgba(255,255,255,.12) 0);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--th)),#000 calc(100% - var(--th) + .5px));mask:radial-gradient(farthest-side,transparent calc(100% - var(--th)),#000 calc(100% - var(--th) + .5px))}
.k-ring>*{position:relative}
.k-level{--cut:5px;display:inline-grid;place-items:center;min-width:28px;height:24px;padding:.14em 6px 0;background:var(--grad-gold);color:var(--on-gold);font:600 20px/1 var(--f-display);letter-spacing:.02em}

/* ---------- Selos (badges) ---------- */
.k-badge{
  --cut:5px;--bg:var(--ink-3);--fg:var(--text);
  display:inline-flex;align-items:center;gap:5px;box-sizing:border-box;min-height:22px;padding:2px 9px 1px;
  background:var(--bg);color:var(--fg);font:900 12px/1 var(--f-body);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;vertical-align:middle
}
.k-badge .k-ico{font-size:13px}
.k-badge--common{--bg:linear-gradient(180deg,#e6ebf2,#9aa5b5);--fg:#141820}
.k-badge--rare{--bg:linear-gradient(180deg,#8ac6ff,#2f7fe0);--fg:#fff}
.k-badge--epic{--bg:linear-gradient(180deg,#d4a4ff,#8a45e6);--fg:#fff}
.k-badge--legend{--bg:linear-gradient(180deg,#ffe597,#ff9f1f);--fg:#2a1605}
.k-badge--gold{--bg:var(--grad-gold);--fg:var(--on-gold)}
.k-badge--new{--bg:linear-gradient(180deg,#ff8f50,#e3401b);--fg:#fff}
.k-badge--soon{--bg:linear-gradient(180deg,#5a6780,#2c3445);--fg:#e4ebf7}
.k-badge--good{--bg:linear-gradient(180deg,#7ff0a6,#25a45a);--fg:#05210f}
.k-badge--cyan{--bg:linear-gradient(180deg,#b8f4ff,#2ea2d8);--fg:#04202c}
.k-badge--ghost{--bg:rgba(255,214,150,.08);--fg:var(--gold);box-shadow:inset 0 0 0 1px var(--line-2)}
.k-badge--live{--bg:linear-gradient(180deg,#ff4d5e,#a3122a);--fg:#fff}
.k-badge--live::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;animation:k-blink 1.2s ease-in-out infinite}
.k-badge[data-rarity="rare"],.k-badge[data-rarity="raro"]{--bg:linear-gradient(180deg,#8ac6ff,#2f7fe0);--fg:#fff}
.k-badge[data-rarity="epic"],.k-badge[data-rarity="epico"]{--bg:linear-gradient(180deg,#d4a4ff,#8a45e6);--fg:#fff}
.k-badge[data-rarity="legend"],.k-badge[data-rarity="lendario"]{--bg:linear-gradient(180deg,#ffe597,#ff9f1f);--fg:#2a1605}
.k-badge[data-rarity="common"],.k-badge[data-rarity="comum"]{--bg:linear-gradient(180deg,#e6ebf2,#9aa5b5);--fg:#141820}

/* ---------- Moedas / gemas ---------- */
.k-cur{
  --cut:8px;--edge:var(--line-2);--fill:linear-gradient(180deg,rgba(24,19,36,.9),rgba(8,7,12,.92));
  display:inline-flex;align-items:center;gap:6px;box-sizing:border-box;height:44px;padding:0 12px 0 8px;color:var(--text);white-space:nowrap;vertical-align:middle
}
.k-cur>.k-ico{font-size:24px}
.k-cur__val{min-width:2ch;padding-top:.14em;font:600 27px/1 var(--f-display);letter-spacing:.03em;font-variant-numeric:tabular-nums}
.k-cur__add{
  appearance:none;-webkit-appearance:none;position:relative;isolation:isolate;display:grid;place-items:center;flex:none;width:44px;height:44px;margin:0 -12px 0 0;padding:0;border:0;background:none;
  color:var(--on-gold);font:700 28px/1 var(--f-display);cursor:pointer;-webkit-tap-highlight-color:transparent;touch-action:manipulation
}
.k-cur__add::before{content:"";position:absolute;inset:7px;z-index:-1;background:var(--grad-gold);clip-path:polygon(6px 0,100% 0,100% calc(100% - 6px),calc(100% - 6px) 100%,0 100%,0 6px);transition:transform var(--t-fast) var(--ease)}
.k-cur__add .k-ico{font-size:18px;--k-sw:3}
.k-cur__add:active::before{transform:scale(.9)}
.k-cur__add:focus-visible{outline:none}
.k-cur__add:focus-visible::before{box-shadow:inset 0 0 0 2px #fff}

/* ---------- Tooltip ---------- */
/* <span class="k-tip" data-tip="texto">…</span> (wrapper próprio: os pseudos do botão já são usados).
   --below abre para baixo; --start/--end alinham a bolha à esquerda/direita (perto das bordas da tela). */
.k-tip{--tx:-50%;--ty:6px;position:relative;display:inline-flex}
.k-tip--below{--ty:-6px}
.k-tip--start,.k-tip--end{--tx:0%}
.k-tip::after,.k-tooltip{
  box-sizing:border-box;width:max-content;max-width:min(260px,72vw);padding:8px 12px;
  background:linear-gradient(180deg,#261d38,#120f1b);border:1px solid var(--line-2);box-shadow:0 10px 26px rgba(0,0,0,.5);
  color:var(--text);font:700 13px/1.35 var(--f-body);letter-spacing:0;text-transform:none;text-align:center;white-space:normal
}
.k-tip::after{content:attr(data-tip);position:absolute;left:50%;bottom:calc(100% + 10px);z-index:60;pointer-events:none;opacity:0;transform:translate(var(--tx),var(--ty));transition:opacity var(--t-fast),transform var(--t-fast) var(--ease)}
.k-tip::before{content:"";position:absolute;left:50%;bottom:calc(100% + 5px);z-index:61;width:9px;height:9px;pointer-events:none;background:#120f1b;border-right:1px solid var(--line-2);border-bottom:1px solid var(--line-2);opacity:0;transform:translate(-50%,var(--ty)) rotate(45deg);transition:opacity var(--t-fast),transform var(--t-fast) var(--ease)}
.k-tip--start::after{left:-6px}
.k-tip--end::after{left:auto;right:-6px}
.k-tip--below::after{bottom:auto;top:calc(100% + 10px)}
.k-tip--below::before{bottom:auto;top:calc(100% + 5px);border:0;border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);background:#261d38}
.k-tip:focus-within::after,.k-tip.is-open::after,.k-tip:focus-within::before,.k-tip.is-open::before{opacity:1;--ty:0px}
@media (hover:hover){.k-tip:hover::after,.k-tip:hover::before{opacity:1;--ty:0px}}

/* ---------- Toasts ---------- */
.k-toasts{position:fixed;left:50%;top:calc(var(--safe-t) + 12px);z-index:var(--z-toast);display:flex;flex-direction:column;align-items:center;gap:8px;width:min(92vw,440px);transform:translateX(-50%);pointer-events:none}
.k-toast{
  --cut:10px;--accent:var(--gold);
  position:relative;box-sizing:border-box;display:flex;align-items:center;gap:10px;max-width:100%;min-height:48px;padding:10px 18px 10px 16px;
  background:linear-gradient(var(--accent),var(--accent)) left/4px 100% no-repeat,var(--noise),linear-gradient(180deg,rgba(40,31,60,.97),rgba(13,11,20,.98));
  box-shadow:inset 0 0 0 1px var(--line-2);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  color:var(--text);font:800 14px/1.3 var(--f-body);pointer-events:auto;cursor:pointer;animation:k-toast-in .28s var(--ease) backwards
}
.k-toast>.k-ico{font-size:21px;color:var(--accent)}
.k-toast--good{--accent:var(--good)}.k-toast--bad{--accent:var(--crimson)}.k-toast--info{--accent:var(--cyan)}.k-toast--gold{--accent:var(--gold)}
.k-toast.is-out{animation:k-toast-out .2s var(--ease-in) forwards}
@keyframes k-toast-in{from{opacity:0;transform:translateY(-14px) scale(.97)}}
@keyframes k-toast-out{to{opacity:0;transform:translateY(-10px) scale(.97)}}

/* ---------- Diálogo premium ---------- */
.k-scrim{position:fixed;inset:0;z-index:50;display:grid;place-items:center;box-sizing:border-box;padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px);background:radial-gradient(ellipse at center,rgba(6,5,10,.62),rgba(6,5,10,.9));animation:k-fade .2s ease backwards}
.k-dialog{width:min(460px,100%);max-height:100%;overflow:auto;text-align:center;animation:k-pop .3s var(--ease-snap) backwards}
.k-dialog__title{margin:4px 0 6px;font:700 46px/.86 var(--f-display);letter-spacing:.03em;text-transform:uppercase;padding-top:.1em}
.k-dialog__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:18px}

/* ---------- Ornamentos ---------- */
.k-rule{display:flex;align-items:center;gap:10px;margin:14px 0;color:var(--gold);font:800 12px/1 var(--f-body);letter-spacing:.22em;text-transform:uppercase}
.k-rule::before,.k-rule::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--line-2))}
.k-rule::after{transform:scaleX(-1)}
.k-rule>i{width:7px;height:7px;flex:none;background:var(--gold);transform:rotate(45deg)}
.k-slash{position:relative;padding-left:16px}
.k-slash::before{content:"";position:absolute;left:0;top:.08em;bottom:.22em;width:5px;background:linear-gradient(180deg,var(--gold),var(--ember));transform:skewX(-18deg)}
.k-bg-ink{background:var(--noise),radial-gradient(120% 70% at 50% 112%,rgba(255,106,43,.2),transparent 60%),radial-gradient(90% 55% at 50% -12%,rgba(95,227,255,.07),transparent 62%),linear-gradient(180deg,#0d0b14,#06050a)}
.k-vignette{background:radial-gradient(ellipse at center,transparent 52%,rgba(0,0,0,.6) 100%);pointer-events:none}
.k-stat{display:flex;flex-direction:column;gap:5px;min-width:0}
.k-stat__val{font:600 38px/.9 var(--f-display);letter-spacing:.02em;font-variant-numeric:tabular-nums;padding-top:.1em}
.k-stat__label{font:800 12px/1.2 var(--f-body);letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}

/* ---------- Layout utilitário ---------- */
.k-row{display:flex;align-items:center;gap:var(--gap,12px);min-width:0}
.k-col{display:flex;flex-direction:column;gap:var(--gap,12px);min-width:0}
.k-wrap{flex-wrap:wrap}
.k-center{display:grid;place-items:center}
.k-row.k-center,.k-col.k-center{display:flex;justify-content:center;align-items:center}
.k-between{justify-content:space-between}
.k-end{justify-content:flex-end}
.k-grow{flex:1 1 auto;min-width:0}
.k-gap-s{--gap:6px}.k-gap-m{--gap:12px}.k-gap-l{--gap:20px}.k-gap-xl{--gap:32px}
.k-grid{display:grid;gap:var(--gap,12px);grid-template-columns:repeat(auto-fill,minmax(min(var(--min,150px),100%),1fr))}
.k-scroll{overflow:auto;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:rgba(255,214,150,.28) transparent}
.k-scroll::-webkit-scrollbar,.k-hscroll::-webkit-scrollbar{width:6px;height:6px}
.k-scroll::-webkit-scrollbar-thumb{background:rgba(255,214,150,.26)}
.k-scroll::-webkit-scrollbar-track{background:transparent}
.k-hscroll{display:flex;gap:var(--gap,12px);overflow-x:auto;overflow-y:hidden;padding:6px 2px 8px;scroll-snap-type:x mandatory;scroll-padding:0 2px;scrollbar-width:none;touch-action:pan-x pan-y;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}
.k-hscroll::-webkit-scrollbar{display:none}
.k-hscroll>*{flex:none;scroll-snap-align:start}
.k-screen{position:fixed;inset:0;display:flex;flex-direction:column;box-sizing:border-box;height:100vh;height:100dvh;padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px)}
.k-safe{padding:calc(var(--safe-t) + 16px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 16px) calc(var(--safe-l) + 16px)}
.k-safe-x{padding-left:calc(var(--safe-l) + 16px);padding-right:calc(var(--safe-r) + 16px)}
.k-safe-b{padding-bottom:calc(var(--safe-b) + 16px)}
.k-sr{position:absolute!important;width:1px!important;height:1px!important;margin:-1px!important;padding:0!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important;border:0!important}
@media (hover:hover) and (pointer:fine){.k-only-touch{display:none!important}}
@media (pointer:coarse){.k-only-mouse{display:none!important}}
@media (orientation:portrait){.k-hide-portrait{display:none!important}}
@media (orientation:landscape){.k-hide-landscape{display:none!important}}

/* ---------- Movimento ---------- */
.k-enter{animation:k-enter var(--t-med) var(--ease) backwards}
.k-stagger>*{animation:k-enter var(--t-med) var(--ease) backwards;animation-delay:calc(var(--i,0) * 30ms)}
.k-stagger>:nth-child(2){--i:1}.k-stagger>:nth-child(3){--i:2}.k-stagger>:nth-child(4){--i:3}.k-stagger>:nth-child(5){--i:4}.k-stagger>:nth-child(6){--i:5}.k-stagger>:nth-child(7){--i:6}.k-stagger>:nth-child(8){--i:7}.k-stagger>:nth-child(9){--i:8}.k-stagger>:nth-child(10){--i:9}.k-stagger>:nth-child(11){--i:10}.k-stagger>:nth-child(12){--i:11}.k-stagger>:nth-child(n+13){--i:12}
.k-pop{animation:k-pop .3s var(--ease-snap) backwards}
.k-slash-in{animation:k-slash-in .34s var(--ease) backwards}
.k-blink{animation:k-blink 1.6s ease-in-out infinite}
.k-float{animation:k-float 3.2s ease-in-out infinite}
@keyframes k-enter{from{opacity:0;transform:translateY(14px)}}
@keyframes k-pop{from{opacity:0;transform:translateY(10px) scale(.94)}}
@keyframes k-slash-in{from{opacity:0;transform:translateX(-28px) skewX(-14deg)}}
@keyframes k-fade{from{opacity:0}}
@keyframes k-blink{50%{opacity:.35}}
@keyframes k-float{50%{transform:translateY(-5px)}}

/* Transição "slash wipe" (js/ui-kit.js → slashWipe) */
.k-wipe{position:fixed;inset:0;z-index:var(--z-wipe);overflow:hidden;pointer-events:none;contain:strict}
.k-wipe.is-on{pointer-events:auto}
.k-wipe__blade{position:absolute;top:-10%;bottom:-10%;left:calc(-30vh - 10vw);right:calc(-30vh - 10vw);transform:translateX(-102%) skewX(-18deg);background:var(--noise),linear-gradient(90deg,#0b0911 0%,#17121f 46%,#0b0911 100%)}
.k-wipe__blade::before,.k-wipe__blade::after{content:"";position:absolute;top:0;bottom:0;width:18px}
.k-wipe__blade::after{left:100%;background:linear-gradient(90deg,#fff 0,#fff3d6 2px,var(--wipe-a,var(--crimson)) 5px,transparent 18px)}
.k-wipe__blade::before{right:100%;background:linear-gradient(270deg,#fff 0,#fff3d6 2px,var(--wipe-b,var(--gold)) 5px,transparent 18px)}
.k-wipe__streak{position:absolute;top:-10%;bottom:-10%;left:0;width:3px;background:linear-gradient(180deg,transparent,#fff 30%,#fff 70%,transparent);opacity:0;transform:skewX(-18deg)}

/* ---------- Movimento reduzido ---------- */
@media (prefers-reduced-motion:reduce){
  .k-enter,.k-stagger>*,.k-pop,.k-slash-in,.k-dialog,.k-scrim,.k-toast{animation-duration:1ms!important;animation-delay:0s!important}
  .k-btn--primary::before,.k-shine::before,.k-halo::before,.k-blink,.k-float,.k-badge--live::before{animation:none!important}
  .k-btn--primary::before,.k-shine::before{opacity:0}
  .k-progress>i,.k-switch::after,.k-tab::after,.k-mode,.k-card{transition:none!important}
}
html.k-reduce-motion .k-enter,html.k-reduce-motion .k-stagger>*,html.k-reduce-motion .k-pop,html.k-reduce-motion .k-slash-in,html.k-reduce-motion .k-dialog,html.k-reduce-motion .k-toast{animation-duration:1ms!important;animation-delay:0s!important}
html.k-reduce-motion .k-btn--primary::before,html.k-reduce-motion .k-shine::before,html.k-reduce-motion .k-halo::before,html.k-reduce-motion .k-blink,html.k-reduce-motion .k-float{animation:none!important}
html.k-reduce-motion .k-btn--primary::before,html.k-reduce-motion .k-shine::before{opacity:0}

/* ---------- Guia de estilo (QA: ?uikit=1) ---------- */
.k-guide{position:fixed;inset:0;z-index:var(--z-guide);overflow:auto;touch-action:pan-y;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;-webkit-user-select:text;user-select:text;
  padding:calc(var(--safe-t) + 14px) calc(var(--safe-r) + 16px) calc(var(--safe-b) + 48px) calc(var(--safe-l) + 16px);
  background:var(--noise),radial-gradient(120% 60% at 50% 115%,rgba(255,106,43,.16),transparent 60%),linear-gradient(180deg,#0d0b14,#06050a)}
.k-guide__inner{display:flex;flex-direction:column;gap:30px;max-width:1100px;margin:0 auto}
.k-guide__top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.k-guide__top>:first-child{flex:1 1 0}
.k-guide__top>:last-child{flex:none}
.k-guide__top label.k-tip{min-height:48px;padding:0 6px;align-items:center;cursor:pointer}
.k-guide__brand{margin:2px 0 0;font-size:clamp(32px,8vw,72px)}
.k-guide__h{margin:0 0 12px}
.k-guide__sw{display:flex;align-items:center;gap:10px;min-width:0;font:700 12px/1.3 var(--f-body);color:var(--muted)}
.k-guide__sw i{width:36px;height:36px;flex:none;background:var(--c);box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);clip-path:polygon(7px 0,100% 0,100% calc(100% - 7px),calc(100% - 7px) 100%,0 100%,0 7px)}
.k-guide__sw b{display:block;color:var(--text);font-weight:800}
.k-guide__icons{display:grid;grid-template-columns:repeat(auto-fill,minmax(82px,1fr));gap:6px}
.k-guide__icon{display:flex;flex-direction:column;align-items:center;gap:7px;padding:12px 4px 10px;background:rgba(255,214,150,.03);box-shadow:inset 0 0 0 1px var(--line);font:700 12px/1 var(--f-body);color:var(--muted);text-align:center;word-break:break-all}
.k-guide__icon .k-ico{font-size:28px;color:var(--text)}
.k-guide__demo{position:relative;height:220px;overflow:hidden;background:radial-gradient(120% 90% at 50% 120%,rgba(227,38,63,.3),transparent 60%),linear-gradient(180deg,#120d1c,#06050a);box-shadow:inset 0 0 0 1px var(--line)}
.k-guide__demo canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.k-guide__demo .k-display{position:absolute;left:0;right:0;bottom:22px;text-align:center;font-size:44px}