/* ============================================================================
   FERA FIGHT UI 2.0
   Camada estrutural nova. Não adiciona coordenadas por aparelho: todos os
   fluxos são grid/flex/scroll e respondem à largura/altura disponível.
   ========================================================================== */

/* Shell, safe area e fluxo de telas */
.ui-v2{color:var(--color-ink);font-size:16px}
.ui-v2 .app-shell{height:100dvh;min-height:100dvh;display:grid;grid-template-rows:auto minmax(0,1fr);overflow:hidden}
.ui-v2.auth-mode .app-shell{grid-template-rows:minmax(0,1fr)}
.ui-v2 main{min-width:0;min-height:0;overflow:hidden}
.ui-v2 .screen{width:100%;height:100%!important;min-width:0;min-height:0}
.ui-v2 .screen:not(.active){display:none!important}
.ui-v2 .screen.active{display:flex}
.ui-v2 .eyebrow{font:800 var(--text-meta)/1.2 var(--font-ui);letter-spacing:.16em;color:#de7959}
.ui-v2 .muted,.ui-v2 .subtitle{font-size:var(--text-body);line-height:1.5;color:var(--color-ink-soft)}

/* GameTopBar */
.ui-v2 .game-topbar{
  height:auto!important;min-height:76px;padding:var(--safe-top) var(--safe-right) var(--space-2) var(--safe-left)!important;
  background:rgba(248,253,255,.94)!important;border:0!important;border-bottom:1px solid var(--color-line)!important;
  box-shadow:0 5px 22px rgba(43,91,127,.1)!important;backdrop-filter:blur(18px) saturate(1.15);z-index:60
}
.ui-v2 .game-topbar__inner{width:min(100%,var(--content-max));min-width:0;margin:auto;display:grid;grid-template-columns:auto minmax(240px,1fr) auto 48px auto;align-items:center;gap:var(--space-3)}
.ui-v2 button.account-main{border:0;background:transparent;color:inherit;text-align:left;cursor:pointer;padding:0;font:inherit}
.ui-v2 button.account-main:focus-visible{outline:3px solid rgba(18,184,205,.35);outline-offset:5px;border-radius:8px}
.auth-forgot{border:0;background:transparent;color:#168fae;font:800 11px 'Nunito Sans',Inter,sans-serif;letter-spacing:.05em;align-self:center;padding:12px;cursor:pointer}
.account-card{width:min(92vw,540px);max-height:min(86dvh,760px);overflow:auto}.account-card form{display:grid;gap:12px;margin-top:20px}.account-card label{display:grid;gap:6px;color:#536783;font-weight:800;font-size:13px}.account-card input{min-height:48px;border:2px solid #dbe5ed;border-radius:12px;padding:10px 14px;font:600 16px 'Nunito Sans',Inter,sans-serif}.account-identity{display:flex;align-items:center;gap:16px;padding:16px;border-radius:16px;background:#edf8fc;margin:16px 0}.account-identity img{width:72px;height:72px;object-fit:cover;border-radius:18px}.account-identity span{display:grid;gap:3px}.account-identity b{font-size:20px}.account-identity small{color:#63758f}.account-identity em{color:#c67719;font-style:normal;font-weight:800;font-size:12px}.account-identity em.verified{color:#168d6b}.account-card .game-secondary-button{width:100%;min-height:48px}.account-card h3{margin:8px 0 0;color:#2c4262;font-size:14px;letter-spacing:.1em}
.account-identity>#account-avatar-preview{width:72px;height:72px;flex:0 0 72px;display:block}.account-identity>#account-avatar-preview>img{width:100%;height:100%}.ui-v2 .preview-frame>.framed-avatar{width:min(240px,64%);aspect-ratio:1;display:block}.ui-v2 .preview-frame>.framed-avatar>img{width:100%;height:100%;object-fit:cover;border-radius:24%}
.ui-v2 .brand{min-width:0;min-height:48px;gap:var(--space-2);font:800 1rem/1 var(--font-ui);letter-spacing:.12em;color:var(--color-ink)}
.ui-v2 .brand-mark{width:44px;height:44px;flex:0 0 44px}
.ui-v2 .brand-mark img,.ui-v2 .auth-badge img{object-fit:cover;border-radius:24%}
.ui-v2 .auth-badge{width:86px;height:86px;overflow:hidden;border-radius:24%}
.ui-v2 .auth-badge img{width:100%;height:100%}
.ui-v2 .account-hud{min-width:0;margin:0;display:flex;justify-content:flex-end;align-items:center;gap:var(--space-3)}
.ui-v2 .avatar-button{flex:0 0 48px;margin:0;padding:0;border:2px solid white;box-shadow:0 0 0 2px var(--color-cyan),var(--shadow-xs)}
.ui-v2 .avatar-button>span{right:-4px;bottom:-4px;width:20px;height:20px;font-size:.75rem}
.ui-v2 .account-main{width:min(220px,22vw);min-width:120px}
.ui-v2 .account-main>div:first-child{gap:var(--space-2)}
.ui-v2 .account-main b{font:800 var(--text-body)/1.2 var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-v2 .account-main em,.ui-v2 .account-main small{font-family:var(--font-ui);font-size:.75rem}
.ui-v2 .xp-mini{height:7px;border-radius:var(--radius-pill)}
.ui-v2 .rank-hud{min-width:190px;min-height:52px;padding:var(--space-2) var(--space-3);border:0;border-left:1px solid var(--color-line);background:transparent;box-shadow:none;border-radius:0;text-align:left}
.ui-v2 .rank-hud>span{width:42px;height:42px;flex:0 0 42px;font-size:1.4rem}
.ui-v2 .rank-hud small,.ui-v2 .rank-hud em{font-family:var(--font-ui);font-size:.75rem}
.ui-v2 .rank-hud b{font:800 .875rem/1.2 var(--font-ui);max-width:142px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ui-v2 .wallet{display:flex!important;align-items:center;gap:var(--space-2);padding:0!important;background:none!important;box-shadow:none!important}
.ui-v2 .logout-btn{min-width:52px;padding:var(--space-2);font-size:.75rem}

/* HOME: fluxo vertical real */
.ui-v2 .home-screen-v2{padding:0!important;align-items:stretch!important;overflow:hidden}
.ui-v2 .home-scroll{width:100%;height:100%;overflow:auto;overscroll-behavior:contain;padding:var(--space-6) var(--safe-right) max(var(--space-8),var(--safe-bottom)) var(--safe-left);scrollbar-gutter:stable}
.ui-v2 .home-container{width:min(100%,var(--content-max));margin:auto;display:grid;gap:var(--space-6)}
.ui-v2 .home-hero-layout{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(280px,.92fr);gap:var(--space-8);align-items:center;min-height:320px}
.ui-v2 .season-hero{max-width:650px!important;position:relative;z-index:2}
.ui-v2 .season-hero h1{margin:var(--space-3) 0 var(--space-4);font:800 clamp(2.35rem,5.6vw,4.5rem)/.96 var(--font-display);letter-spacing:-.035em;color:var(--color-ink);text-shadow:0 3px white}
.ui-v2 .season-hero h1 em{font-style:normal;color:#15a9c4!important;-webkit-text-stroke:0!important;filter:none!important}
.ui-v2 .season-hero .subtitle{max-width:600px;margin:0;font-weight:600}
.ui-v2 .mascot-hero{position:relative!important;inset:auto!important;width:min(100%,420px)!important;justify-self:end;aspect-ratio:1;z-index:2;animation:none!important}
.ui-v2 .mascot-hero img{width:100%;height:100%;object-fit:contain;object-position:center bottom;background:radial-gradient(circle at 50% 42%,#f5fdff 0 52%,#d7f2fb 100%);border:clamp(5px,1vw,9px) solid rgba(255,255,255,.94);border-radius:50%;box-shadow:var(--shadow-md)}
.ui-v2 .mascot-sticker{left:0;top:7%;width:clamp(58px,8vw,76px);height:clamp(58px,8vw,76px);font-family:var(--font-ui)}
.ui-v2 .mascot-name{right:0;bottom:var(--space-4);max-width:65%;padding:var(--space-2) var(--space-4)}
.ui-v2 .mascot-name b{font:800 clamp(1.2rem,3vw,1.55rem) var(--font-display)}
.ui-v2 .mascot-name small,.ui-v2 .mascot-name span{font-size:.75rem}
.ui-v2 .home-actions{width:100%;display:grid;gap:var(--space-3)}
.ui-v2 .ranked-cta{width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:42px 1fr!important;align-items:center;text-align:left;border-radius:var(--radius-lg)!important;clip-path:none!important;padding:var(--space-3) var(--space-6)!important;animation:rankedBreath 5s ease-in-out infinite}
.ui-v2 .ranked-cta>span{grid-row:1/3;font-size:1.7rem}
.ui-v2 .ranked-cta>b{font:800 var(--text-button-primary)/1.1 var(--font-ui)!important;letter-spacing:.035em}
.ui-v2 .ranked-cta>small{font-size:var(--text-meta)!important;opacity:.84}
.ui-v2 .secondary-actions{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-3)}
.ui-v2 .secondary-actions .game-secondary-button{width:100%;margin:0!important;display:flex!important;min-width:0;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left}
.ui-v2 .secondary-actions b{font:800 var(--text-button-secondary)/1.15 var(--font-ui);letter-spacing:0}
.ui-v2 .secondary-actions small{font-size:var(--text-meta);color:var(--color-muted)}
@keyframes rankedBreath{0%,88%,100%{filter:none}94%{filter:brightness(1.04)}}

/* Missões seguem o mesmo sistema de cards */
.ui-v2 .quest-board{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-height:none!important;margin:0!important;padding:var(--space-4)!important;overflow:visible!important;border-radius:var(--radius-lg)!important}
.ui-v2 .quest-board>header{min-height:48px;margin:0 0 var(--space-3);padding:0;display:flex;align-items:center;justify-content:space-between}
.ui-v2 .quest-board>header small{font-size:var(--text-meta)}
.ui-v2 .quest-board>header b{font:800 var(--text-section)/1.15 var(--font-ui)}
.ui-v2 .quest-list{height:auto!important;max-height:none!important;overflow:visible!important;display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--space-3)!important;padding:0!important}
.ui-v2 .quest-group{grid-column:1/-1;min-height:32px;margin:var(--space-2) 0 0;padding:0 var(--space-1);font-size:var(--text-meta)}
.ui-v2 .brand-footer{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:var(--space-3) var(--space-6);padding:var(--space-5);border-top:1px solid var(--color-line);color:var(--color-muted);font:700 .76rem var(--font-ui)}.ui-v2 .brand-footer nav{display:flex;gap:var(--space-2)}.ui-v2 .brand-footer button{border:0;background:transparent;color:#168ca9;font:800 inherit;cursor:pointer;padding:8px}.ui-v2 .brand-footer button:hover{text-decoration:underline}.ui-v2 .brand-footer small{font:700 inherit}
.ui-v2 .quest-item{min-width:0;min-height:92px;padding:var(--space-3)!important;gap:var(--space-3)!important;border-radius:var(--radius-md)!important;background:rgba(248,252,255,.92)!important;border:1px solid var(--color-line)!important;box-shadow:var(--shadow-xs)}
.ui-v2 .quest-item b{font:700 var(--text-card)/1.2 var(--font-ui)!important}.ui-v2 .quest-item small{font-family:var(--font-ui)!important;font-size:var(--text-meta)!important;line-height:1.3}.ui-v2 .quest-icon{width:40px!important;height:40px!important;font-size:1rem!important}.ui-v2 .quest-track{height:7px!important}.ui-v2 .quest-claim{min-height:36px!important;padding:var(--space-1) var(--space-2)!important;font-size:.75rem!important}

/* Lobby e botões de retorno */
.ui-v2 #lobby-screen{overflow:auto;padding:max(var(--space-4),var(--safe-top)) var(--safe-right) max(var(--space-6),var(--safe-bottom)) var(--safe-left)!important}
.ui-v2 .lobby-card{width:min(100%,1050px);margin:auto;padding:var(--space-6)!important;border-radius:var(--radius-xl)!important}
.ui-v2 .back{min-width:48px;min-height:48px;display:inline-flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-3)!important;border-radius:var(--radius-md)!important;font-size:var(--text-meta)!important}

/* MATCHMAKING é uma tela própria: nenhum HUD ou tabuleiro existe atrás dela. */
.ui-v2 .matchmaking-screen{align-items:center;justify-content:center;overflow:auto;padding:max(var(--space-4),var(--safe-top)) var(--safe-right) max(var(--space-4),var(--safe-bottom)) var(--safe-left);background:radial-gradient(circle at 50% 25%,rgba(111,224,239,.3),transparent 42%),linear-gradient(145deg,#eaf8fd,#d9edf7)}
.ui-v2 .matchmaking-card{width:min(92vw,760px);margin:auto;padding:clamp(24px,5vw,48px);text-align:center;border:2px solid rgba(255,255,255,.95);border-radius:var(--radius-xl);background:rgba(248,253,255,.94);box-shadow:var(--shadow-lg)}
.ui-v2 .matchmaking-card h2{margin:var(--space-2) 0 var(--space-6);font:800 var(--text-screen)/1.1 var(--font-display);color:var(--color-ink)}
.ui-v2 .matchmaking-versus{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:clamp(18px,5vw,52px)}
.ui-v2 .matchmaking-versus>strong{font:900 clamp(1.5rem,5vw,2.5rem) var(--font-display);color:#1c8eac;text-shadow:0 2px white}
.ui-v2 .matchmaking-player{min-width:0;display:grid;justify-items:center;gap:var(--space-2)}
.ui-v2 .matchmaking-player .player-avatar{width:clamp(88px,16vw,132px);height:clamp(88px,16vw,132px)}
.ui-v2 .matchmaking-player>b{max-width:100%;font:800 var(--text-section) var(--font-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-v2 .matchmaking-player>small{font:700 var(--text-meta) var(--font-ui);color:var(--color-muted)}
.ui-v2 .matchmaking-player.is-searching .player-avatar{filter:grayscale(.65);opacity:.48}.ui-v2 .matchmaking-player.is-searching .player-avatar:after{content:"?";position:absolute;inset:0;display:grid;place-items:center;color:white;font:900 2rem var(--font-display);text-shadow:0 2px 8px #245b78}
.ui-v2 .matchmaking-status{margin:var(--space-6) auto var(--space-3);display:flex;align-items:center;justify-content:center;gap:var(--space-2);font:800 var(--text-card) var(--font-ui);color:#147d9d}.ui-v2 .matchmaking-status i{width:12px;height:12px;border-radius:50%;background:#19bed0;box-shadow:0 0 0 6px rgba(25,190,208,.14);animation:mmPulse 1.2s ease-in-out infinite}.ui-v2 .matchmaking-status time{min-width:54px;color:var(--color-ink-soft)}
.ui-v2 .matchmaking-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3);margin:var(--space-5) 0}.ui-v2 .matchmaking-mode>span{display:grid;gap:var(--space-1);padding:var(--space-3);border-radius:var(--radius-md);background:#eaf7fc;border:1px solid var(--color-line)}.ui-v2 .matchmaking-mode small{font:800 .7rem var(--font-ui);letter-spacing:.1em;color:var(--color-muted)}.ui-v2 .matchmaking-mode b{font:800 var(--text-body) var(--font-ui)}
.ui-v2 #mm-cancel{width:min(100%,360px);margin-top:var(--space-4)}
@keyframes mmPulse{50%{transform:scale(.72);opacity:.55}}
.ui-v2 .intro-object.coin{position:relative;padding:9px;overflow:hidden}.ui-v2 .intro-object.coin img{width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.88)}.ui-v2 .intro-object.coin b{position:absolute;right:4px;bottom:4px;width:28px;height:28px;display:grid;place-items:center;border-radius:50%;background:#fff;color:#285b80;font:900 .75rem var(--font-ui);box-shadow:0 2px 8px rgba(18,52,81,.35)}

/* SHOP: storefront, categorias e grid lazy-scroll */
.ui-v2 .profile-modal{padding:max(var(--space-3),var(--safe-top)) var(--safe-right) max(var(--space-3),var(--safe-bottom)) var(--safe-left)!important;align-items:center;overflow:hidden}
.ui-v2 .profile-card{position:relative}.ui-v2 .modal-close{position:absolute!important;top:var(--space-3)!important;right:var(--space-3)!important;left:auto!important;width:48px!important;height:48px!important;display:grid!important;place-items:center;padding:0!important;border:1px solid rgba(58,105,139,.12)!important;border-radius:14px!important;background:rgba(238,247,251,.96)!important;color:#48647c!important;font:500 1.65rem/1 var(--font-ui)!important;box-shadow:0 3px 0 rgba(54,102,132,.12)!important;z-index:30}.ui-v2 .modal-close:hover{transform:translateY(-1px);background:#fff!important}.ui-v2 .shop-back{width:48px!important;height:48px!important;position:static!important}
.ui-v2 .storefront{width:min(100%,1180px)!important;height:min(100%,900px);max-height:100%!important;padding:0!important;display:grid;grid-template-rows:auto auto minmax(0,1fr);overflow:hidden!important;border-radius:var(--radius-xl)!important;background:rgba(248,253,255,.97)!important}
.ui-v2 .shop-appbar{display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:var(--space-4);min-height:88px;padding:var(--space-3) var(--space-6);background:linear-gradient(115deg,#0c4d82,#167cb7 48%,#31b9cf);color:white}
.ui-v2 .shop-appbar .eyebrow{margin:0 0 var(--space-1);color:#ffe093}.ui-v2 .shop-appbar h2{margin:0;font-size:var(--text-screen);color:white}.ui-v2 .shop-back{color:white;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.38)}
.ui-v2 .shop-balance{display:flex;gap:var(--space-2)}
.ui-v2 .shop-tabs{min-width:0;display:flex;gap:var(--space-2);padding:var(--space-3) var(--space-6);overflow-x:auto;background:#eef8fd;border-bottom:1px solid var(--color-line);scrollbar-width:thin}
.ui-v2 .shop-tabs button{flex:0 0 auto;min-height:44px;padding:var(--space-2) var(--space-4);border:0;border-radius:var(--radius-pill);background:transparent;color:var(--color-ink-soft);font:800 var(--text-meta) var(--font-ui);cursor:pointer}
.ui-v2 .shop-tabs button.active{color:white;background:var(--gradient-primary);box-shadow:var(--shadow-xs)}
.ui-v2 .shop-scroll{min-height:0;overflow:auto;padding:var(--space-4) var(--space-6) max(var(--space-6),var(--safe-bottom));overscroll-behavior:contain}
.ui-v2 .shop-featured{display:none;margin-bottom:var(--space-4)}
.ui-v2 .shop-featured:not(:empty){display:block}
.ui-v2 .featured-product{position:relative;min-height:170px;display:grid;grid-template-columns:minmax(150px,32%) minmax(0,1fr);gap:var(--space-6);align-items:center;padding:var(--space-6);overflow:hidden;border-radius:var(--radius-lg);background:linear-gradient(120deg,#102f62,#176faa 55%,#42cad8);color:white;box-shadow:var(--shadow-md)}
.ui-v2 .featured-product figure{height:150px;margin:0;display:grid;place-items:center}.ui-v2 .featured-product figure img{max-width:100%;height:100%;object-fit:contain;border-radius:var(--radius-md)}
.ui-v2 .featured-product.featured-panda{min-height:230px;background:radial-gradient(circle at 18% 45%,rgba(255,240,159,.52),transparent 24%),radial-gradient(circle at 86% 15%,rgba(255,211,73,.34),transparent 24%),linear-gradient(120deg,#24124e,#663395 55%,#d18a24);border:2px solid #ffe28b;box-shadow:0 10px 0 #6f3c19,0 22px 45px rgba(50,26,79,.3)}.ui-v2 .featured-product.featured-panda:before,.ui-v2 .featured-product.featured-panda:after{content:"✦";position:absolute;color:#ffe58b;font-size:2rem;text-shadow:0 0 18px #ffc441;animation:legendSpark 2.4s ease-in-out infinite}.ui-v2 .featured-product.featured-panda:before{left:4%;top:12%}.ui-v2 .featured-product.featured-panda:after{right:7%;bottom:14%;animation-delay:1.1s}.ui-v2 .featured-product.featured-panda figure{height:190px;padding:12px;border-radius:50%;background:radial-gradient(circle,#fff8d0,rgba(255,202,67,.38) 62%,transparent 64%);filter:drop-shadow(0 12px 15px rgba(23,8,45,.45))}.ui-v2 .featured-product.featured-panda h3{color:#fff6c5;text-shadow:0 3px #44205f}.ui-v2 .featured-product.featured-panda .eyebrow{color:#ffe37d}.ui-v2 .cosmetic-preview-stage.featured-panda{background:radial-gradient(circle,#fff5bd 0 24%,rgba(240,177,64,.35) 48%,transparent 64%),linear-gradient(145deg,#32175f,#8b4897)!important}.ui-v2 .cosmetic-preview-stage.featured-panda:after{content:"LENDÁRIO";position:absolute;left:50%;bottom:18px;transform:translateX(-50%);padding:7px 14px;border-radius:999px;background:#fff1a8;color:#7e4d12;font:900 .72rem var(--font-ui);letter-spacing:.12em;box-shadow:0 4px 0 #b7721c}
.ui-v2 .featured-product h3{margin:var(--space-2) 0;font-size:var(--text-screen)}.ui-v2 .featured-product p{margin:0 0 var(--space-4);font-size:var(--text-body);opacity:.9}.ui-v2 .featured-product button{width:max-content;min-width:150px}
.ui-v2 .storefront .shop-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:var(--space-4)!important;padding:0!important;margin:0!important}
.ui-v2 .storefront .shop-item{--rarity-bg:linear-gradient(145deg,#fff,#f1f8fc);--rarity-border:#d9e6ee;--rarity-glow:transparent;position:relative;min-width:0;min-height:300px!important;display:grid!important;grid-template-columns:1fr!important;grid-template-rows:minmax(140px,1fr) auto auto!important;gap:var(--space-2)!important;padding:var(--space-3)!important;overflow:hidden;border:1px solid var(--rarity-border)!important;border-radius:var(--radius-lg)!important;background:var(--rarity-bg)!important;box-shadow:0 5px 0 color-mix(in srgb,var(--rarity-border),#8aa5b5 25%),0 12px 24px rgba(38,80,110,.12),0 0 22px var(--rarity-glow)!important}
.ui-v2 .storefront .shop-item figure,.ui-v2 .storefront .shop-item .frame-preview{width:100%!important;height:100%!important;min-height:140px;margin:0!important;display:grid;place-items:center;border-radius:var(--radius-md)!important;background:rgba(255,255,255,.62)!important;overflow:hidden!important}
.ui-v2 .storefront .shop-item figure img{width:100%!important;height:100%!important;max-height:180px;object-fit:contain!important;aspect-ratio:1}
.ui-v2 .storefront .shop-item>div{min-width:0}.ui-v2 .storefront .shop-item>div b{display:block;font:700 var(--text-card)/1.2 var(--font-ui)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-v2 .storefront .shop-item>div small{display:block;margin-top:var(--space-1);font-family:var(--font-ui)!important;font-size:var(--text-meta)!important;line-height:1.25}.ui-v2 .storefront .shop-copy{display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ui-v2 .storefront .shop-item>button{width:100%;min-height:44px!important;margin:0!important;padding:var(--space-2)!important;border-radius:var(--radius-md)!important;font:800 var(--text-body) var(--font-ui)!important}
.ui-v2 .storefront .shop-rarity{top:var(--space-3)!important;right:var(--space-3)!important;padding:var(--space-1) var(--space-2)!important;border-radius:var(--radius-pill)!important;background:rgba(255,255,255,.88)!important;font-size:.75rem!important;color:var(--color-ink)!important}
.ui-v2 .storefront .rarity-rare{--rarity-bg:linear-gradient(145deg,#fff,#eaf7ff);--rarity-border:#6fbce8;--rarity-glow:rgba(71,178,236,.12)}
.ui-v2 .storefront .rarity-epic{--rarity-bg:radial-gradient(circle at 80% 10%,rgba(211,158,255,.3),transparent 34%),linear-gradient(145deg,#fff,#f5eaff);--rarity-border:#ae70df;--rarity-glow:rgba(157,94,223,.18)}
.ui-v2 .storefront .rarity-special{--rarity-bg:radial-gradient(circle at 18% 8%,rgba(255,236,154,.45),transparent 28%),linear-gradient(145deg,#fffdf5,#eefaff);--rarity-border:#e0bd62;--rarity-glow:rgba(238,192,75,.2)}
.ui-v2 .storefront .rarity-legendary{--rarity-bg:radial-gradient(circle at 80% 15%,rgba(255,225,113,.72),transparent 30%),linear-gradient(145deg,#fffdf0,#ffd987);--rarity-border:#efa51f;--rarity-glow:rgba(255,174,32,.28)}
.ui-v2 .storefront .rarity-legendary:before{inset:0!important;border-radius:inherit!important;opacity:.55;animation-duration:6s!important}.ui-v2 .storefront .rarity-legendary:after{font-size:1.2rem!important;right:var(--space-3)!important;bottom:56px!important;animation-duration:3s!important}
.ui-v2 .storefront .rarity-mythic{--rarity-bg:linear-gradient(135deg,#eaffff,#f3e9ff 38%,#fff1f7 70%,#fff8d9);--rarity-border:#7fd7eb;--rarity-glow:rgba(178,104,235,.24)}
.ui-v2 .premium-preview{margin-top:var(--space-6);border-radius:var(--radius-lg)!important}

/* BATTLE: três regiões, tabuleiro medido pelo espaço restante */
.ui-v2 .battle-layout{display:grid!important;grid-template-rows:auto minmax(0,1fr) auto;padding:var(--space-2) var(--safe-right) var(--safe-bottom) var(--safe-left)!important;overflow:hidden;background:linear-gradient(rgba(239,251,255,.34),rgba(222,244,250,.58))}
.ui-v2 .battle-top-hud,.ui-v2 .battle-bottom-hud{position:relative;z-index:12;width:min(100%,var(--battle-max));min-width:0;max-width:100%;margin:auto;border:1px solid rgba(255,255,255,.9);background:rgba(250,253,255,.9);box-shadow:var(--shadow-xs);backdrop-filter:blur(14px)}
.ui-v2 .battle-top-hud{height:auto!important;min-height:64px;padding:var(--space-2) var(--space-3);display:grid!important;grid-template-columns:minmax(160px,1fr) auto minmax(72px,.35fr);gap:var(--space-3);border-radius:var(--radius-lg) var(--radius-lg) var(--radius-md) var(--radius-md)}
.ui-v2 .battle-bottom-hud{display:grid;grid-template-columns:minmax(210px,.65fr) minmax(280px,1.35fr);gap:var(--space-3);padding:var(--space-2) var(--space-3);border-radius:var(--radius-md) var(--radius-md) var(--radius-lg) var(--radius-lg)}
.ui-v2 .battle-bottom-hud .battle-hud{height:auto!important;min-height:54px;padding:0}
.ui-v2 .combatant{min-width:0!important;gap:var(--space-2)}.ui-v2 .combatant>span:last-child{min-width:0}.ui-v2 .combatant b{max-width:100%;font-size:var(--text-body)!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-v2 .combatant small,.ui-v2 .survivors small{font-size:.75rem!important}.ui-v2 .battle-avatar{width:48px!important;height:48px!important;flex:0 0 48px}
.ui-v2 .battle-status{min-width:0;max-width:100%;display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.ui-v2 .battle-layout .history{display:none!important}
.ui-v2 .turn-banner{position:static!important;transform:none!important;min-width:0;max-width:180px;padding:var(--space-2) var(--space-3);overflow:hidden;border-radius:var(--radius-pill);background:#e4f9fc;color:#138aa0!important;text-align:center;text-overflow:ellipsis;white-space:nowrap;font:800 var(--text-meta) var(--font-ui)!important;letter-spacing:.1em}
.ui-v2 .turn-banner.enemy{background:#fff0f3;color:#ca4a64!important}
.ui-v2 .timer-wrap{position:relative!important;inset:auto!important;width:48px!important;height:48px!important;flex:0 0 48px}.ui-v2 .timer-wrap b{font:800 1rem var(--font-ui)!important}
.ui-v2 .survivors{min-width:64px;align-items:flex-end;justify-self:end}.ui-v2 .survivors b{font:800 1.5rem var(--font-display)!important}
.ui-v2 .battle-stage{container-type:size;min-width:0;min-height:0;width:100%;max-width:100%;padding:var(--space-2);overflow:hidden!important}
.ui-v2 .board{--board-cols:4;--board-rows:4;--board-ratio:1;--token-ratio:.78;--token-largura:92%;--token-altura:86%;position:relative!important;width:min(100%,var(--battle-max))!important;height:auto!important;max-width:100%!important;max-height:100%!important;aspect-ratio:var(--board-ratio)!important;gap:clamp(4px,1cqw,8px)!important;padding:clamp(10px,1.6cqw,18px)!important;overflow:hidden;border:2px solid rgba(255,255,255,.96)!important;border-radius:clamp(18px,3cqw,30px)!important;background-image:linear-gradient(rgba(255,255,255,.08),rgba(255,255,255,.08)),url('assets/arena-tournament-mat-v1.png')!important;background-position:center!important;background-size:cover!important;box-shadow:inset 0 2px 0 white,inset 0 -10px 22px rgba(61,139,175,.14),0 10px 0 rgba(66,133,161,.2),0 22px 42px rgba(42,83,112,.18)!important}
@supports(width:1cqw){.ui-v2 .board{width:min(96cqw,calc(94cqh * var(--board-ratio)),var(--battle-max))!important}}
.ui-v2 .cell{position:relative;padding:0!important;min-width:0;min-height:0;overflow:visible!important;border:1px solid rgba(71,142,172,.16)!important;border-radius:clamp(8px,1.4cqw,14px)!important;background:linear-gradient(150deg,rgba(255,255,255,.22),rgba(132,204,222,.08))!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.5);isolation:isolate;opacity:1!important}
.ui-v2 .cell:before{content:"";position:absolute;z-index:2!important;inset:clamp(3px,.7cqw,7px)!important;border-radius:clamp(6px,1cqw,11px)!important;border:1px solid rgba(255,255,255,.28)!important;background:linear-gradient(180deg,transparent 0 64%,rgba(50,137,171,.08))!important;pointer-events:none}.ui-v2 .cell.empty{opacity:.78!important}
.ui-v2 .cell.selected{background:rgba(207,248,253,.22)!important;outline:3px solid #19b7cc;outline-offset:-3px;box-shadow:0 0 0 2px rgba(255,255,255,.88),0 0 18px rgba(22,191,212,.38)!important;animation:selectedTile 1.15s ease-in-out infinite}.ui-v2 .cell.valid{background:rgba(255,244,194,.18)!important;outline:2px solid rgba(239,182,72,.62);outline-offset:-3px;box-shadow:none!important}.ui-v2 .cell.attack-target{background:rgba(255,229,234,.12)!important;outline:3px solid #ee6079;outline-offset:-4px}
/* A CELULA decide o TAMANHO; a ARTE decide a PROPORCAO.
   A versao anterior media largura e altura em 86% de eixos DIFERENTES da
   celula e ainda desligava a proporcao (`aspect-ratio:auto`). Como a celula
   nao e exatamente quadrada -- gap e padding nao sao iguais nos dois eixos, e
   mudam com a arena --, o ovo saia esticado, e esticado de um jeito diferente
   em cada tabuleiro. Com `aspect-ratio` e um eixo em `auto`, o navegador
   transfere o limite de um eixo para o outro: e `contain` de verdade. */
.ui-v2 .cell>.piece,.ui-v2 .board:not(.strategy-board) .cell>.piece,.ui-v2 .board.strategy-board .cell>.piece{height:var(--token-altura)!important;width:auto!important;aspect-ratio:var(--token-ratio)!important;max-width:var(--token-largura)!important;max-height:var(--token-altura)!important;margin:auto;filter:none!important;transform:none}
.ui-v2 .piece>div,.ui-v2 .piece .front.chess-front,.ui-v2 .board.strategy-board .piece .front.chess-front{inset:0!important;max-width:100%;max-height:100%}
/* `background-size:150% 100%` escalava o verso 1,5x so na horizontal --
   o equivalente exato de um `fill` sobre artwork. A caixa ja tem a
   proporcao certa, entao o gradiente acompanha 1:1. */
.ui-v2 .piece .back,.ui-v2 .board.strategy-board .piece .back{inset:0!important;background-size:100% 100%!important;filter:drop-shadow(0 3px 3px rgba(35,75,102,.25))!important}
.ui-v2 .piece .beast.chess-beast{inset:0!important;width:100%;height:100%;background-size:400% 200%!important;filter:drop-shadow(0 3px 3px rgba(35,75,102,.22))!important}
.ui-v2 .piece .chess-front .power{bottom:5%!important;width:33%!important;min-width:33%!important;max-width:44%!important;aspect-ratio:1;padding:0!important;font-size:clamp(.78rem,3.8cqw,1.9rem)!important;border-width:2px!important;box-shadow:inset 0 2px 2px rgba(255,255,255,.55),0 0 0 2px #fff,0 0 0 4px var(--owner),0 3px 5px rgba(28,58,84,.24)!important}
.ui-v2 .piece .chess-front .owner-tag{left:12%!important;top:11%!important;width:clamp(16px,3cqw,24px)!important;height:clamp(16px,3cqw,24px)!important;font-size:clamp(.55rem,1.6cqw,.75rem)!important}
.ui-v2 .board.strategy-board{--token-largura:92%;--token-altura:90%}.ui-v2 .board.strategy-board .piece .chess-front .power{font-size:clamp(.65rem,2.2cqw,1.25rem)!important}
.ui-v2 .cell>.piece{z-index:10!important}.ui-v2 .piece .power,.ui-v2 .piece .owner-tag{z-index:12!important}.ui-v2 .move-arrow{z-index:4!important;width:clamp(14px,2.4cqw,22px)!important;height:clamp(14px,2.4cqw,22px)!important;border:2px solid white!important;border-radius:6px!important;font-size:clamp(.55rem,1.2cqw,.8rem)!important;box-shadow:0 2px 0 #a87822,0 4px 8px rgba(80,61,22,.2)!important;animation:arrowBounce 1s ease-in-out infinite!important}.ui-v2 .attack-target .move-arrow{top:6px;right:6px;transform:none!important}
.ui-v2 .action-bar{min-width:0;max-width:100%;height:auto!important;min-height:54px;border:0!important;gap:var(--space-2)}.ui-v2 .action-bar>div{min-width:0}.ui-v2 .action-bar b{font:800 var(--text-body) var(--font-ui)!important}.ui-v2 .action-bar small{display:block!important;font-size:var(--text-meta)!important}.ui-v2 .action-bar button{min-height:44px;padding:var(--space-2) var(--space-3)!important}

/* Auth e resultado também respeitam safe area e escala de texto */
.ui-v2 #auth-screen,.ui-v2 #result-screen{padding:max(var(--space-3),var(--safe-top)) var(--safe-right) max(var(--space-3),var(--safe-bottom)) var(--safe-left)}
.ui-v2 .auth-card h2{font-size:var(--text-display)!important}.ui-v2 .auth-card input{min-height:52px;font-size:1rem}.ui-v2 .result-card{max-height:100%;border-radius:var(--radius-xl)!important}.ui-v2 .result-card h2{font-size:clamp(2.5rem,8vw,4.2rem)!important}.ui-v2 .result-actions{padding-bottom:max(var(--space-3),var(--safe-bottom))}
.ui-v2 .field-help{display:block;margin-top:var(--space-1);font:600 var(--text-meta)/1.35 var(--font-ui);color:var(--color-muted)}

/* MEDIUM 600–839 */
@media (min-width:600px) and (max-width:839px){
  .ui-v2 .game-topbar__inner{grid-template-columns:auto minmax(200px,1fr) auto 48px}.ui-v2 .logout-btn{display:none}.ui-v2 .rank-hud{min-width:168px}.ui-v2 .account-main{display:none}
  .ui-v2 .home-hero-layout{grid-template-columns:minmax(0,1fr) minmax(230px,.68fr);min-height:270px}.ui-v2 .mascot-hero{width:min(100%,320px)!important}
  .ui-v2 .storefront .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
  .ui-v2 .battle-bottom-hud{grid-template-columns:minmax(190px,.55fr) minmax(260px,1.45fr)}
}
@media (max-width:599px){.ui-v2 .matchmaking-card{width:100%;padding:var(--space-5) var(--space-3)}.ui-v2 .matchmaking-versus{gap:var(--space-2)}.ui-v2 .matchmaking-player .player-avatar{width:84px;height:84px}.ui-v2 .matchmaking-player>b{font-size:1rem}.ui-v2 .matchmaking-mode{grid-template-columns:1fr}.ui-v2 .matchmaking-mode>span:last-child{display:none}}

/* A faixa inicial de tablet ainda não comporta título promocional + mascote
   lado a lado sem colisão. Mantém o breakpoint central, mas muda a composição
   somente quando o espaço medido é realmente suficiente. */
@media (min-width:600px) and (max-width:699px){
  .ui-v2 .home-hero-layout{grid-template-columns:1fr;gap:var(--space-4)}
  .ui-v2 .mascot-hero{width:min(70vw,300px)!important;justify-self:center}
}

/* COMPACT <600 */
@media (max-width:599px){
  .ui-v2{font-size:16px}.ui-v2 .game-topbar{padding-bottom:var(--space-2)!important}.ui-v2 .game-topbar__inner{grid-template-columns:48px minmax(0,1fr) 48px;grid-template-rows:48px 38px;column-gap:var(--space-2);row-gap:var(--space-1)}
  .ui-v2 .brand{width:48px;grid-column:1;grid-row:1}.ui-v2 .brand>span:last-child{display:none!important}.ui-v2 .account-hud{grid-column:2;grid-row:1;justify-content:flex-start;margin-left:0!important;min-width:0}.ui-v2 .account-main{width:auto;min-width:0;flex:1}.ui-v2 .account-main b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ui-v2 .account-main small{display:none}.ui-v2 .rank-hud{display:none}.ui-v2 .wallet{grid-column:1/4;grid-row:2;justify-content:center}.ui-v2 #sound-btn{grid-column:3;grid-row:1}.ui-v2 .currency-chip{min-height:36px;padding:var(--space-1) var(--space-2);font-size:.875rem}.ui-v2 .currency-chip img{width:20px;height:20px}.ui-v2 .logout-btn{display:none}
  .ui-v2 .home-scroll{padding-top:var(--space-4)}.ui-v2 .home-hero-layout{grid-template-columns:1fr;gap:var(--space-4);min-height:0}.ui-v2 .season-hero h1{font-size:clamp(2rem,11vw,3rem)}.ui-v2 .mascot-hero{width:min(74vw,300px)!important;justify-self:center}.ui-v2 .mascot-name{max-width:72%}
  .ui-v2 .secondary-actions{grid-template-columns:1fr}.ui-v2 .quest-list{grid-template-columns:1fr!important}.ui-v2 .quest-item{min-height:88px}
  .ui-v2 .profile-modal{padding-left:var(--safe-left)!important;padding-right:var(--safe-right)!important}.ui-v2 .storefront{border-radius:var(--radius-lg)!important}.ui-v2 .shop-appbar{grid-template-columns:48px minmax(0,1fr);padding:var(--space-3)}.ui-v2 .shop-appbar .shop-balance{grid-column:2}.ui-v2 .shop-tabs{padding:var(--space-2) var(--space-3)}.ui-v2 .shop-scroll{padding:var(--space-3)}.ui-v2 .storefront .shop-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--space-3)!important}.ui-v2 .storefront .shop-item{min-height:260px!important;padding:var(--space-2)!important}.ui-v2 .storefront .shop-item figure,.ui-v2 .storefront .shop-item .frame-preview{min-height:112px}.ui-v2 .featured-product{grid-template-columns:110px minmax(0,1fr);gap:var(--space-3);padding:var(--space-4)}.ui-v2 .featured-product figure{height:110px}.ui-v2 .featured-product h3{font-size:var(--text-section)}
  .ui-v2 .battle-layout{padding-left:var(--safe-left)!important;padding-right:var(--safe-right)!important}.ui-v2 .battle-top-hud{grid-template-columns:minmax(0,1fr) auto auto;gap:var(--space-2);padding:var(--space-1) var(--space-2);min-height:58px}.ui-v2 .battle-avatar{width:42px!important;height:42px!important;flex-basis:42px}.ui-v2 .combatant small{display:none}.ui-v2 .combatant b{font-size:.875rem!important}.ui-v2 .turn-banner{min-width:0;padding:var(--space-1) var(--space-2);font-size:.75rem!important;letter-spacing:.04em}.ui-v2 .timer-wrap{width:42px!important;height:42px!important;flex-basis:42px}.ui-v2 .survivors{min-width:42px}.ui-v2 .survivors b{font-size:1.25rem!important}.ui-v2 .survivors small{font-size:.625rem!important}.ui-v2 .battle-bottom-hud{grid-template-columns:1fr;gap:var(--space-1);padding:var(--space-1) var(--space-2)}.ui-v2 .battle-bottom-hud .battle-hud{min-height:42px}.ui-v2 .action-bar{min-height:48px}.ui-v2 .action-bar small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-v2 .action-bar button{min-height:40px!important}.ui-v2 .cell>.piece,.ui-v2 .board:not(.strategy-board) .cell>.piece{--token-altura:86%}
}

/* LANDSCAPE curto: preserva tabuleiro e remove apenas metadados redundantes */
@media (max-height:500px) and (orientation:landscape){
  .ui-v2 .game-topbar{min-height:58px;padding-top:max(2px,env(safe-area-inset-top,0px))!important;padding-bottom:4px!important}.ui-v2 .game-topbar__inner{grid-template-columns:auto minmax(190px,1fr) auto 44px auto}.ui-v2 .brand-mark{width:40px;height:40px}.ui-v2 .player-avatar--small{width:40px;height:40px}.ui-v2 .account-main small,.ui-v2 .rank-hud small,.ui-v2 .rank-mini{display:none}.ui-v2 .rank-hud{min-height:42px}.ui-v2 .currency-chip{min-height:34px}.ui-v2 .game-icon-button{width:44px;height:44px;min-width:44px;min-height:44px}
  .ui-v2 .home-hero-layout{grid-template-columns:minmax(0,1fr) 220px;min-height:190px}.ui-v2 .season-hero h1{font-size:2.15rem}.ui-v2 .mascot-hero{width:210px!important}.ui-v2 .secondary-actions{grid-template-columns:repeat(3,1fr)}
  .ui-v2 .battle-top-hud{min-height:48px}.ui-v2 .battle-bottom-hud{grid-template-columns:190px minmax(280px,1fr);padding-block:3px}.ui-v2 .battle-bottom-hud .battle-hud,.ui-v2 .action-bar{min-height:42px}.ui-v2 .battle-stage{padding:3px}.ui-v2 .battle-avatar{width:38px!important;height:38px!important;flex-basis:38px}.ui-v2 .timer-wrap{width:40px!important;height:40px!important;flex-basis:40px}.ui-v2 .action-bar small{display:none!important}.ui-v2 .board{gap:4px!important;padding:5px!important}
  .ui-v2 .storefront{height:100%}.ui-v2 .shop-appbar{min-height:64px;padding-block:var(--space-2)}.ui-v2 .shop-appbar .eyebrow{display:none}.ui-v2 .shop-tabs{padding-block:var(--space-1)}.ui-v2 .shop-tabs button{min-height:40px}.ui-v2 .storefront .shop-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

@media(prefers-reduced-motion:reduce){.ui-v2 .ranked-cta{animation:none!important}.ui-v2 .storefront .rarity-legendary:before,.ui-v2 .storefront .rarity-legendary:after{animation:none!important}}


/* ======================================================================== */
/* === FASE VISUAL — chips, moldura, proporção da peça e CTA da loja ===== */
/* ======================================================================== */

/* ---- 1. CHIPS DE MOEDA E GEMA -----------------------------------------
   Eram `<span>` sem manipulador: clicar não fazia nada, e nada na aparência
   sugeria que fossem clicáveis. Agora são botões, e parecem botões.        */
.ui-v2 .wallet .currency-chip{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.42rem .7rem;min-height:40px;
  border:2px solid rgba(255,255,255,.9);border-radius:999px;
  background:linear-gradient(160deg,#fffdf5,#ffeec4);
  box-shadow:0 3px 0 rgba(176,132,32,.35),0 6px 12px rgba(84,63,15,.14);
  color:#6b5115;font:800 .95rem/1 'Chakra Petch',system-ui,sans-serif;
  cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease;
}
.ui-v2 .wallet .currency-chip img{width:20px;height:20px}
.ui-v2 .wallet .currency-chip:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(176,132,32,.35),0 10px 18px rgba(84,63,15,.18)}
.ui-v2 .wallet .currency-chip:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(176,132,32,.35)}
.ui-v2 .wallet .currency-chip:focus-visible{outline:3px solid var(--color-cyan);outline-offset:2px}
.ui-v2 .wallet .currency-chip--premium{
  background:linear-gradient(160deg,#f4fdff,#cdefff);
  border-color:rgba(255,255,255,.95);color:#0f5c86;
  box-shadow:0 3px 0 rgba(21,110,155,.32),0 6px 12px rgba(12,64,99,.16);
}
/* O `+` comunica aquisição sem precisar de texto. Discreto de propósito. */
.ui-v2 .chip-plus{
  display:grid;place-items:center;width:20px;height:20px;margin-left:.1rem;
  border-radius:50%;background:#16bfd4;color:#fff;font:900 .85rem/1 'Chakra Petch';
  font-style:normal;box-shadow:0 2px 0 rgba(10,86,116,.5);
}

/* ---- 2. LOJA DE DIAMANTES --------------------------------------------- */
.ui-v2 .gem-card,.ui-v2 .coin-card{width:min(680px,92vw);max-height:88vh;overflow:auto}
.ui-v2 .gem-balance{
  display:flex;align-items:center;gap:.6rem;margin:.6rem 0 1.1rem;
  padding:.7rem 1rem;border-radius:14px;background:rgba(226,246,255,.7);
  border:2px solid rgba(255,255,255,.9);
}
.ui-v2 .gem-balance img{width:28px;height:28px}
.ui-v2 .gem-balance b{font:900 1.5rem/1 'Chakra Petch';color:#0f5c86}
.ui-v2 .gem-balance small{color:#6d8199;font-weight:700}
.ui-v2 .coin-balance{background:rgba(255,246,224,.75)}
.ui-v2 .coin-balance b{color:#8a6412}
.ui-v2 .gem-packs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.7rem}
.ui-v2 .gem-pack{
  position:relative;display:grid;gap:.28rem;justify-items:center;
  padding:1rem .6rem .8rem;border:2px solid rgba(255,255,255,.95);border-radius:16px;
  background:linear-gradient(165deg,#fbfeff,#dff2fb);
  box-shadow:0 4px 0 rgba(33,110,150,.24),0 10px 20px rgba(24,76,112,.14);
  cursor:pointer;transition:transform .14s ease,box-shadow .14s ease;
}
.ui-v2 .gem-pack:hover{transform:translateY(-3px);box-shadow:0 7px 0 rgba(33,110,150,.24),0 14px 26px rgba(24,76,112,.2)}
.ui-v2 .gem-pack--destaque{border-color:#ffd05e;background:linear-gradient(165deg,#fffdf3,#ffeec2)}
.ui-v2 .gem-tag{
  position:absolute;top:-11px;left:50%;transform:translateX(-50%);
  padding:.18rem .55rem;border-radius:999px;background:#f0b429;color:#4a3403;
  font:900 .6rem/1.6 'Chakra Petch';letter-spacing:.06em;white-space:nowrap;
  box-shadow:0 2px 0 rgba(150,104,10,.45);
}
.ui-v2 .gem-amount{display:flex;align-items:center;gap:.35rem}
.ui-v2 .gem-amount img{width:26px;height:26px}
.ui-v2 .gem-amount b{font:900 1.35rem/1 'Chakra Petch';color:#0f5c86}
.ui-v2 .gem-pack small{color:#66798f;font-weight:800;letter-spacing:.06em;font-size:.7rem;text-transform:uppercase}
.ui-v2 .gem-pack em{font-style:normal;color:#1a9d5e;font-weight:800;font-size:.72rem}
.ui-v2 .gem-tier-icon{width:52px;height:52px;display:grid;place-items:center;align-self:center;border-radius:18px;background:linear-gradient(145deg,#f7fdff,#bdefff);border:2px solid white;box-shadow:inset 0 -5px 10px rgba(35,141,190,.2),0 5px 0 rgba(25,111,159,.14);color:#21a8dc;font-size:1.7rem;text-shadow:0 2px white}
.ui-v2 .gem-price{
  margin-top:.35rem;padding:.32rem .8rem;border-radius:999px;
  background:#16bfd4;color:#fff;font:900 .85rem/1 'Chakra Petch';
  box-shadow:0 3px 0 rgba(10,86,116,.45);
}
.ui-v2 .gem-note{margin-top:1rem;padding:.75rem .9rem;border-radius:12px;
  background:rgba(255,244,214,.75);border:1px solid #f0d79a;color:#6b5115;
  font-size:.82rem;line-height:1.5}
.ui-v2 .coin-sources{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.ui-v2 .coin-sources li{display:grid;padding:.65rem .8rem;border-radius:12px;
  background:rgba(240,248,253,.8);border:1px solid rgba(120,170,200,.25)}
.ui-v2 .coin-sources b{font:800 .92rem 'Chakra Petch';color:#2c4a68}
.ui-v2 .coin-sources small{color:#6d8199;margin-top:.15rem}

/* ---- 3. FRAMEDAVATAR: moldura é peça, não borda -----------------------
   A Aurora Dourada não aparecia porque era `border-color` + `box-shadow` na
   classe `.frame_gold`, e `.ui-v2 .avatar-button` — especificidade maior,
   arquivo posterior — repintava tudo com borda branca e anel ciano. Aumentar
   a especificidade da borda resolveria o sintoma e manteria o erro de
   conceito: moldura comprável precisa ENVOLVER o retrato, com camadas
   próprias que ninguém mais disputa.                                       */
.ui-v2 .framed-avatar{position:relative;overflow:visible!important;isolation:isolate}
.ui-v2 .framed-avatar>img{position:relative;z-index:2;border-radius:inherit}
.ui-v2 .framed-avatar>.fa-aura,
.ui-v2 .framed-avatar>.fa-back,
.ui-v2 .framed-avatar>.fa-front,
.ui-v2 .framed-avatar>.fa-orn{
  position:absolute;pointer-events:none;border-radius:inherit;content:'';
}
.ui-v2 .framed-avatar>.fa-aura{inset:-18%;z-index:0}
.ui-v2 .framed-avatar>.fa-back{inset:-9%;z-index:1}
.ui-v2 .framed-avatar>.fa-front{inset:-6%;z-index:3}
.ui-v2 .framed-avatar>.fa-orn{inset:-12%;z-index:4}

/* Aurora Dourada — anel externo, anel interno, brilho e quatro ornamentos. */
.ui-v2 .framed-avatar.frame_gold>.fa-back{
  background:conic-gradient(from 210deg,#fff6cf,#f2c033 18%,#a8720c 34%,#ffe89a 52%,#e0a71b 70%,#8f5f06 86%,#fff6cf);
  box-shadow:0 4px 10px rgba(112,74,6,.35);
}
.ui-v2 .framed-avatar.frame_gold>.fa-front{
  inset:-18%;border:0;background:url('assets/frames/aurora-front.svg') center/contain no-repeat;
  filter:drop-shadow(0 2px 2px rgba(112,74,6,.4));
}
.ui-v2 .framed-avatar.frame_gold>.fa-aura{
  background:radial-gradient(circle,rgba(255,206,84,.42),transparent 68%);
}
.ui-v2 .framed-avatar.frame_gold>.fa-orn{
  background:
    radial-gradient(circle at 50% 0,#fff3c4 0 14%,transparent 15%),
    radial-gradient(circle at 50% 100%,#fff3c4 0 14%,transparent 15%),
    radial-gradient(circle at 0 50%,#ffdf87 0 11%,transparent 12%),
    radial-gradient(circle at 100% 50%,#ffdf87 0 11%,transparent 12%);
  filter:drop-shadow(0 1px 1px rgba(120,80,8,.5));
}
.ui-v2 .framed-avatar.frame_gold>.fa-back{animation:auroraGira 7s linear infinite}
@keyframes auroraGira{to{filter:hue-rotate(12deg)}}

/* Prisma Vivo — material iridescente que desliza. */
.ui-v2 .framed-avatar.frame_prism>.fa-back{
  background:conic-gradient(from 0deg,#ff9ad5,#9ad7ff,#a6ffcf,#ffe89a,#ff9ad5);
  animation:prismaGira 6s linear infinite;
}
.ui-v2 .framed-avatar.frame_prism>.fa-front{inset:-18%;border:0;background:url('assets/frames/prism-front.svg') center/contain no-repeat;filter:drop-shadow(0 0 4px rgba(116,110,255,.55))}
.ui-v2 .framed-avatar.frame_prism>.fa-aura{background:radial-gradient(circle,rgba(160,220,255,.4),transparent 70%)}
@keyframes prismaGira{to{transform:rotate(360deg)}}

/* Molduras de rank — mesma estrutura, materiais distintos. */
.ui-v2 .framed-avatar.frame_basic>.fa-back{background:linear-gradient(160deg,#e9f6fb,#9cc9dd)}
.ui-v2 .framed-avatar.frame_copper>.fa-back{background:linear-gradient(160deg,#ffd9b0,#b3712f)}
.ui-v2 .framed-avatar.frame_rabbit>.fa-back{background:linear-gradient(160deg,#ffe3ef,#d47ba0)}
.ui-v2 .framed-avatar.frame_fox>.fa-back{background:linear-gradient(160deg,#ffd9b8,#e07a2a)}
.ui-v2 .framed-avatar.frame_wolf>.fa-back{background:linear-gradient(160deg,#dde8f7,#6d84ab)}
.ui-v2 .framed-avatar.frame_tiger>.fa-back{background:linear-gradient(160deg,#ffe0a8,#d98a12)}
.ui-v2 .framed-avatar.frame_bear>.fa-back{background:linear-gradient(160deg,#e8dcc9,#8a6a45)}
.ui-v2 .framed-avatar.frame_lion>.fa-back{background:linear-gradient(160deg,#fff0b8,#c99312)}
.ui-v2 .framed-avatar.frame_legend>.fa-back{background:conic-gradient(from 140deg,#fff2c0,#e3b02a,#7b4f04,#fff2c0)}
.ui-v2 .framed-avatar.frame_basic>.fa-front,
.ui-v2 .framed-avatar.frame_copper>.fa-front,
.ui-v2 .framed-avatar.frame_rabbit>.fa-front,
.ui-v2 .framed-avatar.frame_fox>.fa-front,
.ui-v2 .framed-avatar.frame_wolf>.fa-front,
.ui-v2 .framed-avatar.frame_tiger>.fa-front,
.ui-v2 .framed-avatar.frame_bear>.fa-front,
.ui-v2 .framed-avatar.frame_lion>.fa-front,
.ui-v2 .framed-avatar.frame_legend>.fa-front{border:2px solid rgba(255,255,255,.92)}

/* A borda ciano padrão do botão de avatar sai de cena quando há moldura:
   duas molduras concorrentes no mesmo retrato é ruído, não decoração. */
.ui-v2 .avatar-button.framed-avatar{border-color:transparent!important;box-shadow:none!important}

/* ---- 4. PROPORÇÃO DA PEÇA ---------------------------------------------
   O número dominava: o medalhão ocupava 33% da largura da peça, com a fera
   ao fundo. A regra passa a ser a do briefing — personagem manda, número
   informa. Medalhão ~20% da peça e numeral ~50% do medalhão.               */
/* A PEÇA vira o contêiner de medida. Sem isso, `cqw` dentro dela resolvia
   contra um ancestral bem maior (a área de batalha, ~800px): o `clamp` do
   número estourava no teto e o algarismo ocupava 82% do medalhão. Medindo
   contra a própria peça, a proporção do briefing vira aritmética simples. */
.ui-v2 .cell>.piece{container-type:size}

.ui-v2 .piece .chess-front .power{
  /* medalhão ≈ 30% da peça (≈18% da célula) e algarismo ≈ 53% do medalhão */
  width:30cqw!important;min-width:0!important;max-width:30cqw!important;
  height:30cqw!important;aspect-ratio:auto!important;
  bottom:4%!important;padding:0!important;line-height:1!important;
  display:grid!important;place-items:center!important;
  font-size:16cqw!important;
  border-width:2px!important;
}
.ui-v2 .board.strategy-board .piece .chess-front .power{
  width:34cqw!important;max-width:34cqw!important;height:34cqw!important;font-size:18cqw!important;
}

/* A fera cresce ~18% sem sair da célula. Usa a propriedade `scale`, e não
   `transform`: a respiração da peça anima `transform`, e uma escala escrita
   ali seria sobrescrita a cada quadro — foi o que aconteceu na primeira
   tentativa (a matriz computada voltava em 1.0). */
.ui-v2 .piece .beast.chess-beast{scale:1.18;transform-origin:50% 64%}
.ui-v2 .board.strategy-board .piece .beast.chess-beast{scale:1.12}

/* ---- 5. CÉLULA LIMPA E SOMBRA NO CHÃO ---------------------------------
   Nada de ornamento atrás da cabeça: o topo da célula fica vazio de
   propósito, porque é onde o olho procura a fera. A profundidade vem de uma
   elipse discreta no chão, não de uma barra atrás do personagem.           */
.ui-v2 .cell:before{
  inset:clamp(2px,.45cqw,5px)!important;border-radius:inherit!important;
  border:1px solid rgba(255,255,255,.5)!important;
  background:linear-gradient(180deg,transparent 0 62%,rgba(103,167,196,.09) 100%)!important;
}
.ui-v2 .cell:after{
  content:"";position:absolute;left:22%;right:22%;bottom:7%;height:9%;
  border-radius:50%;background:radial-gradient(ellipse,rgba(40,86,118,.28),transparent 72%);
  pointer-events:none;z-index:1;
}
.ui-v2 .cell.empty:after{opacity:.35}

/* ---- 6. LOJA & COLEÇÃO: CTA comercial, não mais um botão igual --------- */
.ui-v2 .home-actions .shop-shortcut{
  position:relative;overflow:hidden;
  grid-column:1/-1;
  display:grid!important;gap:.15rem .9rem;align-items:center;
  grid-template-columns:1fr auto;
  grid-template-areas:"titulo teaser" "sub teaser";
  padding:.95rem 1.1rem!important;min-height:82px;
  border:2px solid rgba(255,255,255,.9)!important;border-radius:18px!important;
  background:linear-gradient(105deg,#123f6d 0%,#1b6ba8 46%,#1fa0c4 100%)!important;
  color:#fff!important;
  box-shadow:0 6px 0 rgba(11,49,84,.5),0 16px 30px rgba(12,52,88,.28)!important;
  text-align:left;
}
.ui-v2 .home-actions .shop-shortcut b{grid-area:titulo;align-self:end;color:#fff;font-size:1.05rem;letter-spacing:.04em}
.ui-v2 .home-actions .shop-shortcut small{grid-area:sub;align-self:start;color:rgba(233,247,255,.86);font-size:.76rem}
.ui-v2 .home-actions .shop-shortcut:after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.22) 46%,transparent 60%);
  transform:translateX(-120%);animation:shopSweep 5.5s ease-in-out infinite;
}
.ui-v2 .home-actions .shop-shortcut .shop-teaser{
  grid-area:teaser;display:flex;align-items:center;z-index:2;
}
.ui-v2 .shop-teaser i{
  width:38px;height:38px;border-radius:12px;margin-left:-10px;
  border:2px solid rgba(255,255,255,.92);box-shadow:0 3px 8px rgba(6,32,58,.4);
  background-size:cover;background-position:center;
}
.ui-v2 .shop-teaser i:first-child{margin-left:0}
.ui-v2 .shop-teaser .t-avatar{background-image:url('assets/critters/fox.webp')}
.ui-v2 .shop-teaser .t-frame{background:conic-gradient(from 210deg,#fff6cf,#f2c033 30%,#a8720c 60%,#fff6cf)}
.ui-v2 .shop-teaser .t-effect{background:radial-gradient(circle at 50% 45%,#fff 0 12%,#7ce7ff 22%,#1b6ba8 60%,#0c3a63 100%)}


/* ---- 7. POSTER PROCEDURAL DOS EFEITOS ---------------------------------
   O card mostrava o algarismo "7" como artwork do produto. Efeito de
   eliminacao e MOVIMENTO: um numero parado nao diz nada sobre ele. Cada
   poster desenha o que o efeito FAZ, em CSS puro -- nenhuma arte nova,
   nenhum asset a mais para carregar. A peca de exemplo continua ali, mas
   como cenario do efeito, nao como produto.

   So um preview anima por vez, e so ao toque: animar dezenas de cards ao
   mesmo tempo custa quadro e nao ajuda ninguem a escolher.                 */
.ui-v2 .fx-host{margin:0;display:block}
.ui-v2 .fx-preview{
  position:relative;display:block;width:100%;aspect-ratio:1.35;
  border-radius:14px;overflow:hidden;cursor:pointer;
  background:radial-gradient(circle at 50% 38%,#f6fdff,#cfe8f4 62%,#a9cfe2);
  border:2px solid rgba(255,255,255,.9);
  box-shadow:inset 0 2px 0 rgba(255,255,255,.85),0 3px 0 rgba(52,110,148,.2);
}
.ui-v2 .fx-stage{position:absolute;inset:0;display:grid;place-items:center}
.ui-v2 .fx-token{
  position:relative;width:30%;aspect-ratio:.78;border-radius:48% 48% 34% 34%;
  background:radial-gradient(circle at 35% 22%,#fff 0 8%,rgba(255,255,255,.5) 9% 16%,transparent 17%),
             linear-gradient(145deg,#b8f6ff,#35cae2 42%,#2385ca 80%,#17559a);
  border:2px solid #fff;box-shadow:0 3px 0 #14608f,0 7px 10px rgba(18,64,99,.28);
  z-index:2;
}
.ui-v2 .fx-layer{position:absolute;inset:0;pointer-events:none;opacity:0}
.ui-v2 .fx-play{
  position:absolute;right:8px;top:8px;width:26px;height:26px;border-radius:50%;
  display:grid;place-items:center;background:rgba(11,58,92,.72);color:#fff;
  font-size:.65rem;z-index:4;font-style:normal;
}
.ui-v2 .fx-preview-hint{
  position:absolute;left:0;right:0;bottom:0;padding:.3rem;z-index:4;
  background:linear-gradient(transparent,rgba(8,44,74,.72));
  color:#eaf7ff;font:800 .58rem/1.4 "Chakra Petch";letter-spacing:.08em;text-align:center;
}

/* Estilhaco Gelado: congela, racha, estilhaca. */
.ui-v2 .fx-frost{background:radial-gradient(circle at 50% 38%,#f4feff,#cdeefb 60%,#9fd4ea)}
.ui-v2 .fx-frost .fx-l1{background:radial-gradient(circle at 50% 45%,rgba(190,240,255,.9) 0 26%,transparent 42%)}
.ui-v2 .fx-frost .fx-l2{background:
  linear-gradient(72deg,transparent 48%,#eafcff 49% 51%,transparent 52%),
  linear-gradient(-38deg,transparent 48%,#d6f4ff 49% 51%,transparent 52%),
  linear-gradient(12deg,transparent 49%,#fff 50% 51%,transparent 52%)}
.ui-v2 .fx-frost .fx-l3{background:
  radial-gradient(circle at 32% 62%,#fff 0 4%,transparent 5%),
  radial-gradient(circle at 68% 40%,#dff6ff 0 3%,transparent 4%),
  radial-gradient(circle at 58% 72%,#fff 0 3%,transparent 4%),
  radial-gradient(circle at 40% 34%,#cfeeff 0 3%,transparent 4%)}
.ui-v2 .fx-frost.fx-running .fx-l1{animation:fxFade .5s ease-out forwards}
.ui-v2 .fx-frost.fx-running .fx-l2{animation:fxRacha .55s .18s ease-out forwards}
.ui-v2 .fx-frost.fx-running .fx-l3{animation:fxEstilhaco .6s .3s ease-out forwards}

/* Trovao: clarao, raio, faiscas. */
.ui-v2 .fx-thunder{background:radial-gradient(circle at 50% 34%,#fdfbe7,#d9e6f5 58%,#9fb3cf)}
.ui-v2 .fx-thunder .fx-l1{background:radial-gradient(circle at 50% 30%,rgba(255,255,255,.96),transparent 62%)}
.ui-v2 .fx-thunder .fx-l2{background:linear-gradient(-6deg,transparent 47.6%,#fff6a8 48% 52%,transparent 52.4%);
  clip-path:polygon(46% 0,58% 0,50% 44%,60% 44%,42% 100%,48% 52%,38% 52%)}
.ui-v2 .fx-thunder .fx-l3{background:
  radial-gradient(circle at 38% 66%,#fff09a 0 3%,transparent 4%),
  radial-gradient(circle at 62% 58%,#ffe066 0 2.5%,transparent 3.5%),
  radial-gradient(circle at 52% 78%,#fff 0 2%,transparent 3%)}
.ui-v2 .fx-thunder.fx-running .fx-l1{animation:fxFlash .38s ease-out forwards}
.ui-v2 .fx-thunder.fx-running .fx-l2{animation:fxRaio .42s ease-out forwards}
.ui-v2 .fx-thunder.fx-running .fx-l3{animation:fxEstilhaco .5s .22s ease-out forwards}

/* Inferno: chamas sobem, fumaca, dissolve. */
.ui-v2 .fx-inferno{background:radial-gradient(circle at 50% 70%,#ffe0b6,#f8c78e 55%,#e09a5c)}
.ui-v2 .fx-inferno .fx-l1{background:radial-gradient(ellipse at 50% 88%,rgba(255,138,32,.92) 0 26%,rgba(255,196,74,.5) 45%,transparent 68%)}
.ui-v2 .fx-inferno .fx-l2{background:
  radial-gradient(ellipse at 38% 82%,#ffb03a 0 12%,transparent 14%),
  radial-gradient(ellipse at 62% 78%,#ff7a18 0 11%,transparent 13%),
  radial-gradient(ellipse at 50% 68%,#ffd166 0 9%,transparent 11%)}
.ui-v2 .fx-inferno .fx-l3{background:radial-gradient(ellipse at 50% 30%,rgba(96,84,76,.55),transparent 62%)}
.ui-v2 .fx-inferno.fx-running .fx-l1{animation:fxFade .5s ease-out forwards}
.ui-v2 .fx-inferno.fx-running .fx-l2{animation:fxChama .6s ease-out forwards}
.ui-v2 .fx-inferno.fx-running .fx-l3{animation:fxFumaca .7s .2s ease-out forwards}

/* Colapso do Vazio: campo escuro, particulas para dentro, implosao. */
.ui-v2 .fx-void{background:radial-gradient(circle at 50% 45%,#2a2350,#141033 62%,#0a0820)}
.ui-v2 .fx-void .fx-token{filter:brightness(.85)}
.ui-v2 .fx-void .fx-preview-hint{background:linear-gradient(transparent,rgba(6,4,20,.85))}
.ui-v2 .fx-void .fx-l1{background:radial-gradient(circle at 50% 45%,rgba(0,0,0,.86) 0 22%,rgba(124,58,237,.42) 40%,transparent 68%)}
.ui-v2 .fx-void .fx-l2{background:
  radial-gradient(circle at 24% 30%,#8be9ff 0 2.5%,transparent 3.5%),
  radial-gradient(circle at 76% 34%,#c084fc 0 2.5%,transparent 3.5%),
  radial-gradient(circle at 30% 72%,#c084fc 0 2%,transparent 3%),
  radial-gradient(circle at 72% 70%,#8be9ff 0 2%,transparent 3%)}
.ui-v2 .fx-void .fx-l3{background:radial-gradient(circle at 50% 45%,#fff 0 3%,rgba(190,150,255,.6) 8%,transparent 22%)}
.ui-v2 .fx-void.fx-running .fx-l1{animation:fxFade .55s ease-out forwards}
.ui-v2 .fx-void.fx-running .fx-l2{animation:fxSuga .6s ease-in forwards}
.ui-v2 .fx-void.fx-running .fx-l3{animation:fxImplode .45s .38s ease-out forwards}

/* Faisca, Petalas e Coroa: os tres basicos. */
.ui-v2 .fx-spark .fx-l1{background:radial-gradient(circle at 50% 45%,rgba(255,255,255,.95) 0 12%,rgba(126,231,255,.6) 26%,transparent 52%)}
.ui-v2 .fx-spark .fx-l2{background:
  radial-gradient(circle at 30% 34%,#7ce7ff 0 3%,transparent 4%),
  radial-gradient(circle at 70% 40%,#fff 0 2.5%,transparent 3.5%),
  radial-gradient(circle at 50% 70%,#7ce7ff 0 2.5%,transparent 3.5%)}
.ui-v2 .fx-spark.fx-running .fx-l1{animation:fxFlash .42s ease-out forwards}
.ui-v2 .fx-spark.fx-running .fx-l2{animation:fxEstilhaco .5s .1s ease-out forwards}

.ui-v2 .fx-petals{background:radial-gradient(circle at 50% 40%,#fff4f8,#ffd9e6 60%,#f3b3c9)}
.ui-v2 .fx-petals .fx-l1{background:
  radial-gradient(ellipse at 32% 30%,#ff9ec4 0 5%,transparent 6%),
  radial-gradient(ellipse at 66% 36%,#ffc2d8 0 4.5%,transparent 5.5%),
  radial-gradient(ellipse at 44% 66%,#ff85b4 0 4%,transparent 5%),
  radial-gradient(ellipse at 70% 70%,#ffd5e4 0 4%,transparent 5%)}
.ui-v2 .fx-petals.fx-running .fx-l1{animation:fxPetalas .7s ease-out forwards}

.ui-v2 .fx-champion{background:radial-gradient(circle at 50% 38%,#fffbe9,#ffeeb8 58%,#f0c96a)}
.ui-v2 .fx-champion .fx-l1{background:radial-gradient(circle at 50% 40%,rgba(255,235,150,.9) 0 20%,transparent 56%)}
.ui-v2 .fx-champion .fx-l2{background:
  radial-gradient(circle at 50% 20%,#ffd45b 0 5%,transparent 6%),
  radial-gradient(circle at 32% 30%,#fff2b8 0 3%,transparent 4%),
  radial-gradient(circle at 68% 30%,#fff2b8 0 3%,transparent 4%)}
.ui-v2 .fx-champion.fx-running .fx-l1{animation:fxFlash .5s ease-out forwards}
.ui-v2 .fx-champion.fx-running .fx-l2{animation:fxEstilhaco .55s .12s ease-out forwards}

/* A peca some quando o efeito a elimina -- e o que o efeito faz. */
.ui-v2 .fx-preview.fx-running .fx-token{animation:fxSomeToken .5s .28s ease-in forwards}

@keyframes fxFade{0%{opacity:0}35%{opacity:1}100%{opacity:0}}
@keyframes fxFlash{0%{opacity:0;transform:scale(.7)}18%{opacity:1;transform:scale(1.05)}100%{opacity:0;transform:scale(1.3)}}
@keyframes fxRacha{0%{opacity:0;transform:scale(.85)}40%{opacity:1;transform:scale(1)}100%{opacity:0}}
@keyframes fxRaio{0%{opacity:0;transform:translateY(-24%) scaleY(.5)}22%{opacity:1;transform:translateY(0) scaleY(1)}70%{opacity:1}100%{opacity:0}}
@keyframes fxEstilhaco{0%{opacity:0;transform:scale(.5)}30%{opacity:1}100%{opacity:0;transform:scale(1.55)}}
@keyframes fxChama{0%{opacity:0;transform:translateY(14%) scaleY(.7)}40%{opacity:1;transform:translateY(0) scaleY(1.1)}100%{opacity:0;transform:translateY(-16%) scaleY(1.3)}}
@keyframes fxFumaca{0%{opacity:0;transform:translateY(10%) scale(.8)}45%{opacity:.85}100%{opacity:0;transform:translateY(-22%) scale(1.3)}}
@keyframes fxSuga{0%{opacity:0;transform:scale(1.5)}30%{opacity:1}100%{opacity:0;transform:scale(.12)}}
@keyframes fxImplode{0%{opacity:0;transform:scale(.1)}40%{opacity:1;transform:scale(1.25)}100%{opacity:0;transform:scale(.2)}}
@keyframes fxPetalas{0%{opacity:0;transform:translateY(-18%) rotate(-8deg)}35%{opacity:1}100%{opacity:0;transform:translateY(22%) rotate(10deg)}}
@keyframes fxSomeToken{to{opacity:0;transform:scale(.55) translateY(8%)}}

@media(prefers-reduced-motion:reduce){
  .ui-v2 .fx-preview .fx-layer{opacity:.85!important;animation:none!important}
  .ui-v2 .fx-preview .fx-token{animation:none!important}
}


/* ---- 8. MARCA -- TEMPORARIA, E ASSUMIDAMENTE TEMPORARIA ----------------
   O simbolo atual e um placeholder e continua sendo. O que da para melhorar
   sem gerar arte nova e a TIPOGRAFIA: separar FERA de FIGHT por peso e cor
   ja transforma "texto ao lado de um icone" em lockup de marca.

   Os dois slots (`data-brand-slot="mark"` e `="wordmark"`) existem para que
   trocar o simbolo por um asset profissional seja substituir um arquivo --
   sem mexer no layout. Ver `BRAND_ASSET_BRIEF.md`.                          */
.ui-v2 .brand-lockup{
  display:flex;align-items:center;gap:.65rem;
  border:0;background:none;cursor:pointer;padding:.2rem .1rem;
}
/* O simbolo NAO pode parecer um avatar: avatar e retrato em caixa arredondada,
   marca e simbolo geometrico. Hexagono resolve a confusao sem arte nova. */
/* O simbolo continua sendo o SVG existente, sem retoque. `style.css` o
   mantem em fundo transparente com `!important`, e tentar carimbar um
   hexagono por baixo so produziria um simbolo branco invisivel no cabecalho
   claro -- foi exatamente o que aconteceu na primeira tentativa. O que muda
   aqui e o TAMANHO e o espacamento; o desenho novo vem depois, do gerador de
   imagem, seguindo `BRAND_ASSET_BRIEF.md`. */
.ui-v2 .brand-lockup .brand-mark{
  width:42px;height:42px;display:grid;place-items:center;flex:0 0 42px;
}
.ui-v2 .brand-lockup .brand-mark img{width:100%;height:100%;object-fit:contain}
.ui-v2 .brand-lockup .brand-wordmark{display:grid!important;line-height:1;text-align:left}
.ui-v2 .brand-lockup .brand-wordmark b{
  font:900 1.18rem/.94 "Chakra Petch",system-ui,sans-serif;letter-spacing:.055em;
}
.ui-v2 .brand-wordmark .bw-fera{color:#123f6d}
.ui-v2 .brand-wordmark .bw-fight{color:#12a7c4;letter-spacing:.12em}
.ui-v2 .brand-wordmark .bw-tag{
  margin-top:.22rem;color:#7d93aa;font:800 .48rem/1 "Chakra Petch";letter-spacing:.19em;
}
@media(max-width:900px){
  .ui-v2 .brand-lockup .brand-wordmark .bw-tag{display:none}
  .ui-v2 .brand-lockup .brand-mark{width:36px;height:36px;flex:0 0 36px}
  .ui-v2 .brand-lockup .brand-wordmark b{font-size:1rem}
}
/* Em tela estreita o lockup vira so o simbolo. Wordmark cortado pela metade
   ("FERA F...") comunica descuido, nao marca -- e o hexagono sozinho ja
   identifica o jogo. A moldura do avatar tambem precisa de folga aqui: a
   camada de aura passa de proposito para fora do retrato. */
@media(max-width:1000px){
  .ui-v2 .brand-lockup .brand-wordmark{display:none!important}
  .ui-v2 .game-topbar__inner{gap:.55rem}
  .ui-v2 .account-hud{margin-left:.35rem}
}


/* ---- 9. NADA DESENHADO POR CIMA DA ARTE REAL --------------------------
   A cápsula deixou de ser gradiente e virou ilustração
   (`assets/pieces/discovery-egg-v3.png`). Os enfeites que existiam para a
   versão desenhada em CSS — a pata carimbada no meio e a elipse de pedestal
   embaixo — continuaram sendo pintados POR CIMA dela. Era isso que criava a
   barra clara na parte de cima da célula e o ornamento atrás da cabeça.

   Arte boa não se cobre com desenho procedural. Os dois saem; a profundidade
   vem da sombra no chão da célula, que é sutil e fica ATRÁS da peça.        */
.ui-v2 .piece .back:before,
.ui-v2 .piece .back:after{content:none!important;display:none!important}

/* A ilustração da cápsula nunca é esticada: `contain` respeita a proporção
   dela mesma, independentemente da forma da caixa. */
.ui-v2 .piece .back{
  background-size:contain!important;background-repeat:no-repeat!important;
  background-position:center bottom!important;
  border:0!important;box-shadow:none!important;
}


/* ---- 10. O POSTER NAO HERDA O BRILHO DO CARD --------------------------
   `style.css` tem `.shop-item figure i{position:absolute;inset:-45%;
   transform:translateX(-90%)}` -- o brilho varrido que passa por cima dos
   cards da loja. As camadas do poster tambem sao `<i>` dentro de um
   `<figure>`, entao herdavam esse deslocamento: a capsula de exemplo era
   jogada 38px para fora e o `overflow:hidden` a engolia. O poster ficava um
   retangulo de gradiente, sem peca nenhuma.

   Sem `!important` de proposito: a especificidade daqui ja e maior, e o
   `!important` bloquearia as proprias animacoes do preview.                */
.ui-v2 .fx-preview .fx-token{position:relative;inset:auto;transform:none;animation:none}
.ui-v2 .fx-preview .fx-layer{position:absolute;inset:0;transform:none;animation:none}


/* ---- 11. MOSTRAR/OCULTAR SENHA ----------------------------------------
   O botao fica DENTRO da caixa do campo e nao empurra nada: reservar espaco
   no `padding-right` do input evita o layout pular quando ele aparece.
   Alvo de 44px porque no celular ele precisa ser tocavel sem mira.          */
.ui-v2 .password-field{position:relative;display:grid}
.ui-v2 .password-field input{padding-right:52px!important}
.ui-v2 .password-toggle{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:44px;height:44px;display:grid;place-items:center;
  border:0;background:none;cursor:pointer;border-radius:12px;
  font-size:1.15rem;line-height:1;opacity:.5;color:#2c4a68;
  transition:opacity .15s ease,background .15s ease;
}
/* O rotulo do campo fica acima do input; o botao precisa ficar alinhado ao
   input, nao a caixa inteira. */
.ui-v2 .password-field{align-content:end}
.ui-v2 .password-toggle:hover{opacity:.85;background:rgba(22,191,212,.1)}
.ui-v2 .password-toggle:focus-visible{outline:3px solid var(--color-cyan);outline-offset:2px;opacity:1}
.ui-v2 .password-toggle.is-visible{opacity:1;color:#0f8fa8}
.ui-v2 .password-toggle svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* Senha visivel: o olho ganha um traco, para o estado ser legivel sem cor. */
.ui-v2 .password-toggle.is-visible:after{
  content:"";position:absolute;left:11px;right:11px;top:50%;height:2px;
  background:currentColor;transform:rotate(-20deg);border-radius:2px;
}

.ui-v2 .account-logout{
  min-height:52px;width:100%;margin-top:var(--space-4);display:flex;
  align-items:center;justify-content:center;gap:var(--space-2);
  border:2px solid #e66b72;border-radius:var(--radius-md);
  background:rgba(255,247,247,.9);color:#b83f4d;
  font:800 .84rem/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.08em;
  cursor:pointer;transition:transform var(--motion-fast),background var(--motion-fast);
}

/* ======================================================================
   PREMIUM VFX 2.10 — poster próprio, raridade e execução em camadas
   ====================================================================== */
.ui-v2 .shop-item.kill_effect{grid-template-columns:1fr!important;align-content:start;padding:12px!important;gap:9px!important;min-height:330px!important;overflow:visible!important}
.ui-v2 .shop-item.kill_effect .fx-host{grid-column:1/-1;width:100%}
.ui-v2 .shop-item.kill_effect .fx-preview{aspect-ratio:1.52;border-radius:18px;border:2px solid rgba(255,255,255,.95);box-shadow:inset 0 2px 0 #fff,0 7px 16px rgba(18,58,94,.22)}
.ui-v2 .shop-item.kill_effect>div{min-height:76px}.ui-v2 .shop-item.kill_effect>div b{font-size:1rem!important}.ui-v2 .shop-item.kill_effect>div small{font-size:.72rem!important;line-height:1.35!important}
.ui-v2 .fx-poster-art{position:absolute;inset:0;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:inherit!important;transition:opacity .16s ease,transform .7s cubic-bezier(.2,.8,.2,1)}
.ui-v2 .fx-preview .fx-stage{opacity:0;transition:opacity .12s ease;background:rgba(8,28,56,.18);isolation:isolate}
.ui-v2 .fx-preview.fx-running .fx-poster-art{opacity:.22;transform:scale(1.06)}
.ui-v2 .fx-preview.fx-running .fx-stage{opacity:1}
.ui-v2 .fx-preview .fx-token{width:29%;background:linear-gradient(145deg,#eaffff,#38cce2 45%,#1767bb)!important;box-shadow:0 4px 0 #15538c,0 11px 22px rgba(10,37,71,.35)!important}
.ui-v2 .fx-preview .fx-token>i{position:absolute;inset:auto 12% 8%;height:16%;border-radius:50%;background:#dfffff;border:2px solid #fff;box-shadow:0 2px 0 #1a679c}
.ui-v2 .fx-play{width:48px!important;height:48px!important;right:10px!important;top:10px!important;padding:4px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(220,246,255,.78))!important;border:2px solid #fff;box-shadow:0 4px 0 rgba(17,72,116,.34),0 8px 18px rgba(11,45,80,.24)}
.ui-v2 .fx-play>img{width:100%!important;height:100%!important}
.ui-v2 .fx-preview-hint{font-size:.68rem!important;padding:.45rem!important;letter-spacing:.12em!important}

/* O badge é uma pequena placa de liga, não uma etiqueta de texto colorida. */
.ui-v2 .shop-item.kill_effect .shop-rarity{top:-9px!important;right:14px!important;min-width:78px;text-align:center;padding:7px 12px 7px 24px!important;border:2px solid #fff!important;border-radius:8px 16px 16px 8px!important;box-shadow:0 4px 0 rgba(30,65,94,.22),0 7px 16px rgba(30,65,94,.18)!important;letter-spacing:.11em!important;clip-path:polygon(10px 0,100% 0,100% 100%,10px 100%,0 50%)}
.ui-v2 .shop-item.kill_effect.rarity-rare .shop-rarity{background:linear-gradient(135deg,#e9fbff,#69c9ef)!important;color:#155579!important}
.ui-v2 .shop-item.kill_effect.rarity-epic .shop-rarity{background:linear-gradient(135deg,#fbf0ff,#bd77eb 58%,#7442bd)!important;color:#fff!important;text-shadow:0 1px #4a2682}
.ui-v2 .shop-item.kill_effect.rarity-legendary .shop-rarity{background:linear-gradient(135deg,#fffbd4,#ffd44f 46%,#ee861f)!important;color:#70400a!important;box-shadow:0 4px 0 #b76a17,0 0 20px rgba(255,194,52,.5)!important}
.ui-v2 .shop-item.kill_effect.rarity-mythic .shop-rarity{background:linear-gradient(110deg,#8cf4ff,#c789ff,#ff90bf,#ffe470)!important;color:#282154!important;box-shadow:0 4px 0 #6b56b1,0 0 22px rgba(190,119,255,.55)!important}
.ui-v2 .shop-item.kill_effect.rarity-legendary:after{content:""!important;width:24px;height:24px;right:8px!important;bottom:auto!important;top:45%!important;background:url('assets/icons/fx-spark.svg') center/contain no-repeat;animation:legendSpark 2.2s ease-in-out infinite!important}

.ui-v2 .preview-fx-arena{width:min(680px,100%);display:grid;gap:14px;justify-items:center}.ui-v2 .preview-fx-arena .fx-preview{width:100%;aspect-ratio:1.52;border-radius:24px}.ui-v2 .fx-test-button{min-height:52px;padding:0 24px;border:2px solid white;border-radius:16px;background:linear-gradient(145deg,#1cc7d1,#277ee8);color:#fff;font:900 .9rem var(--font-ui);letter-spacing:.08em;box-shadow:0 5px 0 #1a5f9d,0 12px 25px rgba(24,95,160,.28);cursor:pointer;display:flex;align-items:center;gap:10px}.ui-v2 .fx-test-button img{width:32px;height:32px}.ui-v2 .fx-test-button:active{transform:translateY(3px);box-shadow:0 2px 0 #1a5f9d}

/* Camadas compartilhadas entre o detail preview e o tabuleiro real. */
.ui-v2 .kill-fx{z-index:16!important;overflow:visible!important;isolation:isolate}.ui-v2 .kill-fx:before,.ui-v2 .kill-fx:after{display:none!important}.ui-v2 .kill-fx>i,.ui-v2 .fx-stage>.fx-core,.ui-v2 .fx-stage>.fx-shell,.ui-v2 .fx-stage>.fx-bolt,.ui-v2 .fx-stage>.fx-smoke,.ui-v2 .fx-stage>.fx-wave,.ui-v2 .fx-stage>.fx-particle{position:absolute;pointer-events:none}
.ui-v2 .kill-fx .fx-core,.ui-v2 .fx-stage>.fx-core{inset:12%;border-radius:50%;opacity:0;z-index:3}
.ui-v2 .kill-fx .fx-shell,.ui-v2 .fx-stage>.fx-shell{inset:13% 20%;opacity:0;z-index:5}
.ui-v2 .kill-fx .fx-bolt,.ui-v2 .fx-stage>.fx-bolt{inset:-30% 24% 8%;opacity:0;z-index:6}
.ui-v2 .kill-fx .fx-smoke,.ui-v2 .fx-stage>.fx-smoke{inset:-8% 6% 8%;opacity:0;z-index:7}
.ui-v2 .kill-fx .fx-wave,.ui-v2 .fx-stage>.fx-wave{inset:25%;border-radius:50%;opacity:0;z-index:2}
.ui-v2 .fx-particle{left:50%;top:50%;width:12%;aspect-ratio:1;z-index:8;opacity:0}
.ui-v2 .fx-particle.p1{--x:-140%;--y:-105%;--r:-35deg}.ui-v2 .fx-particle.p2{--x:-45%;--y:-165%;--r:15deg}.ui-v2 .fx-particle.p3{--x:70%;--y:-135%;--r:55deg}.ui-v2 .fx-particle.p4{--x:145%;--y:-45%;--r:95deg}.ui-v2 .fx-particle.p5{--x:118%;--y:95%;--r:135deg}.ui-v2 .fx-particle.p6{--x:0%;--y:145%;--r:190deg}.ui-v2 .fx-particle.p7{--x:-120%;--y:90%;--r:230deg}.ui-v2 .fx-particle.p8{--x:-155%;--y:0%;--r:285deg}

/* Default: impacto curto, estrela própria, anel e partículas. */
.ui-v2 .kill_spark .fx-core,.ui-v2 .fx-spark.fx-running .fx-core{background:radial-gradient(circle,#fff 0 10%,#ffe270 22%,#ff9f32 45%,transparent 70%);animation:vfxFlash .46s ease-out forwards}.ui-v2 .kill_spark .fx-wave,.ui-v2 .fx-spark.fx-running .fx-wave{border:5px solid #ffd768;animation:vfxWave .5s ease-out forwards}.ui-v2 .kill_spark .fx-particle,.ui-v2 .fx-spark.fx-running .fx-particle{background:#ffe47b;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 37%);animation:vfxBurst .5s .05s ease-out forwards}
/* Gelo: freeze flash, casca, fissuras, estilhaço. */
.ui-v2 .kill_frost .fx-core,.ui-v2 .fx-frost.fx-running .fx-core{background:radial-gradient(circle,#fff 0 8%,rgba(158,235,255,.92) 30%,rgba(73,161,231,.45) 55%,transparent 72%);animation:vfxFreezeFlash .72s ease-out forwards}.ui-v2 .kill_frost .fx-shell,.ui-v2 .fx-frost.fx-running .fx-shell{border:7px solid rgba(219,250,255,.94);border-radius:48% 48% 35% 35%;background:linear-gradient(135deg,rgba(255,255,255,.68),rgba(89,195,238,.28));box-shadow:inset 0 0 18px #d9f9ff,0 0 14px #83dff5;clip-path:polygon(10% 4%,87% 0,100% 24%,89% 93%,52% 100%,12% 91%,0 39%);animation:vfxIceShell .7s ease-out forwards}.ui-v2 .kill_frost .fx-bolt,.ui-v2 .fx-frost.fx-running .fx-bolt{inset:18% 27%;background:linear-gradient(60deg,transparent 46%,#fff 47% 51%,transparent 52%),linear-gradient(-32deg,transparent 46%,#d9f8ff 47% 51%,transparent 52%);animation:vfxCrack .7s .18s ease-out forwards}.ui-v2 .kill_frost .fx-particle,.ui-v2 .fx-frost.fx-running .fx-particle{background:linear-gradient(145deg,#fff,#76d8f5);clip-path:polygon(50% 0,100% 100%,0 72%);animation:vfxBurst .62s .34s ease-out forwards}
/* Trovão: pré-flash, raio principal, sparks e dissipação. */
.ui-v2 .kill_thunder .fx-core,.ui-v2 .fx-thunder.fx-running .fx-core{background:radial-gradient(circle,#fff 0 18%,rgba(255,246,123,.68) 34%,transparent 67%);animation:vfxFlash .62s ease-out forwards}.ui-v2 .kill_thunder .fx-bolt,.ui-v2 .fx-thunder.fx-running .fx-bolt{background:linear-gradient(135deg,#fff,#ffe75b 55%,#ff9f2e);clip-path:polygon(46% 0,68% 0,53% 38%,73% 38%,31% 100%,42% 56%,24% 56%);filter:drop-shadow(0 0 8px #fff58a);animation:vfxBolt .64s cubic-bezier(.1,.85,.25,1) forwards}.ui-v2 .kill_thunder .fx-wave,.ui-v2 .fx-thunder.fx-running .fx-wave{border:5px solid #fff47a;animation:vfxWave .58s .18s ease-out forwards}.ui-v2 .kill_thunder .fx-particle,.ui-v2 .fx-thunder.fx-running .fx-particle{width:5%;height:18%;background:#fff58b;clip-path:polygon(35% 0,100% 0,63% 45%,100% 45%,0 100%,34% 54%,0 54%);animation:vfxElectric .62s .16s ease-out forwards}
/* Inferno: ignition, línguas assimétricas, brasas e fumaça. */
.ui-v2 .kill_inferno .fx-core,.ui-v2 .fx-inferno.fx-running .fx-core{inset:4% 8%;border-radius:45% 55% 42% 58%;background:radial-gradient(ellipse at 50% 78%,#fff6a6 0 12%,#ffbb32 28%,#f04d28 54%,transparent 72%);filter:drop-shadow(0 0 12px #ff822e);clip-path:polygon(13% 100%,4% 64%,22% 25%,34% 51%,51% 0,59% 49%,82% 18%,76% 59%,96% 42%,88% 100%);animation:vfxFlame .76s ease-out forwards}.ui-v2 .kill_inferno .fx-smoke,.ui-v2 .fx-inferno.fx-running .fx-smoke{background:radial-gradient(ellipse at 45% 62%,rgba(87,62,70,.55),transparent 35%),radial-gradient(ellipse at 66% 34%,rgba(92,70,79,.4),transparent 32%);animation:vfxSmoke .82s .28s ease-out forwards}.ui-v2 .kill_inferno .fx-particle,.ui-v2 .fx-inferno.fx-running .fx-particle{width:6%;background:#ffd14e;border-radius:50% 50% 20% 50%;box-shadow:0 0 5px #ff5b27;animation:vfxEmber .72s .24s ease-out forwards}
/* Pétalas: pétalas reconhecíveis orbitam e dispersam. */
.ui-v2 .kill_petals .fx-core,.ui-v2 .fx-petals.fx-running .fx-core{background:radial-gradient(circle,rgba(255,255,255,.85),rgba(255,165,204,.34) 42%,transparent 70%);animation:vfxSoft .82s ease-out forwards}.ui-v2 .kill_petals .fx-particle,.ui-v2 .fx-petals.fx-running .fx-particle{width:14%;background:linear-gradient(145deg,#fff,#ff91bf);border-radius:75% 12% 75% 28%;box-shadow:0 0 5px rgba(255,255,255,.8);animation:vfxPetalOrbit .86s ease-out forwards}
/* Vazio: portal, sucção, compressão, implosão e shockwave. */
.ui-v2 .kill_void .fx-core,.ui-v2 .fx-void.fx-running .fx-core{inset:18%;background:radial-gradient(circle,#02020b 0 26%,#5b2b9e 39%,#85e9ff 46%,transparent 60%);box-shadow:0 0 18px #9c64ff;animation:vfxVoidOpen .88s ease-in-out forwards}.ui-v2 .kill_void .fx-shell,.ui-v2 .fx-void.fx-running .fx-shell{inset:25% 5%;border:5px solid #9b6cff;border-radius:50%;filter:drop-shadow(0 0 7px #67e8ff);animation:vfxVoidOrbit .88s linear forwards}.ui-v2 .kill_void .fx-wave,.ui-v2 .fx-void.fx-running .fx-wave{border:5px solid #b98cff;animation:vfxWave .42s .56s ease-out forwards}.ui-v2 .kill_void .fx-particle,.ui-v2 .fx-void.fx-running .fx-particle{width:7%;background:#9eefff;border-radius:50%;box-shadow:0 0 7px #a467ff;animation:vfxSuction .68s ease-in forwards}

@keyframes vfxFlash{0%{opacity:0;transform:scale(.25)}16%{opacity:1;transform:scale(1.12)}100%{opacity:0;transform:scale(1.45)}}
@keyframes vfxFreezeFlash{0%{opacity:0;transform:scale(.5)}18%{opacity:1}68%{opacity:.75}100%{opacity:0;transform:scale(1.18)}}
@keyframes vfxIceShell{0%{opacity:0;transform:translateY(34%) scaleY(.35)}28%{opacity:1;transform:translateY(0) scaleY(1)}72%{opacity:1}100%{opacity:0;transform:scale(1.12)}}
@keyframes vfxCrack{0%,24%{opacity:0}42%,72%{opacity:1}100%{opacity:0;transform:scale(1.18)}}
@keyframes vfxBolt{0%{opacity:0;transform:translateY(-35%) scaleY(.35)}13%,58%{opacity:1;transform:translateY(0) scaleY(1)}100%{opacity:0;transform:translateY(5%) scaleY(.82)}}
@keyframes vfxFlame{0%{opacity:0;transform:translateY(25%) scale(.7,.35)}30%{opacity:1;transform:translateY(0) scale(1,1.1)}76%{opacity:.9;transform:translateY(-8%) scale(.93,1.25)}100%{opacity:0;transform:translateY(-26%) scale(.65,1.4)}}
@keyframes vfxSmoke{0%{opacity:0;transform:translateY(15%) scale(.7)}40%{opacity:.75}100%{opacity:0;transform:translateY(-30%) scale(1.35)}}
@keyframes vfxSoft{0%{opacity:0;transform:scale(.5)}40%{opacity:.85}100%{opacity:0;transform:scale(1.25)}}
@keyframes vfxWave{0%{opacity:.9;transform:scale(.15)}100%{opacity:0;transform:scale(2.4)}}
@keyframes vfxBurst{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}18%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(.75)}}
@keyframes vfxElectric{0%{opacity:0;transform:translate(-50%,-50%) scale(.2)}25%,64%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(var(--r)) scale(.7)}}
@keyframes vfxEmber{0%{opacity:0;transform:translate(-50%,-20%) scale(.3)}22%{opacity:1}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-130% + var(--y))) rotate(var(--r)) scale(.55)}}
@keyframes vfxPetalOrbit{0%{opacity:0;transform:translate(-50%,-50%) rotate(0) scale(.4)}20%{opacity:1}55%{transform:translate(-50%,-50%) rotate(calc(var(--r) + 130deg)) scale(1)}100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) rotate(calc(var(--r) + 290deg)) scale(.7)}}
@keyframes vfxVoidOpen{0%{opacity:0;transform:scale(.1)}28%{opacity:1;transform:scale(1)}65%{opacity:1;transform:scale(.86)}82%{opacity:1;transform:scale(.08)}100%{opacity:0;transform:scale(1.35)}}
@keyframes vfxVoidOrbit{0%{opacity:0;transform:rotate(0) scale(.35)}25%,70%{opacity:1}100%{opacity:0;transform:rotate(310deg) scale(.08)}}
@keyframes vfxSuction{0%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1)}20%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.1)}}

@media(prefers-reduced-motion:reduce){.ui-v2 .fx-poster-art{opacity:1!important;transform:none!important}.ui-v2 .fx-preview .fx-stage{display:none!important}.ui-v2 .kill-fx{display:none!important}}
.ui-v2 .account-logout:hover{background:#fff0f1;transform:translateY(-1px)}
.ui-v2 .account-logout:active{transform:scale(.98)}
.ui-v2 .account-logout:focus-visible{outline:3px solid #ef8790;outline-offset:2px}
.ui-v2 .account-logout svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}


/* ---- 12. DIFICULDADE DA SENTINELA -------------------------------------
   So aparece no treino, que e o unico modo com IA. Tres opcoes lado a lado:
   a escolha precisa caber num olhar, nao num menu.                         */
.ui-v2 .difficulty-row{display:grid;gap:.4rem;margin:.2rem 0 1rem}
.ui-v2 .difficulty-row>small{
  font:800 .62rem/1 "Chakra Petch",system-ui,sans-serif;letter-spacing:.14em;color:#7d93aa;
}
.ui-v2 .difficulty-choice{display:flex;gap:.5rem;flex-wrap:wrap}
.ui-v2 .difficulty-option{
  flex:1 1 92px;padding:.6rem .8rem;cursor:pointer;
  border:2px solid rgba(120,170,200,.35);border-radius:12px;
  background:rgba(250,253,255,.85);color:#41617e;
  box-shadow:0 3px 0 rgba(66,133,161,.16);
  transition:transform .14s ease,box-shadow .14s ease,border-color .14s ease;
}
.ui-v2 .difficulty-option b{font:800 .82rem "Chakra Petch",system-ui,sans-serif;letter-spacing:.08em}
.ui-v2 .difficulty-option:hover{transform:translateY(-2px)}
.ui-v2 .difficulty-option.selected{
  border-color:var(--color-cyan);background:linear-gradient(160deg,#eafaff,#c9edfb);
  color:#0f5c86;box-shadow:0 4px 0 rgba(21,110,155,.32);
}
.ui-v2 .difficulty-option:focus-visible{outline:3px solid var(--color-cyan);outline-offset:2px}
.ui-v2 #difficulty-note{margin:.15rem 0 0;font-size:.78rem}

/* 2.8 · composição final de avatares e molduras. */
.ui-v2 .framed-avatar>img{object-fit:cover!important;object-position:var(--avatar-position,50% 50%)!important;transform:scale(var(--avatar-scale,1));transform-origin:center;transition:transform 180ms ease}
.ui-v2 .framed-avatar[data-avatar-preset="legendary"]>img,.ui-v2 .framed-avatar[data-avatar-preset="celestial"]>img{filter:saturate(1.08) contrast(1.03)}
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-front,.ui-v2 .frame-preview[style*="--frame-art"]>.fa-front{inset:-20%!important;border:0!important;background:var(--frame-art) center/contain no-repeat!important;filter:drop-shadow(0 4px 4px rgba(35,60,100,.24));pointer-events:none}
.ui-v2 .framed-avatar[data-frame-theme="flame"]>.fa-aura{background:radial-gradient(circle,rgba(255,180,62,.45),transparent 68%);animation:cosmeticAura 1.8s ease-in-out infinite}
.ui-v2 .framed-avatar[data-frame-theme="sakura"]>.fa-orn{background:radial-gradient(circle at 22% 22%,#ffd6ec 0 3%,transparent 4%),radial-gradient(circle at 83% 68%,#ffacd7 0 3%,transparent 4%);animation:ornamentDrift 3s ease-in-out infinite}
.ui-v2 .framed-avatar[data-frame-theme="frost"]>.fa-aura{background:radial-gradient(circle,rgba(92,225,255,.4),transparent 68%);animation:cosmeticAura 2.4s ease-in-out infinite}
.ui-v2 .framed-avatar[data-frame-theme="void"]>.fa-front{animation:frameOrbit 8s linear infinite}.ui-v2 .framed-avatar[data-frame-theme="neon"]>.fa-aura{background:conic-gradient(from 0deg,rgba(54,247,255,.25),transparent,rgba(240,64,222,.28),transparent);animation:frameOrbit 6s linear infinite}
.ui-v2 .framed-avatar[data-frame-theme="verdant"]>.fa-orn{background:radial-gradient(circle at 18% 75%,#bfff87 0 3%,transparent 4%),radial-gradient(circle at 82% 28%,#eaff9f 0 3%,transparent 4%);animation:ornamentDrift 2.8s ease-in-out infinite}
@keyframes cosmeticAura{50%{opacity:.7;transform:scale(1.08)}}@keyframes ornamentDrift{50%{transform:translateY(-4%) rotate(3deg)}}@keyframes frameOrbit{to{transform:rotate(360deg)}}

/* A célula é apenas uma marca de posição no piso, nunca uma caixa elevada. */
.ui-v2 .board{isolation:isolate;overflow:hidden!important;gap:clamp(3px,.45vw,7px)!important;padding:clamp(7px,.8vw,13px)!important}
.ui-v2 .cell,.ui-v2 .cell.empty{isolation:isolate;overflow:visible!important;background:transparent!important;border:0!important;box-shadow:none!important;z-index:1}
.ui-v2 .cell:before{content:""!important;display:block!important;z-index:0!important;inset:auto 9% 8%!important;height:26%!important;border:0!important;border-radius:50%!important;background:radial-gradient(ellipse at 48% 30%,rgba(255,255,255,.88),rgba(165,225,240,.5) 47%,rgba(42,126,169,.21) 75%,transparent 76%)!important;box-shadow:0 3px 0 rgba(53,128,164,.2),0 8px 13px rgba(35,89,122,.1)!important;pointer-events:none}
.ui-v2 .cell.empty:before{opacity:.38!important}.ui-v2 .cell:hover:before{opacity:.9!important;transform:scale(1.04)}
.ui-v2 .cell.selected{z-index:6!important;animation:none!important}.ui-v2 .cell.selected:before{background:radial-gradient(ellipse,#fff 0 12%,#9ff3ff 45%,#27bbd5 72%,transparent 74%)!important;box-shadow:0 0 0 4px rgba(46,208,230,.22),0 7px 17px rgba(19,155,187,.3)!important}
.ui-v2 .cell.valid{z-index:4!important;animation:none!important}.ui-v2 .cell.valid:before{background:radial-gradient(ellipse,#fffce9,#ffe48b 54%,#e4a729 73%,transparent 75%)!important;box-shadow:0 0 0 4px rgba(255,205,77,.19),0 7px 15px rgba(168,110,21,.25)!important}.ui-v2 .cell.attack-target:before{background:radial-gradient(ellipse,#fff3f5,#ff9eaf 52%,#df4366 74%,transparent 76%)!important}
.ui-v2 .cell>.piece{z-index:3!important;width:var(--token-largura,86%)!important;height:auto!important;max-width:100%!important;max-height:88%!important;aspect-ratio:.78!important}.ui-v2 .piece .front.chess-front,.ui-v2 .board.strategy-board .piece .front.chess-front{inset:0!important;z-index:3!important}.ui-v2 .piece .beast.chess-beast{inset:4% 3% 9%!important;z-index:3!important}.ui-v2 .piece .chess-front .power{z-index:7!important;bottom:5%!important}.ui-v2 .piece .chess-front .owner-tag{z-index:8!important;left:10%!important;top:9%!important}.ui-v2 .piece.hidden .back{inset:2% 12% 5%!important;z-index:3!important}
.ui-v2 .move-arrow{z-index:9!important;width:clamp(25px,5cqw,38px)!important;height:clamp(25px,5cqw,38px)!important;right:2%!important;bottom:2%!important;left:auto!important;top:auto!important;font-size:0!important;background:#fff!important;border:2px solid #f3bd3e!important}.ui-v2 .move-arrow:before{content:"";width:72%;height:72%;background:url('assets/icons/move-orbit.svg') center/contain no-repeat}.ui-v2 .attack-target .move-arrow:before{background-image:url('assets/icons/attack-burst.svg')}

/* Skins inteiras: cada família muda pedestal, material e ornamento. */
.ui-v2 .board.army-celestial .piece .chess-front:before,.preview-army.army_celestial .army-figure:before{background:radial-gradient(ellipse,#fff 0 9%,#65e8ff 26%,#3278db 62%,#5c43be 82%)!important;box-shadow:0 0 0 3px #fff,0 0 0 6px #55bff3,0 0 20px #7bdfff!important}.ui-v2 .board.army-celestial .piece .chess-beast:after{content:"";position:absolute;inset:8% 0 32%;background:radial-gradient(circle at 18% 30%,#fff 0 2%,transparent 3%),radial-gradient(circle at 82% 18%,#fff3a4 0 2%,transparent 3%),radial-gradient(circle at 70% 72%,#9cf5ff 0 2%,transparent 3%);pointer-events:none}
.ui-v2 .board.army-bones .piece .chess-front:before,.preview-army.army_dead .army-figure:before{border-radius:20% 20% 48% 48%!important;background:linear-gradient(145deg,#fffce7,#d7e9e8 32%,#4295ba 67%,#4756a6)!important;box-shadow:0 0 0 3px #fff,0 0 0 6px #8bd9e8,0 0 17px rgba(91,105,200,.52)!important}.ui-v2 .board.army-bones .piece .chess-beast:after{content:"";position:absolute;inset:11% 4% 31%;border-top:2px solid #dfffff;border-bottom:2px solid #7ad7ee;clip-path:polygon(0 0,30% 0,36% 18%,64% 18%,70% 0,100% 0,100% 100%,0 100%);pointer-events:none}
.ui-v2 .board.army-infernal .piece .chess-front:before,.preview-army.army_infernal .army-figure:before{background:radial-gradient(ellipse,#fffad8 0 8%,#ffc55b 30%,#f06a3f 62%,#8c274f 84%)!important;box-shadow:0 0 0 3px #fff,0 0 0 6px #ff9a43,0 0 20px rgba(255,95,51,.7)!important}.ui-v2 .board.army-infernal .piece .chess-beast:after{content:"";position:absolute;inset:5% 2% 29%;background:linear-gradient(60deg,transparent 14%,rgba(255,232,116,.8) 15% 17%,transparent 18% 78%,rgba(255,137,59,.75) 79% 82%,transparent 83%);pointer-events:none}
.ui-v2 .board.army-celestial .piece .power{--owner:#417ee5}.ui-v2 .board.army-bones .piece .power{filter:saturate(1.12)}.ui-v2 .board.army-infernal .piece .power{filter:saturate(1.15) contrast(1.05)}

.ui-v2 .army-skin-preview{position:relative;display:flex!important;align-items:flex-end;justify-content:center;gap:4%;overflow:hidden;background:radial-gradient(circle at 50% 75%,rgba(255,255,255,.96),rgba(151,219,240,.55) 45%,rgba(52,127,183,.24));min-height:150px}.ui-v2 .army-mini{position:relative;width:24%;aspect-ratio:.72;border-radius:50% 50% 24% 24%;background:linear-gradient(160deg,#fff,#ffdc75);box-shadow:0 7px 10px rgba(35,68,95,.25);transform-origin:50% 100%}.ui-v2 .army-mini:before{content:"";position:absolute;inset:-6% 8% 32%;border-radius:50%;background:url('assets/critters/chick.webp') center/cover no-repeat}.ui-v2 .army-mini-2:before{background-image:url('assets/critters/fox.webp')}.ui-v2 .army-mini-3:before{background-image:url('assets/critters/lion.webp')}.ui-v2 .army-mini:after{content:"";position:absolute;left:18%;right:18%;bottom:-5%;height:22%;border-radius:50%;background:var(--army-base,#3aaee5);border:3px solid white;box-shadow:0 4px 0 color-mix(in srgb,var(--army-base),#173b67 40%)}.ui-v2 .army-mini-1{transform:scale(.86)}.ui-v2 .army-mini-2{transform:scale(1.03)}.ui-v2 .army-mini-3{transform:scale(.92)}.ui-v2 .army_celestial{--army-base:#5c7bea}.ui-v2 .army_dead{--army-base:#67bfd6}.ui-v2 .army_infernal{--army-base:#f06a3f}
.ui-v2 .preview-army{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;align-items:end;width:min(620px,92%);padding:28px;border-radius:28px;background:radial-gradient(circle at 50% 70%,#fff,#dff5fb 52%,#95cfe9);box-shadow:inset 0 2px #fff,0 14px 28px rgba(32,86,123,.18)}.ui-v2 .preview-army .army-figure{position:relative;display:grid;place-items:end center;aspect-ratio:.75;border-radius:50% 50% 24% 24%;background:linear-gradient(160deg,#fff,#d6eef7);box-shadow:0 8px 12px rgba(34,70,98,.2)}.ui-v2 .preview-army .army-figure:before{content:"";position:absolute;z-index:0;left:9%;right:9%;bottom:2%;height:24%;border-radius:50%;background:#31a9df;border:3px solid white;box-shadow:0 4px 0 #1974a5}.ui-v2 .preview-army .army-figure i{position:absolute;inset:4% 6% 26%;background:url('assets/critters/chick.webp') center/cover no-repeat;border-radius:50%}.ui-v2 .preview-army .army-figure:nth-child(2n) i{background-image:url('assets/critters/fox.webp')}.ui-v2 .preview-army .army-figure:nth-child(3n) i{background-image:url('assets/critters/tiger.webp')}.ui-v2 .preview-army .army-figure b{position:relative;z-index:2;margin-bottom:5%;width:32%;aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#168dd4;color:white;border:2px solid white}
@media(max-width:600px){.ui-v2 .board{gap:2px!important;padding:5px!important}.ui-v2 .cell:before{inset:auto 5% 7%!important;height:23%!important}.ui-v2 .preview-army{gap:5px;padding:12px}.ui-v2 .army-skin-preview{min-height:112px}.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-front{inset:-17%!important}}@media(prefers-reduced-motion:reduce){.ui-v2 .framed-avatar>.fa-aura,.ui-v2 .framed-avatar>.fa-front,.ui-v2 .framed-avatar>.fa-orn{animation:none!important}}
.ui-v2 .piece.combat-windup .chess-beast{animation:combatAnticipation 240ms cubic-bezier(.3,.7,.2,1) both!important}.ui-v2 .piece.combat-brace .chess-beast{animation:combatBrace 300ms ease both!important}.ui-v2 .cell.combat-impact{z-index:10!important}.ui-v2 .cell.combat-impact:after,.ui-v2 .clash-cell:after{content:""!important;position:absolute;z-index:12!important;inset:10%!important;background:url('assets/icons/attack-burst.svg') center/contain no-repeat!important;animation:combatImpact 420ms ease-out forwards!important;pointer-events:none}.ui-v2 .piece.captured{animation:figurineDefeat 430ms ease-in forwards!important}
@keyframes combatAnticipation{0%{filter:brightness(1)}55%{transform:translateY(4%) scale(.94,1.05) rotate(-2deg)}100%{filter:brightness(1.16)}}@keyframes combatBrace{55%{transform:translateY(2%) scale(1.05,.94)}}@keyframes combatImpact{0%{opacity:0;transform:scale(.25) rotate(-18deg)}45%{opacity:1;transform:scale(1.12) rotate(5deg)}100%{opacity:0;transform:scale(1.45) rotate(16deg)}}

/* 2.9 · BattleShell dedicado: nenhum elemento da Home participa da batalha. */
:root{
  --battle-color-1:#168bff;--battle-color-2:#ff3b45;--battle-color-3:#ff3ca6;--battle-color-4:#9b5cff;
  --battle-color-5:#22c963;--battle-color-6:#ff8a2a;--battle-color-7:#d6b500;--battle-color-8:#08bcb8;
}
.battle-mode .game-topbar{display:none!important}.battle-mode .screen{height:100dvh!important}.battle-mode .app-shell{min-height:100dvh}
.ui-v2 .battle-shell{
  --battle-player-primary:var(--battle-color-1);--battle-opponent-primary:var(--battle-color-2);
  display:grid!important;grid-template-rows:auto minmax(0,1fr) auto!important;
  width:100%;height:100dvh!important;padding:max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left))!important;
  gap:clamp(6px,1vh,12px);overflow:hidden!important;background:linear-gradient(rgba(242,251,255,.18),rgba(220,241,250,.35))
}
.ui-v2 .battle-shell .battle-top-hud{
  position:relative;z-index:30;width:min(100%,1080px);min-height:58px;margin:0 auto;padding:9px 74px 9px 18px;
  display:flex!important;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.92);border-radius:18px;
  background:rgba(249,253,255,.9);box-shadow:0 5px 18px rgba(34,82,114,.13);backdrop-filter:blur(16px)
}
.ui-v2 .battle-status{width:min(620px,76%);display:grid;grid-template-rows:auto 5px;gap:7px!important}
.ui-v2 .turn-copy{display:flex;align-items:baseline;justify-content:center;gap:8px}.ui-v2 .turn-banner{max-width:none!important;padding:0!important;background:transparent!important;box-shadow:none!important;color:#087eaf!important;font:900 clamp(.82rem,2.8vw,1.02rem) var(--font-display)!important;letter-spacing:.09em}.ui-v2 .turn-banner.enemy{color:#c84259!important}.ui-v2 .turn-seconds{min-width:3.4ch;color:#087eaf;font:900 1rem var(--font-display)}.ui-v2 .turn-seconds:before{content:"· ";color:#89a3af}
.ui-v2 .turn-progress{height:5px;border-radius:999px;overflow:hidden;background:#dce9ef}.ui-v2 .turn-progress>i{display:block;width:100%;height:100%;border-radius:inherit;background:linear-gradient(90deg,#18cad2,#168bff);transform-origin:left center;transition:transform 100ms linear,background 180ms ease}.ui-v2 .timer-warning .turn-progress>i{background:linear-gradient(90deg,#ffd547,#ff972e)}.ui-v2 .timer-warning .turn-seconds{color:#bf7615}.ui-v2 .timer-critical .turn-progress>i{background:linear-gradient(90deg,#ff806e,#ff3b45)}.ui-v2 .timer-critical .turn-seconds{color:#d53042;animation:battleSecondPulse .55s ease-in-out infinite}
@keyframes battleSecondPulse{50%{transform:scale(1.08)}}
.ui-v2 .surrender-button{position:absolute;right:10px;top:50%;transform:translateY(-50%);min-width:48px;min-height:42px;padding:0 10px;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid #efadb7;border-radius:12px;background:rgba(255,255,255,.75);color:#c64b60;font:800 .73rem var(--font-ui);cursor:pointer}.ui-v2 .surrender-button svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}.ui-v2 .surrender-button:hover{background:#fff4f5;border-color:#df6679}.ui-v2 .surrender-button:focus-visible{outline:3px solid rgba(255,59,69,.25);outline-offset:2px}
.ui-v2 .round-progress[hidden]{display:none!important}
.ui-v2 .battle-shell .battle-stage{container-type:size;width:100%;height:100%;min-height:0;padding:0!important;display:grid;place-items:center;overflow:hidden!important}
.ui-v2 .battle-shell .board{--token-largura:90%;--token-altura:90%;width:min(98cqw,calc(98cqh * var(--board-ratio)),1120px)!important;max-width:1120px!important;max-height:100%!important;margin:auto;gap:clamp(2px,.45cqw,6px)!important;padding:clamp(5px,.8cqw,12px)!important;border-radius:clamp(16px,2.6cqw,28px)!important}
.ui-v2 .battle-shell .cell,.ui-v2 .battle-shell .cell.empty{border:1px solid rgba(53,125,157,.12)!important;border-radius:clamp(5px,.85cqw,10px)!important;background:rgba(255,255,255,.055)!important}
.ui-v2 .battle-shell .cell:before{inset:auto 7% 5%!important;height:22%!important;opacity:.58!important;background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.78),rgba(87,176,204,.18) 54%,transparent 75%)!important;box-shadow:0 4px 8px rgba(28,91,123,.1)!important}
.ui-v2 .battle-shell .cell.empty:before{opacity:.2!important}.ui-v2 .battle-shell .cell>.piece{width:90%!important;max-height:90%!important}.ui-v2 .battle-shell .piece.hidden .back{inset:0 10% 2%!important}.ui-v2 .battle-shell .piece .beast.chess-beast{inset:1% 0 4%!important}.ui-v2 .battle-shell .piece .chess-front .power{width:27%!important;min-width:27%!important;max-width:34%!important;bottom:4%!important;font-size:clamp(.82rem,3.2cqw,1.75rem)!important}.ui-v2 .battle-shell .owner-tag{display:none!important}
.ui-v2 .battle-shell .piece.owner-a{--owner:var(--battle-player-primary);--battle-player-border:var(--battle-player-primary);--battle-player-glow:color-mix(in srgb,var(--battle-player-primary),transparent 58%)}.ui-v2 .battle-shell .piece.owner-b{--owner:var(--battle-opponent-primary);--battle-player-border:var(--battle-opponent-primary);--battle-player-glow:color-mix(in srgb,var(--battle-opponent-primary),transparent 58%)}
.ui-v2 .battle-shell .piece .chess-front:before{border-color:#fff!important;box-shadow:0 0 0 3px #fff,0 0 0 6px var(--owner),0 5px 12px var(--battle-player-glow)!important}.ui-v2 .battle-shell .cell.selected:before{box-shadow:0 0 0 4px rgba(255,255,255,.86),0 0 0 8px var(--battle-player-primary),0 7px 18px rgba(22,139,255,.28)!important}
.ui-v2 .participant-strip{position:relative;z-index:25;width:min(100%,1080px);min-height:64px;margin:0 auto;padding:7px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:8px;border:1px solid rgba(255,255,255,.92);border-radius:18px;background:rgba(249,253,255,.91);box-shadow:0 -3px 18px rgba(34,82,114,.11);backdrop-filter:blur(16px)}
.ui-v2 .participant-card{--participant-color:var(--battle-color-1);position:relative;min-width:0;min-height:50px;padding:5px 12px 5px 8px;display:flex;align-items:center;gap:10px;border:1px solid color-mix(in srgb,var(--participant-color),transparent 63%);border-radius:13px;background:rgba(255,255,255,.55);overflow:visible}.ui-v2 .participant-card[data-battle-color="player-2"]{--participant-color:var(--battle-color-2)}.ui-v2 .participant-card[data-battle-color="player-3"]{--participant-color:var(--battle-color-3)}.ui-v2 .participant-card[data-battle-color="player-4"]{--participant-color:var(--battle-color-4)}.ui-v2 .participant-card[data-battle-color="player-5"]{--participant-color:var(--battle-color-5)}.ui-v2 .participant-card[data-battle-color="player-6"]{--participant-color:var(--battle-color-6)}.ui-v2 .participant-card[data-battle-color="player-7"]{--participant-color:var(--battle-color-7)}.ui-v2 .participant-card[data-battle-color="player-8"]{--participant-color:var(--battle-color-8)}
.ui-v2 .participant-color{width:5px;align-self:stretch;border-radius:999px;background:var(--participant-color);box-shadow:0 0 8px color-mix(in srgb,var(--participant-color),transparent 48%)}.ui-v2 .participant-card .battle-avatar{position:relative;width:44px!important;height:44px!important;flex:0 0 44px;border-radius:12px;box-shadow:0 0 0 3px rgba(255,255,255,.95),0 0 0 5px var(--participant-color)}.ui-v2 .participant-card .battle-avatar img{width:100%;height:100%;object-fit:cover;border-radius:inherit}.ui-v2 .participant-identity{min-width:0;display:flex;flex-direction:column}.ui-v2 .participant-identity small{font:800 .62rem var(--font-ui);letter-spacing:.11em;color:#7b8da0}.ui-v2 .participant-identity b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--participant-color);font:800 clamp(.84rem,2.5vw,1rem) var(--font-ui)}.ui-v2 .participant-versus{padding:0 4px;color:#8fa0af;font:900 .72rem var(--font-display)}
.ui-v2 .participant-strip>[hidden],.ui-v2 .participant-strip #cancel-selection{display:none!important}
@media(max-width:599px){
  .ui-v2 .battle-shell{gap:5px;padding:max(5px,env(safe-area-inset-top)) max(5px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(5px,env(safe-area-inset-left))!important}
  .ui-v2 .battle-shell .battle-top-hud{min-height:52px;padding:7px 54px 7px 9px;border-radius:14px}.ui-v2 .battle-status{width:100%}.ui-v2 .surrender-button{right:6px;min-width:42px;width:42px;padding:0}.ui-v2 .surrender-button span{display:none}.ui-v2 .battle-shell .board{width:min(99cqw,calc(99cqh * var(--board-ratio)))!important;padding:4px!important;gap:2px!important}.ui-v2 .participant-strip{min-height:58px;padding:5px;border-radius:14px;gap:5px}.ui-v2 .participant-card{min-height:46px;padding:4px 6px;gap:6px;border-radius:11px}.ui-v2 .participant-card .battle-avatar{width:38px!important;height:38px!important;flex-basis:38px}.ui-v2 .participant-identity small{font-size:.54rem}.ui-v2 .participant-identity b{font-size:.76rem}.ui-v2 .participant-color{width:4px}
}
@media(max-height:520px) and (orientation:landscape){.ui-v2 .battle-shell{grid-template-rows:48px minmax(0,1fr) 48px}.ui-v2 .battle-shell .battle-top-hud{min-height:46px;padding-block:4px}.ui-v2 .participant-strip{min-height:46px;padding:3px}.ui-v2 .participant-card{min-height:40px}.ui-v2 .participant-card .battle-avatar{width:34px!important;height:34px!important;flex-basis:34px}.ui-v2 .battle-shell .board{padding:3px!important}}
@media(prefers-reduced-motion:reduce){.ui-v2 .timer-critical .turn-seconds{animation:none!important}.ui-v2 .turn-progress>i{transition:none!important}}

/* PREMATCH 2.10 — dado com pips, quique e desaceleração; token com espessura. */
.ui-v2 .match-intro{background:radial-gradient(circle at 50% 42%,rgba(44,136,192,.28),rgba(17,42,76,.72))!important;backdrop-filter:blur(9px) saturate(1.12)!important}
.ui-v2 .intro-panel{width:min(500px,90vw)!important;padding:28px 32px!important;border-radius:26px!important;box-shadow:0 10px 0 rgba(19,89,137,.48),0 30px 70px rgba(6,29,57,.36)!important}
.ui-v2 .intro-object{position:relative;perspective:780px;transform-style:preserve-3d;will-change:transform,filter}
.ui-v2 .intro-object.dice{border:0!important;background:none!important;box-shadow:none!important;animation:none!important;border-radius:26px!important}
.ui-v2 .dice-face{position:absolute;inset:4%;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;border-radius:24px;background:linear-gradient(145deg,#f7ffff 0%,#9beaff 21%,#24b8dd 57%,#1768b6 100%);border:5px solid #fff;box-shadow:inset 7px 7px 13px rgba(255,255,255,.76),inset -8px -10px 16px rgba(11,74,144,.35),0 9px 0 #14508f,0 18px 25px rgba(11,54,100,.32)}
.ui-v2 .dice-face:after{content:"";position:absolute;inset:7px;border-radius:17px;border:1px solid rgba(255,255,255,.48);pointer-events:none}
.ui-v2 .pip{display:none;width:18px;height:18px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0 18%,#fff4ad 19% 40%,#f5b92e 68%,#b66f13);box-shadow:inset 0 2px 2px #fff,0 2px 0 #9b651a,0 3px 6px rgba(18,57,92,.28)}
.ui-v2 .dice[data-value="1"] .pip-5,.ui-v2 .dice[data-value="2"] .pip-1,.ui-v2 .dice[data-value="2"] .pip-9,.ui-v2 .dice[data-value="3"] .pip-1,.ui-v2 .dice[data-value="3"] .pip-5,.ui-v2 .dice[data-value="3"] .pip-9,.ui-v2 .dice[data-value="4"] .pip-1,.ui-v2 .dice[data-value="4"] .pip-3,.ui-v2 .dice[data-value="4"] .pip-7,.ui-v2 .dice[data-value="4"] .pip-9,.ui-v2 .dice[data-value="5"] .pip-1,.ui-v2 .dice[data-value="5"] .pip-3,.ui-v2 .dice[data-value="5"] .pip-5,.ui-v2 .dice[data-value="5"] .pip-7,.ui-v2 .dice[data-value="5"] .pip-9,.ui-v2 .dice[data-value="6"] .pip-1,.ui-v2 .dice[data-value="6"] .pip-3,.ui-v2 .dice[data-value="6"] .pip-4,.ui-v2 .dice[data-value="6"] .pip-6,.ui-v2 .dice[data-value="6"] .pip-7,.ui-v2 .dice[data-value="6"] .pip-9{display:block}
.ui-v2 .dice-enter{animation:premiumDiceEnter .18s cubic-bezier(.2,.9,.2,1) both!important}.ui-v2 .dice.rolling{animation:premiumDiceRoll .42s cubic-bezier(.25,.8,.35,1) infinite!important}.ui-v2 .dice.landing{animation:premiumDiceLand .52s cubic-bezier(.18,.85,.24,1.2) both!important}
@keyframes premiumDiceEnter{from{opacity:0;transform:translateY(-70px) rotate(-18deg) scale(.7)}70%{opacity:1;transform:translateY(8px) rotate(4deg) scale(1.06)}to{transform:none}}
@keyframes premiumDiceRoll{0%{transform:translateY(0) rotateX(0) rotateY(0) rotateZ(-4deg)}35%{transform:translateY(-18px) rotateX(125deg) rotateY(80deg) rotateZ(9deg)}70%{transform:translateY(-5px) rotateX(245deg) rotateY(170deg) rotateZ(-7deg)}100%{transform:translateY(0) rotateX(360deg) rotateY(270deg) rotateZ(3deg)}}
@keyframes premiumDiceLand{0%{transform:translateY(-16px) rotate(8deg) scale(1.08);filter:brightness(1.25)}55%{transform:translateY(7px) rotate(-3deg) scale(.94)}78%{transform:translateY(-3px) rotate(1deg) scale(1.02)}to{transform:none;filter:none}}

.ui-v2 .intro-object.coin{border:0!important;background:none!important;box-shadow:none!important;padding:0!important;overflow:visible!important;animation:none!important}
.ui-v2 .token-edge{position:absolute;inset:4%;display:grid;place-items:center;border-radius:50%;padding:9px;background:conic-gradient(from 20deg,#fff7bb,#cc7b19,#ffe67a,#a85a10,#fff4a4);box-shadow:inset 0 0 0 3px #fff7bd,inset 0 0 0 7px #b86b18,0 9px 0 #8f4b12,0 17px 26px rgba(44,35,66,.34);transform-style:preserve-3d}
.ui-v2 .token-edge:before{content:"";position:absolute;inset:5px;border-radius:50%;border:2px dashed rgba(255,255,255,.72)}
.ui-v2 .token-face{position:relative;width:100%;height:100%;border-radius:50%;overflow:hidden;background:#fff;border:4px solid #fff}.ui-v2 .token-face img{width:100%!important;height:100%!important;object-fit:cover!important;border:0!important;border-radius:50%!important}.ui-v2 .token-face i{position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%);transform:translateX(-120%)}
.ui-v2 .intro-object.coin>b{right:-2px!important;bottom:-2px!important;width:34px!important;height:34px!important;border:3px solid #d59224!important;background:#fff8d5!important;color:#70410f!important}
.ui-v2 .coin.token-enter{animation:premiumTokenEnter .22s cubic-bezier(.2,.9,.2,1) both!important}.ui-v2 .coin.spinning{animation:premiumTokenFlip .48s cubic-bezier(.3,.7,.2,1) infinite!important}.ui-v2 .coin.spinning .token-face i{animation:premiumTokenShine .48s linear infinite}.ui-v2 .coin.settled{animation:premiumTokenSettle .55s cubic-bezier(.2,.85,.25,1.15) both!important}.ui-v2 .coin.player-win .token-edge{box-shadow:inset 0 0 0 3px #eaffff,inset 0 0 0 7px #1caed1,0 9px 0 #126ca7,0 0 35px #5de9ff}.ui-v2 .coin.enemy-win .token-edge{box-shadow:inset 0 0 0 3px #fff0f3,inset 0 0 0 7px #e55776,0 9px 0 #a83150,0 0 35px #ff8da5}
@keyframes premiumTokenEnter{from{opacity:0;transform:translateY(-55px) scale(.7)}70%{opacity:1;transform:translateY(7px) scale(1.06)}to{transform:none}}
@keyframes premiumTokenFlip{0%{transform:translateY(0) rotateY(0) scale(1)}45%{transform:translateY(-22px) rotateY(160deg) scale(.92,1.06)}100%{transform:translateY(0) rotateY(360deg) scale(1)}}
@keyframes premiumTokenShine{to{transform:translateX(120%)}}
@keyframes premiumTokenSettle{0%{transform:translateY(-14px) rotateY(110deg) scale(.9)}50%{transform:translateY(6px) rotateY(350deg) scale(1.08)}76%{transform:translateY(-3px) rotateY(360deg) scale(.98)}to{transform:rotateY(360deg)}}
@media(prefers-reduced-motion:reduce){.ui-v2 .dice-enter,.ui-v2 .dice.rolling,.ui-v2 .dice.landing,.ui-v2 .coin.token-enter,.ui-v2 .coin.spinning,.ui-v2 .coin.settled{animation:none!important}}

/* ======================================================================
   DIRECTED VISUAL 2.11 — marca, artworks reais, prematch e setas locais
   ====================================================================== */
.ui-v2 .brand-lockup .brand-mark{width:58px!important;height:58px!important;flex-basis:58px!important;filter:drop-shadow(0 3px 4px rgba(18,62,117,.24))}.ui-v2 .brand-lockup .brand-mark img,.ui-v2 .auth-badge img{object-fit:contain!important;border-radius:0!important}.ui-v2 .auth-badge{width:116px!important;height:116px!important;background:transparent!important;box-shadow:none!important}

/* Avatar é sempre circular; a moldura pode ornamentar o lado de fora sem
   alterar a geometria da foto ou deslocá-la. */
.ui-v2 .player-avatar,.ui-v2 .player-avatar img,.ui-v2 .avatar-button,.ui-v2 .avatar-button img,.ui-v2 .framed-avatar,.ui-v2 .framed-avatar>img,.ui-v2 .frame-preview,.ui-v2 .frame-preview>img{border-radius:50%!important}.ui-v2 .avatar-button{overflow:visible!important}.ui-v2 .avatar-button>img{overflow:hidden!important;clip-path:circle(50% at 50% 50%)}.ui-v2 .framed-avatar>img{clip-path:circle(48% at 50% 50%);inset:4%!important}.ui-v2 .framed-avatar>.fa-front,.ui-v2 .framed-avatar>.fa-back,.ui-v2 .framed-avatar>.fa-aura{border-radius:50%!important;transform-origin:center!important}

/* Artwork completo substitui o animal normal. A cor do jogador continua no
   aro/pedestal já renderizado por chess-front:before e no power badge. */
.ui-v2 .board.army-ghost .chess-beast,.ui-v2 .board.army-bones .chess-beast,.ui-v2 .board.army-infernal .chess-beast{background-image:var(--army-art)!important;background-size:contain!important;background-repeat:no-repeat!important;background-position:center bottom!important;inset:-10% -16% 5%!important;border-radius:0!important;filter:drop-shadow(0 6px 5px rgba(15,50,78,.3))}.ui-v2 .board.army-ghost .chess-beast{animation:armyGhostIdle 2.8s ease-in-out infinite}.ui-v2 .board.army-bones .chess-beast{animation:armyBoneIdle 3.2s ease-in-out infinite}.ui-v2 .board.army-infernal .chess-beast{animation:armyInfernalIdle 2.5s ease-in-out infinite}.ui-v2 .board.army-ghost .chess-beast:after,.ui-v2 .board.army-bones .chess-beast:after,.ui-v2 .board.army-infernal .chess-beast:after{display:none!important}
@keyframes armyGhostIdle{50%{transform:translateY(-3px);filter:drop-shadow(0 8px 7px rgba(45,229,255,.48))}}@keyframes armyBoneIdle{50%{filter:drop-shadow(0 6px 6px rgba(255,218,116,.4)) brightness(1.04)}}@keyframes armyInfernalIdle{50%{filter:drop-shadow(0 7px 8px rgba(255,91,28,.55)) brightness(1.06)}}

/* Card: composição Power 1/4/8. Detail: comparação e mini-board contidos. */
.ui-v2 .shop-item.army_skin{overflow:hidden!important}.ui-v2 .army-skin-preview{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;align-items:end!important;gap:4px!important;width:100%!important;min-width:0!important;min-height:184px!important;padding:12px 8px 4px!important;overflow:hidden!important;background:radial-gradient(circle at 50% 82%,#fff 0 18%,#dff7ff 55%,#90d4ec)!important}.ui-v2 .army-skin-preview>i{display:none!important}.ui-v2 .army-skin-preview .army-mini{width:100%!important;height:160px!important;aspect-ratio:auto!important;transform:none!important;background:none!important;box-shadow:none!important;border-radius:0!important;display:grid;place-items:end center;position:relative;overflow:visible}.ui-v2 .army-skin-preview .army-mini:before,.ui-v2 .army-skin-preview .army-mini:after{display:none!important}.ui-v2 .army-skin-preview .army-mini img{width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important;filter:drop-shadow(0 6px 5px rgba(28,71,98,.26))}.ui-v2 .army-skin-preview .army-mini b{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#178ed4;color:#fff;border:3px solid #fff;box-shadow:0 3px 0 #10659d;font:900 1rem var(--font-ui)}
.ui-v2 .army-detail{width:min(720px,100%);max-height:min(70vh,700px);min-width:0;display:grid;gap:12px;overflow:auto;padding:4px 10px 12px}.ui-v2 .army-compare{display:grid;grid-template-columns:minmax(0,1fr) 32px minmax(0,1fr);gap:8px;align-items:center;width:100%;min-height:150px}.ui-v2 .army-compare>span{height:150px;min-width:0;position:relative;display:grid;place-items:end center;border-radius:22px;background:linear-gradient(145deg,#fff,#dff5ff);border:2px solid #fff;overflow:hidden;box-shadow:0 6px 18px rgba(21,82,117,.17)}.ui-v2 .army-compare img{width:100%!important;height:128px!important;object-fit:contain!important}.ui-v2 .army-compare small{position:absolute;z-index:2;top:7px;left:9px;padding:4px 8px;border-radius:999px;background:#173f6e;color:#fff;font:900 .65rem var(--font-ui);letter-spacing:.1em}.ui-v2 .army-compare>i{font:900 1.4rem var(--font-ui);color:#18a9cc;text-align:center}.ui-v2 .army-detail .preview-army{width:100%!important;min-width:0!important;display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:8px!important;padding:10px!important;overflow:hidden!important}.ui-v2 .army-detail .army-figure{min-width:0!important;aspect-ratio:.78!important;background:linear-gradient(160deg,#fff,#d9f5ff)!important;overflow:hidden!important;border-radius:20px!important}.ui-v2 .army-detail .army-figure img{position:absolute;inset:2% 2% 8%;width:96%!important;height:90%!important;object-fit:contain!important}.ui-v2 .army-detail .army-figure b{position:absolute!important;z-index:4!important;bottom:4px!important;left:50%!important;transform:translateX(-50%);margin:0!important}.ui-v2 .army-detail .army-figure:not(.army-power-1):not(.army-power-4):not(.army-power-8){display:none!important}.ui-v2 .army-detail .preview-army.show-all{grid-template-columns:repeat(4,minmax(0,1fr))!important}.ui-v2 .army-detail .preview-army.show-all .army-figure{display:grid!important}.ui-v2 .army-preview-toggle{justify-self:center;min-height:48px!important;padding:0 22px!important}

/* Seleção limpa: nenhum destino recebe cor. As únicas indicações ficam na
   célula atual e são botões com área de toque 44px e símbolo visual 22px. */
.ui-v2 .cell.valid,.ui-v2 .cell.move-target,.ui-v2 .cell.attack-target{background:rgba(255,255,255,.055)!important;outline:0!important;box-shadow:none!important}.ui-v2 .cell.valid:before,.ui-v2 .cell.move-target:before,.ui-v2 .cell.attack-target:before{background:radial-gradient(ellipse at 50% 35%,rgba(255,255,255,.78),rgba(87,176,204,.18) 54%,transparent 75%)!important;box-shadow:0 4px 8px rgba(28,91,123,.1)!important}.ui-v2 .cell.selected{background:rgba(255,255,255,.07)!important;outline:0!important;box-shadow:none!important;overflow:visible!important}.ui-v2 .cell.selected:before{box-shadow:0 0 0 3px rgba(255,255,255,.8),0 0 0 6px var(--battle-player-primary),0 7px 16px rgba(22,139,255,.22)!important}.ui-v2 .cell.selected>.piece{transform:translateY(-3px)!important;filter:drop-shadow(0 7px 5px rgba(17,95,147,.25))!important;z-index:12!important}.ui-v2 .piece-direction{position:absolute!important;z-index:24!important;width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;border:0!important;background:transparent!important;display:grid!important;place-items:center!important;cursor:pointer!important;overflow:visible!important}.ui-v2 .piece-direction i{width:23px;height:23px;display:grid;place-items:center;border-radius:8px;background:linear-gradient(145deg,rgba(255,255,255,.98),rgba(113,226,255,.9));border:2px solid #fff;color:#116da7;font:1000 1rem/1 var(--font-ui);box-shadow:0 3px 0 #1683b8,0 5px 12px rgba(19,91,133,.3);animation:directionNudge 1.25s ease-in-out infinite}.ui-v2 .piece-direction.attack i{background:linear-gradient(145deg,#fff2f4,#ff758f);color:#a81942;box-shadow:0 3px 0 #b93055,0 0 13px rgba(255,72,110,.52)}.ui-v2 .piece-direction.dir-top{left:50%;top:-9px;transform:translateX(-50%)}.ui-v2 .piece-direction.dir-bottom{left:50%;bottom:-9px;transform:translateX(-50%)}.ui-v2 .piece-direction.dir-left{left:-9px;top:50%;transform:translateY(-50%)}.ui-v2 .piece-direction.dir-right{right:-9px;top:50%;transform:translateY(-50%)}@keyframes directionNudge{50%{transform:translateY(-2px)}}

/* Dado realmente cúbico: seis faces em perspectiva e trajetória com peso. */
.ui-v2 .intro-object.physical-dice{width:112px!important;height:112px!important;perspective:600px!important;overflow:visible!important;transform-style:preserve-3d!important}.ui-v2 .dice-cube{position:absolute;left:11px;top:11px;width:90px;height:90px;transform-style:preserve-3d;transform:translate3d(-78px,-72px,0) rotateX(-42deg) rotateY(35deg) rotateZ(-18deg)}.ui-v2 .cube-face{position:absolute;inset:0;display:grid;grid-template:repeat(3,1fr)/repeat(3,1fr);place-items:center;border:4px solid #fff;border-radius:18px;background:linear-gradient(145deg,#fff 0%,#dffaff 38%,#71dbf1 100%);box-shadow:inset 5px 5px 10px rgba(255,255,255,.9),inset -7px -8px 12px rgba(17,101,171,.24);backface-visibility:hidden}.ui-v2 .face-1{transform:translateZ(45px)}.ui-v2 .face-2{transform:rotateY(90deg) translateZ(45px)}.ui-v2 .face-3{transform:rotateX(90deg) translateZ(45px)}.ui-v2 .face-4{transform:rotateX(-90deg) translateZ(45px)}.ui-v2 .face-5{transform:rotateY(-90deg) translateZ(45px)}.ui-v2 .face-6{transform:rotateY(180deg) translateZ(45px)}.ui-v2 .cube-face .pip{display:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 28%,#fff7a8,#ffc636 45%,#c66a17 100%);box-shadow:inset 0 2px 2px rgba(255,255,255,.7),0 2px 3px rgba(25,72,120,.35)}.ui-v2 .face-1 .pip-5,.ui-v2 .face-2 .pip-1,.ui-v2 .face-2 .pip-9,.ui-v2 .face-3 .pip-1,.ui-v2 .face-3 .pip-5,.ui-v2 .face-3 .pip-9,.ui-v2 .face-4 .pip-1,.ui-v2 .face-4 .pip-3,.ui-v2 .face-4 .pip-7,.ui-v2 .face-4 .pip-9,.ui-v2 .face-5 .pip-1,.ui-v2 .face-5 .pip-3,.ui-v2 .face-5 .pip-5,.ui-v2 .face-5 .pip-7,.ui-v2 .face-5 .pip-9,.ui-v2 .face-6 .pip-1,.ui-v2 .face-6 .pip-3,.ui-v2 .face-6 .pip-4,.ui-v2 .face-6 .pip-6,.ui-v2 .face-6 .pip-7,.ui-v2 .face-6 .pip-9{display:block}.ui-v2 .dice-ground-shadow{position:absolute;left:4%;right:4%;bottom:-14px;height:22px;border-radius:50%;background:rgba(19,51,85,.28);filter:blur(7px);transform:scale(.45);opacity:.25}.ui-v2 .physical-dice.thrown .dice-cube{animation:dicePhysicalThrow 1.37s cubic-bezier(.16,.78,.22,1) forwards!important}.ui-v2 .physical-dice.thrown .dice-ground-shadow{animation:diceShadow 1.37s ease-out forwards}.ui-v2 .physical-dice.settled .dice-cube{filter:drop-shadow(0 10px 8px rgba(19,54,89,.3))}.ui-v2 .physical-dice.settled{animation:diceSettleGlow .42s ease-out!important}
@keyframes dicePhysicalThrow{0%{transform:translate3d(-78px,-72px,0) rotateX(-42deg) rotateY(35deg) rotateZ(-18deg)}14%{transform:translate3d(-45px,8px,30px) rotateX(165deg) rotateY(130deg) rotateZ(24deg)}25%{transform:translate3d(-24px,-31px,18px) rotateX(285deg) rotateY(235deg) rotateZ(-14deg)}48%{transform:translate3d(10px,6px,8px) rotateX(540deg) rotateY(465deg) rotateZ(12deg)}64%{transform:translate3d(22px,-12px,5px) rotateX(680deg) rotateY(590deg) rotateZ(-7deg)}82%{transform:translate3d(8px,3px,2px) rotateX(735deg) rotateY(672deg) rotateZ(3deg)}92%{transform:translate3d(2px,-3px,1px) rotateX(718deg) rotateY(714deg) rotateZ(-1deg)}100%{transform:translate3d(0,0,0) rotateX(var(--dice-final-x)) rotateY(var(--dice-final-y)) rotateZ(0)}}@keyframes diceShadow{0%{opacity:.08;transform:translateX(-60px) scale(.35)}15%,48%,82%{opacity:.42;transform:translateX(0) scale(.82)}25%,64%,92%{opacity:.18;transform:translateX(12px) scale(.5)}100%{opacity:.34;transform:none}}@keyframes diceSettleGlow{50%{filter:brightness(1.14)}}

/* Cara/coroa com duas faces reais e espessura. A animação termina na face
   indicada por --coin-final, que vem de startingPlayerId. */
.ui-v2 .intro-object.physical-coin{width:118px!important;height:118px!important;perspective:700px!important;overflow:visible!important}.ui-v2 .physical-coin .token-edge{inset:9px!important;padding:0!important;transform-style:preserve-3d!important;box-shadow:inset 0 0 0 4px #fff2a8,inset 0 0 0 9px #b56c18,0 8px 0 #874811,0 14px 22px rgba(52,35,52,.34)!important}.ui-v2 .physical-coin .token-face{position:absolute!important;inset:9px!important;width:auto!important;height:auto!important;backface-visibility:hidden!important;border:4px solid #fff!important;background:#eefbff!important}.ui-v2 .physical-coin .token-back{transform:rotateY(180deg)}.ui-v2 .physical-coin .token-face i{inset:auto 4px 4px auto!important;width:25px;height:25px;border-radius:50%;display:grid;place-items:center;background:#fff7c8;color:#8c5316;font:900 .7rem var(--font-ui);transform:none!important;border:2px solid #d69425}.ui-v2 .physical-coin .coin-shadow{position:absolute;left:8%;right:8%;bottom:-11px;height:20px;border-radius:50%;background:rgba(25,40,72,.32);filter:blur(7px);opacity:.2}.ui-v2 .physical-coin.launched .token-edge{animation:coinPhysicalFlight 2.15s cubic-bezier(.2,.72,.2,1) forwards!important}.ui-v2 .physical-coin.launched .coin-shadow{animation:coinPhysicalShadow 2.15s ease-in-out forwards}.ui-v2 .physical-coin.settled .token-edge{transform:rotateX(12deg) rotateY(var(--coin-final))!important}.ui-v2 .physical-coin.player-win:after,.ui-v2 .physical-coin.enemy-win:after{content:"";position:absolute;inset:-9px;border-radius:50%;border:4px solid #63e9ff;box-shadow:0 0 25px #59ddff;animation:coinWinnerRing .56s ease-out both}.ui-v2 .physical-coin.enemy-win:after{border-color:#ff809c;box-shadow:0 0 25px #ff7895}
@keyframes coinPhysicalFlight{0%{transform:translateY(54px) rotateX(72deg) rotateY(0) scale(.78)}12%{transform:translateY(-15px) rotateX(32deg) rotateY(240deg) scale(.95)}36%{transform:translateY(-70px) rotateX(5deg) rotateY(720deg) scale(1.05)}62%{transform:translateY(-38px) rotateX(12deg) rotateY(1120deg) scale(1)}82%{transform:translateY(7px) rotateX(24deg) rotateY(1500deg) scale(.96)}91%{transform:translateY(-7px) rotateX(15deg) rotateY(1690deg) scale(1.01)}100%{transform:translateY(0) rotateX(12deg) rotateY(calc(1800deg + var(--coin-final))) scale(1)}}@keyframes coinPhysicalShadow{0%{opacity:.4;transform:scale(.72)}36%{opacity:.08;transform:scale(.35)}82%{opacity:.38;transform:scale(.82)}91%{opacity:.2;transform:scale(.55)}100%{opacity:.34;transform:none}}@keyframes coinWinnerRing{from{opacity:0;transform:scale(.72)}55%{opacity:1}to{opacity:.55;transform:scale(1.08)}}

@media(max-width:600px){.ui-v2 .brand-lockup .brand-mark{width:48px!important;height:48px!important;flex-basis:48px!important}.ui-v2 .army-detail{padding:2px 4px 10px}.ui-v2 .army-detail .preview-army.show-all{grid-template-columns:repeat(3,minmax(0,1fr))!important}.ui-v2 .army-skin-preview{min-height:142px!important}.ui-v2 .army-skin-preview .army-mini{height:124px!important}.ui-v2 .piece-direction{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}.ui-v2 .piece-direction i{width:20px;height:20px;font-size:.82rem}}
@media(prefers-reduced-motion:reduce){.ui-v2 .board[class*="army-"] .chess-beast,.ui-v2 .piece-direction i,.ui-v2 .physical-dice .dice-cube,.ui-v2 .physical-coin .token-edge{animation:none!important}}

/* --------------------------------------------------------------------------
   2.14 — corrective visual system. Figma reference: mobile Home / prematch lab.
   This final layer deliberately replaces the legacy header and prematch props.
   -------------------------------------------------------------------------- */
.ui-v2 .game-topbar{min-height:88px!important;padding:max(10px,env(safe-area-inset-top)) 18px 10px!important;background:rgba(248,253,255,.96)!important;border-bottom:1px solid rgba(91,152,184,.2)!important;backdrop-filter:blur(20px) saturate(1.15)}
.ui-v2 .game-topbar__inner{width:min(100%,1280px)!important;min-height:66px!important;display:grid!important;grid-template-columns:minmax(300px,1fr) auto 52px auto!important;grid-template-rows:1fr!important;gap:14px!important;align-items:center!important}
.ui-v2 .account-hud{justify-self:start!important;display:grid!important;grid-template-columns:68px minmax(110px,180px)!important;grid-template-rows:30px 34px!important;gap:0 12px!important;height:68px!important;min-height:68px!important;margin:0!important;overflow:visible!important}
.ui-v2 .game-topbar .avatar-button{grid-column:1!important;grid-row:1/3!important;width:64px!important;height:64px!important;min-width:64px!important;max-width:64px!important;overflow:visible!important;contain:none!important;border:0!important;box-shadow:none!important;background:transparent!important}
.ui-v2 .game-topbar .avatar-button>img{position:absolute!important;inset:11%!important;width:78%!important;height:78%!important;object-fit:cover!important;border-radius:50%!important;clip-path:circle(50% at 50% 50%);z-index:2!important}
.ui-v2 .game-topbar .avatar-button>.fa-aura{inset:-10%!important;width:120%!important;height:120%!important;z-index:0!important;overflow:visible!important}
.ui-v2 .game-topbar .avatar-button>.fa-back{inset:2%!important;width:96%!important;height:96%!important;z-index:1!important;overflow:visible!important}
.ui-v2 .game-topbar .avatar-button>.fa-front{inset:0!important;width:100%!important;height:100%!important;z-index:3!important;overflow:visible!important}
.ui-v2 .game-topbar .avatar-button>.fa-orn{inset:-5%!important;width:110%!important;height:110%!important;z-index:4!important;overflow:visible!important}
.ui-v2 .game-topbar .account-main{grid-column:2!important;grid-row:1!important;align-self:end!important;width:auto!important;min-width:0!important;padding:0!important;text-align:left!important;background:transparent!important;border:0!important}
.ui-v2 .game-topbar .account-main b{display:block!important;max-width:100%!important;font:900 1.02rem/1.15 var(--font-ui)!important;color:#183b62!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ui-v2 .game-topbar .rank-hud{grid-column:2!important;grid-row:2!important;align-self:start!important;display:block!important;width:100%!important;min-width:0!important;min-height:0!important;padding:0!important;text-align:left!important;background:transparent!important;border:0!important;box-shadow:none!important}
.ui-v2 .game-topbar .rank-hud small{display:none!important}.ui-v2 .game-topbar .rank-hud b{display:block!important;font:800 .78rem/1.2 var(--font-ui)!important;color:#52708c!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.ui-v2 .game-topbar .rank-hud em{display:block!important;font:900 .72rem/1.2 var(--font-ui)!important;color:#ef783f!important}.ui-v2 .game-topbar .rank-mini{display:none!important}
.ui-v2 .wallet{justify-self:end!important;display:flex!important;gap:8px!important}.ui-v2 .wallet .currency-chip{min-height:48px!important;border-radius:18px!important;padding:6px 12px!important}.ui-v2 .wallet .currency-chip img{width:30px!important;height:30px!important}.ui-v2 .wallet .currency-chip b{font-size:1rem!important}
.ui-v2 #sound-btn{justify-self:end!important;width:48px!important;height:48px!important}.ui-v2 .logout-btn{display:block!important;min-width:58px!important;padding:0 8px!important}
.ui-v2 .hero-official-brand{display:block;width:clamp(76px,8vw,112px);height:auto;object-fit:contain;margin:0 0 12px;filter:drop-shadow(0 8px 10px rgba(22,90,136,.2))}
.ui-v2 .secondary-actions .action-icon,.ui-v2 .ranked-cta .action-icon{width:38px!important;height:38px!important;object-fit:contain!important}

.ui-v2 .movement-direction-overlay{position:absolute;inset:0;z-index:25;pointer-events:none;overflow:visible}
.ui-v2 .direction-indicator{position:absolute;width:26px;height:26px;display:block;filter:drop-shadow(0 3px 5px rgba(7,80,124,.22));animation:directionGuide 1.5s ease-in-out infinite}
.ui-v2 .direction-indicator img{display:block;width:100%;height:100%}.ui-v2 .direction-indicator.dir-top{left:50%;top:-8px;transform:translateX(-50%)}.ui-v2 .direction-indicator.dir-right{right:-8px;top:50%;transform:translateY(-50%) rotate(90deg)}.ui-v2 .direction-indicator.dir-bottom{left:50%;bottom:-8px;transform:translateX(-50%) rotate(180deg)}.ui-v2 .direction-indicator.dir-left{left:-8px;top:50%;transform:translateY(-50%) rotate(-90deg)}
@keyframes directionGuide{50%{margin-top:-3px}}
.ui-v2 .cell.valid,.ui-v2 .cell.move-target,.ui-v2 .cell.attack-target{background:inherit!important;outline:0!important;box-shadow:none!important}.ui-v2 .cell.valid:before,.ui-v2 .cell.move-target:before,.ui-v2 .cell.attack-target:before{background:inherit!important;box-shadow:inherit!important}

.ui-v2 .intro-object.roulette,.ui-v2 .intro-object.start-spinner{width:150px!important;height:150px!important;border:0!important;background:none!important;box-shadow:none!important;border-radius:0!important;animation:none!important;overflow:visible!important;position:relative!important;transform-style:preserve-3d}
.ui-v2 .roulette-wheel{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transform-origin:50% 50%;will-change:transform;filter:drop-shadow(0 8px 9px rgba(21,57,92,.28))}
.ui-v2 .roulette-result{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;width:50px;height:50px;display:grid;place-items:center;border-radius:50%;font:1000 1.8rem var(--font-ui);color:#154a72;background:#fff8d9;border:4px solid #fff;box-shadow:0 3px 10px rgba(42,71,99,.25);opacity:0}
.ui-v2 .roulette.is-settled .roulette-result{opacity:1;animation:resultPop .42s cubic-bezier(.2,.9,.2,1)}
.ui-v2 .start-spinner-frame{position:absolute;inset:0;width:100%;height:100%;z-index:3;pointer-events:none}.ui-v2 .start-spinner-disc{position:absolute;inset:12%;border-radius:50%;overflow:hidden;transform-origin:center;will-change:transform;display:grid;grid-template-columns:1fr 1fr;background:linear-gradient(90deg,#239be5 0 50%,#ff708e 50%);box-shadow:inset 0 0 0 5px rgba(255,255,255,.85)}.ui-v2 .start-spinner-disc img{width:100%;height:100%;object-fit:cover}.ui-v2 .start-spinner-disc img:first-child{clip-path:inset(0 0 0 0)}.ui-v2 .start-spinner-disc img:last-child{clip-path:inset(0 0 0 0)}.ui-v2 .start-spinner-winner{position:absolute;inset:-8px;border-radius:50%;border:4px solid #fff3a2;box-shadow:0 0 28px #ffd958;opacity:0;z-index:5}.ui-v2 .start-spinner.is-settled .start-spinner-winner{opacity:1;animation:resultPop .5s ease-out}
@keyframes resultPop{0%{transform:translate(-50%,-50%) scale(.55);opacity:0}70%{transform:translate(-50%,-50%) scale(1.12);opacity:1}100%{transform:translate(-50%,-50%) scale(1);opacity:1}}

@media(max-width:600px){
  .ui-v2 .game-topbar{min-height:142px!important;padding:max(8px,env(safe-area-inset-top)) 12px 10px!important}
  .ui-v2 .game-topbar__inner{grid-template-columns:minmax(0,1fr) 48px!important;grid-template-rows:68px 48px!important;gap:8px 10px!important}
  .ui-v2 .account-hud{grid-column:1!important;grid-row:1!important;grid-template-columns:66px minmax(0,1fr)!important;width:100%!important;height:66px!important;min-height:66px!important}
  .ui-v2 .game-topbar .avatar-button{width:62px!important;height:62px!important;min-width:62px!important;max-width:62px!important}
  .ui-v2 #sound-btn{grid-column:2!important;grid-row:1!important;width:48px!important;height:48px!important}
  .ui-v2 .wallet{grid-column:1/3!important;grid-row:2!important;justify-self:stretch!important;justify-content:center!important}.ui-v2 .wallet .currency-chip{flex:1 1 0;max-width:164px!important;min-height:44px!important}
  .ui-v2 .logout-btn{display:none!important}.ui-v2 .home-scroll{padding-top:12px!important}.ui-v2 .hero-official-brand{width:82px;margin-bottom:8px}.ui-v2 .season-hero .eyebrow{margin-top:0!important}
  .ui-v2 .direction-indicator{width:22px;height:22px}.ui-v2 .direction-indicator.dir-top{top:-6px}.ui-v2 .direction-indicator.dir-right{right:-6px}.ui-v2 .direction-indicator.dir-bottom{bottom:-6px}.ui-v2 .direction-indicator.dir-left{left:-6px}
  .ui-v2 .intro-object.roulette,.ui-v2 .intro-object.start-spinner{width:116px!important;height:116px!important}
}
@media(prefers-reduced-motion:reduce){.ui-v2 .direction-indicator{animation:none!important}}

/* 2.11.1 — contenção final dos exércitos e direção vetorial. A regra antiga
   continua abaixo do tema base por compatibilidade, mas estas regras mais
   específicas impedem que a arte ultrapasse a célula ou seja aplicada à IA. */
.ui-v2 .board.army-ghost .piece.owner-a .chess-beast,
.ui-v2 .board.army-bones .piece.owner-a .chess-beast,
.ui-v2 .board.army-infernal .piece.owner-a .chess-beast{
  inset:0 1% 5%!important;opacity:1!important;visibility:visible!important;
  background-size:contain!important;background-position:center bottom!important
}
.ui-v2 .board.army-ghost .piece.owner-b .chess-beast,
.ui-v2 .board.army-bones .piece.owner-b .chess-beast,
.ui-v2 .board.army-infernal .piece.owner-b .chess-beast{
  inset:1% 0 4%!important;background-image:url('assets/pieces/animal-chess-figurines-v2.png')!important;
  background-size:400% 200%!important;background-repeat:no-repeat!important;
  animation:figurineIdle 2.9s ease-in-out infinite!important
}
.ui-v2 .board[class*="army-"] .piece.owner-b .beast-chick{background-position:0 0!important}
.ui-v2 .board[class*="army-"] .piece.owner-b .beast-rabbit{background-position:33.333% 0!important}
.ui-v2 .board[class*="army-"] .piece.owner-b .beast-fox{background-position:66.666% 0!important}
.ui-v2 .board[class*="army-"] .piece.owner-b .beast-wolf{background-position:100% 0!important}
.ui-v2 .board[class*="army-"] .piece.owner-b .beast-tiger{background-position:0 100%!important}
.ui-v2 .board[class*="army-"] .piece.owner-b .beast-bear{background-position:33.333% 100%!important}
.ui-v2 .board[class*="army-"] .piece.owner-b .beast-lion{background-position:66.666% 100%!important}
.ui-v2 .board[class*="army-"] .piece.owner-b .beast-elephant{background-position:100% 100%!important}
.ui-v2 .piece-direction i{width:24px!important;height:24px!important;border-radius:50%!important;background:radial-gradient(circle at 34% 25%,#fff 0 18%,#a8f2ff 45%,#38bddd 78%,#147eae)!important;color:#fff!important;box-shadow:inset 0 1px 2px rgba(255,255,255,.9),0 2px 0 #0c719d,0 5px 11px rgba(19,91,133,.3)!important}
.ui-v2 .piece-direction.attack i{background:radial-gradient(circle at 34% 25%,#fff 0 14%,#ffacba 38%,#f14f71 76%,#a82149)!important;box-shadow:inset 0 1px 2px rgba(255,255,255,.85),0 2px 0 #9e2346,0 0 13px rgba(255,72,110,.52)!important}
.ui-v2 .piece-direction svg{width:15px;height:15px;display:block;fill:currentColor;filter:drop-shadow(0 1px 1px rgba(11,73,106,.45))}
.ui-v2 .piece-direction.dir-right svg{transform:rotate(90deg)}
.ui-v2 .piece-direction.dir-bottom svg{transform:rotate(180deg)}
.ui-v2 .piece-direction.dir-left svg{transform:rotate(-90deg)}

/* A foto, a amostra e todas as camadas da moldura compartilham o mesmo
   centro e diâmetro. Isso elimina a aparência quadrada/deslocada do header. */
.ui-v2 .avatar-button,.ui-v2 .frame-sample,.ui-v2 .frame-sample>.framed-avatar{border-radius:50%!important;aspect-ratio:1!important}
.ui-v2 .avatar-button{width:52px!important;height:52px!important;flex-basis:52px!important}
.ui-v2 .avatar-button>img{position:absolute!important;inset:5%!important;width:90%!important;height:90%!important;object-fit:cover!important;border-radius:50%!important}
.ui-v2 .avatar-button>.fa-aura,.ui-v2 .avatar-button>.fa-back,.ui-v2 .avatar-button>.fa-front,.ui-v2 .avatar-button>.fa-orn{position:absolute!important;left:50%!important;top:50%!important;right:auto!important;bottom:auto!important;width:118%!important;height:118%!important;transform:translate(-50%,-50%);border-radius:50%!important}
.ui-v2 .avatar-button>.fa-aura{width:138%!important;height:138%!important}
.ui-v2 .avatar-button>.fa-orn{width:130%!important;height:130%!important}
.ui-v2 .frame-sample{border:0!important;box-shadow:none!important;overflow:visible!important}
.ui-v2 .frame-sample>.framed-avatar{width:64px!important;height:64px!important;display:block!important}
.ui-v2 .frame-choice.selected small{color:#b34254!important;font-weight:900!important}
.ui-v2 .piece .chess-beast:has(>.army-piece-art){background-image:none!important}
.ui-v2 .piece .chess-beast>.army-piece-art{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:contain;object-position:center bottom;border:0!important;border-radius:0!important;pointer-events:none;opacity:1;visibility:visible}
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-front{clip-path:circle(50% at 50% 50%)!important}
.ui-v2 .framed-avatar:not(.frame_basic)>.fa-back{background:conic-gradient(from 25deg,#fff 0 5%,#9deeff 12%,#316da8 24%,#f9d87a 38%,#fff 49%,#55cdec 63%,#234f88 76%,#ffe7a0 90%,#fff)!important;box-shadow:inset 0 0 0 3px rgba(255,255,255,.95),inset 0 0 0 7px rgba(25,83,132,.32),0 0 16px rgba(68,210,244,.42)!important}
.ui-v2 .framed-avatar:not(.frame_basic)>.fa-aura{background:radial-gradient(circle,rgba(104,235,255,.42) 0 45%,rgba(255,208,90,.18) 57%,transparent 72%)!important;animation:cosmeticAura 2.2s ease-in-out infinite}
.ui-v2 .cosmetic-preview-stage.type-frame>.preview-frame{width:min(60%,340px)!important;aspect-ratio:1!important;display:grid!important;place-items:center!important}
.ui-v2 .cosmetic-preview-stage.type-frame>.preview-frame>.framed-avatar{position:relative!important;left:auto!important;bottom:auto!important;transform:none!important;min-width:0!important;width:100%!important;height:100%!important;aspect-ratio:1!important;display:block!important;padding:0!important;background:none!important;box-shadow:none!important}
@media(max-width:720px){.ui-v2 .cosmetic-preview-stage.type-frame>.preview-frame{width:min(58%,220px)!important}}

/* 2.12 — progressão única em FP, cabeçalho ampliado e loja de exércitos. */
.ui-v2 .account-hud{display:grid!important;grid-template-columns:64px minmax(72px,auto) minmax(170px,230px)!important;align-items:center!important;gap:10px!important}.ui-v2 .avatar-button{width:62px!important;height:62px!important;flex-basis:62px!important}.ui-v2 .account-main{min-width:0!important;padding:6px 2px!important}.ui-v2 .account-main>b{font:900 1rem/1.15 var(--font-ui)!important;max-width:130px;display:block;overflow:hidden;text-overflow:ellipsis}.ui-v2 .rank-hud{min-width:170px!important;padding:6px 10px!important}.ui-v2 .rank-hud>div{width:100%!important}.ui-v2 .rank-hud em{font:900 .72rem var(--font-ui)!important;color:#ef7d3d!important}.ui-v2 .ranked-cta{grid-template-columns:48px 1fr!important;grid-template-rows:1fr!important;min-height:68px!important}.ui-v2 .ranked-cta>b{grid-column:2!important;font-size:1.22rem!important}.ui-v2 .currency-chip img,.ui-v2 .quest-reward-icon{object-fit:contain!important}.ui-v2 .currency-chip img{width:31px!important;height:31px!important}.ui-v2 .quest-reward-icon{width:20px;height:20px;vertical-align:middle;margin-right:4px}.ui-v2 .battle-turn-count{display:block;text-align:center;font:900 .72rem var(--font-ui);letter-spacing:.11em;color:#496882;margin-bottom:2px}.ui-v2 .settings-card{max-height:min(88vh,760px);overflow:auto}.ui-v2 .settings-card .graphics-setting{margin:10px 0 18px}.ui-v2 .progress-explain{grid-template-columns:1fr!important}.ui-v2 .army-full-header{display:flex;justify-content:space-between;align-items:end;gap:12px;padding:4px 4px 0}.ui-v2 .army-full-header small{font:900 .68rem var(--font-ui);letter-spacing:.08em;color:#e76e49}.ui-v2 .army-full-header b{font:900 1rem var(--font-ui);color:#203f65}.ui-v2 .army-detail .preview-army.show-all{padding:14px!important;background:linear-gradient(145deg,rgba(255,255,255,.95),rgba(211,242,252,.92))!important;border-radius:24px!important;border:2px solid #fff!important;box-shadow:inset 0 0 0 1px #bddde9,0 10px 24px rgba(22,75,107,.13)}.ui-v2 .army-figure.asset-missing{background:#ffe7e7!important}.ui-v2 .army-figure.asset-missing:after{content:'ASSET AUSENTE';position:absolute;inset:0;display:grid;place-items:center;color:#a82b3c;font:900 .65rem var(--font-ui)}
.ui-v2 .army-detail.full-view{position:absolute;inset:10px;width:auto;height:auto;max-height:none;align-content:start;overflow:clip;transform:none}.ui-v2 .army-detail.full-view .army-compare{display:none}.ui-v2 .army-detail.full-view .preview-army.show-all{gap:6px!important;padding:8px!important}.ui-v2 .army-detail.full-view .army-figure{aspect-ratio:1!important;min-height:0!important}.ui-v2 .army-detail.full-view .army-preview-toggle{min-height:42px!important}
.ui-v2 .cosmetic-preview-stage:has(.army-detail.full-view){place-items:start center;padding-top:10px}
@media(max-width:720px){.ui-v2 .cosmetic-preview-card{grid-template-rows:auto auto}.ui-v2 .army-detail.full-view{position:relative;inset:auto;overflow:visible}.ui-v2 .cosmetic-preview-stage:has(.army-detail.full-view){min-height:700px}}
@media(max-width:720px){.ui-v2 .account-hud{grid-template-columns:56px minmax(60px,1fr)!important}.ui-v2 .avatar-button{width:54px!important;height:54px!important}.ui-v2 .rank-hud{grid-column:2;min-width:0!important;width:100%!important}.ui-v2 .account-main{align-self:end}.ui-v2 .army-full-header{align-items:start;flex-direction:column}.ui-v2 .army-detail .preview-army.show-all{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:600px){
  .ui-v2 .game-topbar__inner{grid-template-rows:58px 38px!important}
  .ui-v2 .account-hud{grid-template-columns:56px minmax(0,1fr)!important;grid-template-rows:29px 29px!important;height:58px!important}
  .ui-v2 .avatar-button{grid-column:1!important;grid-row:1/3!important}
  .ui-v2 .account-main{grid-column:2!important;grid-row:1!important;align-self:end!important}
  .ui-v2 .rank-hud{display:flex!important;grid-column:2!important;grid-row:2!important;min-height:27px!important;width:100%!important;padding:0!important;border:0!important;justify-content:flex-start!important;background:transparent!important;border-radius:0!important}
  .ui-v2 .rank-hud>span,.ui-v2 .rank-hud small,.ui-v2 .rank-hud .rank-mini{display:none!important}
  .ui-v2 .rank-hud>div{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:6px!important}
  .ui-v2 .rank-hud b{font-size:.65rem!important;max-width:125px!important}
  .ui-v2 .rank-hud em{font-size:.64rem!important;white-space:nowrap!important}
}

/* 2.13 — AvatarFrame: uma caixa circular única. A arte ocupa exatamente o
   diâmetro do componente e nunca altera o grid do cabeçalho. */
.ui-v2 .framed-avatar,
.ui-v2 .avatar-button,
.ui-v2 .frame-preview{
  position:relative!important;box-sizing:border-box!important;aspect-ratio:1!important;
  border-radius:50%!important;overflow:visible!important;isolation:isolate!important
}
.ui-v2 .framed-avatar>img,
.ui-v2 .avatar-button>img,
.ui-v2 .frame-preview>img{
  position:absolute!important;z-index:2!important;inset:14%!important;width:72%!important;height:72%!important;
  border-radius:50%!important;clip-path:circle(50% at 50% 50%)!important;object-fit:cover!important;
  object-position:var(--avatar-position,50% 50%)!important
}
.ui-v2 .framed-avatar>.fa-aura,.ui-v2 .framed-avatar>.fa-back,
.ui-v2 .framed-avatar>.fa-front,.ui-v2 .framed-avatar>.fa-orn{
  position:absolute!important;left:0!important;top:0!important;right:0!important;bottom:0!important;
  width:100%!important;height:100%!important;inset:0!important;border-radius:50%!important;
  transform:none!important;transform-origin:center!important;pointer-events:none!important
}
.ui-v2 .framed-avatar>.fa-aura{z-index:0!important;inset:4%!important;width:92%!important;height:92%!important}
.ui-v2 .framed-avatar>.fa-back{z-index:1!important;inset:7%!important;width:86%!important;height:86%!important}
.ui-v2 .framed-avatar>.fa-front{z-index:3!important;background:var(--frame-art) center/contain no-repeat!important}
.ui-v2 .framed-avatar>.fa-orn{z-index:4!important}
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-front{inset:0!important;width:100%!important;height:100%!important;clip-path:none!important}
.ui-v2 .avatar-button>span:not([class]){z-index:6!important;right:-1px!important;bottom:-1px!important}
.ui-v2 .account-hud{overflow:visible!important}
.ui-v2 .gem-tier-icon{width:100%!important;height:82px!important;padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}
.ui-v2 .gem-tier-icon img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;filter:drop-shadow(0 6px 7px rgba(20,75,116,.22))}
.ui-v2 .gem-pack{grid-template-rows:auto 82px auto auto auto!important;align-content:start!important;min-height:268px!important}
@media(max-width:600px){.ui-v2 .gem-tier-icon{height:70px!important}.ui-v2 .gem-pack{min-height:238px!important}}

/* Marcador físico de revelação: o servidor define o número e a animação
   apenas conduz o ponteiro até ele. */
.ui-v2 .intro-object.physical-marker{width:150px!important;height:150px!important;perspective:700px!important;overflow:visible!important}
.ui-v2 .physical-marker .marker-shadow{position:absolute;left:12%;right:12%;bottom:2px;height:24px;border-radius:50%;background:rgba(20,50,78,.32);filter:blur(8px);opacity:.22}
.ui-v2 .physical-marker .reveal-marker{position:absolute;inset:7px;border-radius:50%;display:grid;place-items:center;transform:translate3d(-95px,-70px,34px) rotateX(58deg) rotateZ(-260deg) scale(.72);background:radial-gradient(circle at 38% 30%,#fbffff 0 20%,#b9f4ff 42%,#28abd8 70%,#15538f 100%);border:7px solid #fff;box-shadow:inset 0 0 0 6px #1b8fc2,inset 0 -14px 22px rgba(15,65,118,.35),0 12px 0 #144a78,0 20px 24px rgba(18,55,91,.32);transform-style:preserve-3d}
.ui-v2 .physical-marker .marker-ring{position:absolute;inset:8px;border-radius:50%;border:3px solid rgba(255,255,255,.72);transform:rotate(calc(-1 * var(--marker-final)))}
.ui-v2 .physical-marker .marker-slot{position:absolute;left:50%;top:50%;width:28px;height:28px;margin:-14px;display:grid;place-items:center;border-radius:50%;background:#f8fdff;color:#174e80;border:2px solid #7bdcf2;font:900 .82rem var(--font-ui);box-shadow:0 3px 0 rgba(18,84,130,.25)}
.ui-v2 .physical-marker .marker-slot-1{transform:rotate(0deg) translateY(-51px) rotate(0deg)}.ui-v2 .physical-marker .marker-slot-2{transform:rotate(60deg) translateY(-51px) rotate(-60deg)}.ui-v2 .physical-marker .marker-slot-3{transform:rotate(120deg) translateY(-51px) rotate(-120deg)}.ui-v2 .physical-marker .marker-slot-4{transform:rotate(180deg) translateY(-51px) rotate(-180deg)}.ui-v2 .physical-marker .marker-slot-5{transform:rotate(240deg) translateY(-51px) rotate(-240deg)}.ui-v2 .physical-marker .marker-slot-6{transform:rotate(300deg) translateY(-51px) rotate(-300deg)}
.ui-v2 .physical-marker .marker-slot.is-result{background:#fff1a8;color:#9b5511;border-color:#ffc438;box-shadow:0 0 0 4px rgba(255,218,75,.25),0 0 16px #ffd84a}
.ui-v2 .physical-marker .marker-dart{position:absolute;left:50%;top:50%;width:18px;height:67px;margin:-58px -9px 0;transform-origin:50% 58px;transform:rotate(var(--marker-final));filter:drop-shadow(0 4px 3px rgba(15,56,96,.42))}.ui-v2 .physical-marker .marker-dart:before{content:"";position:absolute;left:2px;top:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:25px solid #ff765b}.ui-v2 .physical-marker .marker-dart i{position:absolute;left:6px;top:21px;width:6px;height:40px;border-radius:6px;background:linear-gradient(#fff3b4,#e69a20)}
.ui-v2 .physical-marker .reveal-marker>b{width:48px;height:48px;display:grid;place-items:center;border-radius:50%;background:linear-gradient(145deg,#fff,#dff9ff);color:#105c94;border:4px solid #fff;font:1000 1.55rem var(--font-ui);box-shadow:0 4px 0 #136a9f;opacity:0}
.ui-v2 .physical-marker.thrown .reveal-marker{animation:markerPhysicalThrow 1.52s cubic-bezier(.15,.76,.18,1) forwards!important}.ui-v2 .physical-marker.thrown .marker-shadow{animation:markerPhysicalShadow 1.52s ease-out forwards}.ui-v2 .physical-marker.settled .reveal-marker>b{animation:markerResultPop .4s ease-out forwards}.ui-v2 .physical-marker.settled{animation:diceSettleGlow .42s ease-out!important}
@keyframes markerPhysicalThrow{0%{transform:translate3d(-95px,-70px,34px) rotateX(58deg) rotateZ(-260deg) scale(.72)}18%{transform:translate3d(-50px,5px,18px) rotateX(48deg) rotateZ(80deg) scale(.9)}38%{transform:translate3d(20px,-24px,12px) rotateX(32deg) rotateZ(430deg) scale(1.04)}62%{transform:translate3d(28px,7px,5px) rotateX(20deg) rotateZ(690deg) scale(.98)}82%{transform:translate3d(-6px,-5px,2px) rotateX(12deg) rotateZ(810deg) scale(1.01)}100%{transform:translate3d(0,0,0) rotateX(9deg) rotateZ(calc(1080deg + var(--marker-final))) scale(1)}}
@keyframes markerPhysicalShadow{0%{opacity:.08;transform:translateX(-65px) scale(.35)}38%{opacity:.16;transform:translateX(15px) scale(.48)}62%{opacity:.38;transform:translateX(24px) scale(.86)}100%{opacity:.32;transform:none}}@keyframes markerResultPop{from{opacity:0;transform:scale(.55)}70%{opacity:1;transform:scale(1.12)}to{opacity:1;transform:none}}
.ui-v2 .physical-coin.launched .token-edge{animation-duration:2.45s!important}.ui-v2 .physical-coin.launched .coin-shadow{animation-duration:2.45s!important}
.ui-v2 .action-icon{width:38px!important;height:38px!important;object-fit:contain;grid-row:1/3;align-self:center;filter:drop-shadow(0 3px 3px rgba(24,80,130,.22))}.ui-v2 .ranked-cta .action-icon{width:44px!important;height:44px!important}.ui-v2 #sound-btn>img{width:26px;height:26px}.ui-v2 .secondary.game-secondary-button:has(.action-icon){display:grid!important;grid-template-columns:42px 1fr;grid-template-rows:auto auto;text-align:left;align-items:center}.ui-v2 .secondary.game-secondary-button:has(.action-icon)>b,.ui-v2 .secondary.game-secondary-button:has(.action-icon)>small{grid-column:2}
.ui-v2 .auth-rank-row>img{width:42px;height:42px;border-radius:50%;object-fit:cover;background:white;border:3px solid white;box-shadow:0 3px 8px rgba(31,80,120,.2)}
.ui-v2 .fx-play>img{width:52px;height:52px;display:block;filter:drop-shadow(0 5px 8px rgba(28,53,96,.25))}.ui-v2 .fx-running .fx-play>img{animation:fxIconPop 520ms cubic-bezier(.2,.9,.2,1)}@keyframes fxIconPop{50%{transform:scale(1.18) rotate(8deg);filter:brightness(1.2)}}

/* 2.13 — correções direcionadas validadas no jogo real. */
/* A moldura jamais define o tamanho do cabeçalho: todas as camadas terminam
   dentro do círculo de 62px e o retrato possui recorte próprio. */
.ui-v2 .game-topbar .avatar-button{width:62px!important;height:62px!important;min-width:62px!important;max-width:62px!important;contain:layout!important}
.ui-v2 .game-topbar .avatar-button>img{inset:12%!important;width:76%!important;height:76%!important;transform:scale(var(--avatar-scale,1))!important}
.ui-v2 .game-topbar .avatar-button>.fa-aura{inset:1%!important;width:98%!important;height:98%!important;filter:none!important}
.ui-v2 .game-topbar .avatar-button>.fa-back{inset:5%!important;width:90%!important;height:90%!important}
.ui-v2 .game-topbar .avatar-button>.fa-front,
.ui-v2 .game-topbar .avatar-button>.fa-orn{inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important}
.ui-v2 .game-topbar .account-hud{min-height:64px!important;overflow:visible!important}
.ui-v2 .framed-avatar.frame_copper>.fa-front{border:3px solid #d68c4f!important;box-shadow:inset 0 0 0 2px #fff1d6,inset 0 0 0 5px #8e4a26,0 0 8px rgba(191,104,44,.35)}
.ui-v2 .framed-avatar.frame_rabbit>.fa-front{border:3px solid #f1a9c8!important;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px #b85883,0 0 9px rgba(232,113,169,.34)}
.ui-v2 .framed-avatar.frame_fox>.fa-front{border:3px solid #ff9a50!important;box-shadow:inset 0 0 0 2px #fff4da,inset 0 0 0 5px #b54b25,0 0 10px rgba(236,102,43,.4)}
.ui-v2 .framed-avatar.frame_wolf>.fa-front{border:3px solid #a9c9ed!important;box-shadow:inset 0 0 0 2px #fff,inset 0 0 0 5px #4d6999,0 0 10px rgba(91,139,195,.38)}
.ui-v2 .framed-avatar.frame_tiger>.fa-front{border:3px solid #f6b83e!important;box-shadow:inset 0 0 0 2px #fff5cf,inset 0 0 0 5px #5f4023,0 0 11px rgba(242,159,34,.4)}
.ui-v2 .framed-avatar.frame_bear>.fa-front{border:3px solid #a9825c!important;box-shadow:inset 0 0 0 2px #f8e9d4,inset 0 0 0 5px #513a2a,0 0 10px rgba(114,79,50,.35)}
.ui-v2 .framed-avatar.frame_lion>.fa-front,.ui-v2 .framed-avatar.frame_legend>.fa-front{border:3px solid #f6cb4b!important;box-shadow:inset 0 0 0 2px #fff8ca,inset 0 0 0 5px #9d6410,0 0 12px rgba(246,190,40,.5)}

/* A célula selecionada fica limpa. Somente a própria peça sobe e recebe
   pedestal luminoso; destinos nunca são pintados. */
.ui-v2 .battle-shell .cell.selected,
.ui-v2 .battle-shell .cell.valid,
.ui-v2 .battle-shell .cell.move-target,
.ui-v2 .battle-shell .cell.attack-target{background:rgba(255,255,255,.055)!important;outline:0!important;box-shadow:inset 0 2px 0 rgba(255,255,255,.7),inset 0 -2px 0 rgba(64,128,164,.1)!important}
.ui-v2 .battle-shell .cell.selected:before,
.ui-v2 .battle-shell .cell.valid:before,
.ui-v2 .battle-shell .cell.move-target:before,
.ui-v2 .battle-shell .cell.attack-target:before{background:transparent!important;box-shadow:none!important;border-color:rgba(72,142,175,.11)!important}
.ui-v2 .battle-shell .cell.selected>.piece{transform:translateY(-3px)!important;filter:drop-shadow(0 0 7px rgba(68,225,255,.65)) drop-shadow(0 8px 5px rgba(17,77,120,.3))!important}
.ui-v2 .battle-shell .cell:focus-visible{outline:3px solid rgba(39,186,219,.75)!important;outline-offset:-4px}

/* Setas = pequenos indicadores de borda, sem bolhas nem botões coloridos. A
   área clicável continua 44px, mas o desenho ocupa somente 19px. */
.ui-v2 .piece-direction{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
.ui-v2 .piece-direction i{width:25px!important;height:25px!important;border:0!important;border-radius:4px!important;background:linear-gradient(145deg,#dfffff 0 18%,#27cde8 42%,#0878bc 100%)!important;color:#fff!important;box-shadow:0 2px 0 #075c92,0 0 0 2px rgba(255,255,255,.92),0 0 12px rgba(18,193,229,.68)!important;clip-path:polygon(50% 0,100% 48%,72% 48%,72% 100%,28% 100%,28% 48%,0 48%)!important}
.ui-v2 .piece-direction.attack i{background:linear-gradient(145deg,#fff0e7 0 15%,#ff6a72 42%,#bd2448 100%)!important;color:#fff!important;box-shadow:0 2px 0 #891b39,0 0 0 2px rgba(255,255,255,.92),0 0 14px rgba(255,62,91,.72)!important}
.ui-v2 .piece-direction svg{width:12px!important;height:12px!important;opacity:.9}
.ui-v2 .piece-direction.dir-top{top:-6px!important}.ui-v2 .piece-direction.dir-bottom{bottom:-6px!important}.ui-v2 .piece-direction.dir-left{left:-6px!important}.ui-v2 .piece-direction.dir-right{right:-6px!important}

/* A prévia completa pertence ao fluxo e rola dentro do palco. Nunca usa
   absolute nem deixa as ilustrações escaparem do modal. */
.ui-v2 .army-detail.full-view{position:relative!important;inset:auto!important;width:100%!important;height:auto!important;max-height:100%!important;overflow:auto!important;align-content:start!important;padding:8px!important;box-sizing:border-box!important}
.ui-v2 .army-detail.full-view .preview-army.show-all{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important;overflow:visible!important}
.ui-v2 .army-detail.full-view .army-figure{aspect-ratio:.78!important;min-height:0!important;max-width:100%!important}
.ui-v2 .cosmetic-preview-stage:has(.army-detail.full-view){display:block!important;overflow-x:hidden!important;overflow-y:auto!important;min-width:0!important;padding:10px!important}
@media(max-width:720px){
  .ui-v2 .game-topbar .avatar-button{width:54px!important;height:54px!important;min-width:54px!important;max-width:54px!important}
  .ui-v2 .army-detail.full-view .preview-army.show-all{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .ui-v2 .cosmetic-preview-stage:has(.army-detail.full-view){min-height:0!important;max-height:68vh!important}
}

/* 2.14 final cascade lock: responsive header with a strict circular frame box.
   Premium ornaments remain visible, but never exceed the avatar diameter. */
.ui-v2 .game-topbar__inner{grid-template-columns:minmax(300px,1fr) auto 52px auto!important;grid-template-rows:1fr!important}
.ui-v2 .game-topbar .account-hud{grid-template-columns:68px minmax(110px,180px)!important;grid-template-rows:30px 34px!important;height:68px!important;min-height:68px!important;margin:0!important}
.ui-v2 .game-topbar .avatar-button{grid-column:1!important;grid-row:1/3!important;width:64px!important;height:64px!important;min-width:64px!important;max-width:64px!important;contain:layout paint!important;overflow:hidden!important;border-radius:50%!important}
.ui-v2 .game-topbar .avatar-button>img{inset:11%!important;width:78%!important;height:78%!important}
.ui-v2 .game-topbar .avatar-button>.fa-aura{inset:1%!important;width:98%!important;height:98%!important}.ui-v2 .game-topbar .avatar-button>.fa-back{inset:4%!important;width:92%!important;height:92%!important}.ui-v2 .game-topbar .avatar-button>.fa-front,.ui-v2 .game-topbar .avatar-button>.fa-orn{inset:0!important;width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important}
.ui-v2 .game-topbar .account-main{grid-column:2!important;grid-row:1!important;display:block!important;align-self:end!important}.ui-v2 .game-topbar .rank-hud{grid-column:2!important;grid-row:2!important;display:block!important;align-self:start!important}
@media(max-width:600px){.ui-v2 .game-topbar__inner{grid-template-columns:minmax(0,1fr) 48px!important;grid-template-rows:68px 48px!important}.ui-v2 .game-topbar .account-hud{grid-column:1!important;grid-row:1!important;grid-template-columns:66px minmax(0,1fr)!important;width:100%!important}.ui-v2 .game-topbar .avatar-button{width:62px!important;height:62px!important;min-width:62px!important;max-width:62px!important}.ui-v2 #sound-btn{grid-column:2!important;grid-row:1!important}.ui-v2 .wallet{grid-column:1/3!important;grid-row:2!important}.ui-v2 .logout-btn{display:none!important}}

/* 2.15 — FRAME SYSTEM 2.0. Somente o retrato recorta; a joalheria externa
   permanece livre. As nove camadas são estáveis em Header/Store/Battle. */
.ui-v2 .framed-avatar{--metal:#9dc5d8;--metal-hi:#f8fdff;--metal-lo:#37647d;--gem:#41c9e9;overflow:visible!important;contain:layout!important;border-radius:50%!important}
.ui-v2 .framed-avatar>img{position:absolute!important;inset:10%!important;width:80%!important;height:80%!important;object-fit:cover!important;object-position:var(--avatar-position,50% 50%)!important;border-radius:50%!important;clip-path:circle(50%)!important;transform:scale(var(--avatar-scale,1))!important;z-index:4!important}
.ui-v2 .framed-avatar>i{position:absolute;pointer-events:none;display:block;box-sizing:border-box}
.ui-v2 .framed-avatar>.fa-aura{inset:-22%;z-index:0;border-radius:50%}
.ui-v2 .framed-avatar>.fa-back-ornament{inset:-19%;z-index:1}
.ui-v2 .framed-avatar>.fa-back,.ui-v2 .framed-avatar>.fa-frame-back{inset:-13%;z-index:2;border-radius:50%}
.ui-v2 .framed-avatar>.fa-back{background:none!important;box-shadow:none!important}
.ui-v2 .framed-avatar>.fa-frame-back{background:linear-gradient(145deg,var(--metal-hi),var(--metal) 46%,var(--metal-lo));box-shadow:0 .09em .16em rgba(14,45,65,.34)}
.ui-v2 .framed-avatar>.fa-frame-front{inset:-7%;z-index:5;border:clamp(2px,.075em,7px) solid var(--metal);border-top-color:var(--metal-hi);border-bottom-color:var(--metal-lo);border-radius:50%;box-shadow:inset 0 0 0 clamp(1px,.025em,3px) rgba(255,255,255,.8)}
.ui-v2 .framed-avatar>.fa-front{display:none!important}
.ui-v2 .framed-avatar>.fa-front-ornament{inset:-19%;z-index:6}
.ui-v2 .framed-avatar>.fa-orn{display:none!important}
.ui-v2 .framed-avatar>.fa-crest{z-index:7;left:50%;top:-20%;width:42%;height:34%;translate:-50% 0;background:linear-gradient(145deg,var(--metal-hi),var(--metal) 50%,var(--metal-lo));clip-path:polygon(50% 0,92% 26%,82% 77%,50% 100%,18% 77%,8% 26%);filter:drop-shadow(0 .06em .06em rgba(25,53,75,.4))}
.ui-v2 .framed-avatar>.fa-crest:after{content:"";position:absolute;inset:28%;background:var(--gem);rotate:45deg;box-shadow:inset 2px 2px rgba(255,255,255,.75),0 0 .08em var(--gem)}
.ui-v2 .framed-avatar>.fa-particles{inset:-30%;z-index:8}
.ui-v2 .framed-avatar>.fa-light-fx{inset:-17%;z-index:9;overflow:hidden;border-radius:42%}

/* Rank: cada classe altera geometria e objeto, não apenas a cor. */
.ui-v2 .frame_basic{--metal:#d5aa66;--metal-hi:#fff0c3;--metal-lo:#6f4824;--gem:#f8e7b5}
.ui-v2 .frame_basic>.fa-frame-back{clip-path:polygon(20% 4%,38% 11%,50% 0,62% 11%,81% 4%,91% 21%,86% 41%,100% 58%,83% 73%,76% 96%,56% 91%,50% 100%,42% 90%,22% 97%,16% 76%,0 61%,13% 42%,8% 20%)}
.ui-v2 .frame_basic>.fa-front-ornament{background:radial-gradient(ellipse at 20% 79%,#f1d581 0 8%,transparent 9%),radial-gradient(ellipse at 80% 79%,#f1d581 0 8%,transparent 9%)}
.ui-v2 .frame_basic>.fa-crest{clip-path:polygon(50% 0,66% 35%,100% 53%,67% 74%,50% 100%,32% 74%,0 53%,34% 35%)}

.ui-v2 .frame_copper{--metal:#c8793e;--metal-hi:#ffd1a0;--metal-lo:#663019;--gem:#ed9c55}
.ui-v2 .frame_copper>.fa-frame-back{border-radius:16%!important;clip-path:polygon(15% 0,39% 7%,50% 0,61% 7%,85% 0,100% 16%,93% 39%,100% 50%,93% 62%,100% 85%,85% 100%,62% 93%,50% 100%,38% 93%,14% 100%,0 84%,7% 61%,0 50%,7% 38%,0 15%)}
.ui-v2 .frame_copper>.fa-front-ornament{background:radial-gradient(circle at 9% 22%,#3e241b 0 3%,#ffd0a2 3.5% 5%,transparent 5.5%),radial-gradient(circle at 91% 22%,#3e241b 0 3%,#ffd0a2 3.5% 5%,transparent 5.5%),radial-gradient(circle at 9% 78%,#3e241b 0 3%,#ffd0a2 3.5% 5%,transparent 5.5%),radial-gradient(circle at 91% 78%,#3e241b 0 3%,#ffd0a2 3.5% 5%,transparent 5.5%)}

.ui-v2 .frame_rabbit{--metal:#d9e2eb;--metal-hi:#fff;--metal-lo:#8a7897;--gem:#ff75b2}
.ui-v2 .frame_rabbit>.fa-back-ornament{background:linear-gradient(100deg,#fff 8%,#e9a8c6 40%,#8f7898) 25% 0/20% 48% no-repeat,linear-gradient(80deg,#8f7898,#e9a8c6 60%,#fff) 75% 0/20% 48% no-repeat;clip-path:polygon(20% 0,39% 0,46% 42%,54% 42%,61% 0,80% 0,69% 53%,100% 65%,79% 100%,21% 100%,0 65%,31% 53%)}
.ui-v2 .frame_rabbit>.fa-frame-back{clip-path:polygon(16% 9%,36% 15%,50% 5%,64% 15%,84% 9%,91% 31%,100% 50%,90% 70%,79% 93%,57% 89%,50% 100%,43% 89%,21% 93%,10% 70%,0 50%,9% 31%)}

.ui-v2 .frame_fox{--metal:#bb552d;--metal-hi:#ffb063;--metal-lo:#4e241e;--gem:#ff6a2e}
.ui-v2 .frame_fox>.fa-frame-back{clip-path:polygon(0 0,35% 14%,50% 5%,65% 14%,100% 0,88% 38%,100% 52%,84% 65%,91% 100%,60% 87%,50% 100%,38% 87%,7% 100%,16% 65%,0 52%,12% 38%)}
.ui-v2 .frame_fox>.fa-front-ornament{background:conic-gradient(from 120deg at 82% 77%,transparent,#f3a461 0 18%,#7d301e 19% 31%,transparent 32%);clip-path:polygon(0 0,100% 0,100% 100%,52% 100%,70% 73%,78% 44%,90% 68%,90% 91%,100% 100%,0 100%)}

.ui-v2 .frame_wolf{--metal:#8ea8c7;--metal-hi:#f7fdff;--metal-lo:#324f78;--gem:#48afff}
.ui-v2 .frame_wolf>.fa-back-ornament{inset:-28%;border-radius:50%;background:radial-gradient(circle at 67% 44%,transparent 0 37%,#dcecff 38% 50%,#718aaa 51% 54%,transparent 55%)}
.ui-v2 .frame_wolf>.fa-frame-back{clip-path:polygon(14% 4%,37% 15%,50% 0,63% 15%,86% 4%,84% 29%,100% 42%,89% 59%,96% 82%,69% 82%,50% 100%,31% 82%,4% 82%,11% 59%,0 42%,16% 29%)}
.ui-v2 .frame_wolf>.fa-front-ornament{background:linear-gradient(135deg,transparent 44%,#68c7ff 45% 55%,transparent 56%) 5% 15%/23% 23% no-repeat,linear-gradient(45deg,transparent 44%,#68c7ff 45% 55%,transparent 56%) 95% 65%/23% 23% no-repeat}

.ui-v2 .frame_tiger{--metal:#161a22;--metal-hi:#ffcf55;--metal-lo:#080a0e;--gem:#f5a317}
.ui-v2 .frame_tiger>.fa-frame-back{clip-path:polygon(8% 0,31% 14%,50% 2%,69% 14%,92% 0,85% 31%,100% 45%,84% 58%,100% 86%,68% 80%,50% 100%,32% 80%,0 86%,16% 58%,0 45%,15% 31%)}
.ui-v2 .frame_tiger>.fa-front-ornament{background:linear-gradient(105deg,transparent 45%,#f5b42c 46% 54%,transparent 55%) 0 38%/38% 10% no-repeat,linear-gradient(100deg,transparent 45%,#f5b42c 46% 54%,transparent 55%) 0 52%/42% 10% no-repeat,linear-gradient(95deg,transparent 45%,#f5b42c 46% 54%,transparent 55%) 0 66%/38% 10% no-repeat}

.ui-v2 .frame_bear{--metal:#68727f;--metal-hi:#dce5ea;--metal-lo:#2d3339;--gem:#77716a}
.ui-v2 .frame_bear>.fa-frame-back{border-radius:12%!important;clip-path:polygon(0 8%,22% 8%,28% 0,45% 0,50% 8%,55% 0,72% 0,78% 8%,100% 8%,100% 92%,76% 92%,70% 100%,54% 100%,50% 92%,46% 100%,30% 100%,24% 92%,0 92%)}
.ui-v2 .frame_bear>.fa-front-ornament{background:linear-gradient(#4a515a,#24282d) 0 20%/18% 62% no-repeat,linear-gradient(#4a515a,#24282d) 100% 20%/18% 62% no-repeat;clip-path:polygon(0 0,100% 0,100% 100%,75% 100%,75% 80%,25% 80%,25% 100%,0 100%)}

.ui-v2 .frame_lion{--metal:#d9a529;--metal-hi:#fff3a2;--metal-lo:#7b4b09;--gem:#ffb31f}
.ui-v2 .frame_lion>.fa-frame-back{clip-path:polygon(50% 0,62% 10%,77% 4%,84% 18%,100% 23%,91% 42%,100% 54%,88% 64%,91% 84%,69% 84%,50% 100%,31% 84%,9% 84%,12% 64%,0 54%,9% 42%,0 23%,16% 18%,23% 4%,38% 10%)}
.ui-v2 .frame_lion>.fa-crest{height:42%;top:-27%;clip-path:polygon(5% 5%,28% 40%,50% 0,72% 40%,95% 5%,82% 100%,18% 100%)}

.ui-v2 .frame_legend{--metal:#e8d598;--metal-hi:#fff;--metal-lo:#95712e;--gem:#6fdcff}
.ui-v2 .frame_legend>.fa-aura{background:radial-gradient(circle,rgba(255,237,151,.5),transparent 68%)}
.ui-v2 .frame_legend>.fa-back-ornament{background:linear-gradient(30deg,transparent 40%,#f8f3dc 41% 54%,transparent 55%) 0 45%/42% 48% no-repeat,linear-gradient(-30deg,transparent 40%,#f8f3dc 41% 54%,transparent 55%) 100% 45%/42% 48% no-repeat}
.ui-v2 .frame_legend>.fa-frame-back{clip-path:polygon(50% 0,61% 10%,76% 2%,83% 18%,100% 25%,88% 43%,100% 58%,82% 69%,88% 92%,62% 85%,50% 100%,38% 85%,12% 92%,18% 69%,0 58%,12% 43%,0 25%,17% 18%,24% 2%,39% 10%)}
.ui-v2 .frame_legend>.fa-front-ornament{background:radial-gradient(ellipse at 17% 70%,#dec16f 0 6%,transparent 7%),radial-gradient(ellipse at 83% 70%,#dec16f 0 6%,transparent 7%)}

/* Premium: três materiais e três linguagens de movimento independentes. */
.ui-v2 [data-frame-category="premium"]{--frame-scale:1.28}
.ui-v2 .frame_gold{--metal:#e2a827;--metal-hi:#fff6b2;--metal-lo:#80500a;--gem:#fff172}
.ui-v2 .frame_gold>.fa-aura{background:repeating-conic-gradient(from 0deg,rgba(255,214,69,.8) 0 4deg,transparent 5deg 28deg);animation:tffSolarBreath 5s ease-in-out infinite}
.ui-v2 .frame_gold>.fa-frame-back{clip-path:polygon(50% 0,59% 13%,72% 2%,77% 17%,93% 13%,88% 32%,100% 43%,88% 54%,100% 70%,80% 72%,74% 94%,57% 87%,50% 100%,43% 87%,26% 94%,20% 72%,0 70%,12% 54%,0 43%,12% 32%,7% 13%,23% 17%,28% 2%,41% 13%)}
.ui-v2 .frame_gold>.fa-front-ornament{background:radial-gradient(circle at 14% 52%,#fff4a4 0 5%,#e4a626 6% 11%,transparent 12%),radial-gradient(circle at 86% 52%,#fff4a4 0 5%,#e4a626 6% 11%,transparent 12%)}
.ui-v2 .frame_gold>.fa-light-fx{background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.9) 48%,transparent 64%);animation:tffSolarSweep 5s cubic-bezier(.2,.8,.2,1) infinite}
.ui-v2 .frame_gold>.fa-particles{background:radial-gradient(circle at 22% 20%,#fff 0 1.5%,transparent 2%),radial-gradient(circle at 81% 28%,#ffe064 0 1.4%,transparent 2%),radial-gradient(circle at 72% 85%,#fff 0 1%,transparent 1.7%);animation:tffGoldenSparks 4.6s steps(1,end) infinite}

.ui-v2 .frame_prism{--metal:#7edfff;--metal-hi:#fff;--metal-lo:#543c9a;--gem:#dc77ff}
.ui-v2 .frame_prism>.fa-frame-back{background:linear-gradient(145deg,#ebffff,#62e6ff 25%,#7362ee 55%,#ef74db);clip-path:polygon(45% 0,57% 12%,67% 1%,73% 18%,91% 8%,87% 33%,100% 45%,87% 57%,98% 79%,74% 77%,65% 100%,50% 86%,34% 100%,27% 78%,3% 81%,14% 58%,0 44%,15% 31%,10% 9%,31% 18%)}
.ui-v2 .frame_prism>.fa-back-ornament{background:linear-gradient(135deg,#83efff,#a563ff) 5% 12%/25% 28% no-repeat,linear-gradient(45deg,#ff83df,#62dfff) 92% 66%/24% 31% no-repeat;clip-path:polygon(14% 0,30% 24%,18% 41%,0 25%,78% 100%,65% 75%,84% 57%,100% 77%);animation:tffCrystalFloat 6s ease-in-out infinite}
.ui-v2 .frame_prism>.fa-front-ornament{background:linear-gradient(130deg,#fff,#59e7ff 42%,#9a55ec) 10% 74%/24% 25% no-repeat,linear-gradient(45deg,#fff,#ef75d5 48%,#6655d5) 90% 18%/21% 28% no-repeat;clip-path:polygon(0 61%,26% 75%,14% 100%,78% 0,100% 17%,83% 39%);animation:tffCrystalOrbit 6s ease-in-out infinite}
.ui-v2 .frame_prism>.fa-light-fx{background:conic-gradient(from 0deg,transparent,#8df2ff55,#f28df255,transparent);animation:tffRefraction 6s ease-in-out infinite}

.ui-v2 .frame_flame{--metal:#22232a;--metal-hi:#68616a;--metal-lo:#090a0d;--gem:#ff5217}
.ui-v2 .frame_flame>.fa-frame-back{background:linear-gradient(145deg,#58545a,#171820 45%,#050608);clip-path:polygon(8% 0,31% 14%,43% 0,50% 18%,60% 0,71% 14%,93% 0,85% 32%,100% 43%,86% 55%,100% 75%,78% 75%,72% 100%,54% 84%,50% 100%,44% 84%,28% 100%,22% 75%,0 75%,14% 55%,0 43%,15% 32%);box-shadow:inset 0 0 0 3px #ff5a19,0 0 13px #ff491888}
.ui-v2 .frame_flame>.fa-front-ornament{background:linear-gradient(75deg,transparent 42%,#ff4f17 44% 50%,transparent 52%) 0 0/100% 100%,linear-gradient(-60deg,transparent 42%,#ff922c 44% 49%,transparent 52%);animation:tffForgeCracks 3.8s ease-in-out infinite}
.ui-v2 .frame_flame>.fa-crest{background:linear-gradient(#ff972d,#ff3b13 55%,#191922);clip-path:polygon(0 100%,13% 38%,32% 63%,45% 0,58% 57%,79% 22%,100% 100%);animation:tffLocalizedFlame 3.8s ease-in-out infinite}
.ui-v2 .frame_flame>.fa-particles{background:radial-gradient(circle at 20% 85%,#ffb13b 0 1.5%,transparent 2%),radial-gradient(circle at 72% 82%,#ff5b1d 0 1.5%,transparent 2%),radial-gradient(circle at 88% 62%,#ffd263 0 1%,transparent 1.7%);animation:tffEmbers 3.8s ease-out infinite}

@keyframes tffSolarBreath{50%{scale:1.045;opacity:.72}}
@keyframes tffSolarSweep{0%,12%{translate:-140% 0;opacity:0}24%{opacity:.85}43%,100%{translate:150% 0;opacity:0}}
@keyframes tffGoldenSparks{0%,100%{opacity:.25;rotate:0}35%{opacity:1}70%{opacity:.5;rotate:6deg}}
@keyframes tffCrystalFloat{0%,100%{translate:0 0;rotate:-1deg}50%{translate:0 -5%;rotate:2deg}}
@keyframes tffCrystalOrbit{0%,100%{translate:-2% 1%;rotate:-2deg}50%{translate:3% -2%;rotate:3deg}}
@keyframes tffRefraction{0%,100%{rotate:-7deg;opacity:.25}50%{rotate:9deg;opacity:.62}}
@keyframes tffForgeCracks{0%,100%{filter:drop-shadow(0 0 2px #ff4211);opacity:.72}48%{filter:drop-shadow(0 0 9px #ff8b2b);opacity:1}}
@keyframes tffLocalizedFlame{0%,100%{scale:1 .94;filter:drop-shadow(0 0 4px #ff3b11)}55%{scale:.96 1.08;filter:drop-shadow(0 0 10px #ff7b1e)}}
@keyframes tffEmbers{0%{translate:0 18%;opacity:0}20%{opacity:1}100%{translate:3% -26%;opacity:0}}

/* O header reserva espaço lógico de 64px, mas não usa paint containment: isso
   impediria a frame de existir fora do recorte. Ornamentos seguem visíveis. */
.ui-v2 .game-topbar .avatar-button{contain:layout!important;overflow:visible!important}
.ui-v2 .game-topbar .avatar-button>img{inset:12%!important;width:76%!important;height:76%!important}
.ui-v2 .game-topbar .avatar-button>i{font-size:64px;scale:var(--frame-compact-scale,1.1)}
.ui-v2 .game-topbar .account-hud{padding-left:8px!important}
.ui-v2 .participant-avatar.framed-avatar>i,.ui-v2 .battle-avatar.framed-avatar>i{scale:var(--frame-compact-scale,1.1)}
.ui-v2 .frame-sample .framed-avatar,.ui-v2 .preview-frame .framed-avatar{font-size:96px}

.ui-v2.graphics-medium .framed-avatar>.fa-particles{display:none!important}
.ui-v2.graphics-low .framed-avatar>.fa-particles,.ui-v2.graphics-low .framed-avatar>.fa-light-fx{display:none!important}
.ui-v2.graphics-low .framed-avatar>i{animation-duration:8s!important}
@media(prefers-reduced-motion:reduce){.ui-v2 .framed-avatar>i{animation:none!important}.ui-v2 .framed-avatar>.fa-particles,.ui-v2 .framed-avatar>.fa-light-fx{display:none!important}}
html:has(.board),body.ui-v2:has(.board){height:auto!important;min-height:100%!important;overflow:auto!important}.ui-v2>.board{min-height:max-content!important}
html:has(body>main.board){overflow:auto!important;height:auto!important}body.ui-v2>main.board{position:relative!important;inset:auto!important;width:min(1180px,100%)!important;max-width:1180px!important;height:auto!important;min-height:0!important;aspect-ratio:auto!important;overflow:visible!important;display:grid!important;grid-template-columns:1fr!important;place-items:stretch!important;transform:none!important}

/* Preview de produto: o palco pode ser retangular, a moldura nunca. */
.ui-v2 .storefront .shop-item>.frame-preview{position:relative!important;width:100%!important;height:140px!important;min-height:140px!important;display:grid!important;place-items:center!important;overflow:visible!important;border:0!important;background:radial-gradient(circle,#fff 0 38%,rgba(225,245,252,.62) 70%,transparent)!important;box-shadow:none!important;animation:none!important}
.ui-v2 .storefront .frame-preview>.framed-avatar{position:relative!important;width:104px!important;height:104px!important;min-width:104px!important;min-height:104px!important;aspect-ratio:1!important;display:block!important;border:0!important;background:transparent!important;box-shadow:none!important}
.ui-v2 .storefront .frame-preview>.framed-avatar>i{font-size:104px}
.ui-v2 .storefront .frame-preview>.framed-avatar>img{border-radius:50%!important}
.ui-v2 .game-topbar__inner{padding-top:12px!important;padding-left:max(18px,var(--safe-left))!important;min-height:94px!important}
.ui-v2 .game-topbar .account-hud{margin-left:10px!important;align-self:center!important}
@media(max-width:600px){.ui-v2 .storefront .frame-preview>.framed-avatar{width:88px!important;height:88px!important;min-width:88px!important;min-height:88px!important}.ui-v2 .storefront .frame-preview>.framed-avatar>i{font-size:88px}.ui-v2 .game-topbar__inner{padding-top:12px!important;padding-left:max(16px,var(--safe-left))!important}}

/* 2.16 — correção visual cirúrgica. Assets próprios substituem o antigo
   sistema de anéis/recolors. O retrato continua circular e independente. */
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-aura,
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-back-ornament,
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-back,
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-front-ornament,
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-crest{background:none!important;border:0!important;box-shadow:none!important;clip-path:none!important}
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-frame-back{inset:-24%!important;border:0!important;border-radius:0!important;clip-path:none!important;background:var(--frame-art) center/contain no-repeat!important;box-shadow:none!important;filter:drop-shadow(0 .08em .09em rgba(15,47,71,.28))}
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-frame-front{inset:-24%!important;border:0!important;border-radius:0!important;clip-path:none!important;background:var(--frame-art) center/contain no-repeat!important;box-shadow:none!important}
.ui-v2 .framed-avatar[style*="--frame-art"]>.fa-light-fx{inset:-24%!important;border-radius:0!important;overflow:hidden!important;background:linear-gradient(110deg,transparent 34%,rgba(255,255,255,.88) 47%,transparent 60%)!important;-webkit-mask:radial-gradient(circle,transparent 0 52%,#000 55% 70%,transparent 73%);mask:radial-gradient(circle,transparent 0 52%,#000 55% 70%,transparent 73%);animation:none!important}
.ui-v2 .framed-avatar.frame_gold>.fa-light-fx{animation:tffFrameMaskedSweep 4.8s cubic-bezier(.22,.8,.2,1) infinite!important}
.ui-v2 .framed-avatar.frame_prism>.fa-light-fx{background:conic-gradient(from 10deg,transparent,#84eeff 20%,#f386df 31%,transparent 44%)!important;animation:tffFramePrismOrbit 5.8s ease-in-out infinite!important}
.ui-v2 .framed-avatar.frame_flame>.fa-light-fx{background:radial-gradient(circle at 50% 92%,rgba(255,147,39,.9),transparent 45%)!important;animation:tffFrameHeat 2.7s ease-in-out infinite!important}
.ui-v2 .framed-avatar.frame_gold>.fa-aura{background:radial-gradient(circle,rgba(255,221,91,.32),transparent 69%)!important;animation:tffSolarBreath 5s ease-in-out infinite!important}
.ui-v2 .framed-avatar.frame_prism>.fa-particles{background:radial-gradient(circle at 16% 28%,#fff 0 1.8%,transparent 2.5%),radial-gradient(circle at 84% 35%,#86eaff 0 1.8%,transparent 2.5%),radial-gradient(circle at 28% 85%,#ee82ff 0 1.5%,transparent 2.3%)!important;animation:tffCrystalFloat 5.5s ease-in-out infinite!important}
.ui-v2 .framed-avatar.frame_flame>.fa-particles{background:radial-gradient(circle at 25% 86%,#ffc14c 0 1.7%,transparent 2.4%),radial-gradient(circle at 70% 82%,#ff6324 0 1.7%,transparent 2.4%),radial-gradient(circle at 87% 68%,#ffe184 0 1.2%,transparent 2%)!important;animation:tffEmbers 3.1s ease-out infinite!important}
@keyframes tffFrameMaskedSweep{0%,12%{background-position:-180% 0;opacity:0}25%{opacity:.9}48%,100%{background-position:180% 0;opacity:0}}
@keyframes tffFramePrismOrbit{0%,100%{rotate:-8deg;opacity:.35}50%{rotate:12deg;opacity:.78}}
@keyframes tffFrameHeat{0%,100%{opacity:.35;scale:.98}50%{opacity:.86;scale:1.02}}

/* O bloco identidade usa o avatar como referência vertical, sem top/margin hack. */
.ui-v2 .game-topbar .account-hud{grid-template-columns:86px minmax(120px,190px)!important;grid-template-rows:auto auto!important;align-content:center!important;align-items:center!important;column-gap:var(--space-2)!important;row-gap:3px!important}
.ui-v2 .game-topbar .account-main{grid-column:2!important;grid-row:1!important;align-self:end!important;display:flex!important;align-items:flex-end!important;min-height:0!important;padding:0!important}
.ui-v2 .game-topbar .rank-hud{grid-column:2!important;grid-row:2!important;align-self:start!important;min-height:0!important;padding:0!important}

/* Marcadores orientativos presos aos bounds da célula; nunca ao personagem. */
.ui-v2 .movement-direction-overlay{position:absolute!important;inset:0!important;z-index:25!important;pointer-events:none!important;overflow:visible!important}
.ui-v2 .direction-indicator{--marker-top:#f7feff;--marker-mid:#62ddf3;--marker-bottom:#0786bc;--edge-shift:0px;position:absolute!important;width:30px!important;height:24px!important;display:block!important;margin:0!important;padding:0!important;box-sizing:border-box!important;background:linear-gradient(180deg,var(--marker-top),var(--marker-mid) 38%,var(--marker-bottom))!important;border:0!important;border-radius:0!important;clip-path:polygon(50% 0,100% 62%,73% 62%,73% 100%,27% 100%,27% 62%,0 62%)!important;box-shadow:none!important;filter:drop-shadow(0 2px 1px #fff) drop-shadow(0 3px 4px rgba(7,80,124,.42))!important;transform:none!important;pointer-events:none!important}
.ui-v2 .direction-indicator::after{content:"";position:absolute;inset:3px 5px 7px;background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,255,255,0));clip-path:polygon(50% 0,100% 62%,70% 62%,50% 34%,30% 62%,0 62%);opacity:.75}
.ui-v2 .direction-indicator img{display:none!important}
.ui-v2 .direction-indicator.dir-top{left:50%!important;top:0!important;translate:-50% -50%;rotate:0deg;animation:edgeTop 1.55s ease-in-out infinite!important}
.ui-v2 .direction-indicator.dir-right{right:0!important;top:50%!important;translate:50% -50%;rotate:90deg;animation:edgeRight 1.55s ease-in-out infinite!important}
.ui-v2 .direction-indicator.dir-bottom{left:50%!important;bottom:0!important;translate:-50% 50%;rotate:180deg;animation:edgeBottom 1.55s ease-in-out infinite!important}
.ui-v2 .direction-indicator.dir-left{left:0!important;top:50%!important;translate:-50% -50%;rotate:-90deg;animation:edgeLeft 1.55s ease-in-out infinite!important}
.ui-v2 .direction-indicator.attack{--marker-top:#fff8f8;--marker-mid:#ff8294;--marker-bottom:#db2148;filter:drop-shadow(0 2px 1px #fff) drop-shadow(0 0 6px rgba(244,79,103,.72))!important}
@keyframes edgeTop{50%{translate:-50% calc(-50% - 2px)}}@keyframes edgeRight{50%{translate:calc(50% + 2px) -50%}}@keyframes edgeBottom{50%{translate:-50% calc(50% + 2px)}}@keyframes edgeLeft{50%{translate:calc(-50% - 2px) -50%}}

/* Prematch 2.16: o disco da roleta é estático; somente o ponteiro gira. */
.ui-v2 .versus-search.prematch-v2{grid-template-columns:1fr!important;justify-items:center!important}
.ui-v2 .versus-search.prematch-v2>#intro-self,.ui-v2 .versus-search.prematch-v2>#intro-rival{display:none!important}
.ui-v2 .intro-object.roulette{width:168px!important;height:168px!important}
.ui-v2 .roulette-wheel{transform:none!important;animation:none!important;will-change:auto!important}
.ui-v2 .roulette-pointer{position:absolute;inset:12%;z-index:4;transform-origin:center;will-change:transform;pointer-events:none}
.ui-v2 .roulette-pointer:before{content:"";position:absolute;left:50%;top:50%;width:30px;height:30px;translate:-50% -50%;border-radius:50%;background:radial-gradient(circle at 34% 28%,#fff7bd,#e5a427 68%,#81520a);border:4px solid #fff7cc;box-shadow:0 4px 10px rgba(30,57,78,.32)}
.ui-v2 .roulette-pointer>i{position:absolute;left:50%;top:7%;width:20px;height:48%;translate:-50% 0;clip-path:polygon(50% 0,100% 42%,67% 42%,62% 100%,38% 100%,33% 42%,0 42%);background:linear-gradient(#ff9979,#ef4f58);filter:drop-shadow(0 3px 2px rgba(72,28,39,.35))}
.ui-v2 .roulette-result{z-index:6}

/* TFF Start Selector V2: avatares estáticos e rotor frontal independente. */
.ui-v2 .intro-object.start-selector{width:min(340px,82vw)!important;height:150px!important;display:grid!important;grid-template-columns:1fr 82px 1fr!important;align-items:center!important;gap:14px!important;border:0!important;background:none!important;box-shadow:none!important;overflow:visible!important}
.ui-v2 .start-player{display:grid;justify-items:center;gap:6px;position:relative;transition:transform .35s ease,filter .35s ease}
.ui-v2 .start-player img{width:78px;height:78px;border-radius:50%;object-fit:cover;border:5px solid white;box-shadow:0 0 0 4px #2d86df,0 9px 18px rgba(20,65,98,.22)}
.ui-v2 .start-player-b img{box-shadow:0 0 0 4px #ef6587,0 9px 18px rgba(20,65,98,.22)}
.ui-v2 .start-player b{max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:900 .7rem var(--font-ui);color:#173b60}
.ui-v2 .start-selector-core{position:relative;width:82px;height:82px;border-radius:50%;background:linear-gradient(145deg,#fff8bd,#d69a20);border:7px solid #fff;box-shadow:0 0 0 4px #244f75,0 10px 18px rgba(20,53,79,.28)}
.ui-v2 .start-selector-rotor{position:absolute;inset:12%;border-radius:50%;background:conic-gradient(from 45deg,#22bdd7 0 25%,#ffffff 25% 50%,#f16a85 50% 75%,#ffd65b 75%);clip-path:polygon(50% 0,64% 34%,100% 50%,64% 66%,50% 100%,36% 66%,0 50%,36% 34%);transform-origin:center;will-change:transform}
.ui-v2 .start-selector.is-settled[data-winner="a"] .start-player-a,.ui-v2 .start-selector.is-settled[data-winner="b"] .start-player-b{transform:translateY(-5px);filter:drop-shadow(0 0 12px #ffe36e)}
.ui-v2 .start-selector.is-settled[data-winner="a"] .start-player-a:after,.ui-v2 .start-selector.is-settled[data-winner="b"] .start-player-b:after{content:"START";position:absolute;top:-18px;padding:3px 8px;border-radius:99px;background:#ffd956;color:#684004;font:1000 .58rem var(--font-ui);letter-spacing:.08em;border:2px solid white}
@media(max-width:600px){.ui-v2 .game-topbar .account-hud{grid-template-columns:80px minmax(0,1fr)!important;grid-template-rows:auto auto!important;align-content:center!important;column-gap:var(--space-1)!important}.ui-v2 .direction-indicator{width:25px!important;height:20px!important}.ui-v2 .intro-object.start-selector{grid-template-columns:1fr 66px 1fr!important;gap:10px!important}.ui-v2 .start-selector-core{width:66px;height:66px}.ui-v2 .start-player img{width:64px;height:64px}}